/* ---- BCTS brand tokens (sampled from the BCTS logo) ---- */
:root {
    --bcts-navy: #16223f;
    --bcts-navy-dark: #0d1529;
    --bcts-navy-light: #2a3a63;
    --bcts-copper: #c4782f;
    --bcts-copper-dark: #a85a1e;
    --bcts-copper-light: #f9d59b;
    --bcts-surface: #f5f6f9;
    --bcts-border: #dfe3ea;

    /* Accents. Branding per company (MainLayout, .company-branded) replaces these; BCTS uses copper. */
    --accent: var(--bcts-copper);          /* lines and focus rings on white */
    --accent-on-dark: var(--bcts-copper);  /* lines on the navy sidebar */

    /* Bootstrap 5 overrides so stock components pick up the brand. */
    --bs-primary: var(--bcts-navy);
    --bs-primary-rgb: 22, 34, 63;
    --bs-link-color: var(--bcts-navy-light);
    --bs-link-color-rgb: 42, 58, 99;
    --bs-link-hover-color: var(--bcts-copper-dark);
    --bs-link-hover-color-rgb: 168, 90, 30;
    --bs-body-font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --bs-body-color: #1f2937;
}

html, body {
    font-family: var(--bs-body-font-family);
}

body {
    background-color: var(--bcts-surface);
}

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

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

.btn-primary {
    --bs-btn-bg: var(--bcts-navy);
    --bs-btn-border-color: var(--bcts-navy);
    --bs-btn-hover-bg: var(--bcts-navy-light);
    --bs-btn-hover-border-color: var(--bcts-navy-light);
    --bs-btn-active-bg: var(--bcts-navy-dark);
    --bs-btn-active-border-color: var(--bcts-navy-dark);
    color: #fff;
}

.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(--accent);
}

h1, h2, h3 {
    color: var(--bcts-navy);
}

/* ---- Icons (white, for navy backgrounds) ---- */
.bi {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
    flex-shrink: 0;
}

.bi-house-door-fill-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-gear-fill-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872zM8 10.93a2.929 2.929 0 1 1 0-5.858 2.929 2.929 0 0 1 0 5.858'/%3E%3C/svg%3E");
}

.bi-briefcase-fill-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 1A1.5 1.5 0 0 0 5 2.5V3H1.5A1.5 1.5 0 0 0 0 4.5v1.384l7.614 2.03a1.5 1.5 0 0 0 .772 0L16 5.884V4.5A1.5 1.5 0 0 0 14.5 3H11v-.5A1.5 1.5 0 0 0 9.5 1zm0 1h3a.5.5 0 0 1 .5.5V3H6v-.5a.5.5 0 0 1 .5-.5'/%3E%3Cpath d='M0 12.5A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5V6.85L8.129 8.947a.5.5 0 0 1-.258 0L0 6.85z'/%3E%3C/svg%3E");
}

.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;
}
/* Data pages: filters, grids and paging (shared by every list page). */
.filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.5rem;
    margin-bottom: 1rem;
}

.search-box {
    flex: 1 1 18rem;
    max-width: 32rem;
}

.grid-card {
    background: #fff;
    border: 1px solid var(--bcts-border);
    border-radius: 6px;
    position: relative; /* for .grid-loading */
}

    .grid-card th {
        background-color: var(--bcts-navy);
        color: #fff;
        white-space: nowrap;
    }

        .grid-card th .col-title {
            color: #fff;
        }

    .grid-card td {
        vertical-align: middle;
    }


.paginator {
    margin-top: 0.75rem;
}

.invoice-totals {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 2rem;
}

.visit-notes {
    min-width: 16rem;
    white-space: pre-line;
}

.bi-geo-alt-fill-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10m0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6'/%3E%3C/svg%3E");
}

.bi-equipment-nav-menu {
    /* A packaged unit with its fan (our own drawing). */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='white' viewBox='0 0 16 16'%3E%3Crect x='1' y='2.5' width='14' height='11' rx='1.5' stroke-width='1.4'/%3E%3Ccircle cx='8' cy='8' r='3.2' stroke-width='1.3'/%3E%3Cpath d='M8 4.8v6.4M4.8 8h6.4' stroke-width='1.1'/%3E%3C/svg%3E");
}

.bi-tools-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M1 0 0 1l2.2 3.081a1 1 0 0 0 .815.419h.07a1 1 0 0 1 .708.293l2.675 2.675-2.617 2.654A3.003 3.003 0 0 0 0 13a3 3 0 1 0 5.878-.851l2.654-2.617.968.968-.305.914a1 1 0 0 0 .242 1.023l3.27 3.27a.997.997 0 0 0 1.414 0l1.586-1.586a.997.997 0 0 0 0-1.414l-3.27-3.27a1 1 0 0 0-1.023-.242L10.5 9.5l-.96-.96 2.68-2.643A3.005 3.005 0 0 0 16 3q0-.405-.102-.777l-2.14 2.141L12 4l-.364-1.757L13.777.102a3 3 0 0 0-3.675 3.68L7.462 6.46 4.793 3.793a1 1 0 0 1-.293-.707v-.071a1 1 0 0 0-.419-.814z'/%3E%3C/svg%3E");
}

.bi-receipt-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M1.92.506a.5.5 0 0 1 .434.14L3 1.293l.646-.647a.5.5 0 0 1 .708 0L5 1.293l.646-.647a.5.5 0 0 1 .708 0L7 1.293l.646-.647a.5.5 0 0 1 .708 0L9 1.293l.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .801.13l.5 1A.5.5 0 0 1 15 2v12a.5.5 0 0 1-.053.224l-.5 1a.5.5 0 0 1-.8.13L13 14.707l-.646.647a.5.5 0 0 1-.708 0L11 14.707l-.646.647a.5.5 0 0 1-.708 0L9 14.707l-.646.647a.5.5 0 0 1-.708 0L7 14.707l-.646.647a.5.5 0 0 1-.708 0L5 14.707l-.646.647a.5.5 0 0 1-.708 0L3 14.707l-.646.647a.5.5 0 0 1-.801-.13l-.5-1A.5.5 0 0 1 1 14V2a.5.5 0 0 1 .053-.224l.5-1a.5.5 0 0 1 .367-.27M3.5 4a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1zm0 2a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1zm0 2a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1zm0 2a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1zm8-6a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1zm0 2a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1zm0 2a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1zm0 2a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1z'/%3E%3C/svg%3E");
}

.bi-send-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M15.964.686a.5.5 0 0 0-.65-.65L.767 5.855H.766l-.452.18a.5.5 0 0 0-.082.887l.41.26.001.002 4.995 3.178 3.178 4.995.002.002.26.41a.5.5 0 0 0 .886-.083zm-1.833 1.89L6.637 10.07l-.215-.338a.5.5 0 0 0-.154-.154l-.338-.215 7.494-7.494 1.178-.471z'/%3E%3C/svg%3E");
}

.request-form {
    max-width: 52rem;
}

.bi-people-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6m-5.784 6A2.24 2.24 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.3 6.3 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1zM4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5'/%3E%3C/svg%3E");
}

.bi-person-vcard-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm9 1.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 0-1h-4a.5.5 0 0 0-.5.5M9 8a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 0-1h-4A.5.5 0 0 0 9 8m1 2.5a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 0-1h-3a.5.5 0 0 0-.5.5m-1 2C9 10.567 7.21 9 5 9c-2.086 0-3.8 1.398-3.984 3.181A1 1 0 0 0 2 13h6.96q.04-.245.04-.5M7 6a2 2 0 1 0-4 0 2 2 0 0 0 4 0'/%3E%3C/svg%3E");
}

.company-filter {
    flex: 0 1 16rem;
}

.assignment-candidates {
    max-height: 18rem;
    overflow-y: auto;
}
.admin-links { max-width: 40rem; }

/* ---- View as a customer (Customers page and the admin log) ---- */
.view-as-start {
    max-width: 40rem;
    margin-bottom: 1rem;
    border-left: 4px solid var(--accent);
}

.view-as-log .view-as-reason {
    min-width: 12rem;
    white-space: pre-line;
}

/* Service Dashboard charts. One hue (validated: passes lightness, chroma and >= 3:1 on white);
   text uses text tokens, never the series color. The app is light-only, so there is no dark variant yet. */
.viz-root {
    --viz-surface: #ffffff;
    --viz-series: #2a78d6;
    --viz-series-hover: #1c5cab;
    --viz-grid: #e6e8ec;
    --viz-text: #16223f;
    --viz-text-muted: #5b6475;
}

.stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 1rem;
}

.stat-tile, .viz-card {
    background: var(--viz-surface);
    border: 1px solid var(--bcts-border);
    border-radius: 6px;
    padding: 1rem 1.25rem;
}

.stat-tile {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.stat-label { color: var(--viz-text-muted); font-size: 0.875rem; }
.stat-value { color: var(--viz-text); font-size: 2rem; font-weight: 600; line-height: 1.2; }
.stat-note { color: var(--viz-text-muted); font-size: 0.8rem; }

.viz-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
    gap: 1rem;
}

.viz-card { margin: 0; }
.viz-card figcaption { display: flex; flex-direction: column; margin-bottom: 0.75rem; }
.viz-title { color: var(--viz-text); font-weight: 600; }
.viz-subtitle, .viz-empty { color: var(--viz-text-muted); font-size: 0.8rem; }

/* Horizontal bars: <= 24px thick, rounded data end, square at the baseline. */
.viz-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.viz-bar-row {
    display: grid;
    grid-template-columns: minmax(6rem, 38%) 1fr;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.85rem;
}
.viz-bar-label { color: var(--viz-text); overflow-wrap: anywhere; }
.viz-bar-track { display: flex; align-items: center; gap: 0.4rem; border-left: 1px solid var(--viz-grid); min-height: 1.5rem; }
.viz-bar { display: block; height: 16px; background: var(--viz-series); border-radius: 0 4px 4px 0; }
.viz-bar-row:hover .viz-bar { background: var(--viz-series-hover); }
.viz-bar-value { color: var(--viz-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Monthly columns on one baseline; hairline gridline at the top tick. */
.viz-columns {
    position: relative;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 2px;
    height: 12rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--viz-grid);
}
.viz-axis-max { position: absolute; top: 0.1rem; left: 0; color: var(--viz-text-muted); font-size: 0.7rem; font-variant-numeric: tabular-nums; }
.viz-column { display: grid; grid-template-rows: 1fr auto; min-width: 0; }
.viz-column-plot { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; border-bottom: 1px solid var(--viz-grid); }
.viz-column-bar { display: block; width: min(24px, 70%); background: var(--viz-series); border-radius: 4px 4px 0 0; }
.viz-column:hover .viz-column-bar { background: var(--viz-series-hover); }
.viz-column-value { color: var(--viz-text); font-size: 0.75rem; font-weight: 600; margin-bottom: 0.15rem; }
.viz-column-label { color: var(--viz-text-muted); font-size: 0.7rem; text-align: center; padding-top: 0.25rem; }

.viz-table { margin-top: 0.75rem; font-size: 0.85rem; }
.viz-table summary { color: var(--bs-link-color); cursor: pointer; }
.viz-table table { margin-top: 0.5rem; }

.bi-bar-chart-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M1 11a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1zm5-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1zm5-5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
}

.faq { max-width: 52rem; }
.faq details { border-bottom: 1px solid var(--bcts-border); padding: 0.75rem 0; }
.faq summary { cursor: pointer; font-weight: 600; color: var(--bcts-navy); }
.faq details > :not(summary) { margin: 0.5rem 0 0 1rem; }
.release-note > :last-child { margin-bottom: 0; }

.bi-question-circle-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M5.496 6.033h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286a.237.237 0 0 0 .241.247m2.325 6.443c.61 0 1.029-.394 1.029-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94 0 .533.425.927 1.01.927z'/%3E%3C/svg%3E");
}

.bi-journal-text-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M5 10.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5m0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5m0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5m0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5'/%3E%3Cpath d='M3 0h10a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-1h1v1a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v1H1V2a2 2 0 0 1 2-2'/%3E%3Cpath d='M1 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1z'/%3E%3C/svg%3E");
}

.about { max-width: 52rem; }
.about-facts { margin: 1.5rem 0; }

.bi-info-circle-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2'/%3E%3C/svg%3E");
}

.bi-chat-left-text-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H4.414a1 1 0 0 0-.707.293L.854 15.146A.5.5 0 0 1 0 14.793zm3.5 1a.5.5 0 0 0 0 1h9a.5.5 0 0 0 0-1zm0 2.5a.5.5 0 0 0 0 1h9a.5.5 0 0 0 0-1zm0 2.5a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1z'/%3E%3C/svg%3E");
}

/* Multi-line text from COINS (e.g. location directions). */
.pre-line {
    white-space: pre-line;
}

/* Excel-style column menus (GridColumnMenu, inside QuickGrid's ColumnOptions popup). */
@media (min-width: 768px) {
    .grid-card:has(.col-options) {
        overflow: visible; /* Let the open menu extend past the grid instead of being clipped by .table-responsive. */
    }
}

/* Phones: the grid stays a sideways scroller (making it visible let QuickGrid's scrollIntoView shift the whole page),
   and the open menu is a fixed panel across the screen, which its scroll container can't clip. */
@media (max-width: 767.98px) {
    .grid-card th .col-options {
        position: fixed;
        top: 5rem;
        left: 1rem;
        right: 1rem;
        max-height: calc(100vh - 7rem);
        overflow-y: auto;
        transform: none !important; /* QuickGrid's horizontal nudge is for a menu positioned in the header. */
    }

    .grid-card th .col-options .grid-menu {
        width: auto;
        max-width: none;
    }
}

.grid-card th .col-options {
    color: var(--bs-body-color);
    font-weight: normal;
    white-space: normal;
    padding: 0.75rem;
    border-radius: 6px;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    z-index: 20;
}

.grid-card th .col-options-button {
    filter: invert(1); /* QuickGrid's dark icon, on the navy header. */
    opacity: 0.75;
}

.grid-card th.col-filtered .col-options-button,
.grid-card th.col-sorted-asc .col-options-button,
.grid-card th.col-sorted-desc .col-options-button {
    opacity: 1;
}

.grid-card th.col-filtered .col-title-text,
.grid-card th.col-sorted-asc .col-title-text,
.grid-card th.col-sorted-desc .col-title-text {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.grid-card th.col-sorted-asc .col-title-text::after { content: " ▲"; font-size: 0.7em; }
.grid-card th.col-sorted-desc .col-title-text::after { content: " ▼"; font-size: 0.7em; }
.grid-card th.col-filtered .col-title-text::before { content: "⏷ "; font-size: 0.8em; }

.grid-menu {
    width: 17rem;
    max-width: calc(100vw - 2rem);
    display: flex;
    flex-direction: column;
}

.grid-menu-sort {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.grid-menu-values {
    max-height: 15rem;
    overflow-y: auto;
    border: 1px solid var(--bcts-border);
    border-radius: 4px;
    padding: 0.25rem 0.5rem;
}

.grid-menu-values .form-check {
    display: block;
    margin-bottom: 0.1rem;
    word-break: break-word;
}

.grid-menu-range {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.4rem 0.5rem;
}

.grid-menu-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.grid-filter-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    align-items: baseline;
    color: var(--bs-secondary-color);
}

/* ---- Branding per company (plan §3.5) ----
   MainLayout sets --company-accent (#RRGGBB from dbo.CompanyKco.AccentColor, at least 4.5:1 on white) on .page.
   Navy stays the structure; the company colour replaces the copper accents. Custom properties set on :root are
   resolved there, so the Bootstrap link hover colour is redeclared here too. */
.company-branded {
    --accent: var(--company-accent);
    --accent-on-dark: color-mix(in srgb, var(--company-accent) 45%, white); /* visible on navy even for a navy accent */
    --bs-link-hover-color: var(--company-accent);
}

.top-row .company-logo {
    height: 2.5rem;
    max-width: 12rem;
    object-fit: contain;
    margin-right: auto; /* left of the top bar, like the environment badge */
}

    .top-row .company-logo:has(+ .env-badge) {
        margin-right: 0;
    }

@media (max-width: 640.98px) {
    .top-row .company-logo {
        height: 2rem;
        max-width: 8rem;
    }
}

/* ---- Kind of work (WorkTypeBadge): preventive maintenance vs repair at a glance. Text colours are 4.5:1 or more on their backgrounds. ---- */
.work-badge {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

.work-badge-code {
    font-weight: 400;
    opacity: 0.8;
}

.work-pm {
    background-color: #e3f4ea;
    border-color: #a8d8b9;
    color: #135c32;
}

.work-repair {
    background-color: #fdeedd;
    border-color: #f2c48f;
    color: #8a4310;
}

.work-warranty {
    background-color: #e4eefb;
    border-color: #a9c5ec;
    color: #1d4f91;
}

.work-quote {
    background-color: #efe9f8;
    border-color: #c9b8e6;
    color: #5b3a8c;
}

.work-other {
    background-color: #eef0f3;
    border-color: #cfd4dc;
    color: #374151;
}

/* ---- Loading feedback. Each fades in after a moment, so quick loads don't flicker. ---- */
@keyframes loading-fade-in {
    to { opacity: 1; }
}

@keyframes page-progress-slide {
    from { transform: translateX(-100%); }
    to { transform: translateX(250%); }
}

/* Top of the window while the next page loads (wwwroot/js/page-progress.js). */
.page-progress {
    position: fixed;
    inset: 0 0 auto 0;
    height: 3px;
    z-index: 2000;
    overflow: hidden;
    background-color: rgba(196, 120, 47, 0.25);
}

    .page-progress::before {
        content: "";
        position: absolute;
        inset: 0 auto 0 0;
        width: 40%;
        background-color: var(--accent);
        animation: page-progress-slide 1.1s ease-in-out infinite;
    }

/* Over a grid while its rows load (GridLoading; .grid-card is position: relative). */
.grid-loading {
    position: absolute;
    inset: 2.6rem 0 0 0; /* below the header row */
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 2.5rem;
    background-color: rgba(255, 255, 255, 0.65);
    opacity: 0;
    animation: loading-fade-in 0.2s ease-out 0.3s forwards;
    pointer-events: none;
}

.grid-loading-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 1rem;
    background-color: #fff;
    border: 1px solid var(--bcts-border);
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(13, 21, 41, 0.08);
    color: var(--bcts-navy);
    font-weight: 600;
}

/* Where a page's content will appear (LoadingIndicator). */
.loading-indicator {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 2rem 0;
    color: var(--bcts-navy);
    opacity: 0;
    animation: loading-fade-in 0.2s ease-out 0.3s forwards;
}

@media (prefers-reduced-motion: reduce) {
    .page-progress::before {
        width: 100%;
        animation: none;
    }
}

/* An asset's comments keep their line breaks (LocationAssetDetail). */
.asset-comments {
    white-space: pre-line;
}

/* Administration > Document folders: a narrow order column. */
.folder-order {
    width: 7rem;
}

/* ---- Location documents explorer (LocationDocuments): folders on the left, files on the right. ---- */
.explorer {
    display: grid;
    grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.explorer-folders {
    background-color: #fff;
    border: 1px solid var(--bcts-border);
    border-radius: 6px;
    padding: 0.4rem;
}

.explorer-folder-select {
    display: none;
}

.explorer-folder-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.explorer-folder {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.45rem 0.6rem;
    border: 0;
    border-radius: 4px;
    background: none;
    color: var(--bs-body-color);
    text-align: left;
}

    .explorer-folder:hover {
        background-color: var(--bcts-surface);
    }

    .explorer-folder.active {
        background-color: rgba(22, 34, 63, 0.08);
        color: var(--bcts-navy);
        font-weight: 600;
        box-shadow: inset 3px 0 0 var(--accent);
    }

    .explorer-folder:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 1px;
    }

.explorer-folder-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* A folder drawn in CSS: a tab and a body. */
.explorer-folder-icon {
    position: relative;
    flex: 0 0 auto;
    width: 1.1rem;
    height: 0.8rem;
    margin-top: 0.15rem;
    border-radius: 2px;
    background-color: #e8b04a;
}

    .explorer-folder-icon::before {
        content: "";
        position: absolute;
        top: -0.2rem;
        left: 0;
        width: 0.5rem;
        height: 0.3rem;
        border-radius: 2px 2px 0 0;
        background-color: #e8b04a;
    }

.explorer-folder-icon-all,
.explorer-folder-icon-all::before {
    background-color: var(--bcts-navy-light);
}

.explorer-count {
    flex: 0 0 auto;
    min-width: 1.6rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background-color: var(--bcts-surface);
    color: #4b5563;
    font-size: 0.8rem;
    text-align: center;
}

.explorer-toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem 1rem;
    margin-bottom: 0.6rem;
}

.explorer-path {
    display: flex;
    gap: 0.4rem;
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
}

.explorer-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.explorer-filter {
    width: 14rem;
}

/* Column headings that sort: look like headings, behave like buttons. */
.explorer-sort {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-weight: 600;
}

    .explorer-sort:focus-visible {
        outline: 2px solid #fff;
        outline-offset: 2px;
    }

.explorer-file {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    word-break: break-word;
}

.explorer-empty {
    margin: 0;
    padding: 1.5rem 1rem;
    text-align: center;
}

/* The file's type as a small coloured tag (PDF, DOCX, XLSX, JPG...). Text colours are 4.5:1 or more. */
.file-type {
    flex: 0 0 auto;
    min-width: 2.6rem;
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-align: center;
}

.file-type-pdf { background-color: #fde4e1; color: #a1271b; }
.file-type-word { background-color: #e1ebfb; color: #1d4f91; }
.file-type-excel { background-color: #ddf1e4; color: #135c32; }
.file-type-image { background-color: #efe9f8; color: #5b3a8c; }
.file-type-other { background-color: #eef0f3; color: #374151; }

/* Staff: drop files here (an invisible file input covers the area). */
.explorer-drop {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    margin-top: 0.75rem;
    padding: 1.1rem 1rem;
    border: 2px dashed var(--bcts-border);
    border-radius: 6px;
    background-color: #fff;
    color: var(--bcts-navy);
    text-align: center;
}

    .explorer-drop:hover,
    .explorer-drop:focus-within {
        border-color: var(--accent);
        background-color: var(--bcts-surface);
    }

    .explorer-drop.busy {
        border-style: solid;
        color: #4b5563;
    }

.explorer-drop-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/* Phones: folders become a dropdown; secondary columns are hidden. */
@media (max-width: 767.98px) {
    .explorer {
        grid-template-columns: minmax(0, 1fr);
    }

    .explorer-folders {
        padding: 0;
        border: 0;
        background: none;
    }

    .explorer-folder-select {
        display: block;
    }

    .explorer-folder-list,
    .explorer-hide-sm {
        display: none;
    }

    .explorer-actions,
    .explorer-filter {
        width: 100%;
    }
}

/* ---- Printable service order (OrderPrint.razor, PrintLayout): the order page's design (OrderSheet) on Letter with
   0.5in margins. On screen, the sheet at the page's width with a toolbar; the toolbar and notices don't print. ---- */
.print-page {
    max-width: 8.5in;
    margin: 0 auto;
    padding: 1rem 16px 3rem;
}

.print-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

@media print {
    @page {
        size: letter;
        margin: 0.5in;
    }

    body {
        background: #fff !important;
    }

    .print-toolbar,
    .print-hide,
    .page-progress,
    #blazor-error-ui,
    #components-reconnect-modal {
        display: none !important;
    }

    .print-page {
        max-width: none;
        padding: 0;
    }
}