/* ============================================================
   AIconsult-it Team App — styling (matches aiconsult-it.ai)
   ============================================================ */
:root{
  --bg:#050507; --bg-2:#0a0c11;
  --panel:rgba(255,255,255,0.035); --panel-2:rgba(255,255,255,0.06);
  --line:rgba(255,255,255,0.10); --line-2:rgba(255,255,255,0.18);
  --text:#eef1f6; --muted:#8b94a6; --muted-2:#5d6678;
  --orange:#ff5a1f; --orange-2:#ff8a4c; --cyan:#22d3ee; --blue:#4f7cff;
  --green:#2ecc71; --red:#ef4444; --amber:#f5a623; --violet:#8b5cf6;
  --r:14px; --r-lg:20px; --sidew:240px;

  /* The website's light palette (assets/page-light.css on aiconsult-it.ai). The main area uses
     this grey; the sidebar and the banner stay dark. */
  --page-bg:#c2cad4; --page-bg-2:#b7c0cb; --page-panel:#ffffff;
  --page-line:#c6ccd6; --page-line-2:#adb6c4;
  --page-text:#080a0e; --page-muted:#4c5464; --page-muted-2:#555d6b;

  /* Washes, hairlines and field fills. These were written as literal white translucency
     scattered through the file, which is invisible once the surface underneath is white.
     As tokens, the same class renders dark-on-light in the main area and light-on-dark in
     the sidebar and modals, with no per-component special-casing. */
  --wash:rgba(255,255,255,0.04); --wash-2:rgba(255,255,255,0.08);
  --hair:rgba(255,255,255,0.05); --field-bg:rgba(0,0,0,0.3); --field-bg-2:rgba(0,0,0,0.45);
  --orange-ink:#ffb38c; --red-ink:#ff9b9b;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  background:var(--bg);color:var(--text);font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh;
}
::selection{background:var(--orange);color:#fff}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:'Space Grotesk','Inter',sans-serif;font-weight:700;letter-spacing:-0.02em}
.it{color:var(--muted)}
.hidden{display:none !important}
input,select,textarea,button{font-family:inherit}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.12);border-radius:10px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.2)}

/* ambient background */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(60vw 60vw at 85% -10%,rgba(255,90,31,0.10),transparent 60%),
    radial-gradient(50vw 50vw at -10% 40%,rgba(79,124,255,0.07),transparent 60%),
    radial-gradient(45vw 45vw at 60% 110%,rgba(34,211,238,0.05),transparent 60%),
    var(--bg);
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.35;
  background-image:
    linear-gradient(rgba(255,255,255,0.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,0.022) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,#000 30%,transparent 80%);
          mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,#000 30%,transparent 80%);
}

/* ===== Buttons ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 18px;border-radius:999px;font-weight:600;font-size:14px;cursor:pointer;
  border:1px solid transparent;transition:transform .16s,box-shadow .22s,background .2s,border-color .2s;white-space:nowrap;line-height:1}
.btn-orange{background:var(--orange);color:#fff;box-shadow:0 8px 26px -10px rgba(255,90,31,0.65)}
.btn-orange:hover{transform:translateY(-1px);box-shadow:0 14px 34px -10px rgba(255,90,31,0.85)}
/* Secondary buttons: dark grey with white text - grey, not black, so they sit back
   from the orange primary and from the near-black chrome. */
.btn-ghost{background:var(--wash);color:var(--text);border-color:var(--line-2)}
.btn-ghost:hover{background:var(--wash-2)}
/* The refresh control in the banner: same family as the bell, one glyph. */
.refresh{width:34px;height:34px;border-radius:9px;background:var(--wash);border:1px solid var(--line);
  color:var(--text);cursor:pointer;font-size:16px;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.refresh:hover{background:var(--wash-2)}
.refresh.spin{animation:spin .6s linear}
.btn-glass{background:rgba(255,255,255,0.92);color:#0a0c11}
.btn-glass:hover{background:#fff}
.btn-danger{background:rgba(239,68,68,0.12);color:#ff9b9b;border-color:rgba(239,68,68,0.4)}
.btn-danger:hover{background:rgba(239,68,68,0.22)}
.btn-sm{padding:8px 14px;font-size:13px}
.btn-full{width:100%}
.btn:disabled{opacity:.55;cursor:not-allowed}

/* ===== Auth / setup ===== */
.auth{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;z-index:50}
.auth-card{width:100%;max-width:400px;background:linear-gradient(180deg,rgba(255,255,255,0.05),rgba(255,255,255,0.02));
  border:1px solid var(--line);border-radius:var(--r-lg);padding:38px 32px;backdrop-filter:blur(12px);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.8)}
.setup-card{max-width:520px}
.auth-brand{display:flex;align-items:center;gap:10px;justify-content:center}
.auth-mark{width:38px;height:38px}
.auth-word{font-family:'Space Grotesk';font-weight:700;font-size:26px;letter-spacing:-0.03em}
.auth-sub{text-align:center;color:var(--muted);margin:8px 0 26px;font-size:14px}
.auth form label{display:block;font-size:13px;color:var(--muted);margin-bottom:14px;font-weight:500}
.auth form input{width:100%;margin-top:7px;padding:12px 14px;background:rgba(0,0,0,0.35);
  border:1px solid var(--line-2);border-radius:11px;color:var(--text);font-size:15px}
.auth form input:focus{outline:none;border-color:var(--orange);background:rgba(0,0,0,0.5)}
.auth .btn-full{margin-top:8px}
.auth-msg{margin-top:14px;text-align:center;font-size:13px;min-height:18px}
.auth-msg.err{color:#ff9b9b}.auth-msg.ok{color:#86efac}
.auth-foot{text-align:center;color:var(--muted-2);font-size:12px;margin-top:24px}
.auth-link{display:block;margin:16px auto 0;background:none;border:0;color:var(--muted);font-size:13px;font-weight:500;cursor:pointer;text-align:center}
.auth-link:hover{color:var(--orange-2)}
.setup-steps{margin:6px 0 8px;padding-left:22px;color:var(--muted);font-size:14px;line-height:1.9}
.setup-steps code{background:var(--wash-2);padding:2px 7px;border-radius:6px;color:var(--orange-2);font-size:12.5px}
.setup-steps b{color:var(--text)}

/* ===== App shell ===== */
.app{display:flex;min-height:100vh}
.side{position:fixed;top:0;left:0;bottom:0;width:var(--sidew);display:flex;flex-direction:column;
  border-right:1px solid var(--line);background:rgba(8,9,13,0.6);backdrop-filter:blur(14px);z-index:30;padding:22px 16px}
.side-brand{display:flex;align-items:center;gap:9px;padding:4px 8px 22px}
.side-mark{width:28px;height:28px}
.side-word{font-family:'Space Grotesk';font-weight:700;font-size:19px;letter-spacing:-0.03em}
.side-nav{display:flex;flex-direction:column;gap:3px;flex:1}
.side-nav a{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:11px;
  color:var(--muted);font-size:14.5px;font-weight:500;transition:.15s}
.side-nav a .ic{width:18px;text-align:center;font-size:14px;color:var(--muted-2);transition:.15s}
.side-nav a:hover{background:var(--wash);color:var(--text)}
/* The one piece kept from the ledger design pass: the current page sits on a soft
   wash with a 2px orange rule at its left edge, instead of the old orange-tinted fill. */
.side-nav a.active{background:var(--wash-2);color:#fff;box-shadow:inset 2px 0 0 var(--orange)}
.side-nav a.active .ic{color:var(--orange)}
.side-foot{display:flex;flex-direction:column;gap:12px;padding-top:16px;border-top:1px solid var(--line)}
.me{display:flex;align-items:center;gap:10px;font-size:13px}
.me .av{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:12px;color:#fff;flex-shrink:0}
.me .nm{font-weight:600}.me .rl{color:var(--muted-2);font-size:11px}

.main{flex:1;margin-left:var(--sidew);min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:14px;
  padding:18px 28px;background:var(--bg);border-bottom:1px solid var(--line)}
.topbar h1{font-size:22px;flex:1;min-width:0}
/* The right-hand controls had NO styles: as a plain div they stacked instead of sitting in a
   row, which is what pushed the bell over the search box and clipped its badge. */
.topbar-right{display:flex;align-items:center;gap:10px;flex-shrink:0}
.hamb{display:none;background:none;border:0;color:#fff;font-size:22px;cursor:pointer}
.view{padding:28px;width:100%;flex:1}
.view > *{max-width:none}

.scrim{display:none}
@media(max-width:880px){
  .side{transform:translateX(-100%);transition:transform .25s;box-shadow:0 0 60px rgba(0,0,0,.6)}
  .app.nav-open .side{transform:none}
  .main{margin-left:0}
  .hamb{display:inline-flex}
  .app.nav-open .scrim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:25}
  .view{padding:18px}
}

/* ===== Stat cards ===== */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:10px;margin-bottom:16px}
.stat{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:11px 13px;overflow:hidden}
.stat:hover{border-color:var(--line-2)}
.stat .lbl{font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted-2);font-weight:600}
.stat .val{font-family:'Space Grotesk';font-size:30px;font-weight:700;letter-spacing:-0.02em;font-variant-numeric:tabular-nums;margin-top:4px;line-height:1.1}
.stat .sub{font-size:11.5px;color:var(--muted);margin-top:1px}
.stat .bar{position:absolute;left:0;top:0;bottom:0;width:3px}

/* ===== Panels / sections ===== */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:14px}
.panel-head{display:flex;align-items:center;gap:10px;padding:11px 16px;border-bottom:1px solid var(--line);background:var(--panel-2)}
.panel-head h3{font-family:'Space Grotesk','Inter',sans-serif;font-size:15px;font-weight:700;letter-spacing:-0.01em;flex:1}
.panel-body{padding:2px 0}
.section-row{display:flex;align-items:center;gap:12px;margin:0 0 11px}
.section-row h2{font-family:'Space Grotesk','Inter',sans-serif;font-size:22px;font-weight:700;letter-spacing:-0.02em;flex:1}

/* ===== Toolbar (filters/search) ===== */
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:18px}
.toolbar input[type=search],.toolbar select{
  padding:9px 13px;background:var(--wash);border:1px solid var(--line-2);
  border-radius:10px;color:var(--text);font-size:13.5px}
.toolbar input[type=search]{min-width:220px;flex:1;max-width:340px}
.toolbar input:focus,.toolbar select:focus{outline:none;border-color:var(--orange)}
.toolbar .spacer{flex:1}
.seg{display:inline-flex;background:var(--wash);border:1px solid var(--line);border-radius:10px;padding:3px}
.seg button{background:none;border:0;color:var(--muted);padding:7px 13px;border-radius:7px;cursor:pointer;font-size:13px;font-weight:600}
.seg button.on{background:rgba(255,90,31,0.15);color:var(--text)}

/* ===== Table ===== */
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted-2);
  font-weight:600;padding:7px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:8px 14px;border-bottom:1px solid var(--hair);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr{cursor:pointer;transition:background .12s}
.tbl tbody tr:hover{background:var(--wash)}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums}
.tbl .t-title{font-weight:600;color:var(--text)}
.tbl .t-sub{font-size:12px;color:var(--muted-2)}
.cell-strong{font-weight:600}

/* ===== Status marks ===== */
/* A coloured dot with ink text - a column of identical pastel pills was noise. */
.pill{display:inline-flex;align-items:center;gap:7px;font-size:10.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.11em;color:var(--text);white-space:nowrap;--dc:var(--muted-2)}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--dc);flex-shrink:0}
.pill .d{display:none}
.pill-grey{--dc:#8b94a6}
.pill-blue{--dc:var(--blue)}
.pill-cyan{--dc:var(--cyan)}
.pill-green{--dc:var(--green)}
.pill-amber{--dc:var(--amber)}
.pill-orange{--dc:var(--orange)}
.pill-red{--dc:var(--red);color:var(--red-ink)}
.pill-violet{--dc:var(--violet)}
/* Awarded is its own gold - amber already means "on hold" on a ticket, and the
   one status that says a client has said yes should not share a dot with it. */
.pill-gold{--dc:#e3b341}
/* Archived: dimmer than grey, so a parked project and a filed one do not read
   as the same thing at a glance. */
.pill-mute{--dc:#5b6373}


/* avatar chip */
.av-chip{display:inline-flex;align-items:center;gap:7px}
.av-sm{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:10px;color:#fff;flex-shrink:0}
.unassigned{color:var(--muted-2);font-style:italic}

/* ===== Kanban ===== */
.kanban{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,1fr);gap:14px;overflow-x:auto;padding-bottom:8px}
.kcol{background:var(--wash);border:1px solid var(--line);border-radius:var(--r);min-height:120px;display:flex;flex-direction:column}
/* Kanban column heads are titles too - same dark bar and typeface as panel heads. */
.kcol-head{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--line);
  font-family:'Space Grotesk','Inter',sans-serif;font-size:14px;font-weight:700;background:var(--panel-2)}
.kcol-head .cnt{margin-left:auto;color:var(--muted-2);font-size:12px}
.kcol{overflow:hidden}
.kcol-body{padding:10px;display:flex;flex-direction:column;gap:9px;flex:1}
.kcard{background:var(--panel-2);border:1px solid var(--line);border-radius:11px;padding:12px 13px;cursor:pointer;transition:.15s}
.kcard:hover{border-color:var(--line-2);transform:translateY(-2px)}
.kcard .kt{font-weight:600;font-size:13.5px;margin-bottom:7px}
.kcard .kmeta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:11.5px;color:var(--muted)}

/* ===== Empty / loading ===== */
.empty{text-align:center;padding:60px 20px;color:var(--muted)}
.empty .big{font-size:40px;margin-bottom:12px;opacity:.5}
.empty h3{font-size:17px;margin-bottom:6px;color:var(--text)}
.loading{text-align:center;padding:60px;color:var(--muted-2)}
.spinner{width:30px;height:30px;border:3px solid var(--line-2);border-top-color:var(--orange);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 14px}
@keyframes spin{to{transform:rotate(360deg)}}

/* ===== Modal ===== */
.modal-host{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-start;justify-content:center;padding:40px 20px;overflow-y:auto}
.modal-back{position:fixed;inset:0;background:rgba(3,4,8,0.72);backdrop-filter:blur(4px)}
.modal{position:relative;width:100%;max-width:560px;background:linear-gradient(180deg,#0e1016,#0a0c11);
  border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:0 40px 100px -30px rgba(0,0,0,.85);animation:pop .2s ease}
.modal.wide{max-width:760px}
@keyframes pop{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.modal-head{display:flex;align-items:center;gap:12px;padding:20px 24px;border-bottom:1px solid var(--line)}
.modal-head h3{font-size:18px;flex:1}
.modal-x{background:none;border:0;color:var(--muted);font-size:22px;cursor:pointer;line-height:1}
.modal-x:hover{color:#fff}
.modal-body{padding:22px 24px;display:grid;gap:16px}
.modal-foot{display:flex;gap:10px;justify-content:flex-end;padding:18px 24px;border-top:1px solid var(--line)}
.modal-foot .spacer{flex:1}

/* form fields */
.field{display:flex;flex-direction:column;gap:7px}
.field.row2{grid-column:span 2}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field label,.fl{font-size:12.5px;color:var(--muted);font-weight:600}
.field input,.field select,.field textarea{
  padding:11px 13px;background:var(--field-bg);border:1px solid var(--line-2);
  border-radius:10px;color:var(--text);font-size:14px;width:100%}
.field textarea{min-height:80px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--orange);background:var(--field-bg-2)}
@media(max-width:560px){.form-grid{grid-template-columns:1fr}.field.row2{grid-column:auto}}

/* detail view */
.detail-grid{display:grid;grid-template-columns:1fr 300px;gap:14px}
@media(max-width:880px){.detail-grid{grid-template-columns:1fr}}
.kv{display:flex;justify-content:space-between;gap:14px;padding:7px 0;border-bottom:1px solid var(--hair);font-size:14px}
.kv:last-child{border-bottom:0}
.kv .k{color:var(--muted);font-size:13px}
.back-link{display:inline-flex;align-items:center;gap:7px;color:var(--muted);font-size:13.5px;margin-bottom:14px;cursor:pointer}
.back-link:hover{color:var(--text)}

/* invoice line items */
.li-row{display:grid;grid-template-columns:1fr 80px 110px 110px 34px;gap:8px;align-items:center;margin-bottom:8px}
.li-row input{padding:9px 11px;font-size:13px}
.li-head{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted-2);font-weight:600}
.li-del{background:none;border:0;color:var(--muted-2);cursor:pointer;font-size:18px}
.li-del:hover{color:#ff9b9b}
.inv-totals{margin-top:14px;margin-left:auto;max-width:280px}

/* checkbox task row */
.task-line{display:flex;align-items:center;gap:11px;padding:8px 14px;border-bottom:1px solid var(--hair)}
.task-line:hover{background:var(--wash)}
.task-line:last-child{border-bottom:0}
.chk{width:20px;height:20px;border-radius:6px;border:1.5px solid var(--line-2);cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:.15s}
.chk.on{background:var(--orange);border-color:var(--orange);color:#fff}
.task-line .tx{flex:1;min-width:0}
.task-line.done .tx .tt{text-decoration:line-through;color:var(--muted-2)}
.task-line .tt{font-weight:500;font-size:14px}
.task-line .tm{font-size:12px;color:var(--muted-2);margin-top:2px}

/* toasts */
.toasts{position:fixed;right:20px;bottom:20px;z-index:90;display:flex;flex-direction:column;gap:10px}
.toast{background:#0e1016;border:1px solid var(--line-2);border-left:3px solid var(--orange);border-radius:11px;
  padding:13px 16px;font-size:13.5px;min-width:220px;max-width:340px;box-shadow:0 18px 50px -18px rgba(0,0,0,.8);animation:slidein .25s ease}
.toast.ok{border-left-color:var(--green)} .toast.err{border-left-color:var(--red)}
@keyframes slidein{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}

.muted{color:var(--muted)} .small{font-size:12.5px} .mt{margin-top:14px}
.flex{display:flex;align-items:center;gap:10px} .wrap-gap{gap:8px;flex-wrap:wrap}
.right{margin-left:auto} .tnum{font-variant-numeric:tabular-nums}
.activity-line{display:flex;gap:11px;padding:11px 0;border-bottom:1px solid var(--hair);font-size:13.5px}
.activity-line:last-child{border-bottom:0}
.activity-line .dot{width:7px;height:7px;border-radius:50%;background:var(--orange);margin-top:7px;flex-shrink:0}
.activity-line .at{color:var(--muted-2);font-size:12px;margin-left:auto;white-space:nowrap}

/* ---- Voice note recorder ------------------------------------------------ */
.recbar{display:flex;align-items:center;gap:14px;padding:14px 16px;
  border-bottom:1px solid var(--hair)}
.recbtn{width:38px;height:38px;flex:0 0 auto;border-radius:50%;cursor:pointer;
  border:2px solid var(--line-2);background:transparent;position:relative;
  transition:border-color .15s,background .15s}
.recbtn::after{content:"";position:absolute;inset:8px;border-radius:50%;
  background:#ff5a1f;transition:border-radius .18s,inset .18s}
.recbtn:hover{border-color:rgba(255,90,31,0.7)}
.recbtn.on{border-color:#ff5a1f}
.recbtn.on::after{inset:11px;border-radius:3px;animation:recpulse 1.4s ease-in-out infinite}
.recbtn:disabled{opacity:.4;cursor:not-allowed}
@keyframes recpulse{0%,100%{opacity:1}50%{opacity:.45}}
.rectime{font-variant-numeric:tabular-nums;font-size:13px;color:var(--muted,#8b94a6)}

/* ---- Project files: one tab per folder ---------------------------------- */
.filetabs{display:flex;gap:6px;flex-wrap:wrap;padding:11px 16px 0;
  border-bottom:1px solid var(--hair)}
.filetab{display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  padding:6px 11px;border-radius:8px 8px 0 0;border:1px solid transparent;
  border-bottom:0;background:transparent;color:var(--muted,#8b94a6);
  font:inherit;font-size:12.5px;font-weight:600;letter-spacing:.01em;
  max-width:260px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:color .15s,background .15s}
.filetab:hover{color:var(--text,#eef1f6);background:var(--wash)}
.filetab.on{color:var(--text,#eef1f6);background:var(--wash-2);
  border-color:var(--line-2)}
.filetab .ft-n{flex:0 0 auto;font-size:11px;font-weight:700;padding:1px 6px;
  border-radius:999px;background:var(--wash-2);color:var(--muted,#8b94a6)}
.filetab.on .ft-n{background:rgba(255,90,31,0.18);color:#ff8a4c}
.filepane{display:none}
.filepane.on{display:block}
.ft-sum{padding:9px 16px 2px;font-size:11.5px;color:var(--muted-2,#5d6678)}
/* Rows 20% shorter than the 12px default used elsewhere. */
.filepane .task-line{padding-top:9.6px;padding-bottom:9.6px}
.filepane .task-line:last-child{border-bottom:0}

/* ---- Project files: Windows-style views --------------------------------- */
.ft-tools{display:flex;align-items:center;gap:8px;margin-left:auto}
.viewsw{display:inline-flex;border:1px solid var(--line-2);border-radius:8px;overflow:hidden}
.vbtn{background:transparent;border:0;cursor:pointer;padding:5px 9px;font-size:12px;
  color:var(--muted,#8b94a6);line-height:1;transition:background .15s,color .15s}
.vbtn:hover{background:var(--wash);color:var(--text,#eef1f6)}
.vbtn.on{background:rgba(255,90,31,0.16);color:#ff8a4c}

/* Details is the row list; the icon views swap to the grid. */
#filespanel.view-details .filegrid{display:none}
#filespanel:not(.view-details) .filepane .task-line{display:none}
.filegrid{display:grid;gap:12px;padding:12px 16px 16px}
#filespanel.view-sm .filegrid{grid-template-columns:repeat(auto-fill,minmax(84px,1fr))}
#filespanel.view-md .filegrid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
#filespanel.view-lg .filegrid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.tile{margin:0;cursor:pointer;display:flex;flex-direction:column;gap:6px}
.tile .thumb{width:100%;aspect-ratio:1;border-radius:8px;background:var(--wash-2) center/cover no-repeat;
  border:1px solid var(--line-2);transition:border-color .15s,transform .15s}
.tile:hover .thumb{border-color:rgba(255,90,31,0.5);transform:translateY(-2px)}
.tile .thumb.noimg{display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:700;letter-spacing:.1em;color:var(--muted-2,#5d6678)}
.tile figcaption{font-size:11px;line-height:1.3;color:var(--muted,#8b94a6);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#filespanel.view-sm .tile figcaption{font-size:10px}
#filespanel.view-lg .tile figcaption{font-size:12px}

/* ---- Phone calls --------------------------------------------------------- */
.call{padding:13px 16px;border-bottom:1px solid var(--hair)}
.call:last-child{border-bottom:0}
.call.done{opacity:.62}
.call-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.tagteam{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:1px 6px;border-radius:999px;background:rgba(79,124,255,0.18);color:#8fa9ff;vertical-align:middle}
.call-sum{margin-top:8px;font-size:13.5px;line-height:1.55;color:var(--ink-2,#c8cedb)}
/* A call whose summary failed. Deliberately loud: the row below it looks like a
   normal summary but is only the last thing the agent said, so anything the
   caller asked for is sitting unread in the transcript. */
.call-warn{margin-top:8px;padding:8px 10px;border-radius:8px;font-size:13px;line-height:1.5;
  background:rgba(224,122,60,.12);border:1px solid rgba(224,122,60,.35);color:var(--orange,#e07a3c)}
.call-acts{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.call-act{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:8px;
  background:var(--wash);border:1px solid var(--hair);font-size:13px}
.call-act>span:first-child{flex:1}
.call-tx{margin-top:10px}
.call-tx>summary{cursor:pointer;font-size:12px;color:var(--muted,#8b94a6);list-style:none}
.call-tx>summary::-webkit-details-marker{display:none}
.call-tx>summary:hover{color:var(--text,#eef1f6)}
.tx-line{font-size:12.5px;line-height:1.6;color:var(--muted,#8b94a6);padding:3px 0 3px 12px;
  border-left:2px solid var(--line-2);margin-top:4px}
.tx-line b{color:var(--ink-2,#c8cedb);font-weight:600;margin-right:6px}

/* ---- Clients: company, its people, its projects -------------------------- */
.client-card{margin-bottom:10px}
.cc-cols{display:grid;grid-template-columns:1fr 1fr;gap:0}
@media (max-width:860px){.cc-cols{grid-template-columns:1fr}}
.cc-cols>div{padding:9px 14px}
.cc-cols>div:first-child{border-right:1px solid var(--hair)}
@media (max-width:860px){.cc-cols>div:first-child{border-right:0;border-bottom:1px solid var(--hair)}}
.cc-h{display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin-bottom:8px}
.cc-row{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:5px 0;border-bottom:1px solid var(--hair);cursor:pointer}
.cc-row:last-child{border-bottom:0}
.cc-row:hover{background:var(--wash)}
.cc-ph{font-size:12.5px;color:var(--text);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.cc-ph.missing{color:#e0794f;font-style:italic}
.warn{color:#e0794f}
.call-btns{display:flex;align-items:center;gap:8px;flex-shrink:0}
.assign{background:var(--field-bg);color:var(--text);border:1px solid var(--line-2);
  border-radius:8px;color:var(--text,#eef1f6);font:inherit;font-size:12.5px;padding:5px 8px;cursor:pointer}
.assign:hover{border-color:rgba(255,90,31,0.5)}

/* The dropdown list itself is drawn by the operating system, not the page, so
   a styled <select> still opens white-on-blue and unreadable on a dark app.
   Options need their own colours - and this applies to every select here, not
   just the assign box. */
select{color-scheme:dark}
select option{background-color:#12151b;color:#eef1f6}
select option:checked{background-color:#2a1a12;color:#ff8a4c}

/* ---- Editable status mark ------------------------------------------------- */
/* A ticket's status can be changed from the list. There is deliberately NO
   native control here: a <select> drags in its own chrome, its own system font
   and the operating system's own dropdown, and appearance:none only hides part
   of that - it was rejected twice for looking like a form field dropped into a
   report. The trigger is just the status mark itself as a button, and pressing
   it opens the app's own modal. Same as the phone. */
.stbtn{border:0;background:transparent;font:inherit;cursor:pointer;
  padding:3px 6px;margin:-3px -6px;border-radius:7px;transition:background .12s}
.stbtn:hover{background:var(--wash-2)}
.stbtn:focus-visible{outline:1px solid var(--orange);outline-offset:1px}

/* The choices inside the modal. Each row is the real pill, so what you pick
   looks exactly like what you get back in the table. */
.stopts{display:flex;flex-direction:column;gap:2px}
.stopts-sep{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.stopt{display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;border:0;background:transparent;text-align:left;cursor:pointer;
  padding:11px 10px;border-radius:9px;transition:background .12s}
.stopt:hover{background:var(--wash-2)}
.stopt.on{background:var(--wash)}
.stopt-tick{color:var(--orange);font-weight:700;font-size:13px}

/* ---- Global search -------------------------------------------------------- */
.search-wrap{position:relative}
#gsearch{width:260px;background:var(--wash);border:1px solid var(--line);
  border-radius:8px;color:var(--text);font:inherit;font-size:13px;padding:6px 11px;outline:none}
#gsearch::placeholder{color:var(--muted-2)}
#gsearch:focus{border-color:rgba(255,90,31,0.55);background:var(--wash-2)}
@media(max-width:720px){#gsearch{width:150px}}
.search-out{position:absolute;top:calc(100% + 6px);right:0;width:390px;max-height:60vh;overflow:auto;
  background:#12151b;border:1px solid var(--line-2);border-radius:10px;z-index:60;
  box-shadow:0 18px 50px -20px rgba(0,0,0,0.7)}
.sr{display:flex;align-items:center;gap:10px;padding:8px 12px;text-decoration:none;
  border-bottom:1px solid var(--hair)}
.sr:last-child{border-bottom:0}
.sr:hover{background:var(--wash)}
.sr-k{flex:0 0 54px;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2)}
.sr-l{flex:1;font-size:13px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sr-s{font-size:11.5px;color:var(--muted);white-space:nowrap}
.sr-none{padding:12px;font-size:12.5px;color:var(--muted)}

/* ---- Ticket notes --------------------------------------------------------- */
.cmt{padding:9px 15px;border-bottom:1px solid var(--hair)}
.cmt:last-of-type{border-bottom:0}
.cmt-head{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.cmt-who{font-size:12.5px;font-weight:600;color:var(--ink-2,#c8cedb)}
.cmt-at{font-size:11px;color:var(--muted-2)}
.cmt-body{font-size:13px;line-height:1.55;color:var(--muted);white-space:pre-wrap}
.cmt-form{display:flex;gap:8px;align-items:flex-start;padding:10px 15px;border-top:1px solid var(--hair)}
.cmt-form textarea{flex:1;background:var(--wash);border:1px solid var(--line);
  border-radius:8px;color:var(--text);font:inherit;font-size:13px;padding:7px 10px;resize:vertical;outline:none}
.cmt-form textarea:focus{border-color:rgba(255,90,31,0.5)}

/* ---- Control panel tabs --------------------------------------------------- */
.ptabs{display:flex;gap:6px;margin-bottom:14px;border-bottom:1px solid var(--line)}
.ptab{display:inline-flex;align-items:center;gap:7px;cursor:pointer;background:transparent;
  border:0;border-bottom:2px solid transparent;color:var(--muted);font:inherit;font-size:13px;
  font-weight:600;padding:7px 12px;transition:color .15s,border-color .15s}
.ptab:hover{color:var(--text)}
.ptab.on{color:var(--text);border-bottom-color:#ff5a1f}
.ppane{display:none}
.ppane.on{display:block}

/* ---- Notification bell ---------------------------------------------------- */
.bell-wrap{position:relative}
.bell{position:relative;background:var(--wash);border:1px solid var(--line);
  border-radius:8px;width:32px;height:30px;cursor:pointer;color:var(--muted);font-size:14px;
  display:flex;align-items:center;justify-content:center;transition:.15s}
.bell:hover{color:var(--text);border-color:var(--line-2)}
.bell-dot{position:absolute;top:-6px;right:-6px;min-width:17px;height:17px;padding:0 4px;
  border-radius:999px;background:#ff5a1f;color:#fff;font-size:10px;font-weight:700;
  display:flex;align-items:center;justify-content:center;line-height:1}
.bell-out{position:absolute;top:calc(100% + 6px);right:0;width:330px;max-height:60vh;overflow:auto;
  background:#12151b;border:1px solid var(--line-2);border-radius:10px;z-index:60;
  box-shadow:0 18px 50px -20px rgba(0,0,0,0.7)}
.bn{display:block;padding:9px 12px;text-decoration:none;border-bottom:1px solid var(--hair)}
.bn:last-child{border-bottom:0}
.bn:hover{background:var(--wash)}
.bn-w{display:block;font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#ff8a4c}
.bn-who{display:block;font-size:13px;color:var(--text);margin-top:2px}
.bn-at{display:block;font-size:11px;color:var(--muted-2);margin-top:1px}

/* ===== Message attachments ===== */
/* Photos are the point of this channel, so they are shown rather than listed as
   filenames - a tradesman sends four shots of a switchboard, not a document. */
.msg-media{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 13px}
.msg-thumb{width:104px;height:104px;border-radius:9px;border:1px solid var(--line);
  background-color:var(--wash-2);background-size:cover;background-position:center;
  cursor:pointer;padding:0;transition:border-color .15s,transform .15s}
.msg-thumb:hover{border-color:rgba(255,90,31,0.55);transform:translateY(-2px)}

/* ===== Clients tab (Control panel) ===== */
/* People nest under their company, indented and hairlined, so a client with four
   contacts still reads as one entry in the list. */
.client-line .tt{font-weight:700}
.client-people{padding:2px 16px 8px 34px;border-bottom:1px solid var(--hair)}
.client-people .cc-row{padding:6px 0}
.client-people + .task-line{border-top:0}

/* ===== Call transcript ===== */
.transcript{display:flex;flex-direction:column;gap:8px;max-height:52vh;overflow:auto;padding:4px 0}
.turn{display:grid;grid-template-columns:76px 1fr;gap:10px;font-size:13.5px;line-height:1.55}
.turn .who{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--muted-2);padding-top:3px}
.turn.caller .who{color:var(--orange-2)}

/* ===== Clients tab: master-detail ===== */
/* Names down the left, the whole record on the right. The dot is phone-readiness: green when
   everyone at the company has a mobile on file, amber when someone is missing one, grey when
   nobody has been added - because the line and WhatsApp refuse a number they do not know. */
.md{display:grid;grid-template-columns:320px 1fr;min-height:480px}
.md-list{border-right:1px solid var(--line);overflow:auto;max-height:70vh}
.md-row{padding:12px 16px;border-bottom:1px solid var(--hair);cursor:pointer;display:flex;align-items:center;gap:12px}
.md-row:hover{background:var(--wash)}
.md-row.on{background:var(--wash-2);box-shadow:inset 3px 0 0 var(--orange)}
.md-row .co{font-family:'Space Grotesk','Inter',sans-serif;font-weight:700;font-size:14px;letter-spacing:-0.01em}
.md-row .sub{font-size:12px;color:var(--muted)}
.md-row .md-txt{flex:1;min-width:0}
.md-row .flag{font-size:11px;color:var(--amber);font-weight:600;white-space:nowrap}
.md .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.md .dot.ok{background:var(--green)} .md .dot.warn{background:var(--amber)} .md .dot.none{background:var(--line-2)}
.md-detail{padding:22px 26px;display:flex;flex-direction:column;gap:20px;min-width:0}
.md-title{display:flex;align-items:flex-start;gap:14px}
.md-title .co{font-family:'Space Grotesk','Inter',sans-serif;font-weight:700;font-size:22px;letter-spacing:-0.02em;flex:1}
.md-title .acts{display:flex;gap:8px;flex-shrink:0}
.kv-grid{display:grid;grid-template-columns:110px 1fr;gap:8px 16px;font-size:13.5px}
.kv-grid .k{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);padding-top:3px}
.kv-grid .lnk{color:var(--text);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px}
.kv-grid .lnk:hover{text-decoration-color:var(--orange)}
.people{border:1px solid var(--line);border-radius:10px;overflow:hidden}
.people .ph{display:flex;align-items:center;gap:8px;padding:9px 14px;background:var(--wash);border-bottom:1px solid var(--line);
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}
.people .ph-note{letter-spacing:0;text-transform:none;font-weight:500;color:var(--muted-2)}
.people .ph .btn{margin-left:auto}
.person{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center;padding:11px 14px;border-bottom:1px solid var(--hair);cursor:pointer}
.person:hover{background:var(--wash)}
.person:last-child{border-bottom:0}
.person.nobody{grid-template-columns:1fr;cursor:default}
.person .nm{font-weight:600}
.person .role{font-size:12.5px;color:var(--muted)}
.person .none{color:var(--amber);font-style:italic;font-weight:500;font-size:13px}
.num{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.warn{color:var(--amber)}
@media(max-width:880px){ .md{grid-template-columns:1fr} .md-list{border-right:0;border-bottom:1px solid var(--line);max-height:260px} }