:root{
  --ink:#17202a;
  --muted:#637083;
  --line:#dce3ea;
  --panel:#fff;
  --brand:#0f766e;
  --accent:#2563eb;
  --danger:#b42318;
  --shadow:0 20px 45px rgba(23,32,42,.08)}
*{
  box-sizing:border-box}
body{
  margin:0;
    font-family:Inter,Segoe UI,Arial,sans-serif;
    background:#edf2f6;
    color:var(--ink)}
button,input,select{
  font:inherit}
button{
  border:0;
    cursor:pointer}
.hidden{
  display:none!important}
.login-screen{
  min-height:100vh;
    display:grid;
    place-items:center;
    padding:24px;
    background:linear-gradient(135deg,#e8f5f2,#f7f2e8 48%,#e9f0fb)}
.login-panel{
  width:min(430px,100%);
    background:#fff;
    border:1px solid var(--line);
    border-radius:8px;
    padding:34px;
    box-shadow:var(--shadow)}
.brand-mark{
  width:54px;
    height:54px;
    border-radius:8px;
    display:grid;
    place-items:center;
    background:#0f766e;
    color:#fff;
    font-weight:800}
.brand-mark.small{
  width:40px;
    height:40px;
    font-size:14px}
.login-panel h1{
  margin:18px 0 8px;
    font-size:38px;
    letter-spacing:0}
.login-panel p{
      color:var(--muted);
    line-height:1.5}
.login-form,label{
      display:grid;
    gap:8px}
.login-form{
  gap:16px;
    margin:24px 0 12px}
  label{
    font-size:13px;
    font-weight:700;
    color:#2f3b49}
  input,select{
    width:100%;
    border:1px solid #cbd5df;
    border-radius:7px;
    background:#fff;
    padding:11px 12px;
    color:var(--ink)}
input:focus,select:focus{
    outline:3px solid rgba(37,99,235,.16);
    border-color:var(--accent)}
.login-form button,.project-form button,.primary-action{
  background:var(--brand);
    color:#fff;
    border-radius:7px;
    padding:12px 16px;
    font-weight:800}
.workspace{
    min-height:100vh;
    display:grid;
    grid-template-columns:260px 1fr}
.sidebar{
  background:#102027;
    color:#edf7f5;
    padding:22px;
    display:flex;
    flex-direction:column;
    gap:26px}
.brand-row{
    display:flex;
    align-items:center;
    gap:12px}
.brand-row span,.current-user small{
    display:block;
    color:#a9bec4;
    font-size:12px}.nav-list{display:grid;
    gap:8px}.nav-item{background:transparent;
    color:#dce8ea;
    text-align:left;
    border-radius:7px;
    padding:12px 14px;
    font-weight:700}
.nav-item.active,.nav-item:hover{
  background:#1d3942;
    color:#fff}
  .current-user{
    margin-top:auto;
    border-top:1px solid rgba(255,255,255,.14);
    padding-top:18px;
    display:grid;
    gap:8px}
.ghost-button{
  background:transparent;
    color:#fff;
    border:1px solid rgba(255,255,255,.24);
    border-radius:7px;
    padding:9px}
.content{
  padding:24px;
    min-width:0}
.topbar{
  display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
    gap:16px}
.eyebrow{margin:0 0 5px;
    color:var(--muted);
    text-transform:uppercase;
    font-weight:800;
    font-size:11px;
    letter-spacing:.08em}
.topbar h2{margin:0;
    font-size:30px}
.status-pill{border:1px solid var(--line);
    background:#fff;
    border-radius:999px;
    padding:9px 13px;
    color:var(--muted);
    font-size:13px;
    font-weight:800}
.view{display:none}
.view.active{
  display:block}
.panel{
  background:var(--panel);
    border:1px solid var(--line);
    border-radius:8px;
    padding:20px;
    box-shadow:0 1px 0 rgba(23,32,42,.03)}
.timer-layout,.report-grid{
  display:grid;
    grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr);
    gap:18px}
.timer-head,.section-title{
  display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
    margin-bottom:18px}
.timer-head h3{
    font-size:52px;
    margin:0;
    letter-spacing:0}
.timer-state{background:#eef8f6;
    color:#115e59;
    border-radius:999px;
    padding:8px 12px;
    font-weight:800}
.form-grid,.project-form,.filters,.metric-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px}.wide{grid-column:1/-1}
.timer-actions{
    display:flex;
    gap:12px;
    margin-top:18px}
.timer-actions button{
  min-width:130px}
.danger-action{
  background:#fee4e2;
    color:var(--danger);
    border-radius:7px;
    padding:12px 16px;
    font-weight:800}
.danger-action:disabled{
  opacity:.45;
    cursor:not-allowed}
.secondary-action{
    background:#e9f0ff;
    color:#1d4ed8;
    border-radius:7px;
    padding:10px 14px;
    font-weight:800}
.entry-list{
    display:grid;
    gap:10px}
.entry-card,.person-card{
    border:1px solid var(--line);
    background:#fbfcfd;
    border-radius:7px;
    padding:13px}
.entry-card strong,.person-card strong{
  display:block}
.entry-card span,.person-card span{
    color:var(--muted);
    font-size:13px}
.table-wrap{
    overflow:auto;
    border:1px solid var(--line);
    border-radius:8px}
table{
    border-collapse:collapse;
    width:100%;
    min-width:720px;
    background:#fff}
th,td{
    text-align:left;
    padding:12px;
    border-bottom:1px solid var(--line);
    font-size:14px}
th{background:#f5f8fb;
    color:#465467;
    font-size:12px;
    text-transform:uppercase}
.metric{
    background:#f6f8fb;
    border:1px solid var(--line);
    border-radius:8px;
    padding:15px}
.metric span{
    display:block;
    color:var(--muted);
    font-size:13px}
.metric strong{
    font-size:25px}
.bar-report{
    display:grid;
    gap:13px}
.bar-row{
    display:grid;
    gap:6px}
.bar-line{
    height:10px;
    background:#e6edf3;
    border-radius:999px;
    overflow:hidden}
.bar-fill{
    height:100%;
    background:linear-gradient(90deg,var(--brand),#2563eb)}.bar-meta{display:flex;
    justify-content:space-between;
    gap:8px;
    font-size:13px}
.people-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:12px}
.role{display:inline-block;
    margin-top:10px;
    background:#eef2ff;
    color:#1d4ed8;
    border-radius:999px;
    padding:5px 9px;
    font-size:12px;
    font-weight:800}
.locked{opacity:.5}
.progress{  
    height:8px;
    background:#e6edf3;
    border-radius:999px;
    overflow:hidden}
.progress span{display:block;
    height:100%;
    background:var(--brand)}@media(max-width:920px){
      .workspace{grid-template-columns:1fr}.sidebar{position:sticky;
    top:0;
    z-index:2;
    display:grid;
    grid-template-columns:1fr;
    gap:14px;
    padding:14px}
.nav-list{  
    grid-template-columns:repeat(4,1fr);
    overflow:auto}
.nav-item{
    text-align:center;
    white-space:nowrap}
.current-user{
  display:none}
.content{
  padding:16px}
  .timer-layout,.report-grid,.form-grid,.project-form,.filters,.metric-grid{
    grid-template-columns:1fr}
    .timer-head h3{font-size:42px}
    .topbar{align-items:flex-start}
    .status-pill{white-space:nowrap}}@media(max-width:560px){
      .login-panel{padding:24px}
    .nav-list{grid-template-columns
    :repeat(4,minmax(118px,1fr))}
    .topbar{display:grid}
    .panel{padding:15px}
    .timer-actions{display:grid}
    .timer-actions button{width:100%}
    .section-title{display:grid}
    .timer-head{display:grid}
    .timer-head h3{font-size:36px}
    .content{padding:12px}}
.form-error{min-height:20px;
  margin:0;
  color:#b42318;
  font-size:13px;
  font-weight:800}
.stack-layout{
  display:grid;
  grid-template-columns:1fr;
  gap:18px}
.form-actions{
  display:flex;
  justify-content:center;
  align-items:center;
  margin-top:8px}
.form-actions button{
  min-width:190px}
.primary-action.stop-mode{
  background:#b42318}
.manual-form{
  align-items:end}
#projectCreateHost,#adminToolsHost{
  display:grid;
  gap:18px;
  margin-bottom:18px}
.project-form .form-actions.wide{
  grid-column:1/-1}
.timer-actions{
  justify-content:center}
.timer-actions .primary-action{
  min-width:190px}
@media(max-width:920px){
  .stack-layout{
    grid-template-columns:1fr}
  .form-actions{
    justify-content:stretch}
  .form-actions button{width:100%}}

/* Project rows and expansion styling */
.project-header-row {
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.project-header-row:hover {
  background-color: #f8fafc;
}
.toggle-cell {
  text-align: center;
  user-select: none;
  font-size: 14px;
  color: var(--muted);
  width: 40px;
}
.chevron {
  display: inline-block;
  transition: transform 0.2s ease;
}
.chevron.expanded {
  transform: rotate(90deg);
  color: var(--brand);
}
.project-details-row {
  background-color: #f8fafc;
}
.project-details-row td {
  padding: 0 !important;
  border-bottom: 1px solid var(--line);
}
.project-details-container {
  padding: 18px 24px 24px 24px;
  animation: slideDown 0.2s ease-out;
  border-left: 4px solid var(--brand);
  background-color: #fafbfc;
}
.project-details-container h4 {
  margin: 0 0 12px 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.no-entries {
  padding: 16px;
  color: var(--muted);
  font-style: italic;
  font-size: 13px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  text-align: center;
}
.details-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.02);
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.details-table th, .details-table td {
  padding: 10px 12px;
  font-size: 13px;
  text-align: left;
}
.details-table th {
  background-color: #f1f5f9;
  color: #475569;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  border-bottom: 1px solid var(--line);
}
.details-table tbody tr {
  background-color: #ffffff;
  transition: background-color 0.15s ease;
}
.details-table tbody tr:hover {
  background-color: #f8fafc;
}
.details-table td {
  border-bottom: 1px solid #f1f5f9;
}
.details-table tbody tr:last-child td {
  border-bottom: none;
}
.dept-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 600;
  background-color: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
}
.note-cell {
  color: #334155;
  word-break: break-word;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Tabbed interface styles */
.tabs-header {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
}
.tab-btn {
  background: transparent;
  color: var(--muted);
  border: none;
  font-weight: 700;
  font-size: 13px;
  padding: 6px 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  border-radius: 6px;
}
.tab-btn:hover {
  background: #f1f5f9;
  color: var(--ink);
}
.tab-btn.active {
  background: var(--brand);
  color: #fff;
}

/* Mobile view rules - restrict to login and current session timer only */
@media (max-width: 600px) {
  .sidebar {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 12px 16px !important;
    gap: 12px !important;
  }
  .sidebar .nav-list {
    display: none !important;
  }
  .sidebar .current-user {
    display: flex !important;
    border-top: none !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
    align-items: center !important;
    gap: 8px !important;
  }
  .sidebar .current-user span, .sidebar .current-user small {
    display: none !important;
  }
  .sidebar .current-user .ghost-button {
    padding: 6px 12px !important;
    font-size: 13px !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
  }
  /* Hide all panels in timer view except the active session timer panel */
  #timerView .panel:not(.timer-panel) {
    display: none !important;
  }
}

/* ── Subfolder tags ─────────────────────────────────────────────────────── */
.subfolder-section { margin-top: 4px; }
.subfolder-list { display: flex; flex-wrap: wrap; gap: 6px; min-height: 32px; padding: 8px; background: #f8fafc; border: 1px solid var(--line); border-radius: 6px; }
.subfolder-tag { display: inline-flex; align-items: center; gap: 6px; background: #e8f5f2; color: var(--brand); border: 1px solid #b6ddd6; border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 600; }
.subfolder-tag button { background: none; border: none; cursor: pointer; color: var(--muted); font-size: 13px; padding: 0; line-height: 1; }
.subfolder-tag button:hover { color: var(--danger); }
.subfolder-header { font-size: 13px; font-weight: 700; color: var(--brand); padding: 10px 0 4px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }

/* ── Hours breakdown in project table ──────────────────────────────────── */
.hours-breakdown { display: flex; flex-wrap: wrap; gap: 4px; font-size: 12px; }
.hours-breakdown span { background: #f1f5f9; padding: 2px 6px; border-radius: 4px; color: #475569; }

/* ── Project summary ────────────────────────────────────────────────────── */
.project-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.summary-item { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: #f6f8fb; border: 1px solid var(--line); border-radius: 7px; font-size: 13px; }
.summary-item span { color: var(--muted); }
.summary-item strong { font-size: 16px; }
.summary-item.total { background: #eef8f6; border-color: var(--brand); }
.summary-item.total strong { color: var(--brand); }

/* ── Entry toggle button ────────────────────────────────────────────────── */
.toggle-entry-btn { background: #fee4e2; color: var(--danger); border: 1px solid #fca5a5; border-radius: 5px; padding: 3px 8px; font-size: 12px; cursor: pointer; transition: all 0.15s; }
.toggle-entry-btn:hover { background: var(--danger); color: #fff; }
.toggle-entry-btn.inactive-btn { background: #dcfce7; color: #15803d; border-color: #86efac; }
.toggle-entry-btn.inactive-btn:hover { background: #15803d; color: #fff; }

/* ── Inactive entries ───────────────────────────────────────────────────── */
.inactive-entry-row td { opacity: 0.45; text-decoration: line-through; }
.inactive-entry-row .toggle-entry-btn { opacity: 1 !important; text-decoration: none !important; }