/* ==========================================================================
   IPMS - Integrated Project Management System
   Design system : notion style, light default + dark support
   ========================================================================== */

:root{
    --bg:            #ffffff;
    --bg-sunken:     #f7f7f5;
    --surface:       #ffffff;
    --surface-hover: #f1f1ef;
    --surface-soft:  #f7f7f5;
    --border:        #e9e9e7;
    --border-strong: #dcdcd8;
    --text:          #37352f;
    --text-soft:     #6b6a65;
    --text-muted:    #9b9a97;
    --accent:        #2383e2;
    --accent-soft:   #e7f3fb;
    --green:         #0f7b47;
    --green-soft:    #ddf3e7;
    --amber:         #a8760a;
    --amber-soft:    #fbf0d9;
    --red:           #c4392b;
    --red-soft:      #fbe4e1;
    --violet:        #6940a5;
    --violet-soft:   #ede9f6;
    --shadow-sm:     0 1px 2px rgba(15,15,15,.06);
    --shadow:        0 4px 14px rgba(15,15,15,.10);
    --shadow-lg:     0 12px 34px rgba(15,15,15,.16);
    --radius:        6px;
    --radius-lg:     10px;
    --sidebar-w:     248px;
    --topbar-h:      48px;
    --font:          -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Helvetica, Arial, sans-serif;
}

body.dark{
    --bg:            #191919;
    --bg-sunken:     #202020;
    --surface:       #202020;
    --surface-hover: #2c2c2c;
    --surface-soft:  #252525;
    --border:        #2f2f2f;
    --border-strong: #3d3d3d;
    --text:          #e8e8e6;
    --text-soft:     #a5a49f;
    --text-muted:    #7e7d79;
    --accent:        #529cca;
    --accent-soft:   #1c3243;
    --green:         #4dab7a;
    --green-soft:    #1c3329;
    --amber:         #d9a441;
    --amber-soft:    #392c1c;
    --red:           #e0655a;
    --red-soft:      #3b2422;
    --violet:        #9a7fd0;
    --violet-soft:   #2b2438;
    --shadow-sm:     0 1px 2px rgba(0,0,0,.35);
    --shadow:        0 4px 14px rgba(0,0,0,.45);
    --shadow-lg:     0 12px 34px rgba(0,0,0,.55);
}

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

html,body{ height:100%; }

body{
    background:var(--bg);
    color:var(--text);
    font-family:var(--font);
    font-size:14px;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
}

a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; font-size:inherit; cursor:pointer; border:0; background:none; color:inherit; }
input,select,textarea{ font-family:inherit; font-size:inherit; color:inherit; }

/* ---------------------------------------------------------------- layout */

.app{ display:flex; min-height:100vh; }

.sidebar{
    width:var(--sidebar-w);
    flex:0 0 var(--sidebar-w);
    background:var(--bg-sunken);
    border-right:1px solid var(--border);
    display:flex;
    flex-direction:column;
    position:sticky;
    top:0;
    height:100vh;
    overflow-y:auto;
}

.sidebar-brand{
    display:flex;
    align-items:center;
    gap:9px;
    padding:14px 14px 10px;
    font-weight:700;
    font-size:15px;
    letter-spacing:-.01em;
}

.brand-mark{
    width:26px; height:26px;
    border-radius:7px;
    background:linear-gradient(135deg,var(--accent),var(--violet));
    color:#fff;
    display:grid; place-items:center;
    font-size:13px; font-weight:800;
    flex:0 0 26px;
}

.brand-sub{ font-size:11px; color:var(--text-muted); font-weight:500; display:block; margin-top:-2px; }

.nav-section{ padding:8px 8px 2px; }
.nav-title{
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:var(--text-muted);
    font-weight:600;
    padding:8px 8px 4px;
}

.nav-link{
    display:flex;
    align-items:center;
    gap:9px;
    padding:6px 8px;
    border-radius:var(--radius);
    color:var(--text-soft);
    font-size:13.5px;
    font-weight:500;
    margin-bottom:1px;
    transition:background .12s ease, color .12s ease;
}
.nav-link i{ font-size:15px; width:17px; text-align:center; flex:0 0 17px; }
.nav-link:hover{ background:var(--surface-hover); color:var(--text); }
.nav-link.active{ background:var(--surface-hover); color:var(--text); font-weight:600; }
.nav-link .nav-count{
    margin-left:auto;
    font-size:11px;
    color:var(--text-muted);
    background:var(--surface);
    border:1px solid var(--border);
    padding:0 6px;
    border-radius:20px;
}

.sidebar-foot{ margin-top:auto; padding:10px; border-top:1px solid var(--border); }

.user-chip{ display:flex; align-items:center; gap:9px; padding:6px 8px; border-radius:var(--radius); }
.user-chip:hover{ background:var(--surface-hover); }
.user-avatar{
    width:26px; height:26px; border-radius:50%;
    background:var(--accent); color:#fff;
    display:grid; place-items:center;
    font-size:11px; font-weight:700; flex:0 0 26px;
    overflow:hidden;
}
.user-avatar img{ width:100%; height:100%; object-fit:cover; }
.user-name{ font-size:13px; font-weight:600; line-height:1.2; }
.user-role{ font-size:11px; color:var(--text-muted); }

/* ---------------------------------------------------------------- main */

.main{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }

.topbar{
    height:var(--topbar-h);
    border-bottom:1px solid var(--border);
    display:flex;
    align-items:center;
    gap:10px;
    padding:0 16px;
    position:sticky; top:0;
    background:var(--bg);
    z-index:30;
}

.crumb{ display:flex; align-items:center; gap:6px; font-size:13px; color:var(--text-muted); min-width:0; }
.crumb a{ padding:2px 6px; border-radius:4px; white-space:nowrap; }
.crumb a:hover{ background:var(--surface-hover); color:var(--text); }
.crumb .crumb-now{ color:var(--text); font-weight:600; }

.topbar-right{ margin-left:auto; display:flex; align-items:center; gap:6px; }

.icon-btn{
    width:28px; height:28px;
    display:grid; place-items:center;
    border-radius:var(--radius);
    color:var(--text-soft);
    font-size:15px;
}
.icon-btn:hover{ background:var(--surface-hover); color:var(--text); }

.content{ padding:20px 24px 60px; flex:1 1 auto; }

.page-head{ display:flex; align-items:flex-start; gap:14px; margin-bottom:16px; flex-wrap:wrap; }
.page-title{ font-size:26px; font-weight:700; letter-spacing:-.02em; line-height:1.2; }
.page-sub{ font-size:13px; color:var(--text-muted); margin-top:2px; }
.page-head-actions{ margin-left:auto; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

/* ---------------------------------------------------------------- buttons */

.btn{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 11px;
    border-radius:var(--radius);
    font-size:13px;
    font-weight:500;
    border:1px solid var(--border-strong);
    background:var(--surface);
    color:var(--text);
    white-space:nowrap;
    transition:background .12s ease, border-color .12s ease;
}
.btn:hover{ background:var(--surface-hover); }
.btn i{ font-size:14px; }

.btn-primary{ background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600; }
.btn-primary:hover{ filter:brightness(1.07); background:var(--accent); }

.btn-danger{ background:var(--red); border-color:var(--red); color:#fff; }
.btn-danger:hover{ filter:brightness(1.07); background:var(--red); }

.btn-ghost{ border-color:transparent; background:transparent; color:var(--text-soft); }
.btn-ghost:hover{ background:var(--surface-hover); color:var(--text); }

.btn-sm{ padding:3px 8px; font-size:12px; }
.btn-icon{ padding:5px; width:28px; justify-content:center; }

/* ---------------------------------------------------------------- toolbar / filters */

.toolbar{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    padding:8px 0 10px;
    border-bottom:1px solid var(--border);
    margin-bottom:2px;
}

.view-tabs{ display:flex; gap:2px; align-items:center; }
.view-tab{
    display:inline-flex; align-items:center; gap:6px;
    padding:5px 9px;
    font-size:13px; font-weight:500;
    color:var(--text-muted);
    border-radius:var(--radius);
    border-bottom:2px solid transparent;
}
.view-tab:hover{ background:var(--surface-hover); color:var(--text); }
.view-tab.active{ color:var(--text); font-weight:600; border-bottom-color:var(--text); border-radius:var(--radius) var(--radius) 0 0; }

.search-box{
    display:flex; align-items:center; gap:6px;
    background:var(--surface-soft);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:4px 9px;
    min-width:210px;
}
.search-box i{ color:var(--text-muted); font-size:14px; }
.search-box input{ border:0; background:transparent; outline:none; width:100%; font-size:13px; }

.filter-select{
    background:var(--surface-soft);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:5px 8px;
    font-size:12.5px;
    color:var(--text-soft);
    outline:none;
    cursor:pointer;
    max-width:190px;
}
.filter-select:focus{ border-color:var(--accent); }

.chip-row{ display:flex; gap:6px; flex-wrap:wrap; padding:10px 0; }
.chip{
    display:inline-flex; align-items:center; gap:6px;
    padding:4px 10px;
    border-radius:20px;
    font-size:12.5px;
    font-weight:500;
    border:1px solid var(--border-strong);
    background:var(--surface);
    color:var(--text-soft);
    cursor:pointer;
    transition:all .12s ease;
}
.chip:hover{ background:var(--surface-hover); color:var(--text); }
.chip.active{ background:var(--text); border-color:var(--text); color:var(--bg); font-weight:600; }
.chip .chip-count{ font-size:11px; opacity:.7; }

/* ---------------------------------------------------------------- table */

.tbl-wrap{
    overflow-x:auto;
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    background:var(--surface);
}

table.tbl{ width:100%; border-collapse:separate; border-spacing:0; font-size:13px; min-width:1080px; }

table.tbl thead th{
    text-align:left;
    font-weight:500;
    font-size:12px;
    color:var(--text-muted);
    padding:8px 10px;
    background:var(--surface-soft);
    border-bottom:1px solid var(--border);
    white-space:nowrap;
    position:sticky; top:0; z-index:5;
}
table.tbl thead th i{ font-size:12px; margin-right:5px; opacity:.75; }
table.tbl thead th.num, table.tbl tbody td.num{ text-align:right; }

table.tbl tbody td{
    padding:8px 10px;
    border-bottom:1px solid var(--border);
    vertical-align:middle;
    color:var(--text);
}
table.tbl tbody tr:last-child td{ border-bottom:0; }
table.tbl tbody tr:hover td{ background:var(--surface-hover); }

.row-index{ color:var(--text-muted); font-size:12px; width:42px; }
.row-title{ font-weight:600; }
.row-title a:hover{ text-decoration:underline; }
.row-sub{ font-size:11.5px; color:var(--text-muted); }

.cell-actions{ display:flex; gap:3px; opacity:0; transition:opacity .12s ease; }
table.tbl tbody tr:hover .cell-actions{ opacity:1; }

.empty-state{ padding:44px 20px; text-align:center; color:var(--text-muted); }
.empty-state i{ font-size:30px; display:block; margin-bottom:10px; opacity:.5; }
.empty-state .empty-title{ font-weight:600; color:var(--text); margin-bottom:4px; }

/* report row links : discoverable without shouting */
table.tbl .row-title a,
table.tbl .row-sub a{ color:var(--accent); }
table.tbl .row-title a:hover,
table.tbl .row-sub a:hover{ text-decoration:underline; }
table.tbl td.soft a{ color:inherit; }
/* A statement line that opens the detail behind it. A financial statement full
   of blue would read badly, so the hint is a faint dotted rule under the label
   and the full accent treatment is kept for hover. */
table.tbl tr.drill-row:hover{ background:var(--surface-hover); }
table.tbl tr.drill-row a{ color:inherit; }
table.tbl tr.drill-row td:nth-child(2) a{ border-bottom:1px dotted var(--text-muted); }
table.tbl tr.drill-row:hover a{ color:var(--accent); }
table.tbl tr.drill-row:hover td:nth-child(2) a{ border-bottom-color:var(--accent); }
table.tbl tr.drill-row:hover td.num a{ text-decoration:underline; }
@media print{ table.tbl tr.drill-row a{ border-bottom:0 !important; } }

/* a summary tile that drills through */
a.card.stat-drill{ display:block; transition:border-color .12s ease, box-shadow .12s ease; }
a.card.stat-drill:hover{ border-color:var(--accent); box-shadow:var(--shadow-sm); }
a.card.stat-drill:hover .stat-label{ color:var(--accent); }
table.tbl td.soft a:hover{ color:var(--accent); text-decoration:underline; }
@media print{ table.tbl a{ color:#000 !important; text-decoration:none !important; } }

/* a person's photo, on the detail page and in the list */
.emp-photo{
    width:74px; height:74px;
    flex:0 0 74px;
    border-radius:10px;
    overflow:hidden;
    background:var(--surface-soft);
    border:1px solid var(--border);
    display:grid; place-items:center;
}
.emp-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.emp-initials{ font-size:22px; font-weight:700; color:var(--text-muted); letter-spacing:.02em; }

.emp-avatar{
    width:34px; height:34px;
    flex:0 0 34px;
    border-radius:50%;
    overflow:hidden;
    background:var(--surface-soft);
    border:1px solid var(--border);
    display:inline-grid; place-items:center;
    vertical-align:middle;
}
.emp-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.emp-avatar span{ font-size:12px; font-weight:700; color:var(--text-muted); }

/* a person in a list : the picture on the left, name over job title beside it,
   the two lines sharing one left edge rather than the name being pushed in */
.cell-person{ display:flex; align-items:center; gap:10px; min-width:0; }
.cell-person-text{ min-width:0; display:flex; flex-direction:column; line-height:1.32; }
.cell-person-text .row-title,
.cell-person-text .row-sub{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* the role permission grid : many small cells, so it is tightened up and the
   group headings break it into readable blocks */
table.tbl.perm-grid th,
table.tbl.perm-grid td{ padding:7px 8px; }
table.tbl.perm-grid th.center, table.tbl.perm-grid td.center{ text-align:center; }
table.tbl.perm-grid tr.perm-group td{ background:var(--surface-soft); padding:6px 10px; font-size:11.5px;
    text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); }
table.tbl.perm-grid .row-sub a{ cursor:pointer; color:var(--accent); }
table.tbl.perm-grid .row-sub a:hover{ text-decoration:underline; }
table.tbl.perm-grid input.perm-box{ width:15px; height:15px; cursor:pointer; accent-color:var(--accent); }

/* ---------------------------------------------------------------- pills */

.pill{
    display:inline-flex; align-items:center; gap:5px;
    padding:2px 9px;
    border-radius:20px;
    font-size:11.5px;
    font-weight:500;
    white-space:nowrap;
    background:var(--surface-soft);
    color:var(--text-soft);
}
.pill .dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }

.pill-green{  background:var(--green-soft);  color:var(--green); }
.pill-blue{   background:var(--accent-soft); color:var(--accent); }
.pill-amber{  background:var(--amber-soft);  color:var(--amber); }
.pill-red{    background:var(--red-soft);    color:var(--red); }
.pill-violet{ background:var(--violet-soft); color:var(--violet); }
.pill-slate{  background:var(--surface-soft);color:var(--text-soft); }
.pill-teal{   background:var(--green-soft);  color:var(--green); }
.pill-orange{ background:var(--amber-soft);  color:var(--amber); }

/* ---------------------------------------------------------------- inline status select */

.status-select{
    -webkit-appearance:none;
    appearance:none;
    border:1px solid transparent;
    border-radius:20px;
    padding:2px 22px 2px 10px;
    font-size:11.5px;
    font-weight:500;
    font-family:inherit;
    cursor:pointer;
    outline:none;
    background-repeat:no-repeat;
    background-position:right 7px center;
    background-size:9px;
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M6 8.5 2 4.5h8z'/%3E%3C/svg%3E");
    background-color:var(--surface-soft);
    color:var(--text-soft);
    max-width:140px;
}
.status-select:focus{ border-color:var(--accent); }
.status-select option{ background:var(--surface); color:var(--text); font-weight:500; }

.status-select.st-pending{    background-color:var(--surface-soft); color:var(--text-soft); }
.status-select.st-inprogress{ background-color:var(--accent-soft); color:var(--accent); }
.status-select.st-done{       background-color:var(--green-soft);  color:var(--green); }
.status-select.st-cancelled{  background-color:var(--red-soft);    color:var(--red); }

/* ---------------------------------------------------------------- overdue */

.due-overdue{
    color:var(--red) !important;
    font-weight:600;
    display:inline-flex;
    align-items:center;
    gap:4px;
}
.due-soon{ color:var(--amber) !important; font-weight:600; }

tr.row-overdue td{ background:linear-gradient(90deg, var(--red-soft) 0 3px, transparent 3px); }

/* ---------------------------------------------------------------- cards / stats */

.grid{ display:grid; gap:14px; }
.grid-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }

.card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    overflow:hidden;
}
.card-head{
    display:flex; align-items:center; gap:8px;
    padding:11px 14px;
    border-bottom:1px solid var(--border);
}
.card-title{ font-weight:600; font-size:13.5px; }
.card-head-actions{ margin-left:auto; display:flex; gap:6px; }
.card-body{ padding:14px; }
.card-body.flush{ padding:0; }

.stat{ padding:14px; }
.stat-label{ font-size:12px; color:var(--text-muted); display:flex; align-items:center; gap:6px; }
.stat-value{ font-size:23px; font-weight:700; letter-spacing:-.02em; margin-top:5px; }
.stat-foot{ font-size:11.5px; color:var(--text-muted); margin-top:3px; }
.stat-foot .up{ color:var(--green); }
.stat-foot .down{ color:var(--red); }

.progress{ height:6px; background:var(--surface-soft); border-radius:20px; overflow:hidden; }
.progress-bar{ height:100%; background:var(--accent); border-radius:20px; transition:width .3s ease; }
.progress-bar.green{ background:var(--green); }
.progress-bar.amber{ background:var(--amber); }

/* ---------------------------------------------------------------- tabs (detail page) */

.tabs{ display:flex; gap:2px; border-bottom:1px solid var(--border); margin-bottom:16px; overflow-x:auto; }
.tab{
    padding:8px 12px;
    font-size:13px;
    font-weight:500;
    color:var(--text-muted);
    border-bottom:2px solid transparent;
    white-space:nowrap;
    display:inline-flex; align-items:center; gap:6px;
    /* these are anchors with no href, so the pointer has to be asked for */
    cursor:pointer;
    user-select:none;
}
.tab:hover{ color:var(--text); }
.tab.active{ color:var(--text); font-weight:600; border-bottom-color:var(--accent); }
.tab .tab-count{ font-size:11px; background:var(--surface-soft); padding:0 6px; border-radius:20px; color:var(--text-muted); }

.tab-panel{ display:none; }
.tab-panel.active{ display:block; }

/* ---------------------------------------------------------------- forms */

.form-grid{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:14px 16px; }
/* the full scale : a missing span silently collapses a field to one column,
   so every width from 1 to 12 is defined even where nothing uses it yet */
.col-12{ grid-column:span 12; }
.col-11{ grid-column:span 11; }
.col-10{ grid-column:span 10; }
.col-9{ grid-column:span 9; }
.col-8{ grid-column:span 8; }
.col-7{ grid-column:span 7; }
.col-6{ grid-column:span 6; }
.col-5{ grid-column:span 5; }
.col-4{ grid-column:span 4; }
.col-3{ grid-column:span 3; }
.col-2{ grid-column:span 2; }
.col-1{ grid-column:span 1; }
/* a long option in a select must not push the field past its column */
.field{ min-width:0; }
/* takes the whole row when the field beside it is hidden, see the payment form */
.col-grow{ grid-column:span 12; }

.field label{
    display:block;
    font-size:12px;
    font-weight:600;
    color:var(--text-soft);
    margin-bottom:5px;
}
.field label .req{ color:var(--red); }

.input,.select,.textarea{
    width:100%;
    background:var(--surface-soft);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:7px 10px;
    font-size:13.5px;
    outline:none;
    transition:border-color .12s ease, box-shadow .12s ease;
}
.input:focus,.select:focus,.textarea:focus{
    border-color:var(--accent);
    box-shadow:0 0 0 3px var(--accent-soft);
    background:var(--surface);
}
.textarea{ resize:vertical; min-height:88px; }
.select{ cursor:pointer; }
.input[readonly]{ color:var(--text-muted); cursor:not-allowed; }

.input.showError,.select.showError,.textarea.showError{
    border-color:var(--red);
    box-shadow:0 0 0 3px var(--red-soft);
}

.field-hint{ font-size:11.5px; color:var(--text-muted); margin-top:4px; }

/* a heading inside a long form, separating one group of fields from the next */
.form-section{
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.06em;
    font-weight:700;
    color:var(--text-muted);
    padding-top:6px;
    margin-bottom:-4px;
    border-top:1px solid var(--border);
    padding-top:12px;
}
.form-grid > .field:first-child .form-section{ border-top:0; padding-top:0; }

.form-actions{
    display:flex; justify-content:flex-end; gap:8px;
    padding-top:16px; margin-top:18px;
    border-top:1px solid var(--border);
}

/* ------------------------------------------------- searchable item picker */
/* Tom Select ships its own look; these pull it back onto the IPMS palette so
   a line's item box is indistinguishable from any other control on the page */
body .ts-wrapper{ min-width:0; }
/* Tom Select copies the original control's classes onto its own wrapper, so
   without this every picker would draw two borders and pad twice, standing
   taller than the inputs beside it. The wrapper is a plain box; the control
   inside it carries the whole look. */
body .ts-wrapper.select,
body .ts-wrapper.input,
body .ts-wrapper.filter-select{
    background:none;
    border:0;
    padding:0;
    border-radius:0;
    box-shadow:none;
    min-height:0;
}
/* the toolbar dropdowns on list pages are deliberately smaller */
body .ts-wrapper.filter-select{
    /* a filter that says "Partially paid" or holds a project name needs room;
       these were coming out under a hundred pixels and truncating */
    min-width:158px;
}
body .ts-wrapper.filter-select .ts-control{
    padding:4px 26px 4px 10px;
    font-size:12.5px;
    color:var(--text-soft);
    min-height:31px;
}
body .ts-wrapper.filter-select .ts-control::after{ right:9px; }
body .ts-wrapper.filter-select .ts-control input{ font-size:12.5px; }
body .ts-wrapper.single .ts-control,
body .ts-control{
    background:var(--surface-soft);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:6px 10px;
    font-size:13.5px;
    color:var(--text);
    box-shadow:none;
    min-height:33px;
}
body .ts-wrapper.single.input-active .ts-control{ background:var(--surface); cursor:text; }
/* the library build draws no caret, so without this a picker looks like a
   plain text box and gives no sign that it opens */
body .ts-control{ position:relative; padding-right:28px; }
body .ts-wrapper.single .ts-control::after{
    content:"";
    position:absolute;
    right:11px;
    top:50%;
    width:6px;
    height:6px;
    margin-top:-4px;
    border-right:1.5px solid var(--text-muted);
    border-bottom:1.5px solid var(--text-muted);
    transform:rotate(45deg);
    pointer-events:none;
    transition:transform .12s ease, margin-top .12s ease;
}
body .ts-wrapper.single.dropdown-active .ts-control::after{
    margin-top:-1px;
    transform:rotate(-135deg);
    border-color:var(--accent);
}
body .ts-wrapper.disabled .ts-control::after{ opacity:.4; }
body .ts-wrapper.focus .ts-control{
    border-color:var(--accent);
    box-shadow:0 0 0 3px var(--accent-soft);
    background:var(--surface);
}
body .ts-control input,
body .ts-control input::placeholder{ color:var(--text-muted); }
body .ts-control > .item{ color:var(--text); }
body .ts-wrapper.showError .ts-control{ border-color:var(--red); box-shadow:0 0 0 3px var(--red-soft); }
body .ts-wrapper.disabled .ts-control{ opacity:.6; }

body .ts-dropdown{
    background:var(--surface);
    border:1px solid var(--border-strong);
    border-radius:var(--radius);
    box-shadow:var(--shadow-lg);
    margin-top:4px;
    font-size:13.5px;
    color:var(--text);
    z-index:150;
}
body .ts-dropdown .ts-dropdown-content{ max-height:260px; }
/* the menu is sized to its control, which is narrow for the toolbar filters
   and wraps their labels over two lines, so it is allowed to grow wider */
body .ts-dropdown{ min-width:230px; }
body .ts-dropdown .option{ padding:7px 10px; border-radius:4px; margin:2px 4px; }
body .ts-dropdown .option:hover,
body .ts-dropdown .active{ background:var(--surface-hover); color:var(--text); }
body .ts-dropdown .option.selected{ background:var(--accent-soft); }
body .ts-dropdown .no-results{ padding:10px; color:var(--text-muted); }
/* name on the left, item code trailing in the muted tone used elsewhere */
body .ts-dropdown .ts-row{ display:flex; align-items:baseline; gap:10px; }
body .ts-dropdown .ts-row .ts-code{
    margin-left:auto;
    font-size:11.5px;
    color:var(--text-muted);
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
body .ts-dropdown [data-selectable] .highlight{ background:var(--amber-soft); border-radius:2px; }

/* ---------------------------------------------------------------- modal */

.modal{
    position:fixed; inset:0;
    background:rgba(15,15,15,.45);
    display:none;
    align-items:flex-start;
    justify-content:center;
    z-index:100;
    padding:60px 16px 16px;
    overflow-y:auto;
}
.modal.open{ display:flex; }
.modal-box{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-lg);
    width:100%;
    max-width:680px;
}
.modal-box.wide{ max-width:860px; }
.modal-head{ display:flex; align-items:center; padding:14px 16px; border-bottom:1px solid var(--border); }
.modal-title{ font-weight:650; font-size:14.5px; }
.modal-body{ padding:16px; }
.modal-foot{ display:flex; justify-content:flex-end; gap:8px; padding:12px 16px; border-top:1px solid var(--border); }

/* ---------------------------------------------------------------- misc */

.divider{ height:1px; background:var(--border); margin:16px 0; }
.muted{ color:var(--text-muted); }
.soft{ color:var(--text-soft); }
.right{ text-align:right; }
.center{ text-align:center; }
.nowrap{ white-space:nowrap; }
.mono{ font-variant-numeric:tabular-nums; }
.hidden{ display:none !important; }
.flex{ display:flex; align-items:center; }
.gap-6{ gap:6px; } .gap-10{ gap:10px; }
.mt-8{ margin-top:8px; } .mt-16{ margin-top:16px; } .mt-24{ margin-top:24px; }
.mb-8{ margin-bottom:8px; } .mb-16{ margin-bottom:16px; }
.w-full{ width:100%; }

.avatar-stack{ display:flex; }
.avatar-stack .user-avatar{ margin-left:-7px; border:2px solid var(--surface); }
.avatar-stack .user-avatar:first-child{ margin-left:0; }

.kv{ display:flex; justify-content:space-between; gap:14px; padding:7px 0; border-bottom:1px solid var(--border); font-size:13px; }
.kv:last-child{ border-bottom:0; }
.kv .kv-label{ color:var(--text-muted); }
.kv .kv-value{ font-weight:550; text-align:right; }

.pagination{ display:flex; align-items:center; gap:8px; padding:12px 2px; font-size:12.5px; color:var(--text-muted); }
.pagination .spacer{ margin-left:auto; }

/* login */
.auth-wrap{ min-height:100vh; display:grid; place-items:center; background:var(--bg-sunken); padding:20px; }
.auth-box{
    width:100%; max-width:380px;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow);
    padding:30px 28px;
}
.auth-brand{ display:flex; align-items:center; gap:10px; justify-content:center; margin-bottom:6px; }
.auth-title{ text-align:center; font-size:19px; font-weight:700; margin-bottom:4px; }
.auth-sub{ text-align:center; font-size:13px; color:var(--text-muted); margin-bottom:22px; }
.auth-error{
    background:var(--red-soft); color:var(--red);
    border-radius:var(--radius); padding:8px 11px;
    font-size:12.5px; margin-bottom:14px;
}

/* toast */
#toastHost{ position:fixed; right:16px; bottom:16px; z-index:200; display:flex; flex-direction:column; gap:8px; }
.toast{
    background:var(--surface);
    border:1px solid var(--border);
    border-left:3px solid var(--accent);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:10px 13px;
    font-size:13px;
    min-width:230px;
    animation:toastIn .18s ease;
}
.toast.success{ border-left-color:var(--green); }
.toast.error{ border-left-color:var(--red); }
.toast .toast-title{ font-weight:600; margin-bottom:1px; }
.toast .toast-text{ color:var(--text-muted); font-size:12.5px; }
@keyframes toastIn{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none;} }

/* ---------------------------------------------------------------- print */

.print-only{ display:none; }

@media print{
    @page{ margin:12mm; }
    body{ background:#fff; color:#000; }
    .sidebar, .topbar, .no-print, #toastHost, .pagination, .cell-actions{ display:none !important; }
    .app{ display:block; }
    .main{ display:block; }
    .content{ padding:0; }
    .print-only{ display:block; }
    .card{ border:1px solid #ddd; box-shadow:none; break-inside:avoid; }
    .tbl-wrap{ border:0; overflow:visible; }
    table.tbl{ min-width:0 !important; width:100%; font-size:10px; }
    table.tbl thead th{ background:#f4f4f2 !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
    table.tbl tbody tr{ break-inside:avoid; }
    .pill{ border:1px solid #ccc; background:#fff !important; color:#000 !important; }
    .grid-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
    a{ text-decoration:none; color:#000; }
}

.print-head{ margin-bottom:14px; padding-bottom:10px; border-bottom:2px solid #333; }
.print-company{ font-size:18px; font-weight:800; }
.print-title{ font-size:15px; font-weight:600; margin-top:2px; }
.print-meta{ font-size:11px; color:#666; margin-top:2px; }

/* responsive */
@media (max-width: 1024px){
    .grid-4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
    .grid-3{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
/* Below about a thousand pixels the authored spans get too thin to read, but
   widening them one at a time would break the arithmetic of the row they sit
   in and open a gap. So the whole grid steps down together and every field
   takes exactly half a row, then a whole one, which leaves no row ragged. */
@media (max-width: 1000px){
    .form-grid > .field[class*="col-"],
    .form-grid > .field.col-grow{ grid-column:span 6; }
}
@media (max-width: 860px){
    .sidebar{ position:fixed; left:0; top:0; z-index:60; transform:translateX(-100%); transition:transform .2s ease; }
    .sidebar.open{ transform:none; box-shadow:var(--shadow-lg); }
    .content{ padding:16px 14px 50px; }
    .grid-4,.grid-3,.grid-2{ grid-template-columns:minmax(0,1fr); }
    .page-title{ font-size:21px; }
}
@media (max-width: 640px){
    .form-grid > .field[class*="col-"]{ grid-column:span 12; }
    .form-grid > .field.col-grow{ grid-column:span 12; }
}
@media (min-width: 861px){ .menu-toggle{ display:none; } }