:root {
    /* Keep Bootstrap components on the same Korean-capable stack as the body. */
    --bs-font-sans-serif: 'Helvetica Neue', Helvetica, Arial, 'Segoe UI',
        'Malgun Gothic', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Noto Sans CJK KR',
        'Nanum Gothic', sans-serif;
    /* Width of the fixed nav sidebar (used by the layout AND the pinned inline row editor). */
    --sidebar-w: 260px;

    /* Brand theme tokens — default = Corona (navy/blue). A per-site override block
       (.site-<key>) below re-points these so the whole app (including the scoped sidebar
       CSS, which inherits these custom properties) re-colours to that site's theme. */
    --brand-dark:          #16324f;   /* primary dark navy (sidebar top, headings) */
    --brand-dark-2:        #1b3a5b;   /* secondary navy (sidebar bottom, top-bar title) */
    --brand-accent:        #1b6ec2;   /* primary blue accent (buttons, active states) */
    --brand-accent-hover:  #155a9e;
    --brand-accent-border: #1861ac;
    --brand-link:          #006bb7;
    --brand-focus:         #258cfb;
}

/* Chicago — green theme (keeps the second site visually distinct from Corona's navy). */
.site-chicago {
    --brand-dark:          #0f3d2e;
    --brand-dark-2:        #14513c;
    --brand-accent:        #1f8a4c;
    --brand-accent-hover:  #17703d;
    --brand-accent-border: #1a7a43;
    --brand-link:          #0b7a3b;
    --brand-focus:         #34c759;
}

/* Top-bar site badge + switcher (a coloured pill; a dropdown when the user has >1 site). */
.site-badge {
    display: inline-flex; align-items: center; gap: 0.3rem;
    background: var(--brand-accent); color: #fff; font-weight: 700; font-size: 0.8rem;
    padding: 0.2rem 0.6rem; border-radius: 12px; white-space: nowrap; cursor: pointer; list-style: none;
}
.site-badge::-webkit-details-marker { display: none; }
.site-badge-static { cursor: default; }
.site-switcher { position: relative; }
.site-switcher-menu {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 4000; min-width: 160px;
    background: #fff; border: 1px solid #d7e0ea; border-radius: 10px;
    box-shadow: 0 12px 30px rgba(16, 27, 42, 0.18); padding: 0.3rem; display: flex; flex-direction: column;
}
.site-switch-item {
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
    padding: 0.45rem 0.6rem; border-radius: 7px; color: var(--brand-dark); text-decoration: none; font-weight: 600;
}
.site-switch-item:hover { background: #f1f5f9; }
.site-switch-item.current { color: var(--brand-accent); }
.site-caret { font-size: 0.7rem; }
.site-check { color: var(--brand-accent); }

html, body {
    /* Latin glyphs use the first fonts; Hangul (and other CJK) glyphs fall through
       per-glyph to the platform's built-in Korean font — Malgun Gothic on Windows,
       Apple SD Gothic Neo on iOS/macOS, Noto Sans CJK/KR on Android/Linux. All are
       system fonts, so Korean renders with no internet and no CDN (on-prem rule). */
    font-family: 'Helvetica Neue', Helvetica, Arial, 'Segoe UI',
        'Malgun Gothic', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Noto Sans CJK KR',
        'Nanum Gothic', sans-serif;
}

a, .btn-link {
    color: var(--brand-link);
}

.btn-primary {
    color: #fff;
    background-color: var(--brand-accent);
    border-color: var(--brand-accent-border);
}

.btn-primary:hover, .btn-primary:focus {
    background-color: var(--brand-accent-hover);
    border-color: var(--brand-accent-hover);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--brand-focus);
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ---- Winsoon Maintenance System shared styles -------------------------------------- */

body { background: #f4f7fb; color: #1f2d3d; margin: 0; }

.page-heading {
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--brand-dark);
    margin: 0 0 0.35rem;
}

.page-intro { color: #5a6b7b; margin: 0 0 1.5rem; font-size: 1.05rem; }

.btn-primary {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.5rem 1.1rem;
    border-radius: 0.5rem;
    text-decoration: none;
    font-weight: 600;
}

/* ---- Auth screens ---------------------------------------------------- */

.login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: linear-gradient(160deg, var(--brand-dark), #244a6f);
}

.login-card {
    width: 100%;
    max-width: 420px;
    background: #fff;
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

.login-title { font-size: 1.6rem; font-weight: 800; color: var(--brand-dark); margin: 0 0 0.25rem; }
.login-sub { color: #5a6b7b; margin: 0 0 1.4rem; }

.login-label {
    display: block;
    font-weight: 600;
    color: #3a4a5b;
    margin: 0.85rem 0 0.3rem;
}

.login-input {
    width: 100%;
    min-height: 48px;
    padding: 0.6rem 0.8rem;
    border: 1px solid #cfd8e3;
    border-radius: 0.55rem;
    font-size: 1.05rem;
    box-sizing: border-box;
}

.login-remember {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.9rem 0;
    color: #45566a;
}

.login-button {
    width: 100%;
    min-height: 50px;
    margin-top: 0.6rem;
    border: none;
    border-radius: 0.6rem;
    background: var(--brand-accent);
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
}
.login-button:hover { background: var(--brand-accent-hover); }

.login-error {
    background: #fdecea;
    border: 1px solid #f5c2bd;
    color: #a12318;
    padding: 0.7rem 0.9rem;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
}

.login-divider {
    text-align: center;
    color: #9aa7b4;
    margin: 1.2rem 0 0.9rem;
    position: relative;
}

.login-entra {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    border: 1px solid #cfd8e3;
    border-radius: 0.6rem;
    text-decoration: none;
    color: var(--brand-dark);
    font-weight: 600;
}

/* Primary sign-in: Microsoft 365 (Entra) presented as the main, brand-coloured button. */
.login-entra-primary {
    min-height: 52px;
    background: var(--brand-accent);
    border-color: var(--brand-accent);
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
}
.login-entra-primary:hover { background: var(--brand-accent-hover); border-color: var(--brand-accent-hover); }

/* Secondary local-login disclosure. */
.login-local-details { margin-top: 1rem; }
.login-local-details > summary {
    cursor: pointer;
    text-align: center;
    color: #55708a;
    font-weight: 600;
    padding: 0.5rem;
    list-style: none;
}
.login-local-details > summary::-webkit-details-marker { display: none; }
.login-local-details > summary:hover { color: var(--brand-dark); text-decoration: underline; }

.login-hint { margin-top: 1.2rem; color: #7a8794; font-size: 0.9rem; text-align: center; }

/* Navigation editor (admin) */
/* Top-bar live site clocks (Corona / Chicago / Korea). */
.world-clocks { display: flex; align-items: center; gap: .4rem; margin-left: .5rem; }
.world-clocks .wc { display: flex; flex-direction: column; align-items: center; line-height: 1.05;
    padding: .1rem .45rem; border: 1px solid rgba(255,255,255,.25); border-radius: 6px; background: rgba(255,255,255,.08); }
.world-clocks .wc-label { font-size: .58rem; letter-spacing: .04em; text-transform: uppercase; opacity: .8; }
.world-clocks .wc-time { font-size: .82rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 900px) { .world-clocks { display: none; } }

/* Lightweight modal dialog (New Request quick-create). */
.modal-backdrop { position: fixed; inset: 0; background: rgba(20,30,45,.45); display: flex; align-items: center;
    justify-content: center; z-index: 1000; padding: 1rem; }
.modal-panel { background: #fff; border-radius: .6rem; padding: 1.2rem 1.4rem; width: min(560px, 100%);
    box-shadow: 0 12px 40px rgba(0,0,0,.25); max-height: 90vh; overflow: auto; }

/* Ticket Conversations browse page. */
.conv-list { display: flex; flex-direction: column; gap: .6rem; }
.conv-card { padding: .6rem .8rem; }
.conv-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; cursor: pointer; }
.conv-caret { color: #7a8794; width: 1rem; }
.conv-title { font-weight: 700; color: #2b3a4b; }
.conv-count { font-size: .75rem; color: #5a6b7b; background: #eef3f9; border-radius: 10px; padding: .05rem .5rem; }
.conv-meta { font-size: .8rem; color: #7a8794; margin-left: auto; }
.conv-open { margin-left: .5rem; }
.conv-snippet { color: #5a6b7b; font-size: .88rem; margin: .35rem 0 0 1.5rem; }
.conv-thread { margin: .5rem 0 0 1.5rem; display: flex; flex-direction: column; gap: .5rem; }
.conv-msg { border-left: 3px solid #e6ecf3; padding: .1rem .7rem; }
.conv-msg-head { display: flex; align-items: center; gap: .5rem; }
.conv-msg-time { font-size: .75rem; color: #7a8794; margin-left: auto; }
.conv-msg-body { white-space: pre-wrap; color: #2b3a4b; margin-top: .15rem; }
.conv-photos { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .35rem; }
.conv-photos img { height: 64px; border-radius: 6px; border: 1px solid #e6ecf3; }

.dept-members { display: flex; flex-wrap: wrap; gap: .35rem; margin: .3rem 0; }
.site-groups-block { margin: .35rem 0 .2rem; }
.site-groups-head { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #5a6b7b; margin-bottom: .2rem; }

.nav-edit-headbtns { display: flex; gap: .5rem; flex-wrap: wrap; }
.nav-edit-child > td:nth-child(2) { padding-left: 1.2rem; }
.nav-edit-child { background: #f7fafd; }
.nav-edit-indent { color: #9aa8b8; margin-right: .3rem; }
/* Compact per-page group access: a small "👥 N" toggle that opens a floating popover of group chips. */
.nav-grp { position: relative; }
.nav-grp-sum { cursor: pointer; list-style: none; white-space: nowrap; display: inline-block;
    padding: .2rem .5rem; border: 1px solid #e6ecf3; border-radius: 6px; background: #f4f7fb; font-size: .85rem; }
.nav-grp-sum::-webkit-details-marker { display: none; }
.nav-grp[open] > .nav-grp-sum { background: #e8f0fb; border-color: #b9d0ee; }
.nav-grp-pop { position: absolute; z-index: 30; right: 0; top: 100%; margin-top: .25rem; width: 15rem;
    background: #fff; border: 1px solid #e6ecf3; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.14);
    padding: .5rem; display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.nav-grp-inherit { width: 100%; font-size: .82rem; font-weight: 600; color: #2b3a4b; border-bottom: 1px solid #eef3f9; padding-bottom: .35rem; margin-bottom: .1rem; }
/* A group chip with edit access reads green; the small toggle flips view (👁) / edit (✎). */
.pill.pill-edit { background: #2e9e4c; color: #fff; }
.grp-tog { border: none; background: transparent; cursor: pointer; font-size: .8rem; padding: 0 .15rem; opacity: .9; }
.pill.pill-edit .grp-tog { color: #fff; }
.grp-ro { font-size: .8rem; margin-left: .15rem; opacity: .85; }
.nav-edit-toolbar { display: flex; gap: .5rem; flex-wrap: wrap; margin: .6rem 0 1rem; }
.nav-edit-sectionhead { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .4rem; }
.nav-edit-sectionhead .filter-input { min-width: 12rem; font-weight: 700; }
.nav-edit-arrows { white-space: nowrap; }
.nav-edit-arrows .mini { padding: .1rem .4rem; }
.nav-edit-table td { vertical-align: middle; }
.nav-edit-table .filter-input { min-width: 9rem; margin-right: .3rem; }
/* .data-table clips to rounded corners with overflow:hidden, which cut off the group-access (👥) popover when it
   opened near a section's bottom row. Let this table overflow so the absolutely-positioned menu shows in full. */
.data-table.nav-edit-table { overflow: visible; }

/* Updates / changelog page */
.update-tabs { display: flex; gap: .5rem; }
.update-date-head { font-weight: 700; color: #55708a; margin: 1rem 0 .4rem; }
.update-card { padding: .8rem 1rem; margin-bottom: .6rem; }
.update-card-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.update-title { font-weight: 700; }
.update-time { margin-left: auto; color: #7a8794; font-size: .85rem; white-space: nowrap; }
.update-details { margin: .5rem 0 0; padding-left: 1.2rem; }
.update-details li { margin: .2rem 0; }

/* Users table: keep the Actions column visible even if the table overflows a narrow screen
   (pinned to the right; inert when the table already fits). */
.users-table th:last-child, .users-table td:last-child {
    position: sticky; right: 0; background: #fff;
    box-shadow: -6px 0 6px -5px rgba(20,40,60,0.12);
}
.users-table thead th:last-child { background: #f6f9fc; }
.users-table tbody tr:hover td:last-child { background: #f9fbfe; }
.users-table tbody tr.row-disabled td:last-child { background: #fbfbfc; }
.users-table tbody tr.editing td:last-child { background: #eef5fc; }

/* Vendor self-service portal (anonymous, kiosk layout). Higher specificity than the generic `.kiosk`
   (max-width:640px) which loads later and would otherwise squeeze this document-style page — widen it so the
   whole estimate (letterhead + line-item table + shipping + messages) is visible in one view. */
.kiosk.vendor-portal { max-width: 1080px; }
.vendor-head { display: flex; align-items: center; gap: 1rem; text-align: left; }
.vendor-logo { height: 56px; width: auto; border-radius: 6px; }
/* Vendor page letterhead: company block, then the document title/number. */
.vendor-letterhead { display: flex; align-items: center; gap: 1rem; padding-bottom: .8rem; border-bottom: 2px solid var(--brand-accent, #0a6b3b); text-align: left; }
.vendor-company { line-height: 1.4; color: #45566a; }
.vendor-company-name { font-size: 1.35rem; font-weight: 800; color: var(--brand-dark, #17324a); }
.vendor-doc-title { text-align: left; margin: 1rem 0 .4rem; }
.vendor-doc-title h1 { margin: 0; font-size: 1.5rem; }
.vendor-doc-no { color: #55708a; font-weight: 600; }
.vendor-price { width: 8rem; text-align: right; }
.vendor-fields { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: .8rem; }
.vendor-fields label, .vendor-notes { display: block; }
.vendor-check { display: inline-flex; align-items: center; gap: .5rem; margin-top: .6rem; font-weight: 600; }
.vendor-check input { width: 1.1rem; height: 1.1rem; }
.vendor-notes { margin-top: .8rem; }
.vendor-actions { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: .6rem; }
.vendor-decline { margin-top: .8rem; }
.vendor-docs a { margin-right: .8rem; }
.vendor-head .vendor-signout { margin-left: auto; }
.vendor-thread { display: flex; flex-direction: column; gap: .4rem; margin: .4rem 0; max-height: 20rem; overflow-y: auto; }
.vendor-msg { padding: .4rem .6rem; border-radius: 8px; max-width: 85%; }
.vendor-msg.from-vendor { background: #eef5fc; align-self: flex-start; }
.vendor-msg.from-staff { background: #e9f6ee; align-self: flex-end; }
.vendor-msg-meta { font-size: .78rem; color: #667; margin-bottom: .1rem; }

.home-welcome { background: #fff; border: 1px solid #e2e8f0; border-radius: 0.8rem; padding: 1.2rem 1.4rem; }

/* ---- Data screens (lists, detail, forms) ----------------------------- */

.page-head-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.title-group { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.title-group .title-edit { min-width: 340px; font-size: 1.15rem; font-weight: 600; }
/* Purchase Orders: low-stock reorder panel */
.reorder-head { display: flex; align-items: baseline; gap: .75rem; cursor: pointer; flex-wrap: wrap; }
.reorder-group { margin-top: 1rem; padding-top: .75rem; border-top: 1px solid var(--border, #e2e8f0); }
.reorder-group-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .4rem; flex-wrap: wrap; }
/* Inventory edit: multi-vendor picker (chips + filter-as-you-type add list) */
.vendor-pick { display: flex; flex-direction: column; gap: .35rem; }
.vendor-pick .chip-row { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; min-height: 1.6rem; }
.vendor-pick .add-results { display: flex; flex-wrap: wrap; gap: .35rem; max-height: 150px; overflow-y: auto; }
.head-actions { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
/* Keep paired buttons (e.g. Export + Import) together so they never split across a wrap. */
.btn-pair { display: inline-flex; gap: 0.6rem; align-items: center; }

/* Inventory toolbar: compact buttons so the row wraps as little as possible. */
.inv-toolbar { gap: 0.35rem; }
.inv-toolbar .btn-pair { gap: 0.35rem; }
.inv-toolbar .btn-secondary, .inv-toolbar .btn-primary { min-height: 36px; padding: 0.35rem 0.6rem; font-size: 0.85rem; }
.inv-toolbar .btn-link { padding: 0.3rem 0.4rem; }

.back-link { display: inline-block; margin-bottom: 0.6rem; color: var(--brand-accent); text-decoration: none; font-weight: 600; }

/* Global history back link (the page you came from), rendered by js/nav-history.js. */
.global-back { margin-bottom: .35rem; }
/* Global back link relocated into the top bar, right of the app title. */
.top-bar-back { margin: 0; display: inline-flex; align-items: center; }
.top-bar-back a { font-size: .85rem; color: var(--brand-accent); text-decoration: none; white-space: nowrap; }
.top-bar-back a:hover { text-decoration: underline; }
.back-link-global { font-size: .85rem; font-weight: 500; color: #55637a; margin-bottom: 0; }
.back-link-global:hover { color: var(--brand-accent); text-decoration: underline; }

.btn-secondary, .btn-primary {
    min-height: 44px; padding: 0.5rem 1.1rem; border-radius: 0.5rem; border: 1px solid transparent;
    font-weight: 600; font-size: 0.98rem; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center;
}
.btn-primary { background: var(--brand-accent); color: #fff; }
.btn-primary:hover { background: var(--brand-accent-hover); }
.btn-secondary { background: #fff; color: var(--brand-dark-2); border-color: #cfd8e3; }
.btn-secondary:hover { background: #f0f5fb; }
.btn-secondary.danger { color: #c0392b; border-color: #e6b3ac; }
.btn-secondary.danger:hover { background: #fbeeec; }
.btn-secondary:disabled, .btn-primary:disabled { opacity: 0.5; cursor: default; }
.btn-disabled { min-height: 44px; padding: 0.5rem 1.1rem; border-radius: 0.5rem; background: #eef2f7; color: #97a6b6; display: inline-flex; align-items: center; }
.btn-link { color: var(--brand-accent); text-decoration: none; }

.filter-bar { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin: 0.4rem 0 0.5rem; }
.filter-spacer { flex: 1 1 auto; }   /* pushes trailing toolbar buttons (Export/Import) to the right */

/* Stock-count trend chart (inline SVG, self-contained — no chart library) */
.chart-wrap { width: 100%; overflow-x: auto; }
.trend-svg { width: 100%; min-width: 520px; height: auto; display: block; }
.trend-svg .axis { stroke: #cfd8e3; stroke-width: 1; }
.trend-svg .axis-lbl { fill: #6b7684; font-size: 11px; }
.trend-svg .x-lbl { text-anchor: middle; }
.trend-svg .trend-line { stroke: #1b6ec2; stroke-width: 2; }
.trend-svg .trend-dot { fill: #1b6ec2; }
.trend-svg .trend-count { fill: #e67514; stroke: #fff; stroke-width: 1; }
.chart-legend { display: flex; gap: 1.2rem; font-size: .82rem; color: #6b7684; margin-top: .3rem; }
.chart-legend .lg-swatch { display: inline-block; width: 14px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: .3rem; }
.chart-legend .lg-line { background: #1b6ec2; }
.chart-legend .lg-count { background: #e67514; height: 10px; width: 10px; border-radius: 50%; }
.num-input { text-align: right; }

/* Equipment inspection checklists (iPad-first) */
.chk-today { display: flex; flex-direction: column; gap: .5rem; }
.chk-today-card { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1rem; }
.chk-today-name { font-weight: 700; font-size: 1.05rem; }
.chk-today-sub { color: #6b7684; font-size: .9rem; margin-top: .2rem; }
.chk-today-people { color: #45566a; font-size: .85rem; margin-top: .3rem; display: flex; flex-direction: column; gap: .1rem; }
.chk-done-card { border-left: 4px solid #2e9b57; background: #f4faf6; }
.chk-open-btn { min-width: 6rem; min-height: 44px; }
.chk-list { display: flex; flex-direction: column; gap: .15rem; margin-top: .4rem; }
/* Offline-safe checklist fill (checkfill.js) */
.chkoff-bar { position: sticky; top: 0; z-index: 20; padding: .55rem .9rem; border-radius: 6px; font-weight: 600; margin-bottom: .6rem; }
.chkoff-bar.ok { background: #e7f6ec; color: #1e7a44; border: 1px solid #b6e2c6; }
.chkoff-bar.busy { background: #eef3fb; color: #2b5aa8; border: 1px solid #cADAF2; }
.chkoff-bar.warn { background: #fdf3e2; color: #8a5a00; border: 1px solid #f0d59a; }
.chkoff-head { margin-bottom: .4rem; }
.chkoff-head .po-lbl { display: block; margin-top: .1rem; }
.chk-online-only { color: #8a6d3b; background: #fcf3e3; border-radius: 4px; padding: .2rem .5rem; font-size: .85rem; }
.chk-media { display: inline-flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.chk-media-tag { color: #8a5a00; font-size: .8rem; }
.saved-sig-row { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin: .3rem 0; }
.saved-sig-thumb { max-height: 60px; max-width: 220px; border: 1px solid #dfe6ee; border-radius: 6px; background: #fff; }
.chk-room { background: #16324f; color: #fff; font-weight: 700; padding: .4rem .8rem; border-radius: 6px; margin-top: .8rem; }
.chk-equip { background: #eef2f7; color: #1b3a5b; font-weight: 700; padding: .3rem .8rem; margin-top: .3rem; }
.chk-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; padding: .5rem .8rem; border-bottom: 1px solid #eef2f7; }
.chk-item.chk-oor { background: #fdecea; }
.chk-point { flex: 1 1 14rem; font-size: 1rem; }
.chk-range { display: inline-block; margin-left: .5rem; color: #8a6d3b; background: #fcf3e3; border-radius: 4px; padding: 0 .4rem; font-size: .8rem; }
.chk-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.chk-status { display: inline-flex; gap: .25rem; }
.chk-btn { min-width: 3.2rem; min-height: 44px; border: 1px solid #cfd8e3; background: #fff; border-radius: 8px; font-weight: 700; color: #45566a; cursor: pointer; }
.chk-btn.on.ok { background: #1e7a3a; border-color: #1e7a3a; color: #fff; }
.chk-btn.on.ng { background: #c0392b; border-color: #c0392b; color: #fff; }
.chk-btn.on.na { background: #6b7684; border-color: #6b7684; color: #fff; }
.chk-btn:disabled { opacity: .55; cursor: default; }
.chk-reading { width: 6rem; text-align: right; }
.chk-reading.oor { border-color: #c0392b; background: #fdecea; }
.chk-remark { width: 10rem; }
.chk-signoff .kiosk-sig-canvas { max-width: 100%; }
/* required check points */
.req-star { color: #c0392b; font-weight: 800; margin-left: .15rem; }
.chk-missing { outline: 2px solid #c0392b; outline-offset: 3px; border-radius: 10px; }
/* live "required left" nag on the fill page */
.req-banner { padding: .6rem .9rem; border-radius: 8px; margin: .5rem 0 .8rem; font-weight: 600; position: sticky; top: .3rem; z-index: 5; }
.req-banner-todo { background: #fff4e5; border: 1px solid #f0c48a; color: #8a5a00; }
.req-banner-done { background: #e9f7ee; border: 1px solid #a9dcbb; color: #1e7a3a; }
.chk-req-pending { box-shadow: inset 4px 0 0 #e0a800; }
.req-pending-tag { display: inline-block; margin-left: .5rem; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #8a5a00; background: #fff4e5; border: 1px solid #f0c48a; border-radius: 4px; padding: 0 .35rem; }
/* checklist: photo/signature capture on a check point */
.chk-thumb { height: 46px; border-radius: 6px; border: 1px solid #cfd8e3; }
.chk-approval-sig { display: flex; align-items: center; gap: .5rem; margin: .3rem 0 .6rem; }
.chk-approval-lbl { font-size: .82rem; color: #5a6b7b; font-weight: 600; }
.chk-approval-sig .chk-thumb { height: 60px; background: #fff; }
.chk-capture { cursor: pointer; }
.chk-sigwrap { display: inline-flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
.chk-sig { width: 240px; height: 90px; max-width: 100%; }
/* checklist designer: per-row actions + machine picker list */
.chk-row-actions { display: inline-flex; gap: .25rem; white-space: nowrap; }
.chk-subhead { font-size: .95rem; font-weight: 700; color: #45566a; margin: .8rem 0 .3rem; }
.pick-list { display: flex; flex-direction: column; gap: .25rem; max-height: 260px; overflow-y: auto; margin-top: .4rem; }
.pick-row { text-align: left; border: 1px solid #e6ecf3; background: #fff; border-radius: 8px; padding: .45rem .6rem; cursor: pointer; }
.pick-row:hover { background: #f2f7fc; border-color: #cfe0f0; }
.pick-room-head { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #5a6b7b; margin: .5rem 0 .15rem; padding-bottom: .1rem; border-bottom: 1px solid #eef2f7; }
.pick-room-head:first-child { margin-top: 0; }
.switch-lbl { display: inline-flex; align-items: center; gap: .35rem; }
/* weekly-on-days picker (Mon…Sun) */
.weekday-picker { display: flex; flex-wrap: wrap; gap: .35rem; margin: .3rem 0; }
.weekday-chip { display: inline-flex; align-items: center; gap: .3rem; border: 1px solid #cfd8e3; border-radius: 8px; padding: .3rem .55rem; cursor: pointer; min-height: 40px; user-select: none; font-weight: 600; color: #45566a; }
.weekday-chip.on { background: #163250; border-color: #163250; color: #fff; }
/* checklist run status pills (Open / Completed / Approved) */
.po-open { background: #fff3cd; color: #7a5b00; }
.po-completed { background: #d9e8fb; color: #1b4f8a; }

/* Day/Week/Month date navigator (Service log). */
.period-bar { margin-bottom: 0.3rem; }
.seg { display: inline-flex; border: 1px solid #cfd8e3; border-radius: 0.5rem; overflow: hidden; }
.seg-btn { background: #fff; border: none; border-left: 1px solid #e3e9f0; padding: 0.4rem 0.9rem;
    font-size: 0.9rem; font-weight: 600; color: #45566a; cursor: pointer; min-height: 38px; }
.seg-btn:first-child { border-left: none; }
.seg-btn:hover { background: #eef6ff; }
.seg-btn.active { background: var(--brand-accent); color: #fff; }
/* Reservations: Upcoming/History toggle, attachment lists, history detail row */
.seg-toggle { display: inline-flex; gap: 0; }
.seg-toggle .btn-secondary { border-radius: 0; }
.seg-toggle .btn-secondary:first-child { border-radius: 0.5rem 0 0 0.5rem; }
.seg-toggle .btn-secondary:last-child { border-radius: 0 0.5rem 0.5rem 0; }
.btn-secondary.active { background: var(--brand-accent); color: #fff; border-color: var(--brand-accent); }
.attach-list li { display: flex; align-items: center; gap: 0.4rem; padding: 0.2rem 0; }
.history-detail { padding: 0.6rem 0.4rem; background: #f7f9fc; border-radius: 0.4rem; }
.history-detail-row td { background: #f7f9fc; }
.nav-arrow { background: #fff; border: 1px solid #cfd8e3; border-radius: 0.5rem; min-width: 38px; min-height: 38px;
    font-size: 0.85rem; color: #35506d; cursor: pointer; }
.nav-arrow:hover { background: #eef6ff; border-color: #b7d3ee; }
.period-label { font-weight: 700; color: var(--brand-dark); min-width: 9rem; text-align: center; }

/* Automation page — sample email preview. */
.email-preview { margin-top: .8rem; border: 1px solid #dbe4ee; border-radius: .6rem; overflow: hidden; }
.email-preview .email-head { background: #f6f9fc; padding: .6rem .9rem; border-bottom: 1px solid #e3e9f0; font-size: .85rem; color: #45566a; }
.email-preview .email-body { padding: 1rem 1.1rem; background: #fff; }
.filter-input, .filter-select {
    min-height: 44px; padding: 0.4rem 0.7rem; border: 1px solid #cfd8e3; border-radius: 0.5rem; font-size: 1rem; background: #fff;
}
.filter-input { min-width: 165px; }
.filter-input.small { min-width: 90px; width: 95px; }
/* Cap select width so one long option (e.g. a location name) can't balloon the
   control and force the whole bar to wrap onto a sparse extra line. Kept tight so
   the Qty filter fits on the same row as the dropdowns. */
.filter-select { min-width: 130px; max-width: 175px; }
.filter-check, .filter-inline { display: inline-flex; align-items: center; gap: 0.4rem; color: #45566a; }

/* Inventory filter bar: keep every control on one row (no wrap/overflow) even with the
   extra Machines filter — the search box flexes to fill and the dropdowns shrink to fit. */
.inv-filter-bar { flex-wrap: nowrap; gap: 0.4rem; }
.inv-filter-bar .inv-search { flex: 1 1 90px; min-width: 60px; }
.inv-filter-bar .filter-select { min-width: 88px; max-width: 150px; }

/* Row-selection checkbox column (Inventory Status → create PO from chosen parts). */
.sel-col { width: 40px; text-align: center; }
.sel-col input[type=checkbox] { width: 18px; height: 18px; cursor: pointer; }
tr.row-selected > td { background: #eef5fc; }
/* Count flows inline (small gap) rather than margin-left:auto — auto pushed it to
   the far right, so on a wrap it sat alone on an otherwise-empty line. */
.filter-count { margin-left: 0.5rem; color: #7a8794; font-weight: 600; }

/* Table pager (Inventory + other big lists) */
.table-pager { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem; margin: 0.6rem 0.2rem; font-size: 0.9rem; }
.table-pager .pager-info { color: #7a8794; font-weight: 600; }
.table-pager .pager-nav, .table-pager .pager-size { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
.table-pager .pager-page { color: #55606b; font-weight: 600; }
.table-pager .btn-link { padding: 0.25rem 0.55rem; border-radius: 6px; min-height: 34px; }
.table-pager .btn-link:disabled { color: #b3bcc4; cursor: default; }
.table-pager .btn-link.active { background: var(--brand-accent); color: #fff; }

/* ---- Org chart ---------------------------------------------------------- */
.org-chart-wrap { overflow-x: auto; padding: 1rem 0.25rem 1.5rem; }
.org-tree, .org-tree ul { list-style: none; margin: 0; padding: 0; }
/* Each level is a horizontal, centered row; a node's box sits ABOVE its children's row.
   Root + every nested list are block-level flex rows (NOT inline) so the box and the
   child list stack vertically instead of sitting side-by-side. */
.org-tree, .org-tree ul { display: flex; justify-content: center; }
.org-tree ul { position: relative; padding-top: 22px; }
.org-tree li { position: relative; padding: 22px 10px 0; text-align: center; }
/* horizontal connector bar + drop into each sibling */
.org-tree li::before, .org-tree li::after {
    content: ''; position: absolute; top: 0; right: 50%;
    border-top: 2px solid #c4d0dc; width: 50%; height: 22px;
}
.org-tree li::after { right: auto; left: 50%; border-left: 2px solid #c4d0dc; }
.org-tree li:only-child::before, .org-tree li:only-child::after { display: none; }
.org-tree li:only-child { padding-top: 22px; }
.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 #c4d0dc; border-radius: 0 6px 0 0; }
.org-tree li:first-child::after { border-radius: 6px 0 0 0; }
/* vertical line from a parent box down to its children's connector bar (every child list) */
.org-tree ul::before {
    content: ''; position: absolute; top: 0; left: 50%;
    border-left: 2px solid #c4d0dc; width: 0; height: 22px;
}
/* the top-level roots have no parent, so no connector above them */
.org-tree > li { padding-top: 0; }
.org-tree > li::before, .org-tree > li::after { display: none; }

.org-box {
    display: inline-block; min-width: 150px; max-width: 230px; white-space: normal;
    border: 1px solid #cdd8e4; border-radius: 10px; background: #fff;
    padding: 0.55rem 0.7rem; box-shadow: 0 1px 2px rgba(20,40,70,.06); text-align: center;
}
.org-box .org-name { font-weight: 700; color: #1f2d3d; }
.org-box .org-avatar { display: block; margin: 0 auto 6px; }
.org-box .org-titles { margin-top: 0.3rem; display: flex; flex-wrap: wrap; gap: 0.25rem; justify-content: center; }
.org-box .org-dept { margin-top: 0.3rem; color: #7a8794; font-size: 0.82rem; }
/* The top-of-organization node stands out so the hierarchy reads top-down at a glance. */
.org-box.org-top { border: 2px solid var(--brand-dark, #16324f); background: #f2f7fc; box-shadow: 0 2px 6px rgba(20,40,70,.12); }
.org-box.org-top .org-name { font-size: 1.1rem; }
.org-box .org-crown { font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--brand-dark, #16324f); margin-bottom: .2rem; }

/* Org chart — "By department" view */
.org-dept-wrap { display: flex; flex-direction: column; gap: 1rem; }
.org-dept-card .org-dept-leaders { display: flex; flex-wrap: wrap; gap: .8rem; margin: .3rem 0 .6rem; }
.org-dept-card .org-dept-leaders .org-box { min-width: 150px; }
.org-dept-members { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.org-dept-members li { display: flex; align-items: center; gap: .5rem; padding: .3rem .5rem; border-radius: 6px; background: #f7f9fc; border: 1px solid #eaeff5; flex-wrap: wrap; }
.org-dept-members .org-avatar-sm { border-radius: 50%; }
.org-dept-members .org-name { font-weight: 600; color: #1f2d3d; }

/* Print an org chart cleanly (chrome already hidden by the global print rules). */
@media print {
    .org-chart-wrap { overflow: visible; }
    .org-tree .org-box { -webkit-print-color-adjust: exact; print-color-adjust: exact; break-inside: avoid; }
    .org-tree li::before, .org-tree li::after, .org-tree ul ul::before { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

.org-edit .org-add-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.4rem; }
.org-edit-tree .org-inline-titles { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; margin: 0 0.5rem; }
.org-title-list { display: flex; flex-direction: column; gap: 0.25rem; margin: 0.3rem 0 0.6rem; }
.org-title-row { display: flex; align-items: center; gap: 0.5rem; }
.org-title-row.inactive .org-title-name { color: #9aa6b2; }
.org-title-name { min-width: 12rem; }
.org-title-picker { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
/* user picker rows */
.up-name { font-weight: 600; }
.up-sub { display: block; color: #7a8794; font-size: 0.82rem; }

.table-scroll { overflow-x: auto; }
/* The existing-hotspots table shows only the one edited row, so it never needs
   horizontal scroll — keep it overflow-visible so the TilePicker popup in the
   edit row isn't clipped (overflow-x:auto forces overflow-y to compute to auto). */
.hs-scroll { overflow: visible; }
.data-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 0.6rem; overflow: hidden; }
/* The existing-hotspots table hosts the inline edit row with the TilePicker popup;
   its own overflow:hidden (for the rounded corners) would clip that popup, so allow
   it to overflow. This table only ever shows the single edited row. */
.hs-existing { overflow: visible; }
.data-table th, .data-table td { padding: 0.6rem 0.8rem; text-align: left; border-bottom: 1px solid #eef2f7; white-space: nowrap; }
.data-table thead th { background: #f6f9fc; color: #45566a; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.03em; }
.data-table tbody tr:hover { background: #f9fbfe; }
.data-table .num { text-align: right; }
.data-table tfoot td { font-weight: 700; background: #f6f9fc; }
.total-label { color: #45566a; }
.total-value { color: var(--brand-dark); }
.row-low { background: #fff7f5; }
.badge-low { background: #e14b3b; color: #fff; font-size: 0.68rem; padding: 0.05rem 0.35rem; border-radius: 0.5rem; margin-left: 0.35rem; }
.text-low, .text-neg { color: #c0392b; font-weight: 700; }
.text-pos { color: #2e7d32; font-weight: 600; }
.empty-cell { text-align: center; color: #97a6b6; padding: 1.5rem; }

.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
/* Machine detail: Components card ~35% narrower, "Parts on this machine" ~35% wider (0.65fr / 1.35fr). */
.machine-grid { grid-template-columns: 0.65fr 1.35fr; }
/* Keep the two columns at a fixed proportion regardless of the selected component's content
   (grid items default to min-width:auto, which lets wide content resize the columns — pinning
   min-width:0 makes the Components card keep the same width; wide tables scroll inside instead). */
.machine-grid > * { min-width: 0; }
@media (max-width: 820px) { .machine-grid { grid-template-columns: 1fr; } }
.detail-card { background: #fff; border: 1px solid #e6ecf3; border-radius: 0.8rem; padding: 1.2rem; margin-bottom: 1rem; }
/* Color-coded ticket sections — a left accent bar + faint tint so each section reads as its own block. */
.detail-card.card-assign   { border-left: 5px solid #5b8def; background: #f6f9ff; }
.detail-card.card-work     { border-left: 5px solid #2fa36b; background: #f5fbf7; }
.detail-card.card-attach   { border-left: 5px solid #d98a2b; background: #fffaf3; }
.detail-card.card-convo    { border-left: 5px solid #9a63d6; background: #faf6ff; }
.detail-card.card-complete { border-left: 5px solid #1e9e8a; background: #f2fbf9; }
.detail-card.card-report   { border-left: 5px solid #6b7280; background: #f7f8fa; }
.detail-card.card-usage    { border-left: 5px solid #c0842b; background: #fffbf2; }
.detail-card.card-schedule { border-left: 5px solid #0ea5a4; background: #f2fbfb; }
.detail-card.card-schedule .card-title { color: #0c7c7b; }
/* Calendar-colour picker on the ticket */
.color-picker-row { flex-wrap: wrap; align-items: center; gap: .35rem; }
.color-swatch { width: 26px; height: 26px; border-radius: 6px; border: 2px solid #fff; box-shadow: 0 0 0 1px #cfd8e3; cursor: pointer; padding: 0; }
.color-swatch.sel { box-shadow: 0 0 0 2px #16324f; }
.color-input { width: 42px; height: 30px; padding: 0; border: 1px solid #cfd8e3; border-radius: 6px; background: #fff; cursor: pointer; }
.cal-preview { padding: .1rem .5rem; border-radius: 6px; color: #fff; font-size: .8rem; }
/* A ticket drawn as a start→end span on the calendar */
.cal-item.cal-span { border-radius: 3px; }
.board-colorpick { margin-top: .4rem; padding: .35rem; background: rgba(255,255,255,0.6); border-radius: 6px; }
.board-card.board-color-manual { /* colour comes from the inline border-left-color + tint; no age pulse */ }
.board-color-rows { display: flex; flex-direction: column; gap: .5rem; }
.board-color-rows .pill { min-width: 120px; text-align: center; }
/* Assignment contact badges + conversation recipient picker */
.contact-badge { font-size: .74rem; font-weight: 600; margin-left: .25rem; }
.compose-recipients { flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .4rem; }
.recip-dd > summary { cursor: pointer; padding: .25rem .6rem; border: 1px solid #cfd8e3; border-radius: 6px; background: #fff; display: inline-block; }
.recip-dd[open] > summary { border-color: var(--brand-accent); }
.recip-dd .recip-list { margin-top: .3rem; max-height: 240px; overflow: auto; border: 1px solid #e6ecf3; border-radius: 6px; padding: .3rem; background: #fff; }
.detail-card.card-assign .card-title   { color: #2f5db0; }
.detail-card.card-work .card-title     { color: #1f7a50; }
.detail-card.card-attach .card-title   { color: #9a5e12; }
.detail-card.card-convo .card-title    { color: #6a3fa0; }
.detail-card.card-complete .card-title { color: #147a6b; }
.detail-card.card-usage .card-title    { color: #8a5c12; }
.card-title { font-size: 1.1rem; font-weight: 700; color: var(--brand-dark); margin: 0 0 0.8rem; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 0.4rem 1rem; margin: 0; }
.kv dt { color: #7a8794; }
.kv dd { margin: 0; color: #1f2d3d; font-weight: 600; }
.muted { color: #97a6b6; }
.plain-list { list-style: none; padding: 0; margin: 0; }
.plain-list li { padding: 0.35rem 0; border-bottom: 1px solid #f0f4f8; }

.add-inline { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 0.8rem; }
.receive-row { display: flex; gap: 0.5rem; margin-top: 0.9rem; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.9rem; margin-bottom: 1rem; }
.form-grid label { display: flex; flex-direction: column; gap: 0.3rem; font-weight: 600; color: #45566a; }
.form-grid .span-2 { grid-column: span 2; }
/* Single-column variant: every field full-width, one per row. */
.form-grid.single-col { grid-template-columns: 1fr; }
.form-grid.single-col .span-2 { grid-column: 1; }
.inline-error { background: #fdecea; border: 1px solid #f5c2bd; color: #a12318; padding: 0.6rem 0.8rem; border-radius: 0.5rem; margin: 0.6rem 0; }
.inline-ok { background: #eaf7ee; border: 1px solid #bfe3c9; color: #1e6b34; padding: 0.6rem 0.8rem; border-radius: 0.5rem; margin: 0.6rem 0; }
.override-check { display: inline-flex; align-items: center; gap: 0.4rem; margin-left: 0.8rem; font-weight: 600; }

/* Component tree */
.tree { list-style: none; padding: 0; margin: 0; }
.tree-node { }
.tree-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.3rem 0; border-bottom: 1px solid #f4f7fb; flex-wrap: wrap; }
/* The component name holds line 1; in edit mode the action buttons wrap to their own
   line(s) when the (indented, narrow) panel can't fit them — so nothing is ever clipped.
   Non-edit rows show only the name, so their compact size is unchanged. */
.tree-name { flex: 1 1 auto; min-width: 7rem; text-align: left; }
.tree-name { font-weight: 600; color: #1f2d3d; }
.tree-actions { display: inline-flex; gap: 0.3rem; align-items: center; flex-wrap: wrap; }
.tree-edit { display: flex; gap: 0.4rem; padding: 0.3rem 0; }
.mini { min-height: 32px; padding: 0.2rem 0.55rem; font-size: 0.8rem; border: 1px solid #cfd8e3; border-radius: 0.4rem; background: #fff; cursor: pointer; }
.mini:hover { background: #f0f5fb; }
.mini.danger { color: #c0392b; border-color: #e6b3ac; }
.mini-select { min-height: 32px; font-size: 0.8rem; border: 1px solid #cfd8e3; border-radius: 0.4rem; background: #fff; }

/* Import preview */
.import-summary { margin: 0.6rem 0; padding: 0.5rem 0.8rem; background: #f6f9fc; border-radius: 0.5rem; }
.import-summary.committed { background: #eaf7ee; }
.warn-count { color: #b8860b; }
.warn-list { color: #8a6d0b; font-size: 0.88rem; }
.data-table.compact th, .data-table.compact td { padding: 0.3rem 0.6rem; font-size: 0.88rem; }
.tag { font-size: 0.72rem; font-weight: 700; padding: 0.1rem 0.45rem; border-radius: 0.5rem; text-transform: uppercase; }
.tag-add { background: #e3f6e8; color: #1e6b34; }
.tag-update { background: #fff3d6; color: #8a6d0b; }
.tag-skip { background: #eef2f7; color: #7a8794; }

/* ---- Visual navigation: hotspots, maps, photos ----------------------- */

.hotspot-wrap {
    max-width: 100%;
    overflow: auto;
    background: #0f1b2a;
    border-radius: 0.6rem;
    -webkit-overflow-scrolling: touch;
}
.hotspot-svg { display: block; width: 100%; height: auto; max-height: 78vh; }
.hotspot-svg.editor-svg { cursor: crosshair; }

.hotspot-shape {
    fill: rgba(27, 110, 194, 0.22);
    stroke: #2f9bff;
    stroke-width: 3;
    cursor: pointer;
    transition: fill 0.1s ease;
}
.hotspot-shape:hover { fill: rgba(47, 155, 255, 0.42); }
.hotspot-shape.selected { fill: rgba(106, 168, 79, 0.45); stroke: #6aa84f; }
.hotspot-shape.existing { fill: rgba(27, 110, 194, 0.16); cursor: default; }
/* Cross-highlight: hovering a region OR its legend/table row lights all of them up in amber. */
.hotspot-shape.hs-hover, .hotspot-shape.hs-sel { fill: rgba(230, 126, 34, 0.5); stroke: #e67e22; stroke-width: 5; }
.hotspot-label.hs-hover, .hotspot-label.hs-sel { font-size: 1.08em; }
/* Declutter: on maps that have a legend (facility map + editor) region names are hidden by
   default (no overlap); the hovered region reveals its name, and "Show labels" reveals all.
   Scoped to .hotspot-legendwrap so Machine Detail photo labels stay always-visible. */
.hotspot-legendwrap .hotspot-label { opacity: 0; transition: opacity 0.12s ease; }
.hotspot-legendwrap .hotspot-label.hs-hover,
.hotspot-legendwrap .hotspot-label.hs-sel { opacity: 1; }
.hotspot-legendwrap.labels-on .hotspot-label { opacity: 1; }
.hotspot-shape.existing { cursor: pointer; }
.hs-labeltoggle { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.75rem;
    color: #55637a; cursor: pointer; font-weight: 400; }

/* Map + side legend layout (facility map & hotspot editor). */
.hotspot-legendwrap { display: flex; gap: 0.75rem; align-items: flex-start; flex-wrap: wrap; }
.hotspot-legendwrap > .hotspot-wrap { flex: 1 1 520px; min-width: 0; }
.hotspot-legend { flex: 0 0 240px; max-height: 78vh; overflow-y: auto; background: #fff;
    border: 1px solid #dde5ee; border-radius: 0.6rem; padding: 0.4rem; }
.hotspot-legend .hs-legend-title { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem;
    font-size: 0.8rem; font-weight: 700; color: #33425c; padding: 0.25rem 0.4rem 0.35rem; }
.hotspot-legend .hs-legend-list { list-style: none; margin: 0; padding: 0; }
.hs-legend-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.32rem 0.45rem;
    border-radius: 0.4rem; font-size: 0.82rem; color: #33425c; cursor: pointer; }
.hs-legend-item .hs-swatch { flex: 0 0 auto; width: 14px; height: 14px; border-radius: 3px; border: 1px solid rgba(0,0,0,.2); }
.hs-legend-item .hs-legend-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-legend-item.hs-hover, .hs-legend-item.hs-sel { background: #fde8d4; font-weight: 600; }
.hs-legend-item:hover { background: #f1f4f8; }
/* Table rows also light up when their region is hovered (hotspot editor). */
.data-table tr.hs-hover td { background: #fde7d2; }
/* Existing-hotspots table (hotspot editor): show only the region being hovered or edited —
   the legend beside the map is the full list, so this stays an uncluttered contextual editor. */
.hs-existing tbody tr { display: none; }
.hs-existing tbody tr.editing,
.hs-existing tbody tr.edit-row,
.hs-existing tbody tr:has(.empty-cell) { display: table-row; }

/* TilePicker: searchable, sortable department/page picker showing full paths. */
.tilepicker { position: relative; display: inline-block; min-width: 220px; vertical-align: top; }
.tilepicker .tp-field { display: flex; align-items: center; gap: 0.3rem; width: 100%; text-align: left; background: #fff; cursor: pointer; }
.tilepicker .tp-field.open { border-color: var(--brand-accent); }
.tilepicker .tp-selected { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tilepicker .tp-selected.muted { color: #8a97ab; }
.tilepicker .tp-caret { margin-left: auto; color: #8a97ab; font-size: 0.7rem; }
.tp-backdrop { position: fixed; inset: 0; z-index: 40; }
.tilepicker .tp-pop { position: absolute; top: 100%; left: 0; z-index: 50; min-width: 320px; max-width: 460px; margin-top: 2px;
    background: #fff; border: 1px solid #cfd8e3; border-radius: 0.5rem; box-shadow: 0 8px 24px rgba(16,50,79,.18); padding: 0.4rem; }
.tp-controls { display: flex; gap: 0.4rem; margin-bottom: 0.35rem; }
.tp-controls .tp-search { flex: 1; min-width: 0; }
.tp-controls .tp-sort { flex: 0 0 auto; }
.tp-list { max-height: 260px; overflow-y: auto; }
.tp-item { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: 0.4rem 0.5rem;
    border-radius: 0.35rem; font-size: 0.82rem; color: #24324a; cursor: pointer; }
.tp-item:hover { background: #eef2f7; }
.tp-item.sel { background: #d9ebff; font-weight: 600; }
.tp-item.tp-clear { color: #8a97ab; }
.tp-empty { padding: 0.5rem; font-size: 0.78rem; color: #8a97ab; }
@media (max-width: 860px) { .hotspot-legend { flex-basis: 100%; max-height: 240px; } }
/* Always-visible region name centered on each hotspot. fill/stroke are set inline per map
   (with an auto-contrasting outline) for legibility over any image. Scales with the viewBox. */
.hotspot-label {
    paint-order: stroke fill;
    stroke-linejoin: round;
    font-weight: 700;
    pointer-events: none;
    user-select: none;
}

.pending-shape { fill: rgba(225, 75, 59, 0.30); stroke: #e14b3b; stroke-width: 3; stroke-dasharray: 8 4; }
.pending-line { fill: none; stroke: #e14b3b; stroke-width: 2; stroke-dasharray: 6 4; }
.poly-point { fill: #e14b3b; }

.active-tool { background: var(--brand-accent) !important; color: #fff !important; border-color: var(--brand-accent) !important; }

.upload-map { margin-top: 0.6rem; }
.upload-field { display: inline-flex; align-items: center; gap: 0.5rem; color: #45566a; font-weight: 600; }
.upload-label { cursor: pointer; }

.link-form {
    display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center;
    margin-top: 0.9rem; padding: 0.9rem; background: #f6f9fc; border-radius: 0.6rem;
}

.photo-thumbs { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.8rem; }
.thumb {
    width: 84px; height: 64px; padding: 0; border: 2px solid #cfd8e3; border-radius: 0.5rem;
    overflow: hidden; background: #fff; cursor: pointer;
}
.thumb.active { border-color: var(--brand-accent); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.photo-caption { margin-top: 0.5rem; }

/* Machine photo tile: thumbnail + default badge + set-default/remove actions. */
.thumb-wrap { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.2rem; }
.thumb-wrap .thumb { width: 84px; height: 64px; }
.thumb-wrap.active .thumb { border-color: var(--brand-accent); }
.thumb-wrap.is-default .thumb { border-color: #2f7d4f; }
.thumb-badge { position: absolute; top: 3px; left: 3px; background: #2f7d4f; color: #fff;
    font-size: 0.6rem; font-weight: 700; padding: 1px 5px; border-radius: 0.35rem; pointer-events: none; }
.thumb-actions { display: flex; gap: 0.25rem; flex-wrap: wrap; justify-content: center; }

/* Photo section: collapse toggle, count, upload target + filter rows, and per-thumbnail
   machine/component tag so machine photos and each component's photos are distinguishable. */
.collapse-toggle { background: none; border: none; cursor: pointer; font-size: 0.9rem; color: #45566a;
    padding: 0 0.35rem 0 0; line-height: 1; }
.card-title .photo-count { font-weight: 400; font-size: 0.85rem; color: #7c8a9a; }
.photo-add-row { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.photo-filter { display: flex; align-items: center; gap: 0.4rem; margin: 0.2rem 0 0.6rem; }
.thumb-tag { max-width: 84px; font-size: 0.62rem; font-weight: 700; padding: 1px 5px; border-radius: 0.35rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.thumb-tag.tag-machine { background: #e7eef6; color: #35506d; }
.thumb-tag.tag-comp { background: #eaf5ee; color: #276845; }

/* Component reference chip (free-text link/code) shown next to the name. */
.tree-link { font-size: 0.78rem; color: #5a6b7b; margin-left: 0.4rem; }
.machine-options { display: flex; flex-direction: column; gap: 0.5rem; }
.machine-options .admin-inline { flex-wrap: wrap; }

.link-button {
    background: none; border: none; padding: 0; font: inherit; color: var(--brand-dark-2);
    font-weight: 600; cursor: pointer; text-align: left;
}
.link-button:hover { color: var(--brand-accent); text-decoration: underline; }
.link-button.selected { color: var(--brand-accent); text-decoration: underline; }

.selected-component { border-color: var(--brand-accent); }

/* Component history panel */
.pm-due { color: var(--brand-dark); }
.sub-title { font-size: 0.95rem; font-weight: 700; color: #45566a; margin: 0.8rem 0 0.4rem; }
.service-pop { list-style: none; padding: 0; margin: 0; }
.service-pop li { padding: 0.5rem 0; border-bottom: 1px solid #f0f4f8; }
.sp-head { display: flex; gap: 0.8rem; align-items: baseline; }
.sp-date { font-weight: 700; color: var(--brand-dark); }
.sp-type { font-size: 0.78rem; background: #eef2f7; color: #45566a; padding: 0.05rem 0.4rem; border-radius: 0.5rem; }
.sp-tech { color: #7a8794; font-size: 0.9rem; }
.sp-summary { color: #1f2d3d; margin-top: 0.2rem; }
.sp-parts { color: #5a6b7b; font-size: 0.9rem; margin-top: 0.2rem; }

/* ---- Tasks, conversation, timer -------------------------------------- */

.status-badge { font-size: 0.75rem; font-weight: 700; padding: 0.15rem 0.55rem; border-radius: 0.6rem; text-transform: uppercase; }
.status-open { background: #e3edfb; color: #1b5fa8; }
.status-acknowledged { background: #e6e0fb; color: #5b3fa8; }
.status-inprogress { background: #fff0d4; color: #9a6b04; }
.status-completed { background: #e0f5e6; color: #1e7a37; }
.status-cancelled, .status-overdue { background: #fde4e0; color: #b5341f; }

.tag-notified { background: #eef2f7; color: #5a6b7b; }
.tag-acknowledged { background: #e6e0fb; color: #5b3fa8; }
.tag-claimed { background: #fff0d4; color: #9a6b04; }
.tag-done { background: #e0f5e6; color: #1e7a37; }
.tag-released { background: #eef2f7; color: #7a8794; }

.timer { font-size: 2rem; font-weight: 800; color: var(--brand-dark); font-variant-numeric: tabular-nums; margin: 0.3rem 0; }
.totals-line { margin: 0.8rem 0 0.4rem; color: #45566a; }

.thread { display: flex; flex-direction: column; gap: 0.7rem; margin-bottom: 1rem; }
.msg { background: #f6f9fc; border-radius: 0.6rem; padding: 0.7rem 0.9rem; display: flex; gap: 0.6rem; align-items: flex-start; }
.msg-main { flex: 1 1 auto; min-width: 0; }
.msg-avatar { flex: 0 0 auto; margin-top: 1px; }
.msg-avatar-sys { width: 34px; height: 34px; border-radius: 50%; background: #e2e8f0; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; }
.msg-head { display: flex; gap: 0.5rem; align-items: baseline; font-size: 0.9rem; }
.msg-body { margin-top: 0.25rem; white-space: pre-wrap; }
.msg-photo { max-width: 220px; border-radius: 0.5rem; margin-top: 0.5rem; display: block; }
.compose-box { width: 100%; min-height: 3rem; resize: vertical; }
.msg-compose { display: flex; flex-direction: column; gap: 0.5rem; }
.report-html { line-height: 1.5; }

/* ---- Calendar -------------------------------------------------------- */

.cal-period { font-size: 1.1rem; color: var(--brand-dark); min-width: 12rem; text-align: center; }
.cal-legend { display: flex; gap: 1rem; align-items: center; color: #5a6b7b; font-size: 0.9rem; margin-bottom: 0.8rem; }
.cal-legend .dot { width: 0.8rem; height: 0.8rem; border-radius: 50%; display: inline-block; margin-right: 0.2rem; }
.dot.status-open { background: var(--brand-accent); }
.dot.status-inprogress { background: #e6a017; }
.dot.status-completed { background: #2e9e4c; }
.dot.status-overdue { background: #e14b3b; }

/* minmax(0,1fr) (not plain 1fr) + min-width:0 keep a long, unbreakable event title from expanding its
   column and pushing the whole calendar off the page. */
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-dow { font-weight: 700; color: #7a8794; text-align: center; padding: 0.3rem; font-size: 0.8rem; }
.cal-cell { background: #fff; border: 1px solid #e6ecf3; border-radius: 0.4rem; min-height: 92px; padding: 0.3rem; min-width: 0; overflow: hidden; }
.cal-cell.out-month { background: #f4f7fb; color: #b3bfcc; }
.cal-cell.today { border-color: var(--brand-accent); box-shadow: inset 0 0 0 1px var(--brand-accent); }
/* Recurring-schedules calendar view (Schedules page) */
.cal-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; margin: 0.3rem 0 0.8rem; }
.cal-nav { display: flex; align-items: center; gap: 0.4rem; }
.cal-hint { font-size: 0.78rem; }
.sched-chip { display: block; width: 100%; text-align: left; font: inherit; cursor: pointer;
    font-size: 0.72rem; line-height: 1.25; margin-top: 0.15rem; padding: 0.08rem 0.3rem;
    background: #e7f0fb; color: #1b4f80; border: 1px solid #cfe0f3; border-radius: 0.3rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sched-chip:hover { background: #d6e6f8; border-color: #b6d2ee; }
.sched-chip.paused { background: #eef1f5; color: #7a8794; border-color: #dde3ea; }
.sched-open { background: none; border: 0; padding: 0; margin: 0; cursor: pointer; color: #1b4f80; font: inherit; text-align: left; }
.sched-open:hover strong { text-decoration: underline; }
.sched-matrix th.matrix-sched, .sched-matrix td.matrix-sched { text-align: left; white-space: normal; min-width: 220px; }
.sched-matrix .matrix-rule { display: block; font-size: 0.72rem; }
.sched-matrix th.matrix-now, .sched-matrix td.matrix-now { background: #eef5fd; }
.sched-matrix td.num { font-variant-numeric: tabular-nums; color: #1b4f80; font-weight: 600; }
.cal-date { font-size: 0.8rem; font-weight: 700; color: #45566a; }
.cal-item {
    display: block; font-size: 0.75rem; padding: 0.1rem 0.35rem; border-radius: 0.35rem; margin-top: 0.2rem;
    color: #fff; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-item.status-open { background: var(--brand-accent); }
.cal-item.status-acknowledged { background: #6b52c4; }
.cal-item.status-inprogress { background: #e6a017; }
.cal-item.status-completed { background: #2e9e4c; }
.cal-item.status-overdue, .cal-item.status-cancelled { background: #e14b3b; }
/* Recurring/PM schedule occurrences (shown via "Show recurring") — a distinct purple, outlined
   so they read as scheduled/planned rather than an actual ticket. */
.cal-item.recurring { background: #f2eefb; color: #5b3fa0; border: 1px dashed #b7a4e6; }
.dot.dot-recurring { background: #f2eefb; border: 1px dashed #8b6fd0; }
.cal-agenda-date { display: inline-block; min-width: 6rem; font-weight: 700; color: #45566a; }

/* ---- Gantt ----------------------------------------------------------- */

.gantt { display: flex; flex-direction: column; gap: 0.4rem; }
.gantt-axis { display: flex; justify-content: space-between; color: #7a8794; font-size: 0.8rem; margin-left: 12rem; }
.gantt-row { display: flex; align-items: center; gap: 0.5rem; }
.gantt-label { width: 12rem; flex-shrink: 0; font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gantt-track { position: relative; flex: 1; height: 22px; background: #f4f7fb; border-radius: 0.3rem; }
.gantt-bar { position: absolute; height: 9px; border-radius: 0.3rem; }
.gantt-bar.est { top: 1px; background: #b7cdec; }
.gantt-bar.actual { bottom: 1px; background: #2e9e4c; }
.gantt-bar.inline { position: static; display: inline-block; width: 1.4rem; height: 0.7rem; vertical-align: middle; }
.gantt-legend { margin-top: 0.6rem; color: #5a6b7b; font-size: 0.85rem; display: flex; gap: 0.4rem; align-items: center; }

/* ---- One-tap request screen ------------------------------------------ */

.req-machine { margin-bottom: 1rem; }
.big-select { min-height: 56px; font-size: 1.15rem; min-width: 260px; }
.req-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.req-button {
    min-height: 130px; border: none; border-radius: 1rem; cursor: pointer;
    background: linear-gradient(160deg, #ffffff, #eef3f9); border-top: 8px solid var(--req-accent, var(--brand-accent));
    box-shadow: 0 2px 8px rgba(20,40,70,0.1); display: flex; align-items: center; justify-content: center;
}
.req-button:active { transform: scale(0.98); }
.req-title { font-size: 1.5rem; font-weight: 800; color: var(--brand-dark); text-align: center; }
.big-ok { font-size: 1.1rem; }

/* New Request — admin edit mode for the request-type boxes. */
.req-edit { flex-direction: column; justify-content: center; gap: 0.5rem; padding: 0.8rem; cursor: default; }
.req-edit .req-name-input { width: 100%; font-weight: 700; text-align: center; }
.req-edit-row { display: flex; gap: 0.5rem; align-items: center; justify-content: center; width: 100%; }
.req-edit-row .req-color { width: 42px; height: 34px; padding: 0; border: 1px solid #cfd8e3; border-radius: 0.4rem; background: #fff; cursor: pointer; }
.req-edit-actions { display: flex; gap: 0.3rem; flex-wrap: wrap; justify-content: center; }
.req-add { justify-content: center; gap: 0.6rem; border-top-color: #9db4cc; }

/* ---- Live request board ---------------------------------------------- */

.board-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.board-live { font-weight: 700; color: #97a6b6; }
.board-live.on { color: #2e9e4c; }
.board-empty { font-size: 1.5rem; color: #7a8794; text-align: center; padding: 3rem; }
.board-counts { display: flex; flex-wrap: wrap; gap: .5rem .6rem; align-items: center; margin: .1rem 0 .9rem; }
.board-counts .bc-total { font-size: 1.05rem; color: #33414f; margin-right: .3rem; }
.board-counts .bc-chip { background: #eef3f8; border: 1px solid #dbe4ee; border-radius: 999px;
    padding: .18rem .7rem; font-size: .9rem; color: #45566a; }
.board-counts .bc-chip strong { color: #16324f; margin-left: .25rem; }

/* Chrome-free TV / kiosk session (display_label claim): full-bleed, no sidebar/top bar. */
.page.kiosk-mode { display: block; }
.page.kiosk-mode > main { display: block; width: 100%; }
.page.kiosk-mode .kiosk-content { padding: 1.2rem 1.4rem; max-width: none; }
.kiosk-badge {
    position: fixed; top: .5rem; right: .7rem; z-index: 50;
    background: rgba(22,50,79,.85); color: #fff; font-weight: 700; font-size: .95rem;
    padding: .3rem .7rem; border-radius: .6rem;
}
.kiosk-badge > summary { list-style: none; cursor: pointer; user-select: none; }
.kiosk-badge > summary::-webkit-details-marker { display: none; }
.kiosk-exit { margin-top: .4rem; text-align: right; }
.kiosk-exit a { color: #fff; text-decoration: underline; font-weight: 600; font-size: .85rem; }
.site-chicago .kiosk-badge { background: rgba(22,79,45,.85); }
.kiosk-url-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .8rem; }
.kiosk-url-row .filter-input.mono { flex: 1 1 24rem; font-family: ui-monospace, Consolas, monospace; font-size: .85rem; }
.filter-input.mono { font-family: ui-monospace, Consolas, monospace; font-size: .82rem; min-width: 16rem; }
.help-list { margin: .3rem 0 .6rem 1.1rem; line-height: 1.5; }
.help-list li { margin: .35rem 0; }

/* Full-screen takeover alert (smart TV / board), e.g. Machine Down. */
.board-alert-overlay {
    position: fixed; inset: 0; z-index: 4000; display: flex; align-items: center; justify-content: center;
    text-align: center; color: #fff; padding: 4vh 4vw; box-sizing: border-box;
    animation: ba-flash 1s steps(1, end) infinite;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
@keyframes ba-flash { 0%,49% { background: #c0161c; } 50%,100% { background: #7d0f13; } }
.board-alert-overlay .ba-inner { max-width: 90vw; }
.board-alert-overlay .ba-badge { font-size: clamp(2.5rem, 9vw, 7rem); font-weight: 900; letter-spacing: .1em; }
.board-alert-overlay .ba-machine { font-size: clamp(2rem, 8vw, 6rem); font-weight: 800; margin-top: .3em; }
.board-alert-overlay .ba-room { font-size: clamp(1.4rem, 5vw, 3.5rem); font-weight: 700; margin-top: .1em; opacity: .95; }
.board-alert-overlay .ba-title { font-size: clamp(1.1rem, 3.5vw, 2.2rem); margin-top: .4em; opacity: .9; }
.board-alert-overlay .ba-time { font-size: clamp(1rem, 2.5vw, 1.6rem); margin-top: .5em; opacity: .8; }
.board-alert-overlay .ba-actions { margin-top: 1.4em; display: flex; gap: 1.5rem; align-items: center; justify-content: center; flex-wrap: wrap; }
.board-alert-overlay .ba-dismiss {
    font-size: clamp(1rem, 2.5vw, 1.6rem); font-weight: 700; padding: .5em 1.6em; border-radius: .6em;
    border: 3px solid #fff; background: rgba(255,255,255,.12); color: #fff; cursor: pointer; min-height: 44px;
}
.board-alert-overlay .ba-more { font-size: clamp(.9rem, 2vw, 1.3rem); opacity: .85; }
.board-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.board-card {
    display: block; text-decoration: none; color: inherit; border-radius: 0.8rem; padding: 1rem;
    background: #fff; border-left: 10px solid #9aa7b4; box-shadow: 0 2px 6px rgba(20,40,70,0.1);
}
.board-card.age-green { border-left-color: #2e9e4c; }
.board-card.age-amber { border-left-color: #e6a017; background: #fffdf6; }
.board-card.age-red { border-left-color: #e14b3b; background: #fff6f4; animation: pulse 2s infinite; }
/* List view: colour the Age cell by the same thresholds as the card board. */
.board-list .board-age-cell { font-weight: 700; white-space: nowrap; }
.board-list .board-age-cell.age-green { color: #2e9e4c; }
.board-list .board-age-cell.age-amber { color: #c9880a; }
.board-list .board-age-cell.age-red { color: #d0331f; }
.board-list .board-assign-row > td { background: #f7fafd; }
@keyframes pulse { 0%,100% { box-shadow: 0 2px 6px rgba(225,75,59,0.2); } 50% { box-shadow: 0 2px 16px rgba(225,75,59,0.5); } }
.board-card-link { display: block; text-decoration: none; color: inherit; }
.board-assignees { margin-top: .5rem; font-size: .82rem; }
/* Latest conversation update on a board card / row (e.g. a "On my way" response). */
.board-update { margin-top: .4rem; font-size: .85rem; color: #12502e; background: rgba(255,255,255,.65); border-radius: .4rem; padding: 3px 8px; }
.board-update-sm { font-size: .8rem; color: #1e5a33; margin-top: 2px; }
.board-no { font-weight: 700; opacity: .7; }
/* Board assignees with avatars (user photo/initials; groups show 👥). */
.assignee-list { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.assignee-chip { display: inline-flex; align-items: center; gap: 5px; }
.assignee-group { font-size: 1rem; line-height: 1; }
.board-card-actions { margin-top: .4rem; }
.board-assign { display: flex; flex-direction: column; gap: .4rem; margin-top: .4rem; padding-top: .4rem; border-top: 1px solid #eef2f7; }
.board-assign .add-results { max-height: 180px; }
.board-card-top { display: flex; justify-content: space-between; font-size: 0.85rem; color: #7a8794; }
.board-type { font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.board-age { font-variant-numeric: tabular-nums; font-weight: 700; }
.board-title { font-size: 1.2rem; font-weight: 800; color: var(--brand-dark); margin: 0.4rem 0; }
.board-meta { color: #5a6b7b; font-size: 0.95rem; }
.board-status { margin-top: 0.6rem; display: flex; gap: 0.5rem; align-items: center; }
.ack-check { color: #2e9e4c; font-weight: 700; font-size: 0.85rem; }

/* ---- Response templates ---------------------------------------------- */

.response-templates { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.6rem; }
.chip-button {
    min-height: 40px; padding: 0.35rem 0.9rem; border: 1px solid #cfd8e3; border-radius: 999px;
    background: #fff; cursor: pointer; font-size: 0.95rem; color: var(--brand-dark-2);
}
.chip-button:hover { background: #eef5fc; border-color: var(--brand-accent); }

/* ---- Attachments & admin-rules --------------------------------------- */

.attachments { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.attach-audio { display: flex; flex-direction: column; gap: 0.3rem; }
.loc-checks { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 0.6rem; color: #45566a; }
.loc-checks label { display: inline-flex; align-items: center; gap: 0.35rem; }
.data-table code { font-size: 0.8rem; color: #5a6b7b; }

/* ---- Analytics dashboard & charts ------------------------------------ */

.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.chart-wrap { display: flex; flex-direction: column; gap: 0.5rem; }
.chart-svg { width: 100%; height: auto; }
.line-svg { height: 120px; }
.chart-labels { display: flex; flex-direction: column; gap: 0.15rem; }
.chart-row { display: flex; justify-content: space-between; font-size: 0.88rem; gap: 0.5rem; }
.chart-name { color: #45566a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chart-val { font-weight: 700; color: var(--brand-dark); font-variant-numeric: tabular-nums; }

.donut-wrap { flex-direction: row; align-items: center; gap: 1rem; flex-wrap: wrap; }
.donut-svg { width: 150px; height: 150px; }
.donut-legend, .line-legend { display: flex; flex-direction: column; gap: 0.3rem; }
.line-legend { flex-direction: row; gap: 1rem; font-size: 0.85rem; color: #5a6b7b; }
.legend-row { font-size: 0.9rem; color: #45566a; display: flex; align-items: center; gap: 0.4rem; }
.legend-dot { width: 0.7rem; height: 0.7rem; border-radius: 50%; display: inline-block; }
.line-xaxis { display: flex; justify-content: space-between; font-size: 0.7rem; color: #97a6b6; }

.perms-table th, .perms-table td { text-align: center; }
.perms-table td:first-child, .perms-table th:first-child { text-align: left; }
.perm-group { border-left: 1px solid #e2e8f0; }
.perm-sub { font-size: 0.72rem; color: #7a8794; text-transform: none; }
.perm-module-row td { background: #f6f9fc; font-weight: 700; color: #45566a; }
.perm-bulk { display: inline-flex; gap: 3px; justify-content: center; flex-wrap: wrap; }
.perm-bulk .mini { padding: 1px 6px; font-size: .72rem; font-weight: 400; }
.perm-group .perm-bulk { margin-top: 3px; }

/* Compact matrix: one cell per group holds View + Edit, so it fits without a horizontal scroll. */
.perms-compact { width: 100%; table-layout: auto; }
.perms-compact th, .perms-compact td { padding: 5px 6px; }
.perms-compact .perm-cell { text-align: center; white-space: nowrap; }
.perms-compact .ve { display: inline-flex; align-items: center; gap: 2px; margin: 0 4px; font-size: .72rem; color: #6b7480; }
.perms-compact .ve input { margin: 0; }
.perms-compact tbody td:first-child, .perms-compact thead th:first-child { position: sticky; left: 0; background: #fff; z-index: 1; }
.perms-compact .perm-module-row td:first-child { background: #f6f9fc; }
.group-checks, .group-chip { display: inline-flex; gap: 0.3rem; align-items: center; }
/* Block-level flex at full width so ALL group/site checkboxes wrap inside the panel
   instead of overflowing off the right edge (which hid most of the groups). */
.group-checks { display: flex; flex-wrap: wrap; gap: 0.6rem; width: 100%; margin-top: 0.4rem; }
.group-checks .group-chip { flex: 0 0 auto; }

/* ---- Dynamic forms: renderer & designer ------------------------------ */

.form-runtime { display: flex; flex-direction: column; gap: 0.9rem; }
.form-field { display: flex; flex-direction: column; gap: 0.3rem; max-width: 640px; }
.form-field.form-field-full { max-width: none; }   /* images span the whole card */
.form-runtime > .btn-primary { max-width: 640px; } /* keep Submit readable */
.form-heading { font-size: 1.15rem; font-weight: 800; color: var(--brand-dark); margin: 0.5rem 0 0; }
.form-label-text { color: #45566a; margin: 0; }
.form-divider { border: none; border-top: 1px solid #e2e8f0; margin: 0.4rem 0; }
.field-label { font-weight: 600; color: #3a4a5b; }
.req-star { color: #e14b3b; }
.field-help { font-size: 0.85rem; color: #7a8794; }
.field-input { min-height: 44px; padding: 0.45rem 0.7rem; border: 1px solid #cfd8e3; border-radius: 0.5rem; font-size: 1rem; }
.field-input.small { min-height: 36px; }
.field-error { color: #c0392b; font-size: 0.85rem; }
.field-photo { max-width: 240px; border-radius: 0.5rem; margin-top: 0.4rem; }
.sig-wrap { display: flex; flex-direction: column; gap: 0.3rem; }
.sig-canvas { border: 1px dashed #cfd8e3; border-radius: 0.5rem; background: #fff; touch-action: none; max-width: 100%; }
.repeat-table { max-width: 520px; }

.form-host-card { margin-top: 1.2rem; }
/* Palette sits as one compact row above the fields list. */
.designer-grid { display: flex; flex-direction: column; gap: 1rem; }
.palette { padding-bottom: 0.6rem; }
.palette .card-title { margin-bottom: 0.5rem; }
.palette-list { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.palette-list .chip-button { padding: 0.3rem 0.6rem; font-size: 0.85rem; }
.design-field { border: 1px solid #e6ecf3; border-radius: 0.6rem; padding: 0.8rem; margin-bottom: 0.8rem; }
.design-field-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
.cond-builder { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-top: 0.5rem; font-size: 0.9rem; }
.choice-list { padding: 0.5rem 0; border-bottom: 1px solid #f0f4f8; }
.chip-static { background: #eef2f7; border-radius: 999px; padding: 0.15rem 0.6rem; font-size: 0.9rem; }

@media (max-width: 720px) { .designer-grid { grid-template-columns: 1fr; } }

/* ---- Per-page Help ---------------------------------------------------- */

.top-bar-spacer { flex: 1; }
/* Top-bar page search (jump to a page by name). */
.page-search { position: relative; display: inline-flex; align-items: center; }
.page-search-icon { position: absolute; left: 10px; font-size: 0.85rem; pointer-events: none; opacity: 0.55; }
.page-search-input {
    height: 40px; width: 150px; max-width: 34vw; padding: 0 0.7rem 0 1.9rem;
    border: 1px solid #cfd8e3; border-radius: 999px; background: #f3f7fb; font-size: 0.9rem; color: var(--brand-dark);
    transition: width 0.15s ease, background 0.15s ease;
}
.page-search-input::placeholder { color: #8aa0b6; }
.page-search-input:focus { outline: none; background: #fff; border-color: var(--brand-accent); width: 230px; }
.page-search-menu {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 5000; min-width: 250px; max-width: 340px;
    background: #fff; border: 1px solid #d7e0ea; border-radius: 10px; box-shadow: 0 12px 30px rgba(16, 27, 42, 0.18);
    padding: 0.3rem; display: flex; flex-direction: column; max-height: 60vh; overflow-y: auto;
}
.page-search-item {
    display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; width: 100%;
    padding: 0.4rem 0.6rem; border: none; background: transparent; border-radius: 7px; cursor: pointer;
}
.page-search-item:hover { background: #f1f5f9; }
.ps-name { font-weight: 600; color: var(--brand-dark); font-size: 0.9rem; }
.ps-route { font-size: 0.74rem; color: #7a8794; }
.page-search-empty { padding: 0.5rem 0.6rem; font-size: 0.85rem; }

.help-btn {
    display: inline-flex; align-items: center; gap: 0.35rem; min-height: 40px;
    padding: 0.35rem 0.8rem; border: 1px solid #cfd8e3; border-radius: 999px;
    background: #fff; color: var(--brand-dark-2); font-weight: 600; cursor: pointer;
}
.help-btn:hover { background: #eef5fc; border-color: var(--brand-accent); }
.top-bar-online {
    display: inline-flex; align-items: center; gap: 0.35rem; min-height: 40px;
    padding: 0.35rem 0.8rem; border: 1px solid #cfd8e3; border-radius: 999px;
    background: #fff; color: var(--brand-dark-2); font-weight: 600; cursor: pointer; white-space: nowrap;
}
.top-bar-online:hover { background: #eaf7ef; border-color: #2e9b57; }
@media (max-width: 640px) { .tbo-label { display: none; } }
.help-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--brand-accent); color: #fff; font-weight: 800; font-size: 0.85rem;
}

.help-overlay {
    position: fixed; inset: 0; z-index: 60; background: rgba(16, 27, 42, 0.5);
    display: flex; align-items: flex-start; justify-content: center; padding: 4vh 1rem; overflow-y: auto;
}
.help-modal {
    background: #fff; border-radius: 0.9rem; max-width: 720px; width: 100%;
    padding: 1.4rem 1.6rem; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}
.help-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.help-modal-head h2 { margin: 0; font-size: 1.35rem; color: var(--brand-dark); }
.help-head-actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.help-lang {
    border: 1px solid #cdd7e3; background: #f3f7fb; height: 36px; padding: 0 0.9rem;
    border-radius: 18px; cursor: pointer; font-size: 0.9rem; font-weight: 700; color: var(--brand-dark);
    white-space: nowrap;
}
.help-lang:hover { background: #e6eef7; }
.help-close {
    border: none; background: #eef2f7; width: 36px; height: 36px; border-radius: 50%;
    cursor: pointer; font-size: 1rem; color: #45566a;
}
.help-close:hover { background: #e0e7ef; }
.help-summary { color: #34465a; line-height: 1.55; margin: 0.6rem 0 1rem; }
.help-fields-title { font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.05em; color: #7a8794; margin: 0 0 0.5rem; }
.help-fields { display: grid; grid-template-columns: minmax(9rem, 12rem) 1fr; gap: 0.4rem 1rem; margin: 0; }
.help-fields dt { font-weight: 700; color: var(--brand-dark); }
.help-fields dd { margin: 0; color: #45566a; line-height: 1.45; }
.help-foot { margin-top: 1.2rem; color: #97a6b6; font-size: 0.8rem; text-align: right; }

@media (max-width: 560px) { .help-fields { grid-template-columns: 1fr; gap: 0.1rem 0; } .help-fields dd { margin-bottom: 0.5rem; } }

/* ---- "New inventory item" popup (machine parts) ---------------------- */
.np-overlay {
    position: fixed; inset: 0; z-index: 80; background: rgba(16, 27, 42, 0.5);
    display: flex; align-items: flex-start; justify-content: center; padding: 5vh 1rem; overflow-y: auto;
}
.np-modal {
    background: #fff; border-radius: 0.9rem; max-width: 680px; width: 100%;
    padding: 1.3rem 1.5rem; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}
.np-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.np-head h2 { margin: 0; font-size: 1.3rem; color: var(--brand-dark); }
.np-sub { margin: 0.3rem 0 0.9rem; }
.np-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem 1rem; }
.np-field { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.np-field > span { font-weight: 700; color: var(--brand-dark); font-size: 0.85rem; }
.np-field .filter-input { width: 100%; }
.np-wide { grid-column: 1 / -1; }
.np-actions { display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 1.1rem; }
@media (max-width: 560px) { .np-grid { grid-template-columns: 1fr; } }

/* ---- Machine edit form + read-only spec sheet ------------------------ */
.machine-edit-form { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 1rem 1.2rem; max-width: 760px; margin: 0.4rem 0 1rem; }
.machine-edit-form textarea { resize: vertical; }
.machine-spec-card .spec-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.55rem 1.6rem; margin: 0; }
.spec-list > div { display: flex; flex-direction: column; min-width: 0; }
.spec-list dt { font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.04em; color: #7a8794; font-weight: 700; }
.spec-list dd { margin: 0; color: var(--brand-dark); }
.spec-notes { grid-column: 1 / -1; }
.spec-notes dd { white-space: pre-wrap; }

/* ---- Print ----------------------------------------------------------- */

.print-only { display: none; }
@media print {
    .sidebar, .top-bar, .no-print, #blazor-error-ui { display: none !important; }
    .print-only { display: block; }
    .content { padding: 0; max-width: none; }
    .cal-cell { min-height: 70px; }
    a { color: #000; text-decoration: none; }
}
/* Design Mode: form-name (box title) editor */
.form-name-card { margin-bottom: 1rem; }
.stack-label { display: block; font-weight: 700; color: var(--brand-dark); }
.stack-label .filter-input { display: block; width: 100%; margin-top: 0.35rem; font-weight: 400; }

/* Design Mode: Image field editor + crop tool */
.image-editor { margin-top: 0.6rem; display: flex; flex-direction: column; gap: 0.5rem; }
.img-upload { display: inline-block; }
.img-upload input[type=file] { display: block; margin-top: 0.35rem; }
.img-crop-wrap { position: relative; display: block; max-width: 100%; }
.img-crop-src { display: block; width: 100%; height: auto; cursor: crosshair; touch-action: none; border: 1px solid #cfd8e3; border-radius: 0.4rem; }
.crop-box { position: absolute; border: 2px dashed var(--brand-accent); background: rgba(27,110,194,0.15); pointer-events: none; display: none; }
.img-tools { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.img-width { display: flex; align-items: center; gap: 0.4rem; }

/* Form display image (rendered on the form) with clickable link boxes.
   The wrapper is a block sized by width (full-width or a set px), so the image
   fills it — an inline-block wrapper would collapse to the natural image size. */
.form-image-wrap { position: relative; display: block; max-width: 100%; }
.form-image { display: block; width: 100%; height: auto; border-radius: 0.4rem; }
.form-image-caption { color: #5a6b7b; font-size: 0.9rem; margin-top: 0.25rem; }
.form-image-link {
    position: absolute; display: block;
    border: 2px solid rgba(27,110,194,0.55); border-radius: 0.25rem;
    background: rgba(27,110,194,0.08);
}
.form-image-link:hover { background: rgba(27,110,194,0.22); }

/* Picker mode: selectable boxes on the rendered form */
.form-image-pick {
    position: absolute; border: 2px solid rgba(27,110,194,0.6); background: rgba(27,110,194,0.10);
    border-radius: 0.25rem; cursor: pointer; color: var(--brand-dark); font-weight: 800;
    display: flex; align-items: center; justify-content: center;
}
.form-image-pick:hover { background: rgba(27,110,194,0.22); }
.form-image-pick.picked { border-color: #2f7d4f; background: rgba(47,125,79,0.30); color: #1e5a33; }
.form-image-pick.locked { border-color: rgba(150,160,170,0.4); background: rgba(150,160,170,0.08); cursor: not-allowed; }
.form-image-pickmsg { margin-top: 0.4rem; color: #34465a; font-weight: 600; }

/* Design-mode: read-only overlay showing where link boxes are (never blocks the crop drag) */
.img-link-overlay {
    position: absolute; pointer-events: none;
    border: 2px dashed #2f7d4f; background: rgba(47,125,79,0.12); border-radius: 0.25rem;
}
.img-link-add { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.img-link-list { padding: 0; margin: 0.3rem 0 0; display: flex; flex-direction: column; gap: 0.35rem; }
.img-link-row { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; font-size: 0.85rem; }
.img-link-num { min-width: 1.5rem; height: 1.5rem; display: inline-flex; align-items: center; justify-content: center; background: #2f7d4f; color: #fff; border-radius: 999px; font-weight: 700; font-size: 0.8rem; }
.img-link-row .filter-input.small { flex: 1 1 110px; min-width: 80px; }
.img-link-row .num { display: inline-flex; align-items: center; gap: 0.2rem; color: #5a6b7b; }
.img-link-row .num input { width: 3.6rem; padding: 0.25rem 0.35rem; border: 1px solid #cfd8e3; border-radius: 0.35rem; }
.img-link-row .filter-input.grp { border-color: #2f7d4f; background: #f2f8ee; font-weight: 600; }
.img-link-overlay { display: flex; align-items: flex-start; justify-content: flex-end; color: #2f7d4f; font-weight: 700; font-size: 0.8rem; padding: 1px 3px; cursor: move; }
.box-handle { position: absolute; right: -2px; bottom: -2px; width: 14px; height: 14px; background: #2f7d4f; border: 2px solid #fff; border-radius: 3px; cursor: nwse-resize; }

/* Inventory list: expandable detail rows */
.data-table tr.clickable { cursor: pointer; }
.data-table tr.clickable:hover td { background: #f4f8fc; }
.data-table tr.detail-row td { background: #f7fafd; padding: 0.6rem 1rem; }
.inv-detail { display: grid; grid-template-columns: minmax(9rem, 13rem) 1fr; gap: 0.25rem 1rem; margin: 0; }
.inv-detail dt { font-weight: 700; color: #45566a; }
.inv-detail dd { margin: 0; color: #1f2d3d; }
@media (max-width: 640px) { .inv-detail { grid-template-columns: 1fr; } }

/* Inventory: add/edit form, sortable headers, row actions */
.inv-edit-card { margin-bottom: 1rem; }
/* Compact edit form: pack the 19 fields into ~2 rows — narrowest fit, 44px touch height kept. */
.inv-edit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 0.4rem 0.45rem; margin: 0.6rem 0 1rem; }
.inv-edit-grid label { display: flex; flex-direction: column; gap: 0.15rem; font-weight: 600; color: #45566a; font-size: 0.72rem; min-width: 0; }
.inv-edit-grid label.wide { grid-column: span 2; }
.inv-edit-grid .field-input { font-size: 0.82rem; padding: 0.35rem 0.45rem; width: 100%; box-sizing: border-box; }
.inv-edit-grid .field-input.qty-locked, .inv-edit-grid .field-input[readonly] { background: #eef1f5; color: #61708a; cursor: not-allowed; }
.inv-edit-grid .field-hint { font-size: 0.68rem; color: #8a97ab; font-weight: 400; }
/* Edit form: fields on the left, part images pinned to the far right (wraps below when narrow). */
.inv-edit-flex { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
.inv-edit-flex > .ef-wrap { flex: 1 1 480px; min-width: 0; }

/* Each edit field is a grid item wrapping its label; width = grid-column span. */
.inv-edit-grid > .ef { display: flex; flex-direction: column; min-width: 0; }
/* Arrange mode: drag to reorder + width buttons on each field. */
.ef-bar { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.15rem; flex-wrap: wrap; }
.ef-hint { font-size: 0.72rem; }
.ef-saved { font-size: 0.72rem; color: #1c7c3f; font-weight: 600; }
.ef-scope { display: inline-flex; align-items: center; gap: 0.3rem; }
.ef-scope-label { font-size: 0.72rem; color: #45566a; font-weight: 600; }
.ef-seg { font-size: 0.72rem; font-weight: 600; color: #45566a; background: #fff; border: 1px solid #cdd8e3;
    padding: 0.15rem 0.5rem; cursor: pointer; }
.ef-seg:first-of-type { border-radius: 0.35rem 0 0 0.35rem; }
.ef-seg:last-of-type { border-radius: 0 0.35rem 0.35rem 0; border-left: 0; }
.ef-seg.on { background: var(--brand-accent); color: #fff; border-color: var(--brand-accent-border); }
.inv-edit-grid.arranging > .ef { border: 1px dashed #bcd0e6; border-radius: 0.4rem; padding: 0.2rem 0.3rem; background: #fbfdff; user-select: none; }
.inv-edit-grid.arranging > .ef.ef-dragover { border-color: var(--brand-accent); border-style: solid; background: #eef5fd; }
.inv-edit-grid.arranging > .ef.ef-dragging { opacity: 0.4; }
.ef-tools { display: flex; align-items: center; gap: 0.2rem; margin-bottom: 0.2rem; }
.ef-grip { display: inline-flex; align-items: center; gap: 0.15rem; color: #5b6b7d; font-size: 0.66rem; font-weight: 700;
    letter-spacing: 0.02em; cursor: grab; background: #e7eef6; border: 1px solid #cdd8e3; border-radius: 0.3rem;
    padding: 0.05rem 0.35rem; white-space: nowrap; }
.ef-grip:active { cursor: grabbing; background: #d6e2f0; }
.ef-w { width: 1.35rem; height: 1.35rem; border: 1px solid #cdd8e3; background: #fff; border-radius: 0.3rem;
    font-size: 0.72rem; line-height: 1; cursor: pointer; padding: 0; color: #45566a; }
.ef-w.on { background: var(--brand-accent); color: #fff; border-color: var(--brand-accent-border); }
/* Admin field-label rename box (arrange mode). */
.ef-label-input { width: 100%; box-sizing: border-box; font-size: 0.72rem; font-weight: 600; color: #33425c;
    padding: 0.18rem 0.34rem; margin-bottom: 0.2rem; border: 1px solid #d8c98a; border-radius: 0.3rem; background: #fffdf2; }
.ef-label-input:focus { outline: none; border-color: var(--brand-accent); background: #fff; }
.part-images { flex: 0 0 280px; margin-left: auto; }
.part-images .pi-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.35rem; }
.part-images .pi-label { font-size: 0.82rem; font-weight: 600; color: #33425c; }
.part-images .pi-add { font-size: 0.75rem; color: var(--brand-accent); font-weight: 600; cursor: pointer;
    border: 1px solid #cfd8e3; border-radius: 0.4rem; padding: 0.15rem 0.45rem; margin-left: auto; }
.part-images .pi-add:hover { background: #eef2f7; }
.part-images .pi-hint { font-size: 0.75rem; color: #8a97ab; }
/* Thumbnails on the detail/edit form: 4× larger (256px) so photos are easy to read; wrap + scroll for extras.
   Click one to open it full-size in the lightbox. */
.part-images .pi-strip { display: flex; flex-wrap: wrap; gap: 0.4rem; max-height: 540px; overflow-y: auto;
    padding: 0.2rem; background: #fff; border: 1px solid #dde5ee; border-radius: 0.45rem; }
.part-images .pi-thumb { position: relative; width: 256px; height: 256px; }
.part-images .pi-thumb img { width: 256px; height: 256px; object-fit: cover; border-radius: 0.4rem; border: 1px solid #dde5ee; cursor: pointer; }
.part-images .pi-del { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; line-height: 16px;
    border-radius: 50%; border: 0; background: #d64545; color: #fff; font-size: 0.8rem; cursor: pointer; padding: 0; }

.inv-edit-grid .group-names { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Compact Group field — looks like the other fields; opens the picker when clicked. */
.inv-edit-grid .group-toggle { display: flex; align-items: center; gap: 0.3rem; text-align: left;
    background: #fff; cursor: pointer; overflow: hidden; }
.inv-edit-grid .group-toggle .muted { color: #8a97ab; }
.inv-edit-grid .group-toggle .group-caret { margin-left: auto; color: #8a97ab; font-size: 0.7rem; }
.inv-edit-grid .group-toggle.open { border-color: var(--brand-accent); }
.inv-edit-grid .group-toggle.open .group-caret { transform: rotate(180deg); }

/* Group builder: pick related parts from a searchable inventory list. */
.group-pick .gp-done { margin-left: 0.4rem; white-space: nowrap; }
.inv-edit-grid .group-pick { grid-column: 1 / -1; margin-top: 0.25rem; padding: 0.55rem 0.65rem;
    background: #f4f7fb; border: 1px solid #e2e8f1; border-radius: 0.5rem; }
.group-pick .gp-head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.45rem; }
.group-pick .gp-label { font-size: 0.82rem; font-weight: 600; color: #33425c; }
.group-pick .gp-count { font-size: 0.75rem; color: var(--brand-accent); font-weight: 600; }
.group-pick .gp-search { flex: 1 1 240px; min-width: 200px; }
.group-pick .gp-picklist { max-height: 230px; overflow-y: auto; background: #fff;
    border: 1px solid #dde5ee; border-radius: 0.45rem; }
.group-pick .gp-row { display: grid; grid-template-columns: auto 34px 110px 1fr auto; align-items: center;
    gap: 0.5rem; padding: 0.35rem 0.55rem; font-size: 0.8rem; color: #33425c; cursor: pointer;
    border-bottom: 1px solid #f0f3f8; margin: 0; }
.group-pick .gp-thumb { width: 34px; height: 34px; object-fit: cover; border-radius: 0.3rem; border: 1px solid #dde5ee; }
.group-pick .gp-thumb-none { display: flex; align-items: center; justify-content: center; color: #cbd4e0; background: #f4f7fb; }
.group-pick .gp-row:last-child { border-bottom: 0; }
.group-pick .gp-row:hover { background: #f4f7fb; }
.group-pick .gp-row.on { background: #eaf3ff; }
.group-pick .gp-row input[type=checkbox] { width: 20px; height: 20px; }
.group-pick .gp-row .gp-pn { font-weight: 600; }
.group-pick .gp-row .gp-desc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.group-pick .gp-row .gp-qty { color: #8a97ab; white-space: nowrap; }
.group-pick .gp-empty { padding: 0.5rem 0.55rem; font-size: 0.76rem; color: #8a97ab; }

/* Editable combo (ComboEntry): text input + browse-first dropdown of existing values. */
.combo { position: relative; }
.combo .field-input { width: 100%; box-sizing: border-box; }
.combo-pop { position: absolute; top: 100%; left: 0; right: 0; z-index: 70; margin-top: 2px;
    max-height: 220px; overflow-y: auto; background: #fff; border: 1px solid #cfd8e3;
    border-radius: 0.5rem; box-shadow: 0 6px 18px rgba(16,50,79,.14); padding: 3px; }
.combo-opt { display: block; width: 100%; text-align: left; border: 0; background: transparent;
    padding: 0.4rem 0.55rem; border-radius: 0.35rem; font-size: 0.82rem; cursor: pointer; color: #24324a; }
.combo-opt:hover { background: #eef2f7; }
.combo-opt.sel { background: #d9ebff; font-weight: 600; }
/* Image column in the inventory list (sits just before the stock/delete actions). */
.data-table td.row-thumb { text-align: center; padding: 0.15rem 0.35rem; }
.data-table .list-thumb { width: 76px; height: 76px; object-fit: cover; border-radius: 0.35rem; border: 1px solid #dde5ee; vertical-align: middle; cursor: pointer; }
.data-table .list-thumb:hover { border-color: var(--brand-accent); }

/* Image lightbox: full-screen dim overlay with the enlarged photo centred; click anywhere to close. */
.img-lightbox { position: fixed; inset: 0; z-index: 3000; background: rgba(15, 25, 40, 0.82);
    display: flex; align-items: center; justify-content: center; padding: 2rem; cursor: zoom-out; }
.img-lightbox img { max-width: 92vw; max-height: 90vh; object-fit: contain; border-radius: 0.5rem;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5); background: #fff; cursor: default; }
.img-lightbox-close { position: fixed; top: 1rem; right: 1.4rem; width: 44px; height: 44px; border-radius: 50%;
    border: 0; background: rgba(255, 255, 255, 0.9); color: #16324f; font-size: 1.3rem; font-weight: 700;
    cursor: pointer; line-height: 44px; }
.img-lightbox-close:hover { background: #fff; }
.list-img-add { cursor: pointer; font-size: .72rem; padding: .12rem .35rem; border: 1px solid #cdd8e4; border-radius: .3rem;
    background: #f6f9fc; display: inline-block; margin-left: .25rem; white-space: nowrap; vertical-align: middle; }
.list-img-add:hover { background: #e9f1fb; }
.data-table th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.data-table th.sortable:hover { color: var(--brand-accent); }
/* Sort indicator: faint ↕ on every sortable column; solid blue arrow on the active one. */
.sort-ind { margin-left: 0.25rem; font-size: 0.78em; color: #b6c2ce; }
.data-table th.sortable:hover .sort-ind { color: #6a91bd; }
.sort-ind.on { color: var(--brand-accent); }
.row-actions { white-space: nowrap; display: flex; gap: 0.3rem; }

/* Inventory: screen-height scroll + sticky header + double-click rows */
/* No inner scroll box at all — the table flows in the page so the browser does both the
   vertical and the horizontal scrolling (no nested scrollbars). The header then pins to the
   top of the page while scrolling (sticky relative to the page, not an inner container). */
.inv-scroll { overflow: visible; }
/* Size the table to its content (at least full width) so no column is clipped by the
   table's overflow:hidden — the page scrolls horizontally to reach the far columns
   (e.g. the Image column and the stock/delete actions) instead of them being cut off. */
#inv-table { width: max-content; min-width: 100%; }
.inv-scroll thead th { position: sticky; top: 0; background: #fff; z-index: 2; box-shadow: inset 0 -1px 0 #e6ecf3; }
/* Manual column resizing: a drag handle on the right edge of each header cell. */
.data-table thead th { position: relative; }
.col-resizer { position: absolute; top: 0; right: 0; width: 11px; height: 100%; cursor: col-resize;
    touch-action: none; user-select: none; z-index: 3; }
/* Always-visible divider line so the drag handle is easy to find; thickens + turns blue on hover. */
.col-resizer::after { content: ""; position: absolute; top: 12%; right: 2px; width: 2px; height: 76%;
    background: #c2cedb; border-radius: 1px; pointer-events: none; }
.col-resizer:hover::after { right: 1px; width: 3px; height: 100%; top: 0; background: var(--brand-accent); }
/* A table only switches to fixed layout + clipped cells AFTER the user resizes a column
   (JS adds .rz-on). Until then it keeps its natural layout and the page scrolls to show
   every column. Scoped to header + normal body rows — never panel (colspan) or total rows. */
.data-table.rz-on thead th,
.data-table.rz-on tbody tr:not(.edit-row) td {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filter-inline .filter-select.small { min-width: 3.4rem; width: auto; }
.qty-filter { width: 5rem; }
/* Reusable inline row editor (CONVENTION for editable data tables): the edit form is rendered
   in a <tr class="edit-row"><td colspan=…> right under the double-clicked row, wrapped in
   .row-edit-inline. It stays pinned to the visible area (just right of the fixed sidebar) with
   a viewport-fit width, so it's fully readable at any horizontal scroll position — no
   side-scrolling to reach its fields. Falls back to normal flow on mobile. */
.row-edit-inline { position: sticky; left: 0.75rem;   /* pin to the table's left edge (content already sits right of the sidebar) */
    /* Fit the viewport, but never exceed the table's own width — otherwise the part past the
       table's right edge gets clipped by the table's overflow:hidden (hiding trailing fields). */
    width: min(calc(100vw - var(--sidebar-w) - 3rem), 100%);
    box-sizing: border-box; background: #fff; border: 1px solid #dde5ee; border-radius: 8px; padding: 0.7rem 0.9rem; }
@media (max-width: 900px) { .row-edit-inline { position: static; left: auto; width: auto; } }
/* Kiosk "Edit buttons": each button is a stacked card whose fields wrap to the viewport, so the whole editor is
   readable with NO horizontal scrolling (the old 6-column table ran off the right edge). */
.btn-edit-list { display: flex; flex-direction: column; gap: 0.8rem; }
.btn-edit-card { border: 1px solid #dde5ee; border-radius: 8px; padding: 0.7rem 0.85rem; background: #fff; }
.btn-edit-top { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: flex-end; }
.btn-edit-no { align-self: center; font-weight: 800; color: #45566a; min-width: 1.4rem; text-align: center; }
.btn-edit-move { display: inline-flex; flex-direction: column; gap: 2px; align-self: center; }
.btn-edit-field { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.78rem; font-weight: 700;
    color: #45566a; text-transform: uppercase; letter-spacing: 0.02em; flex: 1 1 11rem; min-width: 0; }
.btn-edit-field.btn-edit-wide { flex: 2 1 14rem; }
.btn-edit-field .filter-input, .btn-edit-field .filter-select { width: 100%; font-weight: 400; text-transform: none; }
.btn-edit-sub { display: flex; flex-wrap: wrap; gap: 1rem 1.4rem; margin-top: 0.7rem;
    padding-top: 0.6rem; border-top: 1px dashed #e3e9f0; }
.btn-edit-col { flex: 1 1 20rem; min-width: 0; }
/* ---- WMS Intercom ---------------------------------------------------- */
.ic-list { display: flex; flex-direction: column; gap: .5rem; }
.ic-item { display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem; border: 1px solid var(--border,#dde5ee);
    border-radius: 10px; background: #fff; }
.ic-dot { width: 9px; height: 9px; border-radius: 50%; background: #2e9e4c; flex: 0 0 auto; box-shadow: 0 0 0 3px rgba(46,158,76,.15); }
.ic-name { font-weight: 700; }
.ic-actions { margin-left: auto; display: flex; gap: .4rem; flex-wrap: wrap; }
.ic-actions .btn-primary, .ic-actions .btn-secondary { padding: .38rem .7rem; font-size: .88rem; }
.ic-stage { position: relative; width: 100%; aspect-ratio: 16/10; background: #0d151f; border-radius: 10px; overflow: hidden;
    display: flex; align-items: center; justify-content: center; }
.ic-stage.audio { aspect-ratio: 16/6; }
.ic-video { width: 100%; height: 100%; object-fit: contain; background: #0d151f; }
.ic-placeholder { position: absolute; color: #9fb2c4; font-size: 1rem; text-align: center; padding: 1rem; }
/* The active call floats as a fixed panel (bottom-right) so it's visible on ANY screen, whatever page you're on. */
.ic-callpanel { position: fixed; bottom: 1rem; right: 1rem; z-index: 1000; width: min(380px, 92vw);
    background: #fff; border: 1px solid #dde5ee; border-radius: 12px; padding: .8rem;
    box-shadow: 0 14px 40px rgba(20,40,70,.3); }
.ic-callpanel-head { display: flex; align-items: center; gap: .5rem; font-weight: 700; color: #16324f; margin-bottom: .5rem; }
.ic-x { margin-left: auto; border: none; background: transparent; font-size: 1.05rem; line-height: 1; cursor: pointer; color: #8a97a5; }
.ic-x:hover { color: #c0392b; }
.ic-callpanel-actions { display: flex; gap: .5rem; align-items: center; margin-top: .55rem; }
.ic-hidden { display: none !important; }
.ic-item.ic-off { opacity: .6; }

/* ---- Kiosk-side incoming call (WMS Intercom) ------------------------- */
.kcall-onair { position: fixed; top: .7rem; left: 50%; transform: translateX(-50%); z-index: 60;
    font-family: ui-monospace, Consolas, monospace; font-size: .85rem; letter-spacing: .08em; color: #fff;
    background: #c0392b; padding: .35rem .8rem; border-radius: 8px; display: flex; align-items: center; gap: .45rem;
    box-shadow: 0 4px 14px rgba(192,57,43,.4); }
.kcall-onair::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #fff; animation: pulse 1.4s infinite; }
.kcall-overlay { position: fixed; inset: 0; z-index: 70; background: rgba(10,18,28,.55);
    display: flex; align-items: center; justify-content: center; padding: 1.2rem; }
.kcall-box { background: #fff; border-radius: 16px; padding: 1.6rem 1.8rem; max-width: 460px; width: 100%; text-align: center;
    box-shadow: 0 18px 60px rgba(0,0,0,.35); }
.kcall-q { font-size: 1.4rem; font-weight: 700; color: #16324f; margin-bottom: 1rem; }
.kcall-actions { display: flex; gap: 1rem; justify-content: center; }
.kcall-bar { position: fixed; bottom: .8rem; left: 50%; transform: translateX(-50%); z-index: 60;
    background: #fff; border: 1px solid #dde5ee; border-radius: 12px; padding: .55rem .9rem; display: flex; align-items: center;
    gap: .8rem; font-weight: 600; box-shadow: 0 8px 24px rgba(0,0,0,.18); }

.data-table tr.dblrow { cursor: pointer; }
.data-table tr.editing td { background: #eef5fc; }
/* The inline editor holds paragraphs/cards, not table data — undo the table's white-space:nowrap so its help text
   and fields WRAP to the container instead of stretching onto one giant line (which forced horizontal scrolling). */
.data-table tr.edit-row td { background: #f7fafd; padding: 0.8rem 1rem; white-space: normal; }
.inv-hint { margin-right: 0.4rem; }

/* Parts Group page */
.pg-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.pg-field { display: flex; align-items: center; gap: 0.4rem; font-weight: 600; color: #45566a; font-size: 0.9rem; }
.pg-sep { width: 1px; align-self: stretch; background: #e0e7ef; margin: 0 0.4rem; min-height: 32px; }
.pg-add { margin-bottom: 1rem; }
.pg-add-scroll { max-height: 320px; overflow: auto; margin-top: 0.5rem; }
.qty-input { width: 5rem; padding: 0.25rem 0.4rem; border: 1px solid #cfd8e3; border-radius: 0.35rem; }
.pickmsg-go { margin-top: 0.5rem; }

/* Inline parts group shown on a picker form when the selection completes */
.inline-parts-group { margin-top: 1.2rem; border-top: 2px solid #e6ecf3; padding-top: 1rem; }

/* Purchase orders */
.po-head-grid { display: grid; grid-template-columns: 1fr; gap: 0.6rem 1.2rem; }
/* Compact two-row header: For · Created · Status, then Vendor · Department. */
.po-head-compact { display: flex; flex-direction: column; gap: 0.4rem; }
.po-head-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.4rem; }
.po-field-inline { flex-direction: row; align-items: center; gap: 0.4rem; }
.detail-card.po-head { padding-top: 0.7rem; padding-bottom: 0.7rem; margin-top: 0.4rem; }
.po-field { display: flex; flex-direction: column; gap: 0.2rem; }
.po-lbl { font-weight: 700; color: #7a8794; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; }
.po-notes { display: flex; flex-direction: column; gap: 0.2rem; margin-top: 0.6rem; }
.po-status { padding: 0.1rem 0.55rem; border-radius: 999px; font-size: 0.85rem; font-weight: 700; }
.po-phase-sub { margin-top: 0.2rem; font-size: 0.78rem; color: #7a8794; }
.po-draft { background: #eef2f7; color: #45566a; }
.po-requested { background: #fff3cd; color: #7a5b00; }
.po-ordered { background: #d9e8fb; color: #1b4f8a; }
.po-received { background: #d9f2e0; color: #1e5a33; }
.po-cancelled { background: #fdecea; color: #a12318; }
.po-approved { background: #e4dcf7; color: #4a2f8a; }
/* Checklist run: a previous day's run that was never completed (auto-closed) */
.po-incomplete { background: #f0ece6; color: #8a6d3b; }
/* Estimate/RFQ sub-process stages */
.po-estimaterequested { background: #fde9d6; color: #8a4b16; }
.po-estimatereceived { background: #e0eef7; color: #1b4f6a; }
.po-estimatepending { background: #fff3cd; color: #7a5b00; }
.po-estimateapproved { background: #d9f2e0; color: #1e5a33; }
.po-estimaterejected { background: #fdecea; color: #a12318; }

/* Purchase-order stage stepper */
.po-stepper { list-style: none; display: flex; flex-wrap: wrap; gap: .2rem; margin: .8rem 0 .4rem; padding: 0; overflow-x: auto; }
.po-step { display: flex; align-items: center; gap: .4rem; flex: 1 1 auto; min-width: 8rem; position: relative; padding: .2rem .1rem; }
.po-step-btn { display: flex; align-items: center; gap: .4rem; background: none; border: none; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.po-step-btn:hover .po-step-label { text-decoration: underline; }
.po-revert-confirm { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: .3rem 0 .6rem; }
.po-approval-progress { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin: .4rem 0 .2rem; }
.est-slots { margin: .6rem 0; padding: .6rem .8rem; border: 1px solid #e0e6ec; border-radius: 8px; background: #fafcfe; }
.est-slot-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: .4rem 0; }
.est-slot-label { min-width: 6rem; font-weight: 600; color: #55606b; }
/* Vendor portal: clean label-per-row layout */
.vendor-link-input { flex: 1 1 24rem; min-width: 18rem; max-width: 42rem; }
.vendor-msgs-block { flex: 1 1 24rem; min-width: 16rem; }
.vendor-msg-compose { display: flex; gap: .4rem; align-items: center; margin-top: .4rem; }
.vendor-msg-compose .field-input { flex: 1 1 auto; }
/* Estimate entry: quote ref · lead time · notes on one row */
.est-fields-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem 1rem; margin: .3rem 0 .6rem; }
.est-fields-row .po-field { display: flex; flex-direction: column; gap: .2rem; }
.est-fields-row .est-f-ref { flex: 1 1 12rem; }
.est-fields-row .est-f-lead { flex: 0 1 9rem; }
.est-fields-row .est-f-notes { flex: 2 1 18rem; }
.est-ship-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem 1rem; margin: .2rem 0 .4rem; padding-top: .5rem; border-top: 1px dashed #cfd8e3; }
.est-ship-row .est-ship-title { align-self: center; font-weight: 700; color: #45566a; flex: 0 0 auto; }
.est-ship-row .po-field { display: flex; flex-direction: column; gap: .2rem; flex: 1 1 8rem; }
.est-doc-btn { cursor: pointer; display: inline-block; }
/* File dropzone (drop a file or click) — used for the estimate document */
.po-estdoc { flex-direction: column; align-items: flex-start; gap: .25rem; }
.dropzone { position: relative; display: inline-flex; align-items: center; justify-content: center;
    min-width: 13rem; min-height: 2.4rem; padding: .3rem .9rem; border: 2px dashed #b6c4d6; border-radius: .5rem;
    background: #f5f8fd; color: #5a6b7b; font-size: .82rem; cursor: pointer; }
.dropzone:hover { border-color: #7ba0d4; background: #eef4ff; }
.dropzone-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.est-slot-name { min-width: 10rem; font-weight: 600; }
.est-slot-row .tilepicker { min-width: 14rem; }
.po-step:not(:last-child)::after { content: ''; flex: 1; height: 2px; background: #d7dfe8; margin: 0 .3rem; }
.po-step-dot { width: 1.5rem; height: 1.5rem; border-radius: 50%; display: inline-flex; align-items: center;
    justify-content: center; font-size: .8rem; font-weight: 700; background: #e7edf3; color: #7a8794; flex: 0 0 auto; }
.po-step-label { font-size: .82rem; color: #7a8794; white-space: nowrap; }
.po-step-done .po-step-dot { background: #2e9e4c; color: #fff; }
.po-step-done .po-step-label { color: #33414f; }
.po-step-current .po-step-dot { background: var(--brand-accent, #1b6ec2); color: #fff; box-shadow: 0 0 0 3px rgba(27,110,194,.2); }
.po-step-current .po-step-label { color: var(--brand-dark, #16324f); font-weight: 700; }
.po-step-failed .po-step-dot { background: #c0161c; color: #fff; }
.po-step-failed .po-step-label { color: #a12318; font-weight: 700; }
.po-step-viewing .po-step-dot { box-shadow: 0 0 0 3px rgba(120,90,180,.35); }
.po-step-viewing .po-step-label { text-decoration: underline; }

/* Read-only "view a past stage" panel opened from the stepper */
.po-stage-view { border: 1px solid #cbd6e6; background: #f5f8fd; border-radius: .5rem; padding: .6rem .8rem; margin: .4rem 0 .6rem; }
.po-stage-view-head { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.po-stage-view-head .btn-link { margin-left: auto; }
.po-stage-info { margin: .35rem 0 .2rem; padding-left: 1.1rem; }
.po-stage-info li { font-size: .88rem; color: #33414f; margin: .1rem 0; }

/* Purchase-order approvers row */
.po-approvers { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: .6rem 0 .2rem; }
.po-approver-add { display: inline-flex; align-items: center; gap: .3rem; }

/* Editable email recipients before each PO send */
.po-recip { margin: .5rem 0 .2rem; }
.po-recip .po-recip-row { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-top: .2rem; }
.po-recip .po-recip-tag { font-size: .8rem; color: #6b7480; font-weight: 700; }
.po-recip .filter-input { flex: 1 1 18rem; min-width: 12rem; }
/* Compact single-row recipient editor (label · To · Cc on one line; Cc hidden until it has a value) */
.po-recip-inline { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; }
.po-recip-inline .po-recip-lbl { margin: 0; flex: 0 0 auto; }
.po-recip-inline .filter-input { flex: 1 1 14rem; min-width: 10rem; }
.po-recip-inline .po-recip-addcc { flex: 0 0 auto; white-space: nowrap; }

/* Purchase-order process-history timeline */
.po-timeline { list-style: none; margin: .3rem 0 0; padding: 0; }
.po-timeline li { padding: .28rem 0; border-bottom: 1px solid #eef2f7; display: flex; gap: .6rem; flex-wrap: wrap; align-items: baseline; }
.po-timeline li:last-child { border-bottom: 0; }
.po-ev-when { color: #6b7684; font-size: .82rem; min-width: 9.5rem; }
.po-ev-type { font-weight: 600; }

.approval-banner { margin: .6rem 0; padding: .6rem .9rem; border-radius: 8px; font-size: .95rem; display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; justify-content: space-between; }
.approval-banner.pending { background: #fff3cd; color: #7a5b00; }
.approval-banner.approved { background: #d9f2e0; color: #1e5a33; }
.approval-banner.rejected { background: #fdecea; color: #a12318; }
.reject-box { margin: .4rem 0 .2rem; padding: .6rem .9rem; background: #fff6f5; border: 1px solid #f3c9c4; border-radius: 8px; }
.add-line-box { display: flex; flex-direction: column; gap: .6rem; padding: .7rem .9rem; }
.add-line-head { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.add-line-head .filter-input { flex: 1 1 240px; }
.add-results { display: flex; flex-direction: column; gap: 4px; width: 100%; max-height: 240px; overflow-y: auto; }
.add-result { display: flex; align-items: baseline; gap: .9rem; text-align: left; padding: 8px 10px; border: 1px solid #d7dde5; border-radius: 6px; background: #fff; cursor: pointer; }
.add-result:hover { background: #eef4ff; border-color: #9db9e0; }
.add-result .ar-part { flex: 0 0 9rem; min-width: 9rem; }
.add-result .ar-desc { flex: 1 1 auto; }
.add-result .ar-onhand { flex: 0 0 auto; margin-left: auto; white-space: nowrap; color: #5a6b7b; font-size: .82rem; }
.add-line-modes { align-self: flex-start; }
.add-newpart-grid { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.add-newpart-grid .filter-input { flex: 1 1 12rem; min-width: 9rem; }
.po-check { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; color: #45566a; }

/* New-part modal (full part setup) */
.newpart-modal { width: min(860px, 96vw); }
.newpart-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem .8rem; margin: .5rem 0 .2rem; }
.newpart-grid .np-field { display: flex; flex-direction: column; gap: .15rem; }
.newpart-grid .np-field .po-lbl { font-size: .72rem; }
.newpart-grid .np-wide { grid-column: span 2; }
@media (max-width: 640px) { .newpart-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .newpart-grid .np-wide { grid-column: span 2; } }

/* Approval-request approver toggles (from the selected department) */
.po-approval-picker { margin: .5rem 0 .2rem; }
.po-approver-toggles { display: flex; flex-wrap: wrap; gap: .4rem; margin: .3rem 0; }
.po-approver-toggles .pill { cursor: pointer; border: 1px solid transparent; }
.po-approver-toggles .pill.pill-off { border-color: #cfd8e3; }
.po-approver-toggles .pill:disabled { opacity: .55; cursor: not-allowed; }

.pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .8rem; font-weight: 600; }
.pill-ok { background: #d9f2e0; color: #1e5a33; }
.pill-off { background: #eceef1; color: #6b7480; }
.pill-primary { background: #16324f; color: #fff; }
.pill-info { background: #dbeafe; color: #1e40af; margin-left: 0.25rem; }
.pill-warn { background: #fef3c7; color: #92400e; margin-left: 0.25rem; }
/* Room-reservation invitees: wrap the full list as chips so every invitee is visible on iPad
   (overrides the data-table's default white-space:nowrap, which would cut the list off). */
.data-table td.invitees-cell { white-space: normal; max-width: 380px; }
.data-table td.invitees-cell .pill { margin: 2px 3px 0 0; }
/* Inline "cancel this booking?" confirmation shown in place of the cancel button. */
.cancel-confirm { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; color: #b3261e; white-space: nowrap; }
/* Reservation end-time quick-nudge (±15 min) row under the End field. */
.time-nudge { display: inline-flex; align-items: center; gap: 8px; margin-top: 5px; }
/* Invitee multi-select: a scrollable, touch-friendly checkbox list. */
.invitee-checklist { max-height: 240px; overflow-y: auto; border: 1px solid #dce3ec; border-radius: 0.5rem;
    padding: 4px 10px; margin-top: 6px; background: #fff; display: flex; flex-direction: column; }
.invitee-check { display: flex; align-items: center; gap: 10px; padding: 7px 4px; min-height: 40px; cursor: pointer; border-bottom: 1px solid #f1f4f8; }
.invitee-check:last-child { border-bottom: 0; }
.invitee-check input[type=checkbox] { width: 20px; height: 20px; flex: 0 0 auto; }
.invitee-check small { margin-left: 8px; }
.sms-badge { margin-left: 6px; font-size: 0.68rem; letter-spacing: 0.03em; }
/* Add-a-guest (external customer/vendor) row. */
.guest-add { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 4px; }
.guest-add .filter-input { flex: 1 1 180px; min-width: 140px; }
/* Multiple before-meeting reminders. */
.reminder-list { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; }
.reminder-row { display: flex; align-items: center; gap: 8px; }
.reminder-ord { min-width: 30px; font-weight: 600; color: #45566a; }
.reminder-chk { display: inline-flex; align-items: center; gap: 4px; font-size: .9rem; white-space: nowrap; }
.reminder-chk input { width: 18px; height: 18px; }
/* Round profile avatar (Entra/M365 photo or generated initials). */
.user-avatar { border-radius: 50%; object-fit: cover; background: #e6ecf3; flex: 0 0 auto; vertical-align: middle; }
.invitee-check .user-avatar { margin-right: 2px; }
/* Vendor form: section headings, secret fields, contact rows, share picker */
.vendor-form .vf-section { margin: 1rem 0 0.4rem; font-size: 0.95rem; font-weight: 600; color: var(--brand-dark, #16324f); border-bottom: 1px solid #e6ecf3; padding-bottom: 0.2rem; }
.vf-secret { display: flex; gap: 0.3rem; align-items: center; }
.vf-secret input { flex: 1; }
.vf-contact-row { display: flex; gap: 0.4rem; margin-bottom: 0.4rem; flex-wrap: wrap; }
.vf-contact-row input { flex: 1 1 8rem; min-width: 6rem; }
.vf-share { margin-top: 0.5rem; }
.vf-share-add { display: flex; gap: 0.4rem; align-items: center; margin-top: 0.4rem; flex-wrap: wrap; }
.vf-locked { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; border-radius: 6px; padding: 0.5rem 0.7rem; font-size: 0.9rem; }

/* ---- Visitor sign-in kiosk (touch-first) ---------------------------------- */
/* Full-screen chrome-free shell (KioskLayout) — no app nav/top bar. */
.kiosk-shell { min-height: 100vh; background: linear-gradient(160deg, #eef3f8, #dfe8f1); padding: 2vh 0; overflow-y: auto; }
.kiosk { max-width: 640px; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
.kiosk-head { text-align: center; margin-bottom: 1.5rem; }
.kiosk-head h1 { font-size: 2rem; margin: 0.2rem 0; color: var(--brand-dark, #16324f); }
.kiosk-sub { color: #6b7480; font-size: 1.1rem; }
.kiosk-choice { display: flex; flex-direction: column; gap: 1rem; }
.kiosk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
    min-height: 64px; padding: 0.9rem 1.4rem; font-size: 1.25rem; font-weight: 600; border-radius: 12px;
    border: 2px solid var(--brand-accent-border, #1861ac); background: #fff; color: var(--brand-dark, #16324f);
    cursor: pointer; }
.kiosk-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.kiosk-primary { background: var(--brand-accent, #1b6ec2); color: #fff; }
.kiosk-card { background: #fff; border: 1px solid #e6ecf3; border-radius: 14px; padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.kiosk-card h2 { margin: 0; font-size: 1.4rem; color: var(--brand-dark, #16324f); }
.kiosk-card label { display: flex; flex-direction: column; gap: 0.35rem; font-weight: 600; color: #46505c; }
.kiosk-input { min-height: 52px; padding: 0.6rem 0.8rem; font-size: 1.15rem; border: 2px solid #cdd7e2; border-radius: 10px; }
.kiosk-actions { display: flex; gap: 0.8rem; justify-content: space-between; margin-top: 0.4rem; }
.kiosk-actions .kiosk-btn { flex: 1; }
.kiosk-photo { display: flex; align-items: center; gap: 1rem; }
.kiosk-photo-preview { width: 96px; height: 96px; object-fit: cover; border-radius: 10px; border: 1px solid #cdd7e2; }
.kiosk-photo-btn { flex: 1; }
.kiosk-results { display: flex; flex-direction: column; gap: 0.5rem; max-height: 340px; overflow-y: auto; }
.kiosk-results-sm { max-height: 220px; }
.kiosk-result { display: flex; align-items: center; gap: 0.7rem; min-height: 56px; padding: 0.6rem 0.9rem; font-size: 1.1rem;
    text-align: left; border: 1px solid #cdd7e2; border-radius: 10px; background: #fff; cursor: pointer; }
.kiosk-result-photo { width: 40px; height: 40px; object-fit: cover; border-radius: 50%; }
.kiosk-terms { max-height: 260px; overflow-y: auto; padding: 0.8rem 1rem; background: #f7f9fc; border: 1px solid #e6ecf3;
    border-radius: 10px; white-space: pre-wrap; line-height: 1.5; color: #33404e; }
.kiosk-check { flex-direction: row !important; align-items: center; gap: 0.6rem !important; font-size: 1.1rem; }
.kiosk-check input { width: 26px; height: 26px; }
.kiosk-muted { color: #6b7480; }
.kiosk-link { background: none; border: none; color: var(--brand-link, #006bb7); text-decoration: underline; cursor: pointer; font-size: 1rem; }
.kiosk-error { background: #fbe4e4; color: #9a2c2c; border-radius: 8px; padding: 0.6rem 0.8rem; }
.kiosk-sign { display: flex; flex-direction: column; gap: 0.3rem; }
.kiosk-sign-lbl { font-weight: 600; color: #46505c; display: flex; gap: 0.6rem; align-items: baseline; }
.kiosk-sig-canvas { width: 100%; max-width: 560px; height: 150px; border: 2px dashed #cdd7e2; border-radius: 10px; background: #fff; touch-action: none; }
.kiosk-done { text-align: center; align-items: center; }
.kiosk-tick { width: 84px; height: 84px; border-radius: 50%; background: #d9f2e0; color: #1e5a33; font-size: 3rem;
    display: flex; align-items: center; justify-content: center; }

/* Visitor badge (printable) */
.badge-page { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 2rem 1rem; }
.badge-card { width: 320px; background: #fff; border: 2px solid var(--brand-dark, #16324f); border-radius: 12px;
    text-align: center; overflow: hidden; }
.badge-banner { background: var(--brand-dark, #16324f); color: #fff; font-weight: 800; letter-spacing: 3px; font-size: 1.4rem; padding: 0.5rem; }
.badge-photo { width: 150px; height: 150px; object-fit: cover; border-radius: 10px; margin: 1rem auto 0.5rem; display: block; border: 1px solid #cdd7e2; }
.badge-photo-empty { display: flex; align-items: center; justify-content: center; background: #eef3f8; color: #6b7480; font-size: 3.5rem; font-weight: 700; }
.badge-name { font-size: 1.6rem; font-weight: 700; color: var(--brand-dark, #16324f); }
.badge-company { color: #46505c; margin-bottom: 0.5rem; }
.badge-meta { text-align: left; padding: 0.6rem 1.2rem 1.2rem; font-size: 1rem; color: #33404e; }
.badge-meta > div { margin: 0.2rem 0; }
.badge-lbl { display: inline-block; min-width: 74px; color: #6b7480; font-size: 0.8rem; text-transform: uppercase; }
/* Print sized for a Brother QL-820NWB on 62mm CONTINUOUS tape (DK-2205): width fixed to the
   roll, the label cut to content length. Content is laid out in mm so it fills the label.
   print-color-adjust:exact is REQUIRED so WebKit/AirPrint (iPad) actually prints the navy
   banner + coloured backgrounds instead of dropping them (white-on-white = blank). One card,
   overflow hidden + break-inside avoid, so a badge never spills onto a second blank label. */
@media print {
    /* Height kept just above the content so a continuous roll doesn't eject a blank label.
       iOS Safari ignores @page size and uses the printer's media, so also size the card in mm. */
    @page { size: 62mm 78mm; margin: 0; }
    html, body {
        margin: 0; padding: 0; background: #fff;
        -webkit-print-color-adjust: exact; print-color-adjust: exact;
    }
    /* Force every element to keep its colours when printing (WebKit needs the -webkit- prefix),
       and keep the badge VISIBLE even if another print rule tries to hide the page (see the
       label-sheet rule). */
    .badge-page, .badge-page * { -webkit-print-color-adjust: exact; print-color-adjust: exact; visibility: visible !important; }
    .badge-page { position: absolute; left: 0; top: 0; }
    .kiosk-shell { background: #fff !important; padding: 0; min-height: 0; }
    .no-print { display: none !important; }
    .badge-page { padding: 0; margin: 0; display: block; }
    .badge-card {
        width: 58mm; margin: 0 auto; border: 0.6mm solid #16324f; border-radius: 2.5mm;
        overflow: hidden; break-inside: avoid; page-break-inside: avoid;
    }
    .badge-banner {
        font-size: 4mm; letter-spacing: 1mm; padding: 1.5mm;
        background: #16324f !important; color: #fff !important;
    }
    .badge-photo { width: 28mm; height: 28mm; margin: 2mm auto 1.5mm; border-radius: 2mm; }
    .badge-photo-empty { background: #eef3f8 !important; color: #444 !important; font-size: 12mm; }
    .badge-name { font-size: 5mm; }
    .badge-company { font-size: 3.4mm; margin-bottom: 1.5mm; }
    .badge-meta { font-size: 3.2mm; padding: 1.5mm 3mm 3mm; }
    .badge-meta > div { margin: 0.6mm 0; }
    .badge-lbl { min-width: 16mm; font-size: 2.4mm; }
}
.pill-locked { background: #fde8e8; color: #b3261e; }
.impersonation-bar { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; justify-content: space-between;
    background: #4a2f8a; color: #fff; padding: .5rem 1rem; font-size: .92rem; }
.impersonation-return { color: #fff; font-weight: 600; text-decoration: underline; white-space: nowrap; }
.denied-groups { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; margin: .2rem 0 .6rem; }
.users-table td { vertical-align: middle; }
.users-table .user-name { font-weight: 600; }
.user-name-cell { display: flex; align-items: center; gap: 10px; }
/* Ticket/request detail: the request number shown above the title. */
.ticket-no { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: #6a7c90; margin-bottom: 2px; }
.assign-vendor { margin-top: 0.4rem; }
/* Collapsible card/sub-section headers on the ticket detail page. */
.collapsible-title { cursor: pointer; user-select: none; display: flex; align-items: center; gap: 0.4rem; }
.collapse-arrow { display: inline-block; width: 1em; color: #6a7c90; }
.count-hint { font-weight: 400; font-size: 0.85rem; }
/* Assignment pickers in one row. */
.assign-row { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: flex-end; margin: 0.3rem 0; }
.assign-row .assign-group { display: flex; flex-direction: column; gap: 2px; margin: 0; flex: 1 1 200px; min-width: 160px; }
/* Assign-to-users: a dropdown (details) whose panel is a searchable checkbox list. */
.assign-users-dd { position: relative; }
.assign-users-dd > summary { list-style: none; cursor: pointer; }
.assign-users-dd > summary::-webkit-details-marker { display: none; }
.assign-users-dd > summary.as-summary::after { content: "▾"; float: right; opacity: .6; }
.assign-users-panel { position: absolute; z-index: 40; top: 100%; left: 0; margin-top: 4px; width: 320px; max-width: 90vw;
    background: #fff; border: 1px solid #cfd8e3; border-radius: .5rem; box-shadow: 0 8px 22px rgba(20,40,70,.2); padding: 8px; }
.assign-users-panel .invitee-checklist { max-height: 260px; margin-top: 6px; }
/* Parts linked to the chosen machine/component are highlighted in the add-results list. */
.add-result.linked-part { background: #f1fbf4; border-color: #c3e6d0; }
/* 10-at-a-time pager (part detail: stock ledger + service history). */
.pager { display: flex; align-items: center; gap: 10px; justify-content: flex-end; margin-top: 8px; }
.pager-count { font-size: 0.85rem; color: #6b7480; }
/* "Parts being taken" list on a ticket. */
.parts-taken li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 5px 0; border-bottom: 1px solid #f1f4f8; }
.parts-taken .pt-qty { font-weight: 700; color: #16324f; min-width: 34px; }
/* Consistent width for the Acknowledge/Claim/Start work/manual buttons. */
.btn-timer { min-width: 150px; }
.users-table .user-role { font-size: .8rem; color: #45566a; }
.users-table .user-email { font-size: .8rem; color: #6b7480; }
.users-table .nowrap { white-space: nowrap; }
.chip-row { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
/* Users page Actions column: equal-width buttons, 3 per row (top + bottom). */
.user-action-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; align-items: stretch; }
.user-action-grid > button { width: 100%; margin: 0; white-space: nowrap; }
.user-action-grid .user-action-status { grid-column: 1 / -1; }
/* Vendor list Actions column: one short row of equal-width buttons (no wrapping/stacking) so rows stay compact. */
.data-table td.row-actions { white-space: nowrap; vertical-align: middle; }
.row-actions { display: flex; flex-wrap: nowrap; gap: 4px; align-items: center; justify-content: flex-end; }
.row-actions .mini { flex: 0 0 auto; min-width: 4.5rem; text-align: center; justify-content: center; }
.expand-row td { background: #f7f9fc; }
.chip-x { border: none; background: transparent; color: #a12318; font-weight: 700; cursor: pointer; padding: 0 0 0 4px; font-size: .95rem; line-height: 1; }
.chip-x:hover { color: #7a1a12; }
.chip-mini { border: 1px solid #b9cdea; background: #fff; color: #1b4f8a; border-radius: 4px; cursor: pointer; padding: 0 4px; font-size: .8rem; line-height: 1.3; margin-left: 2px; }
.chip-mini:disabled { opacity: .4; cursor: default; }
/* Knowledge base + support */
/* KB rich editor: image select + drag-to-resize (richtext.js). */
.kb-editor img.rt-selected { outline: 2px solid #1b6fb3; outline-offset: 1px; }
.rt-resize-handle { position: absolute; width: 18px; height: 18px; border-radius: 50%;
    background: #1b6fb3; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.4);
    cursor: nwse-resize; z-index: 3000; touch-action: none; }
.machine-move { align-items: center; gap: .5rem; margin: 0 0 .8rem; }
.addpage-form { align-items: center; gap: .4rem; margin: .5rem 0 0; padding: .5rem; background: #f4f7fb; border: 1px dashed #b9c6d6; border-radius: 6px; }
.chk-inline { display: inline-flex; align-items: center; gap: .25rem; white-space: nowrap; }
.color-swatch { width: 22px; height: 22px; padding: 0; border-radius: 4px; border: 1px solid #b9c6d6; cursor: pointer; }
.color-swatch.active { outline: 2px solid var(--brand-accent); outline-offset: 1px; }
/* Facility Map: visible list box of maps (replaces the dropdown), sorted alphabetically. */
.map-listbox { display: flex; flex-direction: column; min-width: 180px; max-width: 320px; max-height: 220px;
    overflow-y: auto; border: 1px solid #c7d0da; border-radius: 8px; background: #fff; padding: 3px; }
.map-listbox-item { text-align: left; padding: .45rem .6rem; border: 0; background: transparent; border-radius: 5px;
    cursor: pointer; font-size: .95rem; color: #23405c; min-height: 40px; }
.map-listbox-item:hover { background: #eef3f8; }
.map-listbox-item.active { background: var(--brand-dark); color: #fff; font-weight: 600; }
.map-thumbs { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 .6rem; }
.map-thumb { display: flex; flex-direction: column; align-items: stretch; width: 140px; padding: 4px;
    background: #fff; border: 2px solid #d7dde5; border-radius: 8px; cursor: pointer; text-align: center; }
.map-thumb.active { border-color: var(--brand-accent); box-shadow: 0 0 0 2px rgba(27,110,194,.2); }
.map-thumb img { width: 100%; height: 84px; object-fit: cover; border-radius: 5px; background: #f0f2f5; }
.map-thumb span { font-size: .78rem; margin-top: 3px; word-break: break-word; color: #334; }
.admin-inline { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.admin-inline .filter-select.small { max-width: 12rem; }
.admin-tools-msgs { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 .6rem; }
.save-pill { align-self: center; padding: .2rem .6rem; border-radius: 999px; font-size: .8rem; font-weight: 600; white-space: nowrap; }
.save-pill.saved { color: #1a7f37; background: #e7f6ec; }
.save-pill.saving { color: #9a6700; background: #fff3d6; }
/* Signed-in user in the top bar (left of the KB button). */
.top-bar-user { display: inline-flex; align-items: center; gap: .4rem; max-width: 240px; margin-right: .3rem; }
.top-bar-user .tbu-avatar { font-size: 1.15rem; line-height: 1; }
.top-bar-user .tbu-info { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.top-bar-user .tbu-name { font-weight: 700; font-size: .85rem; color: var(--brand-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-bar-user .tbu-email { font-size: .72rem; color: #6a7a8a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) { .top-bar-user .tbu-info { display: none; } }
/* Clickable user menu (native <details>, no JS). */
.tbu-menu { position: relative; }
summary.top-bar-user { cursor: pointer; list-style: none; user-select: none; padding: .15rem .35rem; border-radius: 8px; }
summary.top-bar-user::-webkit-details-marker { display: none; }
summary.top-bar-user:hover { background: #eef3f8; }
.tbu-caret { color: #6a7a8a; font-size: .7rem; transition: transform .12s ease; }
.tbu-menu[open] .tbu-caret { transform: rotate(180deg); }
.tbu-dropdown { position: absolute; top: calc(100% + 6px); right: 0; z-index: 4000; min-width: 210px;
    background: #fff; border: 1px solid #d0d8e0; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.16); overflow: hidden; }
.tbu-dd-header { padding: .6rem .8rem; background: var(--brand-dark); color: #fff; }
.tbu-dd-name { font-weight: 700; }
.tbu-dd-email { font-size: .78rem; opacity: .85; word-break: break-all; }
.tbu-dd-item { display: block; padding: .6rem .8rem; color: #23405c; font-weight: 600; text-decoration: none; }
.tbu-dd-item:hover { background: #f0f4f8; }
.kb-meta { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin: .2rem 0 .6rem; color: #667; font-size: .82rem; }
.kb-meta span { white-space: nowrap; }
.kb-body { word-break: break-word; line-height: 1.5; overflow-x: auto; }
.kb-body img { max-width: 100%; height: auto; }
.kb-body table { border-collapse: collapse; margin: .5rem 0; }
.kb-body td, .kb-body th { border: 1px solid #d7dde5; padding: 4px 8px; }
.kb-body h1, .kb-body h2, .kb-body h3 { margin: .6rem 0 .3rem; }
.kb-body ul, .kb-body ol { margin: .3rem 0 .3rem 1.4rem; }
.kb-body a { color: #1b4f8a; }
.kb-edit { display: flex; flex-direction: column; gap: .5rem; overflow-y: auto; }
.kb-toolbar { display: flex; flex-wrap: wrap; gap: 3px; }
.kb-toolbar button { min-width: 32px; padding: 3px 8px; border: 1px solid #d7dde5; background: #fff; border-radius: 5px; cursor: pointer; }
.kb-toolbar button:hover { background: #eef4ff; border-color: #9db9e0; }
.kb-editor { min-height: 240px; max-height: 55vh; overflow-y: auto; border: 1px solid #cfd6de; border-radius: 6px; padding: .6rem .8rem; background: #fff; line-height: 1.5; }
.kb-editor:focus { outline: 2px solid #9db9e0; }
.kb-editor img { max-width: 100%; height: auto; }
.kb-editor table { border-collapse: collapse; }
.kb-editor td, .kb-editor th { border: 1px solid #d7dde5; padding: 4px 8px; }
.support-modal { max-width: 900px; width: 92vw; }
.support-grid { display: flex; gap: 1rem; }
.support-write { flex: 1 1 55%; display: flex; flex-direction: column; gap: .5rem; }
.support-write textarea { width: 100%; }
.support-kb { flex: 1 1 45%; border-left: 1px solid #eef2f7; padding-left: 1rem; max-height: 55vh; overflow-y: auto; display: flex; flex-direction: column; gap: .4rem; }
@media (max-width: 720px) { .support-grid { flex-direction: column; } .support-kb { border-left: none; border-top: 1px solid #eef2f7; padding-left: 0; padding-top: .5rem; } }
/* Auto-surfaced answer cards in the support box */
.answer-card { border: 1px solid #dde6f1; border-radius: 0.5rem; background: #fbfdff; padding: 0.5rem 0.6rem; }
.answer-head { display: flex; align-items: baseline; gap: 0.5rem; justify-content: space-between; }
.answer-title { font-weight: 600; color: var(--brand-dark-2); font-size: 0.9rem; }
.answer-src { font-size: 0.68rem; color: #8a97ab; white-space: nowrap; }
.answer-text { font-size: 0.82rem; color: #3c4a5a; margin-top: 0.2rem; line-height: 1.35; }
.answer-link { font-size: 0.75rem; font-weight: 600; color: var(--brand-accent); display: inline-block; margin-top: 0.25rem; }

/* Chat */
.chat-wrap { display: flex; gap: 1rem; height: calc(100vh - 130px); min-height: 420px; }
.chat-list { flex: 0 0 300px; display: flex; flex-direction: column; border-right: 1px solid #e2e8f0; padding-right: .6rem; overflow: hidden; }
.chat-list-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.chat-new { display: flex; flex-direction: column; gap: .4rem; }
.chat-items { overflow-y: auto; margin-top: .5rem; display: flex; flex-direction: column; gap: 3px; }
.chat-item { text-align: left; border: none; background: transparent; padding: .5rem .6rem; border-radius: 8px; cursor: pointer; }
.chat-item:hover { background: #eef4ff; }
.chat-item.active { background: #dbe7fb; }
.chat-item-top { display: flex; justify-content: space-between; align-items: center; }
.chat-item-name { font-weight: 600; }
.chat-item-last { font-size: .8rem; color: #6b7480; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 250px; }
.chat-unread { background: #e14b3b; color: #fff; border-radius: 999px; font-size: .72rem; padding: 0 7px; font-weight: 700; }
.nav-chat-badge { background: #e14b3b; color: #fff; border-radius: 999px; font-size: .7rem; padding: 0 6px; font-weight: 700; margin-left: 6px; }
.chat-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.chat-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: .4rem; border-bottom: 1px solid #eef2f7; }
.chat-members { display: flex; flex-direction: column; gap: .4rem; }
.chat-empty { display: flex; align-items: center; justify-content: center; height: 100%; color: #7a8794; }
.chat-thread { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: .5rem; padding: .6rem .2rem; }
.chat-msg { max-width: 72%; background: #f1f4f8; border-radius: 10px; padding: .45rem .7rem; position: relative; }
.chat-msg.mine { align-self: flex-end; background: #dbe7fb; }
.chat-msg-head { font-size: .78rem; margin-bottom: 2px; }
.chat-msg-body { white-space: pre-wrap; word-break: break-word; }
.chat-to-ticket { position: absolute; top: 4px; right: 6px; border: none; background: transparent; color: #1b4f8a; font-size: .72rem; cursor: pointer; opacity: 0; }
.chat-msg:hover .chat-to-ticket { opacity: 1; }
.chat-compose { display: flex; align-items: flex-end; gap: .5rem; padding-top: .5rem; border-top: 1px solid #eef2f7; }
.chat-compose textarea { flex: 1; }
/* Message reactions (👍 …) + emoji pickers. */
.chat-msg-reactions { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin-top: .3rem; }
.reaction-chip { background: #eef2f7; border: 1px solid #d7dde5; border-radius: 999px; padding: 0 .5rem; font-size: .82rem; line-height: 1.7; cursor: pointer; }
.reaction-chip.on { background: #d9ebff; border-color: var(--brand-accent); font-weight: 600; }
.reaction-chip:hover { background: #e2e9f1; }
.react-menu, .emoji-menu { position: relative; display: inline-block; }
.react-menu > summary, .emoji-menu > summary { list-style: none; cursor: pointer; }
.react-menu > summary::-webkit-details-marker, .emoji-menu > summary::-webkit-details-marker { display: none; }
.reaction-add { font-size: .8rem; color: #6a7a8a; padding: 0 .25rem; border-radius: 999px; }
.reaction-add:hover { background: #eef2f7; }
.react-menu-pop, .emoji-pop { position: absolute; bottom: 100%; z-index: 60; display: flex; flex-wrap: wrap; gap: 2px;
    background: #fff; border: 1px solid #d0d8e0; border-radius: 8px; padding: 4px; box-shadow: 0 6px 18px rgba(0,0,0,.16); margin-bottom: 4px; }
.react-menu-pop { left: 0; flex-wrap: nowrap; width: max-content; }
.emoji-pop { right: 0; width: 264px; max-height: 210px; overflow-y: auto; }
.react-menu-pop button, .emoji-pop button { border: 0; background: transparent; font-size: 1.2rem; line-height: 1; cursor: pointer; padding: 3px 4px; border-radius: 5px; }
.react-menu-pop button:hover, .emoji-pop button:hover { background: #eef2f7; }
.timer-actions { display: flex; gap: .5rem; margin: .4rem 0; }
.timer-actions > .btn-primary { flex: 1 1 0; }
/* Start work + Add manual time side by side, both the same fixed size. */
.timer-actions-row { flex-wrap: wrap; }
.timer-actions-row > .btn-primary, .timer-actions-row > .btn-secondary { flex: 0 0 auto; }
.manual-session { margin-top: .6rem; padding-top: .5rem; border-top: 1px solid #eef2f7; }
.perf-summary { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-bottom: .8rem; }
.perf-stat { display: flex; flex-direction: column; }
.perf-num { font-size: 1.3rem; font-weight: 700; color: var(--brand-dark-2); }
.perf-lbl { font-size: .78rem; color: #6b7480; }
.work-log li { margin-bottom: .4rem; }
.work-log li > div { white-space: pre-wrap; }
.manual-grid { display: flex; flex-wrap: wrap; gap: .6rem; margin: .3rem 0; }
.manual-grid label { display: flex; flex-direction: column; font-size: .8rem; color: #6b7480; gap: 2px; }
.assign-box { display: flex; flex-direction: column; gap: .5rem; margin: .5rem 0; padding-top: .5rem; border-top: 1px solid #eef2f7; }
.assign-group { display: flex; flex-direction: column; gap: 2px; font-size: .8rem; color: #6b7480; }
.row-disabled td { background: #f6f7f8; color: #8a929c; }
.reject-row td { background: #fff6f5; }
.row-done td { background: #f4faf5; }
.page-intro.small { font-size: .82rem; color: #5a6472; margin-top: .4rem; }
.only-print { display: none; }

/* Service history on picker forms */
.service-history-wrap { margin-top: 1.4rem; border-top: 2px solid #e6ecf3; padding-top: 1rem; }

@media print {
    .sidebar, .top-bar, .no-print { display: none !important; }
    .only-print { display: block; }
    .content { padding: 0; }
}

/* Service Request (log a repair with parts used) */
.sr-card { margin-top: 1rem; border: 2px solid #cfe0d3; }
.sr-head { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; margin-bottom: 0.6rem; }
.sr-summary { flex: 1 1 320px; }
.sr-summary input { min-width: 260px; }

/* Inventory stock ledger (adjust / count / movements) */
.stock-card { margin: 0.5rem 0; }
.stock-onhand { font-weight: 600; color: #45566a; font-size: 0.95rem; margin-left: 0.5rem; }
.stock-ops { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin: 0.5rem 0; }
.stock-op { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.stock-op .filter-input.small { min-width: 160px; }
.txn-pos { color: #1e5a33; font-weight: 700; }
.txn-neg { color: #b3261e; font-weight: 700; }
.stock-bal { font-weight: 600; color: #33425c; }

/* ---- Barcode scanner (camera modal) & barcode display ------------------- */
.scan-backdrop { position: fixed; inset: 0; z-index: 1000; background: rgba(8,16,26,.72);
    display: flex; align-items: center; justify-content: center; padding: 1rem; }
.scan-modal { background: #0f1720; color: #eef4fa; width: min(560px, 96vw); border-radius: .9rem;
    overflow: hidden; box-shadow: 0 12px 40px rgba(0,0,0,.5); }
.scan-head { display: flex; align-items: center; justify-content: space-between; padding: .7rem 1rem; }
.scan-title { font-weight: 700; font-size: 1.02rem; }
.scan-close { background: transparent; border: none; color: #cdd9e5; font-size: 1.25rem; cursor: pointer;
    width: 2.2rem; height: 2.2rem; border-radius: .5rem; }
.scan-close:hover { background: rgba(255,255,255,.12); }
.scan-viewport { position: relative; background: #000; aspect-ratio: 4 / 3; width: 100%; overflow: hidden; }
.scan-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scan-reticle { position: absolute; inset: 12% 10%; border: 3px solid rgba(120,200,255,.9);
    border-radius: .6rem; box-shadow: 0 0 0 100vmax rgba(0,0,0,.28); pointer-events: none; }
.scan-hint { padding: .7rem 1rem; font-size: .92rem; color: #b9c6d3; text-align: center; }
.scan-hint.err { color: #ffb4a8; }
.scan-foot { display: flex; align-items: center; justify-content: space-between; gap: .8rem;
    padding: .2rem 1rem 1rem; }
.scan-last { font-size: .9rem; color: #cfe6ff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Inline barcode value + actions in the inventory edit form */
.barcode-field { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.barcode-value { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-weight: 700;
    letter-spacing: .02em; padding: .25rem .5rem; background: #f3f6fa; border: 1px solid #e1e8f0;
    border-radius: .4rem; min-width: 8rem; }
.barcode-value.empty { color: #93a1b0; font-weight: 500; font-style: italic; }

/* Barcode SVG sizing (label page + previews) */
.bc-qr { width: 100%; height: auto; max-width: 220px; }
.bc-1d { width: 100%; height: auto; max-width: 320px; }

.scan-result-bar { display: flex; align-items: center; gap: .6rem; margin: .3rem 0 .6rem;
    padding: .5rem .8rem; background: #eef7ff; border: 1px solid #cfe4f7; border-radius: .5rem;
    color: #1c3f5f; font-weight: 600; }

/* ---- Printable barcode label ------------------------------------------- */
.page-back { display: inline-block; margin: .2rem 0 .6rem; color: #2f6db5; font-weight: 600; text-decoration: none; }
.page-back:hover { text-decoration: underline; }
.label-sheet { display: block; }
.label-card { border: 1px solid #d7e0ea; border-radius: .6rem; padding: 1rem 1.2rem; background: #fff;
    width: min(460px, 100%); }
.label-grid .label-card, .label-card.mini { width: 100%; }
.label-title { font-size: 1.5rem; font-weight: 800; letter-spacing: .01em; }
.label-desc { font-size: 1rem; color: #33414f; margin-top: .15rem; }
.label-meta { font-size: .85rem; color: #6b7885; margin-top: .1rem; }
.label-codes { display: flex; align-items: center; gap: 1.2rem; margin-top: .9rem; flex-wrap: wrap; }
.label-qr { flex: 0 0 auto; }
.label-1d { flex: 1 1 220px; min-width: 200px; }
.label-human { font-family: ui-monospace, Consolas, monospace; font-weight: 700; letter-spacing: .12em;
    text-align: center; margin-top: .2rem; font-size: 1rem; }

@media print {
    /* Print only the label — but ONLY on a page that actually has a label sheet. Scoped with
       :has() so this "hide everything else" rule can't blank OTHER print pages (e.g. the visitor
       badge, reports), which it previously did because body * was unscoped. */
    body:has(.label-sheet) * { visibility: hidden; }
    body:has(.label-sheet) .label-sheet, body:has(.label-sheet) .label-sheet * { visibility: visible; }
    .label-sheet { position: absolute; left: 0; top: 0; }
    .label-card { border: none; }
    .no-print { display: none !important; }
}

/* Scan basket manual-add matches */
.scan-matches { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .8rem; }
.scan-match { text-align: left; background: #fff; border: 1px solid #dbe4ee; border-radius: .5rem;
    padding: .4rem .7rem; cursor: pointer; font-size: .9rem; }
.scan-match:hover { background: #eef6ff; border-color: #b7d3ee; }
.scan-nobc { color: #b06a00; font-size: .72rem; margin-left: .35rem; }
.qty-in { width: 5rem; text-align: right; }

/* ---- Bulk barcode labels (grid + print) -------------------------------- */
.label-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin: .2rem 0 1rem;
    padding: .6rem .9rem; background: #f4f8fc; border: 1px solid #dfe8f2; border-radius: .5rem; }
.label-scope { display: inline-flex; align-items: center; gap: .8rem; color: #33414f; }
.label-scope label { display: inline-flex; align-items: center; gap: .3rem; }
.label-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: .6rem; }
.label-card.mini { padding: .6rem .7rem; }
.label-card.mini .label-title { font-size: 1.15rem; }
.label-card.mini .label-desc { font-size: .85rem; }
.label-card.mini .bc-qr { max-width: 120px; }
.label-card.mini .bc-1d { max-width: 200px; }
.label-card.mini .label-human { font-size: .82rem; letter-spacing: .1em; }

@media print {
    .label-grid { grid-template-columns: repeat(2, 1fr); gap: .35cm; }
    .label-card { break-inside: avoid; page-break-inside: avoid; border: 1px solid #bbb; }
}

/* ---- Use Inventory (parts-usage request, iPad-friendly) ---------------- */
.ui-row { margin-bottom: .8rem; }
.ui-field { display: flex; flex-direction: column; gap: .25rem; max-width: 520px; }
.ui-lbl { font-weight: 600; color: #33414f; }
.ui-big { min-height: 46px; font-size: 1.05rem; }
button.ui-big { padding: .7rem 1.3rem; }

/* Use Inventory: Room · Machine used · Scan on one row (wraps on narrow screens). */
.use-filter-row { display: flex; flex-wrap: wrap; gap: .8rem; align-items: flex-end; }
.use-filter-row .ui-field { flex: 1 1 220px; max-width: none; }
.use-filter-row .btn-secondary { align-self: flex-end; }

/* Compact so ~4-5 items show and the Parts-to-use section fits on one iPad screen. */
.use-results { display: flex; flex-direction: column; gap: .3rem; max-height: 210px; overflow-y: auto; margin-top: .4rem; }
.use-result { display: flex; justify-content: space-between; align-items: center; gap: 1rem; width: 100%;
    text-align: left; background: #fff; border: 1px solid #dbe4ee; border-radius: .55rem;
    padding: .35rem .7rem; cursor: pointer; min-height: 34px; }

/* Use Inventory: heading + its explanation on one row (explanation small). */
.use-head-row { margin-bottom: .5rem; }
.head-title-line { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; min-width: 0; flex: 1 1 auto; }
.head-title-line .page-heading { margin: 0; }
.page-intro-inline { font-size: .8rem; color: #5a6b7b; line-height: 1.3; }
.use-result:hover { background: #eef6ff; border-color: #b7d3ee; }
.ur-main { flex: 1 1 auto; }
.ur-side { flex: 0 0 auto; color: #5a6b7b; white-space: nowrap; }
.ur-add { margin-left: .8rem; color: #1f6f43; font-weight: 700; }

/* "Parts to use" cart table: fit the card width like the results list above it — let the
   Part No / Description cells wrap instead of forcing horizontal scroll on narrow (iPad) screens.
   Numeric + qty-stepper columns stay on one line. */
.use-cart-table { width: 100%; table-layout: fixed; }
.use-cart-table th, .use-cart-table td { white-space: normal; overflow-wrap: anywhere; }
.use-cart-table th.num, .use-cart-table td.num { white-space: nowrap; }
.use-cart-table col.c-partno { width: 22%; }
.use-cart-table col.c-onhand { width: 5rem; }
.use-cart-table col.c-qty { width: 8.5rem; }
.use-cart-table col.c-rm { width: 5.5rem; }
.txt-low { color: #b3261e; }

.qty-step { display: inline-flex; align-items: center; gap: .3rem; }
.qbtn { width: 2.1rem; height: 2.1rem; border: 1px solid #cdd8e3; background: #f4f8fc; border-radius: .45rem;
    font-size: 1.15rem; line-height: 1; cursor: pointer; }
.qbtn:hover { background: #e6f0fa; }
tr.over-stock { background: #fff6f5; }
tr.over-stock .num { color: #b3261e; }

.usage-card { border: 1px solid #e2e9f1; border-radius: .6rem; padding: .7rem .9rem; margin-bottom: .7rem; }
.usage-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.usage-parts { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .4rem; }
.usage-part { background: #f1f5f9; border-radius: .4rem; padding: .15rem .5rem; font-size: .85rem; color: #34424f; }
.usage-close { margin-top: .7rem; padding-top: .7rem; border-top: 1px dashed #dbe4ee; }
.usage-q { font-weight: 600; margin: 0 0 .5rem; }
/* Per-part "machine used" pickers on the close screen. */
.usage-machines { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .9rem; }
.usage-machine-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.usage-machine-row .um-part { min-width: 9rem; font-weight: 600; color: #34424f; }
.usage-machine-row .field-input { flex: 1 1 220px; min-height: 44px; }

/* ---- Rooms page: collapsible room rows + room photos ------------------- */
.room-card { padding: 0; overflow: hidden; }
.room-head-row { display: flex; align-items: center; gap: .8rem; padding: .5rem .8rem; flex-wrap: wrap; }
.room-toggle { flex: 1 1 auto; display: flex; align-items: center; gap: .7rem; background: transparent;
    border: none; cursor: pointer; text-align: left; padding: .4rem .2rem; min-height: 46px; font: inherit; }
.room-toggle:hover { background: #f6f9fc; border-radius: .5rem; }
.room-caret { width: 1.1rem; color: #5a6b7b; font-size: 1rem; flex: 0 0 auto; }
.room-name { font-size: 1.15rem; font-weight: 700; color: #22303c; }
.room-count { margin-left: auto; color: #6b7885; font-size: .85rem; white-space: nowrap; }
.room-thumb { width: 40px; height: 40px; object-fit: cover; border-radius: .4rem; border: 1px solid #dbe4ee; flex: 0 0 auto; }
.room-photo-actions { display: flex; align-items: center; gap: .4rem; flex: 0 0 auto; }
.photo-btn { cursor: pointer; }
.room-body { padding: 0 .8rem .8rem; border-top: 1px solid #eef2f7; }
.room-photo-full { max-width: 320px; max-height: 220px; width: auto; height: auto; object-fit: contain;
    border: 1px solid #dbe4ee; border-radius: .5rem; margin: .8rem 0; display: block; }

/* Room photo gallery: the default is shown large above; every photo appears in this strip
   with Set-default / remove controls. */
.room-photo-strip { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 .8rem; }
.room-photo-item { position: relative; width: 120px; border: 1px solid #dbe4ee; border-radius: .5rem; overflow: hidden; background: #fff; }
.room-photo-item.is-default { border-color: var(--brand-accent); box-shadow: 0 0 0 1px var(--brand-accent); }
.room-photo-item img { width: 100%; height: 84px; object-fit: cover; display: block; }
.room-photo-badge { position: absolute; top: 4px; left: 4px; background: var(--brand-accent); color: #fff;
    font-size: .68rem; font-weight: 700; padding: 1px 6px; border-radius: 10px; }
.room-photo-item-actions { display: flex; gap: .25rem; padding: .3rem; justify-content: center; flex-wrap: wrap; }

/* Machine row: expand to show its component tree (Rooms list). */
.machine-cell { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.tree-caret-btn { background: transparent; border: none; cursor: pointer; color: #5a6b7b; font-size: .95rem;
    line-height: 1; padding: .2rem .3rem; min-width: 1.4rem; border-radius: .3rem; }
.tree-caret-btn:hover { background: #eef2f7; }
.tree-caret-spacer { display: inline-block; min-width: 1.4rem; }
.machine-components-row > td { background: #f8fbfd; border-top: none; padding: .3rem .6rem .5rem; }
.mini-tree { display: flex; flex-direction: column; gap: .1rem; }
.mini-tree-node { font-size: .9rem; color: #33414d; line-height: 1.6; }
.mini-tree-node .tree-bullet { color: #9aa8b5; margin-right: .35rem; }
.mini-tree-node .comp-link { color: #1b5e8c; text-decoration: none; }
.mini-tree-node .comp-link:hover { text-decoration: underline; }
.mini-tree-node.part-node { font-size: .85rem; color: #4a5763; }
.mini-tree-node .part-bullet { color: #b3c0cc; margin-right: .4rem; font-size: .7rem; }
.mini-tree-node .part-link { color: #3a4a58; text-decoration: none; font-weight: 600; }
.mini-tree-node .part-link:hover { text-decoration: underline; }
.qty-inline { max-width: 4.5rem; text-align: right; padding: .25rem .4rem; }

/* Inventory Part No: green count badge = how many machines the part is used on. */
.used-count-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.15rem;
    height: 1.15rem; margin-left: .45rem; padding: 0 .3rem; border-radius: 999px; background: #16a34a;
    color: #fff; font-size: .68rem; font-weight: 700; line-height: 1; vertical-align: middle; }

/* Machine detail: browse-first "link a part" picker (search box + scrollable result list). */
.part-picker { display: flex; flex-direction: column; gap: .5rem; margin-top: .6rem; }
.part-results { display: flex; flex-direction: column; gap: .15rem; max-height: 200px; overflow-y: auto;
    border: 1px solid #e3eaf2; border-radius: .5rem; padding: .3rem; background: #fbfdff; }
.part-results .add-result { display: block; width: 100%; text-align: left; background: none; border: none;
    padding: .35rem .5rem; border-radius: .4rem; cursor: pointer; font-size: .9rem; }
.part-results .add-result:hover { background: #eef4fb; }
.part-results .add-result.selected { background: #dcebfa; outline: 1px solid #9cc4ea; }
.part-selected { margin-right: auto; }

/* Brief highlight when returning to the machine you came from on the Rooms list. */
@keyframes rowFlash { 0% { background: #fff3c4; } 100% { background: transparent; } }
tr.row-flash > td { animation: rowFlash 1.6s ease-out; }

/* ---- Inventory column chooser (show/hide + reorder, drag between lists) - */
.col-manager { background: #fff; border: 1px solid #dfe8f2; border-radius: .6rem; padding: .6rem .9rem;
    margin: .2rem 0 1rem; max-width: 1120px; }
.cm-head { display: flex; align-items: center; gap: .8rem; margin-bottom: .35rem; flex-wrap: wrap; }
.cm-subhead { display: flex; align-items: center; gap: .8rem; margin-bottom: .5rem; font-size: .75rem; flex-wrap: wrap; }
.cm-title { font-weight: 600; color: #33414f; flex: 1; font-size: .88rem; }
.cm-panes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: start; }
@media (max-width: 820px) { .cm-panes { grid-template-columns: 1fr; } }
.cm-pane { min-width: 0; border: 1px solid #e2e9f1; border-radius: .5rem;
    padding: .5rem; min-height: 130px; background: #fafcff; }
.cm-pane-title { font-weight: 600; font-size: .8rem; color: #5a6b7b; margin-bottom: .45rem; }
.cm-item { display: flex; align-items: center; gap: .35rem; padding: .3rem .45rem; background: #fff;
    border: 1px solid #e6ecf3; border-radius: .45rem; margin-bottom: .3rem; }
.cm-item.avail { background: #f6f9fc; }
.cm-item .qbtn { width: 1.7rem; height: 1.7rem; font-size: .85rem; }
.cm-grip { color: #9aa7b4; cursor: grab; user-select: none; }
.cm-name { flex: 1; font-size: .9rem; color: #22303c; }
.cm-x { background: transparent; border: none; color: #b3261e; cursor: pointer; font-size: .78rem; font-weight: 600; }
.cm-add { background: transparent; border: none; color: #1f6f43; cursor: pointer; font-size: .78rem; font-weight: 600; }
.cm-empty { color: #93a1b0; font-size: .85rem; font-style: italic; padding: .5rem .2rem; }
/* Move-between-boxes arrows (◀ / ▶) and the Hidden box + category selector. */
.cm-arrow { background: #eef4fb; border: 1px solid #cdd8e3; color: var(--brand-accent); cursor: pointer; font-size: .9rem;
    line-height: 1; border-radius: .35rem; padding: .12rem .4rem; font-weight: 700; }
.cm-arrow:hover { background: #dcebfa; }
.cm-item.hidden-field { background: #f3f5f7; }
.cm-item.hidden-field .cm-name { color: #7a8794; }
.cm-cat { max-width: 200px; min-height: 36px; padding: .25rem .5rem; }
.cm-cancel { color: #b3261e; }

/* File hits in the KB search results (rendered as list items alongside articles) */
.chat-item.chat-item-file { text-decoration: none; display: block; }
.chat-item.chat-item-file .chat-item-name { color: #16324f; }
.chat-item.chat-item-file .chat-item-last { color: #6b7480; }

/* ===== WIC2 warehouse bin-location reference ===== */
.wic2-tabs { display: flex; flex-wrap: wrap; gap: .3rem; border-bottom: 2px solid #e3e9f0; margin: .4rem 0 1rem; }
.wic2-tab { border: 0; background: transparent; padding: .55rem 1rem; font-size: 1rem; font-weight: 600; color: #5a6b7b;
    cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; border-radius: .4rem .4rem 0 0; }
.wic2-tab:hover { background: #f2f6fb; color: #16324f; }
.wic2-tab.active { color: #16324f; border-bottom-color: var(--brand-accent, #1b6ec2); }
.wic2-img { max-width: 100%; height: auto; border: 1px solid #dde5ee; border-radius: .5rem; cursor: zoom-in; display: block; }
.wic2-facts { margin: .3rem 0 1rem; padding-left: 1.2rem; line-height: 1.7; }
.wic2-facts li { margin-bottom: .25rem; }
.wic2-photos { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.wic2-photos figure { margin: 0; }
.wic2-photos figcaption { font-size: .85rem; color: #6b7480; margin-top: .3rem; text-align: center; }
.wic2-map-card { display: flex; flex-direction: column; }
.wic2-map-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .5rem; }
.wic2-frame { width: 100%; height: 72vh; min-height: 420px; border: 1px solid #dde5ee; border-radius: .5rem; background: #0a1017; }
.wic2-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .6rem; }
.wic2-filters .filter-input { flex: 1 1 22rem; }
.wic2-table td, .wic2-table th { white-space: nowrap; }
.wic2-table td:last-child { white-space: normal; }

/* ===== KB uploaded reference files (full-width bar at the top of /kb) ===== */
.kb-docs-bar { background: #f5f8fd; border: 1px solid #dbe4ef; border-radius: .6rem; padding: .6rem .8rem; margin-bottom: .8rem; }
.kb-docs-bar-main { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.kb-docs-title { font-size: .82rem; font-weight: 700; color: #45566a; text-transform: uppercase; letter-spacing: .03em; flex: 0 0 auto; }
.kb-dropzone { flex: 0 0 auto; min-width: 16rem; min-height: 2.4rem; }
.kb-docs-chips { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; flex: 1 1 12rem; }
.kb-doc-chip { display: inline-flex; align-items: center; gap: .4rem; background: #fff; border: 1px solid #dde5ee; border-radius: 999px; padding: .2rem .35rem .2rem .7rem; max-width: 24rem; }
.kb-doc-chip .kb-doc-name { min-width: 0; max-width: 15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #16324f; text-decoration: none; }
.kb-doc-chip .kb-doc-name:hover { text-decoration: underline; }
.kb-doc-size { font-size: .72rem; color: #8a97ab; flex: 0 0 auto; }
.kb-doc-badge { font-size: .68rem; color: #9a6b00; background: #fbeecb; border-radius: 999px; padding: .05rem .4rem; flex: 0 0 auto; }

/* ===== Machine Down kiosk (one-tap station) ===== */
.md-kiosk { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; box-sizing: border-box; }
.md-arm { display: flex; flex-direction: column; align-items: center; gap: 1.4rem; text-align: center; width: 100%; max-width: 640px; }
.md-station { font-size: clamp(1.4rem, 4vw, 2.4rem); font-weight: 800; color: #16324f; }
.md-pick { width: 100%; display: flex; flex-direction: column; gap: .4rem; align-items: center; }
.md-pick-lbl { font-size: 1.1rem; font-weight: 700; color: #45566a; }
.md-pick .big-select { font-size: 1.2rem; padding: .7rem; width: 100%; max-width: 480px; }
.md-hint { font-size: clamp(1rem, 2.4vw, 1.25rem); color: #6b7480; max-width: 30ch; }
/* the big red circular button */
.machinedown-btn { width: min(60vmin, 460px); height: min(60vmin, 460px); border-radius: 50%; border: 10px solid #7f1010;
    background: radial-gradient(circle at 50% 38%, #f2453a, #c0161c 70%); color: #fff; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem;
    box-shadow: 0 14px 40px rgba(192,22,28,.45), inset 0 -10px 24px rgba(0,0,0,.28); transition: transform .06s ease, filter .1s ease; }
.machinedown-btn:hover { filter: brightness(1.05); }
.machinedown-btn:active { transform: scale(.97); }
.machinedown-btn:disabled { filter: grayscale(.6) brightness(.9); cursor: not-allowed; }
.machinedown-btn .md-icon { font-size: clamp(3rem, 12vmin, 6rem); line-height: 1; }
.machinedown-btn .md-text { font-size: clamp(1.8rem, 7vmin, 3.4rem); font-weight: 900; letter-spacing: .04em; line-height: 1.05; }
/* confirm overlay */
.md-confirm-overlay { position: fixed; inset: 0; z-index: 3000; background: rgba(15,25,40,.78);
    display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.md-confirm-box { background: #fff; border-radius: 1rem; padding: 2rem; max-width: 560px; width: 100%; text-align: center;
    box-shadow: 0 16px 50px rgba(0,0,0,.5); }
.md-confirm-q { font-size: clamp(1.4rem, 4vw, 2rem); color: #16324f; margin-bottom: 1.6rem; }
.md-confirm-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.md-confirm-yes, .md-confirm-no { font-size: 1.3rem; font-weight: 800; padding: 1rem 1.6rem; border-radius: .6rem; border: 0; cursor: pointer; min-width: 44px; }
.md-confirm-yes { background: #c0161c; color: #fff; }
.md-confirm-no { background: #eef2f7; color: #45566a; }
.md-confirm-yes:disabled, .md-confirm-no:disabled { opacity: .6; cursor: not-allowed; }
/* live request view */
/* The whole reported view reads as ONE ticket: a red outline + glow + tint wraps the heading, the ticket card,
   the updates and the reply/call controls together. */
.md-live { width: 100%; max-width: 760px; display: flex; flex-direction: column; gap: 1rem;
    border: 3px solid #c0392b; border-radius: 1rem; background: #fff4f1; padding: 1.1rem 1.25rem;
    box-shadow: 0 0 0 5px rgba(192,57,43,.12), 0 14px 34px rgba(0,0,0,.16); }
.md-live-head { display: flex; align-items: center; justify-content: space-between; }
.md-live-title { font-size: clamp(1.3rem, 3.5vw, 1.9rem); font-weight: 800; color: #0a6b3b; }
.md-live-conn { font-size: .85rem; color: #6b7480; }
/* Inside the red panel the ticket itself is a clean white card (keeps its age-coloured left accent). */
.board-card.md-live-card { font-size: 1.15rem; background: #fff; box-shadow: 0 2px 6px rgba(20,40,70,.1); }
.md-live-card .board-title { font-size: 1.5rem; }
.md-thread { background: #fff; border: 1px solid #dde5ee; border-radius: .6rem; padding: .8rem 1rem; max-height: 40vh; overflow-y: auto; }
.md-thread-lbl { font-size: .8rem; font-weight: 700; color: #7a8794; text-transform: uppercase; margin-bottom: .5rem; }
.md-msg { padding: .5rem 0; border-bottom: 1px solid #eef2f7; }
.md-msg:last-child { border-bottom: 0; }
.md-msg.from-system { opacity: .8; }
.md-msg-meta { font-size: .85rem; color: #6b7480; }
.md-msg-body { font-size: 1.15rem; color: #1f2a37; white-space: pre-wrap; }
.md-msg-photos img { max-height: 140px; border-radius: .35rem; margin: .3rem .3rem 0 0; }
.md-respond { display: flex; flex-direction: column; gap: .5rem; }
.md-templates { display: flex; flex-wrap: wrap; gap: .4rem; }
.md-tpl { border: 1px solid #cfd8e3; background: #f6f9fc; border-radius: 999px; padding: .5rem .9rem; font-size: 1rem; cursor: pointer; }
.md-tpl:hover { background: #e9f0f8; }
.md-tpl:disabled { opacity: .6; cursor: not-allowed; }
.md-respond-text { font-size: 1.15rem; }
.md-respond-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.md-respond-actions .btn-primary, .md-respond-actions .btn-secondary { font-size: 1.1rem; padding: .7rem 1.2rem; }

/* ---- Automated Reports page ---- */
.tabbar { display: flex; gap: .3rem; border-bottom: 2px solid #dde5ee; margin: .6rem 0 1.1rem; }
.tabbar .tab { background: none; border: none; padding: .6rem 1rem; font-size: 1rem; font-weight: 600;
    color: #6b7480; cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.tabbar .tab:hover { color: #16324f; }
.tabbar .tab.active { color: #16324f; border-bottom-color: #16324f; }
.section-heading { font-size: 1.05rem; color: #16324f; margin: 1.4rem 0 .5rem; }
.detail-card.muted-card { background: #f7f9fc; }
.field-row { display: flex; align-items: center; gap: .6rem; margin: .55rem 0; }
.field-row.wrap { flex-wrap: wrap; }
.field-row .po-lbl { margin: 0; min-width: 3.5rem; }
.day-row { display: flex; gap: .35rem; flex-wrap: wrap; }
.day-chip { display: inline-flex; align-items: center; gap: .25rem; padding: .25rem .55rem; border-radius: 8px;
    border: 1px solid #cfd8e3; background: #fff; font-size: .85rem; cursor: pointer; }
.day-chip.on { background: #16324f; color: #fff; border-color: #16324f; }
.day-chip input { accent-color: #fff; }
.status-pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .78rem; font-weight: 600; }
.status-pill.good { background: #d9f2e0; color: #1e5a33; }
.status-pill.bad { background: #fbe0e0; color: #8a1f1f; }
.status-pill.warn { background: #fdf0d6; color: #7a5a12; }
.ok-note { color: #1e7a3a; font-weight: 600; font-size: .9rem; }
.data-table tr.row-selected > td { background: #fff6e9; }
.data-table tr.row-off > td { opacity: .5; }
/* WIC#2 generated rack elevations */
.wic2-elev { border-collapse: collapse; font-size: .8rem; }
.wic2-elev td, .wic2-elev th { border: 1px solid #e2e8f0; text-align: center; }
.wic2-elev-lvl { background: #f2f6fb; color: #1b4f8a; font-weight: 700; padding: .2rem .5rem; position: sticky; left: 0; z-index: 1; }
.wic2-elev-cell { min-width: 2.1rem; height: 2rem; color: #3a5a80; background: #eaf1fb; }
.wic2-elev-num { min-width: 2.1rem; color: #93a2b3; font-size: .7rem; }
.wic2-elev-h { display: block; font-size: .66rem; font-weight: 400; color: #6a7c90; }
.wic2-elev tr.elev-front td, .wic2-elev tr.elev-front th { border-bottom: 2px solid #9fb4cf; }

/* Level filter chips (Floor plan + Live map) */
.fp-controls { display: flex; align-items: center; gap: .4rem; margin: .2rem 0 .5rem; flex-wrap: wrap; }
.fp-controls-label { font-size: .8rem; color: #6a7c90; font-weight: 600; }
.lvl-chip { border: 1px solid #b9cdea; background: #fff; color: #1b4f8a; border-radius: 999px; padding: .2rem .75rem; font-size: .8rem; cursor: pointer; }
.lvl-chip.on { background: #1b4f8a; color: #fff; border-color: #1b4f8a; }

/* WIC2 floor plan — linear positions (1→N), each with Back + Front slot at the chosen level */
.wic2-floor { display: flex; flex-direction: column; gap: 1rem; }
.fp-aisle { border: 1px solid #d7dbe0; border-radius: .5rem; padding: .5rem .65rem; background: #fafbfc; }
.fp-aisle-label { font-weight: 700; color: #1b4f8a; margin-bottom: .45rem; }
.fp-aisle-label span { font-weight: 400; color: #6a7c90; font-size: .8rem; margin-left: .5rem; }
.fp-strip { display: flex; align-items: flex-start; gap: 2px; overflow-x: auto; padding-bottom: .2rem; }
.fp-rowlab { display: flex; flex-direction: column; gap: 2px; margin-right: .35rem; flex: 0 0 auto; }
.fp-rowlab span { height: 24px; display: flex; align-items: center; font-size: .66rem; color: #6a7c90; }
.fp-rowlab span:last-child { height: 16px; }
.fp-pos { display: flex; flex-direction: column; gap: 2px; flex: 0 0 auto; }
.fp-pos.room-start { margin-left: 10px; border-left: 2px dashed #8a5cc0; padding-left: 8px; }
.fp-slot { width: 22px; height: 24px; border-radius: 3px; border: 1px solid #b9cdea; }
.fp-posnum { height: 16px; text-align: center; font-size: .6rem; color: #6a7c90; }
.fp-key { display: inline-block; padding: .05rem .45rem; border-radius: 4px; font-size: .74rem; margin-left: .35rem; border: 1px solid #b9cdea; }

/* shared per-slot occupancy colours (floor-plan slots + elevation cells) */
.sl-empty { background: #e7f6ec; border-color: #7fc59a; }
.sl-full  { background: #f6d4d0; border-color: #d97b6e; }
.sl-none  { background: #eef1f4; border-color: #dfe4ea; }

/* WIC2 3D walk-through — first-person corridor (CSS 3D) */
.w3d-controls { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .6rem; }
.w3d-controls .head-actions { align-items: center; gap: .5rem; flex-wrap: wrap; }
.w3d-range { flex: 1 1 14rem; min-width: 12rem; accent-color: #1b4f8a; }
.w3d-key { font-size: .74rem; color: #6a7c90; display: inline-flex; align-items: center; gap: .35rem; margin-left: auto; flex-wrap: wrap; }
.w3d-chip { display: inline-block; width: 15px; height: 12px; border-radius: 2px; border: 1px solid #9fb; vertical-align: middle; margin-right: 2px; }
.w3d-chip.full { background: #2f8f4e; border-color: #8be0a6; }
.w3d-chip.empty { background: #dfe6ee; border-color: #b8c4d0; }
.w3d-chip.f { background: #14b8a6; border-color: #14b8a6; }
.w3d-chip.b { background: #f59e0b; border-color: #f59e0b; }
.w3d-stage { position: relative; width: 100%; height: 70vh; min-height: 420px; overflow: hidden;
  border: 1px solid #26303c; border-radius: .5rem; perspective: 1050px; perspective-origin: 50% 40%;
  background: radial-gradient(1300px 760px at 50% 8%, #26323f 0%, #131c26 58%, #0a0f16 100%); }
.w3d-cam { position: absolute; left: 50%; top: 50%; transform-style: preserve-3d; will-change: transform; }
.w3d-floor { position: absolute; left: 0; top: 0;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 58px, transparent 58px 116px), linear-gradient(180deg, #16202b, #0c131b);
  border: 1px solid #26303c; }
.w3d-slot { position: absolute; left: 0; top: 0; width: 42px; height: 30px; margin-left: -21px; margin-top: -15px;
  border: 1px solid #45536480; border-radius: 3px; box-sizing: border-box; }
.w3d-slot.empty { background: rgba(150,170,190,.10); border-color: #37424f; }
.w3d-slot.full { background: linear-gradient(180deg, #33a15a, #1c6c3a); border-color: #8be0a6; box-shadow: 0 0 7px rgba(40,190,100,.45); }
.w3d-slot.f { border-left: 4px solid #14b8a6; }
.w3d-slot.b { border-left: 4px solid #f59e0b; }
.w3d-pnum { position: absolute; left: 0; right: 0; bottom: -15px; text-align: center; font-size: 10px; color: #9fb3c8; }
.w3d-code { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; font-size: 8.5px; line-height: 1; color: #eaf2fb; text-shadow: 0 1px 2px #000; letter-spacing: -.2px; }
.w3d-aislelab { position: absolute; left: 0; top: 0; color: #cfe0f2; font-weight: 700; font-size: 20px; white-space: nowrap; text-shadow: 0 1px 3px #000; }
.w3d-slot.clickable { cursor: pointer; }
.w3d-slot.clickable:hover { outline: 2px solid #ffd54a; outline-offset: 1px; }
.w3d-stage.w3d-side { perspective: 1500px; perspective-origin: 50% 46%; }
.w3d-zoom { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .12s ease; }
.w3d-sep { display: inline-block; width: 1px; height: 18px; background: #cdd6e0; margin: 0 .3rem; }
.w3d-controls .group-chip { color: #6a7c90; font-size: .8rem; }
.w3d-info { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 5; min-width: 260px; max-width: 92%;
  background: rgba(18, 26, 36, .97); color: #e8eef6; border: 1px solid #3a4b5e; border-radius: 10px; padding: 1rem 1.1rem; box-shadow: 0 12px 40px rgba(0,0,0,.55); }
.w3d-info-x { position: absolute; right: .45rem; top: .35rem; background: none; border: none; color: #9fb3c8; font-size: 1.15rem; cursor: pointer; line-height: 1; }
.w3d-info-code { font-size: 1.25rem; font-weight: 800; color: #fff; letter-spacing: .5px; }
.w3d-info-prod { color: #9fd6b0; margin-bottom: .5rem; }
.w3d-info-tbl { width: 100%; border-collapse: collapse; font-size: .85rem; }
.w3d-info-tbl th { text-align: left; color: #8fa3b8; font-weight: 600; padding: .15rem .6rem .15rem 0; white-space: nowrap; vertical-align: top; }
.w3d-info-tbl td { padding: .15rem 0; }
.w3d-info-link { display: inline-block; margin-top: .6rem; color: #7fb6ff; font-size: .82rem; }