/* Copyright (c) 2026 Patrick Paul Charles van Eybergen. All rights reserved. Proprietary and confidential — see LICENSE. */
  :root{
    --bg:#F4F4F3;
    --surface:#FFFFFF;
    --ink:#1A1A1A;
    --navy:#26272B;
    --navy-light:#37383D;
    --line:#E3E2DF;
    --line-strong:#CBCAC5;
    --orange:#E8590C;
    --orange-light:#FDEAE0;
    --teal:#1F7A5C;
    --teal-bg:#E7F2ED;
    --rust:#B5502E;
    --rust-bg:#F7E9E2;
    --muted:#6D6D6D;
    --danger:#B13B3B;
    --radius:10px;
    --shadow:0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.06);
    /* used all over the mailbox and calendar with a light fallback; defined here so dark mode gets a dark value instead of a beige flash */
    --surface-1:#FFFFFF;
    --surface-2:#F3EEE6;
    --line-color:#E3DED4;
  }
  body.dark{
    --bg:#111113;
    --surface:#1C1D20;
    --ink:#EDEDEB;
    --navy:#0A0A0B;
    --navy-light:#1E1F22;
    --line:#2C2D30;
    --line-strong:#3D3E42;
    --orange:#FF7A29;
    --orange-light:#3A2314;
    --teal:#33B189;
    --teal-bg:#123328;
    --rust:#E08A5F;
    --rust-bg:#3A2417;
    --muted:#9C9C9C;
    --danger:#E3707A;
    --shadow:0 1px 2px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.35);
    --surface-1:#1C1D20;
    --surface-2:#26272B;
    --line-color:#2C2D30;
  }
  body.dark thead th{ background:#202124; }
  body.dark tbody tr:hover{ background:#202124; }
  body.dark .table-wrap table{ background:var(--surface); }
  body.dark input, body.dark select{ background:var(--surface); color:var(--ink); border-color:var(--line-strong); }
  body.dark .icon-btn{ background:var(--surface); }
  *{box-sizing:border-box;}
  /* The whole app was designed and is used day-to-day at 80% browser zoom -- rather
     than ask everyone to remember to set that themselves, bake it in here so 100%
     zoom already looks the way it's meant to. `zoom` (not `transform: scale`) is what
     Chrome's own page zoom uses under the hood, so it reflows the layout exactly like
     real browser zoom does -- percentage/viewport units below still correctly mean
     "100% of the visible area", not "100% of some unscaled box". Chromium/WebKit only
     (Chrome, Edge, Safari); Firefox doesn't support the zoom property and will render
     at true 100% there instead of silently breaking layout.  */
  html{ zoom:0.8; }
  html, body{ height:100%; overflow:hidden; }
  body, .ledger-root{
    font-family:'Inter', -apple-system, sans-serif;
    color:var(--ink);
    background:var(--bg);
    margin:0;
    -webkit-font-smoothing:antialiased;
  }
  body{ overflow:hidden; }
  .ledger-root{
    height:100%;
    width:100%;
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }
  .mono{ font-family:'JetBrains Mono', ui-monospace, monospace; }
  .serif{ font-family:'Fraunces', serif; }

  /* ---------- APP SHELL (sidebar + topbar) ---------- */
  .app-shell{
    display:flex;
    height:100%;
    min-height:0;
    align-items:stretch;
    position:relative;
  }
  .sidebar{
    width:232px;
    flex-shrink:0;
    background:var(--navy);
    color:#fff;
    display:flex;
    flex-direction:column;
    min-height:0;
    overflow:hidden;
    transition:width 0.15s ease;
  }
  .sidebar.collapsed{ width:0; }
  .sidebar-collapse-btn{
    position:absolute;
    top:20px;
    left:232px;
    transform:translateX(-50%);
    width:22px;
    height:22px;
    border-radius:50%;
    border:1px solid var(--line-strong);
    background:var(--surface);
    color:var(--muted);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
    cursor:pointer;
    font-size:12px;
    line-height:1;
    z-index:50;
    transition:left 0.15s ease;
  }
  .sidebar-collapse-btn:hover{ color:var(--ink); border-color:var(--orange); }
  .sidebar-collapse-btn.collapsed{ left:0; transform:translateX(0); }
  .sidebar-brand{
    padding:22px 20px 18px;
  }
  .global-search-wrap{
    position:relative;
    padding:0 16px 14px;
  }
  .global-search-wrap input{
    width:100%;
    padding:8px 12px;
    border-radius:7px;
    border:1px solid rgba(255,255,255,0.15);
    background:rgba(255,255,255,0.08);
    color:#fff;
    font-size:12.5px;
  }
  .global-search-wrap input::placeholder{ color:rgba(255,255,255,0.5); }
  .global-search-wrap input:focus{ outline:none; border-color:var(--teal); background:rgba(255,255,255,0.12); }
  .global-search-results{
    display:none;
    position:absolute;
    top:100%;
    left:16px;
    right:16px;
    background:var(--surface);
    border-radius:8px;
    box-shadow:0 10px 30px rgba(0,0,0,0.3);
    z-index:60;
    max-height:70vh;
    overflow-y:auto;
    padding:6px 0;
  }
  .global-search-results.open{ display:block; }
  .gsr-group-title{
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:0.4px;
    font-weight:700;
    color:var(--muted);
    padding:8px 14px 4px;
  }
  .gsr-item{
    display:flex;
    flex-direction:column;
    padding:7px 14px;
    cursor:pointer;
    color:var(--ink);
  }
  .gsr-item:hover{ background:var(--bg); }
  .gsr-item-title{ font-size:13px; font-weight:600; }
  .gsr-item-sub{ font-size:11.5px; color:var(--muted); }
  .gsr-empty{ padding:14px; font-size:12.5px; color:var(--muted); }
  .wordmark{
    font-family:'Fraunces', serif;
    font-weight:600;
    font-size:21px;
    letter-spacing:0.2px;
    display:flex;
    align-items:center;
    gap:8px;
  }
  .wordmark .brand-ti2{
    display:flex; align-items:center; justify-content:center;
    background:#fff; border-radius:6px; padding:4px 5px;
    flex-shrink:0;
  }
  .wordmark .brand-ti2 img{ height:20px; width:auto; display:block; }
  .wordmark .brand-glyph{ height:24px; width:24px; flex-shrink:0; }
  .wordmark .brand-name{
    font-family:'Orbitron', 'Inter', sans-serif;
    font-weight:700; font-size:20px; letter-spacing:0.5px;
    line-height:1;
  }
  .wordmark-sub .alpha-badge{ margin-left:4px; }
  /* login screen lockup: the same three pieces, on the light card */
  .login-brand{ display:flex; align-items:center; justify-content:center; gap:10px; margin:2px 0 14px; }
  .login-ti2 img{ height:24px; width:auto; display:block; }
  .login-brand img[src$='logo-glyph.svg']{ height:30px; width:30px; }
  .login-ion{ font-family:'Orbitron', 'Inter', sans-serif; font-weight:700; font-size:25px; letter-spacing:0.6px; color:var(--ink); line-height:1; }
  .wordmark-sub{
    font-family:'Inter', sans-serif;
    font-size:11.5px;
    color:#8E9CBB;
    font-weight:500;
    letter-spacing:0.2px;
    margin-top:3px;
  }
  .alpha-badge{
    font-family:'Inter', sans-serif;
    display:inline-block;
    font-size:9.5px;
    font-weight:700;
    letter-spacing:0.6px;
    padding:2px 7px;
    border-radius:20px;
    background:var(--orange);
    color:#fff;
    vertical-align:middle;
    cursor:help;
  }
  .sidebar-nav{
    flex:1;
    padding:6px 12px;
    overflow-y:auto;
  }
  .nav-item{
    display:flex;
    align-items:center;
    gap:10px;
    width:100%;
    text-align:left;
    padding:9px 11px;
    border-radius:8px;
    background:transparent;
    border:none;
    border-left:3px solid transparent;
    color:#A9A9AC;
    font-family:'Inter', sans-serif;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    margin-bottom:2px;
    transition:background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
  }
  .nav-item .nav-icon{
    width:17px;
    height:17px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    opacity:0.9;
    /* A nav item's own icon/SVG can otherwise become the actual drag-and-drop
       target when the cursor is released over it rather than the button's
       background/text -- the highlight (which reacts to bubbled dragover) still
       lights up either way, but the browser can reject the drop itself if the
       innermost element under the cursor never got its own preventDefault(). This
       keeps every pointer/drag event on the button itself, so where exactly you
       release inside it no longer matters. */
    pointer-events:none;
  }
  .nav-item .nav-icon svg{ pointer-events:none; }
  .nav-item .nav-icon svg{
    width:17px;
    height:17px;
    display:block;
  }
  .nav-item:hover{ background:rgba(255,255,255,0.07); color:#fff; }
  .nav-item.active{ background:var(--navy-light); color:#fff; border-left-color:var(--orange); }
  .nav-group-label{
    display:flex;
    align-items:center;
    gap:7px;
    width:100%;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:1px;
    color:#E4EAF8;
    font-weight:800;
    padding:8px 11px;
    margin:16px 0 5px;
    background:rgba(255,255,255,0.08);
    border:none;
    border-left:3px solid var(--orange);
    border-radius:0 7px 7px 0;
    text-align:left;
    cursor:pointer;
    font-family:'Inter', sans-serif;
  }
  .nav-group-label:hover{ color:#fff; background:rgba(255,255,255,0.14); }
  .nav-group-chevron{
    display:inline-flex;
    font-size:10px;
    color:var(--orange);
    transition:transform 0.15s ease;
    flex-shrink:0;
  }
  .nav-group-label[aria-expanded="false"] .nav-group-chevron{ transform:rotate(-90deg); }
  .nav-group-items{ overflow:hidden; }
  .nav-subheading{ padding:9px 16px 3px 22px; font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:#7E8AA6; }
  .nav-step{ display:inline-flex; flex:none; width:16px; height:16px; margin-right:7px; border-radius:50%; background:rgba(255,255,255,0.16); color:#fff; font-size:10px; font-weight:700; align-items:center; justify-content:center; }
  .nav-item.active .nav-step{ background:var(--orange); }
  .nav-item[hidden], .nav-group[hidden], .nav-subheading[hidden]{ display:none !important; }
  .nav-group-items[hidden]{ display:none; }
  .sidebar-footer{
    padding:14px 16px 16px;
    border-top:1px solid rgba(255,255,255,0.12);
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  .sidebar-footer-row{
    display:flex;
    gap:6px;
  }
  .mode-badge{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:11px;
    font-weight:600;
    padding:6px 10px;
    border-radius:6px;
  }
  .mode-badge.local{
    background:rgba(31,122,92,0.18);
    color:#5FD9AF;
  }
  .mode-badge.cloud{
    background:rgba(255,255,255,0.08);
    color:#9CACC9;
  }
  .actor-select{
    width:100%;
    background:rgba(255,255,255,0.08);
    color:#fff;
    border:1px solid rgba(255,255,255,0.22);
    border-radius:7px;
    padding:8px 10px;
    font-size:12px;
    font-weight:600;
    font-family:'Inter', sans-serif;
    cursor:pointer;
  }
  .actor-select option{ color:#1C2333; }
  .theme-toggle{
    width:32px; height:32px;
    border-radius:7px;
    border:1px solid rgba(255,255,255,0.22);
    background:rgba(255,255,255,0.08);
    color:#fff;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:14px;
    flex-shrink:0;
  }
  .theme-toggle:hover{ background:rgba(255,255,255,0.16); }
  .icon-text-btn{
    flex:1;
    background:rgba(255,255,255,0.08);
    color:#D7DDEB;
    border:1px solid rgba(255,255,255,0.22);
    border-radius:7px;
    padding:0 8px;
    font-size:11.5px;
    font-weight:600;
    font-family:'Inter', sans-serif;
    cursor:pointer;
    white-space:nowrap;
  }
  .icon-text-btn:hover{ background:rgba(255,255,255,0.16); color:#fff; }

  .main-area{
    flex:1;
    min-width:0;
    min-height:0;
    display:flex;
    flex-direction:column;
    overflow-y:auto;
  }
  .topbar{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    align-items:center;
    gap:14px;
    padding:18px 28px;
    background:var(--surface);
    border-bottom:1px solid var(--line);
  }
  .topbar-title{
    font-family:'Fraunces', serif;
    font-size:20px;
    font-weight:600;
  }
  .topbar-title-row{
    display:flex;
    align-items:baseline;
    gap:8px;
  }
  .topbar-count{
    font-size:12px;
    font-weight:600;
    color:var(--muted);
    background:var(--bg-soft, #f1f1ef);
    border:1px solid var(--line);
    border-radius:999px;
    padding:2px 9px;
    font-variant-numeric:tabular-nums;
  }
  .topbar-sub{
    font-size:12px;
    color:var(--muted);
    margin-top:2px;
  }
  .topbar-actions{
    display:flex;
    gap:8px;
    align-items:center;
    flex-wrap:wrap;
    justify-content:flex-end;
    grid-column:3;
  }
  .stat-strip{
    display:grid;
    grid-template-columns:repeat(4,minmax(120px,1fr));
    gap:12px;
    padding:18px 28px 0;
  }
  .sub-stats-row{
    display:grid;
    grid-template-columns:repeat(4,minmax(120px,1fr));
    gap:12px;
    margin-bottom:18px;
  }
  .stat{
    background:var(--surface);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:14px 16px;
  }
  .stat-label{
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:0.6px;
    color:var(--muted);
    font-weight:600;
    margin-bottom:6px;
  }
  .stat-value{
    font-family:'JetBrains Mono', monospace;
    font-size:20px;
    font-weight:600;
    color:var(--ink);
  }

  /* ---------- CONTENT TOOLBAR ---------- */
  .content-toolbar{
    padding:16px 28px 0;
  }
  .search-box{
    position:relative;
    flex:1;
    min-width:200px;
  }
  .search-box input{
    width:100%;
    padding-right:28px;
  }
  .search-box-clear{
    position:absolute;
    right:5px;
    top:50%;
    transform:translateY(-50%);
    width:20px;
    height:20px;
    border:none;
    background:transparent;
    color:var(--muted);
    cursor:pointer;
    font-size:14px;
    line-height:1;
    display:none;
    align-items:center;
    justify-content:center;
    border-radius:4px;
  }
  .search-box-clear:hover{
    background:var(--line);
    color:var(--ink);
  }
  input, select{
    font-family:'Inter', sans-serif;
    font-size:13.5px;
    padding:9px 12px;
    border:1px solid var(--line-strong);
    border-radius:7px;
    background:var(--surface);
    color:var(--ink);
    outline:none;
  }
  .smart-date-wrap{ position:relative; }
  .smart-date-wrap input.smart-date-input{ width:100%; padding-right:32px; }
  .smart-date-pick-btn{
    position:absolute;
    right:4px;
    top:50%;
    transform:translateY(-50%);
    width:26px;
    height:26px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:none;
    border:none;
    cursor:pointer;
    font-size:14px;
    color:var(--muted);
    border-radius:5px;
  }
  .smart-date-pick-btn:hover{ background:var(--line); color:var(--ink); }
  .smart-date-hidden-picker{
    position:absolute;
    right:4px;
    top:50%;
    width:1px;
    height:1px;
    opacity:0;
    pointer-events:none;
    border:none;
  }
  input:focus, select:focus{
    border-color:var(--navy);
    box-shadow:0 0 0 3px rgba(27,42,74,0.12);
  }
  select{ cursor:pointer; }
  .btn{
    font-family:'Inter', sans-serif;
    font-weight:600;
    font-size:13px;
    padding:9px 15px;
    border-radius:7px;
    border:1px solid transparent;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    gap:6px;
    white-space:nowrap;
    transition:transform 0.05s ease, opacity 0.15s ease;
  }
  .btn:active{ transform:scale(0.98); }
  .btn-primary{ background:var(--navy); color:#fff; }
  .btn-primary:hover{ background:var(--navy-light); }
  .btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line-strong); }
  .btn-ghost:hover{ background:var(--bg); border-color:var(--navy); }
  .btn-danger-ghost{ background:transparent; color:var(--danger); border-color:#E4C6C6; }
  .btn-danger-ghost:hover{ background:#FBEEEE; }
  .btn-sm{ padding:6px 10px; font-size:12px; }

  .ledger-filters{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    flex:1;
  }
  .ledger-filters.hidden{ display:none; }
  .view-toggle{
    display:inline-flex;
    border:1px solid var(--line-strong);
    border-radius:7px;
    overflow:hidden;
  }
  .view-toggle-btn{
    background:var(--surface);
    border:none;
    padding:7px 14px;
    font-size:12.5px;
    font-weight:600;
    color:var(--muted);
    cursor:pointer;
  }
  .view-toggle-btn + .view-toggle-btn{ border-left:1px solid var(--line-strong); }
  .view-toggle-btn.active{ background:var(--navy); color:#fff; }
  .kanban-board{
    display:flex;
    gap:14px;
    overflow-x:auto;
    padding-bottom:10px;
    align-items:flex-start;
  }
  .kanban-column{
    background:var(--bg);
    border-radius:10px;
    min-width:230px;
    max-width:230px;
    flex-shrink:0;
    padding:10px;
  }
  .kanban-column-head{
    padding:4px 4px 10px;
  }
  .kanban-column-title{
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:0.4px;
    font-weight:700;
    color:var(--muted);
  }
  .kanban-column-meta{
    font-size:12px;
    color:var(--ink);
    margin-top:2px;
    font-weight:600;
  }
  .kanban-card{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:8px;
    padding:10px 11px;
    margin-bottom:8px;
    cursor:pointer;
  }
  .kanban-card:hover{ border-color:var(--line-strong); }
  .kanban-card-desc{ font-size:12.5px; font-weight:600; color:var(--ink); margin-bottom:4px; line-height:1.35; }
  .kanban-card-account{ font-size:11.5px; color:var(--muted); margin-bottom:6px; }

  .proj-board{
    display:flex;
    gap:14px;
    overflow-x:auto;
    padding-bottom:16px;
    align-items:flex-start;
  }
  .proj-column{
    background:var(--bg);
    border-radius:10px;
    min-width:260px;
    max-width:260px;
    flex-shrink:0;
    padding:10px;
    transition:background 0.1s ease;
  }
  .proj-column.drag-over{ background:var(--orange-light); }
  .proj-column-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:4px 4px 10px;
  }
  .proj-column-title{
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:0.4px;
    font-weight:700;
    color:var(--muted);
    cursor:pointer;
  }
  .proj-column-count{ font-size:11px; color:var(--muted); font-weight:600; }
  .proj-column-del{
    background:none; border:none; color:var(--muted); cursor:pointer; font-size:13px; padding:2px 4px; opacity:0.6;
  }
  .proj-column-del:hover{ opacity:1; color:var(--danger); }
  .proj-card{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:8px;
    padding:10px 11px;
    margin-bottom:8px;
    cursor:grab;
    transition:box-shadow 0.1s ease, opacity 0.1s ease;
  }
  .proj-card:hover{ border-color:var(--line-strong); box-shadow:var(--shadow); }
  .proj-card.dragging{ opacity:0.4; }
  .proj-card.is-subtask{ border-left:3px solid var(--orange); }
  .proj-card.is-done{ opacity:0.6; }
  .proj-card.is-done .proj-card-title{ text-decoration:line-through; color:var(--muted); }
  .proj-card-parent{ font-size:10.5px; color:var(--orange); font-weight:600; margin-bottom:4px; }
  .proj-card-title{ font-size:12.5px; font-weight:600; color:var(--ink); margin-bottom:4px; line-height:1.35; }
  .proj-card-sub{ font-size:11px; color:var(--muted); margin-bottom:2px; }
  .proj-card-tags{ display:flex; flex-wrap:wrap; gap:4px; margin-bottom:6px; }
  .proj-card-tags .tag-chip{ font-size:9.5px; padding:2px 7px; }
  .proj-card-meta{ display:flex; align-items:center; justify-content:space-between; margin-top:6px; gap:6px; }
  .proj-card-badge{ font-size:9.5px; padding:2px 7px; }
  .proj-add-task-inline{
    width:100%;
    background:none;
    border:1px dashed var(--line-strong);
    border-radius:8px;
    padding:8px;
    color:var(--muted);
    font-size:12px;
    cursor:pointer;
    text-align:center;
  }
  .proj-add-task-inline:hover{ border-color:var(--orange); color:var(--orange); }
  .proj-add-column{
    min-width:200px;
    max-width:200px;
    flex-shrink:0;
    display:flex;
    align-items:flex-start;
    padding-top:4px;
  }
  .project-card-item{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:16px;
    cursor:pointer;
    transition:border-color 0.12s ease;
  }
  .project-card-item:hover{ border-color:var(--orange); }
  .project-card-name{ font-weight:700; font-size:14.5px; color:var(--ink); }
  .project-card-desc{ font-size:12.5px; color:var(--muted); margin-top:4px; line-height:1.4; }
  .project-card-count{ font-size:11.5px; color:var(--orange); font-weight:700; margin-top:10px; }
  .project-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
    gap:14px;
  }
  .kanban-card-foot{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:6px;
  }
  .kanban-card-amount{ font-family:'JetBrains Mono', monospace; font-size:12px; font-weight:700; }
  .kanban-card select{
    font-size:10.5px;
    padding:2px 4px;
    border-radius:4px;
    max-width:90px;
  }
  .product-image-row{
    display:flex;
    align-items:flex-start;
    gap:14px;
  }
  .product-image-preview{
    width:84px; height:84px;
    flex-shrink:0;
    border-radius:8px;
    border:1px solid var(--line);
    overflow:hidden;
    background:var(--bg);
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .product-image-preview img{
    width:100%; height:100%;
    object-fit:cover;
  }
  .product-image-controls{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; }

  /* ---------- HOME DASHBOARD ---------- */
  .home-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:16px;
  }
  .home-widget{
    background:var(--surface);
    border-radius:var(--radius);
    border:1px solid var(--line);
    padding:16px;
    display:flex;
    flex-direction:column;
  }
  .home-widget-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    font-size:14px;
    font-weight:700;
    color:var(--ink);
    margin-bottom:12px;
  }
  .home-widget-count{
    background:var(--bg);
    color:var(--ink);
    font-size:12px;
    font-weight:700;
    padding:2px 9px;
    border-radius:20px;
  }
  .home-widget-body{ flex:1; min-height:40px; }
  .home-widget-empty{ font-size:12.5px; color:var(--muted); padding:6px 0; }
  .home-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:8px 0;
    border-bottom:1px solid var(--line);
    cursor:pointer;
  }
  .home-item-text{ min-width:0; flex:1; }
  .home-item:last-child{ border-bottom:none; }
  .home-item:hover .home-item-title{ text-decoration:underline; }
  .home-item-title{ font-size:13px; font-weight:600; color:var(--ink); }
  .home-item-sub{ font-size:11.5px; color:var(--muted); margin-top:1px; }
  .home-widget-viewall{
    margin-top:12px;
    background:none;
    border:none;
    color:var(--orange);
    font-size:12px;
    font-weight:700;
    cursor:pointer;
    text-align:left;
    padding:0;
  }
  .home-widget-viewall:hover{ text-decoration:underline; }
  .acct-hover-card{
    position:fixed;
    z-index:4000;
    max-width:280px;
    background:var(--surface);
    color:var(--ink);
    border:1px solid var(--line-strong);
    border-radius:8px;
    padding:10px 12px;
    font-size:12.5px;
    line-height:1.5;
    box-shadow:0 8px 24px rgba(0,0,0,0.18);
    pointer-events:none;
    opacity:0;
    visibility:hidden;
    transition:opacity .1s ease;
  }
  .acct-hover-card.visible{ opacity:1; visibility:visible; }
  /* phone numbers: plain text with a mouse (a click must not open a calling app); coloured links you can tap on a touch screen, where the hover card can be tapped too */
  .tel-link{ color:inherit; text-decoration:none; }
  @media (hover:hover){ .tel-link{ pointer-events:none; } .tel-call{ display:none !important; } }
  @media (hover:none){ .tel-link{ color:var(--orange); text-decoration:underline; } .acct-hover-card.visible{ pointer-events:auto; } }
  .acct-hover-title{ font-weight:700; font-size:13px; margin-bottom:4px; }
  .acct-hover-row{ margin-bottom:2px; overflow-wrap:break-word; }
  .acct-hover-divider{ border-top:1px solid var(--line); margin:6px 0; }
  .home-widget{ transition:box-shadow .12s ease; }
  .home-widget-drag-handle{ cursor:grab; color:var(--muted); font-size:14px; flex-shrink:0; }
  .home-widget-dragging{ opacity:0.4; }
  .home-widget-drop-before{ box-shadow:inset 3px 0 0 var(--orange); }
  .home-widget-drop-after{ box-shadow:inset -3px 0 0 var(--orange); }
  @media (max-width: 900px){
    .home-grid{ grid-template-columns:1fr; }
  }

  /* ---------- SUMMARY VIEW ---------- */
  .summary-wrap{ margin-top:16px; }
  .month-card{
    background:var(--surface);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    margin-bottom:14px;
    overflow:hidden;
  }
  .month-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:15px 18px;
    cursor:pointer;
    user-select:none;
  }
  .month-header:hover{ background:#FBFAF7; }
  .month-title-wrap{ display:flex; align-items:center; gap:10px; }
  .month-chevron{
    font-size:11px;
    color:var(--muted);
    transition:transform 0.15s ease;
    display:inline-block;
  }
  .month-card.open .month-chevron{ transform:rotate(90deg); }
  .month-title{ font-family:'Fraunces', serif; font-size:17px; font-weight:600; }
  .month-meta{ font-size:12px; color:var(--muted); margin-top:1px; }
  .month-total{
    font-family:'JetBrains Mono', monospace;
    font-size:18px;
    font-weight:600;
    color:var(--teal);
  }
  .month-body{
    display:none;
    border-top:1px solid var(--line);
    padding:6px 18px 14px;
  }
  .month-card.open .month-body{ display:block; }
  .owner-block{
    padding:12px 0;
    border-bottom:1px dashed var(--line);
  }
  .owner-block:last-child{ border-bottom:none; }
  .owner-block-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:8px;
  }
  .owner-name{
    font-weight:700;
    font-size:13.5px;
    display:flex;
    align-items:center;
    gap:8px;
  }
  .owner-avatar{
    width:22px; height:22px;
    border-radius:50%;
    background:var(--navy);
    color:#fff;
    font-size:10.5px;
    font-weight:700;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .owner-count{ color:var(--muted); font-weight:500; font-size:12px; }
  .owner-total{
    font-family:'JetBrains Mono', monospace;
    font-weight:600;
    font-size:13.5px;
  }
  .owner-orders{ margin-left:30px; }
  .owner-order-row{
    display:flex;
    align-items:baseline;
    gap:10px;
    padding:5px 0;
    font-size:12.8px;
  }
  .owner-order-row .oleft{
    display:flex;
    align-items:baseline;
    gap:10px;
    flex:1;
    min-width:0;
  }
  .owner-order-row .oname{ font-weight:600; white-space:nowrap; }
  .owner-order-row .oaccount{ color:var(--muted); white-space:nowrap; }
  .owner-order-row .oamount{ font-family:'JetBrains Mono', monospace; white-space:nowrap; color:var(--ink); margin-left:auto; }
  .owner-order-row .odate{ color:var(--muted); font-family:'JetBrains Mono', monospace; font-size:11.5px; white-space:nowrap; }

  /* ---------- TARGET CHART ---------- */
  .chart-wrap{ margin-top:16px; display:flex; flex-direction:column; gap:16px; }
  .chart-hint{
    font-size:12px;
    color:var(--muted);
    background:var(--surface);
    border:1px dashed var(--line-strong);
    border-radius:var(--radius);
    padding:10px 14px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    flex-wrap:wrap;
  }
  .chart-card{
    background:var(--surface);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:18px 20px 14px;
  }
  .chart-card-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:10px;
  }
  .chart-card-title{
    font-family:'Fraunces', serif;
    font-size:16px;
    font-weight:600;
  }
  .chart-card-badges{ display:flex; gap:8px; flex-wrap:wrap; }
  .chart-svg{ width:100%; height:auto; display:block; }
  .chart-legend{
    display:flex;
    gap:18px;
    flex-wrap:wrap;
  }
  .legend-item{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:11.5px;
    color:var(--muted);
    font-weight:500;
  }
  .legend-swatch{ width:14px; height:10px; border-radius:2px; }
  .legend-swatch.bar{ background:var(--teal); }
  .legend-swatch.target{ background:#8D97B5; }
  .legend-swatch.none{ background:#CFCBBC; }
  .table-wrap{
    flex:1;
    overflow:auto;
    padding:0 28px 28px;
  }
  /* Calendar and My Mailbox: their own panels stretch to fill the rest of the page
     and scroll internally, instead of sizing to content with .table-wrap scrolling
     the whole page around them. #tableContainer has no height of its own by default
     (block, content-sized) -- this gives it one, definite and equal to .table-wrap's
     real (flexed) height, so percentage/flex heights below it actually have something
     to resolve against. overflow:hidden here is deliberate: with the fill height exact,
     nothing should overflow it, and this avoids a redundant second scrollbar next to
     each panel's own internal one. */
  #tableContainer.table-container-fill{
    height:100%;
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }
  .table-container-fill .cal-page-wrap,
  .table-container-fill .mb-page-wrap{
    flex:1;
    min-height:0;
    display:flex;
    flex-direction:column;
  }
  .cal-page-card{
    flex:1;
    min-height:0;
    display:flex;
    flex-direction:column;
  }
  .cal-page-card .cal-grid{
    flex:1;
    min-height:0;
  }
  /* Trip Planner: same fill-to-bottom approach as Calendar/My Mailbox above, so the
     map and Nearby Accounts list use the rest of the viewport instead of a fixed
     560px map and a 420px scrollbox that leave dead space below on a tall screen. */
  #tripPlannerPage{
    display:flex;
    flex-direction:column;
    height:100%;
    overflow:hidden;
  }
  #tp_main_grid{
    flex:1;
    min-height:0;
  }
  #tp_map_col{
    display:flex;
    flex-direction:column;
    min-height:0;
  }
  #tripPlannerMap{
    flex:1;
    min-height:320px;
  }
  #tp_side_col{
    display:flex;
    flex-direction:column;
    min-height:0;
    overflow-y:auto;
  }
  #tp_nearby_card{
    flex:1;
    min-height:0;
    display:flex;
    flex-direction:column;
  }
  #tp_nearby_list{
    flex:1;
    min-height:0;
    overflow-y:auto;
  }
  /* Trip Planner toolbar: the controls share one height and the two route buttons sit together on the right (they wrap under on a narrow screen) */
  .tp-toolbar{ flex-wrap:wrap; gap:10px 12px; }
  .tp-toolbar .field{ margin-bottom:0; }
  .tp-toolbar input[type=number], .tp-toolbar select, .tp-toolbar .btn, .tp-actions .btn{ height:40px; box-sizing:border-box; }
  .tp-actions{ display:flex; gap:8px; margin-left:auto; flex-wrap:wrap; align-items:flex-end; }
  @media (max-width:800px){
    /* phone: starting point, then the toolbar, the map, the trip stops and the nearby list in one column; the page scrolls (it was clipped, so the route buttons and the list were off-screen) */
    #tripPlannerPage{ height:auto; overflow:visible; }
    #tp_main_grid{ flex-direction:column !important; flex:none; }
    #tp_map_col, #tp_side_col{ flex:none !important; min-width:0 !important; width:100%; }
    #tripPlannerPage .field-row{ flex-wrap:wrap; }
    #tripPlannerPage .field{ flex:1 1 100% !important; min-width:0 !important; max-width:100%; }
    #tripPlannerPage .field-row{ gap:10px; }
    .tp-toolbar #tp_sort_select{ min-width:0; width:100%; }
    #tripPlannerPage select, #tripPlannerPage input[type=text]{ max-width:100%; }
    .tp-actions{ margin-left:0; width:100%; }
    .tp-actions .btn{ flex:1 1 auto; justify-content:center; }
    #tripPlannerMap{ flex:none; height:340px; }
    #tp_side_col{ overflow:visible; }
    #tp_nearby_card{ flex:none; }
    #tp_nearby_list{ max-height:55vh; }
  }
  /* the look of the app's own tables. :where() keeps the old (lowest) priority; a table with a width attribute is email content (it has its own layout) and is left alone */
  :where(table:not([width])){
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    background:var(--surface);
    border-radius:var(--radius);
    overflow:hidden;
    box-shadow:var(--shadow);
    margin-top:16px;
  }
  thead th{
    text-align:left;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:0.5px;
    color:var(--muted);
    font-weight:700;
    padding:12px 14px;
    background:#FBFAF7;
    border-bottom:1px solid var(--line);
    cursor:pointer;
    user-select:none;
    white-space:nowrap;
  }
  thead th:hover{ color:var(--ink); }
  thead th .arrow{ opacity:0.4; margin-left:3px; font-size:10px; }
  tbody tr{
    border-bottom:1px solid var(--line);
    position:relative;
  }
  tbody tr:last-child{ border-bottom:none; }
  tbody tr:hover{ background:#FBFAF7; }
  tr.sub-row-yellow{ background:#FFF9E0; }
  tr.sub-row-yellow:hover{ background:#FFF3C4; }
  tr.sub-row-orange{ background:#FFEFDD; }
  tr.sub-row-orange:hover{ background:#FFE3C2; }
  tr.sub-row-red{ background:#FCE9E9; }
  tr.sub-row-red:hover{ background:#FADCDC; }
  body.dark tr.sub-row-yellow{ background:#4A4324; }
  body.dark tr.sub-row-yellow:hover{ background:#5A5029; }
  body.dark tr.sub-row-orange{ background:#4F3B24; }
  body.dark tr.sub-row-orange:hover{ background:#5E4629; }
  body.dark tr.sub-row-red{ background:#4A2C2C; }
  body.dark tr.sub-row-red:hover{ background:#583333; }
  tbody td{
    padding:12px 14px;
    font-size:13.5px;
    vertical-align:middle;
  }
  td.accent-cell{
    position:relative;
    padding-left:18px;
  }
  td.accent-cell::before{
    content:"";
    position:absolute;
    left:0; top:0; bottom:0;
    width:4px;
  }
  .type-existing td.accent-cell::before{ background:var(--navy); }
  .type-new td.accent-cell::before{ background:var(--rust); }
  .cell-name{ font-weight:600; }
  .company-expand-btn{
    display:inline-flex;
    align-items:center;
    gap:7px;
    background:none;
    border:none;
    padding:0;
    font-family:inherit;
    font-size:inherit;
    font-weight:600;
    color:var(--ink);
    cursor:pointer;
    text-align:left;
  }
  .company-expand-btn:hover{ color:var(--orange); text-decoration:underline; }
  .company-chevron{
    font-size:9px;
    color:var(--muted);
    display:inline-block;
    transition:transform 0.15s ease;
    flex-shrink:0;
  }
  .company-chevron.open{ transform:rotate(90deg); }
  .company-contacts-row td{ padding:0; background:var(--bg); }
  .contacts-expand-panel{ padding:14px 20px 16px 44px; }
  .contacts-expand-title{
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:0.5px;
    color:var(--muted);
    font-weight:700;
    margin-bottom:8px;
  }
  .contact-view-row{
    display:flex;
    align-items:center;
    gap:20px;
    padding:7px 0;
    border-bottom:1px solid var(--line);
    font-size:12.5px;
  }
  .contact-view-row:last-child{ border-bottom:none; }
  .contact-view-row .cvr-name{ font-weight:600; flex:1.2; min-width:0; }
  .contact-view-row .cvr-email{ color:var(--muted); flex:1.3; min-width:0; }
  .contact-view-row .cvr-phone{ color:var(--muted); flex:0.9; min-width:0; }
  .contact-view-row{ cursor:pointer; }
  .contact-view-row:hover{ background:var(--bg); }
  .contact-account-link{
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:var(--bg);
    border-radius:8px;
    padding:10px 14px;
    margin-bottom:18px;
    font-size:13px;
  }
  .contact-notes-section{ margin-top:22px; }
  .add-note-form{
    background:var(--bg);
    border-radius:8px;
    padding:14px;
    margin-bottom:14px;
  }
  .add-note-form-actions{
    display:flex;
    justify-content:flex-end;
    gap:8px;
    margin-top:4px;
  }
  .note-card{
    border:1px solid var(--line);
    border-radius:8px;
    padding:12px 14px;
    margin-bottom:10px;
  }
  .note-card-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:6px;
  }
  .note-card-type{
    display:inline-flex;
    align-items:center;
    gap:5px;
    font-size:11px;
    font-weight:700;
    padding:3px 8px;
    border-radius:5px;
    text-transform:uppercase;
    letter-spacing:0.3px;
  }
  .note-card-date{ font-size:12px; color:var(--muted); }
  .note-card-text{ font-size:13px; line-height:1.5; color:var(--ink); white-space:pre-wrap; }
  .note-card-actor{ font-size:11px; color:var(--muted); margin-top:8px; font-style:italic; }
  .note-card-followup{
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:10px;
    padding:8px 10px;
    border-radius:6px;
    font-size:12.5px;
  }
  .note-card-followup.fu-done{ background:#EEEDE6; color:var(--muted); text-decoration:line-through; }
  .note-card-followup.fu-overdue{ background:#FBEEEE; color:#B13B3B; }
  .note-card-followup.fu-soon{ background:#FDEBD2; color:#B5651D; }
  .note-card-followup.fu-open{ background:#EDEDEC; color:var(--navy); }
  .note-card-followup button{
    margin-left:auto;
    flex-shrink:0;
    font-size:11px;
    font-weight:700;
    background:none;
    border:1px solid currentColor;
    border-radius:5px;
    padding:3px 8px;
    cursor:pointer;
    color:inherit;
    opacity:0.8;
  }
  .note-card-followup button:hover{ opacity:1; }
  .cell-sub{ color:var(--muted); font-size:12px; margin-top:1px; }
  .row-link{
    color:var(--ink);
    text-decoration:none;
    border-bottom:1px dashed var(--line-strong);
    cursor:pointer;
  }
  .row-link:hover{ color:var(--orange); border-bottom-color:var(--orange); }
  .amount-cell{ font-family:'JetBrains Mono', monospace; font-weight:600; }
  .date-cell{ font-family:'JetBrains Mono', monospace; color:var(--muted); }
  .tag{
    display:inline-block;
    font-size:11px;
    font-weight:600;
    padding:3px 8px;
    border-radius:5px;
  }
  .tag-existing{ background:#EDEDEC; color:var(--navy); }
  .tag-new{ background:var(--rust-bg); color:var(--rust); }
  .status-select{
    display:inline-block;
    font-family:'Inter', sans-serif;
    font-size:11px;
    font-weight:600;
    padding:4px 8px;
    border:none;
    border-radius:5px;
    cursor:pointer;
    outline:none;
    appearance:auto;
  }
  .status-select:hover{ filter:brightness(0.96); }
  .status-select:focus{ box-shadow:0 0 0 2px rgba(27,42,74,0.3); }
  .review-note-input{
    width:100%;
    min-width:200px;
    font-size:13px;
    font-family:'Inter', sans-serif;
    padding:6px 9px;
    border:1px solid var(--line-strong);
    border-radius:5px;
    background:var(--surface);
    color:var(--ink);
  }
  textarea.review-note-input{ min-height:64px; resize:vertical; line-height:1.4; }
  .review-note-input:focus{ outline:none; box-shadow:0 0 0 2px rgba(27,42,74,0.3); }
  .review-toolbar{
    display:flex;
    align-items:center;
    gap:16px;
    flex-wrap:wrap;
    background:var(--surface);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:12px 16px;
  }
  .review-toolbar select{ font-size:13px; padding:6px 10px; border-radius:6px; border:1px solid var(--line-strong); background:var(--surface); color:var(--ink); }
  tr.row-reviewed{ opacity:0.5; }
  tr[data-review-row]{ cursor:pointer; }
  .wr-reviewed-checkbox{ cursor:pointer; width:15px; height:15px; }
  .row-actions{
    display:flex;
    gap:6px;
    opacity:0;
    transition:opacity 0.12s ease;
  }
  tbody tr:hover .row-actions{ opacity:1; }
  .icon-btn{
    width:26px; height:26px;
    border-radius:6px;
    border:1px solid var(--line-strong);
    background:var(--surface);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    color:var(--muted);
  }
  .icon-btn:hover{ border-color:var(--orange); color:var(--orange); }
  .icon-btn.danger:hover{ border-color:var(--danger); color:var(--danger); background:#FBEEEE; }

  .empty-state{
    text-align:center;
    padding:70px 20px;
    color:var(--muted);
  }
  .empty-state .serif{ font-size:19px; color:var(--ink); margin-bottom:6px; display:block; }
  .empty-state p{ font-size:13.5px; margin:6px 0 18px; }

  .loading-state{
    text-align:center;
    padding:60px 20px;
    color:var(--muted);
    font-size:13.5px;
  }

  /* ---------- QUICK ADD BAR ---------- */
  .quick-add-bar{
    display:none;
    gap:8px;
    align-items:center;
    flex-wrap:wrap;
    background:var(--surface);
    border:1px dashed var(--line-strong);
    border-radius:var(--radius);
    padding:12px 14px;
    margin-top:16px;
  }
  .quick-add-bar.open{ display:flex; }
  .quick-add-bar input, .quick-add-bar select{ font-size:12.5px; padding:7px 9px; }
  .qa-name{ flex:1.4; min-width:130px; }
  .qa-account{ flex:1.1; min-width:110px; }
  .qa-contact{ flex:1; min-width:100px; }
  .qa-type{ flex:0.9; min-width:90px; }
  .qa-amount{ flex:0.7; min-width:90px; }
  .qa-date{ flex:0.9; min-width:120px; }
  .qa-owner{ flex:0.8; min-width:90px; }
  .qa-add-btn{
    background:var(--navy); color:#fff; border:none;
    border-radius:7px; width:34px; height:34px;
    font-size:16px; font-weight:700; cursor:pointer;
    flex-shrink:0;
  }
  .qa-add-btn:hover{ background:var(--navy-light); }
  .qa-hint{ font-size:11px; color:var(--muted); width:100%; margin-top:2px; }

  /* ---------- LEADERBOARD ---------- */
  .lb-wrap{ margin-top:16px; display:flex; flex-direction:column; gap:16px; }
  .lb-period-row{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
  }
  .lb-period-label{
    font-size:12.5px;
    color:var(--muted);
    font-weight:600;
  }
  .lb-custom-range{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:12.5px;
    color:var(--muted);
  }
  .lb-custom-range input{
    padding:6px 9px;
    border:1px solid var(--line-strong);
    border-radius:7px;
    background:var(--surface);
    color:var(--ink);
    font-size:12.5px;
  }
  .lb-period-total{
    display:flex;
    gap:1px;
    background:var(--line);
    border-radius:var(--radius);
    overflow:hidden;
    box-shadow:var(--shadow);
  }
  .lb-period-total-item{
    flex:1;
    background:var(--surface);
    padding:14px 18px;
    text-align:center;
  }
  .lb-period-total-label{
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:0.4px;
    font-weight:700;
    color:var(--muted);
    margin-bottom:4px;
  }
  .lb-period-total-value{
    font-family:'JetBrains Mono', monospace;
    font-size:20px;
    font-weight:700;
    color:var(--ink);
  }
  .lb-period-total-value.accent{ color:var(--orange); font-size:24px; }
  @media (max-width: 700px){
    .lb-period-total{ flex-direction:column; }
  }
  .ytd-card{
    background:var(--surface);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:18px 20px;
  }
  .ytd-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:12px;
  }
  .ytd-title{ font-family:'Fraunces', serif; font-size:16px; font-weight:600; }
  .ytd-sub{ font-size:12px; color:var(--muted); margin-top:1px; }
  .lb-grid{
    display:grid;
    grid-template-columns:1.1fr 1fr;
    gap:16px;
  }
  @media (max-width:800px){ .lb-grid{ grid-template-columns:1fr; } }
  .lb-card{
    background:var(--surface);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:18px 20px;
  }
  .lb-card-title{ font-family:'Fraunces', serif; font-size:16px; font-weight:600; margin-bottom:12px; }
  .lb-row{
    display:flex;
    align-items:center;
    gap:12px;
    padding:9px 0;
    border-bottom:1px solid var(--line);
  }
  .lb-row:last-child{ border-bottom:none; }
  .lb-rank{
    width:22px; text-align:center;
    font-family:'JetBrains Mono', monospace;
    font-weight:700;
    font-size:12.5px;
    color:var(--muted);
  }
  .lb-rank.medal{ font-size:16px; }
  .lb-name-block{ flex:1; min-width:0; }
  .lb-name{ font-weight:700; font-size:13.5px; }
  .lb-sub{ font-size:11.5px; color:var(--muted); margin-top:1px; }
  .lb-bar-track{
    height:5px; background:#ECEAE1; border-radius:3px;
    margin-top:5px; overflow:hidden;
  }
  .lb-bar-fill{ height:100%; background:var(--navy); border-radius:3px; }
  .lb-total{
    font-family:'JetBrains Mono', monospace;
    font-weight:700;
    font-size:13.5px;
    white-space:nowrap;
  }

  /* ---------- ACTIVITY LOG ---------- */
  .activity-wrap{ margin-top:16px; }
  .activity-card{
    background:var(--surface);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    overflow:hidden;
  }
  .activity-row{
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding:13px 18px;
    border-bottom:1px solid var(--line);
  }
  .activity-row:last-child{ border-bottom:none; }
  .activity-avatar{
    width:28px; height:28px;
    border-radius:50%;
    background:var(--navy);
    color:#fff;
    font-size:11px;
    font-weight:700;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
    margin-top:1px;
  }
  .activity-text{ font-size:13px; line-height:1.5; }
  .activity-text b{ font-weight:700; }
  .activity-time{ font-size:11.5px; color:var(--muted); margin-top:2px; }
  .activity-tag{
    display:inline-block;
    font-size:10px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.3px;
    padding:2px 6px;
    border-radius:4px;
    margin-right:6px;
    vertical-align:middle;
  }
  .activity-tag.added{ background:var(--teal-bg); color:var(--teal); }
  .activity-tag.edited{ background:#EDEDEC; color:var(--navy); }
  .activity-tag.deleted{ background:#FBEEEE; color:var(--danger); }
  .activity-tag.target{ background:#EFEBF9; color:#6B4FA0; }

  /* ---------- DRAWER ---------- */
  .overlay{
    position:fixed; inset:0;
    background:rgba(20,25,38,0.35);
    opacity:0;
    pointer-events:none;
    transition:opacity 0.18s ease;
    z-index:40;
  }
  .overlay.open{ opacity:1; pointer-events:auto; }
  .drawer{
    position:fixed;
    top:0; right:0; bottom:0;
    width:760px;
    max-width:94vw;
    background:var(--surface);
    transform:translateX(100%);
    transition:transform 0.22s cubic-bezier(.4,0,.2,1), width 0.2s ease;
    z-index:41;
    display:flex;
    flex-direction:column;
  }
  /* box-shadow lives here, not on the base .drawer rule: every drawer stays in the DOM
     even when "closed" (just pushed off-screen via transform), and a shadow's blur
     radius reaches beyond its casting element's own box -- with 12 closed drawers all
     casting the same shadow at once, they compounded into a visible streaky band bleeding
     back into the page at the viewport's edge, immediately left of the real scrollbar. */
  .drawer.open{ transform:translateX(0); box-shadow:-8px 0 30px rgba(28,35,51,0.15); }
  .drawer.wide-scan{ width:min(1160px, 96vw); }
  .drawer-main{
    display:flex;
    flex:1;
    min-height:0;
    overflow:hidden;
  }
  .scan-preview-pane{
    width:50%;
    flex-shrink:0;
    display:flex;
    flex-direction:column;
    background:var(--bg);
    border-right:1px solid var(--line);
  }
  .scan-preview-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:12px 16px;
    border-bottom:1px solid var(--line);
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.5px;
    color:var(--muted);
    flex-shrink:0;
    gap:12px;
  }
  .scan-preview-header-left{
    display:flex;
    align-items:center;
    gap:14px;
  }
  .scan-zoom-controls{
    display:flex;
    align-items:center;
    gap:6px;
  }
  .zoom-btn{
    width:22px; height:22px;
    border-radius:5px;
    border:1px solid var(--line-strong);
    background:var(--surface);
    color:var(--ink);
    font-size:14px;
    font-weight:700;
    line-height:1;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-transform:none;
    letter-spacing:0;
    padding:0;
  }
  .zoom-btn:hover{ border-color:var(--orange); color:var(--orange); }
  .zoom-btn:active{ transform:scale(0.95); }
  .zoom-btn.active{ background:var(--navy); border-color:var(--navy); color:#fff; }
  .zoom-label{
    font-family:'JetBrains Mono', monospace;
    font-size:11px;
    font-weight:600;
    color:var(--muted);
    min-width:38px;
    text-align:center;
    text-transform:none;
    letter-spacing:0;
  }
  .scan-preview-body.pan-mode{ cursor:grab; }
  .scan-preview-body.pan-mode.panning{ cursor:grabbing; }
  .scan-preview-body.pan-mode .textLayer{ pointer-events:none; }
  .scan-preview-body{
    flex:1;
    overflow:auto;
    background:#5c5c5c;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:16px;
    padding:16px;
  }
  .scan-preview-body .scan-preview-img-wrap{
    display:flex;
    align-items:flex-start;
    justify-content:center;
  }
  .scan-preview-body img{
    max-width:100%;
    height:auto;
    display:block;
    box-shadow:0 2px 10px rgba(0,0,0,0.2);
  }
  .pdf-page-wrap{
    position:relative;
    background:#fff;
    box-shadow:0 2px 10px rgba(0,0,0,0.25);
    flex-shrink:0;
  }
  .pdf-page-wrap canvas{ display:block; }
  .textLayer{
    position:absolute;
    left:0; top:0; right:0; bottom:0;
    overflow:hidden;
    line-height:1.0;
  }
  .textLayer > span{
    color:transparent;
    position:absolute;
    white-space:pre;
    cursor:text;
    transform-origin:0% 0%;
  }
  .textLayer ::selection{ background:rgba(31,122,92,0.35); }
  .scan-preview-loading, .scan-preview-error{
    color:#fff;
    padding:40px 20px;
    text-align:center;
    font-size:13px;
    line-height:1.6;
  }
  .drawer-header{
    padding:20px 22px;
    border-bottom:1px solid var(--line);
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  .drawer-title{ font-family:'Fraunces', serif; font-size:19px; font-weight:600; }
  .drawer-close{
    width:28px; height:28px;
    border-radius:6px;
    border:none;
    background:transparent;
    cursor:pointer;
    color:var(--muted);
    font-size:18px;
    display:flex; align-items:center; justify-content:center;
  }
  .drawer-close:hover{ background:var(--bg); color:var(--ink); }
  .drawer-body{
    padding:20px 22px;
    overflow-y:auto;
    flex:1;
    min-width:0;
  }
  .scan-notice{
    display:flex;
    align-items:flex-start;
    gap:8px;
    background:var(--teal-bg);
    border:1px solid var(--teal);
    border-radius:8px;
    padding:10px 12px;
    font-size:12px;
    color:var(--teal);
    font-weight:500;
    margin-bottom:16px;
  }
  .scan-notice-icon{ flex-shrink:0; }
  .scan-notice.duplicate-warning{
    background:#FDEBD2;
    border-color:#B5651D;
    color:#93500F;
  }
  .scan-loading-overlay{
    position:fixed;
    inset:0;
    background:rgba(20,25,38,0.45);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:70;
  }
  .scan-loading-overlay.open{ display:flex; }
  .scan-loading-box{
    background:var(--surface);
    border-radius:var(--radius);
    padding:28px 32px;
    text-align:center;
    box-shadow:0 20px 50px rgba(20,25,38,0.3);
  }
  .scan-spinner{
    width:32px; height:32px;
    border:3px solid var(--line);
    border-top-color:var(--navy);
    border-radius:50%;
    margin:0 auto 14px;
    animation:scan-spin 0.8s linear infinite;
  }
  @keyframes scan-spin{ to{ transform:rotate(360deg); } }
  .scan-loading-title{ font-family:'Fraunces', serif; font-size:15px; font-weight:600; margin-bottom:4px; }
  .scan-loading-sub{ font-size:12px; color:var(--muted); }
  .field{ margin-bottom:16px; }
  .field label{
    display:block;
    font-size:12px;
    font-weight:600;
    color:var(--muted);
    margin-bottom:6px;
    text-transform:uppercase;
    letter-spacing:0.4px;
  }
  /* For a .field-row where labels wrap to different numbers of lines (e.g. one plain
     "Unit Price *" next to a longer "Cost Price (optional — enables margin reporting)")
     — without this, each field's input starts right after its own label, so the inputs
     end up at different heights. Giving every label in the row the same min-height
     (tall enough for the longest one) makes every input in the row start level. */
  .label-align-2{ min-height:31px; }
  .label-align-3{ min-height:46px; }
  .field input, .field select{ width:100%; }
  .field textarea{
    width:100%;
    font-family:'Inter', sans-serif;
    font-size:13.5px;
    padding:9px 12px;
    border:1px solid var(--line-strong);
    border-radius:7px;
    background:var(--surface);
    color:var(--ink);
    outline:none;
    resize:vertical;
    min-height:64px;
  }
  .field textarea:focus{
    border-color:var(--navy);
    box-shadow:0 0 0 3px rgba(27,42,74,0.12);
  }
  .field-label-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:6px;
  }
  .field-label-row label{ margin-bottom:0; }
  .expand-textarea-btn{
    font-size:11px;
    font-weight:600;
    text-transform:none;
    letter-spacing:0;
    color:var(--orange);
    background:none;
    border:none;
    cursor:pointer;
    padding:0;
    white-space:nowrap;
  }
  .expand-textarea-btn:hover{ text-decoration:underline; }
  .checkbox-label{
    display:flex !important;
    align-items:center;
    gap:8px;
    cursor:pointer;
    font-weight:600 !important;
    font-size:13px !important;
    color:var(--ink) !important;
    text-transform:none !important;
    letter-spacing:0 !important;
  }
  .checkbox-label input[type="checkbox"]{
    width:16px; height:16px;
    accent-color:var(--navy);
    cursor:pointer;
    flex-shrink:0;
  }
  /* Fields side by side line up by their BOXES, not their labels: a label that wraps to two lines next to one that fits on one
     line used to push its input lower. Bottom-aligning the fields keeps every input level whatever its label does. */
  .field-row{ display:flex; gap:12px; align-items:flex-end; }
  .field-row > .field > .error-text:empty, .field-row > .field > .no-target-note:empty{ display:none; }
  /* a small note under one box (e.g. the converted cost) must not push that box up out of line with its neighbours */
  .field-row > .field{ position:relative; }
  .field-row > .field > .no-target-note{ position:absolute; left:0; right:0; top:100%; margin-top:2px !important; line-height:1.3; }
  .field-row .field{ flex:1; }
  .amount-input-wrap{ position:relative; }
  .amount-input-wrap .dollar{
    position:absolute; left:12px; top:50%; transform:translateY(-50%);
    color:var(--muted); font-size:13.5px; font-family:'JetBrains Mono',monospace;
  }
  .amount-input-wrap input{ padding-left:24px; font-family:'JetBrains Mono', monospace; }
  .attachment-chip{
    display:flex;
    align-items:center;
    gap:8px;
    background:var(--bg);
    border:1px solid var(--line-strong);
    border-radius:8px;
    padding:9px 12px;
    font-size:12.5px;
  }
  .attachment-chip .attachment-name{
    font-weight:600;
    flex:1;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .attachment-chip .attachment-size{ color:var(--muted); white-space:nowrap; }
  .btn-link{
    background:none;
    border:none;
    color:var(--orange);
    font-weight:600;
    font-size:12px;
    cursor:pointer;
    padding:0;
    white-space:nowrap;
  }
  .btn-link:hover{ text-decoration:underline; }
  .btn-link.danger{ color:var(--danger); }
  .field-hint{
    font-size:11.5px;
    color:var(--muted);
    margin:-10px 0 16px;
    font-style:italic;
  }
  .field-hint a{ color:var(--orange); font-weight:600; font-style:normal; }
  #legacyAttachmentBox{ margin-bottom:16px; }
  .drawer-footer{
    padding:16px 22px;
    border-top:1px solid var(--line);
    display:flex;
    flex-wrap:wrap;
    gap:10px;
  }
  .drawer-footer .btn{ flex:1 1 auto; justify-content:center; }
  .error-text{ color:var(--danger); font-size:12px; margin-top:4px; }
  .warning-text{ color:var(--rust); font-size:12px; margin-top:4px; display:none; }
  .warning-text.show{ display:block; }

  .target-indicator-row{
    display:flex;
    gap:8px;
    margin-top:6px;
    flex-wrap:wrap;
  }
  .target-badge{
    display:inline-flex;
    align-items:center;
    gap:5px;
    font-size:11px;
    font-weight:600;
    padding:3px 8px;
    border-radius:20px;
    background:#EEEDE6;
    color:var(--muted);
  }
  .target-badge .dot{ width:6px; height:6px; border-radius:50%; }
  .target-badge.green{ background:var(--teal-bg); color:var(--teal); }
  .target-badge.green .dot{ background:var(--teal); }
  .target-badge.amber{ background:#FBF1DE; color:#93670C; }
  .target-badge.amber .dot{ background:#C99A1E; }
  .target-badge.red{ background:#FBEEEE; color:var(--danger); }
  .target-badge.red .dot{ background:var(--danger); }
  .target-badge.none{ background:#EEEDE6; color:var(--muted); }
  .target-badge.none .dot{ background:#B7B4A8; }

  .targets-section{
    padding:14px 0 16px;
    border-bottom:1px solid var(--line);
    margin-bottom:6px;
  }
  .targets-section-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:12px;
  }
  .targets-section-title{
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.5px;
    color:var(--orange);
  }
  .edit-targets-link{
    font-family:'Inter', sans-serif;
    font-weight:600;
    font-size:12px;
    color:var(--ink);
    background:transparent;
    border:1px solid var(--line-strong);
    border-radius:7px;
    padding:6px 10px;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    gap:6px;
    white-space:nowrap;
    transition:transform 0.05s ease, opacity 0.15s ease;
  }
  .edit-targets-link:hover{ background:var(--bg); border-color:var(--navy); }
  .edit-targets-link:active{ transform:scale(0.98); }
  .progress-row{ margin-bottom:12px; }
  .progress-row:last-child{ margin-bottom:0; }
  .progress-row-top{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    margin-bottom:5px;
  }
  .progress-row-name{ font-size:12.5px; font-weight:700; }
  .progress-row-figures{ font-size:12px; color:var(--muted); font-family:'JetBrains Mono', monospace; }
  .progress-track{
    height:8px;
    background:#ECEAE1;
    border-radius:5px;
    overflow:hidden;
  }
  .progress-fill{
    height:100%;
    border-radius:5px;
    transition:width 0.25s ease;
  }
  .progress-fill.green{ background:var(--teal); }
  .progress-fill.amber{ background:#C99A1E; }
  .progress-fill.red{ background:var(--danger); }
  .progress-fill.none{ background:#CFCBBC; }
  .no-target-note{ font-size:12px; color:var(--muted); font-style:italic; }
  .cust-history-row{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:10px;
    padding:7px 0;
    border-bottom:1px solid var(--line);
    font-size:12.5px;
  }
  .cust-history-row:last-child{ border-bottom:none; }
  .cust-history-row .chname{ font-weight:600; }
  .cust-history-row .chdate{ color:var(--muted); font-family:'JetBrains Mono', monospace; font-size:11.5px; }
  .cust-history-row .chamount{ font-family:'JetBrains Mono', monospace; font-weight:600; white-space:nowrap; }
  .cust-summary-strip{
    display:flex; gap:16px; margin:4px 0 14px;
    padding:10px 12px; background:var(--bg); border-radius:7px;
  }
  .cust-summary-item{ font-size:11.5px; color:var(--muted); }
  .cust-summary-item b{ display:block; font-family:'JetBrains Mono', monospace; font-size:14px; color:var(--ink); font-weight:700; margin-top:2px; }
  .contact-edit-row{
    display:flex;
    align-items:center;
    gap:6px;
    margin-bottom:8px;
    background:var(--bg);
    padding:8px;
    border-radius:7px;
  }
  .contact-edit-row input[type="text"], .contact-edit-row input[type="email"]{
    flex:1; min-width:0; font-size:12.5px; padding:7px 8px;
  }
  .contact-edit-row .ce-primary{
    display:flex; align-items:center; gap:4px;
    font-size:11px; color:var(--muted); white-space:nowrap; flex-shrink:0;
  }
  .contact-edit-row .ce-primary input{ margin:0; }
  .contact-edit-row .ce-remove{ flex-shrink:0; }

  .target-edit-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding:8px 10px;
    background:var(--bg);
    border-radius:7px;
    margin-bottom:6px;
  }
  .target-edit-row .ter-name{ font-size:12.5px; font-weight:600; flex:1; }
  .target-edit-row .ter-amount{ font-family:'JetBrains Mono', monospace; font-size:12.5px; font-weight:600; }

  .product-picker-row{
    display:flex;
    align-items:center;
    gap:12px;
    padding:9px 10px;
    border-radius:7px;
    cursor:pointer;
    border-bottom:1px solid var(--line);
  }
  .product-picker-row:hover{ background:var(--bg); }
  .product-picker-row .ppr-main{ flex:1; min-width:0; }
  .product-picker-row .ppr-name{ font-size:13px; font-weight:600; }
  .product-picker-row .ppr-sub{ font-size:11.5px; color:var(--muted); margin-top:1px; }
  .product-picker-row .ppr-price{ font-family:'JetBrains Mono', monospace; font-size:12.5px; font-weight:600; white-space:nowrap; }
  .quote-item-card{
    border:1px solid var(--line);
    border-radius:8px;
    padding:12px;
    margin-bottom:10px;
    background:var(--bg);
  }
  .qic-row1{
    display:flex;
    gap:10px;
    align-items:flex-start;
    margin-bottom:10px;
  }
  .qic-label{
    display:block;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:0.4px;
    color:var(--muted);
    font-weight:700;
    margin-bottom:4px;
  }
  .qic-sku-wrap{ width:110px; flex-shrink:0; }
  .qic-desc-wrap{ flex:1; min-width:0; }
  .qic-row1 input, .qic-row1 textarea{
    width:100%;
    font-size:13px;
    padding:8px 10px;
    border:1px solid var(--line-strong);
    border-radius:6px;
    background:var(--surface);
    color:var(--ink);
    font-family:inherit;
    resize:vertical;
  }
  .qic-desc-wrap textarea{ min-height:52px; line-height:1.4; }
  .qic-remove-btn{
    flex-shrink:0;
    margin-top:19px;
    width:26px; height:26px;
    border-radius:6px;
    border:none;
    background:var(--surface);
    color:var(--muted);
    cursor:pointer;
    font-size:11px;
  }
  .qic-remove-btn:hover{ background:#FBEEEE; color:var(--danger); }
  .qic-row2{
    display:grid;
    grid-template-columns:1fr 1fr 1fr 1fr;
    gap:10px;
  }
  .qic-row2.five{ grid-template-columns:1fr 0.8fr 1fr 1fr 1fr; }
  .qic-warn{ font-size:11.5px; color:#9E2B2B; margin:4px 0 0; }
  .qic-row2 input{
    width:100%;
    font-size:13px;
    padding:7px 9px;
    border:1px solid var(--line-strong);
    border-radius:6px;
    background:var(--surface);
    color:var(--ink);
  }
  .qic-total-value{
    font-family:'JetBrains Mono', monospace;
    font-weight:700;
    font-size:14px;
    padding:7px 0;
  }
  .select-with-add{
    display:flex;
    gap:6px;
  }
  .select-with-add select, .select-with-add input{ flex:1; min-width:0; }
  .quick-add-btn{
    flex-shrink:0;
    width:36px;
    border:1px solid var(--line-strong);
    border-radius:7px;
    background:var(--surface);
    color:var(--ink);
    font-size:17px;
    font-weight:700;
    line-height:1;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .quick-add-btn:hover{ border-color:var(--orange); color:var(--orange); }
  .quick-add-btn:disabled{ opacity:0.4; cursor:not-allowed; }

  .tag-chip-row{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-bottom:8px;
  }
  .tag-chip-row:empty{ display:none; }
  .tag-chip{
    display:inline-flex;
    align-items:center;
    gap:5px;
    background:var(--orange-light);
    color:var(--orange);
    font-size:12px;
    font-weight:600;
    padding:4px 6px 4px 10px;
    border-radius:20px;
  }
  body.dark .tag-chip{ background:rgba(255,122,41,0.15); }
  .tag-chip button{
    background:none;
    border:none;
    color:inherit;
    cursor:pointer;
    font-size:14px;
    line-height:1;
    padding:0 2px;
    opacity:0.7;
  }
  .tag-chip button:hover{ opacity:1; }
  .leave-balance-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:7px 0;
    border-bottom:1px solid var(--line);
    font-size:13px;
  }
  .leave-balance-row:last-child{ border-bottom:none; }
  .leave-balance-value{ font-family:'JetBrains Mono', monospace; font-weight:700; }
  .leave-balance-value.negative{ color:var(--danger); }

  .org-chart-wrap{
    overflow-x:auto;
    padding:24px 12px 40px;
  }
  .org-tree, .org-tree ul{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    justify-content:center;
  }
  .org-tree ul{
    padding-top:24px;
    position:relative;
  }
  .org-tree li{
    display:flex;
    flex-direction:column;
    align-items:center;
    position:relative;
    padding:24px 12px 0;
  }
  .org-tree li::before, .org-tree li::after{
    content:'';
    position:absolute;
    top:0;
    right:50%;
    width:50%;
    height:24px;
    border-top:2px solid var(--line-strong);
  }
  .org-tree li::after{
    right:auto;
    left:50%;
    border-left:2px solid var(--line-strong);
  }
  .org-tree li:only-child{ padding-top:0; }
  .org-tree li:only-child::before, .org-tree li:only-child::after{ display:none; }
  .org-tree li:first-child::before, .org-tree li:last-child::after{ border:0 none; }
  .org-tree li:last-child::before{ border-right:2px solid var(--line-strong); border-radius:0 6px 0 0; }
  .org-tree li:first-child::after{ border-radius:6px 0 0 0; }
  .org-tree > li{ padding-top:0; }
  .org-tree > li::before, .org-tree > li::after{ display:none; }
  .org-tree ul::before{
    content:'';
    position:absolute;
    top:0;
    left:50%;
    width:0;
    height:24px;
    border-left:2px solid var(--line-strong);
  }
  .org-card{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:12px 16px;
    min-width:170px;
    max-width:210px;
    cursor:pointer;
    text-align:center;
    transition:border-color 0.12s ease;
  }
  .org-card:hover{ border-color:var(--orange); }
  .org-card-name{ font-weight:700; font-size:13.5px; color:var(--ink); }
  .org-card-title{ font-size:12px; color:var(--orange); font-weight:600; margin-top:2px; }
  .org-card-roles{ display:flex; flex-wrap:wrap; justify-content:center; gap:4px; margin-top:6px; }
  .org-card-roles .tag-chip{ font-size:10px; padding:2px 8px; }
  .org-card-resp{ font-size:11px; color:var(--muted); margin-top:6px; line-height:1.4; }

  .product-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
    gap:14px;
  }
  .product-card{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    overflow:hidden;
    cursor:pointer;
    display:flex;
    flex-direction:column;
    transition:border-color 0.12s ease, box-shadow 0.12s ease;
  }
  .product-card:hover{ border-color:var(--line-strong); box-shadow:var(--shadow); }
  .product-card.inactive{ opacity:0.55; }
  /* product families on the Products page: the "N variants" button on a base model, and the folded-out variants beneath it */
  .fam-toggle{ font:inherit; font-size:11px; padding:1px 8px; margin-left:4px; border:1px solid var(--line-strong); border-radius:999px; background:var(--surface); color:var(--ink-2, inherit); cursor:pointer; white-space:nowrap; }
  .fam-toggle:hover, .fam-toggle.open{ border-color:var(--accent, currentColor); }
  tr.fam-variant td{ background:var(--surface-2, rgba(128,128,128,0.07)); }
  tr.fam-variant td.cell-name{ padding-left:28px; }
  .product-card.fam-variant{ margin-left:16px; border-left:3px solid var(--line-strong); }
  .product-card-row{
    display:flex;
    gap:12px;
    padding:12px 12px 0;
  }
  .product-card-photo{
    width:76px;
    height:76px;
    border-radius:8px;
    background:var(--bg);
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    flex-shrink:0;
  }
  .product-card-photo.has-photo{ cursor:zoom-in; }
  .product-card-photo img{ width:100%; height:100%; object-fit:cover; }
  .product-card-photo svg{ width:24px; height:24px; color:var(--line-strong); }
  .product-card-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; padding-top:2px; }
  .product-card-name{ font-weight:700; font-size:13.5px; color:var(--ink); line-height:1.3; }
  .product-card-sku{ font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted); }
  .product-card-price{ font-family:'JetBrains Mono', monospace; font-weight:700; font-size:14px; color:var(--ink); margin-top:auto; }
  .product-card-body{ padding:10px 12px 4px; flex:1; display:flex; flex-direction:column; gap:5px; }
  .product-card-desc{
    font-size:12px;
    color:var(--muted);
    line-height:1.4;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .product-card-meta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-top:auto;
    padding-top:6px;
    gap:6px;
  }
  .product-card-supplier{ font-size:11px; color:var(--muted); }
  .product-card-actions{
    display:flex;
    justify-content:flex-end;
    gap:6px;
    padding:0 12px 10px;
  }

  .product-lightbox-overlay{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(20,20,20,0.85);
    z-index:500;
    align-items:center;
    justify-content:center;
    cursor:zoom-out;
  }
  .product-lightbox-overlay.open{ display:flex; }
  .product-lightbox-overlay img{
    max-width:88vw;
    max-height:88vh;
    object-fit:contain;
    border-radius:8px;
    box-shadow:0 20px 60px rgba(0,0,0,0.5);
  }
  .product-lightbox-close{
    position:absolute;
    top:20px;
    right:24px;
    width:38px;
    height:38px;
    border-radius:50%;
    border:none;
    background:rgba(255,255,255,0.15);
    color:#fff;
    font-size:20px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .product-lightbox-close:hover{ background:rgba(255,255,255,0.25); }

  .qic-row3{
    margin-top:10px;
  }
  .qic-row3 input{
    width:100%;
    font-size:12.5px;
    padding:6px 9px;
    border:1px solid var(--line-strong);
    border-radius:6px;
    background:var(--surface);
    color:var(--ink);
  }
  .quote-totals-box{
    background:var(--bg);
    border-radius:8px;
    padding:10px 14px;
    margin-top:8px;
    margin-bottom:16px;
  }
  .qtb-row{
    display:flex;
    justify-content:space-between;
    font-size:12.5px;
    padding:3px 0;
  }
  .qtb-row.total{
    font-weight:700;
    font-size:14px;
    border-top:1px solid var(--line-strong);
    margin-top:4px;
    padding-top:7px;
  }

  .group-section{
    background:var(--surface);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:18px 20px;
    margin-bottom:16px;
  }
  .group-section-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:12px;
  }
  .group-section-title{ font-family:'Fraunces', serif; font-size:16px; font-weight:600; }
  .group-list{ display:flex; flex-wrap:wrap; gap:8px; }
  .group-chip{
    display:flex;
    align-items:center;
    gap:8px;
    background:var(--bg);
    border:1px solid var(--line-strong);
    border-radius:20px;
    padding:6px 8px 6px 14px;
    font-size:12.5px;
    font-weight:600;
  }
  .group-chip .gc-members{ font-weight:500; color:var(--muted); font-size:11px; }
  .group-chip button{
    width:22px; height:22px;
    border-radius:50%;
    border:none;
    background:var(--surface);
    color:var(--muted);
    cursor:pointer;
    font-size:12px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .group-chip button:hover{ background:var(--line); color:var(--ink); }
  .member-checklist{
    max-height:200px;
    overflow-y:auto;
    border:1px solid var(--line-strong);
    border-radius:7px;
    padding:8px 10px;
  }
  .member-checklist .member-check-row{
    display:flex;
    align-items:center;
    gap:8px;
    padding:5px 0;
    font-size:13px;
    font-weight:400;
    text-transform:none;
    letter-spacing:normal;
    color:var(--ink);
    margin-bottom:0;
  }
  .member-checklist input[type="checkbox"]{
    width:auto;
    flex:0 0 auto;
  }
  .import-map-row{ margin-bottom:10px; }
  .import-map-row label{
    display:block; font-size:11.5px; font-weight:600; color:var(--muted);
    margin-bottom:4px; text-transform:uppercase; letter-spacing:0.3px;
  }
  .import-map-row select{ width:100%; }

  .modal-overlay{
    position:fixed; inset:0;
    background:rgba(20,25,38,0.4);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:50;
  }
  .modal-overlay.open{ display:flex; }
  #scanDecisionModalOverlay{ z-index:200; }
  .modal-box{
    background:var(--surface);
    border-radius:var(--radius);
    width:360px;
    max-width:90vw;
    max-height:88vh;
    box-shadow:0 20px 50px rgba(20,25,38,0.25);
    display:flex;
    flex-direction:column;
  }
  .modal-header{
    padding:18px 20px 4px;
    flex-shrink:0;
  }
  .modal-title{ font-family:'Fraunces', serif; font-size:18px; font-weight:600; }
  .modal-sub{ font-size:12.5px; color:var(--muted); margin-top:2px; }
  .modal-body{ padding:14px 20px 4px; overflow-y:auto; flex:1; min-height:0; }
  .modal-footer{
    padding:16px 20px 20px;
    display:flex;
    gap:10px;
    flex-shrink:0;
  }
  .modal-footer .btn{ flex:1; justify-content:center; }
  /* The message pop-up. The line that opens this rule (the ".toast{" selector) was lost when the app was first split into files,
     so for a long time every message sat unstyled just below the bottom edge of the window, where nobody could see it. */
  .toast{
    position:fixed;
    bottom:22px; left:50%;
    transform:translateX(-50%) translateY(10px);
    background:var(--ink);
    color:#fff;
    padding:10px 18px;
    border-radius:8px;
    font-size:13px;
    font-weight:500;
    opacity:0;
    pointer-events:none;
    transition:all 0.2s ease;
    z-index:60;
  }
  .toast.show{ opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto; cursor:pointer; }
  .toast{ z-index:1000; max-width:min(640px, 92vw); white-space:pre-line; line-height:1.4; box-shadow:0 6px 24px rgba(0,0,0,0.28); }
  .toast.error{ background:#9E2B2B; padding:12px 20px; font-size:13.5px; border:1px solid rgba(255,255,255,0.25); }

  .footnote{
    padding:10px 28px 18px;
    font-size:11.5px;
    color:var(--muted);
    display:flex;
    align-items:center;
    gap:6px;
  }
  .footnote .dot{ width:6px; height:6px; border-radius:50%; background:var(--teal); }

  .trip-marker{
    display:flex; align-items:center; justify-content:center;
    border-radius:50%;
    font-weight:700;
    color:#fff;
    box-shadow:0 1px 3px rgba(0,0,0,0.35);
    border:2px solid #fff;
  }
  .trip-marker-origin{ width:28px; height:28px; background:#241F1A; font-size:14px; }
  .trip-marker-stop{ width:26px; height:26px; background:var(--orange, #DB6B1B); font-size:12px; }
  .trip-marker-dim{ width:16px; height:16px; background:#9A9186; font-size:10px; border-width:1px; }

  .mb-resize-handle{
    flex:0 0 14px;
    cursor:col-resize;
    position:relative;
    align-self:stretch;
  }
  .mb-resize-handle::after{
    content:'';
    position:absolute;
    left:6px;
    top:0;
    bottom:0;
    width:2px;
    background:var(--line-strong);
    border-radius:2px;
  }
  .mb-resize-handle:hover::after, .mb-resize-handle.dragging::after{ background:var(--orange); }

  .mail-body{ font-size:13.5px; line-height:1.5; overflow-wrap:anywhere; }
  .mail-body img{ max-width:100%; height:auto; }
  .mail-body table{ max-width:100%; }
  /* tables that are CONTENT (a received email, the compose window, the signature and template editors) must not pick up the look of the app's own tables */
  .mc-editor table, .mail-body table{ background:transparent; border-radius:0; overflow:visible; box-shadow:none; margin-top:0; }
  .mc-editor table:not([width]), .mail-body table:not([width]){ width:auto; }
  .mc-editor tbody tr, .mail-body tbody tr, .mc-editor thead tr, .mail-body thead tr{ border-bottom:0; position:static; }
  .mc-editor tbody tr:hover, .mail-body tbody tr:hover{ background:transparent; }
  .mc-editor tbody td, .mail-body tbody td{ padding:1px; font-size:inherit; vertical-align:middle; }
  .mc-editor thead th, .mail-body thead th{ text-transform:none; letter-spacing:normal; font-size:inherit; color:inherit; background:transparent; cursor:text; white-space:normal; padding:1px; user-select:text; }

  .mail-row .mail-row-delete-btn{ opacity:0; transition:opacity .12s ease; }
  .mail-row:hover .mail-row-delete-btn{ opacity:1; }
  /* Compact, fixed-height rows -- long subjects/snippets used to wrap onto extra
     lines, making some rows much taller than others and wasting space where the
     date/delete column stayed pinned to the top of that taller row. Truncating
     every line to one row keeps every message the same short height, so far more
     fit on screen at once (closer to a real mail client). */
  .mail-row{ padding:5px 0 !important; align-items:center !important; }
  .mail-row .home-item-title, .mail-row .home-item-sub{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .mail-row .home-item-title{ font-size:12.5px; }
  .mail-row .home-item-sub{ font-size:11px; }

  /* ---------- My Mailbox, Outlook-style: one command bar, flat folder list, avatar rows, a reading pane with its actions on top ---------- */
  .mb-outlook{ --mb-blue:#0f6cbd; --mb-blue-soft:#e8f1fa; --mb-blue-line:#b9d3ee; }
  body.dark .mb-outlook{ --mb-blue:#4ba0e8; --mb-blue-soft:rgba(75,160,232,0.16); --mb-blue-line:rgba(75,160,232,0.45); }
  .mb-commandbar{ display:flex; align-items:center; gap:4px; flex-wrap:wrap; flex:0 0 auto; padding:4px 0 8px; }
  .mb-commandbar .btn-ghost{ border-color:transparent; background:transparent; }
  .mb-commandbar .btn-ghost:hover{ background:var(--mb-blue-soft); }
  .mb-newmail{ background:var(--mb-blue) !important; border-color:var(--mb-blue) !important; color:#fff !important; padding:7px 16px !important; font-weight:600; }
  .mb-newmail:hover{ filter:brightness(1.08); }
  .mb-cmd-sep{ width:1px; align-self:stretch; background:var(--line-strong); margin:4px 6px; }
  .mb-search{ display:flex; align-items:center; gap:4px; flex:1 1 260px; max-width:560px; margin-left:auto; }
  .mb-search input{ width:100%; border-radius:18px; padding:7px 14px; border:1px solid var(--line-strong); background:var(--surface); }
  .mb-search input:focus{ border-color:var(--mb-blue); outline:2px solid var(--mb-blue-soft); }
  .mb-more{ position:relative; }
  .mb-more > summary{ list-style:none; cursor:pointer; }
  .mb-more > summary::-webkit-details-marker{ display:none; }
  .mb-more-menu{ position:absolute; right:0; top:calc(100% + 4px); z-index:30; min-width:200px; display:flex; flex-direction:column; align-items:stretch; padding:6px; background:var(--surface); border:1px solid var(--line-strong); border-radius:8px; box-shadow:var(--shadow); }
  .mb-more-menu .btn{ justify-content:flex-start; text-align:left; border-color:transparent; }
  .mb-outlook .mb-status{ margin:0 0 8px; font-size:12px; }

  .mb-folders-inner{ padding:2px 0; }
  .mb-pane-title{ font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--muted); padding:4px 10px 6px; }
  .mb-folder{ border-radius:6px !important; padding:7px 10px !important; border-bottom:none !important; position:relative; }
  .mb-folder:hover{ background:var(--mb-blue-soft); }
  .mb-badge{ display:inline-block; margin-left:6px; min-width:18px; padding:0 6px; border-radius:9px; background:var(--mb-blue); color:#fff; font-size:11px; font-weight:700; line-height:17px; text-align:center; vertical-align:1px; }
  .mb-folder:hover .home-item-title{ text-decoration:none; }
  .mb-folder.sel{ background:var(--mb-blue-soft); }
  .mb-folder.sel::before{ content:''; position:absolute; left:0; top:7px; bottom:7px; width:3px; border-radius:2px; background:var(--mb-blue); }
  .mb-folder.sel .home-item-title{ font-weight:700; }

  .mb-list-card .mail-row{ padding:8px 10px 8px 8px !important; gap:8px !important; align-items:flex-start !important; border-bottom:1px solid var(--line); position:relative; }
  .mb-list-card .mail-row:hover{ background:var(--mb-blue-soft); }
  .mb-list-card .mail-row:hover .home-item-title{ text-decoration:none; }
  .mb-list-card .mail-row[style*="surface-2"]{ background:var(--mb-blue-soft) !important; box-shadow:inset 3px 0 0 var(--mb-blue); }
  .mb-list-card .mail-row input[type=checkbox]{ margin-top:11px; opacity:.35; }
  .mb-list-card .mail-row:hover input[type=checkbox], .mb-list-card .mail-row input[type=checkbox]:checked{ opacity:1; }
  .mb-list-card .mail-row > span[title="Unread"]{ margin-top:14px; align-self:flex-start !important; }
  .mb-list-card .mail-row .home-item-title{ font-size:13.5px; }
  .mb-list-card .mail-row .home-item-sub{ font-size:12px; color:var(--muted); margin-top:2px; }
  .mb-list-card .mail-row .mail-row-date{ font-size:11.5px; margin-top:2px; }
  .mb-list-card .mail-row .mail-row-delete-btn{ position:absolute; right:6px; bottom:6px; }
  .mb-list-card .lb-card-title, .mb-folders .lb-card-title{ font-family:inherit; font-weight:700; font-size:13px !important; }
  .mb-list-card > div:first-child{ padding:8px 10px 6px !important; border-bottom:1px solid var(--line); }
  /* ---------- Drawer tabs (1710-drawer-tabs.js): the big side panels grouped into tabs under the header ---------- */
  .drawer-tabs{ display:flex; gap:2px; padding:0 16px; border-bottom:1px solid var(--line); overflow-x:auto; flex:0 0 auto; background:var(--surface); scrollbar-width:thin; }
  .drawer-tab{ position:relative; border:none; background:none; padding:10px 12px 9px; font:inherit; font-size:13px; font-weight:600; color:var(--muted); border-bottom:2px solid transparent; cursor:pointer; white-space:nowrap; }
  .drawer-tab:hover{ color:var(--ink); }
  .drawer-tab.on{ color:var(--ink); border-bottom-color:var(--orange); }
  .drawer-tab .dtab-dot{ display:none; position:absolute; top:7px; right:3px; width:7px; height:7px; border-radius:50%; background:var(--danger,#B13B3B); }
  .drawer-tab.has-error .dtab-dot{ display:block; }
  .dtab-pane[hidden]{ display:none !important; }

  .mb-avatar{ flex:none; width:34px; height:34px; border-radius:50%; color:#fff; font-size:12px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; letter-spacing:.3px; }


  .cal-grid-headers{
    display:grid; grid-template-columns:repeat(7,1fr);
    font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.4px;
    color:var(--muted); padding:0 2px 6px;
  }
  .cal-grid{
    display:grid; grid-template-columns:repeat(7,1fr); grid-auto-rows:1fr;
    border:1px solid var(--line-color,#e3ded4); border-radius:8px; overflow:hidden;
  }
  .cal-day-cell{
    min-height:96px; min-width:0; padding:5px; border-right:1px solid var(--line-color,#e3ded4); border-bottom:1px solid var(--line-color,#e3ded4);
    cursor:pointer; transition:background .1s ease; display:flex; flex-direction:column; gap:3px; overflow:hidden;
  }
  .cal-day-cell:hover{ background:var(--surface-2,#f3eee6); }
  .cal-day-cell:nth-child(7n){ border-right:none; }
  .cal-day-num{ font-size:12px; font-weight:600; color:var(--ink); }
  .cal-day-outside{ background:rgba(0,0,0,0.02); }
  .cal-day-outside .cal-day-num{ color:var(--muted); }
  body.dark .cal-day-outside{ background:rgba(255,255,255,0.03); }
  .cal-day-today{ background:var(--orange-light, #FCE9D8); }
  .cal-day-today .cal-day-num{ color:var(--orange); }
  .cal-day-events{ display:flex; flex-direction:column; gap:2px; overflow:hidden; min-width:0; }
  .cal-event-pill{
    font-size:10.5px; color:#fff; padding:1px 5px; border-radius:4px; white-space:nowrap;
    overflow:hidden; text-overflow:ellipsis; min-width:0;
  }
  .cal-event-more{ font-size:10.5px; color:var(--muted); padding:0 5px; }
  .cal-event-pill[draggable="true"]{ cursor:grab; }
  .cal-event-pill[draggable="true"]:active{ cursor:grabbing; }
  .cal-day-drop-target{ background:var(--orange-light, #FCE9D8) !important; outline:2px dashed var(--orange, #DB6B1B); outline-offset:-2px; }
  .nav-drop-target{ background:var(--orange-light, #FCE9D8) !important; outline:2px dashed var(--orange, #DB6B1B); outline-offset:-2px; color:var(--ink) !important; }
  /* Setting body.style.cursor alone doesn't show while the mouse is still over the
     nav button being dropped onto -- that button's own cursor:pointer (more specific
     than an inherited body cursor) wins for as long as the pointer sits there. Force
     it on every element, including whatever's under the cursor, until the drop
     handler finishes. */
  body.drag-busy, body.drag-busy *{ cursor:wait !important; }
  tr[data-drag-contact], tr[data-drag-account], tr[data-drag-lead], tr[data-drag-owner], tr[data-drag-rfq], tr[data-drag-quotation]{ cursor:grab; }
  tr[data-drag-contact]:active, tr[data-drag-account]:active, tr[data-drag-lead]:active, tr[data-drag-owner]:active, tr[data-drag-rfq]:active, tr[data-drag-quotation]:active{ cursor:grabbing; }
  @media (max-width:640px){
    .cal-day-cell{ min-height:60px; }
    .cal-grid-headers{ font-size:9px; }
  }

  @media (max-width:800px){
    .app-shell{ flex-direction:column; }
    .sidebar-collapse-btn{ display:none; }
    .sidebar{ width:100%; flex-direction:row; flex-wrap:wrap; align-items:center; padding:0 10px; }
    .sidebar-brand{ padding:12px 54px 12px 10px; flex-shrink:0; }
    .bell-btn{ top:50%; transform:translateY(-50%); right:10px; }
    .wordmark-sub{ display:none; }
    /* the menu gets its own full-width row under the logo / search / timer (squeezed beside them it was 6px wide on a phone) and scrolls sideways */
    .sidebar-nav{ display:flex; flex-direction:row; overflow-x:auto; padding:8px 4px; flex:1 1 100%; order:5; min-width:0; -webkit-overflow-scrolling:touch; }
    .nav-item{ white-space:nowrap; margin-bottom:0; margin-right:2px; }
    .nav-group-label{ display:none; }
    .nav-fav-empty{ display:none; }          /* "right-click any menu item": there is no right-click on a phone */
    .nav-group, .nav-group-items{ display:contents; }
    .nav-subheading{ display:none; }
    .nav-group-items[hidden]{ display:contents; }
    .sidebar-footer{ display:none; }
    /* phone menu: closed by default behind a Menu button; open = the whole grouped menu as a vertical list, plus log out / security / dark mode */
    .menu-btn{ display:flex; align-items:center; gap:6px; position:absolute; top:50%; transform:translateY(-50%); right:54px; height:34px; padding:0 10px; border-radius:8px; border:1px solid rgba(255,255,255,0.15); background:rgba(255,255,255,0.08); color:#fff; font-size:13px; cursor:pointer; }
    .sidebar-brand{ padding-right:150px; }
    .global-search-wrap{ flex:1 1 55%; padding:0 6px 10px 10px; min-width:0; }
    .timer-widget{ flex:0 0 auto; padding:0 10px 10px 0; }
    .sidebar-nav{ display:none; }
    body.nav-open .sidebar-nav{ display:block; overflow-y:auto; overflow-x:hidden; max-height:62vh; padding:4px 6px 8px; }
    body.nav-open .nav-item{ display:flex; width:100%; margin:0; padding:11px 12px; white-space:normal; }
    body.nav-open .nav-group{ display:block; }
    body.nav-open .nav-group-items{ display:block; }
    body.nav-open .nav-group-items[hidden]{ display:none; }
    body.nav-open .nav-group-label{ display:flex; padding:10px 12px 4px; }
    body.nav-open .nav-subheading{ display:block; }
    body.nav-open .sidebar-footer{ display:block; flex:1 1 100%; order:6; padding:8px 10px 12px; }
    body.nav-open .sidebar-footer-row{ flex-wrap:wrap; }
  }
  /* phone: pages built for a wide screen */
  @media (max-width:800px){
    /* dialogs: use the width of the phone and the VISIBLE height (125dvh at zoom 0.8, like the drawers) so the bottom is not under the address bar; the compose window is the whole screen */
    .modal-overlay{ height:125dvh; bottom:auto; }
    .modal-box{ max-width:97%; max-height:94%; }
    .modal-body{ padding-left:14px; padding-right:14px; }
    .modal-box.mail-compose-box{ width:100%; max-width:100%; height:100%; max-height:100%; border-radius:0; }
    .modal-box.mail-compose-box .mc-editor{ min-height:180px; max-height:none; }
    /* Projects board: one wide stage at a time that snaps into place as you swipe (touch scrolls the board; cards are dragged on a computer) */
    .proj-board{ scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
    .proj-column{ flex:0 0 86%; min-width:0; max-width:none; scroll-snap-align:start; }
    /* money pages and Part Builder: the controls stack full width and the tables use less room per cell, so they fit instead of scrolling sideways */
    .money-controls{ flex-direction:column; align-items:stretch; gap:8px; }
    .money-controls label{ display:flex; flex-direction:column; gap:4px; width:100%; }
    .money-controls select, .money-controls input:not([type=checkbox]):not([type=number]){ width:100%; max-width:100%; }
    .money-table th, .money-table td{ padding:6px 5px; font-size:12px; }
    .money-table th{ white-space:normal; }
    .money-table td{ overflow-wrap:anywhere; }
    .pb-col{ padding:12px; }
    .stat-strip, .sub-stats-row{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; padding-left:12px; padding-right:12px; }
    .stat-value{ font-size:20px; }
    /* My Mailbox: folders, message list and the open message stack instead of sitting side by side; the toolbar wraps */
    .mb-page-wrap .field-row{ flex-wrap:wrap; }
    .table-container-fill .mb-page-wrap{ overflow-y:auto; display:block; }
    #mb_inbox_wrap{ display:block !important; height:auto !important; }
    #mb_inbox_wrap > div:first-child{ width:100% !important; margin:0 0 10px !important; height:auto !important; flex:none !important; }
    #mb_thread_col{ width:100% !important; height:55vh !important; margin-bottom:10px; }
    #mb_resize_handle{ display:none !important; }
    #mb_inbox_wrap > div:last-child{ height:auto !important; overflow:visible !important; }
    .drawer{ width:125vw; max-width:125vw; height:125vh; height:125dvh; bottom:auto; }   /* 125dvh = the VISIBLE screen height (zoom 0.8): a drawer sized to the full height ends under the phone's address bar and its last fields and Save button cannot be reached */
    .drawer-main, .drawer-body{ overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
    .drawer-footer{ padding-bottom:calc(16px + env(safe-area-inset-bottom, 0px)); }
  }
  @media (min-width:801px){ .menu-btn{ display:none; } }
  @media (max-width:640px){
    .stat-strip{ grid-template-columns:repeat(2,1fr); padding:14px 16px 0; }
    .topbar{ padding:14px 16px; grid-template-columns:1fr; }
    .assistant-btn{ grid-column:1; grid-row:auto; justify-self:start; }
    .topbar-actions{ grid-column:1; justify-content:flex-start; }
    .content-toolbar{ padding:12px 16px 0; }
    .table-wrap{ padding:0 16px 16px; }
    .footnote{ padding:8px 16px 14px; }
    table thead:where(:not(.mc-editor *, .mail-body *)){ display:none; }
    table:where(:not(.mc-editor *, .mail-body *)), tbody:where(:not(.mc-editor *, .mail-body *)), tr:where(:not(.mc-editor *, .mail-body *)), td:where(:not(.mc-editor *, .mail-body *)){ display:block; width:100%; }
    /* each value shows its column heading (see labelTableCellsForPhone); a cell with nothing in it is hidden */
    td[data-label]::before{ content:attr(data-label); display:inline-block; min-width:92px; margin-right:8px; font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); vertical-align:baseline; }
    td[data-empty]{ display:none; }
    tbody tr:where(:not(.mc-editor *, .mail-body *)){ padding:12px 0 12px 14px; }
    tbody td:where(:not(.mc-editor *, .mail-body *)){ padding:3px 14px 3px 4px; }
    .drawer.wide-scan{ width:100vw; max-width:100vw; }
    .drawer-main{ flex-direction:column; overflow-y:auto; }
    .scan-preview-pane{ width:100%; height:280px; border-right:none; border-bottom:1px solid var(--line); flex-shrink:0; }
    .drawer-main .drawer-body{ overflow-y:visible; }   /* only where the wrapper scrolls instead; other drawers (account, contact, ...) have no .drawer-main and their body must scroll itself */
  }

  /* ---------- Time tracking ---------- */
  .time-toolbar{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
  .time-toolbar select{ margin-left:auto; min-width:200px; }
  .time-week-label{ font-weight:600; min-width:190px; text-align:center; }
  #timeTilesWrap .sub-stats-row{ grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); }
  .time-section-title{ font-size:12px; text-transform:uppercase; letter-spacing:0.6px; color:var(--muted); font-weight:600; margin:22px 0 8px; }
  .time-grid td, .time-grid th{ vertical-align:middle; }
  .time-grid .time-day{ text-align:center; width:84px; }
  .time-grid .time-day.weekend{ background:rgba(0,0,0,0.025); }
  .time-grid .time-day.today{ background:var(--orange-light); }
  .time-day-date{ font-size:11px; font-weight:400; color:var(--muted); }
  .time-row-label{ min-width:220px; }
  .time-total{ text-align:center; font-weight:600; white-space:nowrap; }
  .time-grid tfoot td{ border-top:2px solid var(--line-strong); }
  .time-cell{ width:62px; text-align:center; padding:6px 4px; border:1px solid var(--line); border-radius:6px; background:var(--surface); color:var(--ink); font:inherit; }
  .time-cell:focus{ outline:2px solid var(--orange); outline-offset:-1px; }
  .time-cell.ro{ background:transparent; border-color:transparent; cursor:default; }
  .time-addrow{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:12px 0 4px; padding:10px 12px; background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow); }
  .time-addrow select{ max-width:190px; }
  .time-addrow-label{ font-size:12px; color:var(--muted); font-weight:600; }
  .time-addrow-bill{ display:flex; align-items:center; gap:5px; font-size:12.5px; white-space:nowrap; }
  @media (max-width:760px){
    .time-toolbar select{ margin-left:0; width:100%; }
    .time-grid .time-day{ width:auto; }
    .time-cell{ width:48px; }
  }

  /* ---------- Time tracking: filters, sidebar timer ---------- */
  .time-filterbar{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
  .time-filterbar select, .time-filterbar input[type="search"], .time-filterbar input[type="date"]{ max-width:200px; }
  .time-filterbar input[type="search"]{ min-width:180px; }
  .time-cell.running{ border-color:var(--orange); }
  .time-cell.running::placeholder{ color:var(--orange); }

  .timer-widget{ padding:0 16px 14px; }
  .timer-start-btn{
    width:100%; padding:8px 12px; border-radius:7px; cursor:pointer;
    border:1px solid rgba(255,255,255,0.15); background:rgba(255,255,255,0.08);
    color:#fff; font-size:12.5px; font-weight:600; text-align:left;
  }
  .timer-start-btn:hover{ background:rgba(255,255,255,0.14); border-color:var(--orange); }
  .timer-running{
    display:flex; align-items:center; gap:10px; padding:7px 8px 7px 12px; border-radius:7px;
    background:rgba(232,89,12,0.18); border:1px solid var(--orange);
  }
  .timer-dot{ width:8px; height:8px; border-radius:50%; background:var(--orange); flex-shrink:0; animation:timerPulse 1.4s ease-in-out infinite; }
  @keyframes timerPulse{ 0%,100%{ opacity:1; } 50%{ opacity:0.25; } }
  .timer-info{ flex:1; min-width:0; cursor:pointer; }
  .timer-clock{ font-variant-numeric:tabular-nums; font-weight:700; font-size:15px; line-height:1.2; }
  .timer-target{ font-size:11px; color:rgba(255,255,255,0.7); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .timer-stop-btn{
    width:28px; height:28px; border-radius:6px; border:none; cursor:pointer; flex-shrink:0;
    background:var(--orange); color:#fff; font-size:12px; line-height:1;
  }
  .timer-stop-btn:hover{ filter:brightness(1.1); }

  .timer-panel{
    position:fixed; left:12px; top:118px; width:300px; max-height:calc(100vh - 140px); overflow-y:auto; z-index:400;
    background:var(--surface); color:var(--ink); border-radius:var(--radius); box-shadow:0 12px 40px rgba(0,0,0,0.28);
    padding:14px 16px; border:1px solid var(--line);
  }
  .timer-panel-title{ font-weight:700; margin-bottom:10px; }
  .timer-panel .field{ margin-bottom:10px; }
  .timer-panel select, .timer-panel input[type="text"]{ width:100%; }
  .timer-panel-actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:6px; }
  @media (max-width:760px){
    .timer-panel{ left:8px; right:8px; width:auto; top:60px; }
  }

  /* ---------- Time tracking: pause, rates, project/customer panel ---------- */
  .timer-pause-btn{
    width:28px; height:28px; border-radius:6px; border:1px solid rgba(255,255,255,0.35); cursor:pointer; flex-shrink:0;
    background:transparent; color:#fff; font-size:12px; line-height:1;
  }
  .timer-pause-btn:hover{ background:rgba(255,255,255,0.15); }
  .timer-running.paused{ background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.35); }
  .timer-running.paused .timer-dot{ animation:none; background:rgba(255,255,255,0.5); }
  .timer-running.paused .timer-clock{ color:rgba(255,255,255,0.75); }
  .time-rate-add{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
  .time-rate-add select{ max-width:200px; }
  .time-rate-add input[type="number"]{ width:110px; }
  .time-panel-stats{ display:flex; gap:22px; flex-wrap:wrap; margin-bottom:8px; }
  .time-panel-stats div{ display:flex; flex-direction:column; }
  .time-panel-stats b{ font-size:16px; }
  .time-panel-stats span{ font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:0.5px; }
  .time-bar{ height:8px; background:var(--line); border-radius:4px; overflow:hidden; }
  .time-bar-fill{ height:100%; background:var(--teal); }
  .time-bar-fill.warn{ background:var(--orange); }
  .time-bar-fill.over{ background:var(--danger); }
  .time-panel-row{ display:flex; gap:10px; font-size:12.5px; padding:4px 0; border-bottom:1px solid var(--line); }
  .time-panel-row .time-panel-desc{ color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }

  /* ---------- Time tracking: customer report dialog ---------- */
  .time-report-checks{ display:grid; grid-template-columns:1fr 1fr; gap:8px 16px; margin:4px 0 14px; }
  .time-report-checks label{ display:flex; align-items:center; gap:6px; font-size:12.5px; cursor:pointer; }
  .time-report-preview{ padding:10px 12px; border-radius:8px; background:var(--bg); font-size:13px; }
  @media (max-width:760px){ .time-report-checks{ grid-template-columns:1fr; } }

  /* ---------- Time tracking: billing selection bar ---------- */
  .time-selbar{ display:flex; align-items:center; flex-wrap:wrap; gap:12px; padding:10px 12px; margin-bottom:10px; background:var(--orange-light); border-radius:8px; }
  .time-selbar > span:first-child{ margin-right:auto; }

  /* ---------- Time tracking: period lock ---------- */
  .time-lock-chip{ font-size:12px; font-weight:600; padding:4px 10px; border-radius:20px; background:var(--rust-bg); color:var(--rust); white-space:nowrap; }

  /* ---------- Email: send-failure message in the compose window ---------- */
  .mail-send-error{ display:flex; gap:10px; align-items:flex-start; padding:10px 12px; margin-bottom:12px; border-radius:8px; background:var(--rust-bg); border:1px solid var(--danger); font-size:13px; }
  .mail-send-error b{ display:block; color:var(--danger); }
  .mail-send-error-icon{ color:var(--danger); font-size:16px; line-height:1.2; }
  #mc_error_detail{ white-space:pre-line; margin-top:3px; color:var(--ink); }

  /* ---------- Tasks & Projects: one task model (task drawer, project page, My Tasks) ---------- */
  .task-drawer .td-topline{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
  .td-done{ display:flex; align-items:center; gap:6px; font-weight:600; cursor:pointer; }
  .td-title-input{ width:100%; font-size:18px; font-weight:600; padding:8px 10px; }
  .td-subtask-add{ display:flex; gap:8px; margin-top:8px; }
  .td-subtask-add input{ flex:1; }
  .td-subtask-row{ display:flex; align-items:center; gap:8px; padding:6px 0; border-bottom:1px solid var(--line); cursor:pointer; }
  .td-subtask-row .td-sub-title{ flex:1; }
  .td-subtask-row.done .td-sub-title{ text-decoration:line-through; color:var(--muted); }
  .td-subtask-row .td-sub-meta{ font-size:11.5px; color:var(--muted); }

  .proj-swatches{ display:flex; gap:8px; flex-wrap:wrap; }
  .proj-swatch{ width:26px; height:26px; border-radius:50%; border:2px solid transparent; cursor:pointer; padding:0; }
  .proj-swatch.selected{ border-color:var(--ink); box-shadow:0 0 0 2px var(--surface) inset; }
  .proj-header{ display:flex; align-items:flex-start; gap:12px; flex-wrap:wrap; margin-bottom:6px; }
  .proj-header-name{ font-size:20px; font-weight:700; display:flex; align-items:center; gap:10px; }
  .proj-dot{ width:12px; height:12px; border-radius:50%; display:inline-block; flex-shrink:0; }
  .proj-header-meta{ display:flex; gap:14px; flex-wrap:wrap; font-size:12.5px; color:var(--muted); align-items:center; margin-bottom:10px; }
  .proj-progress{ height:8px; background:var(--line); border-radius:4px; overflow:hidden; min-width:120px; }
  .proj-progress-fill{ height:100%; background:var(--teal); }
  .proj-tabs{ display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:14px; }
  .proj-tab{ background:none; border:none; padding:8px 14px; cursor:pointer; font:inherit; font-weight:600; color:var(--muted); border-bottom:2px solid transparent; margin-bottom:-1px; }
  .proj-tab:hover{ color:var(--ink); }
  .proj-tab.active{ color:var(--orange); border-bottom-color:var(--orange); }
  .project-card-item .proj-progress{ margin:10px 0 6px; }
  .proj-card-check{ display:inline-flex; width:16px; height:16px; border-radius:50%; border:1.5px solid var(--line-strong); margin-right:6px; vertical-align:-3px; cursor:pointer; align-items:center; justify-content:center; font-size:10px; color:#fff; flex-shrink:0; }
  .proj-card-check:hover{ border-color:var(--teal); }
  .proj-card.is-done .proj-card-check{ background:var(--teal); border-color:var(--teal); }

  .plist-stage{ margin-bottom:18px; }
  .plist-stage-head{ display:flex; align-items:center; gap:8px; font-weight:700; margin-bottom:4px; }
  .plist-row{ display:flex; align-items:center; gap:10px; padding:7px 8px; border-bottom:1px solid var(--line); cursor:pointer; }
  .plist-row:hover{ background:rgba(0,0,0,0.03); }
  .plist-row.sub{ padding-left:34px; }
  .plist-row .plist-title{ flex:1; min-width:0; }
  .plist-row.done .plist-title{ text-decoration:line-through; color:var(--muted); }
  .plist-meta{ display:flex; gap:12px; align-items:center; font-size:12.5px; color:var(--muted); flex-shrink:0; }
  .plist-add{ background:none; border:none; color:var(--muted); cursor:pointer; padding:7px 8px; font:inherit; }
  .plist-add:hover{ color:var(--orange); }

  .pcal-nav{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
  .pcal-title{ font-weight:700; min-width:150px; text-align:center; }
  .pcal{ display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); border-top:1px solid var(--line); border-left:1px solid var(--line); background:var(--surface); }
  .pcal-dow{ padding:6px 8px; font-size:11px; font-weight:700; text-transform:uppercase; color:var(--muted); border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg); }
  .pcal-cell{ min-height:96px; padding:4px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); cursor:pointer; overflow:hidden; }
  .pcal-cell.other{ background:rgba(0,0,0,0.025); }
  .pcal-cell.today .pcal-daynum{ background:var(--orange); color:#fff; border-radius:50%; }
  .pcal-daynum{ display:inline-flex; width:22px; height:22px; align-items:center; justify-content:center; font-size:11.5px; font-weight:600; }
  .pcal-task{ display:block; font-size:11.5px; padding:2px 5px; margin-top:2px; border-radius:4px; background:var(--orange-light); color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border-left:3px solid var(--orange); }
  .pcal-task.done{ opacity:0.55; text-decoration:line-through; }
  .pcal-more{ font-size:11px; color:var(--muted); padding:2px 5px; }

  .mytasks-add{ display:flex; gap:8px; align-items:center; margin-bottom:14px; flex-wrap:wrap; }
  .mytasks-add input[type="text"]{ flex:1; min-width:220px; }
  .mytasks-section{ margin-bottom:18px; }
  .mytasks-section-head{ display:flex; align-items:center; gap:8px; font-weight:700; margin-bottom:4px; }
  .mytasks-section-head.overdue{ color:var(--danger); }
  .mytasks-count{ font-weight:600; font-size:12px; color:var(--muted); }
  .mytask-row{ display:flex; align-items:center; gap:10px; padding:8px; border-bottom:1px solid var(--line); cursor:pointer; }
  .mytask-row:hover{ background:rgba(0,0,0,0.03); }
  .mytask-row.done .mytask-title{ text-decoration:line-through; color:var(--muted); }
  .mytask-title{ flex:1; min-width:0; }
  .mytask-meta{ display:flex; gap:10px; align-items:center; font-size:12.5px; color:var(--muted); flex-shrink:0; flex-wrap:wrap; justify-content:flex-end; }
  .task-chip{ display:inline-block; font-size:11px; padding:1px 8px; border-radius:20px; background:var(--bg); border:1px solid var(--line); color:var(--muted); }
  @media (max-width:760px){ .pcal-cell{ min-height:70px; } .plist-meta, .mytask-meta{ display:none; } }

  /* ---------- Collaboration: comments, activity, followers, attachments ---------- */
  .td-avatar{ display:inline-flex; width:24px; height:24px; border-radius:50%; background:var(--navy); color:#fff; font-size:10px; font-weight:700; align-items:center; justify-content:center; flex-shrink:0; }
  .td-followers{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
  .td-follower{ display:inline-flex; align-items:center; gap:6px; padding:2px 4px 2px 3px; border:1px solid var(--line); border-radius:20px; background:var(--surface); font-size:12.5px; }
  .td-follower button{ border:none; background:none; cursor:pointer; color:var(--muted); font-size:15px; line-height:1; padding:0 4px; }
  .td-follower button:hover{ color:var(--danger); }
  .td-follow-actions{ display:flex; gap:8px; align-items:center; }
  .td-follow-actions select{ max-width:230px; }
  #td_follow_toggle.active{ color:var(--teal); border-color:var(--teal); }
  .td-section-row{ display:flex; align-items:center; justify-content:space-between; }
  .td-file{ display:flex; align-items:center; gap:10px; padding:6px 0; border-bottom:1px solid var(--line); }
  .td-file-thumb{ width:36px; height:36px; object-fit:cover; border-radius:6px; border:1px solid var(--line); flex-shrink:0; }
  .td-file-icon{ width:36px; text-align:center; font-size:18px; flex-shrink:0; }
  .td-file-main{ flex:1; min-width:0; display:flex; flex-direction:column; }
  .td-file-main a{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink); font-weight:600; text-decoration:none; }
  .td-file-main a:hover{ color:var(--orange); text-decoration:underline; }
  .td-file-meta{ font-size:11.5px; color:var(--muted); }
  .td-dropzone{ margin-top:8px; padding:12px; border:1.5px dashed var(--line-strong); border-radius:8px; text-align:center; font-size:12.5px; color:var(--muted); }
  .td-dropzone.over{ border-color:var(--orange); background:var(--orange-light); color:var(--ink); }
  .td-feed{ max-height:340px; overflow-y:auto; margin-bottom:10px; }
  .td-comment{ display:flex; gap:10px; padding:8px 0; }
  .td-comment-main{ flex:1; min-width:0; }
  .td-comment-head{ font-size:12.5px; display:flex; gap:6px; align-items:baseline; flex-wrap:wrap; }
  .td-time{ color:var(--muted); font-size:11.5px; }
  .td-comment-actions{ margin-left:auto; display:none; gap:10px; }
  .td-comment:hover .td-comment-actions{ display:inline-flex; }
  .td-comment-actions button{ border:none; background:none; color:var(--muted); cursor:pointer; font-size:11.5px; padding:0; }
  .td-comment-actions button:hover{ color:var(--orange); }
  .td-comment-body{ font-size:13.5px; line-height:1.45; word-break:break-word; }
  .td-event{ display:flex; gap:10px; align-items:flex-start; padding:3px 0 3px 7px; font-size:12.5px; color:var(--muted); }
  .td-event b{ color:var(--ink); font-weight:600; }
  .td-event-dot{ width:6px; height:6px; border-radius:50%; background:var(--line-strong); margin-top:6px; flex-shrink:0; }
  .mention{ color:var(--orange); font-weight:600; background:var(--orange-light); border-radius:4px; padding:0 3px; }
  .td-composer textarea, .td-comment-main textarea{ width:100%; resize:vertical; font:inherit; font-size:13.5px; padding:8px 10px; border:1px solid var(--line-strong); border-radius:6px; background:var(--surface); color:var(--ink); }
  .td-composer-actions{ display:flex; justify-content:flex-end; align-items:center; gap:10px; margin-top:6px; }
  .td-mention-wrap{ position:relative; }
  .td-mention-menu{ position:absolute; left:0; bottom:100%; margin-bottom:4px; min-width:220px; max-width:100%; background:var(--surface); border:1px solid var(--line-strong); border-radius:8px; box-shadow:var(--shadow); z-index:20; overflow:hidden; }
  .td-mention-item{ display:flex; align-items:center; gap:8px; padding:7px 10px; cursor:pointer; font-size:13px; }
  .td-mention-item.active, .td-mention-item:hover{ background:var(--orange-light); }

  /* ---------- Notifications: bell, panel, settings ---------- */
  .sidebar-brand{ position:relative; }
  .bell-btn{ position:absolute; top:18px; right:16px; width:34px; height:34px; border-radius:8px; border:1px solid rgba(255,255,255,0.15); background:rgba(255,255,255,0.08); color:#fff; cursor:pointer; padding:0; display:flex; align-items:center; justify-content:center; }
  .bell-btn:hover{ background:rgba(255,255,255,0.16); border-color:var(--orange); }
  .bell-btn svg{ width:17px; height:17px; }
  .bell-badge{ position:absolute; top:-6px; right:-6px; min-width:17px; height:17px; padding:0 4px; border-radius:9px; background:var(--orange); color:#fff; font-size:10px; font-weight:700; line-height:17px; text-align:center; box-shadow:0 0 0 2px var(--navy); }
  .notif-panel{ position:fixed; left:12px; top:64px; width:360px; max-width:calc(100vw - 24px); max-height:calc(100vh - 90px); display:flex; flex-direction:column; z-index:410; background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 12px 40px rgba(0,0,0,0.28); overflow:hidden; }
  .notif-panel-head{ display:flex; justify-content:space-between; align-items:center; padding:12px 14px; border-bottom:1px solid var(--line); }
  .notif-panel-actions{ display:flex; gap:10px; align-items:center; }
  .notif-gear{ border:none; background:none; cursor:pointer; font-size:16px; color:var(--muted); padding:2px 4px; }
  .notif-gear:hover{ color:var(--orange); }
  .notif-list{ overflow-y:auto; }
  .notif-item{ display:flex; gap:10px; align-items:flex-start; padding:10px 14px; border-bottom:1px solid var(--line); cursor:pointer; }
  .notif-item:hover{ background:rgba(0,0,0,0.04); }
  .notif-item.unread{ background:var(--orange-light); }
  .notif-icon{ width:22px; text-align:center; flex-shrink:0; font-weight:700; color:var(--orange); }
  .notif-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
  .notif-title{ font-size:13px; font-weight:600; line-height:1.3; }
  .notif-body{ font-size:12px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
  .notif-time{ font-size:11px; color:var(--muted); }
  .notif-dot{ width:8px; height:8px; border-radius:50%; background:var(--orange); margin-top:5px; flex-shrink:0; }
  .notif-empty{ padding:28px 18px; text-align:center; color:var(--muted); }
  .np-row{ display:flex; gap:10px; align-items:flex-start; padding:6px 0; font-size:13.5px; cursor:pointer; }
  .np-row input{ margin-top:3px; }
  .np-row .cell-sub{ display:block; }
  .np-master{ padding-bottom:10px; margin-bottom:6px; border-bottom:1px solid var(--line); }
  .np-test-result{ font-size:12.5px; white-space:pre-line; flex:1; }
  .np-test-result.ok{ color:var(--teal); }
  .np-test-result.bad{ color:var(--danger); }
  @media (max-width:760px){ .notif-panel{ left:8px; right:8px; top:60px; width:auto; } }

.recur-mark { color: var(--muted); font-size: 0.95em; margin-left: 4px; }
.td-hint { font-size: 12px; color: var(--muted); margin: -6px 0 12px; }

.field-chip { display: inline-block; font-size: 10px; padding: 2px 7px; border-radius: 999px; background: var(--orange-light); color: var(--text); margin: 0 4px 2px 0; white-space: nowrap; }
.proj-filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.proj-filterbar input[type="text"], .proj-filterbar select { height: 32px; padding: 0 10px; font-size: 13px; border: 1px solid var(--border); border-radius: 8px; background: var(--card, #fff); color: var(--text); }
.proj-filterbar input[type="text"] { width: 190px; }
.proj-filterbar .pf-count { font-size: 12px; color: var(--muted); margin-left: auto; }
.fm-list { display: flex; flex-direction: column; gap: 6px; }
.fm-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; }
.fm-row .fm-actions { display: flex; gap: 4px; flex-shrink: 0; }
.fm-row .fm-actions button { border: 0; background: transparent; cursor: pointer; font-size: 13px; padding: 2px 6px; color: var(--muted); }
.fm-row .fm-actions button:disabled { opacity: .3; cursor: default; }
.fm-form { border-top: 1px solid var(--border); margin-top: 12px; }
.td-fields .field { margin-bottom: 8px; }

.tpl-badge { display: inline-block; font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: #E7E4F6; color: #4B3F8F; vertical-align: middle; }
.tpl-stage { border: 1px solid var(--border); border-radius: 10px; margin-bottom: 12px; overflow: hidden; }
.tpl-stage-head { padding: 8px 12px; font-weight: 600; font-size: 13px; background: var(--orange-light); }
.tpl-task { display: flex; justify-content: space-between; gap: 12px; padding: 7px 12px; border-top: 1px solid var(--border); font-size: 13px; }
.tpl-task.sub { padding-left: 32px; color: var(--muted); }
.tpl-task .tpl-when { color: var(--muted); font-size: 12px; white-space: nowrap; }
.projects-tabs { display: flex; gap: 6px; margin-bottom: 14px; }

.blocked-mark { font-size: 0.9em; margin-left: 4px; }
.td-dep-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 0; font-size: 13px; }
.td-dep-done { color: var(--muted); text-decoration: line-through; }
.td-dep-del { border: 0; background: transparent; cursor: pointer; color: var(--muted); font-size: 13px; }
.tl-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.tl-toolbar .btn.active { background: var(--orange-light); border-color: var(--orange); }
.tl-wrap { overflow: auto; border: 1px solid var(--border); border-radius: 10px; background: var(--card, #fff); max-height: 70vh; }
.tl-grid { display: flex; width: max-content; min-width: 100%; }
.tl-labels { position: sticky; left: 0; z-index: 2; flex-shrink: 0; background: var(--card, #fff); border-right: 1px solid var(--border); }
.tl-label-head { height: 44px; border-bottom: 1px solid var(--border); }
.tl-label { height: 30px; line-height: 30px; padding: 0 10px; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.tl-label.stage { font-weight: 600; background: var(--orange-light); cursor: default; }
.tl-label.sub { padding-left: 26px; color: var(--muted); }
.tl-label.done { color: var(--muted); text-decoration: line-through; }
.tl-svg { display: block; flex-shrink: 0; user-select: none; touch-action: none; }
.tl-headbg { fill: var(--card, #fff); }
.tl-month { font-size: 11px; font-weight: 600; fill: var(--text); }
.tl-day { font-size: 10px; fill: var(--muted); }
.tl-day.today { fill: var(--danger); font-weight: 700; }
.tl-monthline { stroke: var(--border); stroke-width: 1; }
.tl-weekline { stroke: var(--border); stroke-width: 1; opacity: .6; }
.tl-weekend { fill: rgba(0,0,0,.035); }
.tl-stageband { fill: var(--orange-light); opacity: .55; }
.tl-today { stroke: var(--danger); stroke-width: 1.5; stroke-dasharray: 3 3; }
.tl-bar { cursor: grab; }
.tl-bar .tl-rect { fill: #2B5FA8; }
.tl-bar.done .tl-rect, .tl-bar.done polygon { fill: #9DB8A8; }
.tl-bar.overdue .tl-rect, .tl-bar.overdue polygon { fill: #D9534F; }
.tl-bar.blocked .tl-rect, .tl-bar.blocked polygon { fill: #B7A36A; }
.tl-bar.milestone polygon { fill: #4B3F8F; }
.tl-handle { fill: rgba(255,255,255,.35); cursor: ew-resize; }
.tl-arrow { fill: none; stroke: #8A8F98; stroke-width: 1.4; pointer-events: stroke; }
.tl-arrow.bad { stroke: var(--danger); stroke-width: 1.8; }
.tl-arrowhead { fill: #8A8F98; }
.tl-arrowhead.bad { fill: var(--danger); }

.proj-status-block { margin: 0 0 14px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--card, #fff); }
.proj-status-line { display: flex; align-items: baseline; gap: 8px; font-size: 13.5px; }
.proj-status-text { white-space: pre-wrap; }
.proj-status-actions { margin-top: 8px; display: flex; align-items: center; gap: 10px; }
.su-history { max-height: 260px; overflow: auto; }
.su-item { padding: 8px 0; border-top: 1px solid var(--border); }
.su-item-head { display: flex; align-items: center; gap: 8px; }
.su-item-head .td-dep-del { margin-left: auto; }
.su-item-body { margin-top: 4px; font-size: 13px; white-space: pre-wrap; }

.viz { --viz-s1: #2a78d6; --viz-s2: #eb6834; --viz-open: #2a78d6; --viz-overdue: #d03b3b; --viz-done: #0ca30c; --viz-warn: #fab219; --viz-grid: #e1e0d9; --viz-axis: #c3c2b7; --viz-muted: #898781; }
body.dark .viz { --viz-s1: #3987e5; --viz-s2: #d95926; --viz-open: #3987e5; --viz-grid: #2c2c2a; --viz-axis: #383835; }
.viz-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 16px; }
.viz-tile { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 12px 14px; }
.viz-tile-label { font-size: 12px; color: var(--muted); }
.viz-tile-value { font-size: 26px; font-weight: 600; margin-top: 2px; }
.viz-tile.crit .viz-tile-value { color: var(--danger); }
.viz-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 16px; margin-bottom: 16px; }
.viz-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 14px 16px; margin-bottom: 16px; }
.viz-grid2 .viz-card { margin-bottom: 0; }
.viz-title { font-weight: 600; font-size: 14px; margin-bottom: 8px; }
.viz-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.viz-sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.viz-svg { width: 100%; height: auto; display: block; overflow: visible; }
.viz-label { font-size: 11.5px; fill: var(--ink); }
.viz-value { font-size: 11.5px; fill: var(--muted); }
.viz-tick { font-size: 10.5px; fill: var(--viz-muted); }
.viz-axis { stroke: var(--viz-axis); stroke-width: 1; }
.viz-grid { stroke: var(--viz-grid); stroke-width: 1; }
.viz-xh { stroke: var(--viz-axis); stroke-width: 1; }
.viz-svg rect[data-tip]:hover { filter: brightness(1.12); }
.viz-svg rect[data-tip]:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
.viz-tip { position: fixed; z-index: 9999; background: var(--navy); color: #fff; font-size: 12px; padding: 6px 9px; border-radius: 6px; pointer-events: none; white-space: pre-line; box-shadow: var(--shadow); }
.viz-table { margin-top: 8px; font-size: 12px; }
.viz-table summary { cursor: pointer; color: var(--muted); }
.viz-table table, .viz-plain { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-top: 6px; }
.viz-table th, .viz-table td, .viz-plain th, .viz-plain td { padding: 4px 8px; border-bottom: 1px solid var(--line); text-align: left; }
.viz-plain tbody tr:hover { background: var(--bg); }
.pf-tiles { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.pf-tile { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius); padding: 8px 12px; cursor: pointer; font: inherit; color: var(--ink); }
.pf-tile.active { border-color: var(--orange); box-shadow: 0 0 0 1px var(--orange); }
.pf-tile-n { font-size: 20px; font-weight: 600; }
.pf-table td { vertical-align: top; }
.pf-upd { font-size: 13px; }
.pf-stale { color: var(--danger); }
.wl-table th, .wl-table td { text-align: center; }
.wl-table th:first-child, .wl-table td:first-child { text-align: left; min-width: 160px; }
.wl-table th.current { background: var(--orange-light); }
.wl-cell { cursor: pointer; min-width: 74px; }
.wl-cell.past { opacity: .75; }
.wl-cell.current { background: rgba(232,89,12,.06); }
.wl-cell.picked { outline: 2px solid var(--ink); outline-offset: -2px; }
.wl-bar { height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; margin: 2px 0 4px; }
.wl-bar span { display: block; height: 100%; background: var(--viz-open, #2a78d6); border-radius: 3px; }
.wl-warn .wl-bar span { background: #fab219; }
.wl-over .wl-bar span { background: #d03b3b; }
.wl-num { font-size: 13px; font-weight: 600; }
.wl-sub { font-size: 11px; color: var(--muted); min-height: 14px; }
.wl-flag { color: var(--danger); }
.wl-extra { cursor: pointer; color: var(--muted); }
.wl-total td { border-top: 2px solid var(--line-strong); }
.wl-legend { display: flex; flex-wrap: wrap; gap: 16px; font-size: 12px; color: var(--muted); margin: 10px 0; }
.wl-key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; background: #2a78d6; }
.wl-key.warn { background: #fab219; }
.wl-key.over { background: #d03b3b; }
.wl-detail { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 12px 14px; margin-top: 8px; }

.viz-chart { max-width: 760px; }

.rl-banner { background: var(--orange-light); border: 1px solid var(--orange); border-radius: 8px; padding: 8px 12px; font-size: 13px; margin-bottom: 10px; }
.rl-list { display: flex; flex-direction: column; gap: 6px; }
.rl-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; }
.rl-row.off { opacity: .6; }
.rl-main { flex: 1; min-width: 0; }
.rl-name { font-weight: 600; font-size: 13.5px; }
.rl-switch { display: flex; align-items: center; cursor: pointer; }
.rl-log { font-size: 13px; }
.rl-log-row { display: flex; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); }
.rl-good { color: #0ca30c; } .rl-bad { color: var(--danger); font-weight: 700; }
.rl-when, .rl-action { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; margin-bottom: 8px; }
.rl-action .rl-extra, .rl-when .rl-extra { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex: 1; min-width: 160px; }
.rl-extra textarea { width: 100%; }
.rl-step { display: inline-flex; width: 22px; height: 22px; border-radius: 50%; background: var(--orange-light); color: var(--orange); align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; margin-top: 4px; }
.fb-q { border: 1px solid var(--line); border-radius: 8px; padding: 8px; margin-bottom: 8px; }
.fb-q-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fb-q-top input[type="text"] { flex: 1; min-width: 160px; }
.fb-q textarea { width: 100%; margin-top: 6px; }
.rqp-item { display: block; width: 100%; text-align: left; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); padding: 10px 12px; margin-bottom: 6px; cursor: pointer; font: inherit; color: var(--ink); }
.rqp-item:hover { border-color: var(--orange); }
.approval-mark { margin-left: 4px; font-size: 0.95em; }
.approval-badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.approval-badge.ap-pending { background: #FFF3D6; color: #8A5A00; } .approval-badge.ap-approved { background: #DCEEE3; color: #1F6B3E; }
.approval-badge.ap-changes { background: var(--orange-light); color: var(--orange); } .approval-badge.ap-rejected { background: #FBEAEA; color: var(--danger); }
.approval-note { font-size: 13px; margin-top: 6px; padding: 6px 10px; border-left: 3px solid var(--line-strong); color: var(--ink); }

.bulk-cell { width: 34px; text-align: center; }
.bulk-cb, [data-bulk-all] { cursor: pointer; width: 15px; height: 15px; }
.bulk-inline { display: inline-flex; align-items: center; margin-right: 8px; }
tr.bulk-selected td, .bulk-selected { background: rgba(232, 89, 12, .07); }
.bulk-bar { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 900; align-items: center; gap: 10px; background: var(--navy); color: #fff; padding: 8px 12px; border-radius: 12px; box-shadow: var(--shadow); max-width: 96vw; flex-wrap: wrap; }
.bulk-count { font-size: 13px; font-weight: 600; padding: 0 6px; }
.bulk-btns { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.bulk-btn { border: 1px solid rgba(255,255,255,.28); background: transparent; color: #fff; border-radius: 8px; padding: 5px 11px; font: inherit; font-size: 12.5px; cursor: pointer; }
.bulk-btn:hover:not(:disabled) { background: rgba(255,255,255,.14); }
.bulk-btn:disabled { opacity: .4; cursor: default; }
.bulk-btn.danger { border-color: #E3707A; color: #FFB3BA; }
.bulk-btn.ghost { border-color: transparent; opacity: .8; }
.bulk-menu { position: fixed; left: 50%; bottom: 76px; transform: translateX(-50%); z-index: 901; background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); border-radius: 10px; box-shadow: var(--shadow); padding: 6px; min-width: 240px; max-height: 60vh; overflow: auto; }
.bulk-menu-item { display: block; width: 100%; text-align: left; border: 0; background: transparent; color: inherit; padding: 8px 10px; border-radius: 6px; font: inherit; font-size: 13px; cursor: pointer; }
.bulk-menu-item:hover:not(:disabled) { background: var(--orange-light); }
.bulk-menu-item.danger { color: var(--danger); }
.bulk-menu-item:disabled { opacity: .4; cursor: default; }
.bulk-toast { position: fixed; left: 22px; bottom: 22px; z-index: 950; align-items: center; gap: 12px; background: var(--navy); color: #fff; padding: 10px 14px; border-radius: 10px; box-shadow: var(--shadow); font-size: 13px; max-width: min(560px, 90vw); }
.bulk-toast-x { border: 0; background: transparent; color: #fff; opacity: .7; cursor: pointer; font-size: 14px; }
.bk-preview { margin-top: 10px; font-size: 13px; }
.bk-lines { margin: 0 0 6px 18px; padding: 0; }
.bk-names { margin-top: 2px; }
.bk-warn { margin-top: 8px; padding: 6px 10px; border-radius: 8px; background: var(--orange-light); }
.bk-row { display: flex; gap: 8px; } .bk-row > * { flex: 1; min-width: 0; }
.btn.danger-solid { background: var(--danger); border-color: var(--danger); color: #fff; }

/* The round tick on a task row means "this task is complete"; the square box on the left is for selecting rows. */
.task-done-toggle{appearance:none;-webkit-appearance:none;width:18px;height:18px;border:2px solid var(--muted,#9a9486);border-radius:50%;cursor:pointer;position:relative;background:transparent;vertical-align:middle}
.task-done-toggle:hover{border-color:#2E9E5B}
.task-done-toggle:checked{background:#2E9E5B;border-color:#2E9E5B}
.task-done-toggle:checked::after{content:"✓";color:#fff;font-size:12px;line-height:14px;position:absolute;left:2px;top:0}

/* Meeting Notes */
.mn-chip{display:inline-flex;align-items:center;gap:3px;padding:1px 7px;border-radius:10px;background:var(--surface-2,#f3eee6);font-size:11.5px;margin:1px 3px 1px 0;white-space:nowrap}
.mn-chips{max-width:300px;line-height:1.7}
.mn-snippet{display:block;color:var(--muted,#8a8578);font-size:11.5px;margin-top:2px;max-width:420px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mn-comments{max-height:220px;overflow-y:auto;margin-bottom:8px}
.mn-comment{display:flex;gap:8px;padding:6px 0;border-bottom:1px solid var(--line,#ece7dd)}
.mn-comment .mn-avatar{flex:0 0 26px;height:26px;border-radius:50%;background:var(--surface-2,#f3eee6);display:inline-flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:600}
.mn-comment-head{font-size:12px}.mn-comment-head button{border:none;background:none;color:var(--muted,#8a8578);cursor:pointer;font-size:11px;margin-left:6px}
.mn-comment-body{font-size:13px;white-space:pre-wrap}
.mn-event{font-size:11.5px;color:var(--muted,#8a8578);padding:3px 0 3px 34px}

#textPromptModalOverlay{ z-index:210; }     /* above the dialogs it can be opened from (a mail being written) */

/* Menu favourites */
.nav-fav-empty{ padding:4px 14px 8px 18px; font-size:11.5px; color:rgba(255,255,255,0.5); line-height:1.4; }
.nav-fav-item{ cursor:grab; }
.nav-fav-item.nav-fav-dragging{ opacity:0.4; }
.nav-fav-item.nav-fav-drop-before{ box-shadow:inset 0 2px 0 var(--orange); }
.nav-fav-item.nav-fav-drop-after{ box-shadow:inset 0 -2px 0 var(--orange); }
.nav-favourites{ margin-bottom:6px; padding-bottom:4px; border-bottom:1px solid rgba(255,255,255,0.1); }

/* Product drawer */
.fh{ font-weight:400; color:var(--muted); text-transform:none; letter-spacing:0; font-size:11.5px; }
.p-logistics{ margin:6px 0 10px; border:1px solid var(--line, #e3ded4); border-radius:8px; padding:8px 12px; }
.p-logistics summary{ cursor:pointer; font-weight:600; font-size:13px; }
.p-doc-row{ display:flex; align-items:center; gap:8px; padding:5px 0; border-bottom:1px solid var(--line, #ece7dd); font-size:13px; }
.p-doc-row .p-doc-kind{ font-size:11px; background:var(--surface-2, #f3eee6); border-radius:10px; padding:1px 8px; }
.p-doc-row a{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tag-discontinued{ background:#F3E3E3; color:#9E2B2B; }

/* PDF preview window */
#pdfPreviewModalOverlay{ z-index:220; }
.pdf-preview-box{ width:min(980px, 96vw); max-width:96vw; }
.pdf-preview-frame{ display:block; width:100%; height:min(72vh, 820px); border:0; background:#e8e6e0; }

/* ---------- Rich text editor (compose window, signature box) ---------- */
.rich-toolbar{ position:relative; border:1px solid var(--line); border-radius:8px 8px 0 0; background:#faf9f6; padding:4px 6px; }
.rich-toolbar .rt-row{ display:flex; align-items:center; flex-wrap:wrap; gap:2px; padding:2px 0; }
.rich-toolbar .rt-row + .rt-row{ border-top:1px solid var(--line); }
.rt-btn{ display:inline-flex; align-items:center; justify-content:center; gap:4px; min-width:28px; height:28px; padding:0 6px; border:1px solid transparent; border-radius:6px; background:transparent; color:var(--ink); font:inherit; font-size:13px; cursor:pointer; }
.rt-btn:hover{ background:#eeece5; }
.rt-btn.active{ background:#e3e0d6; border-color:#cfcabb; }
.rt-btn:focus-visible, .rt-chip:focus-visible, .rt-select:focus-visible{ outline:2px solid var(--orange); outline-offset:1px; }
.rt-ic{ width:16px; height:16px; }
.rt-sep{ width:1px; height:18px; background:var(--line); margin:0 4px; }
.rt-select{ height:28px; border:1px solid var(--line); border-radius:6px; background:#fff; font:inherit; font-size:12.5px; padding:0 4px; max-width:132px; }
.rt-select.rt-size{ width:64px; }
.rt-attach .rt-label{ font-size:12.5px; font-weight:600; }
.rt-color-a{ position:relative; display:inline-block; font-weight:700; font-size:14px; line-height:1; padding-bottom:3px; }
.rt-color-a.rt-hi{ font-weight:600; }
.rt-color-bar{ position:absolute; left:-1px; right:-1px; bottom:-2px; height:3px; border-radius:1px; border:1px solid rgba(0,0,0,.15); }
.rt-context{ display:flex; align-items:center; flex-wrap:wrap; gap:4px; border-top:1px solid var(--line); margin-top:3px; padding:5px 2px 2px; }
.rt-context[hidden]{ display:none; }
.rt-ctx-label{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); margin-right:4px; }
.rt-chip{ height:24px; padding:0 8px; border:1px solid var(--line); border-radius:12px; background:#fff; font:inherit; font-size:12px; cursor:pointer; color:var(--ink); }
.rt-chip:hover{ background:#f3f1ea; }
.rt-chip.rt-danger{ color:#b42318; }
.rt-popover{ position:absolute; z-index:5; background:#fff; border:1px solid var(--line); border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.16); padding:8px; max-width:260px; }
.rt-swatches{ display:grid; grid-template-columns:repeat(10, 20px); gap:4px; }
.rt-swatch{ width:20px; height:20px; border-radius:4px; border:1px solid rgba(0,0,0,.2); cursor:pointer; padding:0; }
.rt-swatch:hover{ transform:scale(1.15); }
.rt-pop-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:8px; }
.rt-pop-label{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); margin-top:6px; }
.rt-pop-title{ font-size:12px; font-weight:600; margin-bottom:6px; }
.rt-grid{ display:grid; grid-template-columns:repeat(8, 18px); gap:2px; }
.rt-grid-cell{ width:18px; height:18px; border:1px solid #cfcabb; border-radius:2px; background:#fff; }
.rt-grid-cell.on{ background:#cfe0f7; border-color:#6f9bd8; }
.rt-emoji{ display:grid; grid-template-columns:repeat(7, 32px); gap:2px; }
.rt-emoji-btn{ width:32px; height:32px; border:0; border-radius:6px; background:transparent; font-size:18px; cursor:pointer; }
.rt-emoji-btn:hover{ background:#eeece5; }
/* conversation view (0595-mail-conversation.js) */
.mail-wait{ display:inline-block; font-size:11px; font-weight:600; color:#8a6d1f; background:#fbf3d9; border-radius:9px; padding:0 7px; margin-left:6px; white-space:nowrap; }
.mail-wait.old{ color:#9a5a00; background:#ffe9c4; } .mail-wait.older{ color:#a32323; background:#fbe2e2; }
.cv-head{ margin-bottom:12px; padding-bottom:10px; border-bottom:1px solid var(--line); }
.cv-subject{ font-family:'Fraunces', Georgia, serif; font-size:17px; font-weight:600; margin-bottom:2px; overflow-wrap:anywhere; }
.cv-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; font-size:12px; color:var(--muted); }
.cv-people{ display:inline-flex; flex-wrap:wrap; gap:4px; }
.cv-chip{ border:1px solid var(--line); background:#faf9f6; color:var(--ink); border-radius:12px; padding:1px 9px; font-size:12px; }
button.cv-chip.link{ cursor:pointer; color:var(--orange,#DB6B1B); border-color:#f1d2b3; }
button.cv-chip.link:hover{ background:#fff3e6; }
.cv-tools{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.cv-tools .btn.on{ background:var(--surface-2,#f3eee6); color:var(--orange,#DB6B1B); }
.cv-waiting{ margin-top:8px; padding:6px 10px; border-radius:8px; background:#fbf3d9; color:#6b5413; font-size:12.5px; }
.cv-card{ border:1px solid var(--line); border-radius:10px; margin-bottom:8px; background:var(--surface); }
.cv-card.mine{ border-left:3px solid var(--orange,#DB6B1B); }
.cv-card.collapsed{ display:flex; align-items:center; gap:8px; padding:7px 10px; cursor:pointer; min-width:0; }
.cv-card.collapsed:hover, .cv-card.collapsed:focus-visible{ background:#faf8f3; outline:none; }
.cv-card.collapsed.loading{ opacity:.6; }
.cv-card.collapsed.unread .cv-from{ font-weight:700; }
.cv-card.open{ padding:10px 12px 12px; }
.cv-chev, .cv-chev-btn{ flex:0 0 auto; color:var(--muted); font-size:12px; width:14px; text-align:center; background:none; border:0; padding:0; cursor:pointer; }
.cv-avatar{ flex:0 0 auto; width:22px; height:22px; border-radius:50%; background:#eceae2; color:#555; font-size:11px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; }
.cv-card.mine .cv-avatar{ background:#fde6cf; color:#9a4d00; }
.cv-from{ flex:0 0 auto; max-width:34%; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cv-snippet{ flex:1 1 auto; min-width:0; font-size:12.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cv-date, .cv-clip{ flex:0 0 auto; font-size:11.5px; color:var(--muted); white-space:nowrap; }
.cv-open-head{ display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.cv-open-title{ min-width:0; font-size:13.5px; overflow-wrap:anywhere; } .cv-subj{ color:var(--muted); font-weight:400; margin-left:6px; }
.mail-body .cv-q{ display:none; }
.mail-body.cv-show-q .cv-q{ display:revert; }
.cv-more{ display:inline-block; margin:6px 0; border:1px solid var(--line); background:#faf9f6; color:var(--muted); border-radius:10px; padding:0 9px; font-size:12px; cursor:pointer; }
.cv-more:hover{ color:var(--ink); background:#f1eee6; }
/* dark mode: the light chips, hover rows and badges above, and the email itself.
   An HTML email carries its own colours (black text, white tables, a dark-on-transparent logo): they cannot follow the theme, so the message sits on a white
   "paper" in dark mode, as in Outlook. Plain-text emails have no colours of their own and stay dark. The stored message is never changed. */
body.dark .mail-body.mail-body-html{ background:#fff; color:#1a1a1a; color-scheme:light; border-radius:8px; padding:10px 14px; }
body.dark .mail-body.mail-body-html a{ color:#1a56c4; }
body.dark .mail-body.mail-body-html .cv-more{ background:#f1f1f1; color:#555; border-color:#d6d6d6; }
body.dark .mail-body.mail-body-html .cv-more:hover{ background:#e6e6e6; color:#1a1a1a; }
body.dark .cv-chip, body.dark .cv-more{ background:var(--surface-2); }
body.dark .cv-more:hover{ background:var(--line-strong); }
body.dark button.cv-chip.link{ border-color:#5a3a22; }
body.dark button.cv-chip.link:hover{ background:var(--orange-light); }
body.dark .cv-card.collapsed:hover, body.dark .cv-card.collapsed:focus-visible{ background:var(--surface-2); }
body.dark .cv-avatar{ background:#34363a; color:#d0d0d0; }
body.dark .cv-card.mine .cv-avatar{ background:#3a2314; color:#ffb27a; }
body.dark .mail-wait{ color:#e8c76a; background:#3a3015; }
body.dark .mail-wait.old{ color:#f0b060; background:#3d2a12; }
body.dark .mail-wait.older{ color:#f08a8a; background:#3d1a1a; }
body.dark .cv-waiting{ background:#3a3015; color:#e8d28a; }
body.dark .cv-tools .btn.on{ background:var(--surface-2); }
body.dark .mc-code{ background:var(--surface-2); color:var(--ink); }
body.dark .mc-split-item:hover{ background:var(--surface-2); }
body.dark .mc-split-item.active{ background:var(--line-strong); }
body.dark .mc-editor blockquote{ border-left-color:#999; color:#444; }
/* the signature editor is a wide working window: a signature is a layout (logo beside text, columns of contact details, a long disclaimer), and a narrow box makes it wrap differently from the email */
#mailSignaturesOverlay .modal-box{ width:1500px !important; max-width:118vw !important; }
#mailSignaturesOverlay .mc-split{ min-height:520px; max-height:78vh; }
#mailSignaturesOverlay .mc-split-list{ flex:0 0 180px; }
#mailSignaturesOverlay #sg_body{ min-height:340px; }
#mailSigHtmlOverlay .modal-box{ width:1300px !important; max-width:118vw !important; }
#mailSigHtmlOverlay #sh_preview{ height:320px !important; }
.mc-code{ width:100%; font:12.5px/1.45 Consolas, 'Courier New', monospace; padding:8px 10px; border:1px solid var(--line); border-radius:8px; resize:vertical; white-space:pre; overflow:auto; background:#fbfaf7; color:var(--ink); box-sizing:border-box; }
.mc-editor{ min-height:260px; max-height:46vh; overflow-y:auto; border:1px solid var(--line); border-top:0; border-radius:0 0 8px 8px; padding:10px 12px; font-size:14px; line-height:1.5; outline:none; background:#fff; color:#1a1a1a; }
.mc-editor:focus{ box-shadow:inset 0 0 0 1px var(--orange); }
.mc-editor img, #mb_signature img{ max-width:100%; }
.mc-editor img.rt-img-sel, #mb_signature img.rt-img-sel{ outline:2px solid var(--orange); outline-offset:2px; }
.mc-editor table td, .mc-editor table th{ min-width:30px; }
.mc-editor blockquote{ margin:0 0 0 12px; padding-left:10px; border-left:3px solid #d8d3c4; color:#555; }

/* ---------- Compose window ---------- */
.mail-compose-box{ position:relative; width:880px; max-width:94vw; }
.mail-compose-box .mc-bcc-toggle{ float:right; text-transform:none; letter-spacing:0; font-weight:600; }
.mc-drop-hint{ display:none; position:absolute; inset:0; z-index:6; align-items:center; justify-content:center; background:rgba(255,255,255,.88); border:3px dashed var(--orange); border-radius:12px; font-size:18px; font-weight:700; color:var(--orange); pointer-events:none; }
.mail-compose-box.mc-dragging .mc-drop-hint{ display:flex; }
.mc-files-meter{ font-weight:400; text-transform:none; letter-spacing:0; color:var(--muted); margin-left:6px; }
.mc-files{ display:flex; flex-wrap:wrap; gap:6px; }
.mc-file{ display:inline-flex; align-items:center; gap:6px; max-width:100%; border:1px solid var(--line); border-radius:8px; background:#faf9f6; padding:4px 4px 4px 8px; font-size:12.5px; }
.mc-file-name{ max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
.mc-file-size{ color:var(--muted); }
.mc-file-x{ width:20px; height:20px; border:0; border-radius:50%; background:transparent; cursor:pointer; color:var(--muted); font-size:12px; }
.mc-file-x:hover{ background:#eeece5; color:var(--ink); }
.mc-options{ display:flex; align-items:center; flex-wrap:wrap; gap:16px; font-size:12.5px; color:var(--muted); }
.mc-options select{ width:auto; min-width:110px; margin-left:4px; height:28px; padding:0 26px 0 8px; font-size:12.5px; }
.mc-check{ display:inline-flex; align-items:center; gap:6px; }
.mc-hint{ margin-left:auto; font-size:11.5px; }

/* ---------- Composer extras ---------- */
.mail-extra-modal{ z-index:120; }
.rt-extras{ background:#f3f1ea; border-radius:6px; margin-top:2px; }
.rt-extra{ padding:0 10px; font-weight:600; }
.rt-extra .rt-label{ margin-left:4px; font-size:12.5px; }
.rt-find{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; border-top:1px solid var(--line); margin-top:3px; padding:6px 2px 2px; }
.rt-find[hidden]{ display:none; }
.rt-find-input{ height:26px; width:150px; font-size:12.5px; padding:0 8px; }
.rt-find-case{ display:inline-flex; align-items:center; gap:4px; font-size:12px; color:var(--muted); }
.rt-find-count{ min-width:60px; font-size:12px; color:var(--muted); }
::highlight(rt-find){ background-color:#ffe08a; color:inherit; }
::highlight(rt-find-current){ background-color:#ff9f43; color:inherit; }
.rt-popover.rt-menu{ min-width:290px; max-width:360px; max-height:340px; overflow-y:auto; padding:6px; }
.rt-menu-title{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); padding:6px 8px 3px; }
.rt-menu-sep{ height:1px; background:var(--line); margin:6px 0; }
.rt-menu-item{ display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; text-align:left; border:0; background:transparent; border-radius:6px; padding:7px 8px; font:inherit; font-size:13px; color:var(--ink); cursor:pointer; }
.rt-menu-item:hover, .rt-menu-item:focus-visible{ background:#f0eee6; outline:none; }
.rt-menu-tag{ font-size:11px; color:var(--muted); background:#eeece5; border-radius:8px; padding:1px 7px; white-space:nowrap; }
.rt-linktip{ position:fixed; z-index:300; display:flex; align-items:center; gap:4px; background:#fff; border:1px solid var(--line); border-radius:8px; box-shadow:0 6px 20px rgba(0,0,0,.18); padding:4px 6px; font-size:12px; }
.rt-linktip-url{ max-width:300px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); margin-right:4px; }
.rt-linktip button{ border:0; background:transparent; color:var(--orange); font:inherit; font-weight:600; cursor:pointer; padding:2px 6px; border-radius:4px; }
.rt-linktip button:hover{ background:#f3f1ea; }

/* address suggestions */
.mc-suggest-host{ position:relative; }
.mc-suggest{ position:absolute; z-index:6; left:0; right:0; top:100%; margin-top:2px; background:#fff; border:1px solid var(--line); border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.16); max-height:260px; overflow-y:auto; }
.mc-suggest-item{ padding:7px 10px; font-size:13px; cursor:pointer; display:flex; gap:8px; align-items:baseline; }
.mc-suggest-item.active, .mc-suggest-item:hover{ background:#f3f1ea; }
.mc-suggest-email{ color:var(--muted); font-size:12px; }
.mc-suggest-extra{ margin-left:auto; color:var(--muted); font-size:11.5px; }

/* the compose window */
.mc-sig-row{ font-size:12.5px; color:var(--muted); margin:-6px 0 10px; }
.mc-sig-row select{ width:auto; min-width:160px; height:26px; margin-left:4px; padding:0 22px 0 8px; font-size:12.5px; }
.mc-hint .btn-link{ font-size:11.5px; }
.mc-hint-inline{ font-weight:400; color:var(--muted); text-transform:none; letter-spacing:0; }
.mc-send-split{ position:relative; display:flex; flex:1; }
.mc-send-split #mc_send_btn{ flex:1; border-top-right-radius:0; border-bottom-right-radius:0; }
.mc-send-caret{ flex:0 0 38px !important; width:38px; padding:0 !important; border-top-left-radius:0; border-bottom-left-radius:0; border-left:1px solid rgba(255,255,255,.28); }
.mc-send-menu{ position:absolute; right:0; bottom:100%; margin-bottom:6px; min-width:300px; background:#fff; border:1px solid var(--line); border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.18); padding:6px; z-index:8; }
.mc-undo-bar{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%) scale(1.25); z-index:1200; display:flex; align-items:center; gap:10px; background:var(--navy, #1f2430); color:#fff; border-radius:10px; padding:10px 14px; box-shadow:0 10px 30px rgba(0,0,0,.35); font-size:13.5px; }
.mc-undo-bar button{ border:0; border-radius:6px; padding:5px 12px; font:inherit; font-weight:700; cursor:pointer; }
.mc-undo-btn{ background:#ff9f43; color:#1f2430; }
.mc-undo-now{ background:rgba(255,255,255,.16); color:#fff; }
.mc-undo-bar button:disabled{ opacity:.5; cursor:default; }

/* two-column editors (signatures, templates) */
.mc-split{ display:flex; gap:16px; min-height:340px; max-height:68vh; overflow:hidden; }
.mc-split-list{ flex:0 0 220px; overflow-y:auto; border-right:1px solid var(--line); padding-right:12px; }
.mc-split-edit{ flex:1; min-width:0; overflow-y:auto; padding-right:4px; }
.mc-split-item{ display:flex; align-items:center; justify-content:space-between; gap:6px; width:100%; text-align:left; border:0; background:transparent; border-radius:6px; padding:8px 8px; font:inherit; font-size:13px; cursor:pointer; color:var(--ink); }
.mc-split-item:hover{ background:#f3f1ea; }
.mc-split-item.active{ background:#e8e4d8; font-weight:600; }
.mc-chips{ display:flex; flex-wrap:wrap; gap:4px; }
.mc-prefs-links{ display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }

/* CRM documents and scheduled emails */
.mc-doc-tabs{ display:flex; flex-wrap:wrap; gap:4px; }
.mc-doc-tab{ border:1px solid var(--line); background:#fff; border-radius:14px; padding:4px 12px; font:inherit; font-size:12.5px; cursor:pointer; }
.mc-doc-tab.active{ background:var(--navy, #1f2430); color:#fff; border-color:transparent; }
.mc-doc-list{ max-height:48vh; overflow-y:auto; border:1px solid var(--line); border-radius:8px; }
.mc-doc-row{ display:flex; align-items:baseline; gap:10px; width:100%; text-align:left; border:0; border-bottom:1px solid var(--line); background:#fff; padding:9px 12px; font:inherit; font-size:13px; cursor:pointer; }
.mc-doc-row:last-child{ border-bottom:0; }
.mc-doc-row:hover{ background:#f7f5ef; }
.mc-doc-row.busy{ opacity:.55; cursor:progress; }
.mc-doc-row span{ color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mc-doc-date{ margin-left:auto; flex:0 0 auto; }
.se-row{ display:flex; align-items:center; gap:12px; padding:10px 12px; border-bottom:1px solid var(--line); background:#fff; }
.se-row:last-child{ border-bottom:0; }
.se-main{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.se-main span{ color:var(--muted); font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.se-failed{ color:#b42318; white-space:normal !important; }
.se-actions{ display:flex; gap:6px; flex:0 0 auto; }
.se-row.sent{ opacity:.6; }

/* while a CRM document is made for an attachment, the record is opened out of sight */
body.mc-silent .drawer, body.mc-silent #overlay{ visibility:hidden !important; transition:none !important; }

/* while a table column border is being dragged */
body.rt-resizing, body.rt-resizing *{ cursor:col-resize !important; user-select:none !important; }

/* recipient chips (To / Cc / Bcc) */
.mc-canonical{ display:none !important; }
.mc-rbox{ display:flex; flex-wrap:wrap; align-items:center; gap:4px; min-height:36px; padding:3px 6px; border:1px solid var(--line-strong, #cfcabb); border-radius:8px; background:#fff; cursor:text; }
.mc-rbox:focus-within{ border-color:var(--orange); box-shadow:0 0 0 2px rgba(247,103,7,.15); }
.mc-rbox.drop-target{ border-color:var(--orange); border-style:dashed; background:#fff8f0; }
.mc-rchips{ display:contents; }
.mc-chip{ display:inline-flex; align-items:center; gap:2px; max-width:100%; background:#eaf0fa; border:1px solid #c9d7ee; border-radius:14px; padding:1px 3px 1px 10px; font-size:13px; line-height:1.5; cursor:grab; user-select:none; }
.mc-chip:hover{ background:#dde8f8; }
.mc-chip.invalid{ background:#fdecec; border-color:#f0b0b0; color:#9b1c1c; }
.mc-chip.selected{ outline:2px solid var(--orange); outline-offset:1px; }
.mc-chip.dragging{ opacity:.35; }
.mc-chip.drop-before{ box-shadow:-3px 0 0 var(--orange); }
.mc-chip-label{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:300px; cursor:pointer; }
.mc-chip-x{ border:0; background:transparent; width:20px; height:20px; border-radius:50%; font-size:11px; line-height:1; color:#5a6678; cursor:pointer; padding:0; }
.mc-chip-x:hover{ background:rgba(0,0,0,.12); color:#111; }
.mc-rbox .mc-rtype{ flex:1; min-width:150px; border:0; outline:0; background:transparent; box-shadow:none; font:inherit; font-size:13.5px; padding:5px 4px; width:auto; }
.mc-chip-menu{ position:fixed; z-index:310; min-width:220px; background:#fff; border:1px solid var(--line); border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.2); padding:6px; }
.mc-chip-menu-email{ font-size:12px; color:var(--muted); padding:0 8px 6px; word-break:break-all; }
.mc-chip-menu-email.bad{ color:#9b1c1c; }
.cd-filter{ margin-top:8px; }

/* money reports */
.money-source{ background:#fff8ea; border:1px solid #f0dcb0; border-radius:8px; padding:8px 12px; font-size:12.5px; color:#6b5316; margin:0 0 10px; }
.money-controls{ display:flex; align-items:center; flex-wrap:wrap; gap:10px 14px; margin:0 0 10px; font-size:12.5px; color:var(--muted); }
.money-controls label{ display:inline-flex; align-items:center; gap:6px; }
.money-controls select, .money-controls input[type=date], .money-controls input[type=text]{ height:auto; min-height:34px; padding:6px 10px; font-size:12.5px; line-height:1.4; box-sizing:border-box; }
.money-controls input[type=text]{ min-width:220px; }
.money-export{ margin-left:auto; display:inline-flex; gap:6px; }
.money-period-words{ font-weight:600; color:var(--ink); }
.money-table{ width:100%; border-collapse:collapse; }
.money-table th{ text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); padding:8px 10px; border-bottom:1px solid var(--line); white-space:nowrap; }
.money-table td{ padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:top; }
.money-table .amount-cell, .money-inner .amount-cell{ text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.money-group{ cursor:pointer; }
.money-group:hover{ background:#faf8f3; }
.money-group.open{ background:#f6f3ec; }
.money-caret{ display:inline-block; width:14px; color:var(--muted); }
.money-b-d1{ color:#b5651d; } .money-b-d31{ color:#b5651d; } .money-b-d61{ color:#b13b3b; } .money-b-d90{ color:#b13b3b; font-weight:600; }
.money-zero{ color:#b8b4a8; }
.money-late{ color:#b13b3b; font-weight:600; }
.money-warn{ color:#b5651d; }
.money-lines > td{ background:#faf9f6; padding:4px 10px 12px 34px; }
.money-inner{ width:100%; border-collapse:collapse; font-size:12.5px; }
.money-inner th{ font-size:11px; padding:5px 8px; }
.money-inner td{ padding:5px 8px; border-bottom:1px dashed var(--line); }
.money-foot td{ font-weight:700; background:#f3f1ea; border-top:2px solid var(--line); }
.money-gst{ font-size:10.5px; }
.money-gst.inc{ background:#e7f2ed; color:#1f7a5c; }
.money-gst.ex{ background:#e4edfa; color:#2b5fa8; }
.money-gst.unk{ background:#fdebd2; color:#b5651d; }
.money-gst-note{ margin:10px 0; font-size:12.5px; color:var(--muted); }
.money-gst-note.warn{ color:#8a5a14; background:#fff8ea; border:1px solid #f0dcb0; border-radius:8px; padding:7px 12px; }
.money-actions{ opacity:1; display:flex; gap:6px; justify-content:flex-end; white-space:nowrap; }

.review-last-noted{ white-space:pre-wrap; overflow-wrap:anywhere; max-width:340px; margin-top:4px; padding:5px 8px; background:#faf8f3; border-left:3px solid var(--line-strong); border-radius:4px; font-size:12px; line-height:1.4; color:var(--ink); }
.review-note-head{ font-size:11px; color:var(--muted); font-weight:600; margin-bottom:2px; }

.review-note-none{ color:var(--muted); font-style:italic; background:transparent; border-left-color:var(--line); }

/* who / how / when a record was created, under each drawer's title */
.record-origin{ padding:7px 22px; background:#f6f3ec; border-bottom:1px solid var(--line); font-size:12px; color:var(--ink); line-height:1.5; }
.record-origin .ro-label{ font-weight:700; text-transform:uppercase; letter-spacing:.4px; font-size:10.5px; color:var(--muted); margin-right:4px; }
.record-origin .ro-sep{ margin:0 7px; color:var(--muted); }
.record-origin .ro-unknown{ color:var(--muted); }

/* ---------- Getting Started page and the Home welcome card ---------- */
.home-welcome{ display:flex; gap:16px; align-items:center; justify-content:space-between; flex-wrap:wrap; margin:0 0 14px; padding:14px 16px; border:1px solid var(--line-strong,#d9d6cc); border-left:4px solid var(--orange); border-radius:10px; background:var(--surface,#fff); }
.home-welcome-actions{ display:flex; gap:8px; }
.guide-flow{ display:flex; flex-wrap:wrap; align-items:stretch; gap:8px; }
.guide-step{ flex:1 1 150px; min-width:140px; display:flex; flex-direction:column; gap:4px; text-align:left; padding:12px; border:1px solid var(--line-strong,#d9d6cc); border-radius:10px; background:var(--surface,#fff); color:inherit; cursor:pointer; font:inherit; }
.guide-step:hover{ border-color:var(--orange); }
.guide-step-n{ display:inline-flex; width:22px; height:22px; border-radius:50%; background:var(--orange); color:#fff; font-size:12px; font-weight:700; align-items:center; justify-content:center; }
.guide-step-t{ font-weight:700; }
.guide-step-s{ font-size:12px; color:var(--muted); }
.guide-arrow{ align-self:center; color:var(--muted); font-size:18px; }
.guide-tasks{ display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:8px; }
.guide-task{ display:flex; justify-content:space-between; gap:10px; align-items:center; text-align:left; padding:9px 12px; border:1px solid var(--line-strong,#d9d6cc); border-radius:8px; background:var(--surface,#fff); color:inherit; cursor:pointer; font:inherit; }
.guide-task:hover{ border-color:var(--orange); }
.guide-task-where{ font-size:12px; color:var(--muted); white-space:nowrap; }
.guide-tips{ margin:0; padding-left:18px; display:grid; gap:6px; }
.guide-map{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; }
.guide-map-group h4{ margin:0 0 6px; font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.guide-map-group ul{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.guide-map-sub{ display:block; font-size:12px; color:var(--muted); }
/* board dragging: the card follows the pointer, a dashed gap shows where it will land */
.proj-card{ user-select:none; -webkit-user-select:none; }
.proj-card-ghost{ position:fixed; left:0; top:0; margin:0; z-index:9999; pointer-events:none; opacity:.97; cursor:grabbing; box-shadow:0 14px 30px rgba(0,0,0,.25); will-change:transform; transition:none; }
.proj-card-placeholder{ box-sizing:border-box; margin-bottom:8px; border:2px dashed var(--orange); background:var(--orange-light); border-radius:8px; }
body.board-dragging, body.board-dragging *{ cursor:grabbing !important; user-select:none !important; }

/* the coming copies of a repeating task, drawn on the calendars but not real yet */
.pcal-task.projected{ opacity:.55; border:1px dashed var(--line-strong); background:transparent; }
.cal-event-pill.cal-projected{ opacity:.55; outline:1px dashed rgba(0,0,0,.35); outline-offset:-2px; }

/* questions that open on top of another dialog (e.g. "which events?" while editing or deleting a calendar item) */
#recurrenceChoiceModalOverlay, #reasonPromptModalOverlay{ z-index:200; }

/* the time / duration picker: a box you can type in, with a list to pick from */
.time-combo{ cursor:text; }
.tc-menu{ position:fixed; z-index:230; max-height:260px; overflow-y:auto; background:var(--surface); border:1px solid var(--line-strong); border-radius:8px; box-shadow:0 10px 28px rgba(0,0,0,.18); padding:4px 0; }
.tc-item{ padding:7px 14px; font-size:13px; cursor:pointer; white-space:nowrap; }
.tc-item:hover, .tc-item.active{ background:var(--orange-light); }
.tc-item.selected{ font-weight:700; }

/* the sales pipeline: forecast table, journey chips, standard reason pickers */
.pf-wrap{ overflow-x:auto; }
.pf-table th, .pf-table td{ white-space:nowrap; }
.pf-main{ font-weight:600; }
tr.quote-replaced td{ opacity:.55; }
.journey-box{ background:var(--soft, #f3f1ec); border:1px solid var(--line); border-radius:8px; padding:10px 12px; margin:0 0 14px; }
.journey-box.inline{ margin:0 0 8px; padding:8px 10px; }
.journey-title{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; font-weight:700; color:var(--muted); margin-bottom:6px; }
.journey-steps{ display:flex; flex-wrap:wrap; align-items:stretch; gap:6px 4px; }
.jn-arrow{ align-self:center; color:var(--muted); font-size:13px; }
.jn{ text-align:left; background:var(--surface); border:1px solid var(--line); border-top:3px solid var(--muted); border-radius:6px; padding:5px 9px; font-family:inherit; cursor:pointer; max-width:210px; min-width:0; display:flex; flex-direction:column; gap:1px; }
.jn:hover{ border-color:var(--line-strong); box-shadow:var(--shadow); }
.jn.current{ outline:2px solid var(--orange); outline-offset:-1px; }
.jn.jn-lead{ border-top-color:#3E6FB0; } .jn.jn-rfq{ border-top-color:#8a5ac2; } .jn.jn-quote{ border-top-color:var(--orange); } .jn.jn-order{ border-top-color:#1F7A5C; } .jn.jn-invoice{ border-top-color:#2B5FA8; }
.jn.gone{ opacity:.6; }
.jn-kind{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
.jn-tag{ margin-left:6px; font-weight:600; text-transform:none; letter-spacing:0; color:var(--orange); }
.jn-label{ font-size:12.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.jn-meta{ font-size:11px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.loss-pick{ width:100%; margin-bottom:6px; }

/* Ion assistant: a floating button and a chat panel (rules and look-ups only, no AI model). Same look as the website's assistant. */
.assistant-btn{ grid-column:2; grid-row:1; display:inline-flex; align-items:center; gap:8px; border:0; border-radius:999px; padding:9px 18px 9px 14px; font:inherit; font-weight:700; font-size:13px; color:#fff; background:var(--orange); box-shadow:0 4px 12px rgba(0,0,0,.2); cursor:pointer; transition:transform .15s, filter .15s; }
.assistant-btn:hover{ filter:brightness(1.08); transform:translateY(1px); }
.assistant-btn.is-open{ background:var(--navy-light); }
.assistant-panel{ position:fixed; top:62px; left:calc(232px + (100% - 232px) / 2); margin-left:-205px; z-index:91; width:410px; max-width:calc(100vw - 24px); height:min(600px, calc(100vh - 80px)); display:flex; flex-direction:column; background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:16px; box-shadow:0 24px 64px rgba(0,0,0,.35); overflow:hidden; animation:assistant-in .18s ease-out; }
.assistant-panel[hidden]{ display:none; }
@keyframes assistant-in{ from{ opacity:0; transform:translateY(8px) scale(.98); } to{ opacity:1; transform:none; } }
.assistant-head{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 16px; background:var(--navy); color:#fff; border-bottom:3px solid var(--orange); }
.assistant-head strong{ display:block; font-size:15px; }
.assistant-head small{ display:block; font-weight:400; font-size:11.5px; color:#c9c9c9; margin-top:1px; }
.assistant-head-actions{ display:flex; gap:6px; align-items:center; }
.assistant-clear, .assistant-x{ border:1px solid rgba(255,255,255,.28); background:transparent; color:#fff; border-radius:8px; padding:4px 10px; font:inherit; font-size:12px; cursor:pointer; }
.assistant-clear:hover, .assistant-x:hover{ background:rgba(255,255,255,.12); }
.assistant-log{ flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:12px; scroll-behavior:smooth; background:var(--surface); }
.assistant-msg{ max-width:94%; padding:10px 13px; border-radius:14px; font-size:13px; line-height:1.5; overflow-wrap:anywhere; }
.assistant-msg.me{ align-self:flex-end; background:var(--orange); color:#fff; border-bottom-right-radius:4px; }
.assistant-msg.bot{ align-self:flex-start; width:100%; max-width:100%; background:var(--bg); border-bottom-left-radius:4px; }
.assistant-typing{ align-self:flex-start; display:flex; gap:5px; padding:12px 14px; background:var(--bg); border-radius:14px; border-bottom-left-radius:4px; }
.assistant-typing span{ width:7px; height:7px; border-radius:50%; background:var(--muted); animation:assistant-dot 1s infinite ease-in-out; }
.assistant-typing span:nth-child(2){ animation-delay:.15s; } .assistant-typing span:nth-child(3){ animation-delay:.3s; }
@keyframes assistant-dot{ 0%,80%,100%{ opacity:.25; transform:translateY(0); } 40%{ opacity:1; transform:translateY(-3px); } }
.assistant-items{ margin-top:10px; display:flex; flex-direction:column; gap:8px; }
.assistant-item{ display:flex; flex-direction:column; gap:2px; width:100%; text-align:left; border:1px solid var(--line); background:var(--surface); color:var(--ink); border-radius:12px; padding:9px 12px; font:inherit; font-size:13px; cursor:pointer; transition:border-color .12s, box-shadow .12s; }
.assistant-item:hover{ border-color:var(--orange); box-shadow:0 2px 8px rgba(0,0,0,.08); }
.assistant-item-title{ font-weight:700; }
.assistant-item small{ font-size:11.5px; color:var(--muted); }
.assistant-chips{ margin-top:10px; display:flex; flex-wrap:wrap; gap:6px 8px; align-items:center; }
.assistant-chip{ border:1px solid var(--line-strong); background:var(--surface); color:var(--ink); border-radius:999px; padding:5px 12px; font:inherit; font-size:12.5px; cursor:pointer; text-align:left; }
.assistant-chip:hover{ border-color:var(--orange); color:var(--orange); }
.assistant-chip.go{ background:var(--orange); border-color:var(--orange); color:#fff; font-weight:700; }
.assistant-chip.go:hover{ filter:brightness(1.1); color:#fff; }
.assistant-confirm{ margin-top:10px; padding:11px 13px; border:1px solid var(--orange); border-left-width:4px; border-radius:12px; background:var(--surface); font-size:12.5px; line-height:1.5; }
.assistant-confirm .assistant-chips{ margin-top:10px; }
.assistant-form{ display:flex; gap:8px; padding:10px 12px; border-top:1px solid var(--line); background:var(--surface); }
.assistant-form input{ flex:1; min-width:0; padding:10px 14px; border-radius:999px; border:1px solid var(--line-strong); background:var(--bg); color:var(--ink); font:inherit; font-size:13px; }
.assistant-form input:focus{ outline:2px solid var(--orange); outline-offset:-1px; }
.assistant-form .btn{ border-radius:999px; padding:8px 18px; }
@media (max-width:800px){ .assistant-panel{ left:50%; } }
@media (max-width:520px){ .assistant-panel{ right:8px; left:8px; margin-left:0; width:auto; max-width:none; top:56px; height:calc(100vh - 70px); } }
@media (prefers-reduced-motion:reduce){ .assistant-panel, .assistant-btn, .assistant-typing span{ animation:none; transition:none; } }
.assistant-form .btn{ background:var(--orange); border-color:var(--orange); color:#fff; font-weight:700; }
.assistant-btn[hidden]{ display:none; }

/* ---------- Part Builder ---------- */
.pb { display:flex; flex-direction:column; gap:14px; }
.pb-grid { display:grid; grid-template-columns:minmax(260px, 1fr) minmax(0, 2fr); gap:22px; align-items:start; }
.pb-col { background:var(--bg-raised, #fff); border:1px solid var(--border, #e3e6ee); border-radius:10px; padding:16px 18px; min-width:0; }
.pb-h { margin:0 0 10px; font-size:15px; }
.pb-sub-h { margin:14px 0 4px; font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:0.04em; color:var(--text-muted, #6b7280); }
.pb-group { margin-bottom:14px; }
.pb-group-h { font-weight:600; margin-bottom:4px; }
.pb-group select, .pb-group input[type=number] { max-width:100%; }
.pb-check, .pb-qty { display:flex; gap:8px; align-items:center; padding:3px 0; }
.pb-qty input { width:4.5em; }
.pb-blocked { color:var(--text-muted, #9ca3af); }
.pb-desc { font-weight:600; margin-bottom:2px; }
.pb-key { word-break:break-all; margin-bottom:8px; }
.pb-state { display:inline-block; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:600; margin:4px 0 6px; }
.pb-ok { background:#e6f4ea; color:#1e6b34; }
.pb-warn { background:#fff4e0; color:#8a5a00; }
.pb-bad { background:#fdeaea; color:#a32323; }
.pb-list { margin:2px 0 6px 18px; padding:0; font-size:13px; }
.pb-errors li { color:#a32323; }
.pb-warnings li { color:#8a5a00; }
.pb-lines { margin-top:12px; }
.pb-q-current { color:#1e6b34; } .pb-q-expiring { color:#8a5a00; font-weight:600; } .pb-q-expired, .pb-q-none { color:#a32323; font-weight:600; }
.pb-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.pb-config { margin-top:16px; padding-top:12px; border-top:1px solid var(--border, #e3e6ee); }
.pb-events li { color:inherit; }
@media (max-width:900px){ .pb-grid { grid-template-columns:1fr; } }
/* Drag an email onto Calendar: the appointment panel beside the email */
.appt-panel{ position:fixed; top:0; right:0; bottom:0; width:430px; max-width:94vw; background:var(--surface); border-left:1px solid var(--line-color, #e3ded4); box-shadow:-8px 0 30px rgba(28,35,51,0.15);
  z-index:45; display:none; flex-direction:column; }
.appt-panel.open{ display:flex; }
body.appt-open:not(.appt-over-drawer) .main-area{ margin-right:430px; }
.appt-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding:16px 18px 10px; border-bottom:1px solid var(--line-color, #e3ded4); }
.appt-title{ font-weight:800; font-size:16px; }
.appt-sub{ font-size:12px; color:var(--muted); margin-top:2px; overflow-wrap:anywhere; }
.appt-body{ flex:1; overflow-y:auto; padding:12px 18px; }
.appt-intro{ font-size:12.5px; color:var(--muted); margin-bottom:10px; }
.appt-none{ padding:14px; border:1px dashed var(--line-color, #e3ded4); border-radius:10px; margin-bottom:10px; }
.appt-card{ border:1px solid var(--line-color, #e3ded4); border-radius:12px; padding:12px; margin-bottom:12px; background:var(--surface); }
.appt-card.appt-off{ opacity:0.55; }
.appt-card-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
.appt-include{ display:inline-flex; align-items:center; gap:6px; font-weight:700; cursor:pointer; }
.appt-badge{ font-size:11px; padding:2px 8px; border-radius:999px; background:var(--surface-2, #f3eee6); color:var(--muted); white-space:nowrap; }
.appt-conf-low{ background:#fde8e6; color:#9b2c1f; }
.appt-flag{ font-size:12px; background:#fff4d6; border:1px solid #f0d58a; color:#6b4e00; border-radius:8px; padding:6px 8px; margin-bottom:8px; }
.appt-evidence{ font-size:11.5px; color:var(--muted); font-style:italic; margin:-4px 0 8px; overflow-wrap:anywhere; }
.appt-card-foot{ text-align:right; margin-top:4px; }
.appt-foot{ display:flex; justify-content:flex-end; gap:8px; padding:12px 18px; border-top:1px solid var(--line-color, #e3ded4); }
body.qca-silent #quickCalAddModalOverlay{ visibility:hidden; }
@media (max-width:900px){ body.appt-open:not(.appt-over-drawer) .main-area{ margin-right:0; } }
.pb-editor { background:var(--bg-raised, #fff); border:1px solid var(--border, #e3e6ee); border-left:4px solid #F5871F; border-radius:10px; padding:14px 18px; }
.pb-editor-h { margin-bottom:6px; }
.pb-ed-group { margin-top:14px; }
.pb-ed-group-h { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:6px; }
.pb-off td { opacity:0.55; }
.pb-badge { display:inline-block; padding:1px 7px; border-radius:999px; font-size:11px; background:#eceff4; color:#4b5563; }
.pb-badge-warn { background:#fff4e0; color:#8a5a00; }
#pbFormModalOverlay textarea { width:100%; font-family:inherit; }
.pb-cov-cards { display:flex; flex-wrap:wrap; gap:12px; margin:12px 0; }
.pb-cov-card { min-width:150px; padding:10px 14px; border:1px solid var(--border, #e3e6ee); border-radius:10px; background:var(--bg-raised, #fff); }
.pb-cov-n { font-size:24px; font-weight:600; }
.pb-cov-detail > td { background:var(--bg-sunken, #f7f8fb); }
.pb-imp-form { display:flex; flex-wrap:wrap; gap:12px; margin:12px 0; }
.pb-imp-form .field { min-width:160px; }
#pbi_text { width:100%; font-family:ui-monospace, Consolas, monospace; font-size:12px; }
.pb-imp-map { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin:14px 0; }
.pb-imp-map .pb-h { flex-basis:100%; margin:0; }
.pb-imp-unmatched td, .pb-imp-problem td, .pb-imp-duplicate td { background:var(--bg-sunken, #f7f8fb); }
#pbi_file { width:auto; border:0; padding:0; }

/* Converting a lead: the "already in the CRM?" question */
.lm-option{ display:flex; align-items:flex-start; gap:8px; padding:8px 10px; border:1px solid var(--line-color, #e3ded4); border-radius:8px; margin-bottom:6px; cursor:pointer; font-size:13px; }
.lm-option:hover{ background:var(--surface-2, #f3eee6); }
.lm-option input{ margin-top:3px; }
#leadMatchModalOverlay{ z-index:60; }

/* ---------- Feedback log: the button on every page, the report form, the log page ---------- */
.topbar-assist{ grid-column:2; grid-row:1; display:flex; align-items:center; justify-content:center; gap:10px; }
.topbar-assist .assistant-btn{ grid-column:auto; grid-row:auto; }
.feedback-group{ display:inline-flex; align-items:stretch; box-shadow:0 4px 12px rgba(0,0,0,.2); border-radius:999px; }
.feedback-group .feedback-btn{ box-shadow:none; border-radius:999px 0 0 999px; padding-right:14px; }
.feedback-log-btn{ display:inline-flex; align-items:center; gap:6px; border:0; border-left:1px solid rgba(255,255,255,.3); border-radius:0 999px 999px 0; padding:9px 14px 9px 10px; color:#fff; background:var(--navy); cursor:pointer; }
.feedback-log-btn:hover{ background:var(--navy-light); }
.feedback-count{ min-width:18px; padding:1px 6px; border-radius:999px; background:var(--orange); color:#fff; font-size:11px; font-weight:700; text-align:center; }
.feedback-btn{ display:inline-flex; align-items:center; gap:8px; border:0; border-radius:999px; padding:9px 18px 9px 14px; font:inherit; font-weight:700; font-size:13px; color:#fff; background:var(--navy); box-shadow:0 4px 12px rgba(0,0,0,.2); cursor:pointer; transition:transform .15s, background .15s; }
.feedback-btn:hover{ background:var(--navy-light); transform:translateY(1px); }
@media (max-width:640px){ .topbar-assist{ grid-column:1; grid-row:auto; justify-self:start; } }
@media print{ .topbar-assist{ display:none !important; } }
.fb-box .modal-body{ max-height:70vh; overflow-y:auto; }
.fb-see-all{ margin-right:auto; font-size:12.5px; align-self:center; color:var(--ink-muted,#666); }
.fb-kinds{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.fb-kind-btn{ display:inline-flex; align-items:center; gap:6px; padding:7px 11px; border:1px solid var(--line-strong); border-radius:999px; background:var(--surface,#fff); color:var(--ink); font-size:12.5px; cursor:pointer; }
.fb-kind-btn.active{ background:var(--navy); color:#fff; border-color:var(--navy); }
.fb-radio{ display:block; font-weight:400; margin:4px 0; font-size:13px; }
.fb-radio input{ width:auto; margin-right:6px; }
.fb-drop{ border:1.5px dashed var(--line-strong); border-radius:8px; padding:14px; text-align:center; color:var(--ink-muted,#666); font-size:13px; cursor:pointer; }
.fb-drop.over, .fb-drop:focus{ border-color:var(--orange,#DB6B1B); background:var(--surface-2,#f3eee6); outline:none; }
.fb-drop-small{ padding:7px; margin-top:6px; font-size:12px; }
.fb-thumbs{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.fb-thumb{ position:relative; display:inline-block; }
.fb-thumb img{ height:70px; border-radius:6px; border:1px solid var(--line-strong); display:block; }
.fb-thumb-edit{ position:absolute; bottom:-6px; right:-6px; width:22px; height:22px; border-radius:50%; border:0; background:var(--orange,#DB6B1B); color:#fff; font-size:11px; cursor:pointer; line-height:22px; padding:0; }
.fb-annot{ position:fixed; inset:0; z-index:300; background:rgba(12,15,24,.98); display:flex; flex-direction:column; }
.fb-annot-bar{ display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center; padding:10px 16px; background:#1b2030; color:#fff; }
.fb-annot-group{ display:inline-flex; gap:6px; align-items:center; }
.fb-annot-end{ margin-left:auto; }
.fb-annot-btn{ background:#2a3046; color:#fff; border:1px solid #3a4260; border-radius:7px; padding:6px 10px; font-size:12.5px; cursor:pointer; }
.fb-annot-btn.active{ background:var(--orange,#DB6B1B); border-color:var(--orange,#DB6B1B); }
.fb-annot-btn:disabled{ opacity:.45; cursor:default; }
.fb-annot-colour{ width:24px; height:24px; border-radius:50%; border:2px solid #fff3; cursor:pointer; padding:0; }
.fb-annot-colour.active{ border-color:#fff; box-shadow:0 0 0 2px var(--orange,#DB6B1B); }
.fb-annot .btn-ghost{ color:#fff; border:1px solid #5a6488; background:transparent; }
.fb-annot .btn-ghost:hover{ background:#2a3046; }
.fb-annot-hint{ color:#cbd5e1; font-size:12px; padding:6px 16px 0; }
.fb-annot-stage{ flex:1; min-height:0; display:flex; align-items:center; justify-content:center; padding:10px 16px 16px; }
.fb-annot-wrap{ position:relative; display:inline-block; max-width:100%; max-height:100%; line-height:0; }
.fb-annot-wrap canvas{ max-width:calc(100vw - 40px); max-height:calc(100vh - 150px); width:auto; height:auto; background:#fff; border-radius:4px; box-shadow:0 6px 24px rgba(0,0,0,.5); }
.fb-annot-text{ position:absolute; min-width:140px; background:rgba(255,255,255,.92); border:1.5px dashed currentColor; border-radius:3px; padding:0 4px; font-weight:700; line-height:1.25; outline:none; }
.fb-thumb-x{ position:absolute; top:-6px; right:-6px; width:20px; height:20px; border-radius:50%; border:0; background:var(--navy); color:#fff; font-size:11px; cursor:pointer; line-height:20px; padding:0; }
.fb-context{ font-size:11.5px; color:var(--ink-muted,#666); line-height:1.5; border-top:1px solid var(--line); padding-top:10px; }
.fb-similar{ background:var(--surface-2,#f3eee6); border-radius:8px; padding:10px; margin:-6px 0 14px; font-size:12.5px; }
.fb-similar-head{ font-weight:600; margin-bottom:6px; }
.fb-similar-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:4px 0; }
.fb-badge{ display:inline-block; padding:2px 8px; border-radius:999px; font-size:11.5px; font-weight:600; }
.fb-kind{ font-size:12.5px; white-space:nowrap; }
.fb-text{ white-space:pre-wrap; font-size:13.5px; line-height:1.55; }
.fb-gallery{ display:flex; flex-wrap:wrap; gap:8px; margin:10px 0; }
.fb-gallery img{ max-height:160px; max-width:100%; border-radius:6px; border:1px solid var(--line-strong); cursor:zoom-in; }
.fb-meta{ width:auto; font-size:12.5px; margin-top:8px; }
.fb-meta td{ padding:2px 14px 2px 0; border:0; vertical-align:top; }
.fb-meta td:first-child{ color:var(--ink-muted,#666); }
.fb-section-title{ font-weight:700; font-size:13px; margin:16px 0 6px; }
.fb-resolution{ background:#e8f5ec; border-radius:8px; padding:10px 12px; margin-bottom:10px; font-size:13px; }
.fb-triage{ background:var(--surface-2,#f3eee6); border-radius:8px; padding:12px; margin-top:12px; }
.fb-triage-row{ display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; }
.fb-triage-row .field{ flex:1; min-width:150px; }
.fb-comment{ border-top:1px solid var(--line); padding:8px 0; }
.fb-comment-head{ font-size:12.5px; margin-bottom:2px; }
.fb-system{ font-size:11.5px; color:var(--ink-muted,#666); padding:3px 0; }
.fb-cards{ display:flex; flex-wrap:wrap; gap:12px; align-items:stretch; margin-bottom:14px; }
.fb-card{ background:var(--surface,#fff); border:1px solid var(--line); border-radius:10px; padding:10px 16px; min-width:120px; }
.fb-card-n{ font-size:24px; font-weight:700; }
.fb-card-l{ font-size:12px; color:var(--ink-muted,#666); }
.fb-card-actions{ margin-left:auto; display:flex; gap:8px; align-items:center; }
.fb-filters{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.fb-filters select, .fb-filters input{ width:auto; min-width:140px; }
.fb-table tbody tr{ cursor:pointer; }
.mb-load-older{ padding:10px 12px; text-align:center; border-top:1px solid var(--line); }
.mb-preview{ position:fixed; inset:0; z-index:10000; background:rgba(0,0,0,.72); display:flex; flex-direction:column; padding:16px; }
.mb-preview-head{ display:flex; align-items:center; gap:8px; padding:8px 12px; background:var(--surface); border-radius:10px 10px 0 0; border-bottom:1px solid var(--line); }
.mb-preview-title{ flex:1; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mb-preview-body{ flex:1; min-height:0; background:var(--surface); border-radius:0 0 10px 10px; display:flex; align-items:center; justify-content:center; overflow:auto; }
.mb-preview-body img{ max-width:100%; max-height:100%; object-fit:contain; }
.mb-preview-body iframe{ width:100%; height:100%; border:0; background:#fff; }

/* calendar views: the view switch, the Week / Day time grid and the Agenda (0385-calendar-views.js) */
.cal-view-switch{ display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.cal-view-switch .btn{ border-radius:0; border:0; border-right:1px solid var(--line); margin:0; }
.cal-view-switch .btn:last-child{ border-right:0; }
.cal-view-switch .btn.on{ background:var(--orange-light); color:var(--orange); font-weight:700; }
.cal-tg{ border:1px solid var(--line-color); border-radius:8px; overflow:hidden; background:var(--surface); }
.cal-tg-row{ display:grid; grid-template-columns:54px repeat(var(--cal-cols), minmax(110px, 1fr)); }
.cal-tg-gutter{ font-size:11px; color:var(--muted); padding:4px 6px; text-align:right; border-right:1px solid var(--line-color); }
.cal-tg-headrow{ border-bottom:1px solid var(--line-color); background:var(--surface-2); }
.cal-tg-dayhead{ padding:6px 8px; font-size:12.5px; text-align:center; cursor:pointer; border-right:1px solid var(--line-color); }
.cal-tg-dayhead:hover{ background:var(--line); }
.cal-tg-dayhead.today{ color:var(--orange); font-weight:700; }
.cal-tg-alldayrow{ border-bottom:1px solid var(--line-color); }
.cal-tg-allday-cell{ padding:3px; min-height:30px; border-right:1px solid var(--line-color); display:flex; flex-direction:column; gap:2px; min-width:0; }
.cal-tg-allday-cell .cal-event-pill{ border-left:3px solid; }
.cal-tg-body{ max-height:calc(100vh - 330px); min-height:260px; overflow-y:auto; overflow-x:auto; }
.cal-tg-hours{ padding:0; }
.cal-tg-hour{ box-sizing:border-box; border-bottom:1px solid var(--line-color); position:relative; }
.cal-tg-hour span{ position:absolute; top:-7px; right:6px; font-size:10.5px; color:var(--muted); background:var(--surface); padding:0 2px; }
.cal-tg-col{ position:relative; border-right:1px solid var(--line-color); background-image:repeating-linear-gradient(to bottom, transparent 0, transparent 47px, var(--line-color) 47px, var(--line-color) 48px); cursor:cell; touch-action:pan-y; user-select:none; }
.cal-tg-col.today{ background-color:var(--orange-light); }
.cal-tg-event{ position:absolute; box-sizing:border-box; border-radius:5px; color:#fff; font-size:11.5px; line-height:1.25; padding:2px 5px; overflow:hidden; cursor:pointer; box-shadow:0 1px 2px rgba(0,0,0,.25); touch-action:none; }
.cal-tg-event.editable{ cursor:grab; }
.cal-tg-event.dragging{ opacity:.85; cursor:grabbing; z-index:5; box-shadow:0 4px 12px rgba(0,0,0,.4); }
.cal-tg-event:focus-visible{ outline:2px solid var(--orange); outline-offset:1px; }
.cal-tg-event-time{ font-weight:700; font-size:10.5px; opacity:.95; }
.cal-tg-event-title{ overflow:hidden; }
.cal-tg-resize{ position:absolute; left:0; right:0; bottom:0; height:7px; cursor:ns-resize; background:linear-gradient(to bottom, transparent, rgba(0,0,0,.25)); }
.cal-tg-ghost{ position:absolute; left:2px; right:2px; border:2px dashed var(--orange); background:var(--orange-light); border-radius:5px; font-size:11px; padding:2px 5px; color:var(--ink); pointer-events:none; z-index:4; }
.cal-tg-now{ position:absolute; left:0; right:0; height:0; border-top:2px solid #d92d20; z-index:3; pointer-events:none; }
.cal-tg-now::before{ content:''; position:absolute; left:-4px; top:-5px; width:8px; height:8px; border-radius:50%; background:#d92d20; }
.cal-agenda{ display:flex; flex-direction:column; gap:10px; }
.cal-ag-day{ border:1px solid var(--line-color); border-radius:8px; background:var(--surface); overflow:hidden; }
.cal-ag-day.today{ border-color:var(--orange); }
.cal-ag-date{ padding:6px 10px; background:var(--surface-2); font-size:12.5px; border-bottom:1px solid var(--line-color); }
.cal-ag-item{ display:flex; align-items:center; gap:10px; padding:7px 10px; border-left:4px solid; border-bottom:1px solid var(--line); cursor:pointer; }
.cal-ag-item:last-child{ border-bottom:0; }
.cal-ag-item:hover, .cal-ag-item:focus-visible{ background:var(--surface-2); outline:none; }
.cal-ag-time{ flex:0 0 64px; font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; }
.cal-ag-main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.cal-ag-title{ font-size:13.5px; overflow-wrap:anywhere; }
.cal-ag-sub{ font-size:12px; color:var(--muted); overflow-wrap:anywhere; }
@media (max-width: 700px){ .cal-tg-row{ grid-template-columns:44px repeat(var(--cal-cols), minmax(120px, 1fr)); } .cal-tg-body{ max-height:calc(100vh - 260px); } }