/* ═══════════════════════════════════════════════════════════════════════
   JabDesk — Clinic Task Tracker
   A calm clinical-operations look: a dark brand "spine" (sidebar) beside a
   light, quiet workspace, warmed by the JabDesk orange. Two themes, one
   accent. Display type: Bricolage Grotesque. UI type: Inter.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --font-display:'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --font-body:'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --bg:#eef1f5; --surface:#ffffff; --surface-2:#f6f8fb; --surface-3:#e7ecf3;
  --ink:#16202b; --ink-2:#57626e; --ink-3:#93a0ad; --line:#dde3ea;
  --accent:#1f6fb2; --accent-tint:#e8f1f9;
  --green:#1e8e3e; --amber:#c77700; --red:#c0392b;
  --shadow:0 1px 2px rgba(18,36,54,.06), 0 8px 24px rgba(18,36,54,.06);
  --shadow-sm:0 1px 2px rgba(18,36,54,.07);

  --day:#12243a; --morning:#1565c0; --tasks:#37474f; --afternoon:#00695c; --month:#5b3a9a;

  --side-bg:#122436; --side-ink:#aebccb; --side-ink-2:#71829a;
  --side-active:#ffffff; --side-hover:rgba(255,255,255,.07);

  --radius:14px; --tap:44px;
}

[data-theme="dark"]{
  --bg:#0e1620; --surface:#16212e; --surface-2:#1b2836; --surface-3:#223143;
  --ink:#e8eef5; --ink-2:#9fb0c1; --ink-3:#6f8093; --line:#26374a;
  --accent:#3b8fd6; --accent-tint:#122536;
  --green:#46c46a; --amber:#e0a23a; --red:#f0685c;
  --shadow:0 1px 2px rgba(0,0,0,.45), 0 10px 30px rgba(0,0,0,.4);
  --shadow-sm:0 1px 2px rgba(0,0,0,.45);
  --day:#0b1a29; --side-bg:#0b1a29;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-body); font-size:16px; line-height:1.45; -webkit-font-smoothing:antialiased}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{font-family:var(--font-display)}
:focus-visible{outline:3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset:2px; border-radius:6px}

.avatar{display:inline-grid; place-items:center; border-radius:50%; overflow:hidden; flex:0 0 auto; color:#fff; font-weight:700; line-height:1; box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.avatar img{width:100%; height:100%; object-fit:cover; display:block}
.avatar-ini{text-transform:uppercase}

.shell{display:flex; min-height:100vh}
.sidebar{width:248px; background:var(--side-bg); color:var(--side-ink); position:fixed; top:0; left:0; bottom:0; z-index:40; display:flex; flex-direction:column; padding:16px 8px}
.main{margin-left:248px; flex:1; min-width:0; display:flex; flex-direction:column; min-height:100vh}

.side-top{display:flex; align-items:center; justify-content:space-between; padding:6px 10px 14px}
.brand{display:flex; align-items:center; gap:10px; color:var(--side-active)}
.brand:hover{text-decoration:none}
.brand-mark{width:34px; height:34px; border-radius:9px; display:grid; place-items:center; font-weight:800; font-size:14px; color:#fff; font-family:var(--font-display); flex:0 0 auto}
.brand-txt{font-weight:700; font-size:15px; font-family:var(--font-display); letter-spacing:-.01em; line-height:1.1}
.drawer-close{display:none; background:none; border:none; color:var(--side-ink); font-size:26px; line-height:1; cursor:pointer; padding:0 6px}

.side-nav{display:flex; flex-direction:column; gap:2px; margin-top:6px; flex:1}
.side-link{position:relative; display:flex; align-items:center; gap:12px; padding:11px 14px; margin:1px 4px; border-radius:11px; color:var(--side-ink); font-weight:600; font-size:14.5px}
.side-link svg{width:20px; height:20px; opacity:.85; flex:0 0 auto}
.side-link:hover{background:var(--side-hover); color:var(--side-active); text-decoration:none}
.side-link.is-active{background:var(--side-hover); color:var(--side-active)}
.side-link.is-active::before{content:""; position:absolute; left:-4px; top:9px; bottom:9px; width:3px; border-radius:3px; background:var(--accent)}
.side-link.is-active svg{opacity:1; color:var(--accent)}

.side-foot{display:flex; align-items:center; gap:8px; padding:10px 8px 4px; margin-top:8px; border-top:1px solid rgba(255,255,255,.08)}
.side-user{display:flex; align-items:center; gap:10px; flex:1; color:var(--side-ink); min-width:0; padding:6px; border-radius:10px}
.side-user:hover{background:var(--side-hover); text-decoration:none}
.side-user-txt{display:flex; flex-direction:column; min-width:0}
.su-name{color:var(--side-active); font-weight:600; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.su-role{color:var(--side-ink-2); font-size:11.5px; text-transform:uppercase; letter-spacing:.06em}
.side-signout{display:grid; place-items:center; width:38px; height:38px; border-radius:10px; color:var(--side-ink-2)}
.side-signout:hover{background:var(--side-hover); color:var(--side-active)}
.side-signout svg{width:19px; height:19px}

.scrim{display:none; position:fixed; inset:0; background:rgba(10,9,7,.5); z-index:35}

.topbar{position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:8px; padding:10px 20px; background:color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter:saturate(1.4) blur(8px); border-bottom:1px solid var(--line)}
.menu-btn,.brand-mobile{display:none}
.menu-btn{background:none; border:none; color:var(--ink); cursor:pointer; padding:6px; border-radius:9px}
.menu-btn svg{width:24px; height:24px; display:block}
.topbar-spacer{flex:1}
.icon-btn{width:40px; height:40px; border-radius:11px; border:1px solid var(--line); background:var(--surface); color:var(--ink-2); cursor:pointer; display:grid; place-items:center}
.icon-btn:hover{color:var(--ink); border-color:var(--ink-3)}
.icon-btn svg{width:19px; height:19px}
.ico-sun{display:none} .ico-moon{display:block}
[data-theme="dark"] .ico-sun{display:block}
[data-theme="dark"] .ico-moon{display:none}
.topbar-avatar{display:block}

.wrap{max-width:1560px; width:100%; margin:0 auto; padding:22px 30px 40px}
.site-foot{max-width:1560px; margin:0 auto; padding:20px 30px; color:var(--ink-3); font-size:12px; text-align:center}
.site-foot a{color:var(--ink-3)}

.page-head{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:20px; flex-wrap:wrap}
.page-title{font-size:26px; font-weight:800; margin:0; letter-spacing:-.02em; line-height:1.1}
.page-sub{margin:5px 0 0; color:var(--ink-2); font-size:14px}
.head-actions{display:flex; gap:8px; flex-wrap:wrap}
.back{display:inline-block; font-size:13px; color:var(--ink-2); font-weight:600; margin-bottom:4px}

.primary-btn{background:var(--accent); color:#fff; border:none; padding:11px 18px; border-radius:11px; font-size:15px; font-weight:700; cursor:pointer; min-height:var(--tap); box-shadow:var(--shadow-sm)}
.primary-btn:hover{filter:brightness(1.05); text-decoration:none}
.ghost-btn{background:var(--surface); color:var(--ink); border:1px solid var(--line); padding:9px 15px; border-radius:11px; font-size:14px; font-weight:600; cursor:pointer; min-height:38px; display:inline-flex; align-items:center; gap:6px}
.ghost-btn:hover{border-color:var(--ink-3); text-decoration:none}

.flash{padding:12px 15px; border-radius:12px; margin-bottom:16px; font-size:14px; font-weight:600}
.flash-success{background:color-mix(in srgb, var(--green) 15%, var(--surface)); color:var(--green); border:1px solid color-mix(in srgb, var(--green) 35%, transparent)}
.flash-error{background:color-mix(in srgb, var(--red) 13%, var(--surface)); color:var(--red); border:1px solid color-mix(in srgb, var(--red) 32%, transparent)}

.pill{display:inline-block; font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px; background:var(--surface-3); color:var(--ink-2); letter-spacing:.02em; vertical-align:middle}
.pill-today{background:var(--accent); color:#fff}
.pill-off{background:color-mix(in srgb, var(--red) 15%, var(--surface)); color:var(--red)}
.pill-flag{background:color-mix(in srgb, var(--amber) 20%, var(--surface)); color:var(--amber)}
.chip{display:inline-block; font-size:11px; font-weight:700; padding:3px 9px; border-radius:7px; background:var(--surface-3); color:var(--ink-2)}
.chip-ok{background:color-mix(in srgb, var(--green) 16%, var(--surface)); color:var(--green)}
.chip-warn{background:color-mix(in srgb, var(--red) 14%, var(--surface)); color:var(--red)}
.chip-muted{background:var(--surface-3); color:var(--ink-3)}
.muted{color:var(--ink-2)}

.track{display:block; height:10px; background:var(--surface-3); border-radius:6px; overflow:hidden; margin-top:6px}
.fill{display:block; height:100%; border-radius:6px; transition:width .4s cubic-bezier(.2,.7,.3,1)}

.clinic-band{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px 22px; display:flex; gap:20px; align-items:center; margin-bottom:20px}
.clinic-pct{font-family:var(--font-display); font-size:52px; font-weight:800; line-height:1; letter-spacing:-.03em}
.clinic-meta{flex:1; min-width:0}
.clinic-lbl{font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
.clinic-sub{font-size:14px; color:var(--ink-2); margin-top:2px}

.emp-grid{display:grid; grid-template-columns:1fr; gap:14px}
.emp-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px 18px; color:var(--ink); display:block; transition:transform .15s ease, border-color .15s ease}
.emp-card:hover{text-decoration:none; border-color:var(--ink-3); transform:translateY(-2px)}
.emp-card.is-off{opacity:.72}
.emp-top{display:flex; align-items:center; gap:11px; margin-bottom:12px}
.emp-rank{font-family:var(--font-display); width:24px; text-align:center; font-weight:800; font-size:14px; color:var(--ink-3); flex:0 0 auto}
.emp-name{font-family:var(--font-display); font-weight:700; font-size:16px; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.emp-metric{margin:9px 0}
.metric-row{display:flex; justify-content:space-between; align-items:baseline}
.metric-lbl{font-size:11px; font-weight:700; color:var(--ink-3); text-transform:uppercase; letter-spacing:.07em}
.metric-val{font-family:var(--font-display); font-size:17px; font-weight:800}
.metric-tiny{font-size:12px; color:var(--ink-3); margin-top:3px}
.emp-foot{display:flex; gap:6px; margin-top:12px; flex-wrap:wrap}
.emp-off-note{color:var(--ink-2); font-style:italic; font-size:14px}

.daybar{position:sticky; top:60px; z-index:10; display:flex; flex-wrap:wrap; gap:6px; padding:10px 0; margin:0 0 12px; background:var(--bg); border-bottom:1px solid var(--line)}
.daybar::-webkit-scrollbar{display:none}
.daybar-btn{flex:0 0 auto; background:var(--surface); border:1px solid var(--line); color:var(--ink-2); padding:8px 15px; border-radius:999px; font-size:13px; font-weight:700}
.daybar-btn.is-today{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.daybar-btn:hover{text-decoration:none; border-color:var(--ink-3)}
.daybar-month{color:var(--month); border-color:color-mix(in srgb, var(--month) 30%, var(--line))}
[data-theme="dark"] .daybar-month{color:#c99be0}

.day{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; margin-bottom:16px; scroll-margin-top:112px}
.day-today{border-color:var(--accent); box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent), var(--shadow)}
.day-head{background:var(--day); color:#fff; padding:12px 16px; font-family:var(--font-display); font-weight:700; font-size:15px; display:flex; align-items:center; gap:10px}
.day-head-monthly{background:var(--month)}
.day-date{font-family:var(--font-body); font-weight:500; color:rgba(255,255,255,.65); font-size:13px}
.day-head .pill-today{margin-left:auto}
.month-note{padding:11px 16px 0; color:var(--ink-2); font-size:13px; margin:0}

.sec-label{padding:7px 16px; font-size:11px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:#fff}
.sec-morning{background:var(--morning)} .sec-main{background:var(--tasks)} .sec-afternoon{background:var(--afternoon)}

.task{display:flex; gap:13px; padding:13px 16px; border-bottom:1px solid var(--line); align-items:flex-start}
.task:last-child{border-bottom:none}
.task.is-done{background:color-mix(in srgb, var(--green) 8%, var(--surface))}
.task.is-unchecked{background:color-mix(in srgb, var(--red) 7%, var(--surface))}
.check{position:relative; flex:0 0 auto; width:28px; height:28px; cursor:pointer}
.check input{position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer}
.check .box{display:block; width:28px; height:28px; border:2px solid var(--ink-3); border-radius:9px; background:var(--surface); transition:all .15s ease}
.check input:checked + .box{background:var(--green); border-color:var(--green)}
.check input:checked + .box::after{content:""; position:absolute; left:10px; top:5px; width:6px; height:12px; border:solid #fff; border-width:0 3px 3px 0; transform:rotate(45deg)}
.check input:disabled + .box{opacity:.55}
.task-body{flex:1; min-width:0}
.task-text{font-size:15px; font-weight:600; word-wrap:break-word}
.task.is-done .task-text{color:var(--green)}
.task-status{font-size:12px; color:var(--ink-3); margin-top:2px; min-height:14px}
.task.is-unchecked .task-status{color:var(--red)}
.task-note{margin-top:9px; width:100%; border:1px solid var(--line); border-radius:9px; padding:9px 11px; font-size:14px; font-family:inherit; background:var(--surface-2); color:var(--ink)}
.task-note::placeholder{color:var(--ink-3)}
.task-note-ro{margin-top:7px; font-size:13px; color:var(--ink-2); background:var(--surface-2); border-radius:9px; padding:7px 11px}
.flag-btn{flex:0 0 auto; width:40px; height:40px; border-radius:10px; border:1px solid var(--line); background:var(--surface); color:var(--ink-3); font-size:18px; cursor:pointer}
.flag-btn.is-flagged{background:color-mix(in srgb, var(--amber) 20%, var(--surface)); color:var(--amber); border-color:color-mix(in srgb, var(--amber) 40%, transparent)}

.empty{background:var(--surface); border:1px dashed var(--ink-3); border-radius:var(--radius); padding:28px 22px; text-align:center; color:var(--ink-2)}
.panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px; margin-bottom:18px}
.panel-title{font-size:17px; font-weight:800; margin:0 0 16px; letter-spacing:-.01em}
.emp-picker{margin-bottom:16px}

.task-form{display:flex; flex-direction:column; gap:15px}
.fld{display:flex; flex-direction:column; gap:6px; font-size:13px; font-weight:700; color:var(--ink-2)}
.fld-lbl{font-size:13px; font-weight:700; color:var(--ink-2)}
.fld input[type=text], .fld input[type=email], .fld input[type=password], .fld input[type=number], .fld input[type=tel], .fld input[type=file], .fld select, .emp-picker select, .team-table select{border:1px solid var(--line); border-radius:11px; padding:11px 13px; font-size:15px; background:var(--surface); color:var(--ink); min-height:var(--tap); font-weight:500; font-family:inherit}
.fld-row{display:flex; gap:12px; flex-wrap:wrap}
.fld-row .fld{flex:1; min-width:150px}
.fld-check{display:flex; align-items:center; gap:8px; font-weight:700; color:var(--ink-2); font-size:14px}
.form-actions{display:flex; gap:10px; align-items:center; flex-wrap:wrap}

.daychips{display:flex; gap:6px; flex-wrap:wrap}
.daychip{position:relative}
.daychip input{position:absolute; opacity:0}
.daychip span{display:inline-block; padding:8px 12px; border:1px solid var(--line); border-radius:9px; font-size:13px; font-weight:700; color:var(--ink-2); cursor:pointer; min-width:44px; text-align:center; background:var(--surface)}
.daychip input:checked + span{background:var(--ink); color:var(--bg); border-color:var(--ink)}

.def-table{width:100%; border-collapse:collapse; font-size:14px}
.def-table th{text-align:left; font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); padding:9px 10px; border-bottom:2px solid var(--line)}
.def-table td{padding:11px 10px; border-bottom:1px solid var(--line); vertical-align:middle; color:var(--ink)}
.def-table td.nm{font-weight:700}
.row-off td{opacity:.55}
.row-actions{white-space:nowrap; text-align:right}
.row-actions > a, .row-actions > form{display:inline-block; vertical-align:middle}
.row-actions > a{margin-right:14px}
.link-danger{background:none; border:none; color:var(--red); font-size:14px; font-weight:600; cursor:pointer; padding:0; font-family:inherit}
.team-table td{border-bottom:1px solid var(--line)}
.team-table form{display:contents}
.tbl-avatar{display:flex; align-items:center; gap:10px}

.guest-wrap{min-height:100vh; display:grid; place-items:center; padding:24px; background:radial-gradient(1200px 600px at 50% -10%, color-mix(in srgb, var(--accent) 10%, var(--bg)), var(--bg))}
.login-card{max-width:400px; width:100%; background:var(--surface); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow); padding:34px 30px; text-align:center}
.login-mark{width:58px; height:58px; border-radius:15px; display:grid; place-items:center; font-weight:800; color:#fff; font-size:22px; margin:0 auto 16px; font-family:var(--font-display)}
.login-title{font-size:24px; font-weight:800; margin:0; letter-spacing:-.02em}
.login-sub{color:var(--ink-2); font-size:14px; margin:5px 0 22px}
.login-form{display:flex; flex-direction:column; gap:15px; text-align:left}
.login-form label{display:flex; flex-direction:column; gap:6px; font-size:13px; font-weight:700; color:var(--ink-2)}
.login-form input{border:1px solid var(--line); border-radius:11px; padding:12px 13px; font-size:16px; min-height:var(--tap); background:var(--surface); color:var(--ink)}
.login-form .primary-btn{margin-top:6px}
.theme-fab{position:fixed; top:16px; right:16px; z-index:5}

.profile-hero{display:flex; align-items:center; gap:18px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px; margin-bottom:18px}
.profile-hero .who-name{font-family:var(--font-display); font-size:22px; font-weight:800; margin:0}
.profile-hero .who-role{color:var(--ink-2); font-size:13px}
.avatar-edit{display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.avatar-edit .hint{color:var(--ink-2); font-size:13px; max-width:340px}
.file-btn{position:relative; overflow:hidden; display:inline-flex}
.file-btn input[type=file]{position:absolute; inset:0; opacity:0; cursor:pointer}

@media (prefers-reduced-motion:reduce){*{transition:none !important}}

@media (max-width:960px){
  .sidebar{transform:translateX(-100%); transition:transform .25s ease; width:270px; box-shadow:0 0 40px rgba(0,0,0,.35)}
  body.drawer-open .sidebar{transform:translateX(0)}
  body.drawer-open .scrim{display:block}
  .main{margin-left:0}
  .drawer-close{display:block}
  .menu-btn{display:flex}
  .brand-mobile{display:flex}
  .brand-mobile .brand-mark{width:32px; height:32px}
  .daybar{top:60px}
  .daybar-btn{padding:7px 12px; font-size:12.5px}
}
@media (min-width:720px){ .emp-grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1120px){ .emp-grid{grid-template-columns:repeat(3,1fr)} }

/* ── Brand logo ──────────────────────────────────────────── */
.brand-logo{height:26px; width:auto; max-width:190px; display:block; object-fit:contain}
.brand-logo-sm{height:22px; width:auto; display:block}
.login-logo-wrap{background:var(--side-bg); border-radius:14px; padding:15px 20px; margin:0 auto 18px; display:inline-block}
.login-logo-wrap img{height:34px; width:auto; display:block}

/* ── Photo editor (crop + filters) ───────────────────────── */
.editor-backdrop{position:fixed; inset:0; z-index:60; background:rgba(6,12,20,.66); backdrop-filter:blur(3px); display:none; align-items:center; justify-content:center; padding:18px}
.editor-backdrop.is-open{display:flex}
.editor{background:var(--surface); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); width:100%; max-width:380px; padding:20px; color:var(--ink)}
.editor h3{font-family:var(--font-display); font-size:18px; font-weight:800; margin:0 0 4px}
.editor .editor-hint{color:var(--ink-2); font-size:12.5px; margin:0 0 14px}
.editor-stage{position:relative; width:280px; height:280px; max-width:100%; margin:0 auto; border-radius:12px; overflow:hidden; background:#0b1a29; touch-action:none; cursor:grab; user-select:none}
.editor-stage.grabbing{cursor:grabbing}
.editor-stage img{position:absolute; top:0; left:0; transform-origin:0 0; will-change:left,top,width; -webkit-user-drag:none; pointer-events:none}
.editor-mask{position:absolute; inset:0; pointer-events:none; box-shadow:0 0 0 2000px rgba(11,26,41,.5); border-radius:50%; margin:0}
.editor-mask::after{content:""; position:absolute; inset:0; border:2px solid rgba(255,255,255,.9); border-radius:50%}
.editor-zoom{display:flex; align-items:center; gap:10px; margin:16px 0 6px}
.zoom-btn{flex:0 0 auto; width:34px; height:34px; border-radius:9px; border:1px solid var(--line); background:var(--surface); color:var(--ink-2); cursor:pointer; display:grid; place-items:center}
.zoom-btn:hover{color:var(--ink); border-color:var(--ink-3)}
.zoom-btn svg{width:18px; height:18px}
.editor-zoom input[type=range]{flex:1; accent-color:var(--accent); height:4px}
.filter-wrap{display:flex; align-items:center; gap:6px; margin-top:8px}
.filt-arrow{flex:0 0 auto; width:30px; height:34px; border-radius:9px; border:1px solid var(--line); background:var(--surface); color:var(--ink-2); cursor:pointer; display:grid; place-items:center}
.filt-arrow:hover{color:var(--ink); border-color:var(--ink-3)}
.filt-arrow svg{width:17px; height:17px}
.filter-row{flex:1; min-width:0; display:flex; gap:8px; overflow-x:auto; padding:6px 2px 4px; scroll-behavior:smooth}
.filter-row::-webkit-scrollbar{display:none}
.filter-chip{flex:0 0 auto; border:2px solid transparent; background:none; padding:0; cursor:pointer; text-align:center; width:58px}
.filter-chip .thumb{width:54px; height:54px; border-radius:50%; overflow:hidden; border:2px solid var(--line); background:#0b1a29}
.filter-chip .thumb img{width:100%; height:100%; object-fit:cover; display:block}
.filter-chip.is-sel .thumb{border-color:var(--accent); box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent)}
.filter-chip .flabel{display:block; font-size:10.5px; font-weight:700; color:var(--ink-2); margin-top:4px; white-space:nowrap}
.filter-chip.is-sel .flabel{color:var(--accent)}
.editor-actions{display:flex; gap:10px; margin-top:16px}
.editor-actions .primary-btn{flex:1}
.editor-actions .ghost-btn{flex:0 0 auto}

/* Team page employee code cell */
.emp-code{display:inline-block; font-weight:800; font-size:13px; letter-spacing:.03em; color:var(--accent); background:var(--accent-tint); padding:3px 9px; border-radius:7px}

/* Use the extra width on large screens */
@media (min-width:1500px){ .emp-grid{grid-template-columns:repeat(4,1fr)} }

/* ── Table polish: zebra rows + tidy Tasks table ─────────────── */
.def-table tbody tr:nth-child(even) td{background:var(--surface-2)}
.def-table tbody tr:hover td{background:var(--accent-tint)}
.def-table td{vertical-align:middle}
/* Tasks table: let the Task column flex, keep the rest snug and centred */
.tasks-table th:not(:first-child), .tasks-table td:not(:first-child){width:1%; white-space:nowrap; padding-left:28px}
.tasks-table td:first-child{min-width:280px; line-height:1.4}
.tasks-table .row-actions{padding-left:20px}

/* ── App feel: no accidental zoom ─────────────────────────── */
html{touch-action:manipulation}

/* ── Responsive tables: stack into cards on phones ─────────── */
@media (max-width:640px){
  .def-table thead{display:none}
  .def-table, .def-table tbody, .def-table tr, .def-table td{display:block; width:auto}
  .def-table tr{background:var(--surface); border:1px solid var(--line); border-radius:12px; margin-bottom:12px; padding:10px 14px}
  .def-table tbody tr:nth-child(even) td, .def-table tbody tr:hover td{background:transparent}
  .def-table td{border:none; padding:6px 0}
  .def-table td[data-label]::before{content:attr(data-label); display:block; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3); margin-bottom:4px}
  .def-table td.row-actions{display:flex; justify-content:flex-end; gap:18px; padding-top:10px; margin-top:4px; border-top:1px solid var(--line)}
  /* tasks table: undo the desktop column squeezing on mobile */
  .tasks-table td:not(:first-child){width:auto; white-space:normal; padding-left:0}
  .tasks-table td:first-child{min-width:0}
  /* team: chips + control get full width under their label */
  .team-table .daychips{gap:8px}
  .team-table .daychip span{min-width:52px}
  .team-table select{width:100%}
  .tbl-avatar{gap:12px}
}

/* ── Admin Tools: selectable people list ─────────────────────── */
.tools-list{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px 20px; max-height:360px; overflow:auto; border:1px solid var(--line); border-radius:10px; padding:14px; background:var(--surface-2)}
.tools-row{display:flex; align-items:center; gap:8px; font-size:14px; padding:4px 2px}
.tools-row input{width:18px; height:18px; accent-color:var(--accent); flex:0 0 auto}
@media (max-width:900px){ .tools-list{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .tools-list{grid-template-columns:1fr} }

/* ── Clickable Active/Inactive status toggle (Tasks page) ────── */
.status-toggle{border:none; cursor:pointer; font-size:11px; font-weight:700; padding:5px 13px; border-radius:999px; font-family:inherit; letter-spacing:.02em; transition:filter .15s, box-shadow .15s}
.status-toggle.on{background:color-mix(in srgb, var(--green) 16%, var(--surface)); color:var(--green)}
.status-toggle.off{background:var(--surface-3); color:var(--ink-3)}
.status-toggle:hover{filter:brightness(.97); box-shadow:0 0 0 2px color-mix(in srgb, currentColor 22%, transparent)}
.status-toggle:disabled{opacity:.6; cursor:default}