: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;
}

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: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.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 #258cfb;
}

.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 CMMS shared styles -------------------------------------- */

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

.page-heading {
    font-size: 1.7rem;
    font-weight: 800;
    color: #16324f;
    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, #16324f, #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: #16324f; 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: #1b6ec2;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
}
.login-button:hover { background: #155a9e; }

.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: #16324f;
    font-weight: 600;
}

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

.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; }
.back-link { display: inline-block; margin-bottom: 0.6rem; color: #1b6ec2; 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; }
.back-link-global { font-size: .85rem; font-weight: 500; color: #55637a; margin-bottom: 0; }
.back-link-global:hover { color: #1b6ec2; 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: #1b6ec2; color: #fff; }
.btn-primary:hover { background: #155a9e; }
.btn-secondary { background: #fff; color: #1b3a5b; 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: #1b6ec2; text-decoration: none; }

.filter-bar { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin: 0.4rem 0 0.5rem; }
.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; }
/* 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-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: #16324f; }
.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; }
.detail-card { background: #fff; border: 1px solid #e6ecf3; border-radius: 0.8rem; padding: 1.2rem; margin-bottom: 1rem; }
.card-title { font-size: 1.1rem; font-weight: 700; color: #16324f; 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; }
.tree-name { font-weight: 600; color: #1f2d3d; }
.tree-actions { display: inline-flex; gap: 0.3rem; align-items: center; }
.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: #1b6ec2; }
.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: #1b6ec2 !important; color: #fff !important; border-color: #1b6ec2 !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: #1b6ec2; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.photo-caption { margin-top: 0.5rem; }

.link-button {
    background: none; border: none; padding: 0; font: inherit; color: #1b3a5b;
    font-weight: 600; cursor: pointer; text-align: left;
}
.link-button:hover { color: #1b6ec2; text-decoration: underline; }
.link-button.selected { color: #1b6ec2; text-decoration: underline; }

.selected-component { border-color: #1b6ec2; }

/* Component history panel */
.pm-due { color: #16324f; }
.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: #16324f; }
.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: #16324f; 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; }
.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: #16324f; 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: #1b6ec2; }
.dot.status-inprogress { background: #e6a017; }
.dot.status-completed { background: #2e9e4c; }
.dot.status-overdue { background: #e14b3b; }

.cal-grid { display: grid; grid-template-columns: repeat(7, 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; }
.cal-cell.out-month { background: #f4f7fb; color: #b3bfcc; }
.cal-cell.today { border-color: #1b6ec2; box-shadow: inset 0 0 0 1px #1b6ec2; }
/* 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: #1b6ec2; }
.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; }
.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, #1b6ec2);
    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: #16324f; text-align: center; }
.big-ok { font-size: 1.1rem; }

/* ---- 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-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; }
@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; }
.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: #16324f; 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: #1b3a5b;
}
.chip-button:hover { background: #eef5fc; border-color: #1b6ec2; }

/* ---- 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: #16324f; 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; }
.group-checks { flex-wrap: wrap; gap: 0.6rem; }

/* ---- 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: #16324f; 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; }
.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: #1b3a5b; font-weight: 600; cursor: pointer;
}
.help-btn:hover { background: #eef5fc; border-color: #1b6ec2; }
.help-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.2rem; height: 1.2rem; border-radius: 50%; background: #1b6ec2; 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: #16324f; }
.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: #16324f;
    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: #16324f; }
.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; } }

/* ---- 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: #16324f; }
.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 #1b6ec2; 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: #16324f; 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: #1b6ec2; color: #fff; border-color: #1861ac; }
.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: #1b6ec2; 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: #1b6ec2; color: #fff; border-color: #1861ac; }
/* 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: #1b6ec2; background: #fff; }
.part-images { flex: 0 0 220px; 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: #1b6ec2; 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: wrap, but never taller than two rows (scroll for the rest). */
.part-images .pi-strip { display: flex; flex-wrap: wrap; gap: 0.35rem; max-height: 148px; overflow-y: auto;
    padding: 0.15rem; background: #fff; border: 1px solid #dde5ee; border-radius: 0.45rem; }
.part-images .pi-thumb { position: relative; width: 64px; height: 64px; }
.part-images .pi-thumb img { width: 64px; height: 64px; object-fit: cover; border-radius: 0.35rem; border: 1px solid #dde5ee; }
.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: #1b6ec2; }
.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: #1b6ec2; 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: 38px; height: 38px; object-fit: cover; border-radius: 0.35rem; border: 1px solid #dde5ee; vertical-align: middle; }
.data-table th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.data-table th.sortable:hover { color: #1b6ec2; }
/* 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: #1b6ec2; }
.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: #1b6ec2; }
/* 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; } }
.data-table tr.dblrow { cursor: pointer; }
.data-table tr.editing td { background: #eef5fc; }
.data-table tr.edit-row td { background: #f7fafd; padding: 0.8rem 1rem; }
.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; }
.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-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; }

.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 { 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; }

.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; }
.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; }
.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; }
.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; }
/* 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 #1b6ec2; 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: #16324f; 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: #1b6ec2; 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: #16324f; 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: #16324f; 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: #1b3a5b; 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: #1b6ec2; 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: #1b6ec2; 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; }
.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: #1b3a5b; }
.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, whatever the surrounding app layout is. */
    body * { visibility: hidden; }
    .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-results { display: flex; flex-direction: column; gap: .4rem; max-height: 340px; overflow-y: auto; margin-top: .6rem; }
.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: .7rem .9rem; cursor: pointer; min-height: 46px; }
.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; }
.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; }

/* ---- 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; }

/* ---- 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: #1b6ec2; 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; }