@charset "UTF-8";
  :root{
    /* ---- Light theme (default) ---- */
    --bg:#f4f6f8; --panel:#ffffff; --ink:#1c2430; --muted:#67707c;
    --line:#e3e8ee; --line-strong:#cfd6df;
    --brand:#557488; --brand-ink:#3f5a6b; --brand-soft:#eaeff3;
    --open:#b45309; --open-bg:#fef3c7;
    --prog:#557488; --prog-bg:#e3ebf1;
    --done:#15803d; --done-bg:#dcfce7;
    --danger:#b91c1c; --danger-bg:#fee2e2;
    --high:#b91c1c; --med:#b45309; --low:#4b5563;
    --input-ro:#f1f4f8;   /* readonly/computed field bg (dark theme overrides below) */
    --shadow:0 1px 2px rgba(16,24,40,.06),0 8px 24px rgba(16,24,40,.06);
    --radius:12px;
    /* line icons (two-colour: brand stroke on transparent), applied via CSS mask so they take currentColor */
    --ico-trash:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3Cline x1='10' y1='11' x2='10' y2='17'/%3E%3Cline x1='14' y1='11' x2='14' y2='17'/%3E%3C/svg%3E");
    --ico-clip:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48'/%3E%3C/svg%3E");
    --ico-edit:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E");
    --ico-copy:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2' ry='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E");
    --ico-file:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3C/svg%3E");
    --ico-chart:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='20' x2='12' y2='10'/%3E%3Cline x1='18' y1='20' x2='18' y2='4'/%3E%3Cline x1='6' y1='20' x2='6' y2='16'/%3E%3C/svg%3E");
    --ico-clipboard:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Crect x='8' y='2' width='8' height='4' rx='1' ry='1'/%3E%3C/svg%3E");
    --ico-sliders:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='21' x2='4' y2='14'/%3E%3Cline x1='4' y1='10' x2='4' y2='3'/%3E%3Cline x1='12' y1='21' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12' y2='3'/%3E%3Cline x1='20' y1='21' x2='20' y2='16'/%3E%3Cline x1='20' y1='12' x2='20' y2='3'/%3E%3Cline x1='1' y1='14' x2='7' y2='14'/%3E%3Cline x1='9' y1='8' x2='15' y2='8'/%3E%3Cline x1='17' y1='16' x2='23' y2='16'/%3E%3C/svg%3E");
    --ico-link:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E");
    --ico-users:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
    --ico-flag:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z'/%3E%3Cline x1='4' y1='22' x2='4' y2='15'/%3E%3C/svg%3E");
    --ico-plus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
    --ico-clock:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");
    --ico-play:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpolygon points='5 3 19 12 5 21 5 3'/%3E%3C/svg%3E");
    --ico-pause:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Crect x='6' y='4' width='4' height='16' rx='1'/%3E%3Crect x='14' y='4' width='4' height='16' rx='1'/%3E%3C/svg%3E");
    --ico-rotate:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='1 4 1 10 7 10'/%3E%3Cpath d='M3.51 15a9 9 0 1 0 2.13-9.36L1 10'/%3E%3C/svg%3E");
    --ico-refresh:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='23 4 23 10 17 10'/%3E%3Cpolyline points='1 20 1 14 7 14'/%3E%3Cpath d='M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15'/%3E%3C/svg%3E");
    --ico-wrench:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E");
    --ico-return:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 14 4 9 9 4'/%3E%3Cpath d='M20 20v-7a4 4 0 0 0-4-4H4'/%3E%3C/svg%3E");
    --ico-spark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2l1.8 5.5L19 9l-5.2 1.5L12 16l-1.8-5.5L5 9l5.2-1.5z'/%3E%3C/svg%3E");
    --ico-pin:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
  }
  /* line-icon helper: mono icon in currentColor via CSS mask */
  .ico{display:inline-block;width:16px;height:16px;background-color:currentColor;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;vertical-align:-3px;flex:none}
  .ico.sm{width:14px;height:14px;vertical-align:-2px}
  .ico-edit{-webkit-mask-image:var(--ico-edit);mask-image:var(--ico-edit)}
  .ico-copy{-webkit-mask-image:var(--ico-copy);mask-image:var(--ico-copy)}
  .ico-file{-webkit-mask-image:var(--ico-file);mask-image:var(--ico-file)}
  .ico-chart{-webkit-mask-image:var(--ico-chart);mask-image:var(--ico-chart)}
  .ico-clipboard{-webkit-mask-image:var(--ico-clipboard);mask-image:var(--ico-clipboard)}
  .ico-sliders{-webkit-mask-image:var(--ico-sliders);mask-image:var(--ico-sliders)}
  .ico-link{-webkit-mask-image:var(--ico-link);mask-image:var(--ico-link)}
  .ico-users{-webkit-mask-image:var(--ico-users);mask-image:var(--ico-users)}
  .ico-flag{-webkit-mask-image:var(--ico-flag);mask-image:var(--ico-flag)}
  .ico-plus{-webkit-mask-image:var(--ico-plus);mask-image:var(--ico-plus)}
  .ico-clock{-webkit-mask-image:var(--ico-clock);mask-image:var(--ico-clock)}
  .ico-play{-webkit-mask-image:var(--ico-play);mask-image:var(--ico-play)}
  .ico-pause{-webkit-mask-image:var(--ico-pause);mask-image:var(--ico-pause)}
  .ico-rotate{-webkit-mask-image:var(--ico-rotate);mask-image:var(--ico-rotate)}
  .ico-refresh{-webkit-mask-image:var(--ico-refresh);mask-image:var(--ico-refresh)}
  .ico-wrench{-webkit-mask-image:var(--ico-wrench);mask-image:var(--ico-wrench)}
  .ico-return{-webkit-mask-image:var(--ico-return);mask-image:var(--ico-return)}
  .ico-spark{-webkit-mask-image:var(--ico-spark);mask-image:var(--ico-spark)}
  .ico-pin{-webkit-mask-image:var(--ico-pin);mask-image:var(--ico-pin)}
  .ico-clip{-webkit-mask-image:var(--ico-clip);mask-image:var(--ico-clip)}
  /* icon colouring by context: brand on light buttons, inherit inside chips/badges */
  button.ghost .ico{color:var(--brand)}
  .rowbtns .ico{color:var(--brand)}
  tr:hover .rowbtns .ico{color:var(--brand-ink)}
  button.mini .ico{color:var(--brand-ink)}
  button.filter .ico{color:var(--brand)}
  button.primary .ico{color:#fff}
  .chip .ico,.badge .ico{color:currentColor;vertical-align:-2px}
  /* every ✕ remove button becomes a brand-coloured trash line icon */
  .rm{font-size:0 !important;color:var(--brand)}
  .rm::before{content:"";display:inline-block;width:15px;height:15px;vertical-align:middle;background-color:currentColor;-webkit-mask:var(--ico-trash) center/contain no-repeat;mask:var(--ico-trash) center/contain no-repeat}
  .rm:hover{color:var(--danger)}
  .assign-chip .rm{font-size:12px !important;color:#334155}
  .assign-chip .rm::before{display:none}
  /* main Delete buttons: trash icon + label; attachment delete: trash icon only */
  button.danger.hasdel{display:inline-flex;align-items:center;justify-content:center;gap:6px}
  button.danger.hasdel .tico{width:15px;height:15px;display:inline-block;background-color:currentColor;-webkit-mask:var(--ico-trash) center/contain no-repeat;mask:var(--ico-trash) center/contain no-repeat}
  .adel{font-size:0 !important}
  .adel::before{content:"";display:inline-block;width:15px;height:15px;vertical-align:middle;background-color:currentColor;-webkit-mask:var(--ico-trash) center/contain no-repeat;mask:var(--ico-trash) center/contain no-repeat}
  /* icon that sits before a label (e.g. Attachments) */
  .lbl-ico{width:15px;height:15px;display:inline-block;vertical-align:-3px;margin-right:6px;background-color:var(--brand);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}
  .lbl-ico.clip{-webkit-mask-image:var(--ico-clip);mask-image:var(--ico-clip)}
  .lbl-ico.refresh{-webkit-mask-image:var(--ico-refresh);mask-image:var(--ico-refresh)}
  .lbl-ico.copy{-webkit-mask-image:var(--ico-copy);mask-image:var(--ico-copy)}
  .gt-count{color:var(--muted);font-weight:600}
  /* "Start from template" bar on the new-call form */
  .tmplbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--brand-soft);border:1px solid #d7e0e8;border-radius:10px;padding:9px 12px;margin-bottom:14px}
  .tmplbar .tmpllbl{font-weight:600;color:var(--brand-ink);font-size:13px}
  .tmplbar select{flex:1;min-width:170px}
  .tmplbar .lbl-ico.copy{margin-right:0}
  /* Case-templates manager rows */
  .tmpl-row{display:flex;align-items:center;gap:10px}
  .tmpl-row .tmpl-main{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
  .tmpl-row .tmpl-main input{width:100%}
  .tmpl-row .tmpl-sum{color:var(--muted);font-size:11.5px}
  /* Business Central project picker inside the project-number-group editor */
  .pbc-box{margin-top:12px;border:1px solid var(--line);border-radius:10px;background:var(--brand-soft);overflow:hidden}
  .pbc-head{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid var(--line);flex-wrap:wrap}
  .pbc-head input{flex:1;min-width:150px;padding:7px 10px;border:1px solid var(--line-strong);border-radius:8px;font-size:13px}
  .pbc-list{max-height:230px;overflow:auto;background:#fff}
  .pbc-list label{display:flex;align-items:center;gap:9px;padding:7px 12px;border-bottom:1px solid var(--line);font-size:13px;cursor:pointer}
  .pbc-list label:hover{background:var(--brand-soft)}
  .pbc-list input[type=checkbox]{width:auto;margin:0;flex:none}
  .pbc-list .pbc-no{font-weight:600;color:var(--brand-ink);min-width:70px}
  .pbc-list .pbc-nm{color:var(--ink)}
  .pbc-list .pbc-have{margin-left:auto;font-size:11px;color:var(--muted)}
  .pbc-foot{display:flex;gap:8px;align-items:center;padding:9px 12px;border-top:1px solid var(--line)}
  input.locked,input[readonly]{background:#f1f4f8;color:var(--muted);cursor:not-allowed}
  /* live description shown under the case's Project number field (from the customer's project group) */
  .projno-desc{display:block;margin-top:5px;font-size:12px;color:#15803d;font-weight:500}
  /* "Needs attention" strip above the cases list */
  .attnbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 12px}
  .attnbar .attn-lbl{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-right:2px}
  .attn-chip{border:1px solid var(--line-strong);background:#fff;border-radius:999px;padding:6px 13px;font-size:12.5px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;color:var(--ink)}
  .attn-chip b{font-weight:800}
  .attn-chip.a-ret{border-color:#fed7aa;background:#fff7ed;color:#9a3412}
  .attn-chip.a-sla{border-color:#fca5a5;background:#fdeaea;color:#b91c1c}
  .attn-chip.a-pend{border-color:#fde68a;background:#fffbeb;color:#92400e}
  .attn-chip:hover{filter:brightness(.97)}
  .attn-chip.on{box-shadow:0 0 0 2px rgba(85,116,136,.35);font-weight:600}
  .attn-clear{border:none;background:transparent;color:var(--brand);font-size:12px;cursor:pointer;text-decoration:underline}
  /* Bulk actions */
  .bulkbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px;padding:9px 14px;background:var(--brand-soft);border:1px solid #d7e0e8;border-radius:10px}
  .bulkbar .bulk-n{font-size:13px;color:var(--brand-ink)}
  .bulkbar .bulk-n b{font-weight:800}
  #tbl th.selcol,#tbl td.selcol{width:26px;min-width:26px;text-align:center;padding-left:4px;padding-right:2px}
  #tbl td.selcol input,#tbl th.selcol input{width:16px;height:16px;cursor:pointer;margin:0;vertical-align:middle}
  #tbl tr.selrow>td{background:var(--brand-soft)}
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--ink);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}
  .wrap{max-width:1200px;margin:0 auto;padding:20px 20px 60px}
  header.app{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px;flex-wrap:wrap}
  .brand{display:flex;align-items:center;gap:12px}
  .logo{width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,#7c98ad,#4f6d82);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:18px;box-shadow:var(--shadow)}
  h1{font-size:19px;margin:0;letter-spacing:-.2px}
  .sub{color:var(--muted);font-size:12.5px;margin-top:2px}
  .hbtns{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
  /* fixed width so the label changing per page ("+ New user" vs "+ New service case")
     doesn't slide the account status cluster to its left */
  #newBtn{min-width:156px;white-space:nowrap;text-align:center}

  button{font-family:inherit;font-size:13px;cursor:pointer;border-radius:9px;border:1px solid var(--line-strong);background:#fff;color:var(--ink);padding:9px 13px;transition:.12s;font-weight:500}
  button:hover{background:#f7f9fb}
  button.primary{background:var(--brand);border-color:var(--brand);color:#fff}
  button.primary:hover{background:var(--brand-ink)}
  button.ghost{background:transparent;border-color:transparent;color:var(--muted);padding:8px}
  button.ghost:hover{background:#eef1f5;color:var(--ink)}
  button.danger{color:var(--danger);border-color:var(--line-strong)}
  button.danger:hover{background:var(--danger-bg);border-color:var(--danger)}
  button.mini{padding:6px 9px;font-size:12px}
  .field .lblrow{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:5px}
  .field .lblrow label{margin:0}
  button.aifix{color:var(--brand-ink);border-color:var(--line-strong);background:#fff;white-space:nowrap}
  button.aifix:hover:not(:disabled){background:#eaeff3;border-color:var(--brand)}
  button.aifix:disabled{opacity:.6;cursor:default}

  /* tabs */
  .tabs{display:flex;gap:4px;background:#e9edf2;padding:4px;border-radius:11px;margin-bottom:18px;width:max-content}
  .tabs button{border:none;background:transparent;padding:8px 16px;border-radius:8px;color:var(--muted);font-weight:600}
  .tabs button.active{background:#fff;color:var(--ink);box-shadow:var(--shadow)}
  .view{display:none}.view.active{display:block}

  .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:18px}
  .tile{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow)}
  .tile .n{font-size:26px;font-weight:700;letter-spacing:-.5px;line-height:1}
  .tile .n.money{font-size:19px}
  .tile.accent{background:linear-gradient(135deg,#eef3f7,#e3ebf1);border-color:#cdd9e2}
  .tile .l{font-size:12px;color:var(--muted);margin-top:6px;display:flex;align-items:center;gap:6px}
  .dot{width:8px;height:8px;border-radius:50%}
  .dot.open{background:#d97706}.dot.prog{background:#557488}.dot.done{background:#16a34a}.dot.bill{background:#8b5cf6}.dot.all{background:#64748b}

  .toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
  .search{position:relative;flex:1;min-width:220px}
  .search input{width:100%;padding:10px 12px 10px 34px;border:1px solid var(--line-strong);border-radius:9px;font-size:13px;background:#fff}
  .search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);opacity:.5}
  select.filter{width:auto;min-width:140px;padding:9px 30px 9px 11px;border:1px solid var(--line-strong);border-radius:9px;font-size:13px;background:#fff;color:var(--ink)}
  .daterange{display:inline-flex;align-items:center;gap:6px}
  .daterange .drlbl{font-size:12px;color:var(--muted)}
  input.filter[type=date]{width:auto;min-width:0;padding:8px 10px;border:1px solid var(--line-strong);border-radius:9px;font-size:13px;background:#fff;color:var(--ink)}
  .daterange #fDateClear{padding:6px 8px}
  button.filter{cursor:pointer;font-weight:600;white-space:nowrap}
  button.filter.active{background:var(--brand);border-color:var(--brand);color:#fff}
  .chip.retchip{background:#fff7ed;color:#9a3412;border:1px solid #fed7aa}
  .chip.retchip.over{background:var(--danger-bg);color:var(--danger);border-color:#fca5a5}
  .timerbox{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px;padding:10px 12px;background:#f3f6fb;border:1px solid var(--line);border-radius:9px}
  .timer-lbl{font-weight:600;font-size:13px}
  .timer-el{font-weight:700;font-size:15px;color:var(--brand-ink);min-width:96px}
  #timerToggle.running{background:var(--danger);border-color:var(--danger);color:#fff}
  .timerbox #timerHint{flex:1 1 100%;color:var(--muted);font-size:11.5px}

  .panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
  .tblwrap{overflow-x:auto}
  table{width:100%;border-collapse:collapse;min-width:820px}
  th,td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
  #tbl td,#tbl th{padding:8px 10px;vertical-align:middle;white-space:nowrap}
  /* Calls list: fixed layout so it always fits the panel width; long text truncates cleanly with … instead of forcing left/right scroll */
  #tbl{table-layout:fixed;min-width:0}
  #tbl th:nth-child(2),#tbl td:nth-child(2){width:162px}   /* Weekday + date + time (one line) */
  #tbl th:nth-child(3){width:16%}                          /* Customer */
  #tbl th:nth-child(4),#tbl td:nth-child(4){width:104px}   /* Department */
  #tbl th:nth-child(6),#tbl td:nth-child(6){width:70px}    /* Technician (initials) */
  #tbl th:nth-child(7),#tbl td:nth-child(7){width:42px}    /* Hrs */
  #tbl th:nth-child(8),#tbl td:nth-child(8){width:78px}    /* Priority */
  #tbl th:nth-child(9),#tbl td:nth-child(9){width:60px}    /* Billed */
  #tbl th:nth-child(10),#tbl td:nth-child(10){width:88px}  /* Total */
  #tbl th:nth-child(11),#tbl td:nth-child(11){width:100px} /* Status */
  #tbl th:nth-child(12),#tbl td:nth-child(12){width:98px}  /* Actions */
  #tbl td.cust,#tbl td:nth-child(4),#tbl td:nth-child(6){overflow:hidden;text-overflow:ellipsis}
  #tbl td.dt{color:var(--muted)}
  /* Pagination bar under the calls list */
  .pager{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:14px 2px 2px}
  .pager-left{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted);justify-self:start;grid-column:1}
  .pager .pgroup{grid-column:2;justify-self:center}   /* nav centered on the page */
  .pager-left select{width:auto;min-width:64px;padding:7px 26px 7px 10px}
  .pgroup{display:inline-flex;align-items:stretch;border:1px solid var(--line-strong);border-radius:8px;overflow:hidden}
  .pgroup>button,.pgroup>.pginfo{background:#fff;border:0;border-left:1px solid var(--line-strong);padding:7px 13px;font-size:15px;color:var(--ink);display:flex;align-items:center;line-height:1}
  .pgroup>:first-child{border-left:0}
  .pgroup>button{cursor:pointer}
  .pgroup>button:hover:not(:disabled){background:#f1f5f9}
  .pgroup>button:disabled{color:var(--muted);background:#f8fafc;cursor:default;opacity:.6}
  .pgroup>.pginfo{font-size:13px;color:var(--muted);white-space:nowrap;padding:7px 16px}
  #tbl td.dt .tm{display:inline;font-size:11.5px;opacity:.6;margin-left:6px}
  #tbl td.dt .dow{color:var(--ink);font-weight:600;margin-right:3px}
  #tbl td.cust .cname{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #tbl td.cust .site{display:block;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #tbl td.issue{overflow:hidden}
  #tbl td.issue .icell{display:flex;align-items:center;gap:6px;min-width:0}
  #tbl td.issue .itext{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  #tbl td.issue .icell .badge,#tbl td.issue .icell .chip{flex:none}
  .statuscell{display:flex;flex-direction:column;gap:4px;align-items:flex-start}
  .statuscell .slachip{margin:0}
  th{font-size:11.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);font-weight:600;background:#fafbfc;cursor:pointer;white-space:nowrap}
  th.nosort{cursor:default}
  th:hover:not(.nosort){color:var(--ink)}
  tr:last-child td{border-bottom:none}
  tbody tr:hover{background:#fafbfd;cursor:pointer}
  td.cust{font-weight:600}
  td .site,td .contact{color:var(--muted);font-size:12px;font-weight:400;margin-top:2px}
  #crows td{padding:9px 14px;vertical-align:top}
  .cprimary{font-weight:600}
  .cmore{color:var(--muted);font-size:12px;margin-top:3px}
  .issue{max-width:260px}
  .issue .t{font-weight:500}
  .issue .w{color:var(--muted);font-size:12px;margin-top:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .badge{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:999px;white-space:nowrap}
  .b-open{background:var(--open-bg);color:var(--open)}
  .b-prog{background:var(--prog-bg);color:var(--prog)}
  .b-done{background:var(--done-bg);color:var(--done)}
  .b-oh{background:#ede9fe;color:#6d28d9}
  .pri{font-size:11.5px;font-weight:600}
  .pri.high{color:var(--high)}.pri.med{color:var(--med)}.pri.low{color:var(--low)}
  .pri.crit{color:var(--high)}.pri.serious{color:var(--med)}.pri.minor{color:var(--low)}.pri.inq{color:var(--muted)}
  .rrow.pri-row{display:flex;gap:8px;align-items:center}
  .rrow.pri-row .pri-label{flex:0 0 130px;font-weight:600}
  .rrow.pri-row .pri-desc{flex:1;min-width:0}
  @media(max-width:560px){ .rrow.pri-row{flex-wrap:wrap} .rrow.pri-row .pri-label{flex:1 1 100%} }
  .inv-y{color:var(--done);font-weight:600}.inv-n{color:var(--open);font-weight:600}.inv-p{color:#d97706;font-weight:600}
  .amt{color:var(--muted);font-size:12px;margin-top:2px}
  .avatar{width:30px;height:30px;border-radius:50%;background:var(--brand-soft);color:var(--brand-ink);display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex:none}
  .avatar-img{object-fit:cover;padding:0;background:#e2e8f0}
  .hdr-avatar{width:24px;height:24px;border-radius:50%;background:var(--brand-soft);color:var(--brand-ink);display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex:none;background-size:cover;background-position:center;overflow:hidden}
  .hdr-avatar.has-photo{color:transparent}
  .avatar-lg{width:56px;height:56px;font-size:20px;background-size:cover;background-position:center;overflow:hidden}
  .avatar-lg.has-photo{color:transparent}
  .uavatar-row{display:flex;align-items:center;gap:12px;margin-bottom:14px}
  .uname{display:flex;align-items:center;gap:10px;font-weight:600}
  .b-active{background:var(--done-bg);color:var(--done)}
  .b-inactive{background:#eef1f5;color:var(--muted)}
  .b-admin{background:var(--brand-soft);color:var(--brand-ink)}
  .b-user{background:#eef1f5;color:var(--muted)}
  body.perm-user .pricing{display:none !important}
  body.perm-user .pricing-col{display:none !important}
  .ratechips{display:flex;flex-wrap:wrap;gap:4px}
  .chip{background:#f1f4f8;border:1px solid var(--line);border-radius:6px;padding:2px 7px;font-size:11.5px;color:var(--ink);white-space:nowrap}
  .chip b{color:var(--brand-ink)}
  .chip.warranty-chip{background:#ecfdf5;border-color:#a7f3d0;color:#047857}
  .chip.warranty-chip .ico{background:#047857}
  .warn-hint{margin-top:7px;font-size:12.5px;font-weight:500;display:flex;align-items:center;gap:6px}
  .warn-hint.in-warranty{color:#047857}
  .warn-hint.in-warranty .ico{background:#047857}
  .warn-hint.out-warranty{color:#9ca3af}
  .warn-hint.out-warranty .ico{background:#9ca3af}
  .rowbtns{display:flex;gap:4px;opacity:.35;transition:.12s;justify-content:flex-end}
  tr:hover .rowbtns{opacity:1}
  .muted{color:var(--muted)}
  .empty{padding:60px 20px;text-align:center;color:var(--muted)}
  .empty svg{opacity:.3;margin-bottom:12px}
  .empty h3{margin:0 0 6px;color:var(--ink);font-weight:600}

  .overlay{position:fixed;inset:0;background:rgba(16,24,40,.5);backdrop-filter:blur(2px);display:none;align-items:flex-start;justify-content:center;padding:30px 16px;z-index:50;overflow-y:auto}
  #lvloverlay{z-index:60}   /* opens on top of the Service agreements overlay */
  #tmploverlay,#tmplsaveoverlay{z-index:65}   /* open on top of the service-call editor */
  .overlay.show{display:flex}
  .modal{background:#fff;border-radius:16px;width:100%;max-width:720px;box-shadow:0 20px 60px rgba(16,24,40,.28);animation:pop .16s ease}
  @keyframes pop{from{transform:translateY(8px) scale(.99);opacity:0}to{transform:none;opacity:1}}
  .modal header{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--line)}
  .modal header h2{font-size:16px;margin:0}
  .modal form{padding:20px 22px;max-height:none}
  .group{margin-bottom:20px}
  .group>.gt{font-size:11.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--brand-ink);font-weight:700;margin-bottom:10px;display:flex;align-items:center;gap:7px}
  /* collapsible sections (used on the service-call form; auto-collapse on mobile) */
  .group.collapsible>.gt{cursor:pointer;user-select:none}
  .group.collapsible>.gt::after{content:"\25BE";margin-left:auto;font-size:18px;line-height:1;color:var(--muted);transition:transform .15s ease}
  .group.collapsible.collapsed>.gt{margin-bottom:0}
  .group.collapsible.collapsed>.gt::after{transform:rotate(-90deg)}
  .group.collapsible.collapsed>*:not(.gt){display:none !important}
  .grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:end}   /* bottom-align so a wrapped label doesn't push its input out of line with the row */
  .grid.three{grid-template-columns:1fr 1fr 1fr}
  .grid.four{grid-template-columns:1fr 1fr 1fr 1fr}
  .field{display:flex;flex-direction:column;gap:5px}
  .field.full{grid-column:1/-1}
  label{font-size:12.5px;font-weight:500;color:var(--ink)}
  input,select,textarea{font-family:inherit;font-size:13.5px;padding:9px 11px;border:1px solid var(--line-strong);border-radius:8px;background:#fff;color:var(--ink);width:100%}
  input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
  textarea{resize:vertical;min-height:64px}
  .modal footer{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:16px 22px;border-top:1px solid var(--line);background:#fafbfc;border-radius:0 0 16px 16px}
  .req{color:var(--danger)}
  .rowset .rrow{display:grid;grid-template-columns:1fr 1fr 1fr 1fr 1fr auto;gap:8px;margin-bottom:8px;align-items:center}
  .rowset .rrow-contact{grid-template-columns:1fr 1fr 1fr 1fr 1fr auto auto}
  .admck{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--muted);white-space:nowrap;cursor:pointer;font-weight:500}
  .admck input{width:auto;margin:0}
  .rowset .rrow.svc{grid-template-columns:2fr 1fr .8fr auto}
  .rowset .rrow.chg{grid-template-columns:2fr 1fr .8fr auto auto}
  .rowset .rrow.time{grid-template-columns:2fr 1fr auto auto}
  .rrow.time.svclocked input[readonly],.rrow.time.svclocked select:disabled{background:#eef2f8;color:var(--brand-ink);cursor:default;opacity:1}
  .rowset .rrow.ug{grid-template-columns:1fr auto}
  /* equipment / installation cards */
  .sla-status{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
  .sla-status.none{font-size:12px}
  .sla-seg{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;padding:3px 9px;border-radius:14px;border:1px solid transparent}
  .sla-seg.ok{background:#e8f5ee;color:#15803d;border-color:#bfe3cd}
  .sla-seg.warn{background:#fef6e7;color:#b45309;border-color:#f6e0b0}
  .sla-seg.breach{background:#fdeaea;color:#b91c1c;border-color:#f3c2c2}
  .sla-seg.late{background:#fdeaea;color:#b91c1c;border-color:#f3c2c2}
  .sla-seg.hold{background:#eef2f8;color:#475569;border-color:#d7deea}
  .grid.four.sla-grid{grid-template-columns:1fr 1fr}   /* datetime inputs need room; 2-up instead of 4-up */
  .sla-grid .sla-ts{display:flex;gap:6px;align-items:center;min-width:0}
  .sla-grid .sla-ts input[type="date"]{flex:1 1 auto;min-width:0}
  .sla-grid .sla-ts .sla-time{flex:0 0 62px;width:62px;text-align:center}
  .sla-grid .sla-ts .sla-now{flex:0 0 auto}
  .sla-hold-ck{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink);font-weight:500;cursor:pointer;margin:4px 0 8px}
  .sla-hold-ck input{width:auto;margin:0}
  .chip.slachip.ok{background:#e8f5ee;color:#15803d}
  .chip.slachip.warn{background:#fef6e7;color:#b45309}
  .chip.slachip.breach{background:#fdeaea;color:#b91c1c}
  .chip.slachip.late{background:#fdeaea;color:#b91c1c}
  .chip.slachip.hold{background:#eef2f8;color:#475569}
  .agcard{border:1px solid var(--line);border-radius:10px;padding:12px;background:#fbfcfe;margin-bottom:12px;box-sizing:border-box;max-width:100%;overflow-x:auto}
  .agcard-head{display:flex;gap:8px;align-items:center;margin-bottom:8px}
  .agcard-head .agname{flex:1;font-weight:600}
  .agcard-head .agno{flex:0 0 150px}
  .agwin{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:8px;font-size:12px;color:var(--muted)}
  .agwin .aglbl{font-weight:600}
  .agwin input[type=text]{width:64px}
  .agwin .agdays{display:flex;gap:8px;flex-wrap:wrap;margin-left:6px}
  .agwin .agday-ck{display:flex;align-items:center;gap:3px;font-weight:500;cursor:pointer}
  .agwin .agday-ck input{width:auto;margin:0}
  table.agtargets{width:100%;min-width:0;border-collapse:collapse;font-size:12.5px;table-layout:fixed}
  table.agtargets th{text-align:left;font-size:11px;color:var(--muted);font-weight:600;padding:2px 6px}
  table.agtargets td{padding:3px 6px}
  table.agtargets td.agp{font-weight:600;color:var(--brand-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  table.agtargets th:nth-child(1),table.agtargets td:nth-child(1){width:24%}
  table.agtargets th:nth-child(2),table.agtargets td:nth-child(2){width:20%}
  table.agtargets th:nth-child(3),table.agtargets td:nth-child(3){width:20%}
  table.agtargets th:nth-child(4),table.agtargets td:nth-child(4){width:36%}
  table.agtargets input,table.agtargets select{width:100%;min-width:0;box-sizing:border-box}
  .agrates{margin-top:10px;border-top:1px dashed var(--line);padding-top:8px}
  .agrates-head{font-weight:600;color:var(--brand-ink);cursor:pointer;user-select:none;font-size:13px}
  .agrates-head .gchev{display:inline-block;transition:transform .15s;margin-right:4px}
  .agrates.collapsed .agrates-head .gchev{transform:rotate(-90deg)}
  .agrates.collapsed .agrates-body{display:none}
  .agrates-body{margin-top:8px}
  .agrates-apply{margin-top:10px;padding-top:8px;border-top:1px dashed var(--line)}
  .agfiles{margin-top:10px;padding-top:8px;border-top:1px dashed var(--line)}
  .agfiles-lbl{font-size:12.5px;font-weight:600;margin-bottom:6px}
  .agfiles-list{display:flex;flex-direction:column;gap:6px;margin-bottom:6px}
  .agfile{display:flex;align-items:center;gap:8px;background:#f3f6fb;border:1px solid var(--line);border-radius:8px;padding:6px 8px}
  .agfile-ico{flex:none}
  .agfile-open{flex:1;text-align:left;border:none;background:transparent;color:var(--brand-ink);font-weight:600;padding:0;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .agfile-open:hover{text-decoration:underline;background:transparent}
  .agfile-sz{flex:none;color:var(--muted);font-size:11.5px}
  .agfile-rm{flex:none;padding:2px 6px}
  .agfile-add{display:inline-block;cursor:pointer;border:1px solid var(--line-strong);border-radius:8px;padding:6px 10px;font-weight:600;background:#fff}
  .agfile-add:hover{background:#f7f9fb}
  .assignbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
  .assignbar #assignPicker{flex:1;min-width:200px}
  .assignbar .assign-notify{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);font-weight:500;cursor:pointer;white-space:nowrap}
  .assignbar .assign-notify input{width:auto;margin:0}
  .assignrows{display:flex;flex-wrap:wrap;gap:6px}
  .assignrows:not(:empty){margin-bottom:8px}
  .assign-chip{display:inline-flex;align-items:center;gap:8px;background:#eef2f8;border:1px solid var(--line);border-radius:16px;padding:4px 6px 4px 12px;font-size:12.5px;color:var(--brand-ink);font-weight:600}
  .assign-chip .ae{font-weight:400;color:var(--muted);font-size:11px}
  .assign-chip.accepted{background:#e8f5ee;border-color:#bfe3cd}
  .assign-chip .acc{color:#15803d;font-weight:700;font-size:11.5px}
  .assign-chip .acc-btn{border:1px solid var(--brand);background:#fff;color:var(--brand);border-radius:12px;padding:1px 9px;font-size:11px;font-weight:600;cursor:pointer;line-height:1.6}
  .assign-chip .acc-btn:hover{background:var(--brand);color:#fff}
  .assign-chip .rm{border:none;background:#dbe3ef;color:#334155;width:18px;height:18px;border-radius:50%;line-height:1;cursor:pointer;font-size:12px;padding:0;display:flex;align-items:center;justify-content:center}
  .assign-chip .rm:hover{background:#c8d4e6}
  .rowset .rrow.equip{display:block;border:1px solid var(--line);border-radius:10px;padding:12px;background:#fbfcfe;margin-bottom:12px}
  .rrow.equip .equip-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
  .rrow.equip .equip-title{font-size:12.5px;font-weight:700;color:var(--brand-ink);display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none;min-width:0}
  .rrow.equip .equip-title .echev{font-size:14px;line-height:1;transition:transform .15s;flex:none}
  .rrow.equip .equip-title .equip-name-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .rrow.equip.collapsed .equip-head{margin-bottom:0}
  .rrow.equip.collapsed .equip-title .echev{transform:rotate(-90deg)}
  .rrow.equip.collapsed .egrid{display:none}
  .rrow.equip .equip-head-btns{display:flex;align-items:center;gap:6px}
  .unitbar{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--brand-soft);border:1px solid var(--line);border-radius:8px;padding:8px 12px;margin-bottom:10px;font-size:13px;color:var(--brand-ink)}
  /* multi-select dropdown with checkboxes */
  .checkdrop{position:relative}
  .checkdrop-btn{width:100%;text-align:left;padding:9px 11px;border:1px solid var(--line);border-radius:8px;background:#fff;cursor:pointer;font-size:13px;color:var(--ink)}
  .checkdrop-btn::after{content:"\25BE";float:right;color:var(--muted)}
  .checkdrop-menu{display:none;position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:30;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 10px 28px rgba(15,23,42,.16);max-height:240px;overflow:auto;padding:6px}
  .checkdrop-menu.show{display:block}
  .checkdrop-menu label{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:6px;cursor:pointer;font-size:13px;font-weight:500}
  .checkdrop-menu label:hover{background:var(--brand-soft)}
  .checkdrop-menu label input{width:auto;margin:0}
  .checkdrop-menu .muted{font-size:11.5px}
  .rrow.equip .egrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
  .rrow.equip .efield{display:flex;flex-direction:column;gap:3px;font-size:11px;color:var(--muted);font-weight:600}
  .rrow.equip .efield span{display:block}
  .rrow.equip .efield input,.rrow.equip .efield select{font-weight:400;color:var(--ink)}
  .rrow.equip .efull{grid-column:1/-1}
  .rrow.equip .efield-ck{grid-column:1/-1;display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);font-weight:500;cursor:pointer}
  .rrow.equip .efield-ck input{width:auto;margin:0}
  @media(max-width:720px){ .rrow.equip .egrid{grid-template-columns:1fr 1fr} }
  .grpcard{border:1px solid var(--line);border-radius:10px;padding:12px;background:#fbfcfe;margin-bottom:12px}
  .grpcard-name{font-size:12.5px;font-weight:700;color:var(--brand-ink);margin-bottom:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;display:flex;align-items:center;gap:8px;user-select:none}
  .grpcard-name .gchev{font-size:14px;line-height:1;transition:transform .15s;flex:none}
  .grpcard.collapsed .grpcard-name{margin-bottom:0}
  .grpcard.collapsed .grpcard-name .gchev{transform:rotate(-90deg)}
  .grpcard.collapsed .grpcard-body{display:none}
  .grpcard-rates{display:grid;grid-template-columns:repeat(auto-fit,minmax(86px,1fr));gap:8px}
  .grpcell{display:flex;flex-direction:column;gap:3px;font-size:11px;color:var(--muted);font-weight:600}
  .grpcell>span{display:block;line-height:1.25;min-height:2.5em}
  .grpcell input{font-weight:400;color:var(--ink);width:100%;box-sizing:border-box}
  .grpcard-rates input[data-computed]{background:#eef2f8;color:var(--brand-ink);font-weight:600;cursor:default}
  .grpcard-svc{margin-top:12px;border-top:1px dashed var(--line);padding-top:10px}
  .grpcard-svc-label{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.3px;margin-bottom:6px}
  .grpsvc-add{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px}
  .grpsvc-add .svcItemPick{width:auto;min-width:150px}
  .svcgroup{border:1px solid var(--line);border-radius:9px;padding:10px;background:#fff;margin-bottom:10px}
  .svcgroup-head{display:flex;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap}
  .svcgroup-name{flex:1 1 200px;min-width:160px;font-weight:600}
  .svcgroup-range{display:flex;align-items:center;gap:4px;flex:none}
  .svcgroup-range input{width:56px;text-align:center}
  .svcgroup-range .dash{color:var(--muted)}
  .svcgroup-ranges{display:flex;align-items:center;gap:6px;flex:none;flex-wrap:wrap}
  .svcrange{display:inline-flex;align-items:center;gap:4px;background:#f3f6fb;border:1px solid var(--line);border-radius:8px;padding:2px 4px}
  .svcrange input{width:56px;text-align:center}
  .svcrange .dash{color:var(--muted)}
  .svcrange .svcrange-rm{padding:0 4px;font-size:12px;line-height:1;opacity:.7}
  .svcrange-add{flex:none;padding:2px 8px;font-weight:700}
  .svcgroup-days{display:flex;align-items:center;gap:7px;flex:none;flex-wrap:wrap}
  .svcgroup-days .svcday-ck{display:inline-flex;align-items:center;gap:3px;font-size:12px;font-weight:500;color:var(--muted);cursor:pointer;white-space:nowrap}
  .svcgroup-days .svcday-ck input{width:auto;margin:0}
  /* Reports / analytics */
  .rep-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}
  @media(max-width:820px){ .rep-grid{grid-template-columns:1fr} }
  .rep-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px 16px}
  .rep-card-h{font-size:12px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);font-weight:600;margin-bottom:12px}
  .rep-svg{width:100%;height:auto;display:block}
  .rep-bar{fill:var(--brand)}
  .rep-base{stroke:var(--line-strong);stroke-width:1}
  .rep-val{fill:var(--brand-ink);font-size:11px;font-weight:700}
  .rep-axis{fill:var(--muted);font-size:10px}
  .rep-hbars{display:flex;flex-direction:column;gap:9px}
  .rep-hrow{display:grid;grid-template-columns:130px 1fr auto;align-items:center;gap:10px}
  .rep-hlbl{font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .rep-htrack{background:#eef2f6;border-radius:6px;height:16px;overflow:hidden}
  .rep-hfill{background:var(--brand);height:100%;border-radius:6px;min-width:3px}
  .rep-hval{font-size:12.5px;font-weight:700;color:var(--brand-ink);white-space:nowrap}
  .rep-hval .muted{color:var(--muted);font-weight:500;font-size:11.5px}
  .rep-split{display:flex;gap:2px;height:46px;border-radius:8px;overflow:hidden}
  .rep-seg{display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;min-width:0;padding:0 6px}
  .rep-seg span{font-size:11px;opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .rep-seg b{font-size:16px}
  .rep-seg-a{background:var(--brand)}
  .rep-seg-b{background:#c17d3f}
  .gwarn{border:1px solid #f0c36d;background:#fff8e6;border-radius:9px;padding:10px 12px;margin-bottom:10px;color:#7a5b00}
  .gwarn-h{font-weight:700;margin-bottom:3px}
  .gwarn-b{font-size:13px;margin-bottom:6px}
  .gwarn ul{margin:0;padding-left:18px}
  .gwarn li{font-size:13px;margin:2px 0}
  .svcgroup-units{flex:none;width:80px}
  .svcgroup-total{font-size:13px;font-weight:700;color:var(--brand-ink);white-space:nowrap;min-width:56px;text-align:right}
  .svcgroup-head .svcgroup-rm{flex:none}
  .rowset .rrow.svcitem{grid-template-columns:2fr 1fr .6fr auto auto auto}
  .rowset .rrow.svcitem input[readonly]{background:#eef2f8;color:var(--brand-ink);cursor:default}
  .rrow.svcitem .svcitem-ck{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--muted);font-weight:600;white-space:nowrap;cursor:pointer}
  .rrow.svcitem .svcitem-ck input{width:auto;margin:0}
  .rrow.svcitem .svcitem-empty{display:block}
  @media(max-width:720px){ .rowset .rrow.svcitem{grid-template-columns:1fr 1fr;gap:6px} .rrow.svcitem .svcitem-empty{display:none} }
  .svcGroupAdd{margin-top:2px}
  @media(max-width:720px){ .grpcard-rates{grid-template-columns:1fr 1fr} }
  .ltotal{font-size:12.5px;font-weight:600;color:var(--brand-ink);text-align:right;white-space:nowrap;min-width:70px}
  .histlist{display:flex;flex-direction:column;gap:0}
  .histrow{display:flex;align-items:baseline;gap:10px;padding:8px 10px;border-left:2px solid var(--line-strong);font-size:12.5px}
  .histrow .ha{font-weight:600}
  .histrow .hm{color:var(--muted)}
  .histrow.created{border-color:var(--brand)}
  .histrow.done{border-color:#16a34a}
  .histrow.inv{border-color:#8b5cf6}
  .histrow.emailed{border-color:#0ea5e9}
  .histrow.billed{border-color:#f59e0b}
  .histrow.update{border-color:#0d9488}
  .histrow.revoked{border-color:#b91c1c}
  .histrow.changed{border-color:#64748b}
  .histrow .ut{white-space:pre-wrap;font-weight:500}
  .svcno{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;font-weight:700;letter-spacing:.4px;color:var(--brand-ink);background:var(--brand-soft);border:1px solid var(--line);border-radius:6px;padding:3px 9px;margin-left:10px;white-space:nowrap}
  .urow{display:flex;gap:8px;align-items:flex-end;margin-top:10px}
  .urow textarea{flex:1;min-height:44px}
  .urow-btns{display:flex;flex-direction:column;gap:6px;flex:none}
  .svcchip{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;letter-spacing:.3px}
  .attlist{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
  .attlist:empty{margin-top:0}
  .attcard{display:flex;flex-direction:column;width:132px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
  .attcard .thumb{height:86px;display:flex;align-items:center;justify-content:center;background:#f1f5f9;cursor:pointer;overflow:hidden}
  .attcard .thumb img{width:100%;height:100%;object-fit:cover}
  .attcard .thumb .ico{width:30px;height:30px;color:var(--brand)}
  .attcard .amETA{padding:7px 8px;display:flex;flex-direction:column;gap:2px}
  .attcard .anm{font-size:12px;font-weight:600;word-break:break-word;line-height:1.25;cursor:pointer;color:var(--brand-ink)}
  .attcard .asub{font-size:10.5px;color:var(--muted)}
  .attcard .arow{display:flex;justify-content:space-between;align-items:center;padding:0 8px 8px;gap:6px}
  .attcard .adel{background:none;border:none;color:#dc2626;cursor:pointer;font-size:11px;padding:2px 4px}
  .attcard .adl{background:none;border:none;color:var(--brand);cursor:pointer;font-size:11px;padding:2px 4px}
  .attcard.up{align-items:center;justify-content:center;height:150px;color:var(--muted);font-size:12px}
  .modal.help .help-body{padding:6px 24px 20px;max-height:70vh;overflow:auto}
  .modal.help .help-body h3{font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--brand-ink);margin:20px 0 6px;border-bottom:1px solid var(--line);padding-bottom:5px}
  .modal.help .help-body p{font-size:13.5px;color:var(--ink);margin:6px 0;line-height:1.58}
  .modal.help .help-body ul{margin:6px 0 8px;padding-left:20px}
  .modal.help .help-body li{font-size:13.5px;color:var(--ink);margin:5px 0;line-height:1.5}
  .modal.help .help-body b{color:var(--ink);font-weight:600}
  .rowset input{padding:8px 10px;font-size:13px}
  .addrow{margin-top:2px}
  .est{background:var(--brand-soft);border:1px solid #cdd9e2;border-radius:9px;padding:10px 13px;font-size:13px;color:var(--brand-ink);display:flex;justify-content:space-between;align-items:center;gap:10px}
  .est b{font-size:15px}
  .hint{font-size:11.5px;color:var(--muted)}
  .prefix{position:relative}
  .foot{margin-top:22px;color:var(--muted);font-size:12px;text-align:center;line-height:1.7}
  .menu{position:fixed;background:#fff;border:1px solid var(--line-strong);border-radius:11px;box-shadow:0 12px 34px rgba(16,24,40,.2);padding:6px;z-index:90;min-width:220px}
  .menu button{display:block;width:100%;text-align:left;border:none;background:transparent;padding:9px 12px;border-radius:7px;font-size:13px;color:var(--ink)}
  .menu button:hover{background:var(--brand-soft)}
  .menu .menusep{height:1px;background:var(--line);margin:5px 6px}
  .menu .mlabel{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);padding:6px 12px 3px;font-weight:600}
  .loginGate{position:fixed;inset:0;background:linear-gradient(160deg,#eef2f7,#e2e8f0);display:none;align-items:center;justify-content:center;z-index:200;padding:20px}
  .loginCard{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 24px 60px rgba(16,24,40,.18);padding:38px 34px;max-width:380px;width:100%;text-align:center}
  .loginCard .logo{width:60px;height:60px;border-radius:15px;margin:0 auto 18px}
  .loginCard h2{margin:0 0 8px;font-size:20px}
  .loginCard p{margin:0 0 22px;color:var(--muted);font-size:13.5px}
  .msbtn{display:inline-flex;align-items:center;gap:10px;background:#2f2f2f;color:#fff;border:none;border-radius:9px;padding:12px 18px;font-size:14px;font-weight:600;cursor:pointer}
  .msbtn:hover{background:#1f1f1f}
  .msbtn .ms{display:inline-grid;grid-template-columns:1fr 1fr;gap:2px;width:16px;height:16px}
  .msbtn .ms i{display:block}
  .toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(20px);background:#1c2430;color:#fff;padding:11px 18px;border-radius:10px;font-size:13px;box-shadow:0 10px 30px rgba(0,0,0,.25);opacity:0;transition:.2s;z-index:80;pointer-events:none}
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
  @media(max-width:820px){
    .stats{grid-template-columns:repeat(2,1fr)}
    .grid,.grid.three,.grid.four{grid-template-columns:1fr}
    .rowset .rrow,.rowset .rrow.svc{grid-template-columns:1fr}
    .tabs{width:auto;overflow-x:auto}
  }
  /* ---------- printable service-call report ---------- */
  #printArea{display:none}
  @media print{
    html,body{background:#fff !important}
    body>*{display:none !important}
    #printArea{display:block !important}
    /* Force A4 portrait with 15mm margins, so the report always prints to the same
       standard page regardless of the print dialog's default paper/orientation. */
    @page{size:A4 portrait;margin:15mm}
    /* keep colours (blue header, badges) in the printout */
    #printArea{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  }
  /* Constrain to the A4 printable width (210mm − 2×15mm = 180mm) so nothing overflows the page. */
  #printArea{color:#0f172a;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:13px;line-height:1.5;max-width:180mm;margin:0 auto;box-sizing:border-box}
  #printArea *{box-sizing:border-box}
  #printArea img{max-width:100%;height:auto}
  #printArea .p-head{display:flex;align-items:center;gap:14px;border-bottom:3px solid #3f5a6b;padding-bottom:12px;margin-bottom:18px}
  #printArea .p-logo{width:46px;height:46px;background:#3f5a6b;border-radius:11px;display:flex;align-items:center;justify-content:center;flex:none}
  #printArea .p-title{flex:1}
  #printArea .p-title h1{font-size:20px;margin:0;letter-spacing:-.2px}
  #printArea .p-title .p-sub{color:#64748b;font-size:12px;margin-top:2px}
  #printArea .p-ref{text-align:right;font-size:12px;color:#64748b}
  #printArea .p-ref b{display:block;color:#0f172a;font-size:14px}
  #printArea .p-badges{margin:0 0 16px}
  #printArea .p-badge{display:inline-block;font-size:11px;font-weight:700;padding:3px 10px;border-radius:999px;margin-right:6px;border:1px solid #e2e8f0}
  #printArea .p-sec{margin:14px 0;break-inside:avoid}
  #printArea .p-sec h2{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:#3f5a6b;border-bottom:1px solid #e2e8f0;padding-bottom:4px;margin:0 0 8px}
  #printArea .p-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 28px}
  #printArea .p-field .k{color:#64748b;font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;display:block;margin-bottom:1px}
  #printArea .p-field .v{font-size:13px;font-weight:500}
  #printArea .p-note{white-space:pre-wrap;font-size:13px;background:#f8fafc;border:1px solid #eef2f7;border-radius:8px;padding:9px 11px;overflow-wrap:anywhere}
  #printArea .p-field .v{overflow-wrap:anywhere}
  /* Fixed layout + wrapping so tables can never grow wider than the page and clip.
     min-width:0 overrides the global table{min-width:820px} (used by the on-screen
     calls list) which would otherwise push the report tables off the A4 page. */
  #printArea table.p-tbl{width:100%;min-width:0;table-layout:fixed;border-collapse:collapse;font-size:12.5px;margin-top:2px}
  #printArea table.p-tbl th{text-align:left;padding:6px 8px;border-bottom:2px solid #e2e8f0;color:#64748b;font-size:10.5px;text-transform:uppercase;letter-spacing:.4px}
  #printArea table.p-tbl td{padding:6px 8px;border-bottom:1px solid #eef2f7;overflow-wrap:anywhere}
  #printArea table.p-tbl td.num,#printArea table.p-tbl th.num{text-align:right;width:30%;white-space:normal}
  #printArea table.p-tbl.times td.num,#printArea table.p-tbl.times th.num{width:22%}
  #printArea .p-tots{margin-top:10px;margin-left:auto;width:52%}
  #printArea .p-tots .r{display:flex;justify-content:space-between;padding:4px 0;font-size:13px}
  #printArea .p-tots .r.grand{border-top:2px solid #3f5a6b;margin-top:4px;padding-top:8px;font-size:15px;font-weight:700;color:#3f5a6b}
  #printArea .p-foot{margin-top:26px;padding-top:10px;border-top:1px solid #e2e8f0;color:#94a3b8;font-size:11px;display:flex;justify-content:space-between}
  #printArea .p-sign{margin-top:22px;display:grid;grid-template-columns:1fr 1fr;gap:34px;break-inside:avoid}
  #printArea .p-sign .box{border-top:1px solid #94a3b8;padding-top:5px;color:#64748b;font-size:11px}
  /* Phones: the service-calls table becomes stacked cards so it's fully usable without sideways scrolling */
  @media(max-width:640px){
    .wrap{padding:14px 12px 48px}
    header.app{gap:10px}
    .stats{grid-template-columns:repeat(2,1fr);gap:8px}
    .toolbar{gap:8px}
    .search{min-width:0;flex:1 1 100%}
    select.filter{flex:1 1 auto;min-width:0}
    #tbl{table-layout:auto;min-width:0}
    #tbl thead{display:none}
    #tbl,#tbl tbody,#tbl tr,#tbl td{display:block;width:auto}
    #tbl td{width:auto}
    #tbl tr{border:1px solid var(--line);border-radius:12px;padding:12px 14px 12px;margin:0 0 10px;background:#fff;position:relative}
    #tbl td{border:none;padding:3px 0;white-space:normal;overflow:visible;text-overflow:clip}
    #tbl td.dt{font-weight:700;color:var(--ink);font-size:14px;padding-right:64px}
    #tbl td.dt .tm{display:inline;margin-left:8px;font-size:12px;opacity:.6}
    #tbl td.cust{padding-top:4px}
    #tbl td.cust .cname{white-space:normal;font-size:16px;font-weight:700}
    #tbl td.cust .site{white-space:normal}
    #tbl td.cust .svcchip{font-size:11px}
    #tbl td.issue{padding-top:4px}
    #tbl td.issue .icell{flex-wrap:wrap}
    #tbl td.issue .itext{white-space:normal;font-size:13.5px;color:var(--muted)}
    /* default labeled rows */
    #tbl td[data-label]{display:flex;align-items:center;gap:8px;padding:4px 0}
    #tbl td[data-label]::before{content:attr(data-label);flex:none;min-width:92px;color:var(--muted);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.3px}
    /* declutter: drop low-value rows on a phone */
    #tbl td[data-label="Department"]{display:none}
    /* compact single meta strip instead of one row per field */
    #tbl td[data-label="Technician"],#tbl td[data-label="Hours"],#tbl td[data-label="Priority"],#tbl td[data-label="Billed"],#tbl td.pricing-col[data-label="Total"]{
      display:inline-flex;width:auto;align-items:center;gap:5px;margin:6px 14px 0 0;padding:0;vertical-align:middle}
    #tbl td[data-label="Technician"]::before,#tbl td[data-label="Hours"]::before,#tbl td[data-label="Billed"]::before{min-width:0;font-size:10px}
    #tbl td[data-label="Priority"]::before,#tbl td.pricing-col[data-label="Total"]::before{display:none}   /* the coloured chip / bold amount speak for themselves */
    #tbl td.pricing-col[data-label="Total"]{font-size:15px;font-weight:700;color:var(--brand-ink)}
    /* status on its own line, badge is self-evident */
    #tbl td[data-label="Status"]{display:block;padding-top:8px}
    #tbl td[data-label="Status"]::before{display:none}
    #tbl td.actions{position:absolute;top:10px;right:12px;padding:0}
    #tbl td.actions .rowbtns{opacity:1;gap:6px}
    #tbl td.actions .ghost{font-size:18px;padding:7px 9px}
    .modal header{padding:16px 16px}
    .modal .body,.modal form>.group{padding-left:16px;padding-right:16px}
    .modal footer{padding:14px 16px;flex-wrap:wrap}
    /* 16px inputs stop iOS zooming in on focus; bigger padding = easier taps */
    input,select,textarea{font-size:16px;padding:11px 12px}
    button{padding:11px 14px}
    button.mini{padding:8px 11px;font-size:13px}
    select.filter,input.filter[type=date]{min-height:46px}
    .toolbar{gap:8px}
    .daterange{flex:1 1 100%;justify-content:space-between}
    .daterange input.filter[type=date]{flex:1 1 auto;min-width:0}
    #fReturnBtn{flex:1 1 100%}
    .tabs{-webkit-overflow-scrolling:touch;scrollbar-width:none}
    .tabs::-webkit-scrollbar{display:none}
    .tabs button{padding:10px 15px}
    /* wider modals + a sticky header and Save footer so actions stay reachable on long forms
       (small confirm dialogs keep their inline max-width, so they aren't affected) */
    .overlay{padding:12px 10px}
    .modal header{position:sticky;top:0;background:#fff;z-index:3}
    .modal footer{position:sticky;bottom:0;box-shadow:0 -2px 12px rgba(16,24,40,.08);padding-bottom:calc(14px + env(safe-area-inset-bottom))}
    .modal footer .primary,.modal footer .ghost{min-height:48px}
    .rep-hrow{grid-template-columns:84px 1fr auto;gap:8px}
    .timerbox{gap:8px}
    #tbl td.actions .ghost{min-height:40px}
  }
  html{-webkit-text-size-adjust:100%}

  /* ============================================================
     DARK THEME  —  applied when <html data-theme="dark">
     Light is the default; the header toggle flips this attribute.
     Printable report (#printArea) is intentionally left light.
     ============================================================ */
  html[data-theme="dark"]{
    --bg:#0e1319; --panel:#191f27; --ink:#e7ebf1; --muted:#8b97a6;
    --line:#2a323d; --line-strong:#3a4552;
    --brand:#e2001a; --brand-ink:#ff4d5e; --brand-soft:#2a181c;
    --open:#f0a53a; --open-bg:#2c2110;
    --prog:#8fb4cc; --prog-bg:#1d2831;
    --done:#3ddc91; --done-bg:#123024;
    --danger:#ff5c5c; --danger-bg:#331414;
    --high:#ff5c5c; --med:#f0a53a; --low:#9aa6b4;
    --input-bg:#11161d; --input-ro:#1e252e; --elev:#20262e; --hover:#283039; --tint:#1e252e;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 28px rgba(0,0,0,.45);
  }
  html[data-theme="dark"] body{background:linear-gradient(160deg,#141a22 0%,#0d1116 62%,#0a0d11 100%);background-attachment:fixed;color:var(--ink)}
  html[data-theme="dark"] .logo{background:linear-gradient(135deg,#ff4d5e,#b3001a)}
  /* form controls */
  html[data-theme="dark"] input,html[data-theme="dark"] select,html[data-theme="dark"] textarea{background:var(--input-bg);color:var(--ink);border-color:var(--line-strong)}
  html[data-theme="dark"] input::placeholder,html[data-theme="dark"] textarea::placeholder{color:#5f6b78}
  html[data-theme="dark"] input:focus,html[data-theme="dark"] select:focus,html[data-theme="dark"] textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(226,0,26,.28)}
  html[data-theme="dark"] input[type=checkbox],html[data-theme="dark"] input[type=radio]{accent-color:var(--brand)}
  html[data-theme="dark"] input[type=date]::-webkit-calendar-picker-indicator{filter:invert(1) opacity(.55)}
  html[data-theme="dark"] input.locked,html[data-theme="dark"] input[readonly]{background:var(--input-ro);color:var(--muted)}
  html[data-theme="dark"] .search input,html[data-theme="dark"] select.filter,html[data-theme="dark"] input.filter[type=date]{background:var(--input-bg);color:var(--ink)}
  /* buttons */
  html[data-theme="dark"] button{background:var(--elev);color:var(--ink);border-color:var(--line-strong)}
  html[data-theme="dark"] button:hover{background:var(--hover)}
  html[data-theme="dark"] button.ghost{background:transparent;border-color:transparent;color:var(--muted)}
  html[data-theme="dark"] button.ghost:hover{background:var(--hover);color:var(--ink)}
  html[data-theme="dark"] button.primary{color:#fff}
  html[data-theme="dark"] button.aifix{background:var(--elev);color:var(--brand-ink)}
  html[data-theme="dark"] button.aifix:hover:not(:disabled){background:var(--hover);border-color:var(--brand)}
  html[data-theme="dark"] .agfile-add{background:var(--elev)}
  html[data-theme="dark"] .agfile-add:hover{background:var(--hover)}
  /* tabs */
  html[data-theme="dark"] .tabs{background:#12171e}
  html[data-theme="dark"] .tabs button.active{background:var(--elev);color:var(--ink)}
  /* tiles / table */
  html[data-theme="dark"] .tile.accent{background:linear-gradient(135deg,#1d242d,#161c23);border-color:var(--line-strong)}
  html[data-theme="dark"] th{background:#141a21}
  html[data-theme="dark"] tbody tr:hover{background:var(--tint)}
  html[data-theme="dark"] .pgroup>button,html[data-theme="dark"] .pgroup>.pginfo{background:var(--elev);color:var(--ink)}
  html[data-theme="dark"] .pgroup>button:hover:not(:disabled){background:var(--hover)}
  html[data-theme="dark"] .pgroup>button:disabled{background:#12171e;color:var(--muted)}
  /* dialogs / menus / popovers */
  html[data-theme="dark"] .modal{background:var(--panel);color:var(--ink)}
  html[data-theme="dark"] .modal footer{background:#141a21}
  html[data-theme="dark"] .menu{background:var(--panel);border-color:var(--line-strong)}
  html[data-theme="dark"] .checkdrop-btn,html[data-theme="dark"] .checkdrop-menu{background:var(--panel);color:var(--ink)}
  html[data-theme="dark"] .pbc-list{background:var(--input-bg)}
  html[data-theme="dark"] .pbc-head input{background:var(--input-bg);color:var(--ink)}
  html[data-theme="dark"] .attn-chip{background:var(--elev);border-color:var(--line-strong);color:var(--ink)}
  html[data-theme="dark"] .loginGate{background:linear-gradient(160deg,#12161d,#0a0d11)}
  html[data-theme="dark"] .loginCard{background:var(--panel);border-color:var(--line)}
  /* cards */
  html[data-theme="dark"] .agcard,html[data-theme="dark"] .grpcard,html[data-theme="dark"] .rrow.equip{background:#161c23}
  html[data-theme="dark"] .svcgroup{background:#141a21}
  html[data-theme="dark"] .svcrange,html[data-theme="dark"] .agfile,html[data-theme="dark"] .timerbox{background:#1c232b}
  html[data-theme="dark"] .attcard{background:#161c23;border-color:var(--line)}
  html[data-theme="dark"] .attcard .thumb{background:var(--elev)}
  html[data-theme="dark"] .attcard .adel{color:#ff6b6b}
  html[data-theme="dark"] .rep-htrack{background:var(--elev)}
  /* neutral chips / badges */
  html[data-theme="dark"] .chip{background:var(--elev);border-color:var(--line);color:var(--ink)}
  html[data-theme="dark"] .b-oh{background:#2a2140;color:#c4b5fd}
  html[data-theme="dark"] .b-inactive,html[data-theme="dark"] .b-user{background:var(--elev);color:var(--muted)}
  html[data-theme="dark"] .assign-chip{background:var(--elev)}
  html[data-theme="dark"] .assign-chip .rm{background:#333d49;color:#cbd5e1}
  html[data-theme="dark"] .assign-chip .rm:hover{background:#3f4a58}
  /* computed / readonly value fields */
  html[data-theme="dark"] .grpcard-rates input[data-computed],
  html[data-theme="dark"] .rrow.time.svclocked input[readonly],html[data-theme="dark"] .rrow.time.svclocked select:disabled,
  html[data-theme="dark"] .rowset .rrow.svcitem input[readonly]{background:var(--input-ro);color:var(--brand-ink)}
  /* status tints — attention strip */
  html[data-theme="dark"] .attn-chip.a-ret{border-color:#5a3a1a;background:#2c1f10;color:#f0b072}
  html[data-theme="dark"] .attn-chip.a-sla{border-color:#5a2626;background:#2c1414;color:#ff8a8a}
  html[data-theme="dark"] .attn-chip.a-pend{border-color:#5a4a1a;background:#2a2410;color:#e6c766}
  html[data-theme="dark"] .chip.retchip{background:#2c1f10;color:#f0b072;border-color:#5a3a1a}
  html[data-theme="dark"] .chip.retchip.over{background:#2c1414;color:#ff8a8a;border-color:#5a2626}
  /* SLA segments + chips */
  html[data-theme="dark"] .sla-seg.ok,html[data-theme="dark"] .chip.slachip.ok{background:#123024;color:#5fd39b;border-color:#1d5138}
  html[data-theme="dark"] .sla-seg.warn,html[data-theme="dark"] .chip.slachip.warn{background:#2a2410;color:#e6c766;border-color:#5a4a1a}
  html[data-theme="dark"] .sla-seg.breach,html[data-theme="dark"] .sla-seg.late,html[data-theme="dark"] .chip.slachip.breach,html[data-theme="dark"] .chip.slachip.late{background:#2c1414;color:#ff8a8a;border-color:#5a2626}
  html[data-theme="dark"] .sla-seg.hold,html[data-theme="dark"] .chip.slachip.hold{background:var(--elev);color:#9aa6b4;border-color:var(--line-strong)}
  /* warranty */
  html[data-theme="dark"] .chip.warranty-chip{background:#123024;border-color:#1d5138;color:#5fd39b}
  html[data-theme="dark"] .chip.warranty-chip .ico{background:#5fd39b}
  html[data-theme="dark"] .warn-hint.in-warranty,html[data-theme="dark"] .warn-hint.in-warranty .ico{color:#5fd39b}
  html[data-theme="dark"] .warn-hint.in-warranty .ico{background:#5fd39b}
  html[data-theme="dark"] .warn-hint.out-warranty,html[data-theme="dark"] .warn-hint.out-warranty .ico{color:#8b97a6}
  html[data-theme="dark"] .warn-hint.out-warranty .ico{background:#8b97a6}
  html[data-theme="dark"] .projno-desc{color:#5fd39b}
  /* group warning box + misc */
  html[data-theme="dark"] .gwarn{border-color:#5a4a1a;background:#241f10;color:#e6c766}
  html[data-theme="dark"] .est{border-color:var(--line-strong)}
  html[data-theme="dark"] .tmplbar,html[data-theme="dark"] .bulkbar{border-color:var(--line-strong)}
  html[data-theme="dark"] .assign-chip.accepted{background:#123024;border-color:#1d5138}
  html[data-theme="dark"] .assign-chip .acc{color:#5fd39b}
  html[data-theme="dark"] .assign-chip .acc-btn{background:var(--elev);color:var(--brand-ink);border-color:var(--brand)}
  html[data-theme="dark"] .assign-chip .acc-btn:hover{background:var(--brand);color:#fff}
  @media(max-width:640px){ html[data-theme="dark"] #tbl tr{background:#161c23;border-color:var(--line)} }
  /* theme toggle button icon (moon in light → sun in dark) */
  #themeBtn .ic-sun{display:none}
  html[data-theme="dark"] #themeBtn .ic-sun{display:block}
  html[data-theme="dark"] #themeBtn .ic-moon{display:none}

  /* ===== Helpdesk Inbox ===== */
  .inbox-list{display:flex;flex-direction:column}
  .inbox-row{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-bottom:1px solid var(--line)}
  .inbox-row:last-child{border-bottom:none}
  .inbox-row .ib-main{flex:1;min-width:0}
  .inbox-row .ib-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:2px}
  .inbox-row .ib-from{font-weight:600}
  .inbox-row .ib-when{color:var(--muted);font-size:11.5px;margin-left:auto;white-space:nowrap}
  .inbox-row .ib-subj{font-weight:600;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .inbox-row .ib-prev{color:var(--muted);font-size:12.5px;margin-top:2px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .inbox-row .ib-prev.full{-webkit-line-clamp:unset;white-space:pre-wrap;color:var(--ink);max-height:320px;overflow:auto;background:var(--brand-soft);border-radius:8px;padding:8px 10px;margin-top:6px}
  .inbox-row.unread{background:var(--brand-soft)}
  .inbox-row.unread .ib-from::before{content:"●";color:var(--brand);font-size:10px;margin-right:5px;vertical-align:1px}
  .inbox-row .ib-btns{display:flex;flex-direction:column;gap:6px;flex:none}
  @media(max-width:640px){ .inbox-row{flex-direction:column} .inbox-row .ib-btns{flex-direction:row} }

  /* ===== Duty planner ===== */
  .duty-cfg{margin-bottom:16px}
  .duty-cfg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
  .duty-cfg .field{gap:3px}
  .duty-days{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px}
  .duty-dck{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:500;cursor:pointer}
  .duty-dck input{width:auto;margin:0}
  .duty-rotas{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:6px 0 16px}
  @media(max-width:720px){ .duty-rotas{grid-template-columns:1fr} }
  .duty-rota{border:1px solid var(--line);border-radius:10px;padding:12px;background:var(--brand-soft)}
  .duty-rota-h{font-size:12.5px;font-weight:700;color:var(--brand-ink);margin-bottom:8px}
  .rota-list{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
  .rota-chip{display:inline-flex;align-items:center;gap:6px;background:var(--panel);border:1px solid var(--line-strong);border-radius:16px;padding:4px 6px 4px 4px;font-size:12.5px;font-weight:600}
  .rota-chip .rota-i{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:var(--brand);color:#fff;font-size:11px}
  .rota-chip .rota-rm{border:none;background:transparent;color:var(--muted);cursor:pointer;font-size:13px;padding:0 2px;line-height:1}
  .rota-chip .rota-rm:hover{color:var(--danger)}
  .rota-add{width:auto;min-width:150px;font-size:12.5px;padding:6px 8px}
  .duty-tblwrap{overflow-x:auto}
  table.duty-tbl{width:100%;min-width:420px;border-collapse:collapse}
  table.duty-tbl th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);font-weight:600;padding:6px 10px;border-bottom:1px solid var(--line)}
  table.duty-tbl td{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
  table.duty-tbl td select{min-width:150px}
  .duty-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px}

  /* ===== Duty calendar view ===== */
  .duty-schedhead{display:flex;align-items:center;gap:10px;margin:16px 0 10px}
  .seg{display:inline-flex;background:var(--tint,#eef1f5);border:1px solid var(--line);border-radius:9px;padding:3px}
  .seg-btn{border:none;background:transparent;color:var(--muted);font-weight:600;font-size:12.5px;padding:6px 14px;border-radius:7px;cursor:pointer}
  .seg-btn.on{background:var(--panel);color:var(--ink);box-shadow:var(--shadow)}
  .dcal-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
  .dcal-title{font-weight:700;font-size:15px;min-width:150px}
  .dcal-legend{display:inline-flex;align-items:center;gap:6px;margin-left:auto;color:var(--muted);font-size:11.5px;flex-wrap:wrap}
  .dcal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
  .dcal-head{margin-bottom:6px}
  .dcal-dh{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);font-weight:600;text-align:center;padding:2px 0}
  .dcal-cell{min-height:74px;border:1px solid var(--line);border-radius:9px;padding:6px 7px;background:var(--panel);display:flex;flex-direction:column;gap:5px}
  .dcal-cell.out{opacity:.45}
  .dcal-cell.wknd{background:var(--brand-soft)}
  .dcal-cell.today{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand) inset}
  .dcal-dnum{font-size:12px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:5px}
  .dcal-chips{display:flex;flex-direction:column;gap:4px}
  .dcal-chip{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;padding:2px 7px;border-radius:999px;white-space:nowrap;width:max-content;max-width:100%}
  .dcal-chip .ico{width:12px;height:12px}
  .dcal-work{background:var(--done-bg);color:var(--done)}
  .dcal-work .ico{background:var(--done)}
  .dcal-oc{background:var(--danger-bg);color:var(--danger)}
  .dcal-oc .ico{background:var(--danger)}
  @media(max-width:640px){ .dcal-cell{min-height:58px;padding:4px} .dcal-chip{font-size:10px;padding:1px 5px} }

  /* ===== Service cases calendar ===== */
  .cc-items{display:flex;flex-direction:column;gap:3px;overflow:hidden}
  .cc-item{display:block;width:100%;text-align:left;border:none;border-left:3px solid var(--line-strong);background:var(--tint,#eef1f5);color:var(--ink);font-size:11px;font-weight:600;padding:2px 6px;border-radius:5px;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.5}
  .cc-item:hover{filter:brightness(.97)}
  .cc-item .cc-tm{color:var(--muted);font-weight:500;font-size:10px}
  .cc-item.cc-open{border-left-color:var(--open);background:var(--open-bg)}
  .cc-item.cc-prog{border-left-color:var(--prog);background:var(--prog-bg)}
  .cc-item.cc-done{border-left-color:var(--done);background:var(--done-bg)}
  .cc-more{font-size:10.5px;color:var(--muted);font-weight:600;padding:1px 4px}
  .cc-key{display:inline-block;width:9px;height:9px;border-radius:3px;vertical-align:-1px}
  .cc-key.cc-open{background:var(--open)}.cc-key.cc-prog{background:var(--prog)}.cc-key.cc-done{background:var(--done)}
  #callsCalWrap .dcal-cell{min-height:96px}

  /* ===== Helpdesk handled + duty coverage guard ===== */
  .inbox-row.handled{opacity:.6}
  .inbox-row.handled .ib-subj{text-decoration:line-through;text-decoration-color:var(--line-strong)}
  .duty-abs{margin:14px 0}
  .abs-list{display:flex;flex-direction:column;gap:6px;margin:8px 0}
  .abs-row{display:flex;align-items:center;gap:10px;background:var(--brand-soft);border:1px solid var(--line);border-radius:8px;padding:6px 10px;font-size:12.5px}
  .abs-row .abs-who{font-weight:700}
  .abs-row .abs-when{color:var(--muted)}
  .abs-row .abs-note{color:var(--muted);font-style:italic}
  .abs-row .abs-rm{margin-left:auto;border:none;background:transparent;color:var(--muted);cursor:pointer;font-size:13px}
  .abs-row .abs-rm:hover{color:var(--danger)}
  .abs-add{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .abs-add select,.abs-add input[type=date]{width:auto;min-width:120px}
  .abs-add input[type=text]{width:auto;flex:1;min-width:140px}
  .duty-warnbox{border:1px solid #f0c36d;background:#fff8e6;color:#7a5b00;border-radius:9px;padding:10px 12px;margin:12px 0}
  html[data-theme="dark"] .duty-warnbox{border-color:#5a4a1a;background:#241f10;color:#e6c766}
  .duty-warnbox-h{font-weight:700;margin-bottom:4px;display:flex;align-items:center;gap:6px}
  .duty-warnbox-h .ico{background:currentColor}
  .duty-warnbox ul{margin:4px 0 0;padding-left:18px}
  .duty-warnbox li{font-size:12.5px;margin:2px 0}
  .duty-warn{color:var(--danger);font-size:11px;font-weight:700;white-space:nowrap}
  .duty-rowwarn>td{background:var(--danger-bg)}
  .dcal-chip.away{outline:2px solid var(--danger);outline-offset:1px}

  /* ===== Duplicate customers dialog ===== */
  .dup-group{border:1px solid var(--line);border-radius:10px;padding:12px;margin-bottom:12px;background:var(--brand-soft)}
  .dup-group-h{font-weight:700;font-size:13px;margin-bottom:8px}
  .dup-opt{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:8px;cursor:pointer;background:var(--panel);border:1px solid var(--line);margin-bottom:6px}
  .dup-opt input{width:auto;margin:0;flex:none}
  .dup-opt .dup-nm{font-weight:600}
  .dup-opt .dup-meta{color:var(--muted);font-size:12px;margin-left:auto;text-align:right}
  .dup-actions{margin-top:6px}

  /* ===== SLA due-soon chip + alerts bell ===== */
  .attn-chip.a-soon{border-color:#fed7aa;background:#fff7ed;color:#9a3412}
  html[data-theme="dark"] .attn-chip.a-soon{border-color:#5a3a1a;background:#2c1f10;color:#f0b072}
  .attn-bell{border:1px solid var(--line-strong);background:var(--panel);border-radius:999px;padding:5px 12px;font-size:12px;cursor:pointer;color:var(--ink)}
  .attn-bell:hover{background:var(--brand-soft)}
  /* ===== Dispatch day view ===== */
  .day-wrap{display:flex;flex-direction:column;gap:16px;margin-top:12px}
  .day-group-h{display:flex;align-items:center;gap:8px;font-weight:700;font-size:13.5px;margin-bottom:8px}
  .day-case{display:flex;align-items:center;gap:12px;padding:9px 12px;border:1px solid var(--line);border-left:3px solid var(--line-strong);border-radius:9px;background:var(--panel);margin-bottom:7px;cursor:pointer}
  .day-case:hover{background:var(--brand-soft)}
  .day-case.cc-open{border-left-color:var(--open)} .day-case.cc-prog{border-left-color:var(--prog)} .day-case.cc-done{border-left-color:var(--done)}
  .day-c-main{flex:1;min-width:0}
  .day-c-top{font-weight:600;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .day-c-sub{color:var(--muted);font-size:12.5px;margin-top:2px;overflow:hidden;text-overflow:ellipsis}
  .day-dir{flex:none;display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--brand-ink);border:1px solid var(--line-strong);border-radius:8px;padding:5px 9px;text-decoration:none;background:var(--panel)}
  .day-dir:hover{background:var(--brand-soft)}
  .day-dir .ico{background:var(--brand-ink)}
  /* ===== Signature pad ===== */
  .sign-wrap{display:flex;flex-direction:column;gap:8px}
  .sigpad{width:100%;max-width:700px;height:auto;aspect-ratio:700/190;border:1px dashed var(--line-strong);border-radius:10px;background:#fff;touch-action:none;cursor:crosshair}
  .sign-row{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap}

  .appver{color:var(--muted);font-size:11px;opacity:.8}

  /* ===== Waiting-on-customer status ===== */
  .badge.b-wait{background:#ede9fe;color:#6d28d9}
  html[data-theme="dark"] .badge.b-wait{background:#241633;color:#c4b5fd}
  .cc-item.cc-wait{border-left-color:#8b5cf6;background:#ede9fe}
  html[data-theme="dark"] .cc-item.cc-wait{background:#241633}
  .day-case.cc-wait{border-left-color:#8b5cf6}

  /* ===== Duty swaps ===== */
  .swap-box{border:1px solid var(--line);border-radius:10px;padding:12px;margin-bottom:12px;background:var(--brand-soft)}
  .swap-h{font-size:12.5px;font-weight:700;color:var(--brand-ink);margin-bottom:8px}
  .swap-row{display:flex;align-items:center;gap:12px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel);margin-bottom:6px;font-size:13px}
  .swap-row:last-child{margin-bottom:0}
  .swap-main{flex:1;min-width:0}
  .swap-btns{display:flex;gap:6px;flex:none}
  .swap-status{font-size:11px;font-weight:700;padding:1px 8px;border-radius:999px;text-transform:capitalize}
  .swap-pending{background:#fef3c7;color:#b45309}
  .swap-accepted{background:var(--done-bg);color:var(--done)}
  .swap-declined,.swap-cancelled{background:var(--danger-bg);color:var(--danger)}