:root{
    --paper:#212121;
    --paper-dark:#171717;
    --card:#2f2f2f;
    --card-soft:#383838;
    --ink:#ececec;
    --ink-soft:#8e8ea0;
    --line:#4d4d4d;
    --accent:#10a37f;
    --accent-dim:#0d8a6c;
    --accent-ink:#ffffff;
    --mustard:#d9a441;
    --teal:#19c37d;
    --red:#f87171;
    --violet:#a78bfa;
    --green:#4ade80;
    --gray:#8e8ea0;
    --orange:#fb923c;
    --gold-due:#d9a441;

    --font-display:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;
    --font-body:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  }

  *{box-sizing:border-box; margin:0; padding:0;}

  /* ---------------- Light theme override ---------------- */
  body.theme-light{
    --paper:#FFFFFF;
    --paper-dark:#F7F7F8;
    --card:#FFFFFF;
    --card-soft:#F7F7F8;
    --ink:#0D0D0D;
    --ink-soft:#6E6E80;
    --line:#E5E5E5;
    --accent:#10A37F;
    --accent-dim:#0D8A6C;
    --accent-ink:#FFFFFF;
    --mustard:#B45309;
    --teal:#0F766E;
    --red:#DC2626;
    --violet:#7C3AED;
    --green:#16A34A;
    --gray:#6B7280;
    --orange:#EA580C;
    --gold-due:#B45309;
  }
  body.theme-light .brand-logo{ box-shadow:0 0 0 1px rgba(22,27,33,0.1); }
  body.theme-light .toggle-thumb{ background:#1C1C1E; }

  .theme-toggle-btn{
    position:fixed;
    top:32px;
    right:20px;
    z-index:1500;
    width:38px;
    height:38px;
    border-radius:50%;
    border:1px solid var(--line);
    background:var(--card);
    color:var(--ink);
    font-size:15px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    box-shadow:0 1px 4px rgba(0,0,0,0.12);
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
  }
  .theme-toggle-btn:hover{ border-color:var(--accent-dim); transform:translateY(-2px); }
  body:not(.role-admin):not(.role-staff):not(.role-viewer) .theme-toggle-btn{ display:none; } /* hidden on the login screen */


  body{
    background:
      radial-gradient(ellipse 900px 500px at 15% -10%, rgba(16,163,127,0.06), transparent),
      var(--paper);
    color:var(--ink);
    font-family:var(--font-body);
    min-height:100vh;
    padding: 28px 20px 80px;
  }

  .wrap{ flex:1; min-width:0; max-width: 1440px; margin: 0 auto; }

  /* ---------- Header ---------- */
  header{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    flex-wrap:wrap;
    gap: 16px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 26px;
  }
  .brand-block{
    display:flex;
    align-items:center;
    gap:14px;
  }
  .brand-logo{
    width:48px;
    height:48px;
    border-radius:12px;
    flex:none;
    box-shadow:0 0 0 1px rgba(255,255,255,0.08);
  }
  .brand-mark{
    font-family:var(--font-mono);
    font-size:11px;
    letter-spacing: 0.18em;
    text-transform:uppercase;
    color:var(--accent-dim);
    margin-bottom:6px;
  }
  h1{
    font-family:var(--font-display);
    font-weight:700;
    font-size: 34px;
    letter-spacing:-0.01em;
    line-height:1;
    color:var(--ink);
  }
  header .sub{
    font-family:var(--font-mono);
    font-size:12.5px;
    color:var(--ink-soft);
    text-align:right;
  }
  header .sub b{ color:var(--ink); font-weight:600;}

  /* ---------- Panels ---------- */
  .panel{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:12px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
    margin-bottom:22px;
  }
  .panel-head{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 18px;
    border-bottom:1px dashed var(--line);
    cursor:pointer;
    user-select:none;
  }
  .panel-head .eyebrow{
    font-family:var(--font-mono);
    font-size:11px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--accent-dim);
  }
  .panel-head h2{
    font-family:var(--font-display);
    font-size:18px;
    font-weight:600;
    margin-top:2px;
    color:var(--ink);
  }
  .chevron{ font-family:var(--font-mono); font-size:14px; color:var(--ink-soft); transition:transform .2s;}
  .panel.collapsed .chevron{ transform:rotate(-90deg); }
  .panel-body{ padding:18px; }
  .panel.collapsed .panel-body{ display:none; }

  /* ---------- Form ---------- */
  .form-grid{
    display:grid;
    grid-template-columns: 1.3fr 1fr;
    gap:14px 16px;
  }
  .field{ display:flex; flex-direction:column; gap:6px; }
  .field.full{ grid-column: 1 / -1; }
  .field.hidden{ display:none; }
  label{
    font-family:var(--font-mono);
    font-size:11px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--ink-soft);
  }
  input, select, textarea{
    font-family:var(--font-body);
    font-size:14.5px;
    color:var(--ink);
    background:var(--card-soft);
    border:1px solid var(--line);
    border-radius:6px;
    padding:9px 10px;
    outline:none;
    transition: border-color .15s ease, box-shadow .15s ease;
  }
  input:focus, select:focus, textarea:focus{
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(16,163,127,0.14);
  }
  textarea{ resize:vertical; min-height:56px; font-family:var(--font-body); }
  select{ appearance:none; -webkit-appearance:none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0 L5 6 L10 0 Z' fill='%238b93a1'/></svg>"); background-repeat:no-repeat; background-position: right 12px center; padding-right:30px;}

  .btn{
    font-family:var(--font-mono);
    font-size:12.5px;
    letter-spacing:0.06em;
    text-transform:uppercase;
    font-weight:600;
    border:none;
    border-radius:7px;
    padding:11px 20px;
    cursor:pointer;
    transition: transform .08s ease, opacity .15s ease, background .15s ease;
  }
  .btn:active{ transform: translateY(1px); }
  .btn-primary{ background:var(--accent); color:var(--accent-ink); }
  .btn-primary:hover{ background:#0d8f6f; }
  .btn-ghost{ background:transparent; color:var(--ink-soft); border:1px solid var(--line); }
  .btn-ghost:hover{ border-color:var(--accent-dim); color:var(--ink); }
  .btn-small{ padding:6px 11px; font-size:11px; }

  .form-actions{ grid-column:1/-1; display:flex; gap:10px; justify-content:flex-end; margin-top:2px; }

  .add-client-toggle{
    font-family:var(--font-mono);
    font-size:11px;
    color:var(--accent-dim);
    cursor:pointer;
    margin-top:6px;
    display:inline-block;
    text-decoration:underline;
  }
  .add-client-toggle:hover{ color:var(--accent); }
  .add-client-box.hidden{ display:none; }
  .add-client-box{
    background:var(--paper-dark);
    border:1px solid var(--line);
    border-radius:10px;
    padding:12px;
  }
  #manage-clients-list{ margin-top:12px; }
  .client-manage-group{ margin-bottom:12px; }
  .client-manage-group .cat-label{
    font-family:var(--font-mono);
    font-size:10px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--ink-soft);
    margin-bottom:5px;
  }
  .client-manage-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:6px 10px;
    border:1px solid var(--line);
    border-radius:6px;
    background:var(--card-soft);
    margin-bottom:4px;
    font-size:12.5px;
  }
  .client-manage-row button{
    background:none;
    border:1px solid var(--line);
    border-radius:6px;
    color:var(--red);
    font-family:var(--font-mono);
    font-size:10px;
    padding:3px 8px;
    cursor:pointer;
  }
  .client-manage-row button:hover{ border-color:var(--red); background:rgba(229,72,77,0.12); }

  /* ---------- Log a Job form ---------- */
  .lj-form{ display:flex; flex-direction:column; gap:26px; }
  .lj-section + .lj-section{ padding-top:24px; border-top:1px dashed var(--line); }
  .lj-section-head{ display:flex; align-items:flex-start; gap:12px; margin-bottom:16px; }
  .lj-section-icon{
    width:36px; height:36px; flex:none; border-radius:10px;
    display:flex; align-items:center; justify-content:center;
    background:rgba(16,163,127,0.14); color:var(--accent);
  }
  .lj-section-icon.lj-icon-assign{ background:rgba(167,139,250,0.16); color:var(--violet); }
  .lj-section-icon.lj-icon-attach{ background:rgba(217,164,65,0.16); color:var(--mustard); }
  .lj-section-head h3{
    font-family:var(--font-display); font-weight:600; font-size:15.5px; color:var(--ink); margin-bottom:2px;
  }
  .lj-section-head p{ font-size:12.5px; color:var(--ink-soft); line-height:1.4; }
  .lj-req{ color:var(--red); margin-left:2px; }
  .lj-optional{
    color:var(--ink-soft); font-weight:400; text-transform:none; letter-spacing:0; font-size:10.5px; margin-left:2px;
  }

  .lj-priority-row{ display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
  .lj-priority-btn{
    display:flex; align-items:center; justify-content:center; gap:7px;
    padding:10px 10px; border-radius:9px; border:1.5px solid transparent;
    font-family:var(--font-body); font-size:13.5px; font-weight:600; cursor:pointer;
    opacity:0.55; transition: opacity .15s ease, border-color .15s ease, transform .08s ease;
  }
  .lj-priority-btn:active{ transform:translateY(1px); }
  .lj-priority-btn.active{ opacity:1; border-color:currentColor; }
  .lj-priority-btn.lj-p-high{ background:rgba(248,113,113,0.14); color:var(--red); }
  .lj-priority-btn.lj-p-medium{ background:rgba(217,164,65,0.16); color:var(--mustard); }
  .lj-priority-btn.lj-p-low{ background:var(--card-soft); color:var(--ink-soft); }
  .lj-priority-btn svg{ width:14px; height:14px; flex:none; }

  .lj-charcount{ text-align:right; font-family:var(--font-mono); font-size:10.5px; color:var(--ink-soft); margin-top:2px; }

  .lj-dropzone{
    border:2px dashed var(--line); border-radius:12px; padding:34px 20px; text-align:center;
    cursor:pointer; transition: border-color .15s ease, background .15s ease;
  }
  .lj-dropzone:hover, .lj-dropzone.dragover{ border-color:var(--accent-dim); background:var(--card-soft); }
  .lj-dropzone-icon{
    width:38px; height:38px; margin:0 auto 10px; color:var(--ink-soft);
    display:flex; align-items:center; justify-content:center;
  }
  .lj-dropzone-title{ font-family:var(--font-display); font-weight:600; font-size:14px; color:var(--ink); margin-bottom:3px; }
  .lj-dropzone-sub{ font-size:12.5px; color:var(--ink-soft); margin-bottom:10px; }
  .lj-dropzone-hint{ font-family:var(--font-mono); font-size:10.5px; color:var(--ink-soft); opacity:0.85; }

  .lj-file-list{ display:flex; flex-direction:column; gap:8px; margin-top:14px; }
  .lj-file-item{
    display:flex; align-items:center; gap:10px; padding:8px 10px;
    border:1px solid var(--line); border-radius:9px; background:var(--card-soft);
  }
  .lj-file-icon{
    width:32px; height:32px; flex:none; border-radius:7px; background:var(--card);
    display:flex; align-items:center; justify-content:center; overflow:hidden; color:var(--ink-soft);
  }
  .lj-file-icon img{ width:100%; height:100%; object-fit:cover; display:block; }
  .lj-file-meta{ min-width:0; flex:1; }
  .lj-file-name{ font-size:12.5px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .lj-file-size{ font-family:var(--font-mono); font-size:10.5px; color:var(--ink-soft); margin-top:1px; }
  .lj-file-remove{
    flex:none; background:none; border:none; color:var(--ink-soft); cursor:pointer;
    font-size:17px; line-height:1; padding:4px; border-radius:6px;
  }
  .lj-file-remove:hover{ color:var(--red); background:rgba(229,72,77,0.12); }

  .lj-footer-actions{
    display:flex; justify-content:space-between; align-items:center; gap:10px;
    padding-top:20px; border-top:1px dashed var(--line);
  }
  .lj-submit-btn{ display:inline-flex; align-items:center; gap:8px; }
  .lj-submit-btn svg{ width:14px; height:14px; }
  @media (max-width: 560px){
    .lj-priority-row{ grid-template-columns:1fr; }
    .lj-footer-actions{ flex-direction:column-reverse; align-items:stretch; }
  }

  /* ---------- Filters ---------- */
  .filter-row{
    display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  }
  .filter-row select, .filter-row input{ padding:8px 10px; font-size:13px; }
  .filter-row .grow{ flex:1; min-width:180px; }
  .count-tag{
    font-family:var(--font-mono);
    font-size:11.5px;
    color:var(--ink-soft);
    white-space:nowrap;
  }

  /* ---------- Toolbar sections ---------- */
  .toolbar-section{
    padding:14px 0;
    border-bottom:1px dashed var(--line);
  }
  .toolbar-section:last-of-type{ border-bottom:none; padding-bottom:18px; }
  .toolbar-label{
    font-family:var(--font-mono);
    font-size:10.5px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--ink-soft);
    margin-bottom:9px;
  }

  /* ---------- Toggle switch ---------- */
  .toggle-switch{
    display:flex;
    align-items:center;
    gap:8px;
    cursor:pointer;
    user-select:none;
  }
  .toggle-switch input{ display:none; }
  .toggle-track{
    width:34px; height:18px;
    background:var(--line);
    border-radius:10px;
    position:relative;
    transition: background .15s ease;
    flex:none;
  }
  .toggle-thumb{
    position:absolute;
    top:2px; left:2px;
    width:14px; height:14px;
    background:#fff;
    border-radius:50%;
    transition: left .15s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.4);
  }
  .toggle-switch input:checked + .toggle-track{ background:var(--accent); }
  .toggle-switch input:checked + .toggle-track .toggle-thumb{ left:18px; }
  .toggle-label{
    font-family:var(--font-mono);
    font-size:11.5px;
    color:var(--ink-soft);
    white-space:nowrap;
  }

  /* ---------- Job table ---------- */
  #board{ overflow-x:auto; border:1px solid var(--line); border-radius:10px; margin-top:16px; }
  .job-table{
    width:100%;
    border-collapse:collapse;
    background:var(--card);
    font-size:13.5px;
  }
  .job-table thead th{
    background:var(--card-soft);
    color:var(--accent);
    font-family:var(--font-mono);
    font-size:11px;
    font-weight:600;
    letter-spacing:0.04em;
    text-transform:uppercase;
    text-align:left;
    padding:10px 12px;
    white-space:nowrap;
    position:sticky;
    top:0;
  }
  .job-table td{
    padding:9px 12px;
    border-top:1px solid var(--line);
    vertical-align:top;
    color:var(--ink);
  }
  .job-table tbody tr:nth-child(even){ background:rgba(255,255,255,0.015); }
  .job-table tbody tr:hover{ background:rgba(255,255,255,0.035); }
  .job-row-client{
    font-family:var(--font-display);
    font-weight:600;
    font-size:13.5px;
    white-space:nowrap;
  }
  .job-row-cat{
    font-family:var(--font-mono);
    font-size:9.5px;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--ink-soft);
    display:block;
    margin-bottom:1px;
  }
  .job-row-work{ max-width:260px; line-height:1.4; }
  .job-row-assigned{
    font-family:var(--font-mono);
    font-size:11px;
    letter-spacing:0.04em;
    padding:3px 9px;
    border-radius:20px;
    background:rgba(16,163,127,0.14);
    color:var(--accent-dim);
    display:inline-block;
  }
  .job-row-assigned.unassigned{ color:var(--ink-soft); background:transparent; font-style:italic; }
  .job-row-comment{ max-width:150px; line-height:1.4; color:var(--ink-soft); font-size:12.5px; }
  .job-row-comment.empty{ font-style:italic; opacity:0.55; }
  .job-row-comment-cell{ max-width:150px; width:150px; }
  .comment-edit{
    width:100%;
    min-width:110px;
    border:1px solid transparent;
    background:transparent;
    color:var(--ink-soft);
    font-family:var(--font-body);
    font-size:12.5px;
    line-height:1.4;
    padding:4px 6px;
    border-radius:6px;
    resize:none;
    overflow:hidden;
    display:block;
  }
  .comment-edit:hover{ border-color:var(--line); background:var(--card-soft); }
  .comment-edit:focus{
    outline:none;
    border-color:var(--accent);
    background:var(--card-soft);
    color:var(--ink);
  }
  .comment-edit::placeholder{ font-style:italic; opacity:0.6; }
  .job-row-date{
    font-family:var(--font-mono);
    font-size:12px;
    font-weight:600;
    white-space:nowrap;
  }
  .job-row-date.overdue{ color:var(--red); }
  .job-row-date.due-today{ color:var(--gold-due); }
  .job-row-date.upcoming{ color:var(--green); }
  .job-row-actions{ display:flex; gap:6px; align-items:center; white-space:nowrap; }

  /* ---------- Manual priority drag-and-drop ---------- */
  .job-row-drag{ width:26px; padding-left:8px !important; padding-right:0 !important; }
  .drag-handle{
    cursor:grab;
    color:var(--ink-soft);
    font-size:15px;
    line-height:1;
    user-select:none;
    display:inline-block;
    padding:2px 5px;
    border-radius:4px;
  }
  .drag-handle:hover{ color:var(--ink); background:rgba(255,255,255,0.06); }
  .drag-handle:active{ cursor:grabbing; }
  .job-table tbody tr.dragging{ opacity:0.35; }
  .job-table tbody tr.drag-over-top{ box-shadow: inset 0 2px 0 0 var(--accent); }
  .job-table tbody tr.drag-over-bottom{ box-shadow: inset 0 -2px 0 0 var(--accent); }
  .priority-hint{
    font-family:var(--font-mono);
    font-size:11.5px;
    color:var(--ink-soft);
    padding:8px 12px;
    border:1px dashed var(--line);
    border-radius:8px;
    margin-bottom:10px;
  }
  body.role-viewer .drag-handle{ pointer-events:none; opacity:0.3; cursor:default; }

  .status-pill-select{
    font-family:var(--font-mono);
    font-size:11px;
    font-weight:600;
    letter-spacing:0.03em;
    color:#fff;
    border:none;
    border-radius:20px;
    padding:5px 22px 5px 12px;
    cursor:pointer;
    appearance:none;
    -webkit-appearance:none;
    background-repeat:no-repeat;
    background-position: right 8px center;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='9' height='6'><path d='M0 0 L4.5 6 L9 0 Z' fill='white'/></svg>");
  }
  .status-pill-s-New{ background:var(--red); }
  .status-pill-s-Inprocess{ background:var(--mustard); }
  .status-pill-s-Completed{ background:var(--green); }
  .status-pill-s-Posting{ background:var(--teal); }
  .status-pill-s-Posted{ background:var(--green); }
  .status-pill-s-Review{ background:var(--violet); }
  .status-pill-s-Allocated{ background:var(--teal); }
  .status-pill-s-Planned{ background:var(--violet); }
  .status-pill-s-In-Progress{ background:var(--mustard); }
  .status-pill-s-Delayed{ background:var(--orange); }
  .status-pill-s-No-post{ background:var(--gray); }
  .status-pill-s-Planned-for-tomorrow{ background:var(--violet); }
  .status-pill-s-Changes{ background:var(--orange); }
  .status-pill-s-Ready-to-invoice{ background:var(--mustard); }
  .status-pill-s-Planned-for-evening{ background:var(--violet); }
  .status-badge-ro{
    font-family:var(--font-mono);
    font-size:10.5px;
    font-weight:600;
    letter-spacing:0.03em;
    color:#fff;
    border-radius:20px;
    padding:4px 10px;
    display:inline-block;
  }

  /* ---------- Ticket cards (legacy, kept for other boards) ---------- */

  .ticket{
    position:relative;
    background:var(--card);
    border:1px solid var(--line);
    border-left: 4px solid var(--line);
    border-radius:10px;
    display:grid;
    grid-template-columns: 190px 1fr 150px;
    overflow:hidden;
    transition: box-shadow .15s ease;
  }
  .ticket:hover{ box-shadow: 0 4px 18px rgba(0,0,0,0.35); }
  .ticket.overdue{ border-left-color: var(--red); }
  .ticket.due-today{ border-left-color: var(--gold-due); }
  .ticket.upcoming{ border-left-color: var(--green); }

  .t-date{
    font-family:var(--font-mono);
    font-size:12px;
    font-weight:600;
  }
  .t-date.overdue{ color:var(--red); }
  .t-date.due-today{ color:var(--gold-due); }
  .t-date.upcoming{ color:var(--green); }
  .t-stub{
    padding:16px 16px;
    display:flex; flex-direction:column; gap:8px;
    background: var(--paper-dark);
    justify-content:center;
    border-right:1px solid var(--line);
  }
  .t-cat{
    font-family:var(--font-mono);
    font-size:9.5px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--ink-soft);
  }
  .t-client{
    font-family:var(--font-display);
    font-weight:700;
    font-size:16px;
    line-height:1.2;
    color:var(--ink);
  }
  .t-mid{ padding:16px 18px; display:flex; flex-direction:column; gap:10px; }
  .t-work{ font-size:14.5px; line-height:1.5; white-space:pre-wrap; color:var(--ink); }
  .t-comment{
    font-size:13px;
    color:var(--ink-soft);
    line-height:1.5;
    border-left:2px solid var(--line);
    padding-left:10px;
    white-space:pre-wrap;
  }
  .t-comment.empty{ font-style:italic; opacity:0.55; }

  /* ---------- Process bar ---------- */
  .process-bar{
    display:flex;
    align-items:center;
    margin-bottom:4px;
  }
  .process-step{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
    flex:none;
  }
  .process-dot{
    width:10px; height:10px;
    border-radius:50%;
    background:var(--paper-dark);
    border:2px solid var(--line);
  }
  .process-step.done .process-dot{ background:var(--teal); border-color:var(--teal); }
  .process-step.current .process-dot{ background:var(--accent); border-color:var(--accent); }
  .process-label{
    font-family:var(--font-mono);
    font-size:9px;
    letter-spacing:0.04em;
    text-transform:uppercase;
    color:var(--ink-soft);
    white-space:nowrap;
  }
  .process-step.done .process-label, .process-step.current .process-label{ color:var(--ink); font-weight:600; }
  .process-line{
    flex:1;
    height:2px;
    background:var(--line);
    margin:0 6px;
    margin-bottom:16px;
  }
  .process-line.done{ background:var(--teal); }

  /* ---------- Delivered badge ---------- */
  .delivered-badge{
    font-family:var(--font-mono);
    font-size:11px;
    font-weight:600;
    padding:4px 9px;
    border-radius:6px;
    display:inline-block;
    width:fit-content;
  }
  .delivered-badge.on-time{ color:var(--green); background:rgba(63,189,110,0.14); }
  .delivered-badge.late{ color:var(--red); background:rgba(229,72,77,0.14); }

  .t-side{
    padding:16px 16px;
    display:flex; flex-direction:column; gap:10px; align-items:flex-end;
    justify-content:space-between;
  }

  .stamp{
    font-family:var(--font-mono);
    font-size:10.5px;
    font-weight:600;
    letter-spacing:0.05em;
    text-transform:uppercase;
    padding:5px 11px;
    border-radius:20px;
    white-space:nowrap;
    position:relative;
    isolation:isolate;
  }
  .stamp::before{
    content:"";
    position:absolute; inset:0;
    background: currentColor;
    opacity:0.16;
    border-radius:20px;
    z-index:-1;
  }
  .side-actions{ display:flex; gap:6px; }
  .icon-btn{
    background:transparent; border:1px solid var(--line); border-radius:6px;
    font-family:var(--font-mono); font-size:11px; color:var(--ink-soft);
    padding:5px 9px; cursor:pointer;
    transition: border-color .15s ease, color .15s ease;
  }
  .icon-btn:hover{ border-color:var(--accent-dim); color:var(--ink); }
  .icon-btn-icon{
    display:inline-flex; align-items:center; justify-content:center;
    padding:6px; line-height:0;
  }
  .icon-btn-icon svg{ width:14px; height:14px; display:block; }
  .icon-btn-icon.icon-btn-delete:hover{ border-color:var(--red); color:var(--red); }
  .icon-btn-icon.icon-btn-link-set{ border-color:var(--teal); color:var(--teal); }
  .icon-btn-icon.icon-btn-link-set:hover{ border-color:var(--teal); color:var(--teal); opacity:0.8; }

  .status-select{
    font-family:var(--font-mono);
    font-size:11px;
    padding:5px 24px 5px 8px;
    border-radius:6px;
  }

  /* status colors */
  .s-New{ color:var(--red); }
  .s-Review{ color:var(--violet); }
  .s-Allocated{ color:var(--teal); }
  .s-Completed{ color:var(--green); }
  .s-Planned{ color:var(--violet); }
  .s-In-Progress{ color:var(--mustard); }
  .s-Delayed{ color:var(--orange); }
  .s-No-post{ color:var(--gray); }
  .s-Planned-for-tomorrow{ color:var(--violet); }
  .s-Changes{ color:var(--orange); }
  .s-Ready-to-invoice{ color:var(--mustard); }
  .s-Planned-for-evening{ color:var(--violet); }

  .empty-state{
    text-align:center;
    padding: 50px 20px;
    color:var(--ink-soft);
    font-family:var(--font-mono);
    font-size:13px;
  }

  /* ---------------- Status board (list) ---------------- */
  .status-board{
    display:flex;
    flex-direction:column;
    gap:16px;
  }
  .status-col{
    width:100%;
    background:var(--paper-dark);
    border:1px solid var(--line);
    border-radius:10px;
  }
  .status-col-head{
    padding:12px 14px;
    border-bottom:2px solid var(--accent);
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:var(--card);
    border-radius:10px 10px 0 0;
  }
  .status-col-head .name{
    font-family:var(--font-mono);
    font-size:11.5px;
    font-weight:600;
    letter-spacing:0.05em;
    text-transform:uppercase;
    color:var(--ink);
  }
  .status-col-head .count{
    font-family:var(--font-mono);
    font-size:11px;
    color:var(--ink-soft);
    background:var(--paper-dark);
    border:1px solid var(--line);
    border-radius:10px;
    padding:1px 8px;
  }
  .status-col-body{
    padding:8px;
    display:flex;
    flex-direction:column;
    gap:6px;
  }
  .status-col-empty{
    font-family:var(--font-mono);
    font-size:11px;
    color:var(--ink-soft);
    text-align:center;
    padding:14px 6px;
    font-style:italic;
    opacity:0.7;
  }
  .mini-card{
    background:var(--card);
    border:1px solid var(--line);
    border-left:4px solid var(--line);
    border-radius:8px;
    padding:9px 14px;
    display:grid;
    grid-template-columns: 220px 1fr 120px;
    align-items:center;
    gap:12px;
    cursor:pointer;
    transition: border-color .15s ease, background .15s ease;
  }
  .mini-card:hover{ background:var(--card-soft); }
  .mini-card.overdue{ border-left-color: var(--red); }
  .mini-card.due-today{ border-left-color: var(--gold-due); }
  .mini-card.upcoming{ border-left-color: var(--green); }
  .mini-card .mc-client{
    font-family:var(--font-display);
    font-weight:600;
    font-size:13.5px;
    line-height:1.25;
    color:var(--ink);
  }
  .mini-card .mc-work{
    font-size:12.5px;
    color:var(--ink-soft);
    line-height:1.4;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .mini-card .mc-date{
    font-family:var(--font-mono);
    font-size:11.5px;
    font-weight:600;
    text-align:right;
  }
  .mini-card .mc-date.overdue{ color:var(--red); }
  .mini-card .mc-date.due-today{ color:var(--gold-due); }
  .mini-card .mc-date.upcoming{ color:var(--green); }

  @media (max-width: 640px){
    .mini-card{ grid-template-columns: 1fr; gap:4px; }
    .mini-card .mc-date{ text-align:left; }
  }

  footer{
    text-align:center;
    font-family:var(--font-mono);
    font-size:10.5px;
    color:var(--ink-soft);
    margin-top: 30px;
    letter-spacing:0.05em;
  }
  .footer-credit{
    margin-top:8px;
    font-size:10px;
    color:var(--ink-soft);
    opacity:0.75;
  }

  @media (max-width: 720px){
    .form-grid{ grid-template-columns: 1fr; }
    .ticket{ grid-template-columns: 1fr; }
    .ticket::after{ display:none; }
    .t-stub{ flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:space-between; }
    .t-side{ flex-direction:row-reverse; align-items:center; }
    header{ align-items:flex-start; }
    header .sub{ text-align:left; }
  }

  /* ---------------- Login screen ---------------- */
  #login-screen{
    --lg-bg:#07120e; --lg-panel:#0c1512; --lg-line:rgba(255,255,255,0.14);
    --lg-green:#4cb56f; --lg-green-hi:#63d68a; --lg-ink:#f4f7f5; --lg-soft:#b9c4be; --lg-mute:#7f8c85;
    position:fixed; inset:0; z-index:900; overflow-y:auto; /* full-screen: covers the page padding */
    min-height:100vh; display:grid; grid-template-columns:57.8fr 42.2fr;
    background:var(--lg-bg); color:var(--lg-ink); font-family:'Inter',-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  }
  #login-screen.hidden{ display:none; }
  #login-screen *{ box-sizing:border-box; }

  /* left: brand story */
  .lg-hero{
    position:relative; overflow:hidden; min-height:100vh; padding:44px 48px;
    background:
      radial-gradient(ellipse 60% 45% at 20% 8%, rgba(30,86,52,0.55), transparent 70%),
      linear-gradient(180deg,#0a1c14 0%,#08150f 55%,#050b08 100%);
  }
  .lg-hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(5,11,8,.55),transparent 55%); pointer-events:none; }
  .lg-hero-inner{ position:relative; z-index:1; max-width:560px; }
  .lg-logo{ display:block; width:104px; height:auto; margin:0 0 56px -6px; }
  #login-screen .lg-title{
    font-family:inherit; font-size:clamp(40px,4.6vw,66px); font-weight:700; line-height:1.02; letter-spacing:-0.025em; color:#fff; margin:0 0 22px;
  }
  .lg-title span{ color:var(--lg-green-hi); }
  .lg-tag{ font-size:clamp(18px,1.6vw,24px); color:var(--lg-soft); margin:0 0 22px; }
  .lg-desc{ font-size:clamp(15px,1.35vw,20px); line-height:1.45; color:var(--lg-soft); margin:0 0 40px; max-width:31em; }
  .lg-feats{ list-style:none; display:flex; flex-wrap:wrap; gap:22px 22px; padding:0; margin:0; }
  .lg-feats li{ width:64px; text-align:center; font-size:14px; line-height:1.3; color:#e3eae6; }
  .lg-feat-ico{ width:62px; height:62px; margin:0 auto 10px; border-radius:16px; border:1px solid var(--lg-line); background:rgba(255,255,255,0.03); display:grid; place-items:center; }
  .lg-feat-ico svg{ width:28px; height:28px; stroke:#e8efe9; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
  .lg-feats li:nth-child(2) .lg-feat-ico{ border-color:rgba(99,214,138,.55); }
  .lg-feats li:nth-child(2) .lg-feat-ico svg{ stroke:var(--lg-green-hi); }

  /* right: sign-in card */
  .lg-side{
    position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:32px 40px 40px;
    background:radial-gradient(ellipse 80% 60% at 70% 100%, rgba(22,70,44,.35), transparent 70%), var(--lg-panel);
  }
  .lg-pill{
    position:absolute; top:40px; right:40px; padding:14px 30px; border:1px solid var(--lg-green); border-radius:999px;
    color:var(--lg-ink); text-decoration:none; font-size:13px; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  }
  .lg-pill:hover{ background:rgba(76,181,111,.12); }
  .lg-card{
    width:100%; max-width:606px; margin-top:56px; padding:50px 50px 34px;
    border:1px solid var(--lg-line); border-radius:34px;
    background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015));
    box-shadow:0 30px 80px rgba(0,0,0,.45);
  }
  .lg-card h2{ font-size:36px; font-weight:700; letter-spacing:-0.02em; color:#fff; margin:0 0 8px; line-height:1.15; }
  .lg-sub{ font-size:19px; color:var(--lg-soft); margin:0 0 34px; }
  #login-screen .lg-field{ display:flex; flex-direction:column; gap:10px; margin-bottom:24px; }
  #login-screen label{ font-family:inherit; font-size:16px; letter-spacing:0; text-transform:none; color:#eef3f0; font-weight:500; }
  .lg-input{ position:relative; }
  .lg-input > svg.lg-lead{ position:absolute; left:20px; top:50%; transform:translateY(-50%); width:22px; height:22px; fill:#9ea9a3; pointer-events:none; }
  #login-screen .lg-input input{
    width:100%; height:62px; padding:0 54px 0 58px; font-family:inherit; font-size:18px; color:#fff;
    background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.12); border-radius:16px; outline:none; transition:border-color .15s, box-shadow .15s;
  }
  #login-screen .lg-input input::placeholder{ color:#7f8c85; }
  #login-screen .lg-input input:focus{ border-color:var(--lg-green); box-shadow:0 0 0 3px rgba(76,181,111,.25); }
  .lg-eye{ position:absolute; right:10px; top:50%; transform:translateY(-50%); width:44px; height:44px; display:grid; place-items:center; background:none; border:0; border-radius:12px; cursor:pointer; color:#dfe6e2; }
  .lg-eye:hover{ background:rgba(255,255,255,.07); }
  .lg-eye:focus-visible, .lg-btn:focus-visible, .lg-ghost:focus-visible, .lg-pill:focus-visible, .lg-forgot:focus-visible{ outline:2px solid var(--lg-green-hi); outline-offset:3px; }
  .lg-eye svg{ width:24px; height:24px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
  .lg-row{ display:flex; align-items:center; justify-content:space-between; margin:2px 0 26px; }
  .lg-check{ display:flex; align-items:center; gap:12px; font-size:17px; color:#e8eeea; cursor:pointer; }
  .lg-check input{ position:absolute; opacity:0; width:0; height:0; }
  .lg-box{ width:24px; height:24px; border-radius:7px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.3); display:grid; place-items:center; transition:background .15s; }
  .lg-box svg{ width:16px; height:16px; stroke:#062012; stroke-width:3; fill:none; stroke-linecap:round; stroke-linejoin:round; opacity:0; }
  .lg-check input:checked + .lg-box{ background:var(--lg-green); border-color:var(--lg-green); }
  .lg-check input:checked + .lg-box svg{ opacity:1; }
  .lg-check input:focus-visible + .lg-box{ outline:2px solid var(--lg-green-hi); outline-offset:3px; }
  .lg-forgot{ background:none; border:0; padding:0; font:inherit; font-size:17px; color:var(--lg-green-hi); cursor:pointer; }
  .lg-forgot:hover{ text-decoration:underline; }
  .lg-btn{
    width:100%; height:62px; border:0; border-radius:14px; cursor:pointer; font-family:inherit; font-size:19px; font-weight:600; color:#fff;
    display:flex; align-items:center; justify-content:center; gap:10px;
    background:linear-gradient(180deg,#52bd76,#3fa562); box-shadow:0 10px 26px rgba(63,165,98,.28); transition:filter .15s, transform .15s;
  }
  .lg-btn:hover{ filter:brightness(1.08); transform:translateY(-1px); }
  .lg-btn svg{ width:20px; height:20px; stroke:#fff; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
  .lg-or{ display:flex; align-items:center; gap:22px; margin:22px 0; color:var(--lg-soft); font-size:15px; letter-spacing:.04em; }
  .lg-or::before,.lg-or::after{ content:""; flex:1; height:1px; background:rgba(255,255,255,.14); }
  .lg-ghost{
    width:100%; height:62px; border-radius:14px; cursor:pointer; font-family:inherit; font-size:19px; font-weight:500; color:#fff;
    background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.35); transition:background .15s, border-color .15s;
  }
  .lg-ghost:hover{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.55); }
  .lg-foot{ margin:34px 0 0; text-align:center; font-size:15px; color:#cdd6d1; }
  .lg-back{ margin-top:18px; text-align:center; }
  .auth-step{ display:flex; flex-direction:column; }
  .auth-step.hidden{ display:none; }
  #auth-message:not(:empty){ margin-bottom:20px; }
  .auth-msg{ font-size:14px; line-height:1.4; padding:12px 14px; border-radius:12px; border:1px solid var(--line); }
  .auth-msg.error{ color:#ff9b9b; border-color:rgba(248,113,113,.6); background:rgba(248,113,113,.1); }
  .auth-msg.info{ color:#8fe3ae; border-color:rgba(76,181,111,.6); background:rgba(76,181,111,.1); }
  .lg-hidden-tabs{ display:none; }
  .auth-otp-note{
    font-family:var(--font-mono);
    font-size:11px;
    color:var(--ink-soft);
    line-height:1.5;
  }
  #login-screen .auth-otp-note{ font-family:inherit; font-size:14px; color:var(--lg-mute); margin-top:18px; }
  .auth-otp-display{
    font-family:var(--font-mono);
    font-size:26px;
    font-weight:600;
    letter-spacing:0.2em;
    text-align:center;
    padding:12px;
    background:var(--paper-dark);
    border:1px dashed var(--line);
    border-radius:6px;
  }
  .auth-link{
    font-family:var(--font-mono);
    font-size:11.5px;
    color:var(--ink-soft);
    text-decoration:underline;
    cursor:pointer;
    background:none;
    border:none;
    padding:0;
    text-align:left;
  }
  .auth-link:hover{ color:var(--accent); }

  @media (max-width:1100px){
    .lg-card{ padding:40px 32px 28px; }
    .lg-pill{ position:static; margin-bottom:0; align-self:flex-end; }
    .lg-card{ margin-top:24px; }
  }
  @media (max-width:900px){
    #login-screen{ grid-template-columns:1fr; }
    .lg-hero{ min-height:0; padding:28px 24px 8px; }
    .lg-desc,.lg-feats{ display:none; }
    .lg-logo{ width:72px; margin-bottom:24px; }
    #login-screen .lg-title{ font-size:38px; margin-bottom:12px; }
    .lg-tag{ margin:0; font-size:17px; }
    .lg-side{ padding:20px 16px 32px; }
    .lg-pill{ align-self:center; font-size:11px; padding:10px 18px; }
    .lg-card{ padding:32px 22px 24px; border-radius:26px; }
    .lg-card h2{ font-size:29px; } .lg-sub{ font-size:16px; margin-bottom:26px; }
    #login-screen .lg-input input, .lg-btn, .lg-ghost{ height:56px; font-size:17px; }
  }
  @media (prefers-reduced-motion:reduce){ .lg-btn{ transition:none; } .lg-btn:hover{ transform:none; } }
  /* desktop: sign-in box at 66% size — change --lg-card-scale to resize (1 = original) */
  @media (min-width:901px){
    #login-screen{ --lg-card-scale:.66; }
    .lg-card{ zoom:var(--lg-card-scale); }
  }
  #app-content.hidden{ display:none; }
  .logout-btn{
    font-family:var(--font-mono);
    font-size:10.5px;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--ink-soft);
    background:none;
    border:1px solid var(--line);
    border-radius:6px;
    padding:5px 10px;
    cursor:pointer;
    margin-top:8px;
    transition: border-color .15s ease, color .15s ease;
  }
  .logout-btn:hover{ border-color:var(--accent-dim); color:var(--ink); }
  .user-chip{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    margin-bottom:0;
    font-family:var(--font-mono);
    font-size:11.5px;
    color:var(--ink-soft);
  }
  .user-chip .logout-btn{ margin-top:0; }
  .admin-avatar{
    display:none;
    width:38px; height:38px;
    border-radius:50%;
    object-fit:cover;
    flex:none;
    border:2px solid var(--line);
    box-shadow:0 1px 4px rgba(0,0,0,0.2);
  }
  body.role-admin .admin-avatar{ display:block; }
  #maintab-users.hidden{ display:none; }
  #maintab-agencies.hidden{ display:none; }
  #header-settings-btn.hidden{ display:none; }
  .role-badge{
    font-size:10px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    padding:3px 8px;
    border-radius:20px;
    background:var(--accent);
    color:var(--accent-ink);
    font-weight:600;
  }

  /* ---------------- Main tabs ---------------- */
  .main-tabs{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:26px;
    flex-wrap:wrap;
  }
  .main-tabs-group{
    display:flex;
    gap:2px;
    padding:3px;
    background:var(--card-soft);
    border-radius:12px;
    flex-wrap:wrap;
  }
  .main-tabs-group-finance{
    margin-left:auto;
  }
  @media (max-width:640px){
    .main-tabs-group-finance{ margin-left:0; }
  }
  .main-tab{
    font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size:13px;
    letter-spacing:normal;
    text-transform:none;
    font-weight:600;
    padding:7px 16px;
    border:none;
    border-radius:9px;
    background:transparent;
    color:var(--ink-soft);
    cursor:pointer;
    transition: background .2s ease, color .2s ease, box-shadow .2s ease;
  }
  .main-tab:hover{ color:var(--ink); }
  .main-tab.active{
    background:var(--card);
    color:var(--ink);
    box-shadow:0 1px 2px rgba(0,0,0,0.08);
  }
  .main-tab.hidden{ display:none; }

  /* ---------------- Top bar (search + notifications + profile) ---------------- */
  .topbar{
    position:sticky; top:12px; z-index:60;
    display:flex; align-items:center; gap:14px;
    margin:0 0 18px; padding-right:52px; /* leaves room for the theme toggle */
  }
  .topbar-right{
    margin-left:auto; flex:none;
    display:flex; align-items:center; gap:10px;
    height:46px; padding:0 10px 0 8px;
    background:var(--card); border:1px solid var(--line); border-radius:14px;
    box-shadow:0 2px 10px rgba(0,0,0,0.06);
  }
  .topbar-sep{ width:1px; height:24px; background:var(--line); }
  .topbar-right .user-chip{ margin-bottom:0; }
  #current-user-email{ max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  @media (max-width: 1280px){ #current-user-email{ display:none; } }
  .notif-wrap{ position:relative; display:none; }
  body.role-admin .notif-wrap{ display:block; }
  body:not(.role-admin) .topbar-sep{ display:none; }
  .notif-btn{
    position:relative; width:34px; height:34px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:transparent; border:none; color:var(--ink-soft); cursor:pointer;
    transition: background .15s ease, color .15s ease;
  }
  .notif-btn:hover{ background:var(--card-soft); color:var(--ink); }
  .notif-badge{
    position:absolute; top:1px; right:0; min-width:17px; height:17px; padding:0 4px;
    border-radius:9px; background:#ef4444; color:#fff;
    font-family:var(--font-mono); font-size:10px; font-weight:700; line-height:17px; text-align:center;
    box-shadow:0 0 0 2px var(--card);
  }
  .notif-badge.hidden{ display:none; }
  .notif-panel{
    position:absolute; right:-6px; top:calc(100% + 14px); width:400px; max-width:calc(100vw - 32px);
    background:var(--card); border:1px solid var(--line); border-radius:14px;
    box-shadow:0 14px 40px rgba(0,0,0,0.24); overflow:hidden;
  }
  .notif-panel.hidden{ display:none; }
  .notif-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px 8px; }
  .notif-title{ font-weight:700; font-size:15px; color:var(--ink); }
  .notif-markall{ background:none; border:none; color:var(--accent); font-size:12px; font-weight:600; cursor:pointer; }
  .notif-markall:hover{ text-decoration:underline; }
  .notif-tabs{ display:flex; gap:6px; padding:0 14px 10px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
  .notif-tab{
    background:var(--card-soft); border:1px solid transparent; color:var(--ink-soft);
    border-radius:16px; padding:4px 11px; font-size:12px; font-weight:600; cursor:pointer;
  }
  .notif-tab:hover{ color:var(--ink); }
  .notif-tab.active{ background:var(--accent); color:var(--accent-ink); }
  .notif-list{ max-height:min(60vh, 460px); overflow-y:auto; padding:6px; }
  .notif-item{ display:flex; gap:11px; align-items:flex-start; padding:10px; border-radius:10px; cursor:pointer; }
  .notif-item:hover{ background:var(--card-soft); }
  .notif-item.unread{ background:rgba(16,163,127,0.07); }
  .notif-item.unread:hover{ background:rgba(16,163,127,0.13); }
  .notif-ico{ flex:none; width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:16px; background:var(--card-soft); }
  .notif-ico.portal{ background:rgba(59,130,246,0.14); }
  .notif-ico.pending{ background:rgba(245,158,11,0.16); }
  .notif-ico.done{ background:rgba(22,163,74,0.14); }
  .notif-body{ min-width:0; flex:1; }
  .notif-line{ font-size:13px; font-weight:600; color:var(--ink); line-height:1.35; }
  .notif-item:not(.unread) .notif-line{ font-weight:500; color:var(--ink-soft); }
  .notif-sub{ font-size:12px; color:var(--ink-soft); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .notif-when{ flex:none; font-size:11px; color:var(--ink-soft); white-space:nowrap; display:flex; align-items:center; gap:6px; padding-top:2px; }
  .notif-dot{ width:8px; height:8px; border-radius:50%; background:var(--accent); display:inline-block; }
  .notif-empty{ padding:30px 20px; text-align:center; color:var(--ink); font-size:14px; font-weight:600; }
  .notif-empty span{ display:block; margin-top:6px; font-weight:400; font-size:12px; color:var(--ink-soft); }
  @media (max-width: 900px){
    .topbar{ flex-wrap:wrap; padding-right:0; }
    .gsearch{ flex:1 1 100%; max-width:none; }
    .topbar-right{ margin-left:auto; }
    .notif-panel{ position:fixed; left:16px; right:16px; top:84px; width:auto; max-width:none; }
  }

  /* ---------------- Global search ---------------- */
  .gsearch{ position:relative; flex:1 1 300px; max-width:640px; min-width:0; }
  .gsearch-box{ position:relative; }
  .gsearch-icon{ position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--ink-soft); pointer-events:none; display:flex; }
  #gsearch-input{
    width:100%; height:46px;
    padding:0 76px 0 42px;
    font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size:14.5px; color:var(--ink);
    background:var(--card); border:1px solid var(--line); border-radius:14px;
    box-shadow:0 2px 10px rgba(0,0,0,0.06);
    outline:none; transition:border-color .15s ease, box-shadow .15s ease;
  }
  #gsearch-input::placeholder{ color:var(--ink-soft); }
  #gsearch-input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(16,163,127,0.16), 0 2px 10px rgba(0,0,0,0.06); }
  .gsearch-kbd{
    position:absolute; right:14px; top:50%; transform:translateY(-50%);
    font-family:var(--font-mono); font-size:11px; color:var(--ink-soft);
    border:1px solid var(--line); border-radius:6px; padding:2px 7px; background:var(--card-soft);
    pointer-events:none;
  }
  #gsearch-input:focus ~ .gsearch-kbd{ display:none; }
  .gsearch-clear{
    position:absolute; right:10px; top:50%; transform:translateY(-50%);
    width:26px; height:26px; border:none; border-radius:50%;
    background:var(--card-soft); color:var(--ink-soft); font-size:16px; line-height:1; cursor:pointer;
  }
  .gsearch-clear:hover{ color:var(--ink); }
  .gsearch-clear.hidden{ display:none; }
  #gsearch-input:not(:placeholder-shown) ~ .gsearch-kbd{ display:none; }
  .gsearch-panel{
    position:absolute; left:0; right:0; top:calc(100% + 8px);
    max-height:min(70vh, 560px); overflow-y:auto;
    background:var(--card); border:1px solid var(--line); border-radius:14px;
    box-shadow:0 14px 40px rgba(0,0,0,0.22);
    padding:6px;
  }
  .gsearch-panel.hidden{ display:none; }
  .gs-empty{ padding:18px 14px; text-align:center; font-size:13px; color:var(--ink-soft); }
  .gs-group{
    display:flex; align-items:center; gap:6px;
    padding:10px 10px 4px;
    font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-soft);
  }
  .gs-group span{ margin-left:auto; background:var(--card-soft); border-radius:10px; padding:1px 7px; }
  .gs-item{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:9px; cursor:pointer; }
  .gs-item.active{ background:var(--card-soft); }
  .gs-main{ min-width:0; flex:1; }
  .gs-title{ font-size:13.5px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .gs-meta{ font-size:12px; color:var(--ink-soft); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .gs-badge{
    flex:none; font-family:var(--font-mono); font-size:10px; letter-spacing:0.05em; text-transform:uppercase;
    color:var(--ink-soft); border:1px solid var(--line); border-radius:20px; padding:2px 8px;
  }
  .gsearch-panel mark{ background:rgba(16,163,127,0.22); color:inherit; border-radius:3px; padding:0 1px; }
  .gs-more{ padding:6px 12px 8px; font-size:12px; color:var(--accent); cursor:pointer; }
  .gs-more:hover{ text-decoration:underline; }
  @keyframes gsflash{ 0%,55%{ background:rgba(16,163,127,0.30); } 100%{ background:transparent; } }
  tr.gs-flash > td{ animation:gsflash 2.4s ease; }

  /* ---------------- App shell + left sidebar ---------------- */
  .app-shell{ display:flex; align-items:flex-start; gap:24px; max-width:1700px; margin:0 auto; }
  .side-nav{
    width:212px; flex:none;
    position:sticky; top:28px;
    height:calc(100vh - 56px);
    display:flex; flex-direction:column; justify-content:space-between; gap:16px;
    background:#161b21;
    border-radius:14px;
    padding:10px;
    overflow:hidden;
    box-shadow:0 4px 18px rgba(0,0,0,0.18);
  }
  .side-nav-main{ display:flex; flex-direction:column; gap:2px; flex:1 1 auto; min-height:0; overflow-y:auto; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,0.2) transparent; }
  .side-brand{
    display:flex; justify-content:center;
    padding:4px 0 12px;
    margin-bottom:4px;
    border-bottom:1px solid rgba(255,255,255,0.12);
  }
  .side-brand img{ width:112px; height:auto; display:block; }
  .side-nav-top, .side-nav-bottom{ display:flex; flex-direction:column; gap:2px; }
  .side-nav-bottom{ flex:none; padding-top:10px; border-top:1px solid rgba(255,255,255,0.12); }
  .side-nav .main-tab{ color:#a9adb8; }
  .side-nav .main-tab:hover{ color:#fff; background:rgba(255,255,255,0.06); }
  .side-nav .main-tab.active{ background:rgba(255,255,255,0.14); color:#fff; box-shadow:none; }
  .side-item{
    display:block; width:100%;
    text-align:left;
    padding:9px 14px;
    user-select:none;
  }
  .side-item.hidden{ display:none; }
  .side-sub{
    display:flex; flex-direction:column; gap:1px;
    margin:1px 0 6px 16px; padding-left:8px;
    border-left:1px solid rgba(255,255,255,0.14);
  }
  body.role-staff .side-sub{ display:none !important; }
  .side-subitem{
    font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size:12.5px; font-weight:500;
    padding:6px 12px; border-radius:8px;
    color:#8f94a1; cursor:pointer; user-select:none;
    transition: background .15s ease, color .15s ease;
  }
  .side-subitem:hover{ color:#fff; background:rgba(255,255,255,0.06); }
  .side-item.active + .side-sub .side-subitem.active{ color:#fff; background:rgba(255,255,255,0.10); }
  body.role-viewer .side-subitem[data-sub="logjob"]{ display:none !important; }
  @media (max-width: 900px){
    .app-shell{ flex-direction:column; align-items:stretch; gap:16px; }
    .wrap{ width:100%; }
    .side-nav{
      width:100%; position:static; height:auto;
      flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:flex-start;
    }
    .side-nav-top, .side-nav-bottom{ flex-direction:row; flex-wrap:wrap; }
    .side-nav-main{ flex-direction:row; flex-wrap:wrap; align-items:center; gap:8px; }
    .side-brand{ padding:0 10px 0 4px; margin:0; border-bottom:none; }
    .side-brand img{ width:56px; }
    .side-nav-bottom{ padding-top:0; border-top:none; margin-left:auto; }
    .side-item{ width:auto; }
    .side-sub{ flex-basis:100%; flex-direction:row; flex-wrap:wrap; margin:0 0 6px; padding-left:0; border-left:none; }
  }

  #tab-dashboard.hidden, #tab-payments.hidden, #tab-ledger.hidden, #tab-users.hidden, #tab-calendar.hidden, #tab-myjobs.hidden, #tab-notes.hidden, #tab-agencies.hidden{ display:none; }

  /* ---------------- Notes ---------------- */
  .notes-shell{
    display:flex;
    align-items:stretch;
    height: calc(100vh - 190px);
    min-height: 480px;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:12px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
    overflow:hidden;
  }
  .notes-sidebar{
    width: 280px;
    flex: none;
    border-right:1px solid var(--line);
    display:flex;
    flex-direction:column;
    background:var(--paper-dark);
  }
  .notes-sidebar-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    padding:16px 16px 10px;
  }
  .notes-sidebar-title{
    font-family:var(--font-display);
    font-weight:700;
    font-size:20px;
    color:var(--ink);
  }
  .notes-sidebar-count{
    font-family:var(--font-mono);
    font-size:11px;
    color:var(--ink-soft);
    margin-top:3px;
  }
  .notes-new-btn{
    width:30px; height:30px;
    border-radius:50%;
    border:1px solid var(--line);
    background:var(--card);
    color:var(--accent);
    font-size:14px;
    cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition: border-color .15s ease, transform .08s ease;
    flex:none;
  }
  .notes-new-btn:hover{ border-color:var(--accent-dim); }
  .notes-new-btn:active{ transform:translateY(1px); }
  .notes-search-wrap{ padding: 0 14px 12px; }
  .notes-search-wrap input{
    width:100%;
    font-family:var(--font-body);
    font-size:13px;
    color:var(--ink);
    background:var(--card-soft);
    border:1px solid var(--line);
    border-radius:8px;
    padding:8px 10px;
    outline:none;
  }
  .notes-search-wrap input:focus{ border-color:var(--accent); }
  .notes-list{
    flex:1;
    overflow-y:auto;
    border-top:1px solid var(--line);
  }
  .notes-list-item{
    padding:10px 16px;
    border-bottom:1px solid var(--line);
    cursor:pointer;
    transition: background .12s ease;
  }
  .notes-list-item:hover{ background:var(--card); }
  .notes-list-item.active{ background:var(--accent); }
  .notes-list-item.active .notes-item-title,
  .notes-list-item.active .notes-item-meta{ color:var(--accent-ink); }
  .notes-item-title{
    font-family:var(--font-body);
    font-weight:600;
    font-size:13.5px;
    color:var(--ink);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    margin-bottom:3px;
  }
  .notes-item-meta{
    font-family:var(--font-body);
    font-size:12px;
    color:var(--ink-soft);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .notes-item-meta b{ font-weight:600; }
  .notes-empty-list{
    padding:30px 16px;
    text-align:center;
    font-family:var(--font-body);
    font-size:13px;
    color:var(--ink-soft);
  }
  .notes-editor-pane{
    flex:1;
    display:flex;
    flex-direction:column;
    min-width:0;
    position:relative;
  }
  .notes-empty-state{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:10px;
    color:var(--ink-soft);
    font-family:var(--font-body);
    font-size:14px;
  }
  .notes-empty-state.hidden{ display:none; }
  .notes-empty-icon{ font-size:30px; opacity:0.5; }
  .notes-editor{
    flex:1;
    display:flex;
    flex-direction:column;
    padding:20px 30px 26px;
    min-height:0;
  }
  .notes-editor.hidden{ display:none; }
  .notes-editor-topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    margin-bottom:14px;
  }
  .notes-editor-date{
    font-family:var(--font-mono);
    font-size:11.5px;
    color:var(--ink-soft);
    letter-spacing:0.03em;
    margin-right:auto;
  }
  .notes-download-btn, .notes-delete-btn{
    background:transparent;
    border:1px solid var(--line);
    border-radius:7px;
    color:var(--ink-soft);
    font-family:var(--font-mono);
    font-size:12px;
    padding:6px 10px;
    cursor:pointer;
    transition: border-color .15s ease, color .15s ease;
    flex:none;
  }
  .notes-download-btn:hover{ border-color:var(--accent); color:var(--accent); }
  .notes-delete-btn:hover{ border-color:var(--red); color:var(--red); }
  .notes-title-input{
    font-family:var(--font-display);
    font-weight:700;
    font-size:22px;
    color:var(--ink);
    background:transparent;
    border:none;
    outline:none;
    padding:0 0 12px;
    margin-bottom:12px;
    border-bottom:1px solid var(--line);
  }
  .notes-title-input::placeholder{ color:var(--ink-soft); opacity:0.6; }
  .notes-body-input{
    flex:1;
    resize:none;
    font-family:var(--font-body);
    font-size:14.5px;
    line-height:1.6;
    color:var(--ink);
    background:transparent;
    border:none;
    outline:none;
    min-height:0;
  }
  .notes-body-input::placeholder{ color:var(--ink-soft); opacity:0.6; }
  @media (max-width: 720px){
    .notes-sidebar{ width:220px; }
  }

  /* ---------------- Dashboard ---------------- */
  .stats-grid{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap:14px;
  }
  .stat-card{
    --sc-color:#16a34a; --sc-tint:rgba(22,163,74,0.14);
    display:flex; align-items:center; gap:12px;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:16px;
    padding:16px 14px 14px;
    box-shadow:0 2px 12px rgba(0,0,0,0.06);
    transition: transform .15s ease, box-shadow .15s ease;
    min-width:0;
  }
  .stat-card:hover{ transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,0.10); }
  .sc-review{ --sc-color:#f59e0b; --sc-tint:rgba(245,158,11,0.16); }
  .sc-delayed{ --sc-color:#ef4444; --sc-tint:rgba(239,68,68,0.14); }
  .stat-icon{
    width:42px; height:42px; flex:none;
    display:flex; align-items:center; justify-content:center;
    border-radius:13px;
    background:var(--sc-tint); color:var(--sc-color);
  }
  .stat-main{ min-width:0; }
  .stat-value{
    font-family:var(--font-display);
    font-weight:700;
    font-size:28px;
    line-height:1;
    color:var(--ink);
    margin-bottom:6px;
  }
  .stat-label{
    font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size:13px;
    color:var(--ink-soft);
    white-space:nowrap;
  }
  .stat-side{
    margin-left:auto;
    display:flex; flex-direction:column; align-items:flex-end; justify-content:space-between;
    align-self:stretch; gap:6px;
    min-width:64px;
  }
  .stat-trend{
    font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size:11.5px; font-weight:600; white-space:nowrap;
    color:var(--ink-soft);
  }
  .stat-trend.good{ color:#16a34a; }
  .stat-trend.bad{ color:#dc2626; }
  .stat-spark{ width:64px; height:28px; display:block; overflow:visible; }
  @media (max-width: 1180px){
    .stats-grid{ grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 560px){
    .stats-grid{ grid-template-columns: 1fr; }
  }

  /* ---------------- Jobs overview (dashboard) ---------------- */
  .jo-range-tabs{ display:flex; gap:6px; flex-wrap:wrap; }
  .jo-range-btn{
    background:var(--card-soft); border:1px solid var(--line); color:var(--ink-soft);
    border-radius:16px; padding:6px 13px; font-size:12.5px; font-weight:600; cursor:pointer;
    font-family:var(--font-body);
    transition: background .15s ease, color .15s ease, border-color .15s ease;
  }
  .jo-range-btn:hover{ color:var(--ink); border-color:var(--accent-dim); }
  .jo-range-btn.active{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
  .jo-summary{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:14px; }
  .jo-range-label{ font-family:var(--font-display); font-weight:600; font-size:15px; color:var(--ink); }
  .jo-total{ font-family:var(--font-mono); font-size:12.5px; color:var(--ink-soft); }
  .jo-chart-wrap{ width:100%; margin-bottom:18px; }
  .jo-chart{ width:100%; height:200px; display:block; overflow:visible; }
  .jo-bar-count{ font-family:var(--font-display); font-weight:700; font-size:15px; fill:var(--ink); }
  .jo-bar-label{ font-family:var(--font-mono); font-size:11px; letter-spacing:0.04em; fill:var(--ink-soft); text-transform:uppercase; }
  .jo-joblist{ display:flex; flex-direction:column; gap:8px; max-height:360px; overflow-y:auto; }
  .jo-joblist .mini-card{ border-left-width:3px; }
  @media (max-width: 560px){
    .jo-summary{ flex-direction:column; align-items:flex-start; gap:4px; }
    .jo-range-tabs{ width:100%; }
  }

  /* ---------------- Content calendar (scoped to #tab-calendar) ---------------- */
  #tab-calendar{
    --cc-bg-panel:var(--card);
    --cc-bg-cell:var(--card-soft);
    --cc-bg-cell-out:var(--paper-dark);
    --cc-line:var(--line);
    --cc-accent:var(--accent);
    --cc-accent-dim:var(--accent-dim);
    --cc-text:var(--ink);
    --cc-text-muted:var(--ink-soft);
    --cc-serif:'Fraunces', serif;
    --cc-sans:'Inter', sans-serif;
  }
  #tab-calendar *{ box-sizing:border-box; }
  .cc-panel{
    background:var(--cc-bg-panel);
    border:1px solid var(--cc-line);
    border-radius:12px;
    padding:20px 22px;
    margin-bottom:22px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  }
  .cc-panel-grid{
    display:grid;
    grid-template-columns:1.4fr 1fr 1fr auto auto auto;
    gap:14px;
    align-items:end;
  }
  @media (max-width:760px){
    .cc-panel-grid{ grid-template-columns:1fr 1fr; }
  }
  .cc-field label{
    display:block;
    font-size:12px;
    color:var(--cc-text-muted);
    margin-bottom:6px;
    font-family:var(--cc-sans);
  }
  #tab-calendar select, #tab-calendar input[type=date]{
    width:100%;
    background:var(--cc-bg-cell);
    border:1px solid var(--cc-line);
    color:var(--cc-text);
    border-radius:6px;
    padding:9px 10px;
    font-family:var(--cc-sans);
    font-size:14px;
  }
  #tab-calendar select:focus, #tab-calendar input:focus{ outline:1px solid var(--cc-accent); }
  #tab-calendar button{
    font-family:var(--cc-sans);
    font-weight:600;
    font-size:13.5px;
    border-radius:7px;
    padding:10px 16px;
    border:1px solid transparent;
    cursor:pointer;
    white-space:nowrap;
    transition: background .15s ease, border-color .15s ease;
  }
  .cc-btn-primary{ background:var(--cc-accent); color:var(--accent-ink); }
  .cc-btn-primary:hover{ background:#0d8f6f; }
  .cc-btn-secondary{ background:transparent; border-color:var(--cc-accent-dim); color:var(--cc-accent); }
  .cc-btn-secondary:hover{ border-color:var(--cc-accent); }
  .cc-btn-ghost{ background:transparent; border:1px solid var(--cc-line); color:var(--cc-text-muted); }
  .cc-btn-ghost:hover{ color:var(--cc-text); border-color:var(--cc-accent-dim); }

  #cc-calendar-area{ display:flex; flex-direction:column; gap:36px; }

  .cc-month-block{
    background:var(--cc-bg-panel);
    border:1px solid var(--cc-line);
    border-radius:12px;
    padding:24px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  }
  .cc-month-head{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    margin-bottom:16px;
    border-bottom:1px solid var(--cc-line);
    padding-bottom:14px;
  }
  .cc-month-head h2{
    font-family:var(--cc-serif);
    font-weight:500;
    font-size:21px;
    margin:0;
    color:var(--cc-text);
  }
  .cc-month-head .cc-client-tag{ font-size:13px; color:var(--cc-accent); }

  table.cc-cal{ width:100%; border-collapse:collapse; table-layout:fixed; }
  table.cc-cal th{
    font-size:11.5px;
    color:var(--cc-text-muted);
    font-weight:600;
    text-align:left;
    padding:0 6px 8px;
    font-family:var(--cc-sans);
  }
  table.cc-cal td{
    vertical-align:top;
    border:1px solid var(--cc-line);
    padding:0;
    height:104px;
    background:var(--cc-bg-cell);
  }
  table.cc-cal td.cc-out{ background:var(--cc-bg-cell-out); }
  .cc-daynum{ font-size:12px; color:var(--cc-text-muted); padding:6px 8px 0; font-family:var(--cc-sans); }
  .cc-out .cc-daynum{ opacity:0.35; }
  textarea.cc-entry{
    width:100%;
    height:72px;
    resize:none;
    background:transparent;
    border:none;
    color:var(--cc-text);
    font-family:var(--cc-sans);
    font-size:12.5px;
    line-height:1.4;
    padding:4px 8px 8px;
  }
  textarea.cc-entry:focus{ outline:none; }
  textarea.cc-entry::placeholder{ color:var(--ink-soft); }
  .cc-out textarea.cc-entry{ display:none; }

  .cc-month-foot{
    margin-top:14px;
    display:flex;
    justify-content:space-between;
    font-size:11.5px;
    color:var(--cc-text-muted);
    font-family:var(--cc-sans);
  }

  .cc-empty-state{
    color:var(--cc-text-muted);
    font-size:14px;
    padding:40px 0;
    text-align:center;
    font-family:var(--cc-sans);
  }

  .cc-saved-section{ margin-top:44px; }
  .cc-saved-head{ margin-bottom:14px; }
  .cc-saved-head h2{
    font-family:var(--cc-serif);
    font-weight:500;
    font-size:19px;
    margin:0 0 4px;
    color:var(--cc-text);
  }
  .cc-saved-head p{ margin:0; font-size:12.5px; color:var(--cc-text-muted); font-family:var(--cc-sans); }
  .cc-saved-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    background:var(--cc-bg-panel);
    border:1px solid var(--cc-line);
    border-radius:8px;
    padding:12px 16px;
    margin-bottom:10px;
  }
  .cc-saved-client{ font-size:14px; font-weight:600; color:var(--cc-text); font-family:var(--cc-sans); }
  .cc-saved-meta{ font-size:12px; color:var(--cc-text-muted); margin-top:2px; font-family:var(--cc-sans); }
  .cc-saved-actions{ display:flex; gap:8px; }

  /* ---------------- Role-based restrictions ---------------- */
  body.role-viewer #subtab-btn-logjob,
  body.role-viewer .add-client-toggle,
  body.role-viewer .job-row-actions,
  body.role-viewer #maintab-users,
  body.role-viewer #maintab-notes{
    display:none !important;
  }
  body.role-viewer .comment-edit,
  body.role-viewer .status-pill-select,
  body.role-viewer .payment-amount-field input{
    pointer-events:none;
    opacity:0.65;
  }

  body:not(.role-admin) #subtab-btn-jobreports,
  body:not(.role-admin) #subtab-jobreports,
  body:not(.role-admin) #side-sub-jobreports{
    display:none !important;
  }

  .jr-summary{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:18px; }
  .jr-card{
    flex:1 1 180px; min-width:160px;
    border:1px solid var(--line); border-radius:12px;
    padding:14px 16px; background:var(--panel-2, rgba(128,128,128,0.06));
  }
  .jr-card .jr-num{ font-size:26px; font-weight:700; color:var(--ink); line-height:1.1; }
  .jr-card .jr-label{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-soft); margin-top:4px; }

  #maintab-myjobs{ display:none; }
  body.role-staff #maintab-myjobs{ display:block; }
  body.role-staff #maintab-dashboard,
  body.role-staff #maintab-ledger,
  body.role-staff #maintab-payments,
  body.role-staff #maintab-calendar,
  body.role-staff #maintab-notes{
    display:none !important;
  }

  /* ---------------- Edit job modal ---------------- */
  .edit-modal-overlay{
    position:fixed; inset:0;
    background:rgba(0,0,0,0.6);
    display:flex; align-items:center; justify-content:center;
    padding:20px;
    z-index:1000;
  }
  .edit-modal-overlay.hidden{ display:none; }
  .edit-modal{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:12px;
    width:100%;
    max-width:440px;
    box-shadow:0 20px 50px rgba(0,0,0,0.5);
  }
  .edit-modal-head{
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 18px;
    border-bottom:1px dashed var(--line);
  }
  .edit-modal-head h2{
    font-family:var(--font-display);
    font-size:18px;
    font-weight:600;
    color:var(--ink);
  }
  .edit-modal-body{
    padding:18px;
    display:flex;
    flex-direction:column;
    gap:14px;
  }
  .edit-modal-body .form-actions{ margin-top:4px; }
  .form-actions.hidden{ display:none; }

  /* ---------------- Quick Job floating button ---------------- */
  .qj-fab{
    position:fixed;
    right:22px;
    bottom:26px;
    z-index:1400;
    width:56px;
    height:56px;
    border-radius:50%;
    border:none;
    background:var(--accent);
    color:var(--accent-ink);
    font-size:28px;
    line-height:1;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    box-shadow:0 6px 18px rgba(0,0,0,0.35);
    transition: transform .15s ease, background .15s ease;
  }
  .qj-fab:hover{ background:var(--accent-dim); transform:translateY(-2px) scale(1.03); }
  .qj-fab:active{ transform:translateY(0) scale(0.97); }
  body.role-viewer .qj-fab{ display:none; }
  body:not(.role-admin):not(.role-staff) .qj-fab{ display:none; } /* hidden on the login screen */
  @media (max-width:640px){
    .qj-fab{ right:16px; bottom:18px; width:52px; height:52px; font-size:26px; }
  }
  .settings-section.hidden{ display:none; }
  .jd-meta{ display:flex; gap:14px; flex-wrap:wrap; font-family:var(--font-mono); font-size:11.5px; color:var(--ink-soft); }
  .jd-section h3{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent-dim); margin-bottom:6px; }
  .jd-brief{ white-space:pre-wrap; font-size:13.5px; line-height:1.5; }
  .jd-reflinks a{ display:block; margin-bottom:3px; font-size:12.5px; word-break:break-all; }
  .jd-reflink-row{ display:flex; align-items:center; gap:8px; margin-bottom:4px; }
  .jd-reflink-row a{ flex:1; font-size:12.5px; word-break:break-all; }
  .jd-reflink-row .rm-btn{ background:none; border:1px solid var(--line); color:var(--ink-soft); border-radius:6px; width:22px; height:22px; cursor:pointer; font-size:12px; line-height:1; flex-shrink:0; }
  .jd-reflink-row .rm-btn:hover{ border-color:var(--red); color:var(--red); }
  .jd-refimages{ display:flex; flex-wrap:wrap; gap:8px; }
  .jd-refimages a{ display:block; width:72px; height:72px; border-radius:8px; overflow:hidden; border:1px solid var(--line); }
  .jd-refimages img{ width:100%; height:100%; object-fit:cover; display:block; }
  .jd-refimg-item{ position:relative; width:72px; height:72px; }
  .jd-refimg-item .rm-btn{ position:absolute; top:2px; right:2px; background:rgba(0,0,0,0.65); color:#fff; border:none; border-radius:50%; width:18px; height:18px; font-size:11px; cursor:pointer; line-height:1; z-index:2; }
  .jd-comment{ padding:8px 10px; border-radius:8px; margin-bottom:8px; background:var(--card-soft); border:1px solid var(--line); font-size:12.5px; }
  .jd-comment.admin{ border-left:3px solid var(--teal); }
  .jd-comment.client{ border-left:3px solid var(--accent-dim); }
  .jd-comment .meta{ font-family:var(--font-mono); font-size:10px; color:var(--ink-soft); margin-bottom:3px; }
  .jd-comment .msg{ white-space:pre-wrap; }
  .jd-comment-form{ display:flex; gap:8px; margin-top:8px; }
  .jd-comment-form textarea{ min-height:40px; }

  /* ---------------- Sub tabs (within Blackfern Flow) ---------------- */
  .sub-tabs{
    display:flex;
    gap:2px;
    margin-bottom:18px;
    border-bottom:1px solid var(--line);
  }
  .sub-tab{
    font-family:var(--font-mono);
    font-size:11.5px;
    letter-spacing:0.05em;
    text-transform:uppercase;
    font-weight:600;
    padding:9px 16px;
    color:var(--ink-soft);
    cursor:pointer;
    border-bottom:2px solid transparent;
    margin-bottom:-1px;
  }
  .sub-tab.active{ color:var(--accent); border-bottom-color:var(--accent); }
  #subtab-logjob.hidden, #subtab-alljobs.hidden, #subtab-jobsalloc.hidden, #subtab-jobreports.hidden, #subtab-pending.hidden, #subtab-readyinvoice.hidden{ display:none; }

  /* ---------------- Business Hub (Home / Items / Quotes / Invoices / Payments / Reports) ---------------- */
  .biz-shell{ display:flex; align-items:flex-start; gap:0; }
  .biz-sidebar{
    width:196px; flex:none;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:12px 0 0 12px;
    padding:14px 8px;
    position:sticky; top:16px;
  }
  .biz-nav-item{
    display:flex; align-items:center; gap:10px;
    padding:10px 12px; border-radius:8px;
    cursor:pointer; user-select:none;
    color:var(--ink-soft);
    font-family:var(--font-body); font-size:14px; font-weight:500;
    margin-bottom:2px;
    transition: background .12s ease, color .12s ease;
  }
  .biz-nav-item:hover{ background:var(--card-soft); color:var(--ink); }
  .biz-nav-item.active{ background:var(--accent); color:var(--accent-ink); font-weight:600; }
  .biz-nav-icon{ width:18px; text-align:center; flex:none; font-size:14px; }
  .biz-nav-divider{ height:1px; background:var(--line); margin:8px 6px; }
  .biz-content{
    flex:1; min-width:0;
    background:var(--paper-dark);
    border:1px solid var(--line); border-left:none;
    border-radius:0 12px 12px 0;
    padding:20px;
  }
  .biz-page.hidden{ display:none; }
  .biz-page-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
  .biz-page-head h2{ font-family:var(--font-display); font-size:20px; font-weight:600; color:var(--ink); }
  .biz-page-head .eyebrow{ font-family:var(--font-mono); font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent-dim); margin-bottom:2px; }

  .biz-stat-row{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); gap:14px; margin-bottom:20px; }
  .biz-stat-card{ background:var(--card); border:1px solid var(--line); border-radius:10px; padding:14px 16px; }
  .biz-stat-card .biz-stat-value{ font-family:var(--font-display); font-size:24px; font-weight:700; color:var(--ink); }
  .biz-stat-card .biz-stat-label{ font-family:var(--font-mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-soft); margin-top:4px; }

  .biz-table{ width:100%; border-collapse:collapse; font-size:13.5px; }
  .biz-table th{ text-align:left; font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-soft); padding:8px 10px; border-bottom:1px solid var(--line); }
  .biz-table td{ padding:9px 10px; border-bottom:1px solid var(--line); color:var(--ink); vertical-align:middle; }
  .biz-table tr:last-child td{ border-bottom:none; }
  .biz-empty{ padding:22px; text-align:center; color:var(--ink-soft); font-size:13.5px; font-style:italic; }
  .biz-row-actions{ display:flex; gap:8px; flex-wrap:wrap; }
  .biz-status-pill{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.05em; text-transform:uppercase; padding:3px 9px; border-radius:20px; display:inline-block; }
  .biz-status-paid{ background:rgba(63,189,110,0.16); color:var(--green); }
  .biz-status-unpaid{ background:rgba(217,164,65,0.18); color:var(--gold-due); }
  .biz-status-sent{ background:rgba(139,124,240,0.16); color:var(--violet); }
  .biz-status-draft{ background:rgba(125,135,151,0.16); color:var(--gray); }
  .biz-status-accepted{ background:rgba(63,189,110,0.16); color:var(--green); }
  .biz-status-declined{ background:rgba(229,72,77,0.16); color:var(--red); }

  @media (max-width: 820px){
    .biz-shell{ flex-direction:column; }
    .biz-sidebar{ width:100%; border-radius:12px 12px 0 0; display:flex; flex-wrap:wrap; gap:4px; position:static; }
    .biz-nav-item{ flex:1 1 auto; justify-content:center; }
    .biz-content{ border-radius:0 0 12px 12px; border-left:1px solid var(--line); border-top:none; }
  }

  /* ---------------- Payments ---------------- */
  .payment-row{
    display:grid;
    grid-template-columns: 190px 1fr 160px;
    align-items:center;
    gap:14px;
    padding:12px 16px;
    border:1px solid var(--line);
    border-radius:10px;
    background:var(--card);
    margin-bottom:8px;
  }
  .payment-row.has-due{ border-left:4px solid var(--red); }
  .payment-row.no-due{ border-left:4px solid var(--green); }
  .payment-cat{
    font-family:var(--font-mono);
    font-size:9.5px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--ink-soft);
    margin-bottom:3px;
  }
  .payment-client{
    font-family:var(--font-display);
    font-weight:700;
    font-size:15px;
    color:var(--ink);
  }
  .payment-amount-field{
    display:flex;
    align-items:center;
    gap:6px;
    justify-self:end;
  }
  .payment-amount-field span{
    font-family:var(--font-mono);
    font-size:14px;
    color:var(--ink-soft);
  }
  .payment-amount-field input{
    width:120px;
    text-align:right;
    font-family:var(--font-mono);
  }
  .payments-total-bar{
    display:flex;
    justify-content:flex-end;
    align-items:baseline;
    gap:10px;
    padding:16px;
    margin-top:6px;
    border-top:2px solid var(--accent);
    font-family:var(--font-mono);
  }
  .payments-total-bar .label{ font-size:12px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.06em; }
  .payments-total-bar .value{ font-size:22px; font-weight:700; color:var(--ink); }

  /* ---------------- Ready to invoice ---------------- */
  .invoice-row{
    display:grid;
    grid-template-columns: 190px 1fr 130px 110px;
    align-items:center;
    gap:14px;
    padding:12px 16px;
    border:1px solid var(--line);
    border-left:4px solid var(--teal);
    border-radius:10px;
    background:var(--card);
    margin-bottom:8px;
  }
  .invoice-row .payment-cat{ margin-bottom:3px; }
  .invoice-row .job-row-date{ font-family:var(--font-mono); font-size:13px; }
  .invoice-empty{
    padding:24px 16px;
    text-align:center;
    color:var(--ink-soft);
    font-size:13px;
  }
  .job-row-invoice-cell{ text-align:center; }
  .job-row-invoice-cell input[type="checkbox"]{
    width:18px;
    height:18px;
    cursor:pointer;
    accent-color: var(--teal);
  }
  .job-row-urgent-cell{ text-align:center; width:34px; padding-left:8px !important; padding-right:0 !important; }
  .job-row-urgent-cell input[type="checkbox"]{
    width:18px;
    height:18px;
    cursor:pointer;
    accent-color: var(--red);
  }
  .job-table tbody tr.urgent-row{
    background: rgba(229,72,77,0.08);
    box-shadow: inset 3px 0 0 0 var(--red);
  }
  .job-table tbody tr.urgent-row:hover{ background: rgba(229,72,77,0.14); }
  .job-table tbody tr.urgent-row:nth-child(even){ background: rgba(229,72,77,0.1); }

  /* ---------------- Invoice builder ---------------- */
  .inv-meta-grid{
    display:grid;
    grid-template-columns: 1.3fr 1fr 1fr 1fr;
    gap:14px 16px;
    margin-bottom:18px;
  }
  .inv-items-wrap{ overflow-x:auto; margin-bottom:14px; }
  .inv-items-table{
    width:100%;
    border-collapse:collapse;
    min-width:560px;
  }
  .inv-items-table th{
    font-family:var(--font-mono);
    font-size:10.5px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--ink-soft);
    text-align:left;
    padding:8px 8px;
    border-bottom:1px solid var(--line);
  }
  .inv-items-table th.inv-col-num, .inv-items-table td.inv-col-num{ text-align:right; }
  .inv-items-table td{
    padding:6px 8px;
    border-bottom:1px dashed var(--line);
    vertical-align:middle;
  }
  .inv-items-table input{ width:100%; }
  .inv-items-table input.inv-qty, .inv-items-table input.inv-rate{ text-align:right; }
  .inv-col-amount{
    text-align:right;
    font-family:var(--font-mono);
    font-size:13.5px;
    white-space:nowrap;
  }
  .inv-col-remove{ text-align:center; }
  .inv-remove-btn{
    background:transparent;
    border:1px solid var(--line);
    color:var(--ink-soft);
    border-radius:6px;
    width:26px; height:26px;
    line-height:1;
    cursor:pointer;
    font-size:14px;
  }
  .inv-remove-btn:hover{ border-color:var(--red); color:var(--red); }
  .inv-add-row{ margin-bottom:18px; }
  .inv-totals{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:6px;
    margin:0 0 20px;
    padding-top:12px;
    border-top:1px solid var(--line);
  }
  .inv-totals-row{
    display:flex;
    align-items:baseline;
    gap:14px;
    font-family:var(--font-mono);
    font-size:13px;
    color:var(--ink-soft);
    min-width:220px;
    justify-content:space-between;
  }
  .inv-totals-row input{
    width:70px;
    text-align:right;
    padding:5px 6px;
    font-size:12.5px;
  }
  .inv-totals-row.inv-grand{
    border-top:1px solid var(--line);
    padding-top:8px;
    margin-top:2px;
  }
  .inv-totals-row.inv-grand .inv-grand-value{
    font-size:20px;
    font-weight:700;
    color:var(--ink);
  }
  .inv-actions{ display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; margin-top:6px; }

  .inv-preview-panel{ display:none; }
  .inv-preview-panel.show{ display:block; }

  /* Invoice document look — mimics a formal printed invoice regardless of app theme */
  .inv-doc{
    background:#f5f3f0;
    border-radius:0 0 12px 12px;
    overflow:hidden;
    color:#1a1f27;
  }
  .inv-doc-header{
    background:#12151b;
    padding:26px 28px;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;
    flex-wrap:wrap;
  }
  .inv-doc-logo{ width:52px; height:52px; border-radius:10px; flex:none; }
  .inv-doc-title{
    font-family:var(--font-display);
    font-size:26px;
    font-weight:600;
    color:#f2ede7;
    align-self:center;
    letter-spacing:0.02em;
  }
  .inv-doc-company{ text-align:right; }
  .inv-doc-company-name{
    font-family:var(--font-display);
    font-size:14px;
    font-weight:600;
    color:#f2ede7;
    margin-bottom:4px;
  }
  .inv-doc-company-line{
    font-family:var(--font-body);
    font-size:10.5px;
    color:#9aa1ad;
    line-height:1.5;
  }
  .inv-doc-body{ padding:24px 28px 28px; }
  .inv-doc-balance{
    text-align:right;
    font-family:var(--font-mono);
    font-size:13px;
    letter-spacing:0.04em;
    color:#3f6f8a;
    font-weight:600;
    margin-bottom:20px;
  }
  .inv-doc-balance span{ font-size:16px; }
  .inv-preview-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    flex-wrap:wrap;
    gap:20px;
    padding-bottom:18px;
    margin-bottom:18px;
    border-bottom:1px solid #ddd7cf;
  }
  .inv-preview-bill .eyebrow{ color:#8a8378; margin-bottom:4px; }
  .inv-preview-bill .inv-client-name{
    font-family:var(--font-display);
    font-size:16px;
    font-weight:600;
    color:#1a1f27;
  }
  .inv-doc-bill-address{
    font-family:var(--font-body);
    font-size:12px;
    color:#5b5751;
    line-height:1.6;
    margin-top:4px;
    white-space:pre-line;
    max-width:260px;
  }
  .inv-preview-meta{ font-family:var(--font-mono); font-size:12px; min-width:220px; }
  .inv-preview-meta-row{
    display:flex;
    justify-content:space-between;
    gap:20px;
    color:#8a8378;
    padding:2px 0;
  }
  .inv-preview-meta-row b{ color:#1a1f27; font-weight:600; }
  .inv-doc-items-table{ width:100%; border-collapse:collapse; }
  .inv-doc-items-table thead th{
    text-align:left;
    font-family:var(--font-mono);
    font-size:10px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:#8a8378;
    padding:8px 6px;
    border-bottom:1px solid #ddd7cf;
  }
  .inv-doc-items-table thead th.inv-col-num{ text-align:right; }
  .inv-doc-items-table td{
    padding:12px 6px;
    border-bottom:1px solid #eee9e2;
    vertical-align:top;
    font-family:var(--font-body);
    font-size:13px;
    color:#1a1f27;
  }
  .inv-doc-items-table td.inv-doc-idx{ color:#8a8378; width:26px; }
  .inv-doc-items-table td.inv-doc-amount{ text-align:right; font-weight:600; white-space:nowrap; }
  .inv-doc-amount-sub{
    display:block;
    font-family:var(--font-mono);
    font-size:10.5px;
    font-weight:400;
    color:#9a9488;
    margin-top:2px;
  }
  .inv-doc-totals{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:6px;
    margin:18px 0 4px;
  }
  .inv-doc-totals-row{
    display:flex;
    justify-content:space-between;
    gap:26px;
    min-width:220px;
    font-family:var(--font-mono);
    font-size:13px;
  }
  .inv-doc-totals-row .inv-doc-tl-label{ color:#8a8378; }
  .inv-doc-totals-row.inv-doc-sub .inv-doc-tl-value{ color:#3e7a45; }
  .inv-doc-totals-row.inv-doc-grand{ font-weight:700; font-size:15px; }
  .inv-doc-totals-row.inv-doc-grand .inv-doc-tl-value{ color:#3e7a45; }
  .inv-doc-totals-row.inv-doc-balance-row .inv-doc-tl-label,
  .inv-doc-totals-row.inv-doc-balance-row .inv-doc-tl-value{ color:#3f6f8a; font-weight:700; }
  .inv-doc-words{
    font-family:var(--font-body);
    font-size:12px;
    color:#5b5751;
    text-align:right;
    margin-top:6px;
  }
  .inv-doc-words b{ font-style:italic; color:#1a1f27; }
  .inv-doc-thanks{ font-size:13px; color:#5b5751; margin-top:22px; }
  .inv-doc-notes{ font-size:12.5px; color:#5b5751; margin-top:8px; white-space:pre-line; }
  .inv-doc-signature{ margin-top:36px; }
  .inv-doc-sig-name{
    font-family:'Fraunces', serif;
    font-style:italic;
    font-size:22px;
    color:#1a1f27;
  }
  .inv-doc-sig-title{ font-size:12px; color:#8a8378; margin-top:2px; }
  #flash-toast{
    position:fixed;
    top:24px;
    left:50%;
    transform:translateX(-50%) translateY(-12px);
    background:var(--accent);
    color:var(--accent-ink);
    font-family:var(--font-mono);
    font-size:13px;
    font-weight:600;
    letter-spacing:0.02em;
    padding:10px 22px;
    border-radius:20px;
    box-shadow:0 4px 20px rgba(0,0,0,0.45);
    opacity:0;
    pointer-events:none;
    transition: opacity .2s ease, transform .2s ease;
    z-index:1000;
  }
  #flash-toast.show{
    opacity:1;
    transform:translateX(-50%) translateY(0);
  }

  #newjob-toast{
    position:fixed;
    top:24px;
    left:50%;
    transform:translateX(-50%) translateY(-12px);
    background:var(--teal);
    color:#08221e;
    font-family:var(--font-body);
    font-size:13.5px;
    font-weight:600;
    letter-spacing:0.01em;
    padding:12px 24px;
    border-radius:12px;
    box-shadow:0 4px 20px rgba(0,0,0,0.45);
    opacity:0;
    pointer-events:none;
    transition: opacity .25s ease, transform .25s ease;
    z-index:1000;
    max-width:min(92vw, 420px);
    text-align:center;
  }
  #newjob-toast.show{
    opacity:1;
    transform:translateX(-50%) translateY(0);
  }
  #newjob-toast.removed{
    background:var(--red);
    color:#2a0d0e;
  }
  #newjob-toast.status-change{
    background:var(--mustard);
    color:#2b1c04;
  }
  #newjob-toast .newjob-toast-sub{
    display:block;
    font-family:var(--font-mono);
    font-weight:500;
    font-size:11.5px;
    opacity:0.85;
    margin-top:2px;
  }

  /* ---------------- Payments passcode lock ---------------- */
  #payments-lock{
    display:flex;
    justify-content:center;
    padding: 50px 20px 70px;
  }
  .lock-card{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:16px;
    box-shadow:0 20px 50px rgba(0,0,0,0.4);
    padding:36px 34px;
    width:100%;
    max-width:380px;
    text-align:center;
  }
  .lock-brand{
    font-family:var(--font-display);
    font-weight:700;
    font-size:20px;
    color:var(--ink);
    margin-bottom:26px;
  }
  .lock-brand-dot{ color:var(--teal); }
  .lock-heading{
    font-family:var(--font-display);
    font-weight:700;
    font-size:22px;
    color:var(--ink);
    margin-bottom:8px;
  }
  .lock-sub{
    font-family:var(--font-body);
    font-size:13px;
    color:var(--ink-soft);
    margin-bottom:22px;
  }
  .lock-field{ margin-bottom:14px; }
  .lock-field input{
    width:100%;
    text-align:center;
    letter-spacing:0.5em;
    font-size:18px;
    padding:12px 14px;
    border:1px solid var(--line);
    border-radius:8px;
    font-family:var(--font-mono);
  }
  .lock-field input:focus{
    outline:none;
    border-color:var(--accent);
    box-shadow:0 0 0 3px rgba(16,163,127,0.14);
  }
  .lock-error{
    font-family:var(--font-mono);
    font-size:11.5px;
    color:var(--red);
    margin-bottom:12px;
  }
  .lock-forgot{
    display:block;
    font-family:var(--font-body);
    font-size:12.5px;
    font-weight:600;
    color:var(--teal);
    text-decoration:none;
    margin-bottom:22px;
  }
  .lock-forgot:hover{ text-decoration:underline; }
  .lock-continue{ width:100%; border-radius:10px; padding:13px; }
  #payments-content.hidden{ display:none; }
  #payments-lock.hidden{ display:none; }

  /* ================================================================
     ALL JOBS — table redesign (tabs, toolbar, avatars, pagination)
     Uses the app's theme tokens so it follows dark / light mode.
     ================================================================ */
  .aj-panel{ overflow:visible; }
  .aj-body{ padding:18px 18px 8px; font-family:var(--font-body); }

  /* --- toolbar --- */
  .aj-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:12px 16px; flex-wrap:wrap; margin-bottom:6px; }
  .aj-tabs{ display:flex; gap:5px; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:thin; padding-bottom:2px; min-width:0; flex:1 1 auto; }
  .aj-tab{
    display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:8px;
    border:1px solid var(--line); background:var(--card-soft); color:var(--ink);
    font-family:var(--font-body); font-size:12px; font-weight:500; line-height:1; cursor:pointer;
    white-space:nowrap; flex:0 0 auto;
    transition:border-color .15s ease, background .15s ease;
  }
  .aj-tab:hover{ border-color:var(--ink-soft); }
  .aj-tab-n{ font-size:10.5px; font-weight:600; color:var(--ink-soft); background:rgba(128,128,128,.16); padding:1px 6px; border-radius:6px; }
  .aj-tab.active{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
  .aj-tab.active .aj-tab-n{ color:var(--paper); background:rgba(128,128,128,.38); }

  .aj-tools{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
  .aj-search{ position:relative; }
  .aj-search svg{ position:absolute; left:11px; top:50%; transform:translateY(-50%); width:15px; height:15px; color:var(--ink-soft); pointer-events:none; }
  .aj-search input{ width:210px; height:38px; padding:0 12px 0 34px; border-radius:10px; font-size:13px; background:var(--card); }
  select.aj-select{ height:38px; border-radius:10px; font-size:13px; padding:0 30px 0 12px; background-color:var(--card); max-width:190px; }

  .aj-btn{
    display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 14px; border-radius:10px;
    border:1px solid var(--line); background:var(--card); color:var(--ink);
    font-family:var(--font-body); font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap;
    transition:border-color .15s ease, background .15s ease, transform .08s ease;
  }
  .aj-btn:hover{ border-color:var(--ink-soft); }
  .aj-btn:active{ transform:translateY(1px); }
  .aj-btn svg{ width:15px; height:15px; flex:none; }
  .aj-btn-primary{ background:#0a5c47; background:color-mix(in srgb, var(--accent-dim) 62%, #000); border-color:transparent; color:#fff; }
  .aj-btn-primary:hover{ background:#0d6f57; background:color-mix(in srgb, var(--accent-dim) 78%, #000); border-color:transparent; }
  .aj-btn-sm{ height:34px; padding:0 11px; border-radius:8px; font-size:12.5px; font-weight:500; }
  .aj-btn-icon{ width:34px; padding:0; justify-content:center; }

  .aj-filter-wrap{ position:relative; }
  .aj-badge{ min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--accent); color:#fff; font-size:11px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; }
  .aj-badge[hidden]{ display:none; }
  .aj-pop{
    position:absolute; right:0; top:calc(100% + 8px); z-index:60; width:260px; padding:14px;
    background:var(--card); border:1px solid var(--line); border-radius:12px;
    box-shadow:0 12px 32px rgba(0,0,0,.24); display:flex; flex-direction:column; gap:12px;
  }
  .aj-pop[hidden]{ display:none; }
  .aj-pop label{ display:block; font-family:var(--font-body); font-size:11.5px; font-weight:600; letter-spacing:0; text-transform:none; color:var(--ink-soft); margin-bottom:5px; }
  .aj-pop select{ width:100%; height:36px; border-radius:8px; font-size:13px; }
  .aj-linkbtn{ align-self:flex-start; background:none; border:none; padding:0; color:var(--accent-dim); font-family:var(--font-body); font-size:12.5px; font-weight:600; cursor:pointer; }
  .aj-linkbtn:hover{ text-decoration:underline; }

  /* --- sort / hide-completed / board date bar --- */
  .aj-subbar{ display:flex; flex-wrap:wrap; gap:10px 24px; align-items:center; justify-content:space-between; padding:10px 0 14px; }
  .aj-subgroup{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
  .aj-sublabel{ font-size:12.5px; font-weight:500; color:var(--ink-soft); }
  .aj-subbar select{ height:34px; border-radius:8px; font-size:13px; padding:0 30px 0 10px; background-color:var(--card); }
  .aj-subbar input[type="date"]{ height:34px; border-radius:8px; font-size:13px; padding:0 8px; background:var(--card); }
  .aj-subbar .toggle-switch{ text-transform:none; letter-spacing:0; }
  .aj-subbar .toggle-label{ font-family:var(--font-body); font-size:13px; color:var(--ink); }
  .aj-subbar .count-tag{ font-family:var(--font-body); font-size:12.5px; color:var(--ink-soft); }
  .aj-subbar .add-client-toggle{ margin:0; font-family:var(--font-body); font-size:12.5px; font-weight:600; text-decoration:none; }
  .aj-subbar .add-client-toggle:hover{ text-decoration:underline; }

  /* --- table --- */
  .aj-panel #board{ border:none; border-radius:0; margin-top:0; }
  .job-table.aj-table{ min-width:1000px; background:transparent; font-size:13px; }
  .job-table.aj-table thead th{
    background:var(--card-soft); color:var(--ink-soft); font-family:var(--font-body);
    font-size:12.5px; font-weight:600; letter-spacing:0; text-transform:none;
    padding:12px 9px; border-bottom:1px solid var(--line); position:static;
  }
  .job-table.aj-table thead th:first-child{ border-top-left-radius:10px; border-bottom-left-radius:10px; }
  .job-table.aj-table thead th:last-child{ border-top-right-radius:10px; border-bottom-right-radius:10px; }
  .job-table.aj-table td{ padding:10px 9px; vertical-align:middle; border-top:1px solid var(--line); }
  .job-table.aj-table tbody tr:first-child td{ border-top:none; }
  body.theme-light .job-table.aj-table tbody tr:not(.urgent-row):hover{ background:rgba(0,0,0,.025); }
  .aj-th-flag{ text-align:center; width:34px; padding-left:8px !important; padding-right:0 !important; }
  .aj-th-flag svg{ width:14px; height:14px; display:block; margin:0 auto; }

  .aj-sortable{ cursor:pointer; user-select:none; white-space:nowrap; }
  .aj-sortable:hover{ color:var(--ink); }
  .aj-sortmark{ margin-left:6px; font-size:9.5px; opacity:.45; }
  .aj-sortable.active{ color:var(--ink); }
  .aj-sortable.active .aj-sortmark{ opacity:1; color:var(--accent); }

  .aj-num{ color:var(--ink-soft); font-weight:500; white-space:nowrap; font-variant-numeric:tabular-nums; }
  .aj-title{ display:flex; align-items:center; gap:11px; min-width:210px; max-width:300px; }
  .aj-thumb{ flex:none; width:38px; height:38px; border-radius:9px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:12px; font-weight:700; letter-spacing:.02em; }
  .aj-title-text{ min-width:0; }
  .aj-title-main{ display:flex; align-items:center; gap:6px; font-weight:600; font-size:13px; color:var(--ink); line-height:1.3; }
  .aj-title-main > span{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .aj-title-sub{ font-size:11.5px; color:var(--ink-soft); line-height:1.35; margin-top:2px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .aj-cmt-ind{ flex:none; display:inline-flex; align-items:center; background:none; border:none; padding:2px; border-radius:5px; color:var(--accent-dim); cursor:pointer; }
  .aj-cmt-ind:hover{ background:var(--card-soft); }
  .aj-cmt-ind svg{ width:13px; height:13px; display:block; }
  .aj-tags{ display:flex; gap:5px; flex-wrap:wrap; margin-top:5px; }
  .aj-tag{ font-size:10.5px; font-weight:600; padding:2px 7px; border-radius:5px; text-decoration:none; white-space:nowrap; }
  .aj-tag-inv{ color:var(--mustard); background:rgba(128,128,128,.14); background:color-mix(in srgb, var(--mustard) 16%, transparent); }
  .aj-tag-link{ color:var(--teal); background:rgba(128,128,128,.14); background:color-mix(in srgb, var(--teal) 14%, transparent); }
  .aj-tag-link:hover{ text-decoration:underline; }
  .aj-client{ font-weight:500; max-width:150px; line-height:1.35; }

  .aj-chip{ display:inline-block; padding:4px 10px; border-radius:6px; background:rgba(128,140,170,.16); color:var(--ink); font-size:12px; font-weight:500; white-space:nowrap; }
  .aj-pill{ display:inline-block; padding:4px 11px; border-radius:6px; font-size:12px; font-weight:600; white-space:nowrap; }
  .aj-p-high{ color:var(--red); background:rgba(128,128,128,.16); background:color-mix(in srgb, var(--red) 15%, transparent); }
  .aj-p-medium{ color:var(--mustard); background:rgba(128,128,128,.16); background:color-mix(in srgb, var(--mustard) 17%, transparent); }
  .aj-p-low{ color:#60a5fa; background:rgba(96,165,250,.16); }
  body.theme-light .aj-p-low{ color:#2563eb; background:rgba(37,99,235,.10); }
  .aj-p-other{ color:var(--ink-soft); background:rgba(128,128,128,.16); }
  .aj-dash{ color:var(--ink-soft); }

  /* status pill (still an inline dropdown, restyled soft-tint) */
  .aj-table select.status-pill-select{
    --st:var(--gray);
    background-color:rgba(128,128,128,.16);
    background-color:color-mix(in srgb, var(--st) 16%, transparent);
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='9' height='6'><path d='M0 0 L4.5 6 L9 0 Z' fill='%238b93a1'/></svg>");
    background-repeat:no-repeat; background-position:right 8px center;
    color:var(--st); border-radius:6px; font-family:var(--font-body); font-size:12px; font-weight:600; letter-spacing:0; padding:5px 24px 5px 11px;
  }
  .aj-table select.status-pill-select option{ color:var(--ink); background:var(--card); }
  .aj-table select.status-pill-s-New{ --st:var(--red); }
  .aj-table select.status-pill-s-Inprocess{ --st:var(--mustard); }
  .aj-table select.status-pill-s-Completed{ --st:var(--green); }
  .aj-table select.status-pill-s-Posting{ --st:var(--teal); }
  .aj-table select.status-pill-s-Posted{ --st:var(--green); }
  .aj-table select.status-pill-s-Review{ --st:var(--violet); }
  .aj-table select.status-pill-s-Allocated{ --st:var(--teal); }
  .aj-table select.status-pill-s-Planned,
  .aj-table select.status-pill-s-Planned-for-tomorrow,
  .aj-table select.status-pill-s-Planned-for-evening{ --st:var(--violet); }
  .aj-table select.status-pill-s-In-Progress{ --st:#3b82f6; }
  body:not(.theme-light) .aj-table select.status-pill-s-In-Progress{ --st:#60a5fa; }
  .aj-table select.status-pill-s-Delayed,
  .aj-table select.status-pill-s-Changes{ --st:var(--orange); }
  .aj-table select.status-pill-s-Ready-to-invoice{ --st:var(--mustard); }
  .aj-table select.status-pill-s-No-post{ --st:var(--gray); }

  .aj-assignee{ display:flex; align-items:center; gap:8px; white-space:nowrap; font-size:13px; }
  .aj-avatar{ flex:none; width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:10.5px; font-weight:700; }
  .aj-assignee.unassigned{ color:var(--ink-soft); font-style:italic; }
  .aj-assignee.unassigned .aj-avatar{ background:transparent; border:1.5px dashed var(--line); color:var(--ink-soft); }

  .aj-date{ white-space:nowrap; font-size:13px; font-weight:500; }
  .aj-date.overdue{ color:var(--red); }
  .aj-date.due-today{ color:var(--gold-due); }
  .aj-created{ white-space:nowrap; color:var(--ink-soft); font-size:13px; }
  .aj-tag-ok{ color:var(--green); background:rgba(128,128,128,.14); background:color-mix(in srgb, var(--green) 15%, transparent); }
  .aj-tag-late{ color:var(--red); background:rgba(128,128,128,.14); background:color-mix(in srgb, var(--red) 15%, transparent); }

  .aj-more{ width:32px; height:32px; border:none; border-radius:8px; background:transparent; color:var(--ink); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
  .aj-more:hover{ background:var(--card-soft); }
  .aj-more svg{ width:16px; height:16px; }

  .aj-comment-row td{ padding:0 12px 12px 60px !important; border-top:none !important; }
  .aj-comment-row .comment-edit{ max-width:640px; min-height:38px; border:1px solid var(--line); background:var(--card-soft); color:var(--ink); }

  /* --- row action menu --- */
  .aj-menu{ position:fixed; z-index:200; min-width:216px; padding:6px; background:var(--card); border:1px solid var(--line); border-radius:12px; box-shadow:0 14px 34px rgba(0,0,0,.3); }
  .aj-menu[hidden]{ display:none; }
  .aj-menu button{ display:flex; align-items:center; gap:10px; width:100%; padding:8px 10px; border:none; border-radius:8px; background:transparent; color:var(--ink); font-family:var(--font-body); font-size:13px; text-align:left; cursor:pointer; }
  .aj-menu button:hover{ background:var(--card-soft); }
  .aj-menu button.danger{ color:var(--red); }
  .aj-menu svg{ width:15px; height:15px; flex:none; opacity:.85; }
  .aj-menu .sep{ height:1px; background:var(--line); margin:5px 4px; }

  /* --- footer / pagination --- */
  .aj-footer{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:14px 4px 12px; }
  .aj-showing{ font-size:12.5px; color:var(--ink-soft); }
  .aj-pager-wrap{ display:flex; align-items:center; gap:10px; }
  .aj-pager{ display:flex; align-items:center; gap:4px; }
  .aj-pg{ min-width:30px; height:30px; padding:0 6px; border:none; border-radius:8px; background:transparent; color:var(--ink); font-family:var(--font-body); font-size:13px; font-weight:500; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
  .aj-pg svg{ width:14px; height:14px; }
  .aj-pg:hover:not(:disabled):not(.active):not(.gap){ background:var(--card-soft); }
  .aj-pg.active{ background:var(--ink); color:var(--paper); }
  .aj-pg:disabled{ opacity:.35; cursor:default; }
  .aj-pg.gap{ cursor:default; color:var(--ink-soft); }
  .aj-footer select.aj-pagesize{ height:32px; border-radius:8px; font-size:12.5px; padding:0 28px 0 10px; background-color:var(--card); }

  body.role-viewer .aj-table .job-row-urgent-cell input{ pointer-events:none; opacity:.65; }

  @media (max-width: 820px){
    .aj-tools{ width:100%; }
    .aj-search{ flex:1 1 100%; }
    .aj-search input{ width:100%; }
    select.aj-select{ flex:1 1 140px; max-width:none; }
    .aj-pop{ right:auto; left:0; }
  }