/* =====================================================================
   IT Asset Manager — stylesheet
   Palette: ink sidebar, steel-blue actions, cool paper background.
   Signature element: record IDs styled as printed asset-label tags.
   ===================================================================== */
:root {
    --ink: #16233a;
    --ink-soft: #24344f;
    --steel: #2c5d8f;
    --steel-dark: #234b74;
    --paper: #eef2f6;
    --surface: #ffffff;
    --line: #d6dde6;
    --text: #1d2733;
    --muted: #5d6b7c;
    --tag-pur: #f4e3a1;
    --tag-asn: #d7e6f5;
    --ok: #1f7a4d;
    --warn: #b7791f;
    --bad: #b42318;

    --bs-body-font-family: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
    --bs-body-color: var(--text);
    --bs-body-bg: var(--paper);
    --bs-primary: var(--steel);
    --bs-primary-rgb: 44, 93, 143;
    --bs-link-color: var(--steel);
    --bs-link-color-rgb: 44, 93, 143;
    --bs-border-color: var(--line);
}

body { font-size: .925rem; font-variant-numeric: tabular-nums; }
a { text-decoration: none; }
.req { color: var(--bad); }

/* ---------- Buttons ------------------------------------------------- */
.btn-primary { --bs-btn-bg: var(--steel); --bs-btn-border-color: var(--steel); --bs-btn-hover-bg: var(--steel-dark); --bs-btn-hover-border-color: var(--steel-dark); --bs-btn-active-bg: var(--steel-dark); --bs-btn-disabled-bg: var(--steel); --bs-btn-disabled-border-color: var(--steel); }
.btn-outline-primary { --bs-btn-color: var(--steel); --bs-btn-border-color: var(--steel); --bs-btn-hover-bg: var(--steel); --bs-btn-hover-border-color: var(--steel); --bs-btn-active-bg: var(--steel-dark); }
.btn-icon { border: 1px solid var(--line); background: var(--surface); }
:focus-visible { outline: 3px solid rgba(44, 93, 143, .45); outline-offset: 2px; }
.form-control:focus, .form-select:focus { border-color: var(--steel); box-shadow: 0 0 0 .2rem rgba(44, 93, 143, .18); }
.form-label { font-weight: 500; margin-bottom: .3rem; }

/* ---------- Shell --------------------------------------------------- */
.app-shell { display: flex; min-height: 100vh; }
.sidebar {
    width: 250px; flex-shrink: 0; background: var(--ink); color: #c9d3e1;
    position: fixed; inset: 0 auto 0 0; overflow-y: auto; z-index: 1040;
    transition: transform .2s ease;
}
.app-main { flex: 1; margin-left: 250px; display: flex; flex-direction: column; min-width: 0; }
.brand { display: flex; align-items: center; gap: .7rem; padding: 1.15rem 1.25rem; color: #fff; font-weight: 600; font-size: 1.02rem; border-bottom: 1px solid rgba(255,255,255,.07); }
.brand:hover { color: #fff; }
.brand-mark { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; background: var(--tag-pur); color: var(--ink); }
.side-nav { padding: .5rem .75rem 1.5rem; }
.nav-group { font-size: .74rem; color: #8494ab; padding: 1.1rem .6rem .35rem; font-weight: 500; }
.side-nav .nav-link { display: flex; align-items: center; gap: .7rem; color: #c9d3e1; padding: .5rem .6rem; border-radius: 6px; }
.side-nav .nav-link i { color: #8494ab; }
.side-nav .nav-link:hover { background: var(--ink-soft); color: #fff; }
.side-nav .nav-link.active { background: var(--steel); color: #fff; }
.side-nav .nav-link.active i { color: #fff; }

.topbar { display: flex; align-items: center; gap: .75rem; padding: .85rem 1.75rem; background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 1020; }
.topbar-title { font-size: 1.2rem; font-weight: 600; margin: 0; }
.user-chip { display: flex; align-items: center; gap: .5rem; border: 1px solid var(--line); border-radius: 999px; padding: .25rem .8rem .25rem .3rem; }
.avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-size: .8rem; font-weight: 600; }
.content { padding: 1.75rem; flex: 1; }
.app-footer { padding: 1rem 1.75rem; color: var(--muted); font-size: .8rem; }

@media (max-width: 991.98px) {
    .sidebar { transform: translateX(-100%); }
    .sidebar.open { transform: none; }
    .app-main { margin-left: 0; }
    .sidebar-backdrop { position: fixed; inset: 0; background: rgba(22, 35, 58, .45); z-index: 1030; display: none; }
    .sidebar-backdrop.show { display: block; }
    .content { padding: 1rem; }
    .topbar { padding: .75rem 1rem; }
}

/* ---------- Panels -------------------------------------------------- */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 1.25rem 1.35rem; }
.panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; }
.panel-head h2 { font-size: 1.02rem; font-weight: 600; margin: 0; }
.panel-sub { color: var(--muted); margin: .2rem 0 0; font-size: .85rem; }
.count-pill { font-size: .75rem; background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: .05rem .55rem; color: var(--muted); vertical-align: middle; }
.empty-state { text-align: center; color: var(--muted); padding: 2rem 1rem !important; }
.table > :not(caption) > * > * { padding: .6rem .65rem; }
.table thead th { font-weight: 600; color: var(--muted); font-size: .8rem; background: #f6f8fb; border-bottom-width: 1px; white-space: nowrap; }

/* ---------- KPI cards ----------------------------------------------- */
.kpi { display: flex; gap: 1rem; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--kpi-color, var(--steel)); border-radius: 10px; padding: 1.1rem 1.2rem; height: 100%; }
.kpi-icon { width: 42px; height: 42px; border-radius: 8px; display: grid; place-items: center; background: color-mix(in srgb, var(--kpi-color, var(--steel)) 12%, white); color: var(--kpi-color, var(--steel)); font-size: 1.1rem; flex-shrink: 0; }
.kpi-label { color: var(--muted); font-size: .85rem; }
.kpi-value { font-size: 1.45rem; font-weight: 700; line-height: 1.25; margin: .1rem 0; }
.kpi-hint { color: var(--muted); font-size: .78rem; }
.kpi-spend  { --kpi-color: var(--ink); }
.kpi-bought { --kpi-color: var(--steel); }
.kpi-issued { --kpi-color: #6b4fa0; }
.kpi-stock  { --kpi-color: var(--ok); }

/* ---------- Asset-label code tags (signature element) --------------- */
.code-tag {
    display: inline-block; position: relative; padding: .18rem .55rem .18rem .9rem;
    background: var(--tag-pur); color: var(--ink); border-radius: 3px;
    font-weight: 600; font-size: .8rem; letter-spacing: .02em; white-space: nowrap;
    border: 1px dashed rgba(22, 35, 58, .35);
}
.code-tag::before { /* punched hole of a printed asset tag */
    content: ""; position: absolute; left: .32rem; top: 50%; width: 5px; height: 5px;
    margin-top: -2.5px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 1px rgba(22, 35, 58, .35);
}
.code-tag-asn { background: var(--tag-asn); }
.code-input { font-weight: 600; letter-spacing: .02em; background: #fbf6e2 !important; }

/* ---------- Forms --------------------------------------------------- */
.cost-panel { position: sticky; top: 84px; }
.total-box { display: flex; justify-content: space-between; align-items: baseline; padding: .9rem 1rem; border-radius: 8px; background: var(--ink); color: #fff; }
.total-box span { color: #b8c4d6; font-size: .85rem; }
.total-box strong { font-size: 1.35rem; }

/* ---------- Stock --------------------------------------------------- */
.stock-badge { font-weight: 500; padding: .38em .65em; }
.stock-badge i { margin-right: .2rem; }
.stock-in  { background: #e3f3ea; color: var(--ok); }
.stock-low { background: #fdf1d8; color: #8a5a10; }
.stock-out { background: #fde6e4; color: var(--bad); }
.stock-strip { display: flex; flex-wrap: wrap; gap: .6rem; }
.stock-filter { border: 1px solid var(--line); background: var(--surface); border-radius: 8px; padding: .55rem 1rem; display: flex; gap: .6rem; align-items: center; color: var(--text); }
.stock-filter strong { font-size: 1.05rem; }
.stock-filter.is-in strong { color: var(--ok); }
.stock-filter.is-low strong { color: var(--warn); }
.stock-filter.is-out strong { color: var(--bad); }
.stock-filter.active { border-color: var(--steel); box-shadow: inset 0 0 0 1px var(--steel); }

/* ---------- DataTables tweaks --------------------------------------- */
div.dataTables_wrapper div.dataTables_filter input { margin-left: .5rem; }
.dt-buttons .btn { font-size: .82rem; }
table.dataTable.nowrap td.text-wrap { white-space: normal; }

/* ---------- Reports ------------------------------------------------- */
.report-sheet { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 1.5rem; }
.report-head { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 2px solid var(--ink); padding-bottom: .9rem; margin-bottom: 1rem; }
.report-company { font-weight: 600; color: var(--muted); }
.report-title { font-size: 1.3rem; font-weight: 700; margin: .15rem 0 .25rem; }
.report-meta { color: var(--muted); font-size: .82rem; }
.report-summary { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1rem; }
.report-summary > div { border: 1px solid var(--line); border-radius: 8px; padding: .55rem .9rem; min-width: 150px; }
.report-summary span { display: block; color: var(--muted); font-size: .78rem; }
.report-summary strong { font-size: 1.1rem; }
.report-subtitle { font-size: .95rem; font-weight: 600; margin: 1.5rem 0 .6rem; }
.report-table { font-size: .82rem; }
.signature-block { display: flex; justify-content: space-between; gap: 3rem; margin-top: 4rem; page-break-inside: avoid; break-inside: avoid; }
.signature { width: 240px; }
.signature-right { text-align: right; }
.signature-line { border-top: 1px solid var(--text); margin-bottom: .4rem; }
.signature-role { font-weight: 600; }
.signature-detail { color: var(--muted); font-size: .8rem; }

/* ---------- Login --------------------------------------------------- */
.login-page { background: var(--ink); }
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; }
.login-panel { width: 100%; max-width: 410px; background: var(--surface); border-radius: 12px; padding: 2.2rem; }
.login-brand { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.75rem; }

/* ---------- Print --------------------------------------------------- */
@media print {
    @page { size: A4 landscape; margin: 12mm; }
    body { background: #fff; font-size: 10.5pt; }
    .sidebar, .sidebar-backdrop, .topbar, .app-footer, .d-print-none,
    .dataTables_filter, .dataTables_length, .dataTables_info, .dataTables_paginate, .dt-buttons { display: none !important; }
    .app-main { margin-left: 0 !important; }
    .content { padding: 0 !important; }
    .report-sheet, .panel { border: 0; padding: 0; border-radius: 0; }
    .table-responsive { overflow: visible !important; }
    .report-table th, .report-table td { padding: .25rem .4rem !important; }
    .report-table thead th { background: #eee !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .stock-badge { border: 1px solid #999; }
    a[href]::after { content: none !important; }
}


/* =====================================================================
   v2 additions
   ===================================================================== */

/* ---------- Brand with company logo ---------------------------------- */
.brand-logo { width: 40px; height: 40px; border-radius: 8px; background: #fff; display: grid; place-items: center; padding: 3px; flex-shrink: 0; }
.brand-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.brand-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.brand-text small { color: #8494ab; font-weight: 400; font-size: .74rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px; }
.login-logo { max-height: 52px; max-width: 140px; object-fit: contain; }

/* ---------- Letterhead (all printed documents) ----------------------- */
.letterhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; border-bottom: 2px solid var(--ink); padding-bottom: .9rem; margin-bottom: 1rem; }
.letterhead-company { display: flex; gap: .9rem; align-items: center; }
.letterhead-logo { max-height: 64px; max-width: 150px; object-fit: contain; }
.letterhead-name { font-size: 1.15rem; font-weight: 700; color: var(--ink); }
.letterhead-line { color: var(--muted); font-size: .8rem; }
.letterhead-doc { text-align: right; }
.letterhead-doc .report-title { margin-top: 0; }
.letterhead-number { display: inline-block; font-weight: 600; background: var(--tag-asn); padding: .1rem .55rem; border-radius: 3px; margin-bottom: .25rem; }
.report-filters { font-size: .82rem; color: var(--muted); background: #f6f8fb; border: 1px solid var(--line); border-radius: 6px; padding: .45rem .75rem; margin-bottom: 1rem; }
.report-footer-note { margin-top: 2rem; padding-top: .5rem; border-top: 1px solid var(--line); font-size: .75rem; color: var(--muted); text-align: center; }

/* ---------- Receipts & certificates ---------------------------------- */
.doc-toolbar { display: flex; justify-content: space-between; gap: .5rem; margin-bottom: 1rem; max-width: 900px; margin-inline: auto; }
.doc-portrait { max-width: 900px; margin: 0 auto; position: relative; }
.doc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin: 1rem 0 1.25rem; }
.doc-label { font-size: .85rem; font-weight: 600; color: var(--steel); margin: 0 0 .5rem; padding-bottom: .3rem; border-bottom: 1px solid var(--line); }
.doc-dl { display: grid; grid-template-columns: 120px 1fr; gap: .3rem .75rem; margin: 0; font-size: .88rem; }
.doc-dl dt { font-weight: 500; color: var(--muted); }
.doc-dl dd { margin: 0; }
.doc-items { margin-top: .5rem; }
.doc-remarks { font-size: .88rem; }
.doc-terms { margin-top: 1.25rem; font-size: .82rem; }
.doc-terms p { margin: 0 0 .3rem; }
.doc-ack { margin-top: .75rem !important; font-style: italic; }
.doc-stamp { position: absolute; top: 120px; right: 24px; transform: rotate(-8deg); border: 3px double; border-radius: 6px; padding: .3rem .8rem; font-weight: 700; font-size: 1rem; }
.doc-stamp-returned { color: #6c757d; border-color: #6c757d; }
.clearance-status { border-radius: 10px; padding: 1rem 1.2rem; display: flex; flex-direction: column; justify-content: center; gap: .15rem; border: 2px solid; }
.clearance-status i { font-size: 1.6rem; }
.clearance-status strong { font-size: 1.35rem; }
.clearance-status.is-cleared { color: var(--ok); border-color: var(--ok); background: #f0f9f4; }
.clearance-status.is-pending { color: var(--bad); border-color: var(--bad); background: #fef3f2; }
.empty-panel { text-align: center; color: var(--muted); padding: 2.5rem 1rem; }
@media (max-width: 767.98px) { .doc-grid { grid-template-columns: 1fr; } .letterhead { flex-direction: column; } .letterhead-doc { text-align: left; } }

/* ---------- Settings & attachments ----------------------------------- */
.logo-preview { min-height: 130px; border: 1px dashed var(--line); border-radius: 8px; display: grid; place-items: center; padding: 1rem; background: #fafbfc; text-align: center; }
.logo-preview img { max-height: 110px; max-width: 100%; object-fit: contain; }
.attach-box { border-top: 1px solid var(--line); padding-top: 1rem; }
.attach-list { list-style: none; padding: 0; margin: 0 0 .75rem; }
.attach-list li { display: flex; align-items: center; gap: .5rem; padding: .35rem .5rem; border: 1px solid var(--line); border-radius: 6px; margin-bottom: .35rem; font-size: .85rem; }
.attach-list a { display: flex; gap: .45rem; align-items: center; flex: 1; min-width: 0; }
.attach-list a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attach-list small { color: var(--muted); white-space: nowrap; }
.file-count { margin-left: .35rem; font-size: .78rem; color: var(--muted); }

/* ---------- Dashboard warranty panel & audit ------------------------- */
.warranty-panel { border-left: 4px solid var(--warn); }
.days-left { display: inline-block; min-width: 2.2rem; text-align: center; font-weight: 600; border-radius: 999px; padding: .1rem .5rem; background: #fdf1d8; color: #8a5a10; }
.days-left.is-urgent { background: #fde6e4; color: var(--bad); }
.audit-details { font-size: .8rem; max-width: 460px; white-space: normal; }
.diff-old { color: var(--bad); text-decoration: line-through; }
.diff-new { color: var(--ok); }

@media print {
    .doc-portrait { max-width: none; }
    .doc-stamp { top: 90px; }
    .letterhead, .clearance-status, .letterhead-number, .report-filters { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .report-sheet .table-bordered { page-break-inside: auto; }
    .report-sheet tr { page-break-inside: avoid; }
}


/* =====================================================================
   v2.5 additions
   ===================================================================== */
.item-block { display: flex; gap: .75rem; align-items: flex-start; border: 1px solid var(--line); border-radius: 8px; padding: .85rem .75rem .85rem .85rem; margin-bottom: .6rem; background: #fbfcfd; }
.item-block:focus-within { border-color: var(--steel); background: #fff; }
.item-no { width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; background: var(--ink); color: #fff; font-size: .78rem; font-weight: 600; display: grid; place-items: center; margin-top: 1.7rem; }
.item-block .form-label.small { font-size: .78rem; margin-bottom: .15rem; color: var(--muted); }
.line-total { font-weight: 700; font-size: 1.02rem; padding: .35rem 0; white-space: nowrap; }
.line-total::before { content: "Line total "; font-weight: 400; font-size: .75rem; color: var(--muted); }
.remove-item { margin-top: 1.5rem; }
.summary-dl { display: grid; grid-template-columns: 1fr auto; gap: .2rem .5rem; margin-bottom: .8rem; }
.summary-dl dt { font-weight: 400; color: var(--muted); }
.summary-dl dd { margin: 0; font-weight: 600; text-align: right; }
.summary-line { color: var(--muted); font-size: .88rem; text-align: center; }
.emp-card { font-size: .82rem; color: var(--muted); background: #f6f8fb; border: 1px solid var(--line); border-radius: 6px; padding: .45rem .65rem; }
.name-preview { font-size: .85rem; background: var(--tag-asn); border-radius: 6px; padding: .45rem .7rem; }
.reorder-badge { background: #ede7f6; color: #5b3f9a; font-weight: 500; }
.stock-filter.is-reorder strong { color: #5b3f9a; }
.item-summary { font-size: .82rem; line-height: 1.45; min-width: 220px; }
.line-returned td { color: var(--muted); }
.line-returned td:nth-child(2) { text-decoration: line-through; text-decoration-color: rgba(0,0,0,.25); }
.quick-model .form-label { font-size: .85rem; margin-bottom: .15rem; }
div.dataTables_processing { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 6px 20px rgba(22,35,58,.12); padding: .75rem 1rem !important; }
div.dataTables_processing > div:last-child { display: none; }
@media (max-width: 767.98px) { .item-no { display: none; } .remove-item { margin-top: 0; } }

/* v2.5.1 — AI invoice scanning */
.scan-bar { display: flex; gap: 1rem; align-items: center; background: linear-gradient(90deg, #eef4fb, #f7f3fd); border: 1px solid #d9e3f0; border-radius: 10px; padding: .9rem 1.1rem; }
.scan-bar-icon { width: 42px; height: 42px; flex-shrink: 0; border-radius: 10px; background: #fff; color: #5b3f9a; display: grid; place-items: center; font-size: 1.2rem; box-shadow: 0 1px 3px rgba(22,35,58,.08); }
.scan-frame { background: #f3f5f8; border: 1px solid var(--line); border-radius: 8px; max-height: 560px; overflow: auto; text-align: center; }
.scan-frame img { max-width: 100%; height: auto; display: block; margin: 0 auto; }
.scan-frame iframe { width: 100%; height: 560px; border: 0; display: block; }
.scan-warnings { margin: .75rem 0 0; padding-left: 1.2rem; font-size: .86rem; color: #8a5300; }
.scan-warnings:empty { display: none; }
.scan-attach-note { font-size: .82rem; background: #eef7f0; border: 1px solid #cfe7d6; border-radius: 6px; padding: .4rem .6rem; margin-bottom: .5rem; }
.ai-hint { font-size: .78rem; margin-top: .3rem; }
.ai-hint:empty { display: none; }
.ai-chip { display: inline-block; border-radius: 999px; padding: .05rem .5rem; font-weight: 600; font-size: .72rem; }
.ai-ok { background: #e3f4e8; color: #1e6b3a; }
.ai-check { background: #fff3d6; color: #8a5300; }
.ai-none { background: #fde4e1; color: #a12a1c; }
.ai-printed { color: var(--muted); }
.item-block.ai-line-check { border-color: #f0c870; }
.item-block.ai-line-none { border-color: #ef9f95; background: #fff8f7; }
@media (max-width: 767.98px) { .scan-bar { flex-wrap: wrap; } .scan-bar .btn { width: 100%; } }

/* v2.5.2 — AI & API keys */
.provider-choice { display: block; cursor: pointer; margin: 0; }
.provider-choice input { position: absolute; opacity: 0; }
.provider-card { display: flex; flex-direction: column; gap: .4rem; align-items: flex-start; border: 2px solid var(--line); border-radius: 10px; padding: .85rem 1rem; background: #fff; transition: border-color .15s, background .15s; }
.provider-name { font-weight: 600; }
.provider-main-label { display: none; font-size: .75rem; font-weight: 600; color: var(--steel); }
.provider-choice input:checked + .provider-card { border-color: var(--steel); background: #f2f7fc; }
.provider-choice input:checked + .provider-card .provider-main-label { display: inline; }
.provider-choice input:focus-visible + .provider-card { outline: 3px solid rgba(44,93,143,.35); }
.key-status { font-size: .86rem; background: #f6f8fb; border-radius: 6px; padding: .45rem .65rem; }
.save-bar { position: sticky; bottom: 0; background: linear-gradient(transparent, var(--paper) 35%); padding: 1.2rem 0 .6rem; text-align: right; z-index: 5; }
.settings-link { display: flex; align-items: center; gap: .8rem; text-decoration: none; color: inherit; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: .85rem 1rem; }
.settings-link:hover { border-color: var(--steel); }
.settings-link > i:first-child { color: #5b3f9a; font-size: 1.2rem; }
.settings-link small { display: block; color: var(--muted); font-size: .8rem; }

/* v2.6 — Service contracts and bills */
.code-tag-svc { background: #ede7f6; color: #4a2f86; }
.stock-filter.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.stock-filter.active strong { color: #fff; }
a.stock-filter { text-decoration: none; display: inline-block; }
.auto-tag { font-size: .65rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; background: #eef4fb; color: var(--steel); border-radius: 4px; padding: 0 .3rem; vertical-align: middle; }
.calc-preview { font-size: .88rem; background: #f6f8fb; border-radius: 6px; padding: .55rem .75rem; }
.calc-preview:empty { display: none; }
.live-checks:empty { display: none; }
.status-steps { display: flex; gap: .4rem; flex-wrap: wrap; }
.status-steps .step { flex: 1 1 0; min-width: 130px; display: flex; align-items: center; gap: .5rem; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: .55rem .8rem; color: var(--muted); font-weight: 500; font-size: .9rem; }
.status-steps .step span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #eef1f5; font-size: .78rem; font-weight: 700; }
.status-steps .step.done { color: var(--ok, #1e6b3a); }
.status-steps .step.done span { background: #e3f4e8; color: #1e6b3a; }
.status-steps .step.current { color: var(--ink); border-color: var(--steel); background: #f2f7fc; }
.status-steps .step.current span { background: var(--steel); color: #fff; }
.status-steps .step.disputed { border-color: #ef9f95; background: #fff4f2; color: #a12a1c; }
.status-steps .step.disputed span { background: #a12a1c; }
.check-list { list-style: none; padding: 0; margin: 0 0 .75rem; }
.check-list li { padding: .45rem .65rem; border-radius: 6px; margin-bottom: .35rem; font-size: .92rem; }
.check-list li.warn { background: #fff6e0; color: #6b4300; }
.check-list li.ok { background: #e9f6ed; color: #1e6b3a; }
.doc-dl.two-col { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1.2rem; }
.doc-dl.two-col dt { font-weight: 500; color: var(--muted); }
.doc-dl.two-col dd { margin: 0; }
.table-danger-subtle > td { background: #fff4f2 !important; }
.svc-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem; }
.svc-tiles a { display: block; text-decoration: none; color: inherit; border: 1px solid var(--line); border-radius: 8px; padding: .6rem .8rem; background: #fbfcfd; }
.svc-tiles a:hover { border-color: var(--steel); }
.svc-tiles span { display: block; font-size: .78rem; color: var(--muted); }
.svc-tiles strong { font-size: 1.25rem; }
.svc-tiles small { display: block; font-size: .75rem; color: var(--muted); }
.svc-tiles a.is-bad { border-color: #ef9f95; background: #fff4f2; }
.svc-tiles a.is-bad strong { color: #a12a1c; }
.svc-tiles a.is-warn { border-color: #f0c870; background: #fffaf0; }
.svc-alerts { list-style: none; padding: 0; margin: .8rem 0 0; font-size: .88rem; }
.svc-alerts li { padding: .25rem 0; }
.memo-head { display: grid; grid-template-columns: 1fr 1fr; gap: .2rem 2rem; margin: .8rem 0; font-size: .92rem; }
.memo-body { font-size: .92rem; }
.amount-words { font-size: .92rem; background: #f6f8fb; padding: .4rem .6rem; border-radius: 4px; }
.cost-matrix td, .cost-matrix th { font-size: .82rem; }
@media print {
  .amount-words { background: none; padding: 0; }
  .memo-head { grid-template-columns: 1fr 1fr; }
}

/* v2.7 — Collapsible sidebar */
.nav-search { position: relative; margin: .25rem 0 .6rem; }
.nav-search i { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); color: #8494ab; font-size: .8rem; }
.nav-search input { width: 100%; background: var(--ink-soft); border: 1px solid transparent; border-radius: 6px; color: #fff; padding: .45rem .6rem .45rem 2rem; font-size: .85rem; }
.nav-search input::placeholder { color: #8494ab; }
.nav-search input:focus { outline: none; border-color: var(--steel); background: #1d2c44; }
.nav-section { margin-top: .15rem; }
.nav-group-toggle { width: 100%; display: flex; align-items: center; gap: .7rem; background: none; border: 0; color: #aebcd0; padding: .5rem .6rem; border-radius: 6px; font-size: .9rem; font-weight: 500; text-align: left; }
.nav-group-toggle:hover { background: var(--ink-soft); color: #fff; }
.nav-group-toggle:focus-visible { outline: 2px solid var(--steel); outline-offset: 1px; }
.nav-group-toggle i:first-child { color: #8494ab; }
.nav-group-toggle span { flex: 1; }
.nav-chevron { font-size: .7rem; transition: transform .15s ease; }
.nav-group-toggle[aria-expanded="true"] .nav-chevron { transform: rotate(180deg); }
.nav-section.has-active > .nav-group-toggle { color: #fff; }
.nav-section.has-active > .nav-group-toggle i:first-child { color: #9cc3ea; }
.nav-items { padding: .1rem 0 .35rem .85rem; margin-left: .85rem; border-left: 1px solid rgba(255,255,255,.08); }
.nav-items .nav-link { padding: .4rem .6rem; font-size: .88rem; }
.nav-empty { color: #8494ab; font-size: .85rem; padding: .5rem .6rem; }
.code-tag-con { background: #e6f4ea; color: #1e6b3a; }
.code-tag-lic { background: #fff1d6; color: #7a4b00; }
.consumable-badge { background: #e6f4ea; color: #1e6b3a; font-weight: 500; }
.seat-bar { display: flex; align-items: center; gap: .5rem; min-width: 140px; }
.seat-bar .progress { flex: 1; height: 8px; }
.seat-bar span { font-size: .82rem; white-space: nowrap; }
.assign-box { background: #f6f8fb; border-radius: 8px; padding: .75rem; margin-top: .5rem; }
.key-box { background: #f6f8fb; border-radius: 8px; padding: .6rem .75rem; }
.key-box code { word-break: break-all; font-size: .9rem; }

.log-box { font-size: .75rem; background: #16233a; color: #dfe7f2; border-radius: 6px; padding: .6rem; max-height: 260px; overflow: auto; white-space: pre-wrap; word-break: break-all; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }