:root {
    --bg: #f5f7f8;
    --panel: #ffffff;
    --popup: #eaf4ff;
    --ink: #1f2933;
    --muted: #6b7280;
    --line: #d9e0e6;
    --accent: #0f766e;
    --accent-ink: #ffffff;
    --danger: #b42318;
    --success: #237a3b;
    --warn: #9a6700;
    --link-blue: #2563eb;
    --soft: #eef3f2;
    --field-bg: #ffffff;
    --field-text: #1f2933;
    --field-placeholder: #687784;
    --field-disabled-bg: #edf1f4;
    --field-disabled-text: #5f6c76;
    --shadow: 0 8px 24px rgba(31, 41, 51, 0.08);
    font-family: "Segoe UI", Arial, sans-serif;
}

/* E.ON application theme ---------------------------------------------------
   This layer is selected per user and applies the E.ON brand across the app.
   It changes presentation only: schedule geometry, data hooks and operational tile
   colours continue to come from the standard diary styles. */
@font-face {
    font-family: "EON Office Head";
    src: url("eon-brand/EONOfficeHead.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

body.theme-eon {
    --bg: #faf9f9;
    --panel: #ffffff;
    --popup: #fff4f4;
    --ink: #222222;
    --muted: #626268;
    --line: #e8e2e3;
    --accent: #EA1B0A !important;
    --accent-ink: #ffffff;
    --danger: #a8000e;
    --success: #237a3b;
    --warn: #8a5d00;
    --link-blue: #9f1308;
    --soft: #fff1f2;
    --field-bg: #ffffff;
    --field-text: #222222;
    --field-placeholder: #747077;
    --field-disabled-bg: #f2eeee;
    --field-disabled-text: #6d686d;
    --text: var(--ink);
    --text-muted: var(--muted);
    --shadow: 0 16px 42px rgba(118, 0, 10, 0.09);
    color-scheme: light;
    background: var(--bg);
    color: var(--ink);
    font-family: Arial, "Segoe UI", sans-serif;
}

body.theme-eon .sidebar {
    color: var(--ink);
    border-right: 1px solid var(--line);
    background: #ffffff;
    box-shadow: 8px 0 28px rgba(90, 0, 8, 0.06);
}

body.theme-eon .brand {
    justify-content: center;
    padding: 4px 8px 20px;
}

body.theme-eon .brand-logo.is-eon-default {
    width: 132px;
    max-height: 46px;
}

body.theme-eon .brand-logo:not(.is-eon-default) {
    width: var(--nav-logo-width, 222px);
    max-height: 120px;
}

body.theme-eon .nav a {
    color: #514d51;
    border: 1px solid transparent;
    border-radius: 10px;
    font-weight: 700;
}

body.theme-eon .nav a.active,
body.theme-eon .nav a:hover {
    color: #9f1308;
    border-color: #efc3c6;
    background: #fff0f1;
    box-shadow: none;
}

body.theme-eon .sidebar-user {
    color: var(--ink);
    border-top-color: var(--line);
}

body.theme-eon .sidebar-user-summary:hover,
body.theme-eon .sidebar-user-summary[aria-expanded="true"],
body.theme-eon .sidebar-online-users h3,
body.theme-eon .sidebar-online-user strong {
    color: var(--ink);
}

body.theme-eon .sidebar-user-summary svg,
body.theme-eon .sidebar-user small,
body.theme-eon .sidebar-online-users p,
body.theme-eon .sidebar-online-user small,
body.theme-eon .sidebar-avatar-cropper label {
    color: var(--muted);
}

body.theme-eon .sidebar-online-users,
body.theme-eon .sidebar-avatar-form {
    border-color: var(--line);
}

body.theme-eon .online-dot {
    border-color: #ffffff;
}

body.theme-eon .sidebar-account-menu,
body.theme-eon .sidebar-account-menu.is-account-menu-overlay,
body.theme-eon .sidebar-account-menu:popover-open {
    color: var(--ink);
    border-color: var(--line);
    background: #ffffff;
    box-shadow: 0 20px 55px rgba(80, 0, 8, 0.18);
}

body.theme-eon .sidebar-account-menu a,
body.theme-eon .sidebar-account-action,
body.theme-eon .sidebar-account-role-switch label,
body.theme-eon .sidebar-avatar-file,
body.theme-eon .sidebar-avatar-form .button {
    color: var(--ink);
    border-color: var(--line);
}

body.theme-eon .sidebar-account-role-switch select {
    color: var(--ink);
    border-color: var(--line);
    background: #ffffff;
}

body.theme-eon .sidebar-account-menu a:hover,
body.theme-eon .sidebar-account-action:hover,
body.theme-eon .sidebar-avatar-file:hover,
body.theme-eon .sidebar-avatar-form .button:hover {
    color: #9f1308;
    background: #fff0f1;
}

body.theme-eon .sidebar-avatar-cropper {
    border-color: var(--line);
    background: var(--bg);
}

body.theme-eon .shell {
    background: var(--bg);
}

body.theme-eon .topbar {
    align-items: center;
    margin-bottom: 14px;
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: var(--shadow);
}

body.theme-eon .topbar h1,
body.theme-eon .engineer-schedule .panel-head h2,
body.theme-eon .schedule-region-select {
    font-family: "EON Office Head", Arial, sans-serif;
    font-weight: 400;
}

body.theme-eon .topbar h1 {
    color: #9f1308;
    font-size: 30px;
}

body.theme-eon .top-logo {
    width: min(118px, 28vw);
    max-height: 40px;
}

body.theme-eon .panel {
    border-color: #e8e2e3;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 12px 34px rgba(118, 0, 10, 0.07);
}

body.theme-eon .panel-head,
body.theme-eon .section-title {
    border-bottom-color: #eadfe0;
    background: linear-gradient(90deg, #ffffff, #fff7f7);
}

body.theme-eon .data-table th,
body.theme-eon .calendar-head {
    color: #4a2528;
    border-color: #eadfe0;
    background: #fff4f4;
}

body.theme-eon .data-table td,
body.theme-eon .data-table th {
    border-color: #eee7e8;
}

body.theme-eon .data-table tbody tr:hover td {
    background: #fff9f9;
}

body.theme-eon .shell > .toolbar {
    flex-wrap: wrap;
    padding: 11px 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 9px 26px rgba(118, 0, 10, 0.06);
}

body.theme-eon .toolbar-title {
    color: #4a2528;
    font-weight: 850;
}

body.theme-eon .button,
body.theme-eon .icon-button {
    color: #4a2528;
    border-color: #e5dfe0;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: none;
    filter: none;
    text-shadow: none;
}

body.theme-eon .button:hover:not(:disabled),
body.theme-eon .icon-button:hover:not(:disabled),
body.theme-eon .button.ghost:hover:not(:disabled) {
    color: #9f1308;
    border-color: #e9aeb3;
    background: #fff0f1;
    box-shadow: none;
}

body.theme-eon .button:focus-visible,
body.theme-eon .icon-button:focus-visible {
    outline: 2px solid #9f1308;
    outline-offset: 2px;
    box-shadow: none;
}

body.theme-eon .button.primary:not(:disabled),
body.theme-eon .book-visit-button:not(:disabled) {
    color: #ffffff;
    border-color: #EA1B0A;
    background: #EA1B0A;
    box-shadow: none;
}

body.theme-eon .button.primary:hover:not(:disabled),
body.theme-eon .book-visit-button:hover:not(:disabled) {
    color: #ffffff;
    border-color: #9f1308;
    background: #9f1308;
}

body.theme-eon .button.bulk-edit-button:not(:disabled) {
    color: #9f1308;
    border-color: #e9aeb3;
    background: #fff0f1;
    box-shadow: none;
}

body.theme-eon .button.bulk-edit-button:hover:not(:disabled) {
    color: #ffffff;
    border-color: #9f1308;
    background: #9f1308;
    box-shadow: none;
}

body.theme-eon .button.danger:not(:disabled) {
    color: #ffffff;
    border-color: #a8000e;
    background: #a8000e;
    box-shadow: none;
}

body.theme-eon .button.danger:hover:not(:disabled) {
    color: #ffffff;
    border-color: #7f1018;
    background: #7f1018;
}

body.theme-eon .schedule-floating-action {
    color: #9f1308;
    border-color: #e9aeb3;
    background: #ffffff;
    box-shadow: none;
    filter: none;
    text-shadow: none;
}

body.theme-eon .schedule-floating-action:hover,
body.theme-eon .schedule-floating-action:focus-visible {
    color: #ffffff;
    border-color: #EA1B0A;
    background: #EA1B0A;
    box-shadow: none;
}

body.theme-eon .schedule-floating-action:focus-visible {
    outline: 2px solid #9f1308;
    outline-offset: 2px;
}

body.theme-eon .schedule-floating-action:active {
    border-color: #9f1308;
    background: #9f1308;
}

body.theme-eon .eon-schedule-theme-banner {
    min-height: 54px;
    margin: 0 0 14px;
    padding: 9px 12px;
    display: flex;
    align-items: center;
    gap: 11px;
    color: #ffffff;
    border: 1px solid #9f1308;
    border-radius: 14px;
    background: linear-gradient(110deg, #a8000e, #c8141f 66%, #9f1308);
    box-shadow: 0 12px 28px rgba(118, 0, 10, 0.14);
}

body.theme-eon .eon-schedule-theme-banner > img {
    width: 62px;
    height: 34px;
    padding: 7px;
    object-fit: contain;
    border-radius: 9px;
    background: #ffffff;
}

body.theme-eon .eon-schedule-theme-banner > span:nth-child(2) {
    min-width: 0;
    display: grid;
    gap: 2px;
}

body.theme-eon .eon-schedule-theme-banner strong {
    font-family: "EON Office Head", Arial, sans-serif;
    font-size: 17px;
    font-weight: 400;
}

body.theme-eon .eon-schedule-theme-banner small {
    color: #ffe9eb;
    font-size: 11px;
}

body.theme-eon .eon-schedule-theme-status {
    margin-left: auto;
    padding: 6px 9px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid rgba(255, 255, 255, 0.52);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
}

body.theme-eon .eon-schedule-theme-status svg {
    width: 13px;
    height: 13px;
}

body.theme-eon .engineer-schedule {
    overflow: hidden;
    border-color: #eadfe0;
    border-radius: 18px;
    box-shadow: var(--shadow);
}

body.theme-eon .engineer-schedule > .panel-head {
    min-height: 58px;
    padding: 13px 16px;
    border-bottom-color: #eadfe0;
    background: linear-gradient(90deg, #ffffff, #fff4f4);
}

body.theme-eon .engineer-schedule .panel-head h2,
body.theme-eon .schedule-region-select {
    color: #7f1018;
}

body.theme-eon .schedule-region-select {
    border-radius: 9px;
    background-color: transparent;
}

body.theme-eon .schedule-corner,
body.theme-eon .schedule-date {
    color: #4a2528;
    border-color: #eadfe0;
    background: #fff4f4;
}

body.theme-eon .schedule-date span {
    color: #786b6e;
}

body.theme-eon .schedule-date.today {
    color: #EA1B0A;
    background: #ffe8ea;
}

body.theme-eon .schedule-date.weekend,
body.theme-eon .schedule-cell.weekend {
    background: #fffaf4;
}

body.theme-eon .schedule-date.selected {
    box-shadow: inset 0 -4px 0 #EA1B0A;
}

body.theme-eon .schedule-engineer {
    color: #2e292b;
    border-color: #eadfe0;
    background: #ffffff;
}

body.theme-eon .schedule-engineer:hover,
body.theme-eon .schedule-engineer.is-filtered,
body.theme-eon .schedule-engineer.is-drop-target {
    color: #7f1018;
    background: #fff0f1;
    box-shadow: inset 0 0 0 2px #EA1B0A;
}

body.theme-eon .avatar-initials {
    color: #9f1308;
    background: #ffe8ea;
}

body.theme-eon .schedule-cell {
    border-color: #eee7e8;
    background: #ffffff;
}

body.theme-eon .schedule-cell.is-date-picked,
body.theme-eon .schedule-cell.is-drop-target {
    background: #fff0f1;
    box-shadow: inset 0 0 0 2px #EA1B0A;
}

body.theme-eon .schedule-cell.is-on-call {
    background: #fff3c7;
    box-shadow: inset 0 0 0 2px #d99a00;
}

body.theme-eon .schedule-cell.is-on-call.is-date-picked {
    background: #fff3c7;
    box-shadow: inset 0 0 0 2px #EA1B0A;
}

body.theme-eon .schedule-visit {
    border-radius: 10px;
    box-shadow: 0 5px 12px rgba(80, 0, 8, 0.08);
}

body.theme-eon .schedule-visit:not([style*="--tile-bg"]) {
    color: #65141a;
    border-color: #efb8bc;
    background: #fff0f1;
}

body.theme-eon .schedule-visit.done:not([style*="--tile-bg"]) {
    color: #696367;
    border-color: #ddd7d8;
    background: #f1eeee;
}

body.theme-eon .schedule-visit[style*="--tile-bg"] {
    color: var(--tile-fg);
    border-color: transparent;
    border-radius: 10px;
    background: var(--tile-bg);
    box-shadow: 0 5px 12px rgba(32, 20, 22, 0.08);
}

body.theme-eon .schedule-visit[style*="--tile-bg"] span,
body.theme-eon .schedule-visit[style*="--tile-bg"] small {
    color: var(--tile-muted);
}

body.theme-eon input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
body.theme-eon select,
body.theme-eon textarea {
    color: var(--field-text);
    border-color: #ddd6d7;
    background: var(--field-bg);
    color-scheme: light;
}

body.theme-eon input::placeholder,
body.theme-eon textarea::placeholder {
    color: var(--field-placeholder);
    opacity: 1;
}

body.theme-eon input:disabled,
body.theme-eon select:disabled,
body.theme-eon textarea:disabled,
body.theme-eon .rate-grid input:disabled {
    color: var(--field-disabled-text);
    background: var(--field-disabled-bg);
    opacity: 1;
}

body.theme-eon select option {
    color: var(--field-text);
    background: var(--field-bg);
}

body.theme-eon input:-webkit-autofill,
body.theme-eon input:-webkit-autofill:hover,
body.theme-eon input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--field-text);
    box-shadow: 0 0 0 1000px var(--field-bg) inset;
}

body.theme-eon input:focus,
body.theme-eon select:focus,
body.theme-eon textarea:focus {
    border-color: #EA1B0A;
    box-shadow: 0 0 0 3px rgba(234, 27, 10, 0.12);
}

body.theme-eon dialog,
body.theme-eon .dialog-form {
    color: var(--ink);
    border-color: #e6ddde;
    border-radius: 18px;
    background: #ffffff;
}

body.theme-eon .dialog-form > header {
    border-bottom-color: #eadfe0;
    background: #fff4f4;
}

body.theme-eon #bulk-edit-visits-dialog input[type="time"] {
    color-scheme: light;
}

body.theme-eon #bulk-edit-visits-dialog input[type="time"]::-webkit-calendar-picker-indicator {
    filter: none;
}

body.theme-eon .sidebar-online-location,
body.theme-eon .sidebar-account-action.is-enabled {
    color: var(--success) !important;
}

body.theme-eon .status-pill.danger {
    color: var(--danger);
    border-color: #e9aeb3;
    background: #fff0f1;
    box-shadow: none;
}

body.theme-eon .fp-ref {
    color: var(--ink);
}

body.theme-eon .notification-badge,
body.theme-eon .notification-count-pill,
body.theme-eon .toast,
body.theme-eon .flash {
    box-shadow: none;
}

@media (max-width: 980px) {
    body.theme-eon .sidebar {
        border-right: 0;
        border-bottom: 1px solid var(--line);
        box-shadow: 0 9px 24px rgba(90, 0, 8, 0.08);
    }

    body.theme-eon .brand {
        padding: 0;
    }

    body.theme-eon .brand-logo.is-eon-default {
        width: min(112px, 30vw);
        max-height: 38px;
    }

    body.theme-eon .brand-logo:not(.is-eon-default) {
        width: min(var(--nav-logo-width, 222px), 48vw);
        max-height: 72px;
    }
}

@media (max-width: 700px) {
    body.theme-eon .topbar {
        padding: 14px 15px;
        border-radius: 14px;
    }

    body.theme-eon .topbar h1 {
        font-size: 25px;
    }

    body.theme-eon .eon-schedule-theme-banner {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    body.theme-eon .eon-schedule-theme-status {
        margin-left: 73px;
    }
}

/* Job purchase requests */
.purchase-request-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 14px;
    padding: 12px 0;
    color: var(--muted);
    font-size: 13px;
}

.purchase-request-toolbar .actions,
.purchase-request-toolbar form,
.purchase-requests-table .actions,
.purchase-requests-table .actions form {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

.purchase-request-form {
    display: grid;
    grid-template-columns: minmax(220px, 1.6fr) minmax(180px, 1fr) minmax(130px, .55fr);
    grid-template-areas:
        "supplier cost-code amount"
        "description address address"
        "contact quote submit";
    gap: 10px 12px;
    align-items: end;
    margin: 0 14px;
    padding: 14px 0 16px;
    border-top: 1px solid var(--line);
}

.purchase-requests-panel {
    margin-top: 14px;
    overflow: hidden;
}

.purchase-requests-panel > summary.section-title {
    margin-top: 0;
}

.purchase-request-list-title {
    margin: 0;
    padding: 14px 14px 9px;
    border-bottom: 1px solid var(--line);
    font-size: 14px;
}

.purchase-request-local-title {
    border-top: 1px solid var(--line);
}

.focalpoint-purchase-requests-table {
    min-width: 920px;
}

.purchase-request-form label {
    min-width: 0;
    margin: 0;
}

.purchase-request-form select,
.purchase-request-form input,
.purchase-request-form textarea {
    width: 100%;
    max-width: none;
}

.purchase-request-supplier { grid-area: supplier; }
.purchase-request-cost-code { grid-area: cost-code; }
.purchase-request-amount { grid-area: amount; }
.purchase-request-description { grid-area: description; }
.purchase-request-address { grid-area: address; }
.purchase-request-contact { grid-area: contact; }
.purchase-request-quote { grid-area: quote; }

.purchase-request-form textarea {
    min-height: 66px;
    resize: vertical;
}

.purchase-request-submit {
    grid-area: submit;
    align-self: end;
    justify-self: center;
    min-height: 40px;
    margin-bottom: 1px;
}

.purchase-requests-table td {
    vertical-align: top;
}

.purchase-requests-table td > small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    white-space: normal;
}

@media (max-width: 900px) {
    .purchase-request-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
            "supplier cost-code"
            "amount contact"
            "description address"
            "quote submit";
    }
}

@media (max-width: 620px) {
    .purchase-request-toolbar {
        align-items: flex-start;
    }

    .purchase-request-form {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "supplier"
            "cost-code"
            "amount"
            "description"
            "address"
            "contact"
            "quote"
            "submit";
    }

    .purchase-request-submit {
        justify-self: center;
    }
}

/* Client visit diary email settings */
.client-visit-settings-panel {
    overflow: hidden;
}

.client-visit-schedule-form,
.client-visit-settings-body {
    min-width: 0;
}

.client-visit-primary-options {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 18px;
}

.client-visit-primary-options .check {
    margin: 0;
    width: auto;
}

.client-visit-schedule-grid {
    display: grid;
    grid-template-columns: repeat(6, max-content);
    align-items: start;
    gap: 10px 14px;
    justify-content: start;
}

.client-visit-schedule-grid > label {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
    width: auto;
    min-width: 0;
    margin: 0;
}

.client-visit-schedule-grid .client-visit-schedule-field {
    color: #3d4650;
    font-size: 13px;
    font-weight: 400;
}

.client-visit-schedule-grid select {
    width: 140px;
    min-height: 36px;
}

.client-visit-schedule-grid > label > input {
    width: 84px;
    min-height: 36px;
}

.client-visit-schedule-grid small {
    color: var(--muted);
    font-size: 11px;
}

.client-visit-option-groups {
    display: grid;
    grid-template-columns: minmax(220px, 1fr);
    gap: 12px;
    max-width: 420px;
}

.client-visit-option-groups fieldset,
.client-visit-customer-triggers,
.client-visit-group-row fieldset,
.job-client-recipient-grid fieldset {
    min-width: 0;
    margin: 0;
    padding: 9px 10px 10px;
    border: 1px solid var(--line);
    border-radius: 6px;
}

.client-visit-option-groups legend,
.client-visit-customer-triggers legend,
.client-visit-group-row legend,
.job-client-recipient-grid legend {
    padding: 0 5px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
}

.client-visit-option-groups .settings-check-grid {
    grid-template-columns: repeat(3, minmax(130px, 1fr));
    gap: 6px 10px;
}

.client-visit-option-groups .settings-check-grid.compact {
    grid-template-columns: 1fr;
}

.client-visit-customer-triggers {
    display: grid;
    gap: 8px;
}

.client-visit-customer-triggers .settings-check-grid {
    grid-template-columns: repeat(3, minmax(140px, 1fr));
    gap: 6px 12px;
}

.client-visit-customer-triggers > small {
    color: var(--muted);
    font-size: 11px;
}

.client-visit-directory {
    display: grid;
    gap: 12px;
    padding: 14px;
    border-top: 1px solid var(--line);
}

.client-visit-directory-head {
    align-items: end;
}

.client-visit-directory-head > div {
    min-width: 0;
}

.client-visit-directory-head form,
.client-visit-directory-head label {
    display: grid;
    gap: 4px;
    width: auto;
    min-width: min(100%, 260px);
    margin: 0;
}

.client-visit-directory-head select {
    width: min(360px, 100%);
    min-height: 36px;
}

.client-visit-directory-head .client-visit-directory-save-form {
    display: block;
    min-width: 0;
}

.client-visit-directory-save-form .button {
    white-space: nowrap;
}

.client-visit-directory-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    transition: opacity 120ms ease;
}

.client-visit-directory[aria-busy="true"] .client-visit-directory-grid {
    opacity: 0.55;
    pointer-events: none;
}

.client-visit-directory-feedback {
    color: var(--danger);
    font-size: 12px;
    font-weight: 700;
}

.client-visit-directory-column,
.client-visit-contact-list,
.client-visit-group-list {
    display: grid;
    align-content: start;
    gap: 8px;
    min-width: 0;
}

.client-visit-contact-row {
    display: grid;
    grid-template-columns: minmax(120px, 0.75fr) minmax(180px, 1.25fr) auto auto;
    align-items: end;
    gap: 8px;
    min-width: 0;
    padding: 8px 0;
    border-top: 1px solid var(--line);
}

.client-visit-contact-row.is-new {
    grid-template-columns: minmax(120px, 0.75fr) minmax(180px, 1.25fr) auto;
    border-top: 0;
    padding-top: 0;
}

.client-visit-contact-row > label,
.client-visit-group-row > label {
    min-width: 0;
    margin: 0;
}

.client-visit-contact-row input[type="text"],
.client-visit-contact-row input[type="email"],
.client-visit-contact-row input:not([type]) {
    width: 100%;
    min-height: 36px;
}

.client-visit-active-field {
    display: grid;
    grid-template-rows: auto 36px;
    gap: 5px;
    justify-items: center;
    align-items: center;
    align-self: end;
    min-width: 54px;
    color: #3d4650;
    font-size: 13px;
    font-weight: 600;
}

.client-visit-active-field > span {
    line-height: 1.2;
}

.client-visit-active-field .check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
}

.client-visit-active-field input[type="checkbox"] {
    margin: 0;
}

.client-visit-group-row {
    display: grid;
    grid-template-columns: minmax(130px, 1fr) minmax(120px, 0.8fr) auto auto;
    align-items: end;
    gap: 8px;
    min-width: 0;
    padding: 8px 0;
    border-top: 1px solid var(--line);
}

.client-visit-group-row.is-new {
    grid-template-columns: minmax(130px, 1fr) minmax(120px, 0.8fr) auto;
    border-top: 0;
    padding-top: 0;
}

.client-visit-group-row > label > input:not([type="checkbox"]),
.client-visit-group-row > label > select {
    width: 100%;
    min-height: 36px;
}

.client-visit-group-row > fieldset {
    grid-column: 1 / -1;
    grid-row: 3;
}

.client-visit-group-row > .client-visit-all-jobs-field {
    align-self: center;
    grid-column: 1 / -1;
    grid-row: 2;
    margin: 0;
}

.client-visit-group-row > .client-visit-active-field {
    grid-column: 3;
    grid-row: 1;
}

.client-visit-group-row > .client-visit-row-actions {
    grid-column: 4;
    grid-row: 1;
}

.client-visit-group-row.is-new > .client-visit-row-actions {
    grid-column: 3;
}

.client-visit-member-options {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 12px;
    min-height: 22px;
}

.client-visit-member-options .check {
    width: auto;
    margin: 0;
}

.client-visit-row-actions,
.job-client-attendance-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.client-visit-row-actions form {
    margin: 0;
}

.client-visit-row-actions .fire-button:not(:disabled) {
    color: #c45112;
    border-color: color-mix(in srgb, #c45112 45%, var(--line));
}

.client-visit-row-actions .fire-button:not(:disabled):hover {
    color: #fff;
    background: #c45112;
    border-color: #c45112;
}

.client-visit-contact-row.is-muted,
.client-visit-group-row.is-muted {
    opacity: 0.65;
}

.info-grid .info-card-form.job-client-attendance-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 10px;
}

.job-client-attendance-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}

.job-client-attendance-head > div {
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.info-grid .job-client-attendance-head span,
.info-grid .job-client-attendance-head strong {
    display: block;
    margin: 0;
}

.job-client-attendance-settings {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.job-client-auto-toggle {
    width: max-content;
    max-width: 100%;
    margin: 0;
}

.job-client-recipient-dropdowns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.job-client-recipient-dropdown {
    position: relative;
    min-width: 0;
}

.job-client-recipient-dropdown > summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 16px;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 7px 9px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--panel);
    cursor: pointer;
    list-style: none;
}

.job-client-recipient-dropdown > summary::-webkit-details-marker {
    display: none;
}

.info-grid .job-client-recipient-dropdown > summary span,
.info-grid .job-client-recipient-dropdown > summary small {
    display: block;
    margin: 0;
    min-width: 0;
}

.info-grid .job-client-recipient-dropdown > summary span {
    color: var(--ink);
    font-size: 12px;
    font-weight: 700;
}

.job-client-recipient-dropdown > summary small {
    color: var(--muted);
    font-size: 11px;
    white-space: nowrap;
}

.job-client-recipient-dropdown > summary svg {
    width: 15px;
    height: 15px;
    color: var(--muted);
    transition: transform 0.16s ease;
}

.job-client-recipient-dropdown[open] > summary {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent);
}

.job-client-recipient-dropdown[open] > summary svg {
    transform: rotate(180deg);
}

.info-grid .job-client-recipient-menu {
    position: absolute;
    z-index: 45;
    top: calc(100% + 5px);
    left: 0;
    display: grid;
    align-content: start;
    gap: 6px;
    width: min(360px, calc(100vw - 48px));
    min-width: 100%;
    max-height: 240px;
    overflow-y: auto;
    padding: 9px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
    box-shadow: 0 12px 30px rgba(14, 23, 31, 0.2);
}

.job-client-recipient-dropdown:last-child .job-client-recipient-menu {
    right: 0;
    left: auto;
}

.info-grid .job-client-recipient-option {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 7px;
    width: 100%;
    margin: 0;
}

.info-grid .job-client-recipient-option > span {
    display: grid;
    gap: 2px;
    margin: 0;
    min-width: 0;
    color: inherit;
    font-size: inherit;
}

.info-grid .job-client-recipient-option strong,
.info-grid .job-client-recipient-option small {
    display: block;
    margin: 0;
    overflow-wrap: anywhere;
}

.info-grid .job-client-recipient-option small {
    color: var(--muted);
    font-size: 11px;
}

.job-client-recipient-option.is-disabled {
    opacity: 0.55;
}

.job-client-readonly-recipients {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0;
    border: 0;
    background: transparent;
}

.info-grid .job-client-readonly-recipients span {
    margin: 0;
    padding: 4px 7px;
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--ink);
}

@media (max-width: 900px) {
    .client-visit-schedule-grid {
        grid-template-columns: repeat(3, max-content);
    }

    .client-visit-directory-grid,
    .client-visit-option-groups {
        grid-template-columns: minmax(0, 1fr);
    }

    .job-client-recipient-dropdowns {
        grid-template-columns: minmax(0, 1fr);
    }

    .job-client-recipient-dropdown .job-client-recipient-menu {
        right: auto;
        left: 0;
    }

    .client-visit-contact-row,
    .client-visit-contact-row.is-new {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .client-visit-row-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 620px) {
    .client-visit-schedule-grid,
    .client-visit-contact-row,
    .client-visit-contact-row.is-new,
    .client-visit-group-row,
    .client-visit-group-row.is-new,
    .job-client-recipient-dropdowns {
        grid-template-columns: minmax(0, 1fr);
    }

    .client-visit-directory-head {
        flex-direction: column;
        align-items: stretch;
    }

    .client-visit-group-row > fieldset,
    .client-visit-group-row > .client-visit-all-jobs-field,
    .client-visit-group-row > .client-visit-active-field,
    .client-visit-group-row > .client-visit-row-actions,
    .client-visit-group-row.is-new > .client-visit-row-actions {
        grid-column: 1;
        grid-row: auto;
    }

    .client-visit-option-groups .settings-check-grid,
    .client-visit-customer-triggers .settings-check-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

body.theme-dark {
    --bg: #111820;
    --panel: #18222c;
    --popup: #1b2a37;
    --ink: #eef4f8;
    --muted: #9fb0bd;
    --line: #2d3b46;
    --accent-ink: #ffffff;
    --danger: #ff6b5f;
    --success: #5bd47b;
    --warn: #f7c948;
    --link-blue: #60a5fa;
    --soft: #20313a;
    --field-bg: #0f1720;
    --field-text: #eef4f8;
    --field-placeholder: #9fb0bd;
    --field-disabled-bg: #18222c;
    --field-disabled-text: #9fb0bd;
    --shadow: 0 10px 28px rgba(0, 0, 0, 0.32);
}

body.theme-vivid-dark {
    --bg: #000000;
    --panel: #05070d;
    --popup: #060d20;
    --ink: #f4f7ff;
    --muted: #99a5ff;
    --line: #2732ff;
    --accent-ink: #000000;
    --danger: #ff2079;
    --success: #39ff14;
    --warn: #fff200;
    --link-blue: #00c2ff;
    --soft: #090024;
    --field-bg: #02030a;
    --field-text: #f4f7ff;
    --field-placeholder: #aeb7ff;
    --field-disabled-bg: #090024;
    --field-disabled-text: #99a5ff;
    --shadow: 0 0 22px color-mix(in srgb, var(--accent) 42%, transparent);
}

* {
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--link-blue) 58%, var(--line)) transparent;
}

*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    border: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--link-blue) 58%, var(--line));
}

*::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--link-blue) 78%, var(--accent));
}

*::-webkit-scrollbar-button,
*::-webkit-scrollbar-corner {
    width: 0;
    height: 0;
    background: transparent;
}
body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    display: grid;
    grid-template-columns: 238px minmax(0, 1fr);
    min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.muted { color: var(--muted); }

.sidebar {
    background: #19232b;
    color: #e9eef2;
    padding: 18px 14px;
    position: sticky;
    top: 0;
    height: 100vh;
    z-index: 100;
}

.brand {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 6px 8px 18px;
}

.brand-logo {
    display: block;
    width: var(--nav-logo-width, 222px);
    max-width: 100%;
    max-height: 120px;
    height: auto;
    object-fit: contain;
}

.nav { display: grid; gap: 4px; }
.nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    color: #cbd5dc;
}
.nav a.active, .nav a:hover { background: #26343e; color: #fff; }
.nav svg, .button svg, .icon-button svg, .server-pill svg { width: 18px; height: 18px; }

.sidebar-user {
    margin-top: 18px;
    padding: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    display: grid;
    gap: 8px;
    color: #dce6ec;
    font-size: 13px;
}

.sidebar-user-summary {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 46px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    min-width: 0;
}

.sidebar-user-summary:hover,
.sidebar-user-summary[aria-expanded="true"] {
    color: #ffffff;
}

.sidebar-user-summary div {
    flex: 1;
    min-width: 0;
}

.sidebar-user-summary svg {
    width: 16px;
    height: 16px;
    color: #aab6bf;
    transition: transform 140ms ease;
}

.sidebar-user-summary[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

.sidebar-user-summary strong,
.sidebar-user-summary small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-user small {
    color: #aab6bf;
}

.sidebar-online-users {
    display: grid;
    gap: 6px;
    margin-top: 2px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.sidebar-online-users h3 {
    margin: 0 0 2px;
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.sidebar-online-users p {
    margin: 0;
    color: #aab6bf;
    font-size: 12px;
}

.sidebar-online-user {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    min-width: 0;
}

.sidebar-online-user strong,
.sidebar-online-user small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-online-user strong {
    color: #f7fbff;
    font-size: 12px;
}

.sidebar-online-user small {
    color: #9fc0d2;
    font-size: 11px;
}

.sidebar-online-location {
    color: #b7f7cb !important;
}

.sidebar-online-user.is-recent .online-dot {
    background: #facc15;
}

.sidebar-online-user.is-recent .sidebar-presence-label {
    color: #facc15;
}

.sidebar-online-user.is-active .sidebar-presence-label {
    color: #5bd47b;
}

.sidebar-online-avatar-wrap {
    position: relative;
    display: inline-grid;
}

.avatar-online {
    width: 28px;
    height: 28px;
    font-size: 12px;
}

.online-dot {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 9px;
    height: 9px;
    border: 2px solid #19232b;
    border-radius: 50%;
    background: #5bd47b;
}

.sidebar-account-menu {
    display: grid;
    gap: 3px;
    padding: 6px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.18);
    z-index: 1000;
}

.sidebar-account-menu.is-account-menu-overlay,
.sidebar-account-menu:popover-open {
    display: grid;
    grid-auto-rows: max-content;
    align-content: start;
    justify-items: stretch;
    position: fixed !important;
    inset: auto auto auto auto !important;
    margin: 0 !important;
    z-index: 2147483000 !important;
    width: min(254px, calc(100vw - 16px));
    height: auto !important;
    min-height: 0 !important;
    max-height: min(420px, calc(100svh - 16px));
    overflow: auto;
    background: #19232b;
    color: #e9eef2;
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow: 0 20px 55px rgba(0, 0, 0, 0.72);
}

.sidebar-account-menu[hidden] {
    display: none;
}

.sidebar-account-menu a,
.sidebar-account-action,
.sidebar-account-role-switch label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.26);
    border-radius: 7px;
    background: transparent;
    color: #dce6ec;
    font-weight: 700;
    text-align: left;
}

.sidebar-account-menu a span:nth-child(2),
.sidebar-account-action span,
.sidebar-account-role-switch span {
    flex: 1 1 auto;
}

.sidebar-account-role-switch {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    align-items: center;
}

.sidebar-account-role-switch label {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    column-gap: 6px;
    min-width: 0;
    box-sizing: border-box;
}

.sidebar-account-role-switch select {
    grid-column: 1 / -1;
    min-width: 0;
    width: 100%;
    max-width: none;
    height: 32px;
    padding: 2px 24px 3px 8px;
    line-height: 1.2;
    border-radius: 7px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: #0e171f;
    color: #ffffff;
    box-sizing: border-box;
    font-weight: 800;
    font-size: 12px;
    justify-self: stretch;
    text-align: center;
    text-align-last: center;
}

.notification-badge,
.notification-count-pill {
    display: inline-grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: #ef2b2d;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.72);
    box-shadow: 0 0 0 2px rgba(239, 43, 45, 0.26), 0 0 14px rgba(239, 43, 45, 0.45);
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
}

.notification-badge.is-empty,
.notification-count-pill.is-empty {
    display: none;
}

.sidebar-notification-badge {
    position: absolute;
    left: 28px;
    top: -4px;
    z-index: 2;
}

.notification-count-pill {
    margin-left: auto;
}

.invoice-status-toolbar .button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.invoice-status-count {
    margin-left: 0;
}

.sidebar-account-menu a:hover,
.sidebar-account-action:hover {
    background: #26343e;
    color: #ffffff;
}

.sidebar-account-action.is-enabled {
    color: #b7f7cb;
}

.sidebar-avatar-form {
    display: grid;
    gap: 8px;
    padding: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.sidebar-avatar-file {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 8px;
    border-radius: 7px;
    color: #dce6ec;
    font-weight: 700;
    overflow: hidden;
}

.sidebar-avatar-file:hover {
    background: #26343e;
    color: #ffffff;
}

.sidebar-avatar-file input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.sidebar-avatar-form .button {
    min-height: 34px;
    color: #dce6ec;
    border-color: rgba(255, 255, 255, 0.12);
}

.sidebar-avatar-form .button:hover {
    background: #26343e;
    color: #ffffff;
}

.sidebar-avatar-cropper {
    grid-template-columns: 58px minmax(0, 1fr);
    padding: 8px;
    background: rgba(0, 0, 0, 0.14);
    border-color: rgba(255, 255, 255, 0.12);
}

.sidebar-avatar-cropper canvas {
    width: 58px;
    height: 58px;
}

.sidebar-avatar-cropper label {
    color: #aab6bf;
}

.sidebar-account-menu svg {
    width: 15px;
    height: 15px;
}

.shell {
    min-width: 0;
    padding: 22px;
}

.topbar {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: start;
    margin-bottom: 18px;
}
.topbar h1 { margin: 0; font-size: 28px; line-height: 1.15; }
.topbar p { margin: 4px 0 0; color: var(--muted); }

.topbar-right {
    display: flex;
    align-items: center;
    gap: 14px;
}

.owner-view-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    margin: -4px 0 18px;
    padding: 8px 10px 8px 12px;
    border-left: 4px solid var(--accent);
    border-radius: 6px;
    background: color-mix(in srgb, var(--accent) 12%, var(--panel));
    color: var(--text);
}

.owner-view-banner > svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    color: var(--accent);
}

.owner-view-banner > span:first-of-type {
    min-width: 0;
    overflow-wrap: anywhere;
}

.owner-view-readonly,
.owner-account-mode {
    margin-left: auto;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.owner-view-banner form {
    margin: 0;
}

.owner-view-banner .button {
    min-height: 34px;
    white-space: nowrap;
}

.top-logo-link {
    display: block;
    line-height: 0;
}

.top-logo {
    width: min(var(--client-logo-width, 390px), 34vw);
    height: auto;
    max-height: min(132px, calc(var(--client-logo-width, 390px) * .34));
    display: block;
    object-fit: contain;
}

.server-pill {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
    color: var(--muted);
    white-space: nowrap;
}

.count-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
    color: var(--muted);
    font-weight: 700;
    white-space: nowrap;
}

.flash-stack { display: grid; gap: 8px; margin-bottom: 14px; }
.flash {
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: var(--panel);
}
.flash.success { border-color: #9bd3ad; background: #effaf2; color: #1f6b35; }
.flash.error { border-color: #f0a6a0; background: #fff1f0; color: var(--danger); }
.flash.warning { border-color: #facc15; background: #fffbeb; color: #854d0e; }

.app-toast-stack {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 100000;
    display: grid;
    gap: 10px;
    width: min(360px, calc(100vw - 28px));
    pointer-events: none;
}
.app-toast {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
    align-items: start;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid rgba(125, 211, 252, 0.45);
    background: color-mix(in srgb, var(--panel) 88%, #0b2b4a);
    color: var(--text);
    box-shadow: 0 0 24px rgba(56, 189, 248, 0.22), 0 18px 36px rgba(0, 0, 0, 0.28);
    pointer-events: auto;
    transform: translateY(10px);
    opacity: 0;
    transition: opacity 180ms ease, transform 180ms ease;
}
.app-toast.is-visible {
    transform: translateY(0);
    opacity: 1;
}
.app-toast.is-leaving {
    transform: translateY(10px);
    opacity: 0;
}
.app-toast-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: #071e34;
    color: #7dd3fc;
    border: 1px solid rgba(125, 211, 252, 0.55);
}
.app-toast-content {
    min-width: 0;
    cursor: pointer;
}
.app-toast-title {
    font-weight: 800;
    margin-bottom: 3px;
}
.app-toast-body {
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.35;
}
.app-toast-close {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
}
.app-toast-close:hover {
    color: var(--text);
    border-color: rgba(255, 255, 255, 0.35);
}
@media (max-width: 700px) {
    .owner-view-banner {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .owner-view-readonly,
    .owner-account-mode {
        margin-left: 28px;
    }

    .owner-view-banner form {
        margin-left: auto;
    }

    .app-toast-stack {
        right: 10px;
        bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        width: calc(100vw - 20px);
    }
}

.notification-history-panel {
    max-width: 920px;
}

.notification-list {
    display: grid;
    gap: 8px;
}

.notification-item {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: color-mix(in srgb, var(--panel) 94%, var(--soft));
}

.notification-item.is-unread {
    border-color: #ef2b2d;
    background: color-mix(in srgb, var(--panel) 84%, #ef2b2d 16%);
    box-shadow: inset 3px 0 0 #ef2b2d;
}

.notification-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--soft);
    color: var(--accent);
}

.notification-item.is-unread .notification-icon {
    background: #ef2b2d;
    color: #ffffff;
}

.notification-content {
    min-width: 0;
    display: grid;
    gap: 7px;
}

.notification-content header {
    display: flex;
    gap: 10px;
    align-items: baseline;
    justify-content: space-between;
    min-width: 0;
}

.notification-content strong,
.notification-content p {
    min-width: 0;
    overflow-wrap: anywhere;
}

.notification-content p {
    margin: 0;
    color: var(--muted);
}

.notification-content time {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 12px;
}

.notification-content .button {
    justify-self: start;
}

.chat-layout {
    display: grid;
    grid-template-columns: minmax(220px, 280px) minmax(360px, 1fr) minmax(210px, 260px);
    height: calc(100vh - 140px);
    height: calc(100dvh - 140px);
    min-height: 520px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
    box-shadow: var(--shadow);
}

.chat-sidebar,
.chat-panel,
.chat-member-sidebar {
    min-width: 0;
}

.chat-sidebar {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-right: 1px solid var(--line);
    background: color-mix(in srgb, var(--panel) 88%, var(--bg) 12%);
}

.chat-workspace-head {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 64px;
    padding: 12px;
    border-bottom: 1px solid var(--line);
}

.chat-workspace-icon {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent) 24%, var(--panel));
    color: var(--accent);
}

.chat-workspace-head h2,
.chat-workspace-head p,
.chat-member-head h2 {
    margin: 0;
}

.chat-workspace-head p,
.chat-member-head span,
.chat-empty-note {
    color: var(--muted);
}

.chat-level-card {
    display: grid;
    gap: 8px;
    margin: 10px;
    padding: 10px;
    border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
    border-radius: 8px;
    background: color-mix(in srgb, var(--accent) 12%, var(--panel));
}

.chat-level-card div:first-child {
    display: grid;
    gap: 2px;
}

.chat-level-card span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.chat-level-card strong {
    color: var(--ink);
    font-size: 16px;
}

.chat-level-card small {
    color: var(--muted);
    font-size: 12px;
}

.chat-level-progress {
    height: 8px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
    border-radius: 999px;
    background: color-mix(in srgb, var(--panel) 78%, var(--bg));
}

.chat-level-progress span {
    display: block;
    width: var(--progress, 0%);
    min-width: 4px;
    max-width: 100%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--accent), #7dd3fc);
}

.chat-layout .chat-level-card {
    display: none;
}

.chat-sidebar-section {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-bottom: 1px solid var(--line);
}

.chat-sidebar-section:first-of-type {
    flex: 1 1 auto;
}

.chat-sidebar-section h3 {
    margin: 0;
    padding: 10px 12px 0;
    color: color-mix(in srgb, var(--ink) 78%, var(--muted));
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.chat-room-list {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 3px;
    min-height: 0;
    overflow: auto;
    padding: 10px 8px;
}

.chat-dm-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 8px;
}

.chat-dm-button {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    width: 100%;
    min-height: 42px;
    padding: 6px 8px;
    border: 1px solid transparent;
    border-radius: 6px;
    color: color-mix(in srgb, var(--ink) 80%, var(--muted));
    text-align: left;
    background: transparent;
    cursor: pointer;
    text-decoration: none;
}

.chat-dm-button:hover,
.chat-dm-button:focus-visible,
.chat-dm-button.active {
    border-color: color-mix(in srgb, var(--accent) 48%, var(--line));
    color: var(--ink);
    background: color-mix(in srgb, var(--accent) 12%, var(--panel));
}

.chat-dm-button strong,
.chat-dm-button small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-dm-button small {
    color: var(--muted);
    font-size: 12px;
}

.chat-dm-button strong {
    display: flex;
    align-items: center;
    gap: 6px;
}

.chat-user-rank-inline {
    flex: 0 0 auto;
    color: color-mix(in srgb, var(--accent) 70%, var(--muted));
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
}

.chat-dm-avatar {
    width: 34px;
    height: 34px;
    font-size: 13px;
}

.chat-sidebar-bottom {
    order: 10;
    display: flex;
    flex: 0 1 auto;
    flex-direction: column;
    min-height: 148px;
    max-height: min(56%, 600px);
    margin-top: auto;
    border-top: 1px solid var(--line);
}

.chat-dm-section {
    flex: 0 1 var(--chat-dm-split, 220px);
    min-height: 86px;
    border-bottom: 0;
}

.chat-sidebar-resizer {
    flex: 0 0 9px;
    width: 100%;
    min-height: 9px;
    padding: 0;
    border: 0;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
    background:
        linear-gradient(
            to right,
            transparent,
            color-mix(in srgb, var(--line) 68%, transparent) 34%,
            color-mix(in srgb, var(--line) 68%, transparent) 66%,
            transparent
        );
    cursor: row-resize;
}

.chat-sidebar-resizer:hover,
.chat-sidebar-resizer:focus-visible,
.chat-sidebar-bottom.is-resizing .chat-sidebar-resizer {
    border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
    background:
        linear-gradient(
            to right,
            transparent,
            color-mix(in srgb, var(--accent) 70%, var(--line)) 34%,
            color-mix(in srgb, var(--accent) 70%, var(--line)) 66%,
            transparent
        );
    outline: 0;
}

.chat-rank-section {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column-reverse;
    min-height: 0;
    border-bottom: 0;
}

.chat-rank-section summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    color: color-mix(in srgb, var(--ink) 78%, var(--muted));
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
    list-style: none;
}

.chat-rank-section summary::-webkit-details-marker {
    display: none;
}

.chat-rank-section summary svg {
    width: 14px;
    height: 14px;
    transition: transform .16s ease;
}

.chat-rank-section[open] summary svg {
    transform: rotate(-180deg);
}

.chat-rank-list {
    display: grid;
    gap: 3px;
    max-height: 238px;
    margin: 0;
    overflow: auto;
    padding: 8px;
    list-style: none;
}

.chat-create-drawer {
    order: 9;
}

.chat-rank-list li {
    display: grid;
    grid-template-columns: 24px 30px minmax(0, 1fr);
    gap: 7px;
    align-items: center;
    width: 100%;
    min-height: 40px;
    padding: 6px 7px;
    border: 1px solid transparent;
    border-radius: 6px;
}

.chat-rank-list li.is-current {
    border-color: color-mix(in srgb, var(--accent) 48%, var(--line));
    background: color-mix(in srgb, var(--accent) 13%, var(--panel));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent);
}

.chat-rank-position {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    color: var(--muted);
    background: color-mix(in srgb, var(--soft) 70%, transparent);
    font-size: 12px;
    font-weight: 900;
}

.chat-rank-avatar {
    width: 30px;
    height: 30px;
    font-size: 12px;
}

.chat-rank-list strong,
.chat-rank-list small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-rank-icon {
    margin-right: 4px;
}

.chat-rank-list small {
    color: var(--muted);
    font-size: 11px;
}

.chat-rank-empty {
    grid-template-columns: 1fr !important;
    color: var(--muted);
    font-size: 13px;
}

.chat-room-link {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    min-height: 42px;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 6px;
    color: color-mix(in srgb, var(--ink) 76%, var(--muted));
    text-decoration: none;
    background: transparent;
}

.chat-room-link svg {
    width: 17px;
    height: 17px;
    color: var(--muted);
}

.chat-room-link.active,
.chat-room-link:hover {
    border-color: color-mix(in srgb, var(--accent) 48%, var(--line));
    background: color-mix(in srgb, var(--accent) 13%, var(--panel));
    color: var(--ink);
}

.chat-room-link.active strong,
.chat-room-link:hover strong {
    color: var(--ink);
}

.chat-room-link strong,
.chat-room-link small,
.chat-member-row strong,
.chat-member-row small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-room-link strong {
    color: color-mix(in srgb, var(--ink) 88%, var(--muted));
}

.chat-room-link small,
.chat-member-row small {
    color: var(--muted);
    font-size: 12px;
}

.chat-create-drawer {
    flex: 0 0 auto;
    border-top: 1px solid var(--line);
}

.chat-create-drawer > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 10px 12px;
    color: var(--accent);
    font-weight: 800;
    cursor: pointer;
    list-style: none;
}

.chat-create-drawer > summary::-webkit-details-marker {
    display: none;
}

.chat-create-form {
    display: grid;
    gap: 9px;
    padding: 0 12px 12px;
}

.chat-member-picker {
    display: grid;
    gap: 6px;
    max-height: 220px;
    overflow: auto;
    padding: 8px 0 0;
}

.chat-member-picker label {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 4px 8px;
    align-items: center;
    padding: 5px 0;
}

.chat-member-picker small {
    grid-column: 2;
    color: var(--muted);
}

.chat-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    background: color-mix(in srgb, var(--panel) 96%, var(--bg) 4%);
}

.chat-room-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 64px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    background: var(--panel);
}

.chat-room-title {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.chat-mobile-room-back {
    display: none;
    flex: 0 0 auto;
}

.chat-room-notification-button {
    width: 38px;
    height: 36px;
}

.chat-room-title > svg {
    width: 22px;
    height: 22px;
    color: var(--muted);
    flex: 0 0 auto;
}

.chat-room-title h2,
.chat-room-title p {
    margin: 0;
    min-width: 0;
}

.chat-room-title h2 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-room-title p {
    color: var(--muted);
    font-size: 13px;
}

.chat-messages {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px;
    min-height: 0;
    overscroll-behavior: contain;
    overflow: auto;
    padding: 14px 18px;
}

.chat-message {
    position: relative;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
}

.chat-message:hover,
.chat-message.is-mine {
    background: color-mix(in srgb, var(--soft) 72%, transparent);
}

.chat-message.is-level-up {
    border: 1px solid color-mix(in srgb, var(--accent) 52%, var(--line));
    background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 18%, var(--panel)), color-mix(in srgb, var(--soft) 78%, transparent));
}

.chat-message.is-level-up p {
    color: var(--ink);
    font-weight: 800;
}

.chat-message-avatar {
    width: 40px;
    height: 40px;
    font-size: 15px;
}

.chat-message-main {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.chat-message header {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 9px;
    align-items: baseline;
    min-width: 0;
}

.chat-message header strong {
    min-width: 0;
    color: var(--ink);
}

.chat-message header small,
.chat-message time {
    color: var(--muted);
    font-size: 12px;
}

.chat-level-pill {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 2px 7px;
    border: 1px solid color-mix(in srgb, var(--accent) 44%, var(--line));
    border-radius: 999px;
    color: color-mix(in srgb, var(--ink) 82%, var(--muted)) !important;
    background: color-mix(in srgb, var(--accent) 12%, var(--panel));
    font-size: 11px !important;
    font-weight: 800;
}

.chat-edited-label {
    color: color-mix(in srgb, var(--muted) 84%, var(--ink)) !important;
    font-style: italic;
}

.chat-message p {
    margin: 0;
    color: color-mix(in srgb, var(--ink) 92%, var(--muted));
    line-height: 1.42;
    overflow-wrap: anywhere;
}

.chat-message-deleted {
    color: color-mix(in srgb, var(--muted) 88%, var(--ink)) !important;
    font-style: italic;
}

.chat-confetti {
    position: fixed;
    inset: 0;
    z-index: 99999;
    pointer-events: none;
    overflow: hidden;
}

.chat-confetti span {
    position: absolute;
    top: -18px;
    left: var(--x);
    width: 9px;
    height: 14px;
    border-radius: 2px;
    background: var(--colour);
    opacity: 0.95;
    animation: chat-confetti-fall var(--duration) cubic-bezier(.18, .72, .24, 1) var(--delay) forwards;
}

.chat-confetti span:nth-child(3n) {
    width: 7px;
    height: 7px;
    border-radius: 999px;
}

.chat-confetti span:nth-child(4n) {
    width: 12px;
    height: 6px;
}

@keyframes chat-confetti-fall {
    0% {
        transform: translate3d(0, -20px, 0) rotate(0deg);
    }
    100% {
        transform: translate3d(calc((50vw - var(--x)) * .16), 108vh, 0) rotate(var(--rotate));
    }
}

.chat-mention-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.chat-mention-chip-list form {
    margin: 0;
}

.chat-mention-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 28px;
    padding: 4px 8px;
    border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--line));
    border-radius: 999px;
    color: var(--ink);
    background: color-mix(in srgb, var(--accent) 16%, var(--panel));
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.chat-mention-chip:hover {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 68%, transparent);
}

.chat-mention-chip svg {
    width: 13px;
    height: 13px;
}

.chat-reply-preview,
.chat-forwarded-label,
.chat-reply-composer {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    width: fit-content;
    max-width: 100%;
    padding: 6px 8px;
    border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
    border-radius: 6px;
    color: color-mix(in srgb, var(--ink) 86%, var(--muted));
    background: color-mix(in srgb, var(--soft) 78%, transparent);
}

.chat-reply-preview {
    text-decoration: none;
}

.chat-reply-preview:hover {
    border-color: #ef2b2d;
    box-shadow: 0 0 0 1px #ef2b2d;
}

.chat-reply-preview svg,
.chat-forwarded-label svg,
.chat-reply-composer svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
}

.chat-reply-preview span,
.chat-forwarded-label span,
.chat-reply-composer span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-forwarded-label {
    color: var(--muted);
    font-size: 12px;
}

.chat-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 2px;
}

.chat-attachment {
    display: inline-flex;
    max-width: min(280px, 100%);
    align-items: center;
    gap: 7px;
    padding: 7px 9px;
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--ink);
    text-decoration: none;
    background: color-mix(in srgb, var(--soft) 68%, transparent);
}

.chat-attachment:hover {
    border-color: color-mix(in srgb, var(--accent) 60%, var(--line));
}

.chat-attachment.is-image {
    display: inline-flex;
    width: fit-content;
    max-width: min(220px, 100%);
    padding: 0;
    border: 0;
    background: transparent;
}

.chat-attachment img {
    display: block;
    width: auto;
    max-width: min(220px, 100%);
    max-height: 220px;
    border-radius: 0;
    object-fit: contain;
}

.chat-attachment span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-attachment small {
    margin-left: 6px;
    color: var(--muted);
    font-size: 11px;
}

.chat-message-actions {
    position: absolute;
    top: 6px;
    right: 8px;
    z-index: 5;
    opacity: 0;
    pointer-events: none;
}

.chat-message:hover .chat-message-actions,
.chat-message:focus-within .chat-message-actions,
.chat-message-actions[open] {
    opacity: 1;
    pointer-events: auto;
}

.chat-message-actions > summary {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--ink);
    background: color-mix(in srgb, var(--panel) 92%, var(--bg));
    box-shadow: var(--shadow);
    cursor: pointer;
    list-style: none;
}

.chat-message-actions > summary::-webkit-details-marker {
    display: none;
}

.chat-message-actions > summary svg {
    width: 18px;
    height: 18px;
}

.chat-message-menu {
    position: absolute;
    top: 34px;
    right: 0;
    display: grid;
    gap: 8px;
    min-width: 230px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .34);
}

.chat-message-menu button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 34px;
    padding: 6px 9px;
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--ink);
    background: color-mix(in srgb, var(--soft) 72%, transparent);
    cursor: pointer;
}

.chat-message-menu button:hover {
    border-color: color-mix(in srgb, var(--accent) 56%, var(--line));
}

.chat-message-action-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.chat-message-action-row.has-edit {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.chat-message-action-row form {
    display: block;
}

.chat-message-action-row button {
    width: 100%;
}

.chat-message-menu .chat-message-delete {
    border-color: color-mix(in srgb, #ef2b2d 55%, var(--line));
    color: #ff7779;
    background: color-mix(in srgb, #ef2b2d 10%, var(--soft));
}

.chat-message-menu .chat-message-delete:hover {
    border-color: #ef2b2d;
    color: #ff9b9c;
    box-shadow: 0 0 0 1px color-mix(in srgb, #ef2b2d 48%, transparent);
}

.chat-message-menu form,
.chat-message-menu label {
    display: grid;
    gap: 6px;
}

.chat-message-menu select {
    width: 100%;
}

.chat-link-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 2px;
}

.chat-link-chip {
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--line));
    border-radius: 999px;
    color: var(--ink);
    text-decoration: none;
    background: color-mix(in srgb, var(--panel) 82%, var(--accent) 18%);
}

.chat-link-chip:hover {
    border-color: #ef2b2d;
    box-shadow: 0 0 0 1px #ef2b2d;
}

.chat-link-chip svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
}

.chat-link-chip span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-sticker {
    display: inline-grid;
    min-width: 0;
    max-width: min(220px, 100%);
    justify-items: center;
    gap: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.chat-sticker-custom {
    padding: 0;
}

.chat-sticker-custom img {
    display: block;
    width: min(180px, 100%);
    max-height: 180px;
    border-radius: 8px;
    object-fit: contain;
}

.chat-attachment-sticker {
    color: inherit;
    text-decoration: none;
}

.chat-attachment-sticker:hover {
    background: transparent;
    box-shadow: none;
}

.chat-lottie-sticker {
    width: min(180px, 100%);
    height: 180px;
}

.chat-sticker-lottie-preview {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    overflow: hidden;
    border-radius: 6px;
}

.chat-sticker-emoji {
    font-size: 50px;
    line-height: 1;
}

.chat-sticker strong {
    max-width: 100%;
    overflow: hidden;
    color: var(--ink);
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-reaction-list {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding-top: 2px;
}

.chat-reaction-list form,
.chat-reaction-picker form {
    margin: 0;
}

.chat-reaction-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 54px;
    height: 30px;
    min-height: 30px;
    padding: 3px 7px;
    border: 0;
    border-radius: 999px;
    color: var(--ink);
    background: color-mix(in srgb, var(--link-blue) 18%, var(--panel));
    cursor: pointer;
}

.chat-reaction-chip:hover,
.chat-reaction-chip.is-active {
    background: color-mix(in srgb, var(--link-blue) 30%, var(--panel));
    box-shadow: none;
}

.chat-reaction-chip strong {
    flex: 0 0 auto;
    font-size: 12px;
}

.chat-reaction-chip span {
    line-height: 1;
}

.chat-reaction-emoji-img {
    display: block;
    width: 30px;
    height: 22px;
    flex: 0 0 30px;
    object-fit: contain;
}

.chat-reaction-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding-bottom: 2px;
}

.chat-reaction-picker button {
    display: grid;
    width: 32px;
    height: 32px;
    min-height: 32px;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--link-blue) 18%, var(--panel));
    font-size: 16px;
}

.chat-reaction-picker button:hover {
    background: color-mix(in srgb, var(--link-blue) 30%, var(--panel));
}

.chat-reaction-picker button span {
    line-height: 1;
}

.chat-reaction-picker .chat-reaction-emoji-img {
    width: 28px;
    height: 24px;
    justify-self: center;
}

.chat-compose {
    display: grid;
    gap: 9px;
    padding: 12px 16px 16px;
    border-top: 1px solid var(--line);
    background: var(--panel);
}

.chat-compose-message {
    position: relative;
    display: grid;
    gap: 5px;
}

.chat-compose-message textarea,
.chat-rich-input {
    min-height: 76px;
    resize: vertical;
    border-radius: 8px;
    background: color-mix(in srgb, var(--soft) 72%, var(--panel));
}

.chat-rich-input {
    width: 100%;
    max-height: 180px;
    overflow-y: auto;
    padding: 9px 10px;
    border: 1px solid var(--line);
    color: var(--ink);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    outline: none;
}

.chat-rich-input:empty::before {
    content: attr(data-placeholder);
    color: var(--muted);
    pointer-events: none;
}

.chat-rich-input:focus {
    border-color: color-mix(in srgb, var(--accent) 62%, var(--line));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 38%, transparent);
}

.chat-mention-menu {
    display: grid;
    gap: 3px;
    max-height: 238px;
    overflow: auto;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: color-mix(in srgb, var(--panel) 96%, var(--bg) 4%);
    box-shadow: 0 16px 38px rgba(0, 0, 0, .28);
}

.chat-mention-menu[hidden] {
    display: none;
}

.chat-mention-option {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    width: 100%;
    padding: 6px 8px;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--ink);
    text-align: left;
    background: transparent;
}

.chat-mention-option:hover,
.chat-mention-option.is-selected {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
    background: color-mix(in srgb, var(--accent) 14%, var(--panel));
}

.chat-mention-option strong,
.chat-mention-option small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-mention-option small {
    color: var(--muted);
    font-size: 12px;
}

.chat-mention-avatar {
    width: 30px;
    height: 30px;
    font-size: 12px;
}

.chat-mention-presence.is-active {
    color: #5bd47b;
}

.chat-mention-presence.is-recent {
    color: #facc15;
}

.chat-mention-empty {
    padding: 8px 10px;
    color: var(--muted);
    font-size: 13px;
}

.chat-reply-composer {
    justify-content: space-between;
    width: 100%;
}

.chat-reply-composer[hidden] {
    display: none;
}

.chat-emoji-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.chat-emoji-row button {
    display: grid;
    width: 34px;
    height: 32px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: color-mix(in srgb, var(--soft) 72%, transparent);
    cursor: pointer;
}

.chat-emoji-row button:hover {
    border-color: color-mix(in srgb, var(--accent) 56%, var(--line));
    background: color-mix(in srgb, var(--accent) 13%, var(--panel));
}

.chat-shortcut-emoji-img {
    display: block;
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.chat-compose-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.chat-send-button {
    width: 34px;
    height: 32px;
    color: #bfffdc;
    border-color: color-mix(in srgb, #62e6a4 68%, var(--line));
    background: color-mix(in srgb, #62e6a4 12%, var(--soft));
    box-shadow: 0 0 16px color-mix(in srgb, #62e6a4 24%, transparent);
}

.chat-send-button[hidden] {
    display: none;
}

.chat-send-button svg {
    width: 17px;
    height: 17px;
}

.chat-send-button:hover {
    color: #ffffff;
    border-color: #62e6a4;
    background: color-mix(in srgb, #62e6a4 22%, var(--soft));
}

.chat-add-menu {
    position: relative;
    flex: 0 0 auto;
}

.chat-add-menu > summary {
    list-style: none;
}

.chat-add-menu > summary::-webkit-details-marker {
    display: none;
}

.chat-add-panel {
    position: absolute;
    left: 0;
    bottom: calc(100% + 8px);
    z-index: 80;
    display: grid;
    gap: 8px;
    width: min(360px, calc(100vw - 32px));
    max-height: min(420px, 70vh);
    overflow: auto;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: color-mix(in srgb, var(--panel) 96%, var(--bg) 4%);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .34);
}

.chat-add-menu:not([open]) .chat-add-panel {
    display: none;
}

.chat-add-main,
.chat-add-link-types,
.chat-add-link-items,
.chat-add-emojis,
.chat-add-stickers {
    display: grid;
    gap: 7px;
}

.chat-add-main[hidden],
.chat-add-link-types[hidden],
.chat-add-link-items[hidden],
.chat-add-emojis[hidden],
.chat-add-stickers[hidden] {
    display: none;
}

.chat-add-choice,
.chat-add-back,
.chat-add-clear,
.chat-add-link-item,
.chat-emoji-option,
.chat-sticker-option {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    min-height: 36px;
    padding: 7px 9px;
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--ink);
    text-align: left;
    background: color-mix(in srgb, var(--soft) 72%, transparent);
    cursor: pointer;
}

.chat-add-choice:hover,
.chat-add-back:hover,
.chat-add-clear:hover,
.chat-add-link-item:hover,
.chat-emoji-option:hover,
.chat-sticker-option:hover {
    border-color: color-mix(in srgb, var(--accent) 60%, var(--line));
    background: color-mix(in srgb, var(--accent) 13%, var(--panel));
}

.chat-emoji-option:hover,
.chat-sticker-option:hover {
    border-color: var(--line);
    background: color-mix(in srgb, var(--soft) 84%, var(--panel));
}

.chat-add-link-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px;
}

.chat-add-clear {
    width: auto;
    justify-content: center;
}

.chat-add-link-search {
    min-height: 36px;
}

.chat-add-link-results {
    display: grid;
    gap: 5px;
    max-height: 260px;
    overflow: auto;
}

.chat-add-link-item span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-add-empty {
    padding: 8px 10px;
    color: var(--muted);
    font-size: 13px;
}

.chat-sticker-picker,
.chat-emoji-picker,
.chat-gif-picker {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

.chat-gif-search-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px;
}

.chat-gif-recent {
    display: grid;
    gap: 7px;
}

.chat-gif-recent > strong {
    color: var(--muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0;
}

.chat-gif-option {
    display: block;
    min-width: 0;
    height: 92px;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: color-mix(in srgb, var(--soft) 72%, transparent);
    cursor: pointer;
}

.chat-gif-option:hover {
    border-color: color-mix(in srgb, var(--accent) 60%, var(--line));
}

.chat-gif-option img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.chat-sticker-tile {
    position: relative;
    display: block;
    min-width: 0;
}

.chat-sticker-option {
    justify-content: center;
    min-height: 72px;
    height: 72px;
    padding: 8px;
}

.chat-emoji-option {
    justify-content: flex-start;
    min-height: 54px;
}

.chat-sticker-option span,
.chat-emoji-option span {
    width: 30px;
    flex: 0 0 30px;
    text-align: center;
    font-size: 24px;
    line-height: 1;
}

.chat-sticker-option > span:not(.chat-sticker-lottie-preview) {
    width: 54px;
    flex: 0 0 54px;
    font-size: 38px;
}

.chat-sticker-option img {
    display: block;
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    border-radius: 6px;
    object-fit: contain;
}

.chat-sticker-option .chat-sticker-lottie-preview {
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    font-size: inherit;
}

.chat-sticker-delete {
    position: absolute;
    top: 3px;
    right: 3px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    min-height: 20px;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--danger) 70%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--danger) 20%, var(--panel));
    color: var(--danger);
    cursor: pointer;
}

.chat-sticker-delete svg {
    width: 13px;
    height: 13px;
    stroke-width: 3;
}

.chat-sticker-delete:hover {
    background: var(--danger);
    color: #fff;
}

.chat-emoji-option img {
    display: block;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 6px;
    object-fit: contain;
}

.chat-sticker-option strong,
.chat-emoji-option strong {
    min-width: 0;
    overflow: hidden;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-emoji-tools {
    display: inline-flex;
    gap: 6px;
}

.chat-inline-emoji {
    display: inline-block;
    width: 1.35em;
    height: 1.35em;
    margin: 0 2px;
    vertical-align: -0.25em;
    object-fit: contain;
}

.chat-add-status {
    align-self: center;
    flex: 1 1 160px;
    min-width: 0;
    overflow: hidden;
    color: var(--muted);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-add-status:empty {
    display: none;
}

.chat-member-sidebar {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-left: 1px solid var(--line);
    background: color-mix(in srgb, var(--panel) 88%, var(--bg) 12%);
}

.chat-member-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 64px;
    padding: 12px;
    border-bottom: 1px solid var(--line);
}

.chat-member-list {
    display: grid;
    align-content: start;
    gap: 4px;
    min-height: 0;
    overflow: auto;
    padding: 10px 8px;
}

.chat-member-row {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 9px;
    align-items: center;
    min-width: 0;
    padding: 7px 8px;
    border-radius: 6px;
}

.chat-member-row:hover {
    background: color-mix(in srgb, var(--soft) 72%, transparent);
}

.chat-member-avatar {
    width: 34px;
    height: 34px;
    font-size: 13px;
}

.chat-member-avatar-wrap {
    position: relative;
    display: inline-grid;
    width: 34px;
    height: 34px;
}

.chat-member-presence-dot {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 10px;
    height: 10px;
    border: 2px solid color-mix(in srgb, var(--panel) 88%, var(--bg) 12%);
    border-radius: 50%;
    background: #64748b;
}

.chat-member-avatar-wrap.is-active .chat-member-presence-dot {
    background: #5bd47b;
}

.chat-member-avatar-wrap.is-recent .chat-member-presence-dot {
    background: #facc15;
}

.chat-member-presence.is-active {
    color: #5bd47b;
}

.chat-member-presence.is-recent {
    color: #facc15;
}

.chat-member-presence.is-offline {
    color: color-mix(in srgb, var(--muted) 82%, var(--ink));
}

.chat-member-level {
    color: color-mix(in srgb, var(--accent) 55%, var(--muted)) !important;
}

.chat-empty-note {
    margin: 6px 10px;
    font-size: 13px;
}

.chat-empty-state {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 8px;
    min-height: 240px;
    padding: 20px;
    color: var(--muted);
    text-align: center;
}

.chat-empty-state svg {
    width: 42px;
    height: 42px;
}

.chat-empty-state strong {
    color: var(--ink);
}

.chat-empty-state-full {
    flex: 1;
}

@media (max-width: 1180px) {
    .chat-layout {
        grid-template-columns: minmax(210px, 270px) minmax(0, 1fr);
    }

    .chat-member-sidebar {
        display: none;
    }
}

.login-body {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 100vh;
}

.login-shell {
    min-height: 100vh;
    min-height: 100svh;
    display: grid;
    grid-template-rows: auto auto;
    place-items: center;
    align-content: center;
    gap: 18px;
    padding: 18px;
}

.login-logo {
    display: block;
    width: min(var(--login-logo-width, 410px), 88vw);
    max-height: min(180px, calc(var(--login-logo-width, 410px) * .38));
    height: auto;
    object-fit: contain;
}

.login-card {
    width: min(420px, 100%);
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow);
    padding: 22px;
    display: grid;
    gap: 14px;
}

.register-card {
    width: min(640px, 100%);
}

.auth-field {
    min-width: 0;
    display: grid;
    gap: 6px;
}

.auth-field > span {
    color: var(--ink);
    font-size: 13px;
    font-weight: 800;
}

.auth-field > small,
.registration-type-selector small,
.login-remember small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}

.registration-identity-grid,
.registration-password-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.registration-password-grid {
    align-items: start;
}

.registration-field-feedback {
    min-height: 18px;
}

.registration-field-feedback[data-state="success"],
.registration-field-feedback[data-state="error"] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-weight: 800;
}

.registration-field-feedback[data-state="success"] {
    color: #1f7a45;
}

.registration-field-feedback[data-state="error"] {
    color: #b4232f;
}

.registration-field-feedback[data-state="success"]::before,
.registration-field-feedback[data-state="error"]::before {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    display: inline-grid;
    place-items: center;
    color: #fff;
    border-radius: 50%;
    font-size: 11px;
    line-height: 1;
}

.registration-field-feedback[data-state="success"]::before {
    content: "\2713";
    background: #1f7a45;
}

.registration-field-feedback[data-state="error"]::before {
    content: "!";
    background: #b4232f;
}

input[aria-invalid="true"] {
    border-color: #b4232f !important;
    box-shadow: 0 0 0 3px rgba(180, 35, 47, .12) !important;
}

.registration-email-field {
    grid-column: 1 / -1;
}

.registration-type-selector {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.registration-type-selector legend {
    margin-bottom: 8px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 800;
}

.registration-type-selector {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.registration-type-selector legend {
    grid-column: 1 / -1;
}

.registration-type-selector label {
    min-width: 0;
    position: relative;
    cursor: pointer;
}

.registration-type-selector input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.registration-type-selector label > span {
    min-height: 82px;
    padding: 13px;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-content: center;
    column-gap: 9px;
    border: 2px solid var(--line);
    border-radius: 10px;
    background: var(--panel);
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.registration-type-selector label > span > svg {
    grid-row: 1 / span 2;
    width: 22px;
    color: var(--muted);
}

.registration-type-selector label > span strong,
.registration-type-selector label > span small {
    grid-column: 2;
}

.registration-type-selector input:checked + span {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, var(--panel));
    box-shadow: 0 0 0 1px var(--accent);
}

.registration-type-selector input:checked + span > svg {
    color: var(--accent);
}

.registration-type-selector input:focus-visible + span {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
}

.registration-conditional {
    display: none;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--soft);
}

[data-registration-form]:has(input[name="applicant_type"][value="employee"]:checked) [data-registration-fields="employee"],
[data-registration-form]:has(input[name="applicant_type"][value="client"]:checked) [data-registration-fields="client"] {
    display: block;
}

.auth-security-note {
    margin: 0;
    padding: 11px 12px;
    display: flex;
    align-items: flex-start;
    gap: 9px;
    color: var(--muted);
    border-radius: 9px;
    background: var(--soft);
    font-size: 12px;
    line-height: 1.45;
}

.auth-security-note svg {
    flex: 0 0 auto;
    width: 18px;
    color: var(--accent);
}

.login-remember > span {
    display: grid;
    gap: 2px;
}

.registration-received-card {
    text-align: center;
}

.registration-received-icon {
    width: 58px;
    height: 58px;
    margin: 0 auto;
    display: grid;
    place-items: center;
    color: #fff;
    border-radius: 50%;
    background: #238636;
}

.registration-received-icon svg {
    width: 30px;
    height: 30px;
}

.registration-receipt-details {
    margin: 0;
    display: grid;
    text-align: left;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--soft);
}

.registration-receipt-details > div {
    padding: 10px 12px;
    display: grid;
    grid-template-columns: 125px minmax(0, 1fr);
    gap: 10px;
    border-bottom: 1px solid var(--line);
}

.registration-receipt-details > div:last-child { border-bottom: 0; }
.registration-receipt-details dt { color: var(--muted); font-size: 12px; font-weight: 800; }
.registration-receipt-details dd { min-width: 0; margin: 0; overflow-wrap: anywhere; font-size: 12px; font-weight: 800; }

.login-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.login-actions .microsoft-sign-in-button {
    grid-column: 1 / -1;
}

.login-actions .microsoft-sign-in-button img {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
}

.auth-challenge-form,
.recovery-code-form {
    display: grid;
    gap: 12px;
}

.recovery-login {
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--soft);
}

.recovery-login > summary {
    color: var(--ink);
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

.recovery-login[open] > summary {
    margin-bottom: 10px;
}

.recovery-login > p {
    margin: 0 0 10px;
}

.login-actions .button {
    width: 100%;
}

.login-passkey-status {
    min-height: 18px;
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.login-passkey-status.error,
.copy-status.error {
    color: var(--danger);
}

.login-register-link {
    margin: -4px 0 0;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
}

.login-register-link a {
    color: var(--accent);
    text-decoration: none;
}

.login-register-link a:hover {
    text-decoration: underline;
}

.login-forgot-link {
    margin: -8px 0 0;
    text-align: right;
    font-size: 13px;
    font-weight: 800;
}

.login-forgot-link a { color: var(--accent); text-decoration: none; }
.login-forgot-link a:hover { text-decoration: underline; }

.password-reset-card { width: min(480px, 100%); }
.password-reset-form { display: grid; gap: 14px; }
.password-reset-card > .button { width: 100%; }

[data-password-feedback],
[data-password-match-feedback] { min-height: 18px; }

[data-password-feedback][data-state="success"],
[data-password-feedback][data-state="error"],
[data-password-match-feedback][data-state="success"],
[data-password-match-feedback][data-state="error"] { font-weight: 800; }

[data-password-feedback][data-state="success"],
[data-password-match-feedback][data-state="success"] { color: #1f7a45; }

[data-password-feedback][data-state="error"],
[data-password-match-feedback][data-state="error"] { color: #b4232f; }

.login-card-head {
    display: grid;
    gap: 4px;
}

.login-card-head h1 {
    margin: 0;
    font-size: 22px;
}

.login-card-head p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

@media (max-width: 720px) {
    .login-shell {
        align-content: start;
        padding-top: calc(env(safe-area-inset-top, 0px) + 28px);
        gap: 14px;
    }

    .login-card {
        padding: 14px;
        gap: 10px;
    }

    .login-actions {
        grid-template-columns: 1fr;
    }

    .registration-identity-grid,
    .registration-password-grid,
    .registration-type-selector {
        grid-template-columns: 1fr;
    }

    .registration-type-selector legend {
        grid-column: 1;
    }

    .registration-receipt-details > div {
        grid-template-columns: 1fr;
        gap: 3px;
    }
}

.login-brand {
    display: flex;
    gap: 12px;
    align-items: center;
}

.login-brand h1 {
    margin: 0;
    font-size: 24px;
}

.login-brand p {
    margin: 3px 0 0;
    color: var(--muted);
}

.toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}
.toolbar.wrap { flex-wrap: wrap; }
.toolbar.mini { margin-bottom: 0; }
.toolbar-action-form {
    margin: 0;
    display: inline-flex;
}
.schedule-toolbar-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}
.toolbar-title {
    flex: 0 1 auto;
    min-width: 0;
    max-width: min(260px, 44vw);
    padding: 0 8px;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.schedule-period-picker {
    flex: 0 1 auto;
    min-width: 0;
    max-width: min(300px, 46vw);
}

.schedule-period-trigger {
    width: 100%;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--ink);
    border-radius: 8px;
    cursor: pointer;
    font-weight: 800;
    list-style: none;
}

.schedule-period-trigger > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.schedule-period-trigger > svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    color: var(--muted);
    transition: transform 140ms ease;
}

.schedule-period-trigger:hover {
    color: var(--accent);
    background: var(--soft);
}

.schedule-period-trigger:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.schedule-period-picker[open] .schedule-period-trigger {
    color: var(--accent);
    background: var(--soft);
}

.schedule-period-picker[open] .schedule-period-trigger > svg {
    transform: rotate(180deg);
}

.column-picker-menu.schedule-period-menu {
    width: 360px;
    max-width: calc(100vw - 16px);
    max-height: min(420px, calc(100svh - 24px));
    gap: 0;
    padding: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.column-picker-menu.schedule-period-menu.is-floating {
    max-height: min(420px, calc(100svh - 24px));
}

.schedule-period-menu-head {
    position: sticky;
    z-index: 3;
    top: 0;
    min-height: 58px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ink);
    border-bottom: 1px solid var(--line);
    background: var(--panel);
}

.schedule-period-menu-head > svg {
    width: 20px;
    height: 20px;
    color: var(--accent);
}

.schedule-period-menu-head > span {
    display: grid;
    gap: 2px;
}

.schedule-period-menu-head strong {
    font-size: 14px;
}

.schedule-period-menu-head small,
.schedule-period-option small {
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
}

.schedule-period-year h3 {
    position: sticky;
    z-index: 2;
    top: 58px;
    margin: 0;
    padding: 7px 12px;
    color: var(--muted);
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--panel) 92%, var(--soft));
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.schedule-period-list {
    display: grid;
    gap: 2px;
    padding: 5px;
}

.schedule-period-option {
    min-height: 42px;
    padding: 6px 8px 6px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--ink);
    border: 1px solid transparent;
    border-radius: 7px;
    text-decoration: none;
}

.schedule-period-option > span {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.schedule-period-option strong {
    font-size: 13px;
}

.schedule-period-option > svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    color: var(--accent);
}

.schedule-period-option:hover,
.schedule-period-option:focus-visible {
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
    background: var(--soft);
    outline: none;
}

.schedule-period-option:focus-visible {
    box-shadow: inset 0 0 0 2px var(--accent);
}

.schedule-period-option.is-current {
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
    background: color-mix(in srgb, var(--accent) 12%, var(--panel));
}

.button, .icon-button {
    border: 1px solid var(--line);
    background: var(--panel);
    color: var(--ink);
    min-height: 36px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 12px;
}
.button.primary {
    background: #101c2a;
    border-color: rgba(248, 250, 252, 0.5);
    color: #f8fafc;
}
.button.primary:hover:not(:disabled) {
    background: #142437;
    border-color: #ffffff;
    color: #ffffff;
}
.button.ghost { background: transparent; }

.button.add-action:not(:disabled),
.button.primary.book-visit-button:not(:disabled) {
    background: #082f24;
    border-color: #8dffcf;
    color: #8dffcf;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 0 18px rgba(34, 197, 94, 0.24);
}

.button.add-action:hover:not(:disabled),
.button.primary.book-visit-button:hover:not(:disabled) {
    background: #0b3b2d;
    border-color: #a7fede;
    color: #a7fede;
}

.icon-button.report-send-action:not(:disabled) {
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
    padding: 0;
    background: #082f24;
    border-color: #8dffcf;
    color: #8dffcf;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 0 18px rgba(34, 197, 94, 0.24);
}

.icon-button.report-send-action:hover:not(:disabled) {
    background: #0b3b2d;
    border-color: #a7fede;
    color: #a7fede;
}

.button.bulk-edit-button {
    min-height: 36px;
    padding: 0 12px;
    gap: 8px;
    border: 2px solid rgba(148, 163, 184, 0.45);
    border-radius: 8px;
    background: #101c2a;
    color: #8fa4b8;
    font: inherit;
    font-weight: inherit;
    box-shadow: none;
}

.button.bulk-edit-button:not(:disabled) {
    border-color: #f8fafc;
    background: #071e34;
    color: #f8fafc;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 0 18px rgba(148, 197, 255, 0.24);
}

.button.bulk-edit-button:hover:not(:disabled) {
    background: #0b2b4a;
    border-color: #ffffff;
    color: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), 0 0 22px rgba(148, 197, 255, 0.3);
}

.button.delete-selected-button {
    min-height: 36px;
    padding: 0 12px;
    gap: 8px;
    font: inherit;
    font-weight: inherit;
    white-space: nowrap;
}

.button.save-button,
.icon-button.save-button {
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
    padding: 0;
    gap: 0;
    background: color-mix(in srgb, var(--panel) 88%, var(--line) 12%);
    border-color: var(--line);
    color: var(--muted);
    box-shadow: none;
    opacity: 0.62;
    transition: background 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease, opacity 140ms ease;
}
.button.save-button .save-button-label,
.icon-button.save-button .save-button-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.button.save-button.is-dirty,
.icon-button.save-button.is-dirty {
    background: #071e34;
    border-color: #ffffff;
    color: #ffffff;
    opacity: 1;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 0 18px rgba(148, 197, 255, 0.24);
}
button.is-dirty i[data-lucide="save"],
button.is-dirty svg.lucide-save,
.button.save-button.is-dirty i,
.button.save-button.is-dirty svg,
.icon-button.save-button.is-dirty i,
.icon-button.save-button.is-dirty svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}
.button.danger { color: var(--danger); }
.button.danger:not(:disabled) {
    background: var(--danger);
    border-color: var(--danger);
    color: #ffffff;
    box-shadow: 0 18px 36px rgba(127, 29, 29, 0.36);
    font-weight: 800;
}

.button.near-miss-add-button:not(:disabled) {
    min-height: 34px;
    align-self: end;
    justify-self: end;
    padding: 6px 10px;
    gap: 6px;
    border-radius: 8px;
    box-shadow: 0 10px 22px rgba(127, 29, 29, 0.26);
    white-space: nowrap;
}

.button.near-miss-add-button svg {
    width: 15px;
    height: 15px;
}

.button.danger[data-delete-selected-visit]:not(:disabled) {
    background: #2a0709;
    border-color: #ef4444;
    border-width: 2px;
    color: #ff6b6b;
    box-shadow: 0 0 22px rgba(239, 68, 68, 0.32);
    font: inherit;
    font-weight: inherit;
}
.button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.icon-button:disabled {
    opacity: 0.38;
    cursor: not-allowed;
    color: var(--muted);
    border-color: color-mix(in srgb, var(--line) 70%, transparent);
    background: color-mix(in srgb, var(--panel) 88%, var(--line) 12%);
    box-shadow: none;
}

.button.bulk-edit-button:disabled {
    opacity: 0.78;
}
.icon-button { width: 36px; padding: 0; }
.icon-button.danger { color: var(--danger); }
.icon-button.success { color: var(--success); }
.icon-button.add-action:not(:disabled) {
    color: var(--success);
    border-color: color-mix(in srgb, var(--success) 70%, var(--line));
    background: color-mix(in srgb, var(--success) 10%, var(--panel));
}
.icon-button.add-action:hover:not(:disabled) {
    color: #ffffff;
    border-color: var(--success);
    background: var(--success);
}
.checkline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: var(--ink);
    font-size: 13px;
    font-weight: 700;
}

.checkline input {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    accent-color: var(--accent);
}

.secret-input-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 36px 36px auto;
    gap: 8px;
    align-items: center;
}
.secret-input-row input { min-width: 0; }
.copy-status {
    color: var(--success);
    font-size: 12px;
    font-weight: 700;
    min-width: 48px;
}

.calculated-stage-pill {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    max-width: 100%;
    padding: 4px 9px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--soft);
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.avatar {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    border: 1px solid var(--line);
    border-radius: 50%;
    object-fit: cover;
    background: var(--accent);
    color: #fff;
    font-weight: 800;
}

.avatar-sidebar {
    width: 38px;
    height: 38px;
}

.avatar-schedule {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    font-size: 20px;
}

.avatar-large {
    width: 58px;
    height: 58px;
    font-size: 20px;
}

.avatar-note {
    width: 34px;
    height: 34px;
    font-size: 13px;
}

.avatar-initials {
    text-transform: uppercase;
}

.two-factor-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
}

.two-factor-intro p,
.recovery-code-panel p {
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
}

.recovery-code-panel {
    border: 2px solid color-mix(in srgb, var(--success) 55%, var(--line));
    border-radius: 8px;
    background: color-mix(in srgb, var(--success) 7%, var(--panel));
}

.authenticator-setup-guide {
    display: grid;
    gap: 14px;
}

.authenticator-setup-guide ol {
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
    list-style: none;
    counter-reset: authenticator-step;
}

.authenticator-setup-guide li {
    min-width: 0;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 2px 10px;
    counter-increment: authenticator-step;
}

.authenticator-setup-guide li::before {
    width: 30px;
    height: 30px;
    grid-row: 1 / span 2;
    display: grid;
    place-items: center;
    content: counter(authenticator-step);
    color: #fff;
    border-radius: 50%;
    background: var(--accent);
    font-size: 12px;
    font-weight: 900;
}

.authenticator-setup-guide li span {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}

.authenticator-open-link {
    width: max-content;
    max-width: 100%;
}

.authenticator-setup-options {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
}

.authenticator-qr {
    margin: 0;
    padding: 10px;
    display: grid;
    gap: 7px;
    justify-items: center;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
}

.authenticator-qr img {
    display: block;
    width: 156px;
    max-width: 100%;
    height: auto;
}

.authenticator-qr figcaption {
    color: #334155;
    font-size: 12px;
    font-weight: 800;
    text-align: center;
}

.authenticator-manual-options {
    min-width: 0;
    display: grid;
    gap: 10px;
}

.authenticator-manual-options:only-child {
    grid-column: 1 / -1;
}

.authenticator-noscript-key {
    margin: 0;
    padding: 10px;
    color: var(--ink);
    overflow-wrap: anywhere;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--soft);
    font-size: 12px;
}

.secret-field-label {
    color: var(--ink);
    font-size: 13px;
    font-weight: 800;
}

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

    .authenticator-qr {
        width: min(220px, 100%);
        justify-self: center;
    }

    .secret-input-row {
        grid-template-columns: minmax(0, 1fr) 36px 36px;
    }

    .secret-input-row .copy-status {
        grid-column: 1 / -1;
    }
}

.panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow);
    min-width: 0;
}

@media (min-width: 981px) {
    body.theme-light .sidebar {
        background: color-mix(in srgb, var(--panel) 94%, var(--bg) 6%);
        color: var(--ink);
        border-right: 1px solid var(--line);
        box-shadow: 8px 0 24px rgba(31, 41, 51, 0.06);
    }
}

body.theme-light .nav a {
    color: color-mix(in srgb, var(--ink) 78%, var(--muted));
}

body.theme-light .nav a.active,
body.theme-light .nav a:hover {
    background: color-mix(in srgb, var(--accent) 12%, var(--panel));
    color: var(--accent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 32%, var(--line));
}

body.theme-light .sidebar-user {
    color: var(--ink);
    border-top-color: var(--line);
}

body.theme-light .sidebar-user-summary:hover,
body.theme-light .sidebar-user-summary[aria-expanded="true"],
body.theme-light .sidebar-online-users h3,
body.theme-light .sidebar-online-user strong {
    color: var(--ink);
}

body.theme-light .sidebar-user-summary svg,
body.theme-light .sidebar-user small,
body.theme-light .sidebar-online-users p,
body.theme-light .sidebar-online-user small,
body.theme-light .sidebar-avatar-cropper label {
    color: var(--muted);
}

body.theme-light .sidebar-online-users {
    border-top-color: var(--line);
}

body.theme-light .sidebar-online-location,
body.theme-light .sidebar-account-action.is-enabled {
    color: var(--success) !important;
}

body.theme-light .online-dot {
    border-color: var(--panel);
}

body.theme-light .sidebar-account-menu,
body.theme-light .sidebar-account-menu.is-account-menu-overlay,
body.theme-light .sidebar-account-menu:popover-open {
    background: var(--panel);
    color: var(--ink);
    border-color: var(--line);
    box-shadow: 0 20px 55px rgba(31, 41, 51, 0.18);
}

body.theme-light .sidebar-account-menu a,
body.theme-light .sidebar-account-action,
body.theme-light .sidebar-account-role-switch label {
    color: var(--ink);
    border-color: var(--line);
}

body.theme-light .sidebar-account-role-switch select {
    background: var(--panel);
    color: var(--ink);
    border-color: var(--line);
}

body.theme-light .sidebar-account-menu a:hover,
body.theme-light .sidebar-account-action:hover,
body.theme-light .sidebar-avatar-file:hover,
body.theme-light .sidebar-avatar-form .button:hover {
    background: color-mix(in srgb, var(--accent) 10%, var(--panel));
    color: var(--accent);
}

body.theme-light .sidebar-avatar-form {
    border-bottom-color: var(--line);
}

body.theme-light .sidebar-avatar-file,
body.theme-light .sidebar-avatar-form .button {
    color: var(--ink);
    border-color: var(--line);
}

body.theme-light .sidebar-avatar-cropper {
    background: var(--bg);
    border-color: var(--line);
}

body.theme-dark .sidebar {
    background: #0d1319;
}

body.theme-dark .nav a.active,
body.theme-dark .nav a:hover {
    background: #202d38;
}

body.theme-vivid-dark .sidebar {
    background: #000000;
    border-right: 1px solid var(--accent);
    box-shadow: 0 0 28px color-mix(in srgb, var(--accent) 22%, transparent);
}

body.theme-vivid-dark .button.add-action:not(:disabled),
body.theme-vivid-dark .calendar-cell.today .day-number {
    box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 60%, transparent);
}

body.theme-vivid-dark .button.save-button:not(.is-dirty),
body.theme-vivid-dark .icon-button.save-button:not(.is-dirty) {
    box-shadow: none;
    background: color-mix(in srgb, var(--panel) 88%, var(--line) 12%);
    border-color: var(--line);
    color: var(--muted);
}

body.theme-vivid-dark .button.save-button.is-dirty,
body.theme-vivid-dark .icon-button.save-button.is-dirty {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 0 18px rgba(148, 197, 255, 0.28);
}

body.theme-vivid-dark .nav a.active,
body.theme-vivid-dark .nav a:hover {
    background: color-mix(in srgb, var(--accent) 18%, #000000);
    color: var(--accent);
    box-shadow: inset 0 0 0 1px var(--accent);
}
.split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 390px;
    gap: 14px;
    align-items: start;
}
.diary-layout { grid-template-columns: minmax(680px, 1fr) 390px; }
.sites-layout {
    grid-template-columns: 330px minmax(0, 1fr);
    min-height: calc(100vh - 168px);
    min-height: calc(100dvh - 168px);
}
.customers-layout { grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); }
.sites-layout .list-panel {
    align-self: stretch;
    height: calc(100vh - 168px);
    max-height: calc(100vh - 168px);
    height: calc(100dvh - 168px);
    max-height: calc(100dvh - 168px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.site-welfare-summary {
    margin: 14px;
    padding: 16px;
    border: 1px solid var(--line);
    border-left: 4px solid var(--muted);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--panel) 88%, var(--surface) 12%);
}

.site-welfare-summary.has-welfare { border-left-color: var(--success); }
.site-welfare-summary.no-welfare { border-left-color: var(--warning); }
.site-welfare-summary .section-title-inline { align-items: flex-start; }
.site-welfare-summary .section-title-inline > i { margin-top: 2px; color: var(--accent); }
.site-welfare-summary h3 { margin: 0 0 3px; }
.site-welfare-summary small { display: block; color: var(--muted); }
.site-welfare-location-list { display: grid; gap: 10px; margin-top: 14px; }
.site-welfare-location-list article {
    padding: 0;
    border: 0;
    background: transparent;
}
.site-welfare-location-list article + article { padding-top: 14px; border-top: 1px solid var(--line); }
.site-welfare-location-list dl {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
    margin: 12px 0 0;
}
.site-welfare-location-list dl > div { padding: 8px; border-radius: 7px; background: var(--surface); }
.site-welfare-location-list dt { color: var(--muted); font-size: 11px; }
.site-welfare-location-list dd { margin: 2px 0 0; font-weight: 750; }
.site-welfare-location-list p { margin: 10px 0 0; color: var(--muted); }
.panel-head, .section-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border-bottom: 1px solid var(--line);
}
.panel-head h2, .section-title h2 { margin: 0; font-size: 18px; }
.panel-head span { color: var(--muted); }
.table-title-tools,
.controller-group-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.table-title-tools h2,
.controller-group-title h3 {
    min-width: 0;
}

.table-title-tools .column-picker summary.icon-button,
.controller-group-title .column-picker summary.icon-button {
    width: 34px;
    height: 34px;
    min-width: 34px;
    padding: 0;
}

.schedule-title-tools {
    flex: 1 1 auto;
}

.schedule-region-switch,
.schedule-region-switch h2,
.schedule-region-switch label,
.page-region-switch,
.page-region-switch label {
    min-width: 0;
    margin: 0;
}

.page-region-switch {
    flex: 0 1 auto;
}

.page-region-switch label {
    display: block;
}

.schedule-region-switch h2 {
    display: flex;
    align-items: center;
    gap: 8px;
}

.schedule-region-select {
    width: auto;
    max-width: min(46vw, 360px);
    min-height: 36px;
    padding: 5px 30px 5px 8px;
    border-color: transparent;
    background-color: var(--panel);
    color: var(--ink);
    font-size: 18px;
    font-weight: 800;
    cursor: pointer;
}

.schedule-region-select:hover,
.schedule-region-select:focus-visible {
    border-color: var(--accent);
}

.schedule-region-select:disabled {
    opacity: 1;
    cursor: default;
}

.schedule-engineer-title::before {
    content: "- ";
}

.schedule-undo-controls {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0;
}

.schedule-undo-form .button {
    border-radius: 6px 0 0 6px;
}

.schedule-undo-picker summary.icon-button {
    margin-left: -1px;
    border-radius: 0 6px 6px 0;
}

.schedule-undo-picker summary[aria-disabled="true"] {
    opacity: 0.45;
    pointer-events: none;
}

.schedule-undo-menu {
    left: auto;
    right: 0;
    width: min(320px, calc(100vw - 24px));
    max-height: min(420px, calc(100vh - 100px));
    overflow-y: auto;
    gap: 4px;
}

.schedule-undo-menu > strong {
    padding: 2px 6px 5px;
}

.schedule-undo-menu form {
    margin: 0;
}

.schedule-undo-action {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 34px;
    padding: 5px 7px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--ink);
    font-size: 12px;
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
}

.schedule-undo-action:hover,
.schedule-undo-action:focus-visible {
    background: var(--soft);
}

.schedule-undo-action span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 700;
}

.schedule-undo-action small,
.schedule-undo-empty {
    color: var(--muted);
    font-size: 11px;
}

.schedule-undo-empty {
    padding: 8px 6px;
}

.schedule-stage-key-menu {
    width: 240px;
    gap: 8px;
}

.schedule-stage-key-menu > strong {
    padding: 2px 4px 4px;
}

.stage-key-list {
    display: grid;
    gap: 4px;
}

.stage-key-row {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-height: 28px;
    padding: 3px 4px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 700;
}

.stage-key-swatch {
    width: 14px;
    height: 14px;
    border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
    border-radius: 4px;
    background: var(--stage-colour);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}

.engineer-visibility-menu {
    width: 270px;
    gap: 8px;
}

.engineer-visibility-menu.is-floating {
    width: var(--floating-width, 270px);
}

.engineer-visibility-menu > strong {
    padding: 2px 4px 4px;
}

.engineer-visibility-list {
    display: grid;
    gap: 2px;
    max-height: 260px;
    overflow: auto;
}

.engineer-visibility-list label span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.site-drawing-meta-form input,
.site-drawing-notes {
    width: 100%;
    min-width: 150px;
}

.site-drawing-notes {
    min-height: 42px;
    resize: vertical;
}

.section-title-inline {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}
.inline-filter {
    display: inline-flex;
    align-items: center;
    margin: 0;
}
.section-title .inline-filter .check {
    color: var(--muted);
    font-size: 13px;
}

.section-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.customer-fetch-progress {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    max-width: min(520px, 42vw);
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: color-mix(in srgb, var(--panel) 88%, var(--soft) 12%);
    color: var(--muted);
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.device-title-count.customer-fetch-progress {
    min-height: 0;
    max-width: min(520px, 42vw);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--muted);
    font-size: 15px;
    font-weight: 800;
}

.customer-fetch-progress.is-running,
.customer-fetch-progress.is-warning {
    color: var(--warn);
    border-color: color-mix(in srgb, var(--warn) 55%, var(--line));
}

.customer-fetch-progress.is-complete {
    color: var(--success);
    border-color: color-mix(in srgb, var(--success) 55%, var(--line));
}

.customer-fetch-progress.is-error {
    color: var(--danger);
    border-color: color-mix(in srgb, var(--danger) 55%, var(--line));
}

.button.customer-fetch-cancel {
    min-height: 32px;
    color: var(--danger);
    border-color: color-mix(in srgb, var(--danger) 55%, var(--line));
    background: color-mix(in srgb, var(--panel) 88%, var(--danger) 12%);
}

.button.customer-fetch-retry {
    min-height: 32px;
    color: var(--success);
    border-color: color-mix(in srgb, var(--success) 65%, var(--line));
    background: color-mix(in srgb, var(--panel) 86%, var(--success) 14%);
    box-shadow: 0 0 16px color-mix(in srgb, var(--success) 22%, transparent);
}

.customer-fetch-report .section-title-inline span {
    color: var(--muted);
    font-size: 12px;
}

.customer-info-form {
    display: grid;
    gap: 6px;
}

.customer-info-row {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(150px, 0.7fr) 34px;
    align-items: end;
    gap: 8px;
}

.customer-info-row label {
    font-size: 11px;
}

.customer-info-row input {
    height: 32px;
    padding: 5px 8px;
    font-size: 12px;
}

.customer-info-row .icon-button {
    width: 32px;
    height: 32px;
    min-height: 32px;
    align-self: end;
}

.customer-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
    align-items: end;
    min-width: 0;
}

.customer-info-grid label {
    font-size: 11px;
    min-width: 0;
}

.customer-info-grid input {
    height: 32px;
    padding: 5px 8px;
    font-size: 12px;
    min-width: 0;
    width: 100%;
}

.customer-info-form .mini {
    margin: 0;
    font-size: 11px;
}

.stakeholder-panel {
    overflow: visible;
}

.stakeholder-inline-status {
    margin: 0 12px 12px;
}

.stakeholder-add-form,
.stakeholder-main-form,
.stakeholder-link-form,
.stakeholder-readonly-row {
    display: grid;
    gap: 8px;
    align-items: end;
    padding: 12px;
    min-width: 0;
}

.stakeholder-add-form {
    grid-template-columns: minmax(150px, 1fr) minmax(220px, 1.3fr) auto;
}

.stakeholder-main-form {
    grid-template-columns: minmax(140px, 1fr) minmax(220px, 1.3fr) max-content max-content;
}

.stakeholder-readonly-row {
    grid-template-columns: minmax(150px, 1fr) minmax(220px, 1.3fr) auto;
}

.stakeholder-add-form label,
.stakeholder-main-form label,
.stakeholder-bulk-link-form > label {
    display: grid;
    gap: 5px;
    min-width: 0;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
}

.stakeholder-add-form input,
.stakeholder-main-form input,
.stakeholder-link-form input,
.stakeholder-link-form select,
.stakeholder-bulk-link-form input,
.stakeholder-bulk-link-form select {
    height: 34px;
    min-width: 0;
    width: 100%;
    padding: 6px 9px;
    font-size: 13px;
}

.stakeholder-bulk-link-form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: end;
    padding: 0 12px 12px;
    border-bottom: 1px solid var(--line);
    min-width: 0;
}

.stakeholder-bulk-link-form > label,
.stakeholder-contact-options {
    flex: 1 1 220px;
}

.stakeholder-bulk-link-form > label:last-of-type {
    flex-basis: 160px;
}

.stakeholder-bulk-link-form .button {
    flex: 0 1 auto;
    max-width: 100%;
    min-width: 0;
    white-space: nowrap;
}

.stakeholder-bulk-link-form .button span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stakeholder-contact-options {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    min-height: 34px;
    min-width: 0;
    padding: 5px 8px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--bg);
}

.stakeholder-contact-options .check {
    margin: 0;
}

.stakeholder-list {
    display: grid;
    gap: 0;
    padding: 0;
}

.stakeholder-card {
    display: grid;
    gap: 0;
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
    overflow: visible;
}

.stakeholder-card.is-muted {
    opacity: 0.72;
}

.stakeholder-main-form,
.stakeholder-readonly-row {
    border-bottom: 1px solid var(--line);
}

.stakeholder-readonly-row {
    align-items: center;
    color: var(--muted);
}

.stakeholder-readonly-row strong {
    color: var(--text);
}

.stakeholder-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: flex-end;
}

.stakeholder-link-list {
    display: grid;
    gap: 6px;
    padding: 8px 12px 12px;
}

.stakeholder-link-items {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

.stakeholder-link-row {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: min(430px, 100%);
    min-height: 24px;
    padding: 3px 5px 3px 8px;
    border: 1px solid color-mix(in srgb, var(--line) 78%, var(--accent) 22%);
    border-radius: 999px;
    background: color-mix(in srgb, var(--soft) 88%, var(--line) 12%);
    color: var(--ink);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
}

.stakeholder-link-row span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stakeholder-link-job {
    max-width: min(320px, 68vw);
}

.stakeholder-link-job small {
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
}

.stakeholder-link-tag {
    max-width: 180px;
    padding: 1px 6px;
    border: 1px solid color-mix(in srgb, var(--line) 78%, var(--accent) 22%);
    border-radius: 999px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
}

.stakeholder-link-delete-form {
    display: flex;
    align-items: center;
    margin: 0;
}

.stakeholder-link-delete-form .icon-button {
    display: inline-grid;
    place-items: center;
    width: 18px;
    min-width: 18px;
    height: 18px;
    padding: 2px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--danger);
}

.stakeholder-link-delete-form .icon-button svg {
    width: 13px;
    height: 13px;
    stroke-width: 3;
}

.stakeholder-link-delete-form .icon-button:hover {
    background: color-mix(in srgb, var(--danger) 14%, transparent);
}

.stakeholder-link-form {
    grid-template-columns: minmax(220px, 1fr) minmax(160px, 0.6fr) auto;
    padding: 4px 0 0;
}

.compact-empty {
    padding: 8px;
    font-size: 12px;
}

@media (max-width: 1180px) {
    .stakeholder-add-form,
    .stakeholder-main-form,
    .stakeholder-readonly-row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .stakeholder-add-form .button {
        grid-column: 2;
    }

    .stakeholder-add-form .button,
    .stakeholder-bulk-link-form .button {
        justify-self: end;
    }

    .stakeholder-actions {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}

@media (max-width: 760px) {
    .stakeholder-add-form,
    .stakeholder-main-form,
    .stakeholder-bulk-link-form,
    .stakeholder-link-form,
    .stakeholder-readonly-row {
        grid-template-columns: 1fr;
    }

    .stakeholder-add-form .button {
        grid-column: auto;
    }

    .stakeholder-actions {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .stakeholder-link-job {
        max-width: calc(100vw - 130px);
    }
}

.customer-fetch-report-table {
    max-height: 420px;
    overflow: auto;
}

.fetch-status-chip {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 2px 8px;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.fetch-status-chip.is-success {
    color: var(--success);
    border-color: color-mix(in srgb, var(--success) 62%, var(--line));
    background: color-mix(in srgb, var(--success) 12%, transparent);
}

.fetch-status-chip.is-warning {
    color: var(--warn);
    border-color: color-mix(in srgb, var(--warn) 62%, var(--line));
    background: color-mix(in srgb, var(--warn) 12%, transparent);
}

.fetch-status-chip.is-error {
    color: var(--danger);
    border-color: color-mix(in srgb, var(--danger) 62%, var(--line));
    background: color-mix(in srgb, var(--danger) 12%, transparent);
}

.column-picker {
    position: relative;
}

.column-picker[open] {
    z-index: 2147482600;
}

.column-picker summary {
    list-style: none;
}

.column-picker summary::-webkit-details-marker {
    display: none;
}

.column-picker-menu {
    position: absolute;
    z-index: 30;
    top: calc(100% + 8px);
    left: 0;
    display: grid;
    gap: 2px;
    width: 190px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
    box-shadow: var(--shadow);
}

.column-picker-menu.is-floating {
    position: fixed;
    z-index: 2147482600;
    top: var(--floating-top, 0);
    left: var(--floating-left, 0);
    right: auto;
    width: var(--floating-width, 190px);
    max-height: min(360px, calc(100vh - 16px));
    overflow: auto;
}

.controller-group-title .column-picker-menu.is-floating,
.job-controller-panel .column-picker-menu.is-floating {
    position: fixed;
    top: var(--floating-top, 0);
    left: var(--floating-left, 0);
    right: auto;
    width: var(--floating-width, 190px);
    max-height: min(360px, calc(100vh - 16px));
    overflow: auto;
}

.column-picker-menu label {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 30px;
    padding: 4px 6px;
    border-radius: 6px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 700;
}

.column-picker-menu label:hover {
    background: var(--soft);
}

.column-picker-menu input {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
}

.calendar-head, .calendar-grid {
    --calendar-zoom: 1;
    display: grid;
    grid-template-columns: repeat(7, minmax(92px, 1fr));
}
.calendar-head {
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-weight: 600;
}
.calendar-head span { padding: 10px; text-align: center; }
.calendar-cell {
    min-height: calc(126px * var(--calendar-zoom));
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: calc(8px * var(--calendar-zoom));
    display: flex;
    flex-direction: column;
    gap: 5px;
    background: #fff;
}
.calendar-cell:nth-child(7n) { border-right: 0; }
.calendar-cell.muted { background: #f8fafb; color: #9aa4ad; }
.calendar-cell.selected { outline: 2px solid var(--accent); outline-offset: -2px; }
.calendar-cell.is-picked {
    background: #e8f2f1;
    box-shadow: inset 0 0 0 2px var(--accent);
}
.calendar-cell.is-drop-target {
    background: #e8f2f1;
    box-shadow: inset 0 0 0 2px var(--accent);
}
.calendar-cell.today .day-number {
    background: var(--accent);
    color: #fff;
}
.day-number {
    width: calc(28px * var(--calendar-zoom));
    height: calc(28px * var(--calendar-zoom));
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-weight: 600;
}
.chip {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: calc(4px * var(--calendar-zoom)) calc(6px * var(--calendar-zoom));
    border-radius: 6px;
    background: #e8f2f1;
    color: #0f5f59;
    font-size: calc(12px * var(--calendar-zoom));
}
.diary-job-chip { cursor: pointer; }
.diary-job-chip.is-selected {
    box-shadow: inset 0 0 0 2px var(--accent);
    border-color: var(--accent);
}
.chip.done { background: #edf0f2; color: #66727c; }
.chip.oncall { background: #fff4d7; color: var(--warn); }
.more { font-size: calc(12px * var(--calendar-zoom)); color: var(--muted); }

.schedule-range-button {
    min-width: 128px;
    justify-content: center;
}

.engineer-schedule {
    margin-top: 14px;
    overflow: hidden;
}

.schedule-scroll {
    overflow: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}

.schedule-period-track {
    display: block;
    width: max-content;
    min-width: 100%;
}

.schedule-period-track > .schedule-grid {
    width: auto;
}

.schedule-period-track-week {
    width: max-content;
    min-width: 100%;
}

.schedule-period-track-week > .schedule-grid-week {
    width: auto;
}

.schedule-grid {
    --schedule-zoom: 1;
    --schedule-row-height: 104px;
    display: grid;
    grid-template-columns: 190px repeat(var(--schedule-days), minmax(145px, 1fr));
    min-width: calc(190px + (var(--schedule-days) * 145px));
}

.schedule-grid-week {
    --schedule-week-engineer-width: clamp(140px, 11vw, 170px);
    --schedule-week-day-width: max(150px, calc((100vw - 450px) / 7));
    --schedule-row-height: 118px;
    grid-template-columns: var(--schedule-week-engineer-width) repeat(var(--schedule-days), var(--schedule-week-day-width));
    width: max-content;
    min-width: calc(var(--schedule-week-engineer-width) + (var(--schedule-days) * var(--schedule-week-day-width)));
}

.schedule-grid-day {
    grid-template-columns: 190px repeat(var(--schedule-days), minmax(360px, 1fr));
    min-width: calc(190px + (var(--schedule-days) * 360px));
}

.schedule-grid-day .schedule-cell {
    align-content: stretch;
    grid-auto-rows: minmax(0, 1fr);
    overflow: hidden;
}

.schedule-grid-day .schedule-cell.has-single-visit {
    grid-template-rows: 1fr;
}

.schedule-grid-day .schedule-visit.is-day-line {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    height: 100%;
    box-sizing: border-box;
    padding: 5px 8px;
    overflow: hidden;
}

.schedule-grid-day .schedule-visit.is-day-line > * {
    flex: 0 0 auto;
    max-width: 100%;
    min-width: 0;
}

.schedule-grid-day .schedule-visit.is-day-line .job-number-line {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    min-width: 0;
    font-size: 15px;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.schedule-grid-day .schedule-visit.is-day-line span {
    display: block;
    min-width: 0;
    line-height: 1.08;
    white-space: normal;
    overflow-wrap: anywhere;
}

.schedule-grid-day .schedule-visit.is-day-line small {
    display: -webkit-box;
    min-width: 0;
    line-height: 1.08;
    white-space: normal;
    overflow-wrap: anywhere;
    text-overflow: clip;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.schedule-grid-day .schedule-visit.is-day-line .schedule-ticket-code {
    display: block;
    min-height: 0;
}

.schedule-grid-day .schedule-visit.is-day-line .schedule-address {
    -webkit-line-clamp: 2;
}

.schedule-grid-day .schedule-visit.is-day-line .schedule-notes {
    flex: 1 1 auto;
    min-height: 0;
    color: inherit;
    font-style: italic;
    opacity: 0.78;
    -webkit-line-clamp: 2;
}

.schedule-grid-day .schedule-visit.is-day-line .site-link-action {
    width: fit-content;
    min-width: 0;
    max-width: 130px;
    margin-top: 2px;
}

.schedule-grid-day .schedule-cell.has-multiple-visits .schedule-visit.is-day-line {
    min-height: 0;
    justify-content: flex-start;
    padding: 4px 7px;
}

.schedule-grid-day .schedule-cell.has-multiple-visits .schedule-visit.is-day-line .job-number-line {
    font-size: 14px;
}

.schedule-grid-day .schedule-cell.has-multiple-visits .schedule-visit.is-day-line small {
    -webkit-line-clamp: 1;
}

.schedule-grid-day .schedule-cell.has-multiple-visits .schedule-visit.is-day-line .schedule-summary,
.schedule-grid-day .schedule-cell.has-multiple-visits .schedule-visit.is-day-line .schedule-address,
.schedule-grid-day .schedule-cell.has-multiple-visits .schedule-visit.is-day-line .schedule-notes {
    -webkit-line-clamp: 2;
}

.schedule-grid-month {
    grid-template-columns: 160px repeat(var(--schedule-days), 76px);
    min-width: calc(160px + (var(--schedule-days) * 76px));
}

.schedule-grid-month .schedule-date {
    padding: 8px 6px;
}

.schedule-grid-month .schedule-engineer {
    padding: 10px;
}

.schedule-grid-month .schedule-cell {
    padding: 4px;
    gap: 3px;
}

.schedule-grid-month .schedule-cell.has-single-visit {
    grid-template-rows: 1fr;
}

.schedule-grid-month .schedule-visit {
    min-height: 36px;
    padding: 3px;
    gap: 1px;
}

.schedule-grid-month .schedule-cell.has-single-visit .schedule-visit {
    height: 100%;
    align-content: center;
}

.schedule-grid-month .schedule-visit strong {
    font-size: 10px;
    line-height: 1.15;
    white-space: nowrap;
    overflow-wrap: anywhere;
}

.schedule-grid-month .schedule-visit small {
    font-size: 9px;
    line-height: 1.15;
    white-space: nowrap;
    display: block;
}

.schedule-grid-month .schedule-cell.has-single-visit .schedule-visit small {
    font-size: 10px;
    line-height: 1.2;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

.schedule-grid-month .schedule-cell.is-dense-visits {
    gap: 2px;
}

.schedule-grid-month .schedule-cell.is-dense-visits .schedule-visit {
    min-height: 0;
    padding: 2px 4px;
    align-content: center;
}

.schedule-grid-month .schedule-cell.is-three-visits .schedule-visit {
    grid-template-rows: auto auto;
    align-content: center;
}

.schedule-grid-month .schedule-cell.is-dense-visits .schedule-visit strong {
    min-width: 0;
    font-size: 9px;
    line-height: 1.08;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.schedule-grid-month .schedule-cell.is-dense-visits .schedule-summary,
.schedule-grid-month .schedule-cell.is-dense-visits .schedule-address,
.schedule-grid-month .schedule-cell.is-dense-visits .schedule-subcategory,
.schedule-grid-month .schedule-cell.is-dense-visits .schedule-time,
.schedule-grid-month .schedule-cell.is-dense-visits .site-link-action {
    display: none;
}

.schedule-grid-month .schedule-cell.is-three-visits .schedule-summary {
    display: block;
    min-width: 0;
    font-size: 8px;
    line-height: 1.05;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.schedule-corner,
.schedule-date,
.schedule-engineer,
.schedule-cell {
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.schedule-corner,
.schedule-date {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #f8fafb;
}

.schedule-corner {
    left: 0;
    z-index: 3;
    padding: 12px;
    font-weight: 700;
}

.schedule-date {
    display: grid;
    gap: 2px;
    padding: 10px 12px;
    text-align: center;
    border-top: 0;
    border-left: 0;
    border-bottom: 1px solid var(--line);
    border-right: 1px solid var(--line);
    border-radius: 0;
    color: inherit;
    cursor: default;
}

.schedule-date span {
    color: var(--muted);
    font-size: 12px;
}

.schedule-date.today {
    color: var(--accent);
}

.schedule-date.weekend {
    background: #fff6dc;
}

.schedule-date.selected {
    box-shadow: inset 0 -3px 0 var(--accent);
}

.schedule-date.is-picked {
    background: #f8fafb;
    box-shadow: none;
}

.schedule-engineer {
    position: sticky;
    left: 0;
    z-index: 1;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 4px;
    padding: 6px;
    height: var(--schedule-row-height);
    min-height: var(--schedule-row-height);
    overflow: hidden;
    background: #fff;
    cursor: grab;
    text-align: center;
    color: inherit;
    text-decoration: none;
}

.schedule-engineer:hover,
.schedule-engineer.is-filtered {
    background: #e8f2f1;
    box-shadow: inset 0 0 0 2px var(--accent);
}

.schedule-engineer.is-dragging {
    opacity: 0.55;
}

.schedule-engineer.is-drop-target {
    background: #e8f2f1;
    box-shadow: inset 0 0 0 2px var(--accent);
}

.schedule-engineer strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.schedule-engineer-name .engineer-on-call-icon {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    color: #22c55e;
    stroke-width: 2.8;
}

.schedule-engineer-phone {
    max-width: 100%;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-decoration: none;
}

.schedule-engineer.is-on-call-engineer {
    grid-template-rows: 48px auto auto;
    justify-items: center;
    align-content: center;
    gap: 2px;
    padding: 6px;
}

.schedule-engineer.is-on-call-engineer .avatar-schedule {
    width: 48px;
    height: 48px;
    font-size: 18px;
}

.schedule-engineer.is-on-call-engineer .schedule-engineer-name,
.schedule-engineer.is-on-call-engineer .schedule-engineer-phone {
    width: 100%;
    justify-self: stretch;
    text-align: center;
}

.schedule-engineer.is-on-call-engineer .schedule-engineer-name {
    line-height: 1.15;
    white-space: nowrap;
}

a.schedule-engineer-phone {
    cursor: pointer;
}

a.schedule-engineer-phone:hover {
    color: var(--accent);
    text-decoration: underline;
}

.schedule-engineer span:not(.avatar) {
    color: var(--muted);
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.schedule-cell {
    position: relative;
    height: var(--schedule-row-height);
    min-height: var(--schedule-row-height);
    padding: 7px;
    display: grid;
    align-content: start;
    gap: 6px;
    background: #fff;
    transition: background 120ms ease, box-shadow 120ms ease;
    cursor: pointer;
}

.schedule-cell.weekend {
    background: #fff9e8;
}

.schedule-cell.is-on-call {
    background: #fff1b8;
    box-shadow: inset 0 0 0 2px #d99a00;
}

.schedule-cell.is-date-picked {
    background: #dff2ef;
    box-shadow: inset 0 0 0 2px var(--accent);
}

.schedule-cell.is-on-call.is-date-picked {
    background: #fff1b8;
    box-shadow: inset 0 0 0 2px var(--accent);
}

.schedule-cell.is-drop-target {
    background: #e8f2f1;
    box-shadow: inset 0 0 0 2px var(--accent);
}

.schedule-cell.is-drop-target-morning {
    background:
        linear-gradient(to bottom, rgba(239, 43, 45, 0.28) 0 50%, transparent 50% 100%),
        #e8f2f1;
}

.schedule-cell.is-drop-target-afternoon {
    background:
        linear-gradient(to bottom, transparent 0 50%, rgba(239, 43, 45, 0.28) 50% 100%),
        #e8f2f1;
}

.schedule-cell.is-drop-target-swap::after {
    content: "⇄";
    position: absolute;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    z-index: 4;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 2px solid var(--danger);
    background: rgba(15, 23, 42, 0.92);
    color: #fff;
    font-size: 23px;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 0 0 3px rgba(239, 43, 45, 0.22), 0 10px 24px rgba(15, 23, 42, 0.28);
    pointer-events: none;
}

.schedule-cell.is-saving {
    opacity: 0.65;
}

.schedule-cell.is-drop-target-swap::after {
    display: none;
}

.schedule-grid-week .schedule-cell {
    align-content: stretch;
    grid-auto-rows: minmax(0, 1fr);
    overflow: hidden;
}

.schedule-grid-day .schedule-cell:has(.schedule-visit.is-selected),
.schedule-grid-week .schedule-cell:has(.schedule-visit.is-selected) {
    overflow: visible;
    z-index: 6;
}

.schedule-grid-week .schedule-cell.has-single-visit {
    grid-template-rows: 1fr;
}

.schedule-grid-week .schedule-visit {
    min-height: 0;
    height: 100%;
    align-content: center;
    grid-template-rows: auto auto auto;
    gap: 1px;
    padding: 4px 7px;
    overflow: hidden;
}

.schedule-grid-week .schedule-visit strong {
    line-height: 1.15;
}

.schedule-grid-week .schedule-visit span,
.schedule-grid-week .schedule-visit small {
    line-height: 1.15;
}

.schedule-grid-week .schedule-cell.has-single-visit .schedule-visit,
.schedule-grid-week .schedule-cell.has-multiple-visits .schedule-visit {
    height: 100%;
}

.schedule-grid-week .schedule-cell.has-single-visit .schedule-time {
    display: none;
}

.schedule-grid-week .schedule-cell.has-single-visit .schedule-summary,
.schedule-grid-week .schedule-cell.has-single-visit .schedule-address {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

.schedule-grid-week .schedule-cell.has-multiple-visits .schedule-visit {
    grid-template-rows: none;
    align-content: start;
    padding-top: 3px;
    padding-bottom: 3px;
}

.schedule-grid-week .schedule-cell.has-multiple-visits:not(.is-dense-visits) .schedule-visit {
    padding: 2px 5px;
    gap: 0;
}

.schedule-grid-week .schedule-cell.has-multiple-visits:not(.is-dense-visits) .schedule-visit strong {
    font-size: 12px;
    line-height: 1.05;
}

.schedule-grid-week .schedule-cell.has-multiple-visits:not(.is-dense-visits) .schedule-visit span,
.schedule-grid-week .schedule-cell.has-multiple-visits:not(.is-dense-visits) .schedule-visit small {
    font-size: 10px;
    line-height: 1.05;
}

.schedule-grid-week .schedule-cell.has-half-day-single-visit .schedule-visit {
    grid-template-rows: none;
    align-content: start;
    padding: 2px 5px;
    gap: 0;
}

.schedule-grid-week .schedule-cell.has-half-day-single-visit .schedule-visit strong {
    font-size: 12px;
    line-height: 1.05;
}

.schedule-grid-week .schedule-cell.has-half-day-single-visit .schedule-visit span,
.schedule-grid-week .schedule-cell.has-half-day-single-visit .schedule-visit small {
    font-size: 10px;
    line-height: 1.05;
}

.schedule-grid-week .schedule-cell.has-half-day-single-visit .schedule-address,
.schedule-grid-week .schedule-cell.has-half-day-single-visit .site-link-action {
    display: none;
}

.schedule-grid-week .schedule-cell.has-half-day-single-visit .schedule-summary {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.schedule-grid-week .schedule-cell.has-multiple-visits:not(.is-dense-visits) .job-number-line .callout-icon,
.schedule-grid-week .schedule-cell.has-multiple-visits:not(.is-dense-visits) .job-number-line .attachment-icon,
.schedule-grid-week .schedule-cell.has-multiple-visits:not(.is-dense-visits) .job-number-line .report-sent-icon,
.schedule-grid-week .schedule-cell.has-multiple-visits:not(.is-dense-visits) .job-number-line .report-not-for-client-icon,
.schedule-grid-week .schedule-cell.has-multiple-visits:not(.is-dense-visits) .job-number-line .report-exempt-icon {
    width: 11px;
    height: 11px;
    flex-basis: 11px;
}

.schedule-grid-week .schedule-cell.has-multiple-visits .schedule-address,
.schedule-grid-week .schedule-cell.has-multiple-visits .site-link-action {
    display: none;
}

.schedule-grid-week .schedule-cell.has-multiple-visits .schedule-summary {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.schedule-grid-week .schedule-visit .schedule-notes,
.schedule-grid-month .schedule-visit .schedule-notes {
    display: -webkit-box;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    text-overflow: clip;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.schedule-grid-week .schedule-cell.is-dense-visits {
    gap: 2px;
}

.schedule-grid-week .schedule-cell.is-dense-visits .schedule-visit {
    grid-template-rows: 1fr;
    align-content: center;
    min-height: 0;
    padding: 2px 4px;
    gap: 0;
}

.schedule-grid-week .schedule-cell.is-three-visits .schedule-visit {
    grid-template-rows: auto auto;
    align-content: center;
}

.schedule-grid-week .schedule-cell.is-dense-visits .schedule-visit strong {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    min-width: 0;
    min-height: 14px;
    font-size: 10px;
    line-height: 1.1;
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.schedule-grid-week .schedule-cell.is-dense-visits .job-number-line .callout-icon,
.schedule-grid-week .schedule-cell.is-dense-visits .job-number-line .attachment-icon,
.schedule-grid-week .schedule-cell.is-dense-visits .job-number-line .report-sent-icon,
.schedule-grid-week .schedule-cell.is-dense-visits .job-number-line .report-not-for-client-icon,
.schedule-grid-week .schedule-cell.is-dense-visits .job-number-line .report-exempt-icon {
    display: inline-flex;
    width: 10px;
    height: 10px;
    flex: 0 0 10px;
}

.schedule-grid-week .schedule-cell.is-dense-visits .schedule-summary,
.schedule-grid-week .schedule-cell.is-dense-visits .schedule-address,
.schedule-grid-week .schedule-cell.is-dense-visits .schedule-subcategory,
.schedule-grid-week .schedule-cell.is-dense-visits .schedule-time,
.schedule-grid-week .schedule-cell.is-dense-visits .site-link-action {
    display: none;
}

.schedule-grid-week .schedule-cell.is-three-visits .schedule-summary {
    display: block;
    min-width: 0;
    font-size: 9px;
    line-height: 1.05;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.schedule-visit {
    position: relative;
    display: grid;
    gap: 2px;
    padding: 8px 7px;
    border-radius: 7px;
    background: #e8f2f1;
    color: #0f5f59;
    border: 1px solid #c8dfdc;
    cursor: grab;
    touch-action: manipulation;
    user-select: none;
}

.schedule-visit.is-drop-tile-morning::before,
.schedule-visit.is-drop-tile-afternoon::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    z-index: 3;
    border: 3px solid var(--danger);
    background: rgba(239, 43, 45, 0.32);
    pointer-events: none;
}

.schedule-visit.is-drop-tile-morning::before {
    top: 0;
    bottom: 50%;
    border-radius: 7px 7px 0 0;
    border-bottom-width: 2px;
}

.schedule-visit.is-drop-tile-afternoon::before {
    top: 50%;
    bottom: 0;
    border-radius: 0 0 7px 7px;
    border-top-width: 2px;
}

.schedule-visit.is-drop-tile-morning::after,
.schedule-visit.is-drop-tile-afternoon::after,
.schedule-visit.is-drop-tile-swap::after {
    position: absolute;
    left: 50%;
    z-index: 4;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    min-width: 86px;
    min-height: 24px;
    padding: 2px 8px;
    border-radius: 999px;
    border: 2px solid #ffffff;
    background: var(--danger);
    color: #ffffff;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.26);
    pointer-events: none;
}

.schedule-visit.is-drop-tile-morning::after {
    content: "08:30-12:00";
    top: 25%;
}

.schedule-visit.is-drop-tile-afternoon::after {
    content: "12:00-17:00";
    top: 75%;
}

.schedule-visit.is-drop-tile-swap::after {
    content: "SWITCH";
    top: 50%;
    min-width: 72px;
    min-height: 30px;
    font-size: 12px;
}

.schedule-visit .site-link-action {
    display: none;
}

.schedule-duplicate-action {
    display: none;
}

.schedule-floating-action {
    position: fixed;
    z-index: 2147482400;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    min-height: 30px;
    padding: 0;
    border: 2px solid #7de5ff;
    border-radius: 11px;
    background: #07314a;
    color: #4fd1ff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), 0 10px 24px rgba(0, 0, 0, 0.38), 0 0 18px rgba(79, 209, 255, 0.3);
    filter: none;
    touch-action: none;
}

.schedule-floating-action[hidden] {
    display: none;
}

.schedule-floating-action svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    display: block;
    stroke-width: 2.6;
}

.schedule-edit-popover {
    background: #07314a;
    color: #ffffff;
    border-color: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 10px 24px rgba(0, 0, 0, 0.38), 0 0 18px rgba(255, 255, 255, 0.24);
}

.schedule-swap-popover {
    background: #251942;
    color: #d8c2ff;
    border-color: #d8c2ff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 10px 24px rgba(0, 0, 0, 0.38), 0 0 18px rgba(168, 85, 247, 0.3);
}

.schedule-book-popover {
    background: #082f24;
    color: #8dffcf;
    border-color: #8dffcf;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 10px 24px rgba(0, 0, 0, 0.38), 0 0 18px rgba(34, 197, 94, 0.32);
}

.schedule-delete-popover {
    background: #21080a;
    color: #ff6f73;
    border-color: #ff6f73;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 10px 24px rgba(0, 0, 0, 0.38), 0 0 18px rgba(239, 43, 45, 0.3);
}

.schedule-visit.is-selected .site-link-action {
    display: inline-flex;
}

.schedule-duplicate-ghost {
    position: fixed !important;
    z-index: 2147482500;
    pointer-events: none;
    opacity: 0.88;
    transform: rotate(-1deg);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.42), 0 0 0 2px rgba(239, 43, 45, 0.7) !important;
}

.site-link-action {
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 24px;
    padding: 0 7px;
    border-radius: 6px;
    background: var(--accent);
    color: var(--accent-ink);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.site-link-action svg {
    width: 13px;
    height: 13px;
}

.schedule-visit.done {
    background: #edf0f2;
    color: #66727c;
    border-color: #d8dee3;
}

.schedule-visit,
.schedule-visit * {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

.schedule-visit.is-selected {
    border-color: var(--danger) !important;
    outline: 0;
    box-shadow: inset 0 0 0 2px var(--danger) !important;
}

.schedule-visit.is-report-owed {
    animation: report-owed-edge-pulse 1.35s ease-in-out infinite;
    outline: 2px solid #ff2d2d;
    outline-offset: -2px;
}

@keyframes report-owed-edge-pulse {
    0%,
    100% {
        box-shadow:
            inset 0 0 0 1px rgba(255, 45, 45, 0.72),
            0 0 0 0 rgba(255, 45, 45, 0.32),
            0 0 8px rgba(255, 45, 45, 0.34);
    }
    50% {
        box-shadow:
            inset 0 0 0 2px rgba(255, 45, 45, 0.95),
            0 0 0 4px rgba(255, 45, 45, 0.2),
            0 0 18px rgba(255, 45, 45, 0.72);
    }
}

.schedule-visit.is-navigation-target {
    outline: 3px solid #facc15;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(250, 204, 21, 0.24), 0 0 22px rgba(250, 204, 21, 0.34) !important;
}

.schedule-visit.is-navigation-target .schedule-address {
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

.navigate-dialog {
    width: min(420px, calc(100vw - 24px));
}

.navigate-dialog textarea {
    resize: vertical;
}

.navigate-dialog input,
.navigate-dialog textarea {
    font-size: 16px;
}

.navigate-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.navigate-actions .button {
    justify-content: center;
}

.schedule-grid-week .schedule-cell.is-dense-visits .schedule-visit.is-selected {
    box-shadow: inset 0 0 0 2px var(--danger) !important;
}

.schedule-visit[style*="--tile-bg"] {
    background: var(--tile-bg);
    color: var(--tile-fg);
    border-color: transparent;
    border-width: 3px;
    box-shadow: none;
}

.schedule-visit strong,
.schedule-visit span,
.schedule-visit small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.job-number-line {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    max-width: 100%;
}

.schedule-ticket-code {
    display: block;
    max-width: 100%;
    color: inherit;
    font-size: 10px !important;
    font-weight: 700;
    line-height: 1.05;
    opacity: 0.68;
}

.schedule-ticket-stacked {
    display: block !important;
    width: 100%;
    white-space: nowrap !important;
    -webkit-line-clamp: 1 !important;
}

.schedule-visit-heading {
    display: grid;
    align-content: center;
    gap: 1px;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.schedule-visit-heading .job-number-line {
    width: 100%;
}

.job-number-line .callout-icon,
.job-number-line .attachment-icon,
.job-number-line .report-sent-icon,
.job-number-line .report-not-for-client-icon,
.job-number-line .report-exempt-icon {
    width: 13px;
    height: 13px;
    flex: 0 0 13px;
    stroke-width: 2.8;
}

.job-number-line .attachment-icon {
    margin-left: 3px;
    opacity: 1;
    stroke-width: 3.2;
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.45)) drop-shadow(0 0 2px rgba(0, 0, 0, 0.35));
}

.job-number-line .report-sent-icon {
    margin-left: -2px;
    opacity: 0.95;
    stroke-width: 3;
    color: #000000;
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.4)) drop-shadow(0 0 2px rgba(0, 0, 0, 0.25));
}

.job-number-line .report-not-for-client-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: -2px;
    color: #000000;
    opacity: 0.95;
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.4)) drop-shadow(0 0 2px rgba(0, 0, 0, 0.25));
}

.job-number-line .report-not-for-client-icon svg {
    width: 100%;
    height: 100%;
    stroke-width: 3;
}

.job-number-line .report-not-for-client-icon::after {
    content: "";
    position: absolute;
    width: 120%;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    transform: rotate(-45deg);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.45);
}

.job-number-line .report-exempt-icon {
    opacity: 0.9;
}

.schedule-visit strong.job-number-line {
    display: inline-flex;
}

.schedule-visit span,
.schedule-visit small {
    font-size: 12px;
    line-height: 1.25;
}

.schedule-visit .schedule-address {
    color: inherit;
    opacity: 0.82;
}

.schedule-visit .schedule-subcategory {
    font-weight: inherit;
}

.schedule-visit .schedule-misc-line {
    font-weight: inherit;
}

.schedule-visit .schedule-notes {
    color: inherit;
    opacity: 0.78;
    font-style: italic;
}

.schedule-visit .schedule-notes-more {
    color: inherit;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}

.engineer-schedule.is-single-engineer {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 168px);
    max-height: calc(100vh - 168px);
    height: calc(100dvh - 168px);
    max-height: calc(100dvh - 168px);
}

.engineer-schedule.is-single-engineer.schedule-mode-month {
    height: auto;
    max-height: none;
}

.engineer-schedule.is-single-engineer .schedule-scroll {
    flex: 1 1 auto;
    min-height: 0;
}

.engineer-schedule.is-single-engineer .schedule-grid {
    --schedule-header-height: 58px;
    --schedule-row-height: clamp(260px, calc(100vh - 302px), 560px);
    --schedule-row-height: clamp(260px, calc(100dvh - 302px), 560px);
    grid-template-rows: var(--schedule-header-height) var(--schedule-row-height);
    grid-auto-rows: var(--schedule-row-height);
    align-items: stretch;
}

.engineer-schedule.is-single-engineer.schedule-mode-month .schedule-grid-month {
    --schedule-header-height: 50px;
    --schedule-row-height: 104px;
    grid-template-rows: var(--schedule-header-height) var(--schedule-row-height);
    grid-auto-rows: var(--schedule-row-height);
}

.engineer-schedule.is-single-engineer .schedule-corner,
.engineer-schedule.is-single-engineer .schedule-date {
    box-sizing: border-box;
    height: var(--schedule-header-height);
    min-height: var(--schedule-header-height);
    max-height: var(--schedule-header-height);
    align-content: center;
    overflow: hidden;
}

.engineer-schedule.is-single-engineer .schedule-engineer,
.engineer-schedule.is-single-engineer .schedule-cell {
    height: var(--schedule-row-height);
    min-height: var(--schedule-row-height);
    max-height: var(--schedule-row-height);
}

.engineer-schedule.is-single-engineer .schedule-cell {
    align-content: stretch;
    grid-auto-rows: minmax(0, 1fr);
    overflow: hidden;
}

.engineer-schedule.is-single-engineer .schedule-cell.has-single-visit {
    grid-template-rows: 1fr;
}

.engineer-schedule.is-single-engineer .schedule-visit {
    min-height: 0;
    height: 100%;
    max-height: 100%;
    align-content: start;
    padding: 10px;
    gap: 4px;
    overflow: hidden;
}

.engineer-schedule.is-single-engineer .schedule-visit strong {
    font-size: 16px;
    line-height: 1.15;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.engineer-schedule.is-single-engineer .schedule-visit span,
.engineer-schedule.is-single-engineer .schedule-visit small {
    display: -webkit-box;
    min-width: 0;
    font-size: 13px;
    line-height: 1.18;
    white-space: normal;
    overflow-wrap: anywhere;
    text-overflow: clip;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.engineer-schedule.is-single-engineer .schedule-visit .schedule-summary,
.engineer-schedule.is-single-engineer .schedule-visit .schedule-address,
.engineer-schedule.is-single-engineer .schedule-visit .schedule-notes {
    -webkit-line-clamp: 6;
    white-space: pre-line;
}

.engineer-schedule.is-single-engineer .schedule-grid-month .schedule-visit {
    min-height: 0;
}

.engineer-schedule.is-single-engineer .schedule-grid-month .schedule-cell.has-single-visit .schedule-visit {
    align-content: start;
}

.engineer-schedule.is-single-engineer .schedule-grid-month .schedule-visit strong {
    font-size: 13px;
    white-space: normal;
}

.engineer-schedule.is-single-engineer .schedule-grid-month .schedule-visit small,
.engineer-schedule.is-single-engineer .schedule-grid-month .schedule-cell.has-single-visit .schedule-visit small {
    font-size: 12px;
    line-height: 1.18;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

.engineer-schedule.is-single-engineer.schedule-mode-month .schedule-grid-month .schedule-visit {
    padding: 3px;
    gap: 1px;
}

.engineer-schedule.is-single-engineer.schedule-mode-month .schedule-grid-month .schedule-visit strong {
    font-size: 10px;
    line-height: 1.15;
    white-space: nowrap;
}

.engineer-schedule.is-single-engineer.schedule-mode-month .schedule-grid-month .schedule-visit small,
.engineer-schedule.is-single-engineer.schedule-mode-month .schedule-grid-month .schedule-cell.has-single-visit .schedule-visit small {
    font-size: 9px;
    line-height: 1.15;
    -webkit-line-clamp: 3;
}

.engineer-schedule.is-single-engineer .schedule-grid-week .schedule-cell.has-single-visit .schedule-time {
    display: -webkit-box;
}

.engineer-schedule.is-single-engineer .schedule-grid-week .schedule-cell.has-multiple-visits .schedule-address {
    display: -webkit-box;
}

.engineer-schedule.is-single-engineer .schedule-grid-week .schedule-cell.is-dense-visits .schedule-summary,
.engineer-schedule.is-single-engineer .schedule-grid-week .schedule-cell.is-dense-visits .schedule-address,
.engineer-schedule.is-single-engineer .schedule-grid-week .schedule-cell.is-dense-visits .schedule-subcategory,
.engineer-schedule.is-single-engineer .schedule-grid-week .schedule-cell.is-dense-visits .schedule-time,
.engineer-schedule.is-single-engineer .schedule-grid-week .schedule-cell.is-dense-visits .schedule-notes {
    display: -webkit-box;
}

.engineer-schedule.is-single-engineer .schedule-grid-week .schedule-cell.is-dense-visits .schedule-visit strong {
    font-size: 13px;
}

/* Two jobs share one schedule row. Keep both stacked ticket/job headings clear
   without changing the more spacious single-job layout. */
.schedule-grid-day .schedule-cell.has-double-visits .schedule-visit.is-day-line .job-number-line {
    font-size: 13px;
    line-height: 1.04;
}

.schedule-grid-day .schedule-cell.has-double-visits .schedule-visit.is-day-line span,
.schedule-grid-day .schedule-cell.has-double-visits .schedule-visit.is-day-line small {
    font-size: 11px;
    line-height: 1.04;
}

.schedule-grid-day .schedule-cell.has-double-visits .schedule-ticket-code {
    font-size: 9px !important;
}

.schedule-grid-week .schedule-cell.has-double-visits .schedule-visit strong {
    font-size: 11px !important;
    line-height: 1;
}

.schedule-grid-week .schedule-cell.has-double-visits .schedule-visit span,
.schedule-grid-week .schedule-cell.has-double-visits .schedule-visit small {
    font-size: 9px !important;
    line-height: 1;
}

.schedule-grid-week .schedule-cell.has-double-visits .schedule-ticket-code {
    font-size: 9px !important;
}

.schedule-grid-month .schedule-cell.has-double-visits {
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 2px;
}

.schedule-grid-month .schedule-cell.has-double-visits .schedule-visit {
    min-height: 0;
    padding: 2px 3px;
    gap: 0;
}

.schedule-grid-month .schedule-cell.has-double-visits .schedule-visit strong {
    font-size: 9px !important;
    line-height: 1.05;
}

.schedule-grid-month .schedule-cell.has-double-visits .schedule-visit span,
.schedule-grid-month .schedule-cell.has-double-visits .schedule-visit small {
    font-size: 8px !important;
    line-height: 1.05;
}

.schedule-grid-month .schedule-cell.has-double-visits .schedule-ticket-code {
    font-size: 8px !important;
}

.schedule-grid-day .schedule-cell.has-half-day-single-visit,
.schedule-grid-week .schedule-cell.has-half-day-single-visit,
.schedule-grid-month .schedule-cell.has-half-day-single-visit,
.engineer-schedule.is-single-engineer .schedule-cell.has-half-day-single-visit {
    grid-template-rows: repeat(2, minmax(0, 1fr));
}

.schedule-cell.has-half-day-single-visit.has-morning-half .schedule-visit {
    grid-row: 1;
}

.schedule-cell.has-half-day-single-visit.has-afternoon-half .schedule-visit {
    grid-row: 2;
}

.schedule-cell.has-half-day-single-visit .schedule-visit {
    height: 100%;
    min-height: 0;
    align-content: start;
}

/* Month half-day tiles have only half a schedule row. Reserve that space for
   the two-line ticket/job heading so neither identifier is vertically clipped. */
.schedule-grid-month .schedule-cell.has-half-day-single-visit .schedule-visit {
    grid-template-rows: auto;
    align-content: center;
}

.schedule-grid-month .schedule-cell.has-half-day-single-visit .schedule-visit-heading {
    height: auto;
    min-height: 25px;
    grid-template-rows: auto auto;
    align-content: center;
}

.engineer-schedule.is-single-engineer .schedule-grid-month .schedule-cell.has-half-day-single-visit {
    grid-template-rows: repeat(2, minmax(0, 1fr));
}

.schedule-grid-month .schedule-cell.has-half-day-single-visit .schedule-visit > :is(
    .schedule-subcategory,
    .schedule-summary,
    .schedule-address,
    .schedule-time,
    .schedule-notes,
    .site-link-action
) {
    display: none !important;
}

.visit-warning {
    padding: 8px 10px;
    border-radius: 7px;
    background: #fff9e8;
    color: #765100;
    border: 1px solid #efd58d;
    font-size: 12px;
    font-weight: 700;
}

body.is-visit-dragging {
    overscroll-behavior: none;
}

body.is-schedule-selection-dragging,
body.is-schedule-selection-dragging .schedule-grid,
body.is-schedule-selection-dragging .schedule-cell,
body.is-schedule-selection-dragging .schedule-visit {
    cursor: crosshair;
}

body.is-duplicate-dragging {
    cursor: grabbing;
}

.schedule-empty {
    grid-column: 1 / -1;
}

select.needs-site {
    background: #fff4d7;
    border-color: #d99a00;
    color: #765100;
    font-weight: 700;
}

.schedule-visit[style*="--tile-bg"] span,
.schedule-visit[style*="--tile-bg"] small {
    color: var(--tile-muted);
}

.is-dragging {
    opacity: 0.55;
}

.stack { display: grid; gap: 10px; padding: 14px; }
.record {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px;
    display: grid;
    gap: 8px;
}
.diary-job-record { cursor: pointer; }
.diary-job-record.is-selected {
    border-color: var(--accent);
    box-shadow: inset 0 0 0 2px var(--accent);
}
.record strong, .record span { display: block; }
.record span, .record p { color: var(--muted); }
.record p { margin: 0; }
dl { display: grid; grid-template-columns: 90px 1fr; gap: 4px 8px; margin: 0; }
dt { color: var(--muted); }
dd { margin: 0; }

.table-panel { overflow: auto; }
.table-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
}
.table-scroll .data-table {
    margin: 0;
}
.data-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 980px;
}
.data-table.compact { min-width: 680px; }
.data-table th {
    text-align: left;
    color: #4b5563;
    font-size: 13px;
    background: #f8fafb;
    border-bottom: 1px solid var(--line);
    padding: 10px;
    position: sticky;
    top: 0;
}
.table-sort-button {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 3px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: inherit;
    text-align: left;
    cursor: pointer;
}
.table-sort-button:hover,
.table-sort-button.is-sorted {
    color: var(--accent);
}
.table-sort-button [data-sort-indicator] {
    color: inherit;
    font-size: 9px;
    white-space: nowrap;
}

.financials-pin-shell {
    display: grid;
    min-height: min(620px, calc(100vh - 210px));
    place-items: center;
    padding: 32px 16px;
}

.financials-pin-card {
    display: grid;
    gap: 20px;
    width: min(100%, 520px);
    padding: 32px;
}

.financials-pin-card h2 {
    margin: 4px 0 8px;
}

.financials-pin-card p,
.financials-pin-note {
    color: var(--muted);
}

.financials-pin-icon {
    display: grid;
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--accent) 12%, var(--panel));
    color: var(--accent);
    place-items: center;
}

.financials-pin-icon svg {
    width: 28px;
    height: 28px;
}

.financials-pin-form {
    display: grid;
    gap: 14px;
}

.financials-pin-form input {
    margin-top: 6px;
    font-size: 22px;
    font-variant-numeric: tabular-nums;
    letter-spacing: .35em;
    text-align: center;
}

.financials-pin-message {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: 1px solid color-mix(in srgb, var(--warn) 42%, var(--line));
    border-radius: 8px;
    background: color-mix(in srgb, var(--warn) 8%, var(--panel));
}

.financials-pin-message.is-danger {
    border-color: color-mix(in srgb, var(--danger) 42%, var(--line));
    background: color-mix(in srgb, var(--danger) 8%, var(--panel));
    color: var(--danger);
}

.financials-toolbar .toolbar-end {
    margin-left: auto;
}

.financial-kpi-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.financial-kpi-grid article {
    display: grid;
    gap: 5px;
    min-height: 104px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--panel);
    box-shadow: var(--shadow-soft);
}

.financial-kpi-grid span,
.financial-kpi-grid small,
.financial-performer div > span {
    color: var(--muted);
    font-size: 12px;
}

.financial-kpi-grid strong {
    align-self: center;
    font-size: clamp(18px, 1.5vw, 25px);
    font-variant-numeric: tabular-nums;
}

.financial-rankings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 14px;
}

.financial-ranking-panel {
    min-width: 0;
    overflow: hidden;
}

.financial-ranking-panel > .panel-head > svg {
    color: var(--accent);
}

.financial-ranking-panel ol {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.financial-performer {
    display: grid;
    grid-template-columns: 30px minmax(170px, 1.5fr) repeat(4, minmax(96px, .8fr));
    gap: 10px;
    align-items: center;
    min-width: 760px;
    padding: 10px 14px;
    border-top: 1px solid var(--line);
}

.financial-ranking-panel ol {
    overflow-x: auto;
}

.financial-performer-rank {
    display: grid;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: var(--soft);
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    place-items: center;
}

.financial-performer > a {
    display: grid;
    gap: 2px;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.financial-performer > a span {
    overflow: hidden;
    color: var(--muted);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.financial-performer > div {
    display: grid;
    gap: 2px;
    font-variant-numeric: tabular-nums;
}

.financial-performer.is-top {
    box-shadow: inset 3px 0 color-mix(in srgb, var(--success) 72%, transparent);
}

.financial-performer.is-bottom {
    box-shadow: inset 3px 0 color-mix(in srgb, var(--danger) 72%, transparent);
}

.financial-trend {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    width: max-content;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.financial-trend svg {
    width: 13px;
    height: 13px;
}

.financial-trend.is-up,
.positive-value {
    color: var(--success) !important;
}

.financial-trend.is-down,
.negative-value {
    color: var(--danger) !important;
}

.financial-metric-with-trend {
    display: grid;
    gap: 3px;
}

.financial-jobs-panel .table-title-tools > div > span {
    color: var(--muted);
    font-size: 12px;
}

.financial-jobs-table {
    min-width: 1540px;
}

.financial-jobs-table td,
.financial-jobs-table th {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.financial-jobs-table td[data-job-column="name"] {
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.financial-job-number-cell {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.financial-lines-button {
    width: 26px;
    height: 26px;
    color: var(--accent);
}

.financial-lines-button svg {
    width: 16px;
    height: 16px;
}

.financial-lines-dialog {
    width: min(1120px, calc(100vw - 32px));
    max-width: 1120px;
}

.financial-lines-dialog .dialog-form {
    max-height: min(760px, calc(100vh - 48px));
}

.financial-lines-dialog .dialog-form > header > div {
    display: grid;
    gap: 3px;
}

.financial-lines-dialog .dialog-form > header span {
    color: var(--muted);
    font-size: 12px;
}

.financial-lines-dialog-body {
    min-height: 180px;
    overflow: auto;
    padding: 16px;
}

.financial-cost-line-section,
.financial-transaction-section {
    display: grid;
    gap: 10px;
}

.financial-transaction-section {
    margin-top: 22px;
}

.financial-cost-line-section h3,
.financial-transaction-section h3 {
    margin: 0;
    font-size: 14px;
}

.financial-cost-lines-table {
    min-width: 760px;
}

.financial-cost-lines-table td:nth-child(n + 3) {
    text-align: right;
    white-space: nowrap;
}

.financial-cost-lines-table tr.is-total td {
    border-top: 2px solid var(--line);
    background: color-mix(in srgb, var(--accent) 5%, var(--panel));
    font-weight: 800;
}

.financial-lines-table {
    min-width: 940px;
}

.financial-lines-table td:nth-child(4) {
    min-width: 280px;
    white-space: normal;
}

.financial-lines-table .financial-line-money {
    text-align: right;
    white-space: nowrap;
}

.financial-lines-table tr.is-total td {
    border-top: 2px solid var(--line);
    background: color-mix(in srgb, var(--accent) 5%, var(--panel));
    font-weight: 800;
}

[data-financial-lines-status].is-danger {
    color: var(--danger);
}

.financials-pin-settings {
    margin-top: 14px;
    padding: 14px;
}

.financials-pin-settings form {
    align-items: end;
    margin-top: 14px;
}

@media (max-width: 1180px) {
    .financial-kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .financial-rankings-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .financial-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .financials-pin-card {
        padding: 22px;
    }
}
.data-table .select-col {
    width: 42px;
    text-align: center;
}
.data-table .select-col input {
    width: auto;
}
a[x-apple-data-detectors],
.chip a[x-apple-data-detectors],
.schedule-visit a[x-apple-data-detectors] {
    color: inherit !important;
    text-decoration: none !important;
    pointer-events: none;
}
.data-table td {
    border-bottom: 1px solid var(--line);
    padding: 8px 10px;
    vertical-align: middle;
}
.data-table tr:hover > td { background: #fbfcfd; }
.data-table tr.is-selected td {
    background: #dff2ef;
    box-shadow: inset 0 1px 0 var(--accent), inset 0 -1px 0 var(--accent);
}
.jobs-table tr.is-selected td,
.jobs-table tr.is-selected:hover td {
    background: #3a0c12;
    color: #fff4f4;
    box-shadow: inset 0 2px 0 #ff2a2a, inset 0 -2px 0 #ff2a2a;
}
.jobs-table tr.is-selected td:first-child {
    box-shadow: inset 2px 0 0 #ff2a2a, inset 0 2px 0 #ff2a2a, inset 0 -2px 0 #ff2a2a;
}
.jobs-table tr.is-selected td:last-child {
    box-shadow: inset -2px 0 0 #ff2a2a, inset 0 2px 0 #ff2a2a, inset 0 -2px 0 #ff2a2a;
}
.jobs-table tr.is-selected select {
    border-color: #ff4d4d;
    background: #17080a;
    color: #fff4f4;
}

.jobs-table tr.is-selected input {
    border-color: #ff4d4d;
    background: #17080a;
    color: #fff4f4;
}

.job-days-cell {
    display: grid;
    gap: 3px;
    min-width: 84px;
}

.job-days-cell input {
    width: 72px;
    padding: 5px 7px;
}

.job-days-detail-form {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

.job-days-detail-form input {
    width: 72px;
    padding: 5px 7px;
}

.job-days-cell small {
    color: var(--muted);
    font-size: 11px;
    white-space: nowrap;
}

.jobs-table tr.is-selected .job-days-cell small {
    color: #ffd0d0;
}
.jobs-table tr.is-selected .icon-button {
    border-color: rgba(255, 77, 77, 0.7);
}

.job-notes-toggle {
    position: relative;
}

.job-notes-toggle span {
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--danger);
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    line-height: 16px;
}

.job-notes-toggle[aria-expanded="true"] {
    border-color: var(--danger);
    color: var(--danger);
}

.job-notes-toggle .job-notes-chevron {
    width: 14px;
    height: 14px;
    transition: transform 140ms ease;
}

.job-notes-toggle[aria-expanded="true"] .job-notes-chevron {
    transform: rotate(180deg);
}

.job-notes-dropdown-row td {
    padding: 0;
    background: #f7fafb;
}

.job-notes-dropdown {
    display: grid;
    gap: 10px;
    padding: 12px;
}

.job-notes-dropdown-section {
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
    background: var(--panel);
}

.job-notes-dropdown-section > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.job-notes-dropdown-section h3 {
    margin: 0;
    font-size: 13px;
}

.job-notes-ticket-heading {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.job-notes-ticket-heading small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
}

.job-notes-dropdown-section header span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.job-notes-dropdown-list {
    display: grid;
    gap: 8px;
    padding: 10px;
}

.job-notes-dropdown-note {
    display: grid;
    gap: 6px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.job-notes-dropdown-note.is-reply {
    margin-left: 18px;
}

.job-notes-dropdown-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.job-notes-dropdown-meta > div {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.job-notes-dropdown-meta strong {
    font-size: 12px;
}

.job-notes-dropdown-meta time {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.job-notes-dropdown-note p {
    margin: 0;
    color: var(--text);
    font-size: 13px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.job-notes-dropdown-replies {
    display: grid;
    gap: 8px;
}

body.theme-dark .job-notes-dropdown-row td,
body.theme-vivid-dark .job-notes-dropdown-row td {
    background: #0f1a22;
}

body.theme-dark .job-notes-dropdown-note,
body.theme-vivid-dark .job-notes-dropdown-note {
    background: #111c24;
}

.job-note-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.job-note-edit-box summary,
.job-note-history summary {
    cursor: pointer;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
}

.job-note-edit-box form {
    display: grid;
    gap: 8px;
    min-width: min(420px, 100%);
    margin-top: 8px;
}

.job-note-edit-box textarea {
    min-height: 84px;
}

.job-note-delete {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 28px;
    padding: 0 9px;
    border: 1px solid rgba(239, 43, 45, 0.45);
    border-radius: 999px;
    background: transparent;
    color: var(--danger);
    font-size: 12px;
    font-weight: 900;
}

.job-note-delete svg {
    width: 14px;
    height: 14px;
}

.job-note-history {
    margin-top: 8px;
}

.job-note-history article {
    display: grid;
    gap: 5px;
    margin-top: 8px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: color-mix(in srgb, var(--muted) 8%, transparent);
}

.job-note-history article header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.job-note-history article strong,
.job-note-history article time {
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
}

.job-note-history article p {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.data-table .is-muted td { color: #87919a; background: #fafafa; }
.jobs-table tr.is-muted.is-selected td,
.jobs-table tr.is-muted.is-selected:hover td {
    background: #3a0c12;
    color: #fff4f4;
}

.jobs-new-import-notice {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 12px;
    border: 1px solid color-mix(in srgb, var(--success) 55%, var(--line));
    border-radius: 10px;
    padding: 10px 12px;
    background: color-mix(in srgb, var(--success) 12%, var(--panel));
    color: var(--ink);
}

.jobs-new-import-notice svg {
    color: var(--success);
    flex: 0 0 19px;
    height: 19px;
    width: 19px;
}

.jobs-table tr.is-new-job-notification:not(.is-selected) td,
.jobs-table tr.is-new-job-notification:not(.is-selected):hover td,
.jobs-table tr.is-muted.is-new-job-notification:not(.is-selected) td,
.jobs-table tr.is-muted.is-new-job-notification:not(.is-selected):hover td {
    background: color-mix(in srgb, var(--success) 16%, var(--panel));
    color: var(--ink);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--success) 55%, var(--line)),
                inset 0 -1px 0 color-mix(in srgb, var(--success) 55%, var(--line));
}

.jobs-table tr.is-new-job-notification:not(.is-selected) td:first-child {
    box-shadow: inset 4px 0 0 var(--success),
                inset 0 1px 0 color-mix(in srgb, var(--success) 55%, var(--line)),
                inset 0 -1px 0 color-mix(in srgb, var(--success) 55%, var(--line));
}

.new-job-pill {
    display: inline-flex;
    align-items: center;
    margin-left: 7px;
    border-radius: 999px;
    padding: 2px 7px;
    background: var(--success);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
}
.actions, .inline-form {
    display: flex;
    gap: 6px;
    align-items: center;
}
.actions form, .inline-form { margin: 0; }

.data-table td.actions {
    display: table-cell;
    min-width: 154px;
    white-space: nowrap;
}

.data-table td.actions > form,
.data-table td.actions > a,
.data-table td.actions > button {
    display: inline-flex;
    margin: 0 4px 0 0;
    vertical-align: middle;
}

.data-table td.actions > :last-child {
    margin-right: 0;
}

.table-link {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.table-link strong,
.table-link span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.table-link:hover strong {
    color: var(--accent);
}

.job-site-cell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 36px;
    gap: 6px;
    align-items: center;
}

.job-site-cell span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.needs-site-label {
    color: var(--danger);
    font-weight: 700;
}

.ip-actions {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 6px;
    min-width: max-content;
    max-width: none;
    white-space: nowrap;
    vertical-align: middle;
}

.ip-actions .ip-link {
    display: inline-block;
    width: auto;
    min-width: max-content;
    max-width: none;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
}

.ip-actions .ip-link,
.ip-actions .ping-button,
.ip-actions .ping-status {
    flex: 0 0 auto;
}

.controllers-table {
    min-width: 1340px;
}

.controllers-table-standard {
    min-width: 1100px;
}

.controllers-table-iq {
    min-width: 1560px;
}

.controllers-table.has-hidden-columns {
    min-width: max-content;
}

.controllers-table tr[data-controller-row] {
    cursor: pointer;
}

.controllers-table th.device-select-cell,
.controllers-table td.device-select-cell {
    width: 42px;
    min-width: 42px;
    max-width: 42px;
    padding-left: 10px;
    padding-right: 6px;
    text-align: center;
}

.device-select-check {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    margin: 0;
    cursor: pointer;
}

.device-select-check input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--accent);
}

.controllers-table tr[data-controller-row]:hover > td,
.controllers-table tr[data-controller-row]:focus-visible > td,
.controllers-table tr[data-controller-row].is-more-open > td {
    background: color-mix(in srgb, var(--panel) 82%, var(--line) 18%);
}

.controllers-table tr[data-controller-row].is-device-selected > td {
    background: color-mix(in srgb, var(--panel) 82%, var(--accent) 18%);
}

.controllers-table tr[data-controller-row]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.job-controller-scroll {
    border-top: 1px solid var(--line);
}

.job-controller-panel .column-picker-menu {
    left: auto;
    right: 0;
}

.job-controller-table {
    table-layout: fixed;
    min-width: 920px;
}

.job-controller-table.has-hidden-columns {
    min-width: max-content;
}

.job-controller-table th,
.job-controller-table td {
    max-width: 170px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.job-controller-table th[data-controller-column="lan"],
.job-controller-table td[data-controller-column="lan"],
.job-controller-table th[data-controller-column="os"],
.job-controller-table td[data-controller-column="os"],
.job-controller-table th[data-controller-column="days"],
.job-controller-table td[data-controller-column="days"] {
    width: 68px;
}

.job-controller-table th[data-controller-column="id"],
.job-controller-table td[data-controller-column="id"] {
    width: 150px;
}

.job-controller-table th[data-controller-column="type"],
.job-controller-table td[data-controller-column="type"] {
    width: 190px;
}

.job-controller-table th[data-controller-column="ip"],
.job-controller-table td[data-controller-column="ip"] {
    width: 140px;
}

.job-controller-table th[data-controller-column="hostname"],
.job-controller-table td[data-controller-column="hostname"] {
    width: 170px;
}

.job-controller-table th[data-controller-column="mac"],
.job-controller-table td[data-controller-column="mac"],
.job-controller-table th[data-controller-column="serial"],
.job-controller-table td[data-controller-column="serial"] {
    width: 170px;
}

.job-controller-table .ip-link {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
    white-space: nowrap;
}

.controller-group-stack {
    display: grid;
    gap: 14px;
}

.controller-group {
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
    background: var(--panel);
}

.controller-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
    background: var(--soft);
}

.controller-group-head h3 {
    margin: 0;
    font-size: 15px;
}

.controller-group-title {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.controller-group-title span {
    color: var(--muted);
    font-weight: 800;
}

.controller-group-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.controller-group-actions .button {
    min-height: 32px;
    padding: 0 10px;
}

.auto-ping-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 32px;
    padding: 0 9px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.auto-ping-toggle input {
    width: 15px;
    height: 15px;
    accent-color: var(--accent);
}

.auto-ping-toggle.is-checked {
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 36%, transparent);
}

.controller-group-actions .controller-cancel-button:not([hidden]) {
    border-color: var(--danger);
    color: var(--danger);
}

.controller-group-actions .lookup-status {
    min-width: 118px;
    text-align: right;
    white-space: nowrap;
}

.controller-security-form {
    display: grid;
    grid-template-columns: 68px 74px 96px 34px;
    gap: 6px;
    align-items: end;
    min-width: 286px;
}

.controller-security-form label {
    display: grid;
    gap: 2px;
}

.controller-security-form span {
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.1;
}

.controller-security-form input,
.controller-security-form select {
    min-height: 34px;
    padding: 5px 7px;
    font-size: 12px;
}

.controller-security-form label.is-disabled {
    opacity: .5;
}

.controller-security-form input:disabled,
.controller-security-form select:disabled {
    cursor: not-allowed;
    background: color-mix(in srgb, var(--panel) 74%, #8b96a5);
    color: var(--muted);
    border-color: color-mix(in srgb, var(--line) 78%, #8b96a5);
}

.controller-security-form .icon-button {
    width: 34px;
    height: 34px;
    min-height: 34px;
}

.controller-unsaved-cell {
    position: relative;
    background: color-mix(in srgb, var(--danger) 20%, var(--panel)) !important;
    box-shadow: inset 0 0 0 2px var(--danger), 0 0 16px color-mix(in srgb, var(--danger) 28%, transparent);
}

.controller-unsaved-cell input,
.controller-unsaved-cell select {
    border-color: var(--danger);
}

input.controller-unsaved-cell,
select.controller-unsaved-cell,
textarea.controller-unsaved-cell {
    border-color: var(--danger) !important;
    background: color-mix(in srgb, var(--danger) 16%, var(--field-bg, var(--panel))) !important;
}

.controller-table-input,
.controller-table-select {
    width: 92px;
    min-height: 32px;
    padding: 5px 7px;
    font-size: 12px;
}

.controller-table-select {
    width: 112px;
}

.controller-table-security-form {
    display: inline-flex;
    min-width: 0;
    grid-template-columns: none;
}

.controller-more-settings-form {
    display: block;
    min-width: 0;
}

.controller-more-settings-form .controller-info-grid {
    max-width: 520px;
    grid-template-columns: minmax(0, 1fr) 36px;
    align-items: end;
}

@keyframes controller-cell-red-flash {
    0% {
        background: color-mix(in srgb, var(--danger) 50%, transparent);
        box-shadow: inset 0 0 0 2px var(--danger);
    }
    100% {
        background: transparent;
        box-shadow: inset 0 0 0 0 transparent;
    }
}

.controller-field-flash {
    animation: controller-cell-red-flash 900ms ease;
}

.controller-more-settings-form label {
    min-width: 0;
    padding: 9px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
}

.controller-more-settings-form label input {
    width: 100%;
    min-height: 32px;
}

.controller-more-settings-form .controller-info-grid > div,
.controller-more-settings-form .controller-info-grid > label {
    grid-column: 1;
}

.controller-more-settings-form .controller-info-grid > .controller-more-send-supervisor {
    grid-column: 2;
    grid-row: 2;
}

.controller-more-settings-form .controller-info-grid > .controller-more-send-access {
    grid-column: 2;
    grid-row: 3;
}

.sip-summary-row {
    background: color-mix(in srgb, var(--panel) 92%, var(--soft) 8%);
}

.sip-group-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    padding: 0 8px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--panel);
    color: var(--ink);
    font-size: 12px;
    font-weight: 800;
}

.sip-group-toggle svg {
    width: 15px;
    height: 15px;
    transition: transform 140ms ease;
}

.sip-group-toggle.is-open svg {
    transform: rotate(180deg);
}

.sip-detail-row > td {
    padding: 0;
    background: color-mix(in srgb, var(--panel) 86%, var(--soft) 14%);
}

.sip-detail-panel {
    display: grid;
    gap: 0;
    padding: 10px 14px 12px;
    border-top: 1px solid var(--line);
}

.sip-detail-grid {
    display: grid;
    grid-template-columns: 72px 72px minmax(220px, 1fr) 44px;
    gap: 10px;
    align-items: center;
    min-width: 0;
    padding: 7px 8px;
}

.sip-detail-head {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
}

.sip-detail-item {
    border-top: 1px solid var(--line);
}

.sip-detail-item strong,
.sip-detail-item span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.controller-more-row > td {
    padding: 0;
    background: color-mix(in srgb, var(--panel) 88%, var(--soft) 12%);
}

.controller-credentials-row > td {
    padding: 0;
    background: color-mix(in srgb, var(--panel) 90%, var(--soft) 10%);
}

.controller-credential-form {
    display: grid;
    grid-template-columns: minmax(160px, 0.8fr) minmax(150px, 1fr) minmax(170px, 1fr) 36px;
    gap: 10px;
    align-items: end;
    padding: 12px 14px;
    border-top: 1px solid var(--line);
}

.controller-credential-form label {
    display: grid;
    gap: 5px;
    min-width: 0;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.controller-credential-form .check {
    align-self: center;
    display: flex;
    align-items: center;
    text-transform: none;
    font-size: 12px;
}

.controller-credential-form input:not([type="checkbox"]) {
    min-height: 34px;
    font-size: 12px;
}

.customer-device-credentials {
    display: grid;
    gap: 8px;
    padding: 12px;
}

.credential-device-group {
    display: grid;
    gap: 6px;
}

.credential-settings-row {
    display: grid;
    grid-template-columns: minmax(130px, 0.8fr) minmax(130px, 0.8fr) minmax(150px, 1fr) minmax(170px, 1fr) auto;
    gap: 10px;
    align-items: end;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
}

.credential-settings-row strong {
    align-self: center;
    min-width: 0;
}

.credential-row-kind {
    align-self: center;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.credential-settings-row label {
    display: grid;
    gap: 5px;
    min-width: 0;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.credential-row-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: flex-end;
}

.password-reveal-field {
    position: relative;
    display: block;
}

.password-reveal-field input {
    width: 100%;
    padding-right: 42px;
}

.password-reveal-button {
    position: absolute;
    top: 50%;
    right: 4px;
    width: 28px;
    min-width: 28px;
    height: 28px;
    min-height: 28px;
    transform: translateY(-50%);
    color: var(--muted);
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

.password-reveal-button:hover,
.password-reveal-button.is-revealing {
    color: var(--text);
    border-color: var(--line);
    background: color-mix(in srgb, var(--panel) 82%, var(--line) 18%);
}

.credential-extra-row {
    margin-left: 18px;
    background: color-mix(in srgb, var(--panel) 88%, var(--line) 12%);
}

@media (max-width: 760px) {
    .credential-settings-row {
        grid-template-columns: 1fr;
    }

    .credential-extra-row {
        margin-left: 0;
    }

    .credential-row-actions {
        justify-content: flex-start;
    }
}

.controller-more-panel {
    display: grid;
    gap: 14px;
    padding: 14px;
    border-top: 1px solid var(--line);
}

.controller-more-section {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.controller-more-section h4 {
    margin: 0;
    font-size: 14px;
}

.controller-info-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(130px, 1fr));
    gap: 8px;
}

.controller-info-grid div {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 9px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
}

.controller-info-grid span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.controller-info-grid strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
}

.controller-vcnc-panel {
    display: grid;
    gap: 8px;
    min-width: 520px;
}

.controller-vcnc-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.controller-vcnc-toolbar .button {
    min-height: 30px;
    padding: 0 9px;
}

.controller-vcnc-list {
    display: grid;
    gap: 4px;
}

.controller-vcnc-grid-head,
.controller-vcnc-form {
    display: grid;
    grid-template-columns: 42px minmax(120px, 1.35fr) 72px 82px minmax(88px, 1fr) minmax(92px, 1fr) 34px;
    gap: 5px;
    align-items: center;
}

.controller-vcnc-grid-head {
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.controller-vcnc-form {
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--soft);
}

.controller-vcnc-form strong,
.controller-vcnc-form span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.controller-vcnc-form input {
    min-height: 32px;
    padding: 5px 7px;
    font-size: 12px;
}

.controller-vcnc-form .icon-button {
    width: 32px;
    height: 32px;
    min-height: 32px;
}

.empty.mini {
    padding: 8px;
    font-size: 12px;
}
.ip-link {
    color: var(--link-blue);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ip-link:hover,
.ip-link:focus-visible {
    color: color-mix(in srgb, var(--link-blue) 76%, var(--ink));
}
.ping-button.is-online {
    color: var(--success);
    border-color: #9bd3ad;
    background: #effaf2;
}
.ping-button.is-offline {
    color: var(--danger);
    border-color: #f0a6a0;
    background: #fff1f0;
}
.ping-status {
    display: inline-block;
    width: 170px;
    min-width: 170px;
    max-width: 170px;
    color: var(--muted);
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ping-status.is-online { color: var(--success); }
.ping-status.is-offline { color: var(--danger); }
.ping-status.is-pending { color: var(--warn); }

.firmware-version {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.firmware-warning {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    min-height: 28px;
    color: var(--warn);
    cursor: pointer;
    touch-action: manipulation;
}

.firmware-warning--yellow {
    color: var(--warn);
}

.firmware-warning--orange {
    color: #fb923c;
}

.firmware-warning--red {
    color: var(--danger);
}

.firmware-warning svg {
    width: 15px;
    height: 15px;
    stroke-width: 2.4;
}

.firmware-lookup-table input {
    min-width: 120px;
}

.callout-job-number-select {
    min-height: 220px;
    line-height: 1.35;
}

.tap-tooltip {
    position: fixed;
    z-index: 10000;
    max-width: min(320px, calc(100vw - 28px));
    padding: 9px 11px;
    border: 1px solid rgba(250, 204, 21, 0.65);
    border-radius: 8px;
    background: var(--panel);
    color: var(--text);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.34), 0 0 18px rgba(250, 204, 21, 0.15);
    font-size: 13px;
    line-height: 1.35;
    font-weight: 700;
    pointer-events: none;
}

.status-pill {
    width: fit-content;
    padding: 7px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--soft);
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.status-pill.success {
    border-color: #9bd3ad;
    background: #effaf2;
    color: #1f6b35;
}

.status-pill.warning {
    border-color: rgba(245, 158, 11, 0.7);
    background: rgba(245, 158, 11, 0.13);
    color: var(--warn);
}

.status-pill.danger {
    border-color: rgba(239, 68, 68, 0.9);
    background: rgba(239, 68, 68, 0.14);
    color: #ff8a8a;
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.18);
}

.commissioning-sheet-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.commissioning-sheet-status svg {
    width: 14px;
    height: 14px;
}

.commissioning-sheet-status-detail {
    display: block;
    margin-top: 5px;
    max-width: 230px;
    line-height: 1.35;
}

.commissioning-sheet-status-detail time {
    font: inherit;
}

.actions .commissioning-table-action {
    min-height: 34px;
    padding: 0 9px;
    gap: 5px;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.actions .commissioning-table-action svg {
    width: 14px;
    height: 14px;
}

.actions label.commissioning-checkin-action {
    cursor: pointer;
    color: var(--success);
    border-color: color-mix(in srgb, var(--success) 60%, var(--line));
    background: color-mix(in srgb, var(--success) 8%, var(--panel));
}

.actions label.commissioning-checkin-action:hover {
    color: #fff;
    border-color: var(--success);
    background: var(--success);
}

input, select, textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 8px 9px;
    background: var(--field-bg);
    color: var(--field-text);
}

.currency-input-wrap {
    position: relative;
    display: block;
    width: 100%;
}

.currency-input-wrap::before {
    content: "£";
    position: absolute;
    left: 9px;
    top: 50%;
    z-index: 1;
    transform: translateY(-50%);
    color: color-mix(in srgb, var(--ink) 72%, var(--muted));
    font-weight: 800;
    line-height: 1;
    pointer-events: none;
    opacity: .9;
}

.currency-input-wrap .currency-input {
    padding-left: 24px;
}

#bulk-edit-visits-dialog input[type="time"] {
    color-scheme: dark;
}

#bulk-edit-visits-dialog input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(1.8);
    opacity: 1;
}
textarea { resize: vertical; }
label { display: grid; gap: 5px; color: #3d4650; font-size: 13px; font-weight: 600; }
.check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    white-space: nowrap;
}
.check input { width: auto; }
.check.compact {
    white-space: normal;
}
.settings-check-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 8px 12px;
}
.settings-check-grid .check {
    min-height: 36px;
    padding: 6px 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--soft);
    white-space: normal;
}

.microsoft-auth-config-section {
    min-width: 0;
    display: grid;
    gap: 11px;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--soft);
}

.microsoft-auth-config-head {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.microsoft-auth-config-head > div {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.microsoft-auth-config-head h3,
.microsoft-auth-config-head p {
    margin: 0;
}

.microsoft-auth-config-head p {
    max-width: 760px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}

.microsoft-organisation-add {
    flex: 0 0 auto;
    white-space: nowrap;
}

.microsoft-organisation-list {
    min-width: 0;
    display: grid;
    gap: 8px;
}

.microsoft-organisation-row {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(160px, 0.9fr) minmax(270px, 1.35fr) minmax(112px, 0.45fr) 36px;
    align-items: end;
    gap: 9px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
}

.microsoft-organisation-row label {
    min-width: 0;
}

.settings-panel .microsoft-organisation-row select {
    width: 100%;
}

.microsoft-organisation-remove {
    align-self: end;
}

.microsoft-organisation-empty {
    margin: 0;
    padding: 11px;
    border: 1px dashed var(--line);
    border-radius: 8px;
    color: var(--muted);
    font-size: 12px;
    text-align: center;
}

.microsoft-organisation-empty[hidden] {
    display: none;
}

.microsoft-multitenant-guidance {
    margin: 0;
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: start;
    gap: 8px;
    padding: 10px;
    border-left: 3px solid var(--accent);
    border-radius: 0 8px 8px 0;
    background: color-mix(in srgb, var(--accent) 6%, var(--panel));
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}

.microsoft-auth-error {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--line));
    border-radius: 8px;
    color: var(--danger);
    background: color-mix(in srgb, var(--danger) 8%, var(--panel));
}

.microsoft-auth-error svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.microsoft-multitenant-guidance svg {
    width: 17px;
    height: 17px;
    margin-top: 1px;
    color: var(--accent);
}

.microsoft-pilot-users {
    min-width: 0;
    margin: 0;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--soft);
}

.microsoft-pilot-users legend {
    padding: 0 6px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 800;
}

.microsoft-pilot-users > p {
    margin: 0 0 10px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}

.microsoft-pilot-user-grid {
    max-height: 280px;
    overflow: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 8px;
}

.microsoft-pilot-user {
    min-width: 0;
    padding: 9px 10px;
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: start;
    gap: 9px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
    cursor: pointer;
}

.microsoft-pilot-user input {
    width: 16px;
    height: 16px;
    margin: 2px 0 0;
    accent-color: var(--accent);
}

.microsoft-pilot-user:has(input:checked) {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 7%, var(--panel));
}

.microsoft-pilot-user > span {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.microsoft-pilot-user strong,
.microsoft-pilot-user small {
    min-width: 0;
    overflow-wrap: anywhere;
}

.microsoft-pilot-user small,
.microsoft-pilot-empty {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.4;
}

.microsoft-pilot-empty {
    margin: 0;
    padding: 10px;
}

.microsoft-pilot-links {
    align-items: end;
}

.secret-input-row.microsoft-pilot-link-row {
    grid-template-columns: minmax(0, 1fr) 36px 36px;
}

@media (max-width: 760px) {
    .microsoft-auth-config-head {
        align-items: stretch;
        flex-direction: column;
    }

    .microsoft-organisation-add {
        width: 100%;
        justify-content: center;
    }

    .microsoft-organisation-row {
        grid-template-columns: minmax(0, 1fr) 36px;
    }

    .microsoft-organisation-row label {
        grid-column: 1;
    }

    .microsoft-organisation-remove {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
    }
}

.toolbar-form {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}

.toolbar-check {
    min-height: 40px;
    padding: 0 4px;
}

.search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0 8px;
    min-height: 40px;
}
.search input {
    border: 0;
    min-width: 240px;
    padding-left: 0;
}
.search select {
    width: auto;
    min-width: 118px;
    border: 0;
    border-right: 1px solid var(--line);
    border-radius: 0;
    padding-left: 0;
    background-color: transparent;
}
.upload {
    display: flex;
    gap: 8px;
    align-items: center;
}

.empty {
    color: var(--muted);
    text-align: center;
    padding: 22px;
}

.list-panel {
    overflow: hidden;
}
.list-row {
    display: grid;
    gap: 4px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
}
.list-row.active, .list-row:hover { background: var(--soft); }
.list-row span, .list-row small { color: var(--muted); }
.list-row.site-is-inactive { opacity: .68; }
.list-row.site-is-inactive:hover, .list-row.site-is-inactive.active { opacity: 1; }
.site-inactive-label { margin-left: 7px; padding: 3px 7px; display: inline-flex; align-items: center; color: #8a5700 !important; border: 1px solid color-mix(in srgb, #d18a00 45%, var(--line)); border-radius: 999px; background: color-mix(in srgb, #d18a00 11%, var(--panel)); font-size: 9px; font-weight: 850; line-height: 1; text-transform: uppercase; letter-spacing: .05em; vertical-align: middle; }
.icon-button.site-active-toggle { color: #9a6700; border-color: color-mix(in srgb, #d18a00 45%, var(--line)); background: color-mix(in srgb, #d18a00 8%, var(--panel)); }
.icon-button.site-active-toggle:hover { color: #fff; border-color: #9a6700; background: #9a6700; }
.icon-button.site-active-toggle.success { color: var(--success); border-color: color-mix(in srgb, var(--success) 55%, var(--line)); background: color-mix(in srgb, var(--success) 9%, var(--panel)); }
.icon-button.site-active-toggle.success:hover { color: #fff; background: var(--success); }

.detail-form {
    padding: 14px;
    display: grid;
    gap: 12px;
}
.detail-form .panel-head { padding: 0 0 12px; }
.fields-2, .fields-3, .fields-4, .fields-5 {
    display: grid;
    gap: 10px;
}
.fields-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fields-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fields-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fields-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.field-with-link {
    min-width: 0;
}

.site-edit-form.is-site-locked [data-site-edit-control] {
    background: color-mix(in srgb, var(--panel) 88%, var(--line) 12%);
    color: var(--ink);
    opacity: 1;
    cursor: default;
    pointer-events: none;
}

.site-edit-form.is-site-editing [data-site-edit-control] {
    pointer-events: auto;
}

.site-client-field[data-client-url]:not(.is-editing) {
    cursor: pointer;
}

.site-client-field[data-client-url]:not(.is-editing) select {
    cursor: pointer;
    transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.site-client-field[data-client-url]:not(.is-editing):hover select {
    border-color: #ef2b2d;
    box-shadow: 0 0 0 2px rgba(239, 43, 45, 0.22);
}

.site-edit-toggle.is-active {
    border-color: #ffffff;
    background: #071e34;
    color: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 0 18px rgba(148, 197, 255, 0.24);
}

.field-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 12px;
}

.field-inline-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--link-blue);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.field-inline-link svg {
    width: 13px;
    height: 13px;
}

.visit-schedule-range {
    grid-template-columns: minmax(120px, 1.1fr) minmax(120px, 1.1fr) minmax(88px, 0.75fr) minmax(88px, 0.75fr) minmax(120px, 1fr);
}
.section-title { margin-top: 12px; }

.site-server-action {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
}

.site-server-action .button {
    width: 100%;
    justify-content: center;
}

.site-vpn-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--soft);
}

.site-vpn-status.is-connected {
    border-color: color-mix(in srgb, var(--success) 58%, var(--line));
    box-shadow: inset 3px 0 0 var(--success);
}

.site-vpn-status.is-disconnected {
    border-color: color-mix(in srgb, var(--danger) 58%, var(--line));
    box-shadow: inset 3px 0 0 var(--danger);
}

.site-vpn-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.site-vpn-copy span,
.site-vpn-copy small {
    color: var(--muted);
    font-size: 12px;
}

.site-vpn-copy strong {
    font-size: 14px;
}

.site-vpn-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.site-vpn-status > .button {
    flex: 0 0 auto;
}

.local-connection-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    min-height: 36px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.local-connection-toggle input {
    width: 15px;
    height: 15px;
    accent-color: var(--accent);
}

.local-connection-toggle.is-checked {
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 34%, transparent);
}

.ip-link.is-local-link {
    text-decoration-style: double;
}

.site-scan-panel {
    display: grid;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
    background: var(--soft);
}

.site-scan-panel[hidden] {
    display: none;
}

.site-scan-summary {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.site-scan-results {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.site-scan-toolbar {
    display: flex;
    align-items: end;
    gap: 8px;
    width: 100%;
}

.site-scan-toolbar label {
    display: grid;
    gap: 3px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
}

.site-scan-toolbar select {
    min-width: 180px;
}

.site-scan-result {
    display: grid;
    grid-template-columns: 18px minmax(106px, auto) minmax(120px, 1fr) 28px;
    align-items: center;
    gap: 7px;
    padding: 5px 5px 5px 9px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
    font-size: 12px;
    font-weight: 800;
    max-width: 100%;
}

.site-scan-result.is-saving {
    opacity: 0.58;
    pointer-events: none;
}

.site-scan-check {
    display: grid;
    place-items: center;
    min-width: 18px;
}

.site-scan-check input {
    margin: 0;
}

.site-scan-result small {
    min-width: 0;
    overflow: hidden;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.site-scan-address {
    white-space: nowrap;
}

.site-scan-result .icon-button {
    width: 28px;
    height: 28px;
    min-width: 28px;
}

@media (max-width: 720px) {
    .site-scan-results {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .site-scan-toolbar {
        align-items: stretch;
        flex-wrap: wrap;
    }

    .site-scan-toolbar label,
    .site-scan-toolbar select {
        min-width: min(100%, 220px);
    }

    .site-scan-result {
        grid-template-columns: 18px minmax(92px, auto) minmax(0, 1fr) 28px;
    }
}

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

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

.info-grid div,
.info-grid .info-link,
.info-grid .info-card-form {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px;
    min-width: 0;
    background: #fff;
}

.info-grid .info-link {
    color: inherit;
}

.info-grid button.info-link {
    width: 100%;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.info-grid .info-link:hover {
    border-color: var(--accent);
    background: #e8f2f1;
}

.info-grid a.info-link:hover {
    border-color: #ef2b2d;
    box-shadow: 0 0 0 2px rgba(239, 43, 45, 0.22);
}

.info-grid .job-number-copy-card {
    position: relative;
    padding: 0;
}

.info-grid .job-number-copy-link {
    display: block;
    min-width: 0;
    padding: 10px 44px 10px 10px;
    color: inherit;
    text-decoration: none;
}

.info-grid .job-number-copy-button {
    position: absolute;
    top: 7px;
    right: 7px;
    width: 28px;
    height: 28px;
    min-height: 28px;
    border-radius: 6px;
}

.info-grid .job-number-copy-button svg {
    width: 14px;
    height: 14px;
}

.info-grid .job-number-copy-card:hover {
    border-color: var(--accent);
    background: #e8f2f1;
}

.info-grid .wide {
    grid-column: 1 / -1;
}

.info-grid span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    margin-bottom: 4px;
}

.info-grid strong {
    display: block;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.info-grid .info-card-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 6px 10px;
}

.info-grid .info-card-form > span,
.info-grid .info-card-form > textarea,
.info-grid .info-card-form > small,
.info-grid .info-card-form > p,
.info-grid .info-card-form > strong {
    grid-column: 1 / -1;
}

.info-grid .info-card-form > textarea {
    width: 100%;
    min-height: 52px;
    resize: vertical;
}

.info-grid .info-card-form > button {
    grid-column: 2;
    justify-self: end;
}

.customer-email-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.customer-email-actions .button {
    min-height: 36px;
}

.customer-email-helper-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0;
    min-width: 0;
    color: var(--muted);
}

.customer-email-helper-row small {
    min-width: 0;
}

.customer-email-helper-row .button {
    flex: 0 0 auto;
    min-height: 36px;
}

.info-grid [data-copy-feedback] {
    display: block;
    min-height: 16px;
    margin-top: 4px;
    color: var(--success);
    font-size: 12px;
    font-weight: 800;
}

.info-grid .job-number-copy-button .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    min-height: 0;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.job-scope-panel form {
    display: grid;
    gap: 12px;
}

.job-scope-panel label {
    padding: 0 14px 14px;
}

.job-scope-panel textarea {
    min-height: 108px;
    resize: vertical;
}

.job-scope-readonly {
    padding: 0 14px 14px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

dialog {
    border: 0;
    border-radius: 8px;
    padding: 0;
    width: min(640px, calc(100vw - 32px));
    background: var(--popup);
    color: var(--ink);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.25);
}

dialog.is-draggable-dialog {
    position: fixed;
}

dialog.is-dialog-dragging {
    user-select: none;
}

dialog.is-draggable-dialog .dialog-form header {
    cursor: move;
    touch-action: none;
}

dialog.is-draggable-dialog .dialog-form header button,
dialog.is-draggable-dialog .dialog-form header a,
dialog.is-draggable-dialog .dialog-form header input,
dialog.is-draggable-dialog .dialog-form header select,
dialog.is-draggable-dialog .dialog-form header textarea {
    cursor: auto;
    touch-action: auto;
}

#visit-dialog,
#bulk-job-dialog {
    width: min(720px, calc(100vw - 20px));
}

#controller-io-list-dialog {
    width: min(1220px, calc(100vw - 24px));
}

.report-preview-dialog {
    width: min(1180px, calc(100vw - 20px));
    max-height: min(920px, calc(100vh - 20px));
}

.report-preview-shell {
    height: min(880px, calc(100vh - 20px));
    grid-template-rows: auto minmax(0, 1fr);
}

.report-preview-body {
    min-height: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
    background: color-mix(in srgb, var(--panel) 88%, #ffffff 12%);
}

.report-preview-body iframe,
.report-preview-body img {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.report-preview-body img {
    object-fit: contain;
    padding: 10px;
}

.dra-assessment-dialog {
    width: min(980px, calc(100vw - 20px));
    max-height: min(920px, calc(100vh - 20px));
}

.dra-assessment-shell {
    max-height: min(900px, calc(100vh - 20px));
    grid-template-rows: auto minmax(0, 1fr);
}

.dra-assessment-body {
    min-height: 0;
    overflow: auto;
    border-top: 1px solid var(--line);
    background: var(--panel);
}

.dra-assessment-loading,
.dra-assessment-load-error {
    padding: 24px;
    color: var(--muted);
    font-weight: 800;
}

.dra-view {
    display: grid;
    gap: 0;
}

.dra-view-status {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid var(--line);
}

.dra-view-status.is-safe {
    color: var(--success);
    background: color-mix(in srgb, var(--success) 8%, var(--panel));
}

.dra-view-status.is-unsafe {
    color: var(--danger);
    background: color-mix(in srgb, var(--danger) 8%, var(--panel));
}

.dra-view-status svg {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
}

.dra-view-status strong,
.dra-view-status span {
    display: block;
}

.dra-view-status span {
    margin-top: 3px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.dra-view-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin: 0;
    background: var(--line);
    border-bottom: 1px solid var(--line);
}

.dra-view-meta > div,
.dra-view-fields > div {
    min-width: 0;
    padding: 10px 12px;
    background: var(--panel);
}

.dra-view-meta dt,
.dra-view-fields span,
.dra-view-note span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.dra-view-meta dd {
    margin: 3px 0 0;
    overflow-wrap: anywhere;
    font-size: 13px;
    font-weight: 800;
}

.dra-view-section {
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
}

.dra-view-section:last-child {
    border-bottom: 0;
}

.dra-view-section h3 {
    margin: 0 0 10px;
    font-size: 15px;
}

.dra-view-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
}

.dra-view-fields .is-wide {
    grid-column: 1 / -1;
}

.dra-view-fields strong,
.dra-view-note strong {
    display: block;
    margin-top: 4px;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
    font-size: 13px;
}

.dra-view-answer-list {
    border-top: 1px solid var(--line);
}

.dra-view-answer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 14px;
    align-items: center;
    padding: 9px 0;
    border-bottom: 1px solid var(--line);
}

.dra-view-answer span {
    min-width: 0;
    font-size: 13px;
    font-weight: 700;
}

.dra-view-answer strong {
    min-width: 38px;
    text-align: right;
    font-size: 12px;
}

.dra-view-answer strong.is-yes {
    color: var(--success);
}

.dra-view-answer strong.is-no {
    color: var(--danger);
}

.dra-view-answer strong.is-na,
.dra-view-answer strong.is-blank {
    color: var(--muted);
}

.dra-view-answer small {
    grid-column: 1 / -1;
    color: var(--danger);
    font-weight: 700;
}

.dra-view-note {
    margin-top: 10px;
    padding: 10px 12px;
    border-left: 3px solid var(--accent);
    background: var(--soft);
}

.dra-view-note.is-danger {
    border-left-color: var(--danger);
}

@media (max-width: 640px) {
    .dra-view-meta,
    .dra-view-fields {
        grid-template-columns: minmax(0, 1fr);
    }

    .dra-view-fields .is-wide {
        grid-column: auto;
    }
}

dialog::backdrop { background: rgba(15, 23, 42, 0.45); }
.dialog-form {
    display: grid;
    gap: 12px;
    padding: 16px;
    min-width: 0;
    background: var(--popup);
    border-radius: 8px;
}
.dialog-form header, .dialog-form footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.dialog-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.dialog-form h2 { margin: 0; }
.dialog-form footer { justify-content: flex-end; }
.dialog-form label,
.dialog-form input,
.dialog-form select,
.dialog-form textarea {
    width: 100%;
    min-width: 0;
}

#visit-dialog .dialog-form input,
#visit-dialog .dialog-form select,
#visit-dialog .dialog-form textarea,
#bulk-job-dialog .dialog-form input,
#bulk-job-dialog .dialog-form select,
#bulk-job-dialog .dialog-form textarea {
    border-radius: 8px;
}

.controller-io-list-dialog {
    max-height: min(820px, calc(100vh - 48px));
    grid-template-rows: auto auto auto minmax(0, 1fr);
}

.controller-io-chart-panel {
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: color-mix(in srgb, var(--panel) 94%, var(--soft));
}

.controller-io-chart-panel[hidden] {
    display: none;
}

.controller-io-chart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.controller-io-chart-head h3 {
    margin: 0;
    font-size: 16px;
}

.controller-io-chart-head span {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.controller-io-chart-panel canvas {
    display: block;
    width: 100%;
    height: 220px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--bg);
    touch-action: none;
    user-select: none;
}

.controller-io-table-scroll {
    max-height: min(620px, calc(100vh - 170px));
}

.controller-io-value-cell {
    display: grid;
    grid-template-columns: minmax(64px, 1fr) 28px;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 3px 5px;
    border: 1px solid transparent;
    border-radius: 7px;
}

.controller-io-table td[data-controller-io-value] {
    min-width: 150px;
}

.controller-io-value-cell [data-controller-io-value-text] {
    grid-column: 1;
}

.controller-io-units {
    text-align: left;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.controller-io-value-cell .icon-button {
    grid-column: 2;
    justify-self: center;
    align-self: center;
    width: 28px;
    min-width: 28px;
    height: 28px;
    min-height: 28px;
    padding: 0;
}

.controller-io-value-cell .icon-button.is-active {
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 34%, transparent);
}

.controller-io-value-cell.is-alarm {
    border-color: var(--danger);
    background: color-mix(in srgb, var(--danger) 22%, var(--panel));
    color: #ffffff;
    box-shadow: 0 0 16px color-mix(in srgb, var(--danger) 42%, transparent);
}

.controller-io-value-cell.is-alarm .controller-io-units,
.controller-io-value-cell.is-alarm .icon-button {
    color: #ffffff;
}

.controller-io-table th,
.controller-io-table td {
    white-space: nowrap;
}

.controller-io-table td:nth-child(7),
.controller-io-table td:nth-child(10) {
    min-width: 220px;
    max-width: 360px;
    white-space: normal;
}

.controller-io-table th:nth-child(9),
.controller-io-table td:nth-child(9) {
    min-width: 76px;
    text-align: left;
}

.controller-io-table td:nth-child(2) {
    min-width: 150px;
}

.job-picker {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.job-picker small {
    color: var(--danger);
    font-size: 12px;
    font-weight: 800;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.form-grid .full {
    grid-column: 1 / -1;
}

.job-notes-panel form {
    display: grid;
    gap: 12px;
}

.job-notes-panel > form {
    padding-bottom: 14px;
}

.job-notes-panel > form > label,
.job-notes-panel > form > .note-mention-picker,
.job-notes-panel > form > .private-note-check {
    margin-left: 14px;
    margin-right: 14px;
}

.job-notes-panel {
    display: grid;
    gap: 14px;
}

.job-notes-panel .job-note-add-button:not(:disabled) > span {
    color: #ffffff !important;
}

.job-scope-panel,
.job-subsettings-panel,
.health-safety-panel,
.job-documents-panel,
.near-miss-panel,
.job-notes-panel,
.job-rates-panel,
.report-template-panel,
.reports-panel,
.shared-upload-panel,
.job-controller-panel {
    margin-top: 14px;
}

.toolbar + .job-scope-panel {
    margin-top: 0;
}

.job-notes-list {
    display: grid;
    gap: 12px;
    padding: 0 14px 14px;
}

.job-notes-list > [data-job-note-hidden] {
    display: grid;
}

.job-notes-list > .job-note-hidden-wrap {
    display: none;
}

.job-notes-list.is-expanded > .job-note-hidden-wrap {
    display: grid;
}

.job-notes-more {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    width: fit-content;
    margin: -4px auto 14px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--accent);
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

.job-notes-more svg,
[data-customer-fetch-report-toggle] .lucide-chevron-down {
    width: 16px;
    height: 16px;
    transition: transform 160ms ease;
}

.job-notes-more[aria-expanded="true"] svg,
[data-customer-fetch-report-toggle][aria-expanded="true"] .lucide-chevron-down {
    transform: rotate(180deg);
}

.job-notes-more:hover {
    text-decoration: underline;
}

.job-note {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
}

.job-note-body {
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px;
    background: #fff;
}

.job-note-body header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.job-note-body time {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.job-note-body p {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.note-mention-picker {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--soft);
    overflow: hidden;
}

.note-mention-picker summary {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 10px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

.note-mention-picker summary svg {
    width: 15px;
    height: 15px;
}

.note-mention-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 6px;
    padding: 0 10px 10px;
}

.note-mention-options label {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 7px;
    row-gap: 1px;
    align-items: center;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 7px 8px;
    background: var(--panel);
}

.note-mention-options input {
    grid-row: span 2;
    width: auto;
}

.note-mention-options span,
.note-mention-options small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.note-mention-options small {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
}

.job-note-mentions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 8px;
}

.job-note-mentions svg {
    width: 14px;
    height: 14px;
    color: var(--muted);
}

.job-note-mentions span {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    max-width: 180px;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0 8px;
    background: var(--soft);
    color: var(--ink);
    font-size: 12px;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.job-note-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.job-note-attachment {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    max-width: 320px;
    min-height: 28px;
    padding: 4px 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--soft);
    color: var(--ink);
    font-size: 12px;
    font-weight: 800;
}

.job-note-attachment:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.job-note-attachment svg {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
}

.job-note-attachment span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.job-note-attachment small {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 11px;
}

.job-note-image-attachment {
    display: grid;
    width: min(210px, 100%);
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--soft);
}

.job-note-image-thumbnail {
    display: block;
    width: 100%;
    height: 132px;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: var(--panel);
    cursor: zoom-in;
}

.job-note-image-thumbnail img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.job-note-image-attachment > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 2px 6px;
    min-width: 0;
    padding: 5px 6px 5px 8px;
}

.job-note-image-attachment > div > span {
    min-width: 0;
    overflow: hidden;
    color: var(--ink);
    font-size: 12px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.job-note-image-attachment > div > small {
    grid-column: 1;
    color: var(--muted);
    font-size: 11px;
}

.job-note-image-attachment > div > .icon-button {
    grid-column: 2;
    grid-row: 1 / span 2;
    width: 30px;
    height: 30px;
}

.note-attachment-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: -4px 14px 0;
}

.job-note-reply-box .note-attachment-preview {
    margin-right: 0;
    margin-left: 0;
}

.note-attachment-preview-item {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) 28px;
    align-items: center;
    gap: 7px;
    width: min(260px, 100%);
    min-height: 54px;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--soft);
}

.note-attachment-preview-item > img {
    width: 52px;
    height: 44px;
    border-radius: 5px;
    object-fit: cover;
}

.note-attachment-preview-item > span {
    min-width: 0;
    overflow: hidden;
    color: var(--ink);
    font-size: 12px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.note-attachment-preview-item:not(:has(img)) > span {
    grid-column: 1 / 3;
    padding-left: 6px;
}

.note-attachment-preview-remove {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--muted);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.note-attachment-preview-remove:hover {
    background: color-mix(in srgb, var(--danger) 12%, transparent);
    color: var(--danger);
}

.job-note-image-dialog {
    width: min(1100px, calc(100vw - 24px));
    max-width: min(1100px, calc(100vw - 24px));
    max-height: calc(100svh - 24px);
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--popup);
}

.job-note-image-dialog > div {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    max-height: calc(100svh - 26px);
}

.job-note-image-dialog header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
    padding: 9px 10px;
    border-bottom: 1px solid var(--line);
}

.job-note-image-dialog header > strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.job-note-image-dialog header > span {
    display: flex;
    gap: 6px;
    flex: 0 0 auto;
}

.job-note-image-dialog [data-note-image-dialog-image] {
    display: block;
    max-width: 100%;
    max-height: calc(100svh - 80px);
    margin: auto;
    object-fit: contain;
}

.private-note-check {
    margin-top: 0.45rem;
    color: var(--ink);
}

.private-note-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    width: fit-content;
    margin-left: 0.35rem;
    padding: 0.12rem 0.45rem;
    border: 1px solid rgba(251, 191, 36, 0.42);
    border-radius: 999px;
    background: rgba(251, 191, 36, 0.12);
    color: #fbbf24;
    font-size: 0.75rem;
    font-weight: 800;
    line-height: 1.15;
}

.private-note-pill svg {
    width: 0.85rem;
    height: 0.85rem;
}

.job-note-like-form {
    margin-top: 8px;
    display: inline-flex !important;
    gap: 0 !important;
}

.job-note-like {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 28px;
    padding: 0 9px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--panel);
    color: var(--muted);
    font-weight: 800;
    font-size: 12px;
}

.job-note-like svg {
    width: 15px;
    height: 15px;
}

.job-note-like.is-liked {
    border-color: #ef2b2d;
    background: color-mix(in srgb, #ef2b2d 12%, var(--panel));
    color: #ef2b2d;
}

.job-note-replies {
    display: grid;
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

.job-note-reply .job-note-body {
    background: var(--soft);
}

.job-note-reply-box {
    margin-top: 10px;
}

.job-note-reply-box summary {
    width: fit-content;
    color: var(--accent);
    cursor: pointer;
    font-size: 13px;
    font-weight: 800;
}

.job-note-reply-box form {
    margin-top: 10px;
}

.segmented {
    display: inline-grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--soft);
}
.segmented label {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 10px;
    border-radius: 6px;
    color: var(--muted);
    font-weight: 700;
    cursor: pointer;
}
.segmented input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.segmented label:has(input:checked) {
    background: var(--accent);
    color: #fff;
}

.quote-upload-section .field-label {
    display: block;
    margin-bottom: 6px;
    color: var(--text);
    font-size: 13px;
    font-weight: 700;
}

.lookup-action {
    display: grid;
    align-content: end;
    gap: 6px;
}
.lookup-status {
    min-height: 18px;
    color: var(--muted);
    font-size: 12px;
}
.lookup-status.is-online { color: var(--success); }
.lookup-status.is-offline { color: var(--danger); }
.lookup-status.is-pending { color: var(--warn); }

.customer-detail {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.customer-detail .panel {
    min-width: 0;
    overflow: hidden;
}

.customer-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
    gap: 10px;
    padding: 14px;
}

.customer-stats div,
.customer-stats a {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px;
    background: #fbfcfd;
}

.customer-stats a {
    color: inherit;
    text-decoration: none;
    transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.customer-stats a:hover {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent);
    transform: translateY(-1px);
}

.customer-stats span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    margin-bottom: 6px;
}

.customer-stats strong {
    display: block;
    font-size: 21px;
    overflow-wrap: anywhere;
}

.customer-table-scroll {
    max-width: 100%;
}

.customer-table {
    table-layout: fixed;
    min-width: 0;
}

.customer-table th,
.customer-table td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.customer-table th:nth-child(1),
.customer-table td:nth-child(1) {
    width: 118px;
}

.customer-table th:nth-child(3),
.customer-table td:nth-child(3) {
    width: 22%;
}

.customer-table th:last-child,
.customer-table td:last-child {
    width: 118px;
}

.customer-jobs-table th:nth-child(1),
.customer-jobs-table td:nth-child(1) {
    width: 112px;
}

.customer-jobs-table th:nth-child(2),
.customer-jobs-table td:nth-child(2) {
    width: auto;
}

.customer-jobs-table th:nth-child(3),
.customer-jobs-table td:nth-child(3) {
    width: 76px;
}

.customer-jobs-table th:nth-child(4),
.customer-jobs-table td:nth-child(4),
.customer-jobs-table th:nth-child(5),
.customer-jobs-table td:nth-child(5),
.customer-jobs-table th:nth-child(6),
.customer-jobs-table td:nth-child(6) {
    width: 92px;
}

.customer-jobs-table .job-number-col { width: 112px; }
.customer-jobs-table .job-name-col { width: auto; }
.customer-jobs-table .job-status-col { width: 76px; }
.customer-jobs-table .money-col { width: 92px; }

.customer-settings {
    display: grid;
}

.customer-colour-panel {
    overflow: hidden;
}

.collapsible-panel summary {
    cursor: pointer;
    list-style: none;
    min-height: 44px;
}

.collapsible-panel summary::-webkit-details-marker {
    display: none;
}

.collapsible-panel summary::after {
    display: none;
}

.app-disclosure-icon {
    display: inline-grid;
    flex: 0 0 34px;
    place-items: center;
    width: 34px;
    height: 34px;
    min-height: 34px;
    margin-left: auto;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
    color: var(--ink);
}

.app-disclosure-icon svg {
    width: 18px;
    height: 18px;
    transition: transform 160ms ease;
}

.collapsible-panel[open] > summary > .app-disclosure-icon svg {
    transform: rotate(180deg);
}

.inline-disclosure > summary {
    display: flex;
    align-items: center;
    gap: 6px;
    list-style: none;
}

.inline-disclosure > summary::-webkit-details-marker {
    display: none;
}

.inline-disclosure > summary > .app-disclosure-icon {
    flex-basis: 22px;
    width: 22px;
    height: 22px;
    min-height: 22px;
    border: 0;
    border-radius: 4px;
    background: transparent;
}

.inline-disclosure > summary > .app-disclosure-icon svg {
    width: 15px;
    height: 15px;
}

.inline-disclosure[open] > summary > .app-disclosure-icon svg {
    transform: rotate(180deg);
}

.compact-upload-row {
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
}

.compact-upload-row input[type="file"] {
    min-width: min(420px, 100%);
}

.panel-hint {
    padding: 0 14px 14px;
}

.region-sub-settings {
    border-top: 1px solid var(--line);
}

.region-sub-settings .section-title {
    border-bottom: 0;
}

.region-sub-settings[open] .section-title {
    border-bottom: 1px solid var(--line);
}

.colour-presets {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 14px;
}

.settings-subsection + .settings-subsection {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.settings-subsection h3 {
    margin: 0 0 6px;
}

.colour-presets.compact {
    padding: 0;
    gap: 6px;
}

.colour-preset,
.custom-colour {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 7px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
}

.colour-preset input,
.custom-colour input[type="radio"] {
    margin: 0;
}

.colour-swatch {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 2px solid color-mix(in srgb, var(--swatch, var(--line)) 70%, #000000 30%);
    background: var(--swatch);
}

.colour-swatch.is-default {
    background: linear-gradient(135deg, #ffffff 0 46%, #d9e0e6 46% 54%, #ffffff 54% 100%);
}

.custom-colour input[type="color"] {
    width: 34px;
    min-height: 28px;
    padding: 2px;
}

.region-colour-list {
    display: grid;
    gap: 0;
}

.region-colour-row {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) 80px minmax(260px, 2fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
}

.region-colour-row:last-child {
    border-bottom: 0;
}

.region-colour-row > span {
    color: var(--muted);
    font-size: 12px;
}

.invoice-scheduled-panel {
    margin-bottom: 14px;
}

.invoice-scheduled-panel > .panel-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
}

.rate-settings {
    display: grid;
    min-width: 0;
}

.job-rates-panel {
    margin-bottom: 14px;
    overflow: hidden;
}

.job-rates-panel > summary.section-title {
    margin-top: 0;
    cursor: pointer;
}

.job-rates-panel[open] > summary.section-title {
    border-bottom: 1px solid var(--line);
}

.rate-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
    gap: 10px;
    padding: 14px;
    min-width: 0;
}

.rate-grid label {
    display: grid;
    gap: 5px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    min-width: 0;
}

.rate-grid small {
    color: var(--muted);
    font-weight: 600;
}

.rate-grid input {
    border: 1px solid var(--line);
    background: #0f1a24;
    color: var(--ink);
}

.rate-grid input:read-only {
    color: var(--ink);
}

.rate-grid input:disabled {
    background: #0f1a24;
    color: var(--muted);
    opacity: 0.72;
    cursor: not-allowed;
}

.health-safety-panel.is-required {
    border-color: rgba(255, 193, 7, .35);
}

.health-safety-panel.is-exempt {
    border-color: var(--line);
}

.health-safety-panel.is-safe {
    border-color: rgba(92, 255, 174, .75);
    box-shadow: 0 0 16px rgba(92, 255, 174, .12);
}

.health-safety-panel.is-unsafe {
    border-color: rgba(255, 43, 43, .7);
    box-shadow: 0 0 18px rgba(255, 43, 43, .18);
}

.health-safety-panel.is-dra-complete > .panel-head {
    cursor: pointer;
    user-select: none;
}

.health-safety-panel.is-dra-complete.is-minimised > :not(.panel-head) {
    display: none;
}

.dra-panel-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.dra-panel-view-button {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--muted);
    font: inherit;
    cursor: pointer;
}

.dra-panel-view-button:hover,
.dra-panel-view-button:focus-visible {
    color: var(--accent);
}

.dra-panel-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 14px;
    min-width: 0;
}

.dra-exempt-form {
    margin: 0;
}

.dra-exempt-control {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

.dra-exempt-control input {
    accent-color: var(--accent);
}

.dra-exempt-control.is-readonly {
    opacity: .72;
}

.dra-panel-status svg,
.dra-disclosure-icon svg {
    width: 17px;
    height: 17px;
    transition: transform 140ms ease;
}

.dra-disclosure-icon {
    display: inline-grid;
    place-items: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    margin-left: 4px;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--muted);
}

.health-safety-panel.is-dra-complete:not(.is-minimised) .dra-disclosure-icon .lucide-chevron-down {
    transform: rotate(180deg);
}

.risk-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    align-items: center;
    margin: 0 14px 12px;
    padding: 12px 0 0;
    color: var(--muted);
}

.risk-summary strong {
    color: var(--ink);
}

.job-subsettings-panel.has-dra-safe {
    border-color: rgba(92, 255, 174, .78);
    box-shadow: 0 0 16px rgba(92, 255, 174, .12);
}

.job-subsettings-panel.has-dra-unsafe {
    border-color: rgba(255, 43, 43, .75);
    box-shadow: 0 0 18px rgba(255, 43, 43, .16);
}

.ticket-dra-summary {
    margin: 0 14px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
    background: color-mix(in srgb, var(--soft) 85%, transparent);
}

.ticket-dra-summary summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 11px;
    cursor: pointer;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    list-style: none;
}

.ticket-dra-summary summary::-webkit-details-marker {
    display: none;
}

.ticket-dra-summary summary .ticket-dra-summary-title {
    color: var(--ink);
    font-size: 14px;
    font-weight: 700;
}

.ticket-dra-summary summary .ticket-dra-safe-status {
    display: inline-flex;
    flex: 0 0 auto;
}

.ticket-dra-summary > div {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 12px;
    padding: 10px 11px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.risk-locked-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 14px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--soft);
    color: var(--muted);
    font-weight: 800;
}

.risk-locked-note svg {
    width: 17px;
    height: 17px;
}

.risk-check-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px 12px;
    margin-bottom: 12px;
}

.risk-section {
    display: grid;
    gap: 8px;
    padding: 10px 12px;
    margin-bottom: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, .025);
}

.risk-section h3 {
    margin: 0;
    color: var(--ink);
    font-size: 14px;
}

.risk-unsafe-check {
    color: var(--danger);
}

.risk-text-grid,
.near-miss-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    align-items: end;
}

.near-miss-form {
    padding: 14px;
}

.near-miss-form > label {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.near-miss-form .near-miss-photo-field {
    grid-column: 1 / -1;
    display: grid;
    gap: 5px;
}

.near-miss-photo-field > span {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 5px;
}

.near-miss-photo-field > span small {
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
}

.near-miss-photo-field input[type="file"] {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
}

.near-miss-form input[type="date"] {
    display: block;
    box-sizing: border-box;
    width: 100%;
    inline-size: 100%;
    min-width: 0;
    min-inline-size: 0;
    max-width: 100%;
    max-inline-size: 100%;
}

@media (max-width: 640px) {
    .near-miss-form {
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
        min-width: 0;
        padding: 12px;
    }

    .near-miss-form input[type="date"] {
        padding-right: 6px;
        font-size: 16px;
    }

    .near-miss-photo-field input[type="file"] {
        font-size: 16px;
    }
}

.risk-text-grid-wide {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    margin-bottom: 12px;
}

.risk-assessment-form > .risk-text-grid {
    padding: 0 14px;
}

.risk-assessment-form > [data-dra-site-fields] > .risk-text-grid {
    padding: 0;
}

.risk-text-grid textarea,
.near-miss-form textarea {
    min-height: 68px;
}

.job-document-upload-form {
    display: grid;
    grid-template-columns: minmax(110px, 140px) minmax(240px, 1.1fr) minmax(240px, 1fr) minmax(220px, .9fr) auto;
    gap: 12px;
    align-items: start;
    padding: 14px;
}

.job-document-upload-form label {
    display: grid;
    grid-template-rows: auto 38px minmax(16px, auto);
    gap: 5px;
    min-width: 0;
}

.job-document-upload-form select,
.job-document-upload-form input[type="file"],
.job-document-upload-form input[type="text"] {
    width: 100%;
    min-height: 38px;
}

.job-document-upload-form small {
    min-height: 16px;
    color: var(--muted);
    line-height: 1.25;
}

.job-document-upload-form .button {
    align-self: start;
    margin-top: 23px;
    min-height: 38px;
    padding: 0 14px;
}

.job-document-list {
    display: grid;
    gap: 8px;
    margin-top: 0;
    padding: 0 14px 14px;
}

.job-document-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, .025);
}

.job-document-item > div:first-child {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.job-document-item a {
    min-width: 0;
    overflow-wrap: anywhere;
    font-weight: 800;
}

.job-document-item small {
    color: var(--muted);
}

.job-document-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.job-document-actions form {
    display: inline-flex;
}

@media (max-width: 1180px) {
    .job-document-upload-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .job-document-upload-form .button {
        justify-self: start;
    }
}

.risk-score-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}

.risk-score-grid fieldset {
    display: grid;
    grid-template-columns: repeat(2, minmax(90px, 1fr));
    gap: 10px;
    min-width: 0;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, .025);
}

.risk-score-grid legend {
    padding: 0 6px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.risk-final-checks {
    display: grid;
    gap: 8px;
    margin: 12px 0;
}

.risk-history {
    margin-top: 10px;
    border-top: 1px solid var(--line);
    padding-top: 10px;
}

.risk-history summary {
    cursor: pointer;
    color: var(--muted);
    font-weight: 700;
}

.risk-history-list {
    display: grid;
    gap: 8px;
    margin-top: 10px;
}

.risk-history-list article {
    display: grid;
    gap: 3px;
    padding: 9px 11px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, .025);
}

.risk-history-list span {
    color: var(--muted);
}

.near-miss-list {
    display: grid;
    gap: 8px;
    margin-top: 0;
    padding: 0 14px 14px;
}

.near-miss-item {
    display: grid;
    gap: 3px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, .025);
}

.near-miss-item small {
    color: var(--muted);
}

.near-miss-photo-disclosure {
    min-width: 0;
    margin-top: 6px;
    padding-top: 7px;
    border-top: 1px solid var(--line);
}

.near-miss-photo-disclosure > summary {
    display: grid;
    grid-template-columns: minmax(0, auto) auto 18px;
    align-items: center;
    justify-content: start;
    gap: 7px;
    min-height: 34px;
    width: fit-content;
    max-width: 100%;
    padding: 4px 7px;
    border-radius: 6px;
    color: var(--ink);
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.near-miss-photo-disclosure > summary::-webkit-details-marker {
    display: none;
}

.near-miss-photo-disclosure > summary:hover,
.near-miss-photo-disclosure > summary:focus-visible {
    background: color-mix(in srgb, var(--accent) 7%, transparent);
    color: var(--accent);
    outline: 0;
}

.near-miss-photo-disclosure > summary > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: 12px;
    font-weight: 800;
}

.near-miss-photo-disclosure > summary > span svg,
.near-miss-photo-chevron {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
}

.near-miss-photo-disclosure > summary > strong {
    color: var(--muted);
    font-size: 11px;
}

.near-miss-photo-chevron {
    transition: transform 160ms ease;
}

.near-miss-photo-disclosure[open] > summary .near-miss-photo-chevron {
    transform: rotate(180deg);
}

.near-miss-photo-disclosure-empty > summary {
    grid-template-columns: minmax(0, auto) 18px;
    color: var(--muted);
}

.near-miss-photo-body {
    display: grid;
    gap: 10px;
    padding-top: 8px;
}

.near-miss-photo-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
    gap: 8px;
    max-height: 460px;
    overflow-y: auto;
}

.near-miss-photo-item {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--panel);
}

.near-miss-photo-preview {
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    border: 0;
    background: var(--soft);
    color: inherit;
    cursor: zoom-in;
    touch-action: manipulation;
}

.near-miss-photo-preview:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: -3px;
}

.near-miss-photo-preview img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.near-miss-photo-meta {
    display: grid;
    gap: 2px;
    min-width: 0;
    padding: 7px;
}

.near-miss-photo-meta span,
.near-miss-photo-meta small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.near-miss-photo-meta span {
    color: var(--ink);
    font-size: 11px;
    font-weight: 800;
}

.near-miss-photo-meta small {
    color: var(--muted);
    font-size: 10px;
}

.near-miss-photo-actions {
    display: flex;
    justify-content: flex-end;
    gap: 4px;
    padding: 0 6px 6px;
}

.near-miss-photo-actions form {
    display: inline-flex;
    margin: 0;
}

.near-miss-photo-actions .icon-button {
    width: 30px;
    min-width: 30px;
    height: 30px;
}

.near-miss-photo-upload-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 8px;
    min-width: 0;
    padding-top: 9px;
    border-top: 1px solid var(--line);
}

.near-miss-photo-disclosure-empty > .near-miss-photo-upload-form {
    margin-top: 8px;
}

.near-miss-photo-upload-form label {
    display: grid;
    gap: 4px;
    min-width: 0;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
}

.near-miss-photo-upload-form input[type="file"] {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    padding: 6px;
    font-size: 12px;
}

.near-miss-photo-upload-form .button {
    min-height: 36px;
    padding: 7px 11px;
}

@media (max-width: 640px) {
    .near-miss-photo-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .near-miss-photo-upload-form {
        grid-template-columns: minmax(0, 1fr);
    }

    .near-miss-photo-upload-form input[type="file"] {
        font-size: 16px;
    }

    .near-miss-photo-upload-form .button {
        width: 100%;
    }
}

.rate-mode {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    padding: 14px 14px 0;
    min-width: 0;
}

.rate-mode span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.rate-actions {
    display: flex;
    justify-content: flex-end;
    padding: 0 14px 14px;
}

.reports-panel {
    margin: 0 0 14px;
}

.ticket-table-collapsible {
    overflow: hidden;
}

.ticket-table-collapsible > summary.panel-head {
    display: flex;
    align-items: center;
    min-height: 52px;
    margin: 0;
    padding: 10px 14px;
    user-select: none;
}

.ticket-table-collapsible:not([open]) > summary.panel-head {
    border-bottom-color: transparent;
}

.ticket-table-collapsible > summary.panel-head::after {
    order: 20;
}

.ticket-table-tools {
    display: flex;
    justify-content: flex-end;
    border-bottom: 1px solid var(--line);
    padding: 8px 12px;
    background: var(--soft);
}

.quote-upload-section {
    margin: 0 0 14px;
}

.report-selection-toolbar {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
    max-width: 100%;
    padding: 8px 12px;
    overflow-x: auto;
    overflow-y: hidden;
    border-bottom: 1px solid var(--line);
    background: var(--soft);
    -webkit-overflow-scrolling: touch;
}

.report-selection-toolbar > .check,
.report-selection-toolbar > .button,
.report-selection-toolbar > .icon-button,
.report-selection-toolbar > .report-delete-selected-form,
.report-selection-toolbar > .report-selection-count {
    flex: 0 0 auto;
    white-space: nowrap;
}

.report-selection-toolbar > .report-selection-count {
    margin-right: auto;
    color: var(--muted);
    font-size: 13px;
}

.report-selection-toolbar > .report-selection-count strong {
    color: var(--ink);
}

.report-selection-toolbar > .button {
    min-height: 34px;
    padding: 6px 10px;
}

.report-delete-selected-form {
    display: inline-flex;
    align-items: center;
    margin: 0;
}

.report-selection-column {
    width: 42px;
    min-width: 42px;
    text-align: center;
}

.report-selection-column input,
.report-selection-check input {
    width: 17px;
    height: 17px;
    margin: 0;
    accent-color: var(--accent);
}

.report-selection-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
}

#report-email-dialog {
    width: min(760px, calc(100vw - 32px));
    max-height: min(860px, calc(100svh - 32px));
}

.report-email-dialog-form {
    grid-template-rows: auto minmax(0, 1fr) auto;
    max-height: min(860px, calc(100svh - 32px));
}

.report-email-dialog-form .settings-section {
    overflow-y: auto;
    padding: 0 2px 2px;
    border-bottom: 0;
}

.report-email-dialog-form .report-email-additional-addresses {
    box-sizing: border-box;
    min-height: 38px;
    width: 100%;
}

.report-email-file-summary {
    display: grid;
    gap: 7px;
}

.report-email-file-summary .status-pill {
    justify-self: start;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.report-email-file-list {
    display: grid;
    gap: 4px;
    max-height: 116px;
    overflow-y: auto;
}

.report-email-file-list span {
    min-width: 0;
    padding: 5px 8px;
    border-left: 3px solid var(--accent);
    background: var(--soft);
    font-size: 12px;
    overflow-wrap: anywhere;
}

.report-email-picture-summary {
    justify-self: start;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.report-email-stakeholders {
    display: grid;
    gap: 8px;
    min-width: 0;
    margin: 0;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 7px;
}

.report-email-stakeholders legend {
    padding: 0 5px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 800;
}

.report-email-stakeholder-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    max-height: 210px;
    overflow-y: auto;
}

.report-email-stakeholder {
    display: grid;
    grid-template-columns: 17px minmax(0, 1fr);
    align-items: start;
    gap: 8px;
    min-width: 0;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--panel);
    cursor: pointer;
}

.report-email-stakeholder input {
    width: 17px;
    height: 17px;
    margin: 1px 0 0;
    accent-color: var(--accent);
}

.report-email-stakeholder span,
.report-email-stakeholder small {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
}

.report-email-stakeholder-name {
    color: var(--ink);
    font-size: 13px;
    font-weight: 400;
}

.report-email-stakeholder small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 400;
}

.report-email-dialog-form .report-email-save-contact,
.report-email-dialog-form .report-email-cc-yourself {
    display: inline-flex;
    align-items: flex-start;
    width: auto;
    max-width: 100%;
    justify-self: start;
    white-space: normal;
}

.report-email-dialog-form .report-email-save-contact input,
.report-email-dialog-form .report-email-cc-yourself input {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    margin: 1px 0 0;
}

.report-email-save-contact span,
.report-email-cc-yourself span {
    min-width: 0;
    text-align: left;
}

.report-email-cc-yourself small {
    display: block;
    color: var(--muted);
    font-size: 11px;
}

.report-email-microsoft-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--warn) 45%, var(--line));
    border-radius: 8px;
    background: color-mix(in srgb, var(--warn) 7%, var(--panel));
}

.report-email-microsoft-status.is-connected {
    border-color: color-mix(in srgb, var(--success) 45%, var(--line));
    background: color-mix(in srgb, var(--success) 7%, var(--panel));
}

.report-email-microsoft-status span,
.report-email-microsoft-status strong,
.report-email-microsoft-status small {
    display: block;
    min-width: 0;
}

.report-email-microsoft-status strong {
    color: var(--ink);
    font-size: 13px;
}

.report-email-microsoft-status small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 11px;
    overflow-wrap: anywhere;
}

.report-email-microsoft-status .button {
    flex: 0 0 auto;
}

.report-email-connect-form {
    display: none;
}

.report-email-delivery-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    padding: 9px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: color-mix(in srgb, var(--panel) 92%, var(--ink));
    color: var(--muted);
    font-size: 11px;
    line-height: 1.4;
}

.report-email-delivery-note i {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    margin-top: 1px;
    color: var(--accent);
}

.report-email-delivery-note span {
    min-width: 0;
}

.report-email-delivery-note.is-warning {
    border-color: color-mix(in srgb, var(--danger) 55%, var(--line));
    background: color-mix(in srgb, var(--danger) 7%, var(--panel));
    color: var(--ink);
}

.report-email-delivery-note.is-warning i {
    color: var(--danger);
}

.job-subsettings-panel {
    --ticket-info-section-gap: 10px;
    --ticket-info-section-padding: 12px;
    --ticket-info-section-radius: 10px;
    margin: 0 0 14px;
}

.ticket-info-heading {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
}

.ticket-info-heading > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.ticket-new-number-button {
    width: 30px;
    min-width: 30px;
    height: 30px;
    padding: 0;
    color: var(--ink);
}

.ticket-new-number-button svg {
    width: 15px;
    height: 15px;
}

.job-subsetting-add,
.job-visit-category-list form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: end;
    padding: 14px;
}

.job-subsetting-add {
    grid-template-columns: minmax(0, 1fr) auto auto;
}

.branch-tag-toggle {
    align-self: center;
    margin: 0;
    white-space: nowrap;
}

.job-subsetting-chip-list,
.visit-tag-chip-set {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

.job-subsetting-chip-list {
    padding: 0 14px 14px;
}

.job-subsetting-chip,
.visit-tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 28px;
    max-width: 100%;
    padding: 4px 8px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--soft);
    color: var(--ink);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
}

.job-subsetting-chip svg,
.visit-tag-chip svg {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
}

.job-subsetting-chip > span,
.visit-tag-chip > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.job-subsetting-chip small {
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
}

.job-subsetting-chip form {
    display: inline-flex;
    margin: 0;
}

.job-subsetting-chip button,
.visit-tag-chip {
    cursor: pointer;
}

.job-subsetting-chip[data-apply-existing-tag] {
    cursor: copy;
}

.job-subsetting-chip[data-apply-existing-tag]:hover {
    border-color: var(--success);
    box-shadow: 0 0 0 1px rgba(98, 255, 168, 0.34);
}

.visit-tag-chip.is-empty {
    cursor: default;
    border-color: var(--line);
    color: var(--muted);
    opacity: 0.82;
}

.job-subsetting-chip button {
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    padding: 2px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--danger);
}

.visit-tag-chip {
    border-color: var(--line);
}

.visit-tag-chip.visit-tag-combo {
    gap: 5px;
    padding: 4px 6px 4px 8px;
}

.visit-tag-chip-main,
.visit-tag-chip-delete {
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    line-height: 1.2;
}

.visit-tag-chip-main {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    padding: 0;
}

.visit-tag-chip-main span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.visit-tag-chip-delete {
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    padding: 2px;
    border-radius: 50%;
    color: var(--danger);
    cursor: pointer;
}

.job-subsetting-chip button:hover,
.visit-tag-chip-delete:hover {
    background: color-mix(in srgb, var(--danger) 18%, transparent);
}

.visit-tag-chip.is-active {
    border-color: var(--line);
    background: var(--soft);
    color: var(--ink);
}

.visit-tag-chip.has-clear {
    padding-right: 6px;
}

.job-subsetting-chip .visit-tag-clear-icon,
.visit-tag-chip .visit-tag-clear-icon,
.visit-tag-chip-delete .visit-tag-clear-icon {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    margin: 0;
    padding: 0;
    border-radius: 0;
    color: var(--danger);
    background: transparent;
    stroke-width: 2.4;
}

.visit-tag-chip.has-clear:hover .visit-tag-clear-icon {
    background: transparent;
}

.job-visit-category-list {
    display: grid;
    gap: var(--ticket-info-section-gap);
    padding: 12px 14px 14px;
    border-top: 1px solid var(--line);
}

.job-visit-branch-list {
    display: grid;
    gap: 12px;
    border-top: 1px solid var(--line);
    padding: 10px 0 0;
}

.job-visit-branch > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 14px 8px;
}

.job-visit-branch h3 {
    margin: 0;
    font-size: 14px;
}

.job-visit-branch > header span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.job-visit-branch .job-visit-category-list {
    border-top: 0;
}

.job-visit-category-list form {
    grid-template-columns: minmax(220px, 1.4fr) minmax(160px, 1fr) repeat(3, minmax(118px, 170px)) 34px;
    padding-block: 10px;
}

.job-visit-category-list form.is-location-completion {
    grid-template-columns: minmax(220px, 1.2fr) minmax(160px, 1fr) repeat(auto-fit, minmax(170px, 240px)) 34px;
}

.job-visit-category-list strong,
.job-visit-category-list span {
    display: block;
    overflow-wrap: anywhere;
}

.job-visit-category-list span {
    color: var(--muted);
    font-size: 12px;
}

.ticket-location-current {
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
}

.ticket-location-current span {
    margin: 0 0 3px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
}

.ticket-location-current strong {
    color: var(--ink);
    font-size: 13px;
}

.job-visit-category-list form.is-location-completion .icon-button {
    border-color: var(--success);
    color: var(--success);
}

.job-visit-category-list form.is-location-completion .icon-button:hover {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--success) 42%, transparent);
}

.job-visit-category-list form.ticket-reassign-form {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
}

.job-visit-category-list > form,
.job-visit-category-list > .ticket-dra-summary {
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    border: 1px solid var(--line);
    border-radius: var(--ticket-info-section-radius);
    background: var(--panel);
}

.job-visit-category-list > form {
    padding: var(--ticket-info-section-padding);
}

.job-visit-category-list > .ticket-dra-summary {
    padding: 0;
}

.job-visit-category-list > .ticket-dra-summary > summary,
.job-visit-category-list > .ticket-dra-summary > div {
    padding: var(--ticket-info-section-padding);
}

.ticket-reassign-field {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.ticket-reassign-controls {
    display: grid;
    grid-template-columns: minmax(140px, 0.55fr) minmax(220px, 1fr) 34px;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.ticket-reassign-controls .icon-button {
    width: 34px;
    height: 34px;
    align-self: center;
}

.ticket-reassign-controls input,
.ticket-reassign-controls select {
    min-width: 0;
    width: 100%;
}

.ticket-report-move-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    margin: 2px 0 0;
    padding: 7px 8px 7px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--soft);
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
}

.ticket-report-move-summary[hidden] {
    display: none;
}

.ticket-report-move-summary > span {
    min-width: 0;
}

.ticket-report-move-summary .button {
    flex: 0 0 auto;
    min-height: 28px;
    padding: 0 8px;
    font-size: 11px;
}

.ticket-report-move-dialog {
    width: min(440px, calc(100vw - 24px));
}

.ticket-report-move-dialog .dialog-form {
    gap: 10px;
}

.ticket-report-move-dialog .dialog-form p {
    margin: 0;
    color: var(--ink);
    font-size: 13px;
    line-height: 1.45;
}

.ticket-report-move-dialog .dialog-form > small {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.4;
}

.ticket-report-move-dialog-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.ticket-report-move-dialog-actions .button {
    width: 100%;
    min-width: 0;
    min-height: 40px;
    padding: 0 10px;
    font-size: 13px;
}

@media (max-width: 760px) {
    .job-visit-category-list {
        padding: 10px;
    }

    .job-visit-category-list form.is-location-completion {
        grid-template-columns: 1fr;
    }

    .ticket-reassign-controls {
        grid-template-columns: minmax(0, 1fr) 34px;
    }

    .ticket-reassign-controls input[type="search"] {
        grid-column: 1 / -1;
    }

    .ticket-reassign-controls select {
        grid-column: 1;
    }

    .ticket-reassign-controls .icon-button {
        grid-column: 2;
    }

    .ticket-report-move-dialog {
        width: calc(100vw - 16px);
    }
}


.report-template-panel {
    margin: 0 0 14px;
    gap: 10px;
}

.report-download-form {
    display: grid;
    grid-template-columns: minmax(190px, 260px) minmax(240px, 1fr) auto;
    align-items: end;
    gap: 12px;
    padding: 0 14px 6px;
    width: 100%;
}

.report-download-form input,
.report-description-field {
    width: 100%;
}

.report-description-field,
.report-filename-preview {
    display: grid;
    gap: 4px;
    min-width: 0;
    font-size: 13px;
    line-height: 1.25;
}

.report-description-field {
    color: var(--muted);
    font-size: 12px;
}

.report-description-field input {
    min-height: 34px;
    padding: 7px 9px;
    font-size: 13px;
    line-height: 1.2;
}

.report-description-field small {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.25;
}

.report-filename-preview {
    padding: 7px 9px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--panel-muted);
}

.report-filename-preview span {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.2;
}

.report-filename-preview strong {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 13px;
    line-height: 1.25;
}

.report-download-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.report-io-list-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text);
    font-size: 13px;
    line-height: 1.2;
    white-space: nowrap;
}

.report-io-list-check input {
    width: auto;
}

.report-template-summary,
.report-upload-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 260px) auto;
    gap: 12px;
    align-items: end;
    padding: 14px;
}

.report-template-summary {
    grid-template-columns: repeat(2, minmax(180px, 1fr));
    gap: 12px;
    align-items: start;
    padding-top: 10px;
}

.report-template-summary div {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.report-template-summary span {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.2;
}

.report-template-summary strong {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 14px;
    line-height: 1.25;
}

.report-panel-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 14px;
    min-width: 0;
}

.report-exempt-form {
    margin: 0;
}

.report-exempt-control {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

.report-exempt-control input {
    accent-color: var(--accent);
}

.report-exempt-control.is-readonly {
    opacity: 0.72;
}

.visit-subcategory-form {
    display: grid;
    grid-template-columns: repeat(3, minmax(120px, 1fr)) 34px;
    gap: 8px;
    align-items: end;
}

.visit-subcategory-form label,
.job-visit-category-list label {
    min-width: 0;
}

@media (max-width: 1250px) {
    .job-visit-category-list form {
        grid-template-columns: repeat(4, minmax(120px, 1fr)) 34px;
        align-items: end;
    }

    .job-visit-category-list form > div,
    .job-visit-category-list .visit-tag-chip-set {
        grid-column: 1 / -1;
    }
}

.report-upload-form {
    --ticket-upload-control-height: 44px;
    grid-template-columns: 145px minmax(170px, 300px) minmax(250px, 320px) minmax(0, 1fr) auto;
    align-items: center;
    border-bottom: 1px solid var(--line);
}

.ticket-quote-upload-form {
    grid-template-columns: minmax(270px, 360px) minmax(170px, 300px) minmax(0, 1fr) auto;
}

.report-upload-form [hidden] {
    display: none !important;
}

.report-upload-form .job-upload-kind-field,
.report-upload-form .job-upload-kind-field select {
    width: 100%;
    min-width: 0;
}

.report-upload-form .job-upload-kind-field select {
    padding: 7px 28px 7px 9px;
    font-size: 13px;
}

.report-upload-form .ticket-upload-field {
    display: grid;
    grid-template-rows: 17px var(--ticket-upload-control-height);
    gap: 6px;
    min-width: 0;
}

.report-upload-form .ticket-upload-field > .field-label {
    display: flex;
    align-items: center;
    margin: 0;
    color: var(--text);
    font-size: 13px;
    font-weight: 700;
    line-height: 17px;
}

.report-upload-form .ticket-upload-field > select,
.report-upload-form .ticket-upload-file-field > input[type="file"],
.report-upload-form .ticket-upload-summary-field > input,
.report-upload-form .ticket-upload-field > .segmented,
.report-upload-form .ticket-upload-submit {
    box-sizing: border-box;
    height: var(--ticket-upload-control-height);
    min-height: var(--ticket-upload-control-height);
}

.report-upload-form .ticket-upload-file-field > input[type="file"] {
    min-width: 0;
    padding: 5px 6px;
    font-size: 13px;
}

.report-upload-form .ticket-upload-field > .segmented {
    width: 100%;
}

.report-upload-form .segmented input {
    width: 1px;
    height: 1px;
    min-height: 0;
    padding: 0;
    border: 0;
}

.report-upload-form .ticket-upload-submit {
    grid-column: -1;
    align-self: end;
    justify-self: end;
    white-space: nowrap;
}

.ticket-upload-help {
    grid-column: 2 / 4;
    margin-top: -6px;
    color: var(--muted);
    line-height: 1.25;
}

.ticket-quote-upload-help {
    grid-column: 1 / 3;
}

.report-completion-field {
    display: grid;
    min-width: 0;
    gap: 6px;
}

.report-completion-field .field-label {
    color: var(--text);
    font-size: 13px;
    font-weight: 700;
}

.report-completion-options {
    display: grid;
    width: 100%;
    min-width: 0;
}

@media (max-width: 760px) {
    .ticket-report-upload-form,
    .ticket-quote-upload-form {
        grid-template-columns: minmax(0, 1fr);
    }

    .report-upload-form .ticket-upload-submit,
    .ticket-upload-help {
        grid-column: auto;
    }

    .report-upload-form .ticket-upload-submit {
        justify-self: stretch;
        width: 100%;
    }
}

.report-completion-pill {
    display: inline-flex;
    margin-top: 5px;
    padding: 3px 7px;
    font-size: 11px;
    line-height: 1.2;
}

.report-status-column,
.report-pictures-column {
    vertical-align: middle;
    white-space: nowrap;
}

.report-status-column .report-completion-pill {
    margin-top: 0;
}

.report-approval-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 5px;
    padding: 3px 7px;
    font-size: 11px;
    line-height: 1.2;
}

.report-approval-pill svg,
.report-approved-file svg {
    width: 13px;
    height: 13px;
}

.report-status-pills {
    display: grid;
    grid-template-columns: 150px;
    align-items: start;
    gap: 5px;
    width: 150px;
    margin-top: 5px;
}

.report-status-column .report-status-pills {
    margin-top: 0;
}

.report-status-pills .status-pill {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 150px;
    min-height: 27px;
    margin: 0;
    padding: 4px 8px;
    font-size: 11px;
    line-height: 1.1;
    text-align: center;
}

.report-status-column > small {
    display: block;
    max-width: 170px;
    margin-top: 4px;
    white-space: normal;
}

.report-approved-file {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    color: var(--success);
    font-size: 11px;
    font-weight: 700;
}

.report-outcome-action {
    width: 34px;
    height: 34px;
    min-height: 34px;
    padding: 0;
}

.report-outcome-action svg {
    width: 16px;
    height: 16px;
}

.report-overrides {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    margin: 0;
}

.report-overrides > strong {
    color: var(--muted);
    font-size: 12px;
    white-space: nowrap;
}

.report-override-actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.report-override-actions .is-active {
    border-color: rgba(255, 255, 255, 0.72);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14);
}

body.theme-light .report-override-actions .is-active {
    border-color: #64748b;
    background: rgba(100, 116, 139, 0.08);
    color: #334155;
    box-shadow: 0 0 0 1px rgba(100, 116, 139, 0.12);
}

.report-override-actions .is-active.success {
    border-color: var(--success);
    color: var(--success);
}

.report-override-actions .is-active.danger {
    border-color: var(--danger);
    color: var(--danger);
}

.report-override-button {
    min-height: 34px;
    padding: 6px 10px;
    white-space: nowrap;
}

.report-toolbar-icon-button,
.report-override-button.report-toolbar-icon-button {
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
    padding: 0;
    gap: 0;
}

.report-override-button svg {
    width: 16px;
    height: 16px;
}

.report-pictures-column {
    width: 86px;
}

.report-photo-column-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 54px;
    height: 32px;
    padding: 5px 8px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--panel);
    color: var(--ink);
    cursor: pointer;
}

.report-photo-column-trigger:hover,
.report-photo-column-trigger:focus-visible,
.report-photo-column-trigger.is-open {
    border-color: var(--accent);
    outline: 0;
}

.report-photo-column-trigger svg {
    width: 16px;
    height: 16px;
}

.report-photo-column-trigger .report-photo-column-chevron {
    width: 14px;
    height: 14px;
    transition: transform 160ms ease;
}

.report-photo-column-trigger[aria-expanded="true"] .report-photo-column-chevron {
    transform: rotate(180deg);
}

.report-photo-column-trigger > span {
    font-size: 12px;
    font-weight: 800;
}

.report-photo-column-trigger .report-photo-column-queue {
    color: var(--accent);
    font-size: 10px;
}

.report-photo-detail-row > td {
    padding: 0 !important;
    background: var(--soft);
}

.report-photo-manager {
    width: min(360px, 100%);
    min-width: 0;
    margin-top: 8px;
    color: var(--text);
}

.report-photo-manager-expanded {
    width: 100%;
    margin: 0;
}

.report-photo-manager-expanded .report-photo-manager-body {
    padding: 12px 14px;
}

.report-photo-manager-expanded .report-photo-gallery {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
}

.report-photo-manager > summary {
    display: grid;
    grid-template-columns: minmax(0, auto) auto minmax(0, 1fr) 18px;
    align-items: center;
    gap: 7px;
    min-height: 32px;
    padding: 5px 7px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--panel);
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.report-photo-manager > summary::-webkit-details-marker {
    display: none;
}

.report-photo-summary-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: 12px;
    font-weight: 700;
}

.report-photo-summary-label svg,
.report-photo-chevron {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
}

.report-photo-count,
.report-photo-queue-count {
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
}

.report-photo-queue-count {
    justify-self: end;
    color: var(--accent);
    white-space: nowrap;
}

.report-photo-chevron {
    transition: transform 160ms ease;
}

.report-photo-manager[open] .report-photo-chevron {
    transform: rotate(180deg);
}

.report-photo-manager-body {
    display: grid;
    gap: 9px;
    padding: 9px 0 2px;
}

.report-photo-selection-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    min-width: 0;
}

.report-photo-selection-toolbar > span {
    margin-right: auto;
    color: var(--muted);
    font-size: 12px;
}

.report-photo-selection-toolbar > span strong {
    color: var(--ink);
}

.report-photo-selection-toolbar form {
    margin: 0;
}

.report-photo-selection-toolbar .button {
    min-height: 32px;
    padding: 6px 9px;
}

.report-photo-gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    max-height: 420px;
    overflow-y: auto;
}

.report-photo-item {
    position: relative;
    display: grid;
    align-content: start;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--panel);
}

.report-photo-item.is-selected {
    border-color: var(--accent);
    box-shadow: inset 0 0 0 1px var(--accent);
}

.report-photo-select {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--panel);
    cursor: pointer;
}

.report-photo-select input {
    width: 17px;
    height: 17px;
    margin: 0;
    accent-color: var(--accent);
}

.report-photo-preview {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--soft);
    color: inherit;
    cursor: zoom-in;
    touch-action: manipulation;
}

.report-photo-preview:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: -3px;
}

.report-photo-preview img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.report-photo-meta {
    display: grid;
    gap: 2px;
    min-width: 0;
    padding: 6px;
}

.report-photo-meta span,
.report-photo-meta small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.report-photo-meta span {
    font-size: 11px;
    font-weight: 700;
}

.report-photo-meta small {
    color: var(--muted);
    font-size: 10px;
}

.report-photo-actions {
    display: flex;
    justify-content: flex-end;
    gap: 3px;
    padding: 0 5px 5px;
}

.report-photo-actions form {
    margin: 0;
}

.report-photo-actions .icon-button {
    width: 27px;
    height: 27px;
    min-width: 27px;
}

.report-photo-empty {
    grid-column: 1 / -1;
    margin: 0;
    padding: 9px;
    color: var(--muted);
    font-size: 12px;
}

.report-photo-upload-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 7px;
}

.report-photo-upload-form label {
    display: grid;
    gap: 4px;
    min-width: 0;
    color: var(--muted);
    font-size: 11px;
}

.report-photo-upload-form input[type="file"] {
    width: 100%;
    min-width: 0;
    padding: 6px;
    font-size: 11px;
}

.report-photo-upload-form .button {
    min-height: 34px;
    padding: 7px 10px;
}

.report-photo-status {
    min-height: 15px;
    margin: 0;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.35;
}

.report-photo-status.is-error {
    color: var(--danger);
}

.report-photo-status.is-success {
    color: var(--success);
}

.report-photo-item.is-queued .report-photo-preview::after {
    content: "Queued";
    position: absolute;
    top: 5px;
    left: 5px;
    padding: 3px 5px;
    border-radius: 4px;
    background: var(--panel);
    color: var(--accent);
    font-size: 10px;
    font-weight: 700;
}

.shared-upload-panel {
    max-width: 920px;
}

.shared-upload-form {
    display: grid;
    gap: 14px;
    padding: 14px;
}

.shared-upload-completion-field {
    width: min(100%, 380px);
}

.shared-upload-files {
    display: grid;
    gap: 8px;
}

.shared-upload-file {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px;
    background: var(--panel);
}

.shared-upload-file span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shared-upload-file small {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 12px;
}

.shared-upload-form footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.shared-upload-visit-section {
    display: grid;
    gap: 10px;
}

.shared-upload-visit-section h3 {
    margin: 0;
    font-size: 16px;
}

.shared-search-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.shared-visit-search {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-width: min(420px, 100%);
    margin: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0 10px;
    background: var(--input);
}

.shared-visit-search i {
    width: 18px;
    height: 18px;
    color: var(--muted);
}

.shared-visit-search input {
    border: 0;
    padding-inline: 0;
    background: transparent;
}

.shared-visit-card-list {
    display: grid;
    gap: 8px;
    max-height: min(62vh, 620px);
    overflow: auto;
    padding-right: 2px;
}

.shared-visit-card-list.compact {
    max-height: none;
}

.shared-visit-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px;
    background: var(--panel);
    cursor: pointer;
}

.shared-visit-card:hover,
.shared-visit-card:focus-within {
    border-color: var(--danger);
    box-shadow: 0 0 0 1px rgba(239, 43, 45, 0.45);
}

.shared-visit-card.is-suggested {
    border-color: rgba(89, 224, 143, 0.55);
    background: rgba(89, 224, 143, 0.07);
}

.shared-visit-card input {
    margin-top: 4px;
}

.shared-visit-card span,
.shared-pending-card span {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.shared-visit-card strong,
.shared-visit-card small,
.shared-visit-card em,
.shared-pending-card strong,
.shared-pending-card small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shared-visit-card small,
.shared-pending-card small {
    color: var(--muted);
}

.shared-visit-card em {
    color: var(--success);
    font-style: normal;
    font-size: 12px;
}

.shared-pending-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 10px;
    padding: 14px;
}

.shared-pending-list.compact {
    padding-top: 0;
}

.shared-pending-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px;
    color: inherit;
    text-decoration: none;
    background: var(--panel);
}

.shared-pending-card:hover,
.shared-pending-card:focus-visible {
    border-color: var(--danger);
    outline: 1px solid var(--danger);
    outline-offset: 2px;
}

.shared-pending-card i {
    width: 20px;
    height: 20px;
    color: var(--success);
}

.mobile-report-list {
    display: none;
}

.report-send-history {
    display: grid;
    gap: 3px;
    min-width: 0;
    font-size: 11px;
    line-height: 1.25;
}

.report-send-history-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    color: var(--text);
}

.report-send-history-item i {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
}

.report-send-history-item.sent,
.report-send-history-item.draft_opened {
    color: var(--success);
}

.report-send-history-item.failed {
    color: var(--danger);
}

.report-send-history small,
.report-send-history-empty {
    color: var(--muted);
    font-size: 11px;
}

.report-send-history-previous {
    margin-top: 3px;
}

.report-send-history-previous > summary {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--muted);
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    list-style: none;
}

.report-send-history-previous > summary::-webkit-details-marker {
    display: none;
}

.report-send-history-previous > summary svg {
    width: 13px;
    height: 13px;
    transition: transform 140ms ease;
}

.report-send-history-previous[open] > summary svg {
    transform: rotate(180deg);
}

.report-send-history-previous-list {
    display: grid;
    gap: 7px;
    margin-top: 6px;
    padding: 7px 0 2px 8px;
    border-left: 2px solid var(--line);
}

.report-send-history-previous-event {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.mobile-controller-list {
    display: none;
}

.invoice-rate-summary {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
    padding: 10px;
    border-bottom: 1px solid var(--line);
}

.invoice-rate-summary div {
    display: grid;
    gap: 4px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 9px;
}

.invoice-rate-summary span,
.invoice-rate-summary small {
    color: var(--muted);
    font-size: 12px;
}

.invoice-rate-summary strong {
    color: var(--ink);
    font-size: 20px;
    font-weight: 800;
    line-height: 1.15;
}

.invoice-rate-summary small {
    font-size: 14px;
    font-weight: 800;
}

.manual-invoice-add {
    border-bottom: 1px solid var(--line);
    padding: 10px 12px;
}

.manual-invoice-add summary {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: 10px;
}

.manual-invoice-add summary span {
    color: var(--muted);
    font-size: 13px;
}

.manual-invoice-add .form-grid {
    margin-top: 12px;
}

.manual-invoice-add-form {
    align-items: end;
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(110px, 130px) minmax(180px, 1fr) minmax(220px, 1.2fr) minmax(220px, 1.2fr) minmax(132px, 150px) minmax(110px, 130px) minmax(140px, 160px) minmax(140px, 160px) minmax(160px, 190px) minmax(230px, 1fr) auto;
    margin-top: 12px;
}

.manual-invoice-add-form label,
.manual-invoice-edit-form label {
    min-width: 0;
}

.manual-invoice-add-form select,
.manual-invoice-add-form input,
.manual-invoice-add-form textarea,
.manual-invoice-edit-form select,
.manual-invoice-edit-form input,
.manual-invoice-edit-form textarea {
    width: 100%;
}

.manual-invoice-add-form select[multiple],
.manual-invoice-edit-form select[multiple] {
    min-height: 70px;
}

.manual-invoice-engineer-field {
    display: grid;
    gap: 5px;
    min-width: 0;
    color: #3d4650;
    font-size: 13px;
    font-weight: 600;
}

.invoice-engineer-dropdown {
    position: relative;
    min-width: 160px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 500;
}

.invoice-engineer-dropdown > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 36px;
    padding: 7px 9px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--panel);
    cursor: pointer;
    list-style: none;
    white-space: nowrap;
}

.invoice-engineer-dropdown > summary::-webkit-details-marker {
    display: none;
}

.invoice-engineer-dropdown > summary svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    transition: transform 120ms ease;
}

.invoice-engineer-dropdown[open] > summary svg {
    transform: rotate(180deg);
}

.invoice-engineer-options {
    position: absolute;
    z-index: 140;
    top: calc(100% + 4px);
    left: 0;
    display: grid;
    gap: 3px;
    width: max(100%, 220px);
    max-height: 260px;
    overflow-y: auto;
    padding: 7px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--popup);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}

.invoice-engineer-option {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    margin: 0;
    padding: 6px 7px;
    border-radius: 5px;
    color: var(--ink);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
}

.invoice-engineer-option:hover {
    background: var(--soft);
}

.invoice-engineer-option input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.invoice-engineer-option.is-selected {
    background: color-mix(in srgb, var(--accent) 22%, var(--panel));
    box-shadow: inset 3px 0 0 var(--accent);
    color: var(--accent);
    font-weight: 700;
}

.invoice-engineer-option:has(input:focus-visible) {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.manual-invoice-notes,
.manual-invoice-edit-notes {
    min-width: 0;
}

.manual-invoice-add-form .manual-invoice-notes,
.manual-invoice-add-form footer {
    grid-column: 1 / -1;
}

.manual-invoice-add-form footer {
    display: flex;
    justify-content: flex-end;
}

.manual-invoice-add-form .manual-invoice-amount-field input {
    max-width: 120px;
}

.manual-invoice-edit-popover {
    display: inline-block;
    position: relative;
}

.manual-invoice-edit-popover > summary {
    align-items: center;
    display: inline-flex;
    list-style: none;
}

.manual-invoice-edit-popover > summary::-webkit-details-marker {
    display: none;
}

.manual-invoice-edit-form {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.35);
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(150px, 1fr));
    padding: 12px;
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    width: min(620px, calc(100vw - 32px));
    white-space: normal;
    z-index: 80;
}

.manual-invoice-edit-form .manual-invoice-edit-notes,
.manual-invoice-edit-form .button {
    grid-column: 1 / -1;
}

.manual-invoice-table {
    border-bottom: 1px solid var(--line);
    min-width: 1720px;
    table-layout: fixed;
}

.manual-invoice-table th:nth-child(6),
.manual-invoice-table td:nth-child(6) {
    width: 450px;
}

.manual-invoice-table th:nth-child(4),
.manual-invoice-table td:nth-child(4) {
    width: 160px;
}

.manual-invoice-table th:nth-child(9),
.manual-invoice-table td:nth-child(9) {
    width: 130px;
}

.manual-invoice-table th:nth-child(10),
.manual-invoice-table td:nth-child(10) {
    width: 176px;
}

.manual-invoice-amount-cell input {
    max-width: 130px;
}

.manual-invoice-inline-form {
    margin: 0;
}

.manual-invoice-inline-row.is-editing td {
    background: color-mix(in srgb, var(--panel) 88%, var(--accent) 8%);
}

.manual-invoice-table input,
.manual-invoice-table select,
.manual-invoice-table textarea,
.invoice-lines-table input[form^="manual-invoice-row-"],
.invoice-lines-table select[form^="manual-invoice-row-"],
.invoice-lines-table textarea[form^="manual-invoice-row-"] {
    max-width: 100%;
    min-width: 0;
    width: 100%;
}

.manual-invoice-date-fields {
    display: grid;
    gap: 4px;
    min-width: 150px;
}

.manual-invoice-table .invoice-info-field,
.invoice-lines-table .invoice-info-field {
    min-height: 34px;
}

.invoice-job-remaining {
    color: var(--muted);
    font-size: 12px;
    margin-left: 12px;
    white-space: nowrap;
}

.invoice-original-custom-amount {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 11px;
    opacity: 0.72;
    text-decoration: line-through;
    white-space: nowrap;
}

.invoice-line-locked {
    opacity: 0.58;
}

.invoice-line-locked td {
    background: color-mix(in srgb, var(--panel) 72%, #9aa8b8 10%);
}

.invoice-line-locked .forecast-status,
.invoice-line-locked .invoice-action-cell form {
    opacity: 1;
}

@media (max-width: 1500px) {
    .manual-invoice-add-form {
        grid-template-columns: repeat(4, minmax(150px, 1fr));
    }

    .manual-invoice-notes,
    .manual-invoice-add-form footer {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .manual-invoice-add-form,
    .manual-invoice-edit-form {
        grid-template-columns: minmax(0, 1fr);
    }

    .manual-invoice-notes,
    .manual-invoice-add-form footer,
    .manual-invoice-edit-form .manual-invoice-edit-notes,
    .manual-invoice-edit-form .button {
        grid-column: auto;
    }

    .manual-invoice-edit-form {
        left: auto;
        right: 0;
        width: min(86vw, 420px);
    }
}

.invoice-lines-table {
    min-width: 1680px;
    table-layout: fixed;
}

.invoice-remaining-balance-panel {
    margin-top: 14px;
}

.invoice-remaining-balance-help {
    color: var(--muted);
    margin: 0;
    padding: 0 12px 12px;
}

.invoice-remaining-balance-table {
    min-width: 1180px;
    table-layout: fixed;
}

.invoice-remaining-balance-table th:nth-child(1) { width: 190px; }
.invoice-remaining-balance-table th:nth-child(2) { width: 150px; }
.invoice-remaining-balance-table th:nth-child(3) { width: 135px; }
.invoice-remaining-balance-table th:nth-child(4) { width: 145px; }
.invoice-remaining-balance-table th:nth-child(5) { width: 105px; }
.invoice-remaining-balance-table th:nth-child(7) { width: 175px; }

.invoice-remaining-balance-table textarea {
    min-height: 54px;
    resize: vertical;
    width: 100%;
}

.invoice-remaining-note-action {
    vertical-align: middle;
}

.invoice-remaining-note-action small {
    color: var(--muted);
    display: inline-block;
    margin-right: 7px;
    vertical-align: middle;
}

.invoice-remaining-note-action .icon-button {
    vertical-align: middle;
}

.invoice-remaining-note-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    vertical-align: middle;
}

.invoice-col-ticket {
    width: 126px;
}

.invoice-col-site {
    width: 160px;
}

.invoice-col-rate {
    width: 150px;
}

.invoice-col-custom-amount {
    width: 57px;
}

.invoice-col-invoice-info {
    width: 549px;
}

.invoice-info-cell {
    max-width: 549px;
    min-width: 549px;
    overflow: hidden;
    width: 549px;
}

.invoice-col-days {
    width: 70px;
}

.invoice-col-dates {
    width: 160px;
}

.invoice-col-engineers {
    width: 175px;
}

.invoice-col-money {
    width: 105px;
}

.invoice-col-amount {
    width: 130px;
}

.invoice-col-action {
    width: 176px;
}

.invoice-action-cell {
    text-align: right;
    white-space: nowrap;
    width: 176px;
    min-width: 176px;
    max-width: 176px;
}

.invoice-action-cell form {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    margin: 0;
}

.invoice-action-cell .button {
    margin-left: auto;
    min-width: 82px;
}

.quotes-toolbar {
    justify-content: flex-end;
    margin-bottom: 12px;
}

.manual-quote-requests-panel {
    margin-bottom: 14px;
}

.outstanding-report-window-settings {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(190px, 260px);
    align-items: end;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--soft);
}

.outstanding-report-window-settings > div {
    display: grid;
    gap: 7px;
}

.outstanding-report-window-settings .segmented {
    max-width: 420px;
}

@media (max-width: 640px) {
    .outstanding-report-window-settings {
        grid-template-columns: 1fr;
        align-items: stretch;
    }
}

.uploaded-quotes-panel {
    margin-top: 14px;
}

.quote-manual-add {
    border-bottom: 1px solid var(--line);
    padding: 10px 12px;
}

.quote-manual-add > summary {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.quote-manual-add > summary span {
    color: var(--muted);
    font-size: 13px;
}

.quote-manual-add-form {
    display: grid;
    grid-template-columns: repeat(4, minmax(170px, 1fr));
    align-items: end;
    gap: 10px;
    margin-top: 12px;
}

.quote-manual-add-form input,
.quote-manual-add-form select,
.quote-manual-add-form textarea {
    width: 100%;
}

.quote-manual-description {
    grid-column: 1 / -2;
}

.quote-manual-add-form footer {
    display: flex;
    justify-content: flex-end;
}

.manual-quote-requests-table {
    min-width: 1680px;
}

.manual-quote-requests-table th:nth-child(6),
.manual-quote-requests-table td:nth-child(6) {
    min-width: 360px;
}

.manual-quote-requests-table small {
    display: block;
    margin-top: 3px;
}

.quote-task-assignee-form {
    width: 170px;
    margin: 0;
}

.quote-task-assignee-form label,
.quote-task-assignee-form select {
    width: 100%;
}

.manual-quote-requests-table .actions form {
    display: inline-flex;
    margin: 0;
}

.completed-manual-quotes {
    padding: 12px;
    border-top: 1px solid var(--line);
}

.completed-manual-quotes > summary {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.completed-manual-quotes > summary span {
    color: var(--muted);
    font-size: 12px;
}

.completed-manual-quotes .table-scroll {
    margin-top: 10px;
}

@media (max-width: 1000px) {
    .quote-manual-add-form {
        grid-template-columns: repeat(2, minmax(170px, 1fr));
    }

    .quote-manual-description {
        grid-column: 1 / -1;
    }
}

@media (max-width: 620px) {
    .quote-manual-add-form {
        grid-template-columns: minmax(0, 1fr);
    }

    .quote-manual-description,
    .quote-manual-add-form footer {
        grid-column: auto;
    }
}

.admin-invoice-queue-table {
    table-layout: fixed;
}

.admin-invoice-queue-table th:nth-child(1),
.admin-invoice-queue-table td:nth-child(1) {
    width: 140px;
}

.admin-invoice-queue-table th:nth-child(2),
.admin-invoice-queue-table td:nth-child(2) {
    width: 160px;
}

.admin-invoice-queue-table th:nth-child(4),
.admin-invoice-queue-table td:nth-child(4) {
    width: 260px;
}

.admin-invoice-queue-table th:nth-child(5),
.admin-invoice-queue-table td:nth-child(5) {
    width: 112px;
}

.admin-invoice-queue-table .invoice-queue-amount-cell {
    width: 120px;
}

.admin-invoice-queue-table .invoice-fp-check-cell {
    width: 154px;
}

.invoice-fp-check-cell {
    vertical-align: middle;
}

.invoice-fp-check-cell small {
    color: var(--muted);
    display: block;
    line-height: 1.3;
    margin-top: 6px;
    white-space: nowrap;
}

.job-invoices-table {
    min-width: 860px;
}

.job-invoices-table th:nth-child(1),
.job-invoices-table td:nth-child(1) {
    width: 170px;
}

.job-invoices-table th:nth-child(2),
.job-invoices-table td:nth-child(2) {
    width: 110px;
}

.job-invoices-table th:nth-child(4),
.job-invoices-table td:nth-child(4) {
    width: 120px;
}

.job-invoices-table th:nth-child(5),
.job-invoices-table td:nth-child(5) {
    width: 160px;
}

.job-invoices-table td > small {
    color: var(--muted);
    display: block;
    margin-top: 4px;
}

.job-invoice-lines {
    display: grid;
    gap: 5px;
}

.job-invoice-lines > span {
    align-items: baseline;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.job-invoice-lines > span > span {
    min-width: 0;
}

.job-invoice-lines > span > strong {
    flex: 0 0 auto;
    font-weight: 500;
    white-space: nowrap;
}

.invoice-number-select-form {
    align-items: center;
    display: flex;
    gap: 6px;
    min-width: 250px;
}

.invoice-number-select-form select {
    min-width: 0;
    width: 210px;
}

.invoice-number-select-form .icon-button {
    flex: 0 0 34px;
}

.admin-invoice-queue-table .invoice-queue-actions-heading,
.admin-invoice-queue-table .invoice-action-cell {
    text-align: center;
}

.invoice-queue-select-cell {
    text-align: center;
    vertical-align: middle;
}

.invoice-queue-select-cell input[type="checkbox"] {
    cursor: pointer;
    margin: 0;
}

.invoice-col-select {
    width: 48px;
}

.invoice-normal-select-cell {
    text-align: center;
    vertical-align: middle;
}

.invoice-normal-select-cell input[type="checkbox"] {
    cursor: pointer;
    margin: 0;
}

.invoice-queue-panel-actions,
.invoice-merge-form {
    align-items: center;
    display: flex;
    gap: 10px;
}

.invoice-merge-form {
    margin: 0;
}

.invoice-merged-stack {
    display: grid;
    gap: 4px;
}

.invoice-lines-table tr.invoice-merge-selected td,
.admin-invoice-queue-table tr.invoice-merge-selected td {
    background: color-mix(in srgb, var(--accent) 13%, var(--panel));
}

.admin-invoice-queue-table tr.invoice-merged-row td {
    border-top-color: color-mix(in srgb, var(--accent) 38%, var(--border));
    border-bottom-color: color-mix(in srgb, var(--accent) 38%, var(--border));
}

.invoice-queue-ticket-cell,
.invoice-queue-ticket-cell a,
.invoice-queue-ticket-cell strong,
.invoice-requested-cell,
.invoice-requested-cell small {
    white-space: nowrap;
}

.invoice-queue-ticket-cell {
    overflow: hidden;
    text-overflow: ellipsis;
}

.invoice-queue-ticket-cell strong {
    font-weight: 500;
}

.invoice-queue-ticket-cell .invoice-source-period {
    display: table;
    margin-top: 5px;
}

.invoice-requested-cell {
    overflow: hidden;
    text-overflow: ellipsis;
}

.invoice-requested-cell small {
    color: var(--muted);
    margin-left: 8px;
}

.invoice-job-group-row td {
    background: color-mix(in srgb, var(--panel-strong) 82%, var(--accent) 18%);
    border-top: 2px solid var(--line);
    color: var(--ink);
    padding-block: 8px;
}

.invoice-job-group-row td > * {
    margin-right: 14px;
}

.invoice-job-group-summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 14px;
    width: 100%;
    margin: 0;
}

.invoice-job-group-summary > * {
    margin: 0;
}

.invoice-job-total {
    color: var(--ink);
    display: inline-flex;
    flex-direction: column;
    font-weight: 800;
    gap: 2px;
    line-height: 1.2;
    white-space: nowrap;
}

.invoice-job-total small {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
}

.invoice-job-total-cell,
.invoice-job-save-cell {
    vertical-align: middle;
}

.invoice-job-save-form {
    display: inline-flex;
    margin: 0;
}

.invoice-job-save-form .button {
    min-height: 32px;
}

@media (max-width: 640px) {
    .invoice-job-save-form {
        display: inline-flex;
    }

    .invoice-job-save-form .button {
        width: auto;
    }
}

.invoice-section-info-form {
    align-items: start;
    display: grid;
    gap: 6px;
    grid-template-columns: minmax(0, 1fr) auto;
    min-width: 0;
    width: 100%;
}

.invoice-section-info-form .icon-button {
    margin-top: 0;
}

.invoice-notes-field {
    min-height: 72px;
    padding: 8px 9px;
    resize: vertical;
}

.invoice-ticket-row-form select,
.invoice-custom-amount-field {
    min-height: 34px;
    width: 100%;
    min-width: 120px;
    padding: 6px 8px;
}

.invoice-custom-amount-field:disabled {
    background: rgba(148, 163, 184, 0.14);
    border-color: rgba(148, 163, 184, 0.22);
    color: var(--muted);
    cursor: not-allowed;
    opacity: 1;
}

.invoice-value-with-rate {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 3px 7px;
    max-width: 100%;
}

.invoice-value-with-rate > span:first-child {
    font-weight: 800;
    white-space: nowrap;
}

.invoice-value-with-rate > small {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.invoice-info-field {
    box-sizing: border-box;
    min-height: 34px;
    max-width: 100%;
    min-width: 0;
    padding: 6px 8px;
    resize: vertical;
    width: 100%;
}

.invoice-notes-field {
    width: 100%;
    min-width: 240px;
}

.invoice-days-cell {
    color: var(--muted);
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
}

.invoice-ticket-row-form select {
    min-width: 150px;
}

.data-table td.is-hidden > * {
    display: none;
}

.invoice-ticket-cell,
.invoice-ticket-cell a,
.invoice-ticket-cell strong {
    white-space: nowrap;
}

.invoice-ticket-cell strong {
    font-weight: 500;
}

.invoice-month-forecast {
    justify-self: center;
    color: #22c55e;
    font-size: 22px;
    font-weight: 900;
    line-height: 1.1;
    text-align: center;
    text-shadow: 0 0 16px rgba(34, 197, 94, 0.22);
}

.invoice-forecast-head {
    align-items: center;
    flex-wrap: wrap;
}

.invoice-forecast-head > div {
    display: grid;
    gap: 4px;
    min-width: 220px;
}

.invoice-forecast-upload {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
    justify-content: flex-end;
    min-width: 0;
}

.invoice-forecast-upload input[type="file"] {
    width: min(520px, 42vw);
    min-width: 280px;
}

.forecast-summary-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(118px, 1fr));
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
}

.forecast-summary-grid div {
    display: grid;
    gap: 3px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 8px 9px;
    background: color-mix(in srgb, var(--panel) 90%, var(--soft) 10%);
}

.forecast-summary-grid span,
.forecast-summary-grid small {
    color: var(--muted);
    font-size: 12px;
}

.forecast-summary-grid strong {
    font-size: 17px;
    font-weight: 800;
    line-height: 1.15;
}

.forecast-summary-grid .is-under strong,
.forecast-diff-negative {
    color: var(--danger);
    font-weight: 800;
}

.forecast-summary-grid .is-over strong,
.forecast-diff-positive {
    color: var(--success);
    font-weight: 800;
}

.forecast-year-graphic {
    display: grid;
    gap: 12px;
    padding: 12px 14px 14px;
    border-bottom: 1px solid var(--line);
}

.forecast-year-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.forecast-year-head h3 {
    margin: 0;
    font-size: 15px;
}

.forecast-year-head span,
.forecast-year-totals span {
    color: var(--muted);
    font-size: 12px;
}

.forecast-year-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.forecast-year-legend span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--ink);
    font-weight: 700;
}

.forecast-year-legend i {
    width: 9px;
    height: 9px;
    border-radius: 999px;
}

.forecast-year-line-wrap {
    min-width: 640px;
    overflow-x: auto;
}

.forecast-year-line-chart {
    display: block;
    width: 100%;
    min-width: 640px;
    height: 190px;
}

.forecast-year-line {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.forecast-year-line.is-budget,
.forecast-year-legend i.is-budget {
    stroke: #3b82f6;
    background: #3b82f6;
}

.forecast-year-line.is-actuals,
.forecast-year-legend i.is-actuals {
    stroke: #22c55e;
    background: #22c55e;
}

.forecast-year-line.is-forecast,
.forecast-year-legend i.is-forecast {
    stroke: #f97316;
    background: #f97316;
}

.forecast-year-legend i.is-scheduled {
    background: #06b6d4;
}

.forecast-year-scheduled-bar {
    fill: rgba(6, 182, 212, 0.32);
    stroke: #06b6d4;
    stroke-width: 1.5;
    rx: 3px;
}

.forecast-year-scheduled-label {
    fill: #c7f9ff;
    font-size: 11px;
    font-weight: 800;
    text-anchor: middle;
}

.forecast-year-value-marker line {
    stroke-width: 2;
    stroke-linecap: round;
}

.forecast-year-value-marker circle {
    stroke: var(--panel);
    stroke-width: 1.5;
}

.forecast-year-value-marker text {
    font-size: 11px;
    font-weight: 800;
}

.forecast-year-value-marker.is-forecast line {
    stroke: #f97316;
}

.forecast-year-value-marker.is-forecast circle {
    fill: #f97316;
}

.forecast-year-value-marker.is-forecast text {
    fill: #fed7aa;
}

.forecast-year-value-marker.is-target line {
    stroke: #3b82f6;
}

.forecast-year-value-marker.is-target circle {
    fill: #3b82f6;
}

.forecast-year-value-marker.is-target text {
    fill: #bfdbfe;
}

.forecast-year-label {
    fill: var(--muted);
    font-size: 11px;
    font-weight: 800;
    text-anchor: middle;
}

.forecast-year-totals {
    display: grid;
    grid-template-columns: repeat(4, minmax(130px, 1fr));
    gap: 8px;
}

.forecast-year-totals div {
    display: grid;
    gap: 3px;
    padding: 9px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--soft);
}

.forecast-year-totals strong {
    font-size: 16px;
}

.forecast-year-totals .is-under strong {
    color: var(--danger);
}

.forecast-year-totals .is-over strong {
    color: var(--success);
}

.forecast-alert-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
}

.forecast-alert-row span,
.forecast-status {
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 4px 9px;
    color: var(--muted);
    font-size: 12px;
}

.forecast-alert-row .is-danger,
.forecast-status.danger {
    border-color: var(--danger);
    color: var(--danger);
    background: color-mix(in srgb, var(--danger) 12%, transparent);
}

.forecast-status.warn {
    border-color: var(--warn);
    color: var(--warn);
    background: color-mix(in srgb, var(--warn) 12%, transparent);
}

.forecast-status.ok {
    border-color: var(--success);
    color: var(--success);
    background: color-mix(in srgb, var(--success) 12%, transparent);
}

.forecast-status.accepted {
    border-color: #38bdf8;
    color: #7dd3fc;
    background: rgba(56, 189, 248, 0.12);
}

.forecast-status.info {
    border-color: color-mix(in srgb, var(--muted) 70%, var(--line));
    color: var(--ink);
    background: color-mix(in srgb, var(--soft) 78%, transparent);
}

.timesheet-head {
    align-items: center;
    gap: 12px;
}

.timesheet-head > div:first-child {
    display: grid;
    gap: 4px;
    min-width: 220px;
}

.timesheet-actions,
.timesheet-upload {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 8px;
}

.timesheet-actions {
    min-width: 0;
}

.timesheet-upload {
    min-width: 0;
}

.timesheet-upload input[type="file"] {
    width: min(520px, 42vw);
    min-width: 280px;
}

.timesheet-summary-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(104px, 1fr));
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
}

.timesheet-summary-grid div {
    display: grid;
    gap: 3px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 8px 9px;
    background: color-mix(in srgb, var(--panel) 90%, var(--soft) 10%);
}

.timesheet-summary-grid span {
    color: var(--muted);
    font-size: 12px;
}

.timesheet-summary-grid strong {
    color: var(--ink);
    font-size: 18px;
    font-weight: 800;
    line-height: 1.15;
}

.timesheet-summary-grid small {
    color: var(--muted);
    font-size: 10px;
}

.timesheet-summary-grid .is-ok strong {
    color: var(--success);
}

.timesheet-summary-grid .is-accepted strong {
    color: #7dd3fc;
}

.timesheet-summary-grid .is-warn strong {
    color: var(--warn);
}

.timesheet-summary-grid .is-danger strong {
    color: var(--danger);
}

.timesheet-review-table {
    min-width: 1374px;
    table-layout: fixed;
}

.timesheet-review-table th,
.timesheet-review-table td,
.timesheet-missing-table th,
.timesheet-missing-table td {
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
}

.timesheet-review-table th:nth-child(1),
.timesheet-review-table td:nth-child(1) {
    width: 140px;
}

.timesheet-week-group-row > td {
    padding: 0;
    border-top: 2px solid color-mix(in srgb, var(--accent) 42%, var(--line));
    background: color-mix(in srgb, var(--soft) 78%, var(--panel) 22%);
}

.timesheet-week-group-summary {
    display: grid;
    grid-template-columns: minmax(240px, 360px) minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-height: 54px;
    padding: 9px 12px;
}

.timesheet-week-group-title,
.timesheet-week-group-metrics {
    display: flex;
    align-items: center;
    min-width: 0;
}

.timesheet-week-group-title {
    gap: 9px;
}

.timesheet-week-group-title > i {
    width: 19px;
    height: 19px;
    flex: 0 0 auto;
    color: var(--accent);
}

.timesheet-week-group-title > div {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.timesheet-week-group-title strong {
    color: var(--ink);
    font-size: 14px;
}

.timesheet-week-group-title span,
.timesheet-week-line-count {
    color: var(--muted);
    font-size: 12px;
}

.timesheet-week-group-metrics {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 6px;
}

.timesheet-week-hours {
    min-width: 52px;
    color: var(--ink);
    font-size: 15px;
    text-align: left;
}

.timesheet-fp-approval-button.button {
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
    padding: 0;
    border-color: var(--line);
    background: var(--panel);
    color: var(--muted);
}

.timesheet-fp-approval-button.button i {
    width: 18px;
    height: 18px;
}

.timesheet-fp-approval-button.button.is-ready {
    border-color: #22c55e;
    background: #166534;
    color: #fff;
}

.timesheet-fp-approval-button.button.has-pending {
    border-color: #f59e0b;
    color: #f59e0b;
    opacity: 1;
}

.timesheet-fp-approval-button.button.is-complete {
    border-color: #22c55e;
    color: #22c55e;
    opacity: 1;
}

.timesheet-fp-approval-button.button.is-processing i {
    animation: fp-spin 0.8s linear infinite;
}

.timesheet-fp-approval-result:empty {
    display: none;
}

.timesheet-fp-approval-result .fp-result-msg {
    margin: 0;
}

.activity-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.activity-card {
    padding: 0;
}

.activity-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
}

.activity-card-head h2 {
    margin: 0;
    font-size: 16px;
}

.activity-meta-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 12px 14px;
}

.activity-meta-list div {
    min-width: 0;
}

.activity-meta-list dt {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.activity-meta-list dd {
    margin: 2px 0 0;
    color: var(--ink);
    font-size: 13px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.activity-card-message {
    margin: 0;
    padding: 0 14px 12px;
    color: var(--muted);
    font-size: 12px;
}

.activity-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
    margin-bottom: 14px;
}

.activity-panel {
    margin-bottom: 14px;
}

.activity-table {
    min-width: 780px;
}

.activity-audit-table {
    min-width: 980px;
    table-layout: fixed;
}

.activity-audit-table th:nth-child(1),
.activity-audit-table td:nth-child(1) {
    width: 150px;
}

.activity-audit-table th:nth-child(2),
.activity-audit-table td:nth-child(2) {
    width: 170px;
}

.activity-audit-table th:nth-child(3),
.activity-audit-table td:nth-child(3) {
    width: 210px;
}

.activity-audit-table th:nth-child(5),
.activity-audit-table td:nth-child(5) {
    width: 130px;
}

.activity-audit-table td {
    white-space: normal;
    overflow-wrap: anywhere;
}

.activity-history-head {
    align-items: center;
}

.activity-history-head > div:first-child {
    display: grid;
    gap: 3px;
}

.activity-filter-form {
    display: grid;
    grid-template-columns: minmax(170px, 220px) minmax(180px, 300px) auto;
    gap: 8px;
    align-items: center;
    min-width: min(100%, 600px);
}

@media (max-width: 980px) {
    .activity-card-grid,
    .activity-columns {
        grid-template-columns: 1fr;
    }

    .activity-history-head {
        align-items: stretch;
        flex-direction: column;
    }

    .activity-filter-form {
        grid-template-columns: 1fr;
        min-width: 0;
    }
}

@media (max-width: 640px) {
    .invoice-status-toolbar .page-region-switch,
    .quotes-toolbar .page-region-switch,
    .region-switch-toolbar .page-region-switch {
        flex: 1 0 100%;
        width: 100%;
    }

    .page-region-switch .schedule-region-select {
        width: 100%;
        max-width: none;
    }

    .schedule-title-tools {
        display: grid;
        grid-template-columns: repeat(3, 34px) minmax(0, 1fr);
        align-items: center;
        width: 100%;
    }

    .schedule-title-tools > h2,
    .schedule-region-switch {
        grid-column: 1 / -1;
        width: 100%;
    }

    .schedule-region-switch label {
        display: block;
        width: 100%;
    }

    .schedule-region-select {
        width: 100%;
        max-width: none;
    }

    .schedule-stage-key {
        grid-column: 1;
    }

    .engineer-visibility-picker {
        grid-column: 2;
    }

    .schedule-undo-controls {
        grid-column: 3 / 5;
        margin-left: 0;
    }

    .schedule-undo-form .button {
        width: 34px;
        min-width: 34px;
        height: 34px;
        padding: 0;
    }

    .schedule-undo-form .button span {
        display: none;
    }
}

@media (max-width: 640px) {
    .activity-card-grid {
        gap: 10px;
    }

    .activity-meta-list {
        grid-template-columns: 1fr;
    }

    .activity-table {
        min-width: 680px;
    }

    .activity-audit-table {
        min-width: 860px;
    }
}

@media (max-width: 980px) {
    .chat-layout {
        position: relative;
        display: block;
        height: calc(100svh - 150px);
        min-height: min(620px, calc(100svh - 150px));
        overflow: hidden;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: var(--panel);
        box-shadow: var(--shadow);
    }

    .chat-sidebar,
    .chat-panel {
        position: absolute;
        inset: 0;
        display: flex;
        width: 100%;
        height: 100%;
        min-height: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        transition: transform .22s ease;
    }

    .chat-sidebar {
        flex-direction: column;
        overflow: hidden;
        transform: translateX(0);
    }

    .chat-panel {
        transform: translateX(105%);
    }

    .chat-layout.has-selected-room .chat-sidebar {
        transform: translateX(-105%);
    }

    .chat-layout.has-selected-room .chat-panel {
        transform: translateX(0);
    }

    .chat-layout.is-room-list .chat-sidebar {
        transform: translateX(0);
    }

    .chat-layout.is-room-list .chat-panel {
        transform: translateX(105%);
    }

    .chat-member-sidebar {
        display: none;
    }

    .chat-workspace-head {
        flex: 0 0 auto;
    }

    .chat-sidebar-section {
        display: flex;
        flex-direction: column;
        min-height: 0;
        border-top: 1px solid var(--line);
    }

    .chat-sidebar-section:first-of-type,
    .chat-dm-section {
        flex: 1 1 0;
    }

    .chat-room-list,
    .chat-dm-list {
        max-height: none;
        min-height: 0;
        overflow: auto;
    }

    .chat-create-drawer {
        flex: 0 0 auto;
    }

    .chat-room-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px;
        min-height: 52px;
        padding: 8px 10px;
    }

    .chat-room-title {
        min-width: 0;
        gap: 7px;
    }

    .chat-mobile-room-back {
        display: inline-grid;
        width: 34px;
        height: 34px;
    }

    .chat-room-head form {
        justify-self: end;
    }

    .chat-room-head .chat-room-notification-button {
        width: 34px;
        height: 34px;
        padding: 0;
    }

    .chat-room-title h2 {
        font-size: 18px;
    }

    .chat-room-title p {
        display: none;
    }
}

/* Keep every E.ON action on the same flat red/white button system.
   The important declarations intentionally isolate this brand theme from
   the standard dark/vivid button rules that appear later in the stylesheet. */
body.theme-eon .button,
body.theme-eon .icon-button {
    color: #4a2528 !important;
    border-color: #e5dfe0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
    filter: none;
    text-shadow: none;
}

body.theme-eon .button:hover:not(:disabled),
body.theme-eon .icon-button:hover:not(:disabled),
body.theme-eon .button.ghost:hover:not(:disabled) {
    color: #9f1308 !important;
    border-color: #e9aeb3 !important;
    background: #fff0f1 !important;
    box-shadow: none !important;
}

body.theme-eon .button.primary:not(:disabled),
body.theme-eon .button.add-action:not(:disabled),
body.theme-eon .book-visit-button:not(:disabled),
body.theme-eon .icon-button.report-send-action:not(:disabled),
body.theme-eon .button.save-button.is-dirty,
body.theme-eon .icon-button.save-button.is-dirty {
    color: #ffffff !important;
    border-color: #EA1B0A !important;
    background: #EA1B0A !important;
    box-shadow: none !important;
}

body.theme-eon .button.primary:hover:not(:disabled),
body.theme-eon .button.add-action:hover:not(:disabled),
body.theme-eon .book-visit-button:hover:not(:disabled),
body.theme-eon .icon-button.report-send-action:hover:not(:disabled),
body.theme-eon .button.save-button.is-dirty:hover:not(:disabled),
body.theme-eon .icon-button.save-button.is-dirty:hover:not(:disabled) {
    color: #ffffff !important;
    border-color: #9f1308 !important;
    background: #9f1308 !important;
    box-shadow: none !important;
}

body.theme-eon .button.bulk-edit-button:not(:disabled) {
    color: #9f1308 !important;
    border-color: #e9aeb3 !important;
    background: #fff0f1 !important;
    box-shadow: none !important;
}

body.theme-eon .button.bulk-edit-button:hover:not(:disabled) {
    color: #ffffff !important;
    border-color: #9f1308 !important;
    background: #9f1308 !important;
    box-shadow: none !important;
}

body.theme-eon .button.danger:not(:disabled),
body.theme-eon .button.danger[data-delete-selected-visit]:not(:disabled) {
    color: #ffffff !important;
    border-color: #a8000e !important;
    background: #a8000e !important;
    box-shadow: none !important;
}

body.theme-eon .button.danger:hover:not(:disabled),
body.theme-eon .button.danger[data-delete-selected-visit]:hover:not(:disabled) {
    color: #ffffff !important;
    border-color: #7f1018 !important;
    background: #7f1018 !important;
    box-shadow: none !important;
}

body.theme-eon .button.danger[data-delete-selected-visit]:not(:disabled) :is(span, svg, i) {
    color: currentColor !important;
    stroke: currentColor !important;
}

body.theme-eon .button:disabled,
body.theme-eon .icon-button:disabled {
    box-shadow: none !important;
    filter: none;
}

body.theme-eon .button:focus-visible,
body.theme-eon .icon-button:focus-visible {
    outline: 3px solid #262626;
    outline-offset: 3px;
    box-shadow: none !important;
}

body.theme-eon .fp-connection-badge:not(.is-disconnected):not(.is-paused) {
    min-height: 36px;
    padding: 0 12px;
    gap: 8px;
    color: #4a2528 !important;
    border-color: #e5dfe0 !important;
    border-radius: 10px;
    background: #ffffff !important;
    box-shadow: none !important;
    filter: none;
    text-shadow: none;
    font-size: inherit;
    font-weight: inherit;
}

body.theme-eon .schedule-floating-action {
    color: #9f1308 !important;
    border-color: #e9aeb3 !important;
    background: #ffffff !important;
    box-shadow: none !important;
    filter: none;
    text-shadow: none;
}

body.theme-eon .schedule-floating-action:hover,
body.theme-eon .schedule-floating-action:focus-visible {
    color: #ffffff !important;
    border-color: #EA1B0A !important;
    background: #EA1B0A !important;
    box-shadow: none !important;
}

body.theme-eon .schedule-floating-action:focus-visible {
    outline: 3px solid #262626;
    outline-offset: 3px;
}

body.theme-eon .schedule-floating-action:active {
    border-color: #9f1308 !important;
    background: #9f1308 !important;
}

.dra-filter-head {
    align-items: flex-start;
}

.dra-overview-panel,
.dra-kpi-panel,
.dra-recent-panel {
    margin-bottom: 16px;
}

.dra-recent-panel {
    margin-bottom: 0;
}

.dra-date-filter {
    display: flex;
    align-items: end;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.dra-date-filter label {
    display: grid;
    gap: 4px;
    min-width: 130px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.dra-summary-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    padding: 12px;
}

.dra-summary-grid > div {
    display: grid;
    gap: 6px;
    min-height: 72px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--soft);
}

.dra-summary-grid span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.dra-summary-grid strong {
    color: var(--ink);
    font-size: 24px;
    line-height: 1;
}

.dra-summary-grid .is-good strong,
.dra-status-pill.is-good {
    color: #67f09b;
}

.dra-summary-grid .is-warning strong {
    color: #ffd166;
}

.dra-summary-grid .is-danger strong,
.dra-status-pill.is-danger {
    color: #ff6b6b;
}

.dra-kpi-table td:first-child,
.dra-recent-table td:nth-child(4),
.dra-recent-table td:nth-child(5) {
    white-space: normal;
}

.dra-kpi-table small,
.dra-recent-table small {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.dra-progress-cell {
    display: grid;
    gap: 5px;
    min-width: 120px;
}

.dra-progress-track {
    display: block;
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: color-mix(in srgb, var(--line) 70%, transparent);
}

.dra-progress-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #ff2b2b, #ffd166, #67f09b);
}

.dra-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 62px;
    padding: 4px 8px;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}

.dra-status-view {
    background: transparent;
    cursor: pointer;
}

.dra-status-view:hover,
.dra-status-view:focus-visible {
    background: color-mix(in srgb, currentColor 10%, transparent);
    outline: 2px solid color-mix(in srgb, currentColor 46%, transparent);
    outline-offset: 2px;
}

.dra-clickable-row[data-open-url] {
    cursor: pointer;
}

.dra-clickable-row[data-dra-user-row] {
    cursor: pointer;
}

.dra-clickable-row[data-dra-user-row][aria-expanded="true"] > td {
    background: color-mix(in srgb, var(--panel) 90%, var(--soft));
}

.dra-user-detail .data-table td,
.dra-user-detail .data-table tr:hover > td,
.dra-user-detail .data-table tr:focus-within > td {
    background: var(--panel);
}

.dra-user-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--accent);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.dra-user-toggle:hover,
.dra-user-toggle:focus-visible {
    color: var(--accent-strong);
}

.dra-user-toggle svg {
    width: 15px;
    height: 15px;
    transition: transform 0.16s ease;
}

.dra-user-toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

.dra-user-detail-row > td {
    padding: 0 12px 14px;
    background: color-mix(in srgb, var(--panel) 82%, var(--soft));
}

.dra-user-detail {
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: color-mix(in srgb, var(--soft) 88%, transparent);
}

.dra-inline-schedule-table th,
.dra-inline-schedule-table td {
    vertical-align: top;
}

.dra-inline-schedule-table small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.dra-user-detail-loading,
.dra-user-detail-empty {
    padding: 12px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

.risk-assessment-form {
    display: grid;
    gap: 14px;
}

[data-dra-site-fields] {
    display: grid;
    gap: 14px;
}

[data-dra-site-fields][hidden] {
    display: none;
}

.dra-work-location-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.dra-work-location-options label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
    color: var(--ink);
    font-weight: 800;
}

@media (max-width: 640px) {
    .dra-work-location-options {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
        gap: 6px;
    }

    .dra-work-location-options label {
        justify-content: center;
        min-width: 0;
        gap: 5px;
        padding: 0 5px;
        font-size: 13px;
    }

    .dra-work-location-options input[type="radio"] {
        flex: 0 0 auto;
        width: auto;
        min-width: 0;
        margin: 0;
    }

    .dra-work-location-options label span {
        min-width: 0;
        text-align: center;
        white-space: nowrap;
    }
}

.dra-work-location-section small {
    color: var(--success);
    font-weight: 800;
}

.dra-completed-details {
    display: grid;
    gap: 12px;
    border-top: 1px solid var(--line);
}

.dra-completed-details > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
    padding: 0 14px;
    color: var(--muted);
    cursor: pointer;
    font-weight: 800;
    list-style: none;
}

.dra-completed-details > summary::-webkit-details-marker {
    display: none;
}

.dra-completed-details > summary svg {
    width: 17px;
    height: 17px;
    transition: transform 140ms ease;
}

.dra-completed-details[open] > summary svg {
    transform: rotate(180deg);
}

.dra-completed-details > .risk-assessment-form,
.dra-completed-details > .risk-history {
    margin: 0 14px 14px;
}

.risk-assessment-form .dra-section {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: color-mix(in srgb, var(--soft) 76%, transparent);
}

.risk-assessment-form .dra-section h3 {
    margin: 0;
    font-size: 16px;
}

.risk-assessment-form .dra-section p {
    margin: 0;
    color: var(--ink);
    line-height: 1.45;
}

.dra-bullet-list {
    display: grid;
    gap: 5px;
    margin: 0;
    padding-left: 18px;
}

.dra-question {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 9px 0;
    border-top: 1px solid var(--line);
}

.dra-question:first-of-type {
    border-top: 0;
}

.dra-options {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
}

.dra-options label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 800;
}

.dra-controlled-reason {
    display: grid;
    gap: 6px;
    padding: 10px;
    border: 1px solid color-mix(in srgb, #ff6b6b 55%, var(--line));
    border-radius: 8px;
    background: color-mix(in srgb, #ff2b2b 8%, var(--soft));
}

.dra-controlled-reason[hidden] {
    display: none;
}

.risk-assessment-form input[type="file"] {
    min-height: 42px;
}

@media (max-width: 900px) {
    .dra-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dra-date-filter {
        justify-content: flex-start;
    }
}

@media (max-width: 640px) {
    .dra-summary-grid {
        grid-template-columns: 1fr;
    }

    .dra-question {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .dra-options {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .risk-text-grid.risk-text-grid-wide,
    .risk-text-grid,
    .job-document-upload-form {
        grid-template-columns: 1fr;
    }

    .job-document-item {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .job-document-actions {
        justify-content: flex-start;
    }
}

.timesheet-review-table th:nth-child(2),
.timesheet-review-table td:nth-child(2) {
    width: 120px;
}

.timesheet-review-table th:nth-child(3),
.timesheet-review-table td:nth-child(3) {
    width: 76px;
}

.timesheet-review-table th:nth-child(4),
.timesheet-review-table td:nth-child(4) {
    width: 150px;
}

.timesheet-review-table th:nth-child(5),
.timesheet-review-table td:nth-child(5) {
    width: 200px;
}

.timesheet-review-table th:nth-child(6),
.timesheet-review-table td:nth-child(6),
.timesheet-review-table th:nth-child(7),
.timesheet-review-table td:nth-child(7) {
    width: 96px;
}

.timesheet-review-table th:nth-child(8),
.timesheet-review-table td:nth-child(8) {
    width: 160px;
}

.timesheet-review-table th:nth-child(9),
.timesheet-review-table td:nth-child(9) {
    width: 82px;
    text-align: center;
}

.timesheet-review-table th:nth-child(10),
.timesheet-review-table td:nth-child(10) {
    width: 126px;
}

.timesheet-row-action-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.timesheet-row-action-group form {
    margin: 0;
}

.timesheet-accept-button,
.timesheet-add-diary-button,
.timesheet-replace-diary-button {
    width: 34px;
    height: 34px;
    padding: 0;
}

.timesheet-add-diary-button {
    color: var(--success);
}

.timesheet-replace-diary-button {
    color: var(--warn);
}

.timesheet-notes-button {
    width: 34px;
    height: 34px;
}

.timesheet-note-dialog {
    width: min(560px, calc(100vw - 28px));
}

.timesheet-note-meta {
    display: grid;
    gap: 4px;
    padding: 12px 16px 0;
    color: var(--muted);
    font-size: 13px;
}

.timesheet-note-meta strong {
    color: var(--ink);
    font-size: 16px;
}

.timesheet-note-body {
    margin: 0;
    padding: 14px 16px;
    color: var(--ink);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.timesheet-missing-table {
    min-width: 980px;
    table-layout: fixed;
}

.timesheet-missing-table th:nth-child(1),
.timesheet-missing-table td:nth-child(1) {
    width: 140px;
}

.timesheet-missing-table th:nth-child(2),
.timesheet-missing-table td:nth-child(2) {
    width: 76px;
}

.timesheet-missing-table th:nth-child(3),
.timesheet-missing-table td:nth-child(3) {
    width: 130px;
}

.timesheet-missing-table th:nth-child(4),
.timesheet-missing-table td:nth-child(4) {
    width: 250px;
}

.timesheet-missing-table th:nth-child(5),
.timesheet-missing-table td:nth-child(5) {
    width: 110px;
}

.timesheet-missing-table th:nth-child(6),
.timesheet-missing-table td:nth-child(6) {
    width: 274px;
}

.timesheet-row-danger td {
    background: color-mix(in srgb, var(--danger) 8%, transparent);
}

.timesheet-row-warn td {
    background: color-mix(in srgb, var(--warn) 8%, transparent);
}

.timesheet-row-ok td {
    background: color-mix(in srgb, var(--success) 4%, transparent);
}

.timesheet-row-accepted td {
    background: rgba(56, 189, 248, 0.08);
}

.forecast-comparison-table {
    min-width: 1210px;
    table-layout: fixed;
}

.forecast-comparison-table th:nth-child(1),
.forecast-comparison-table td:nth-child(1) {
    width: 190px;
}

.forecast-comparison-table th:nth-child(2),
.forecast-comparison-table td:nth-child(2) {
    width: 150px;
}

.forecast-comparison-table th:nth-child(3),
.forecast-comparison-table td:nth-child(3),
.forecast-comparison-table th:nth-child(4),
.forecast-comparison-table td:nth-child(4),
.forecast-comparison-table th:nth-child(5),
.forecast-comparison-table td:nth-child(5),
.forecast-comparison-table th:nth-child(6),
.forecast-comparison-table td:nth-child(6) {
    width: 92px;
}

.forecast-comparison-table th:nth-child(7),
.forecast-comparison-table td:nth-child(7) {
    width: 170px;
}

.forecast-comparison-table th:nth-child(8),
.forecast-comparison-table td:nth-child(8) {
    width: 190px;
}

.forecast-comparison-table th:nth-child(9),
.forecast-comparison-table td:nth-child(9) {
    width: 160px;
}

.forecast-comparison-table th:nth-child(10),
.forecast-comparison-table td:nth-child(10) {
    width: 120px;
}

.forecast-comparison-table small {
    display: block;
    color: var(--muted);
    font-size: 11px;
    margin-top: 3px;
}

.forecast-comparison-table td {
    overflow: hidden;
    text-overflow: ellipsis;
}

.forecast-status {
    display: inline-flex;
    max-width: 100%;
    white-space: nowrap;
}

.forecast-row-danger td {
    background: color-mix(in srgb, var(--danger) 10%, var(--panel));
}

.job-import-summary-panel {
    margin-bottom: 12px;
}

.job-import-stats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
}

.job-import-stats div {
    display: grid;
    gap: 3px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 8px 9px;
    background: color-mix(in srgb, var(--panel) 90%, var(--soft) 10%);
}

.job-import-stats span {
    color: var(--muted);
    font-size: 11px;
}

.job-import-stats strong {
    font-size: 17px;
    font-weight: 800;
}

.job-import-changelog summary {
    padding: 10px 12px;
    color: var(--ink);
    font-weight: 800;
    cursor: pointer;
}

@media (max-width: 760px) {
    .invoice-forecast-panel {
        overflow: hidden;
    }

    .invoice-scheduled-panel > .panel-head {
        grid-template-columns: minmax(0, 1fr);
    }

    .invoice-month-forecast {
        justify-self: start;
        text-align: left;
    }

    .invoice-rate-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .invoice-forecast-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .invoice-forecast-upload {
        justify-content: stretch;
        width: 100%;
    }

    .invoice-forecast-upload input[type="file"],
    .invoice-forecast-upload .button {
        width: 100%;
    }

    .forecast-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        padding: 8px;
    }

    .forecast-summary-grid div {
        min-width: 0;
        padding: 7px;
    }

    .forecast-summary-grid span,
    .forecast-summary-grid small {
        font-size: 10px;
    }

    .forecast-summary-grid strong {
        font-size: 14px;
        white-space: nowrap;
    }

    .forecast-summary-grid div:nth-child(5) {
        grid-column: 1 / -1;
    }

    .timesheet-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .timesheet-actions,
    .timesheet-upload,
    .timesheet-import-select {
        justify-content: stretch;
        width: 100%;
    }

    .timesheet-upload input[type="file"],
    .timesheet-upload .button,
    .timesheet-import-select select {
        width: 100%;
        min-width: 0;
    }

    .timesheet-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        padding: 8px;
    }

    .timesheet-summary-grid div {
        min-width: 0;
        padding: 7px;
    }

    .timesheet-summary-grid span {
        font-size: 10px;
    }

    .timesheet-summary-grid strong {
        font-size: 15px;
    }

    .timesheet-week-group-summary {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        padding: 9px;
    }

    .timesheet-week-group-metrics {
        justify-content: flex-start;
    }

    .timesheet-panel {
        overflow: hidden;
    }

    .timesheet-panel .table-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .timesheet-panel .timesheet-review-table.data-table.compact {
        width: 1374px;
        min-width: 1374px;
    }

    .timesheet-panel .timesheet-missing-table.data-table.compact {
        width: 980px;
        min-width: 980px;
    }

    .forecast-year-graphic {
        gap: 8px;
        padding: 8px;
    }

    .forecast-year-head {
        display: grid;
        gap: 6px;
    }

    .forecast-year-head h3 {
        font-size: 13px;
    }

    .forecast-year-head span,
    .forecast-year-totals span {
        font-size: 10px;
    }

    .forecast-year-legend {
        justify-content: flex-start;
        gap: 6px 8px;
    }

    .forecast-year-legend span {
        font-size: 10px;
    }

    .forecast-year-line-wrap {
        width: 100%;
        min-width: 0;
        overflow: hidden;
    }

    .forecast-year-line-chart {
        width: 100%;
        min-width: 0;
        height: 142px;
    }

    .forecast-year-value-marker text,
    .forecast-year-scheduled-label,
    .forecast-year-label {
        font-size: 9px;
    }

    .forecast-year-totals {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    .forecast-year-totals div {
        min-width: 0;
        padding: 7px;
    }

    .forecast-year-totals strong {
        font-size: 13px;
        line-height: 1.15;
    }

    .forecast-alert-row {
        gap: 6px;
        padding: 8px;
    }

    .forecast-alert-row span {
        max-width: 100%;
        padding: 3px 7px;
        font-size: 10px;
        white-space: normal;
    }

    .job-import-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        padding: 8px;
    }

    .job-import-stats div {
        padding: 7px;
    }
}

@media (max-width: 390px) {
    .forecast-summary-grid strong,
    .forecast-year-totals strong {
        font-size: 12px;
    }

    .forecast-year-line-chart {
        height: 132px;
    }
}

.invoice-remaining-zero {
    color: var(--danger);
    font-weight: 800;
}

.invoice-status-toolbar {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.invoice-status-toolbar .button {
    flex: 0 0 auto;
}

.toolbar.invoice-month-nav {
    justify-content: flex-end;
    margin-bottom: 14px;
}

[data-invoice-panel],
.invoice-scheduled-panel {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.data-table.compact.invoice-lines-table {
    min-width: 1840px;
}

.data-table.compact.manual-invoice-table {
    min-width: 1720px;
}

.data-table.compact.admin-invoice-queue-table {
    min-width: 1280px;
}

[data-invoice-panel="sent"] .data-table.compact {
    min-width: 1360px;
}

.invoice-action-table th,
.invoice-action-table td,
.admin-invoice-queue-table th,
.admin-invoice-queue-table td {
    overflow-wrap: normal;
}

.invoice-action-table select,
.invoice-action-table input,
.invoice-action-table textarea,
.manual-invoice-table select,
.manual-invoice-table input,
.manual-invoice-table textarea {
    max-width: 100%;
}

.invoice-lines-table td:nth-child(7),
.invoice-lines-table td:nth-child(8),
.manual-invoice-table td:nth-child(8),
.manual-invoice-table td:nth-child(9),
.admin-invoice-queue-table td:nth-child(4),
.admin-invoice-queue-table td:nth-child(5) {
    line-height: 1.25;
}

@media (max-width: 760px) {
    .invoice-status-toolbar {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        padding-bottom: 4px;
    }

    .invoice-status-toolbar .button {
        min-width: max-content;
        white-space: nowrap;
    }

    .toolbar.invoice-month-nav {
        justify-content: center;
        flex-wrap: nowrap;
    }

    .invoice-rate-summary {
        min-width: 560px;
    }

    .invoice-scheduled-panel > .panel-head {
        min-width: 560px;
    }

    .manual-invoice-add {
        min-width: 560px;
    }

    .manual-invoice-add summary {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }

    .manual-invoice-add-form {
        min-width: 0;
    }

    .manual-invoice-edit-popover {
        position: static;
    }

    .manual-invoice-edit-form {
        left: auto;
        max-width: calc(100vw - 34px);
        right: 0;
        width: 420px;
    }

    .data-table.compact.invoice-lines-table {
        min-width: 1840px;
    }

    .data-table.compact.manual-invoice-table {
        min-width: 1720px;
    }

    .data-table.compact.admin-invoice-queue-table {
        min-width: 1280px;
    }

    [data-invoice-panel="sent"] .data-table.compact {
        min-width: 1360px;
    }
}

body.theme-dark input,
body.theme-dark select,
body.theme-dark textarea,
body.theme-vivid-dark input,
body.theme-vivid-dark select,
body.theme-vivid-dark textarea {
    background: #0f1720;
    color: var(--ink);
    border-color: var(--line);
}

body.theme-vivid-dark input,
body.theme-vivid-dark select,
body.theme-vivid-dark textarea {
    background: #02030a;
}

/* Keep every editable field legible when the application is using the light theme. */
body.theme-light input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
body.theme-light select,
body.theme-light textarea,
body.theme-light .rate-grid input {
    border-color: var(--line);
    background: var(--field-bg);
    color: var(--field-text);
    color-scheme: light;
}

body.theme-light input::placeholder,
body.theme-light textarea::placeholder {
    color: var(--field-placeholder);
    opacity: 1;
}

body.theme-light input:disabled,
body.theme-light select:disabled,
body.theme-light textarea:disabled,
body.theme-light .rate-grid input:disabled {
    background: var(--field-disabled-bg);
    color: var(--field-disabled-text);
    opacity: 1;
}

body.theme-light select option {
    background: var(--field-bg);
    color: var(--field-text);
}

body.theme-light input:-webkit-autofill,
body.theme-light input:-webkit-autofill:hover,
body.theme-light input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--field-text);
    box-shadow: 0 0 0 1000px var(--field-bg) inset;
}

body.theme-dark .calendar-cell,
body.theme-dark .schedule-engineer,
body.theme-dark .schedule-cell,
body.theme-dark .info-grid div,
body.theme-dark .info-grid .info-link,
body.theme-dark .info-grid .info-card-form,
body.theme-dark .job-note-body,
body.theme-dark .customer-stats div,
body.theme-dark .customer-stats a,
body.theme-vivid-dark .calendar-cell,
body.theme-vivid-dark .schedule-engineer,
body.theme-vivid-dark .schedule-cell,
body.theme-vivid-dark .info-grid div,
body.theme-vivid-dark .info-grid .info-link,
body.theme-vivid-dark .info-grid .info-card-form,
body.theme-vivid-dark .job-note-body,
body.theme-vivid-dark .customer-stats div,
body.theme-vivid-dark .customer-stats a {
    background: var(--panel);
}

body.theme-dark .calendar-head,
body.theme-dark .schedule-corner,
body.theme-dark .schedule-date,
body.theme-dark .data-table th,
body.theme-vivid-dark .calendar-head,
body.theme-vivid-dark .schedule-corner,
body.theme-vivid-dark .schedule-date,
body.theme-vivid-dark .data-table th {
    background: color-mix(in srgb, var(--panel) 88%, var(--accent) 12%);
}

body.theme-dark .data-table tr:hover > td,
body.theme-vivid-dark .data-table tr:hover > td {
    background: color-mix(in srgb, var(--panel) 84%, var(--accent) 16%);
}

/* The DRA schedule is nested inside the engineer row, so keep its hover state neutral. */
.dra-kpi-table.data-table > tbody > .dra-user-detail-row:hover > td {
    background: color-mix(in srgb, var(--panel) 82%, var(--soft));
}

.dra-user-detail .data-table.dra-inline-schedule-table > tbody > tr:hover > td {
    background: var(--panel);
}

@media (max-width: 1320px) {
    .customers-layout {
        grid-template-columns: minmax(180px, 250px) minmax(0, 1fr);
        gap: 10px;
    }

    .customers-layout .list-row {
        padding: 10px 12px;
        gap: 3px;
    }

    .customers-layout .list-row strong {
        font-size: 13px;
    }

    .customers-layout .list-row span,
    .customers-layout .list-row small {
        font-size: 12.5px;
    }

    .customer-detail {
        gap: 10px;
    }

    .customer-detail .panel-head,
    .customer-detail .section-title {
        padding: 10px 12px;
    }

    .customer-detail .panel-head h2,
    .customer-detail .section-title h2 {
        font-size: 15px;
    }

    .customer-stats {
        grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
        gap: 7px;
        padding: 10px;
    }

    .customer-stats div {
        padding: 8px;
        border-radius: 6px;
    }

    .customer-stats span {
        font-size: 11px;
        margin-bottom: 3px;
    }

    .customer-stats strong {
        font-size: 18px;
    }

    .customer-table th,
    .customer-table td {
        padding: 7px 8px;
        font-size: 13px;
    }

    .customer-table th:nth-child(1),
    .customer-table td:nth-child(1) {
        width: 92px;
    }

    .customer-table th:last-child,
    .customer-table td:last-child {
        width: 96px;
    }

    .customer-jobs-table th:nth-child(1),
    .customer-jobs-table td:nth-child(1) {
        width: 104px;
    }

    .customer-jobs-table th:nth-child(2),
    .customer-jobs-table td:nth-child(2) {
        width: auto;
    }

    .customer-jobs-table th:nth-child(3),
    .customer-jobs-table td:nth-child(3) {
        width: 64px;
    }

    .customer-jobs-table th:nth-child(4),
    .customer-jobs-table td:nth-child(4),
    .customer-jobs-table th:nth-child(5),
    .customer-jobs-table td:nth-child(5),
    .customer-jobs-table th:nth-child(6),
    .customer-jobs-table td:nth-child(6) {
        width: 84px;
    }

    .customer-jobs-table .job-number-col { width: 104px; }
    .customer-jobs-table .job-status-col { width: 64px; }
    .customer-jobs-table .money-col { width: 84px; }

    .rate-grid,
    .colour-presets {
        padding: 10px;
        gap: 8px;
    }
}

body.theme-dark .schedule-date.weekend,
body.theme-vivid-dark .schedule-date.weekend {
    background: #4a321d;
}

body.theme-dark .schedule-cell.weekend,
body.theme-vivid-dark .schedule-cell.weekend {
    background: #2f281f;
}

body.theme-dark .schedule-cell.weekend.is-on-call,
body.theme-vivid-dark .schedule-cell.weekend.is-on-call {
    background: #4a321d;
}

body.theme-dark .schedule-cell.is-on-call.is-date-picked,
body.theme-vivid-dark .schedule-cell.is-on-call.is-date-picked {
    background: var(--panel);
    box-shadow: inset 0 0 0 2px var(--accent);
}

body.theme-dark .schedule-cell.weekend.is-on-call.is-date-picked,
body.theme-vivid-dark .schedule-cell.weekend.is-on-call.is-date-picked {
    background: #4a321d;
    box-shadow: inset 0 0 0 2px var(--accent);
}

body.theme-dark .schedule-visit[style*="--tile-bg"],
body.theme-vivid-dark .schedule-visit[style*="--tile-bg"] {
    background: var(--tile-bg);
    color: var(--tile-fg);
    border-color: transparent;
    border-width: 3px;
    box-shadow: none;
}

body.theme-vivid-dark .schedule-visit[style*="--tile-bg"] {
    background: var(--tile-neon-bg);
    color: var(--tile-neon-fg);
    border-color: transparent;
    box-shadow: none;
}

body.theme-dark .schedule-visit[style*="--tile-bg"] span,
body.theme-dark .schedule-visit[style*="--tile-bg"] small,
body.theme-vivid-dark .schedule-visit[style*="--tile-bg"] span,
body.theme-vivid-dark .schedule-visit[style*="--tile-bg"] small {
    color: var(--tile-muted);
}

body.theme-vivid-dark .schedule-visit[style*="--tile-bg"] span,
body.theme-vivid-dark .schedule-visit[style*="--tile-bg"] small {
    color: var(--tile-neon-muted);
}

.schedule-visit[style*="--tile-bg"].is-selected,
body.theme-dark .schedule-visit[style*="--tile-bg"].is-selected,
body.theme-vivid-dark .schedule-visit[style*="--tile-bg"].is-selected {
    border-color: var(--danger) !important;
    outline: 0;
    box-shadow: inset 0 0 0 2px var(--danger) !important;
}

body.theme-vivid-dark .panel,
body.theme-vivid-dark dialog,
body.theme-vivid-dark .server-pill {
    border-color: var(--accent);
}

body.theme-vivid-dark .button,
body.theme-vivid-dark .icon-button {
    border-color: #3541ff;
    background: #02030a;
    color: var(--ink);
}

body.theme-vivid-dark .button.primary {
    color: #f8fafc;
    background: #071e34;
    border-color: #f8fafc;
}

body.theme-dark .button.add-action:not(:disabled),
body.theme-dark .button.primary.book-visit-button:not(:disabled),
body.theme-dark .icon-button.report-send-action:not(:disabled),
body.theme-vivid-dark .button.add-action:not(:disabled),
body.theme-vivid-dark .button.primary.book-visit-button:not(:disabled),
body.theme-vivid-dark .icon-button.report-send-action:not(:disabled) {
    background: #082f24;
    border-color: #8dffcf;
    color: #8dffcf;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 0 18px rgba(34, 197, 94, 0.24);
}

body.theme-vivid-dark .button.add-action:not(:disabled),
body.theme-vivid-dark .button.primary.book-visit-button:not(:disabled),
body.theme-vivid-dark .icon-button.report-send-action:not(:disabled) {
    border-color: #39ff14;
    color: #b8ff9f;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 0 18px rgba(57, 255, 20, 0.34);
}

body.theme-dark .button.save-button.is-dirty,
body.theme-dark .icon-button.save-button.is-dirty,
body.theme-vivid-dark .button.save-button.is-dirty,
body.theme-vivid-dark .icon-button.save-button.is-dirty {
    background: #071e34;
    border-color: #ffffff;
    color: #ffffff;
    opacity: 1;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 0 18px rgba(148, 197, 255, 0.24);
}

body.theme-dark .button.danger:not(:disabled),
body.theme-vivid-dark .button.danger:not(:disabled) {
    background: #2a0709;
    color: #ff6b6b;
    box-shadow: 0 0 22px rgba(239, 68, 68, 0.32);
}

.button.danger[data-delete-selected-visit]:not(:disabled),
.button.danger[data-controller-group-delete-selected]:not(:disabled),
body.theme-dark .button.danger[data-delete-selected-visit]:not(:disabled),
body.theme-dark .button.danger[data-controller-group-delete-selected]:not(:disabled),
body.theme-vivid-dark .button.danger[data-delete-selected-visit]:not(:disabled),
body.theme-vivid-dark .button.danger[data-controller-group-delete-selected]:not(:disabled) {
    min-height: 36px;
    padding: 0 12px;
    gap: 8px;
    border: 2px solid #ef4444;
    border-radius: 8px;
    background: #2a0709;
    color: #ff6b6b;
    font: inherit;
    font-weight: inherit;
    box-shadow: 0 0 22px rgba(239, 68, 68, 0.32);
}

.button.danger[data-delete-selected-visit]:not(:disabled) span,
.button.danger[data-delete-selected-visit]:not(:disabled) svg,
.button.danger[data-controller-group-delete-selected]:not(:disabled) span,
.button.danger[data-controller-group-delete-selected]:not(:disabled) svg,
body.theme-dark .button.danger[data-delete-selected-visit]:not(:disabled) span,
body.theme-dark .button.danger[data-delete-selected-visit]:not(:disabled) svg,
body.theme-dark .button.danger[data-controller-group-delete-selected]:not(:disabled) span,
body.theme-dark .button.danger[data-controller-group-delete-selected]:not(:disabled) svg,
body.theme-vivid-dark .button.danger[data-delete-selected-visit]:not(:disabled) span,
body.theme-vivid-dark .button.danger[data-delete-selected-visit]:not(:disabled) svg,
body.theme-vivid-dark .button.danger[data-controller-group-delete-selected]:not(:disabled) span,
body.theme-vivid-dark .button.danger[data-controller-group-delete-selected]:not(:disabled) svg {
    color: #ff6b6b;
    stroke: #ff6b6b;
}

.settings-layout {
    max-width: 1040px;
    display: grid;
    gap: 12px;
    padding-bottom: 18px;
}

.users-layout {
    max-width: 1180px;
}

.settings-panel {
    overflow: hidden;
}

.settings-panel .panel-head {
    gap: 12px;
    min-height: 52px;
    padding: 12px 14px;
    align-items: center;
}

.settings-panel .panel-head > div {
    flex: 1 1 auto;
    min-width: 0;
}

.settings-panel .panel-head > h2 {
    flex: 1 1 auto;
    min-width: 0;
}

.settings-panel.is-settings-collapsible > .panel-head,
.settings-layout > details.settings-panel > summary {
    cursor: pointer;
    user-select: none;
}

.settings-panel-toggle,
.settings-panel-toggle-icon {
    display: inline-grid;
    flex: 0 0 34px;
    place-items: center;
    width: 34px;
    height: 34px;
    min-height: 34px;
    margin-left: 2px;
    align-self: center;
}

.settings-panel-toggle-icon {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
    color: var(--ink);
}

.settings-panel-toggle svg,
.settings-panel-toggle-icon svg {
    width: 18px;
    height: 18px;
    transition: transform 160ms ease;
}

.settings-panel.is-settings-collapsible:not(.is-settings-collapsed) > .panel-head .settings-panel-toggle svg,
.settings-layout > details.settings-panel[open] > summary .settings-panel-toggle-icon svg {
    transform: rotate(180deg);
}

.settings-panel.is-settings-collapsed > :not(.panel-head) {
    display: none !important;
}

.settings-panel.is-settings-collapsed > .panel-head > .button:not(.settings-panel-toggle),
.settings-panel.is-settings-collapsed > .panel-head > .panel-actions {
    display: none;
}

.settings-panel.is-settings-collapsed > .panel-head > div > span {
    display: none;
}

.settings-layout > details.settings-panel > summary {
    min-height: 52px;
    margin: 0;
    padding: 12px 14px;
}

.settings-layout > details.settings-panel > summary::after,
.settings-layout > details.settings-panel > summary > span:not(.settings-panel-toggle-icon) {
    display: none;
}

.settings-layout > details.settings-panel:not([open]) > summary {
    border-bottom-color: transparent;
}

.settings-panel .panel-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.settings-section {
    display: grid;
    gap: 12px;
    min-width: 0;
    padding: 14px;
    border-bottom: 1px solid var(--line);
}

.settings-section > * {
    min-width: 0;
}

.settings-section > label:not(.check),
.settings-section > form > label:not(.check) {
    width: 100%;
    max-width: 660px;
}

.data-source-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: fit-content !important;
    max-width: 100%;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

.data-source-toggle input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.data-source-toggle-track {
    position: relative;
    flex: 0 0 42px;
    width: 42px;
    height: 24px;
    border: 1px solid var(--line-strong, var(--line));
    border-radius: 999px;
    background: var(--soft);
    transition: border-color 150ms ease, background 150ms ease;
}

.data-source-toggle-track > span {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--panel);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.25);
    transition: transform 150ms ease;
}

.data-source-toggle input:checked + .data-source-toggle-track {
    border-color: var(--accent);
    background: var(--accent);
}

.data-source-toggle input:checked + .data-source-toggle-track > span {
    transform: translateX(18px);
}

.data-source-toggle input:focus-visible + .data-source-toggle-track {
    outline: 3px solid color-mix(in srgb, var(--accent) 28%, transparent);
    outline-offset: 2px;
}

.data-source-status-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.import-source-inactive {
    border-left: 3px solid #f59e0b;
    color: var(--muted);
}

.manual-import-grid {
    grid-template-columns: 1fr;
}

.manual-import-form {
    display: grid;
    grid-template-columns: minmax(210px, 1fr) 90px 90px auto;
    gap: 10px;
    align-items: end;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--soft);
}

.manual-import-form > label {
    display: grid;
    gap: 6px;
    min-width: 0;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.manual-import-form > label:first-of-type {
    max-width: none !important;
}

.manual-import-form input[type="file"] {
    width: 100%;
    min-width: 0;
}

.manual-import-form .manual-import-period,
.manual-import-form .manual-import-period input[type="number"] {
    width: 90px;
}

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

    .manual-import-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .manual-import-form > label:first-of-type {
        grid-column: 1 / -1;
    }

    .manual-import-form .button {
        justify-self: end;
    }
}

.settings-panel .fields-2,
.settings-panel .fields-3,
.settings-panel .fields-4,
.settings-panel .fields-5 {
    width: 100%;
    justify-content: start;
}

.settings-panel .fields-2 {
    grid-template-columns: repeat(2, minmax(180px, 300px));
}

.settings-panel .fields-3 {
    grid-template-columns: repeat(3, minmax(150px, 210px));
}

.settings-panel .fields-4 {
    grid-template-columns: repeat(4, minmax(130px, 165px));
}

.settings-panel .fields-5 {
    grid-template-columns: repeat(5, minmax(110px, 132px));
}

.settings-panel input[type="number"] {
    width: min(100%, 140px);
}

.settings-panel input[type="time"] {
    width: min(100%, 160px);
}

.settings-panel select:not([multiple]) {
    width: min(100%, 320px);
}

.settings-panel textarea {
    width: 100%;
    max-width: 660px;
}

.settings-panel select[multiple] {
    width: 100%;
    max-width: 660px;
    max-height: 240px;
}

.settings-section h3 {
    margin: 2px 0 0;
    font-size: 16px;
}

.inline-control-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.inline-control-row input,
.inline-control-row select {
    min-width: 0;
}

.inline-control-row .button {
    flex: 0 0 auto;
}

.user-region-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.user-region-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    max-width: 100%;
    padding: 7px 9px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--soft);
    color: var(--text);
    font-size: 13px;
    font-weight: 800;
}

.user-region-chip > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-region-chip button {
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--danger);
    cursor: pointer;
}

.user-region-chip button svg {
    width: 14px;
    height: 14px;
    stroke-width: 3;
}

.chat-rank-settings-grid {
    display: grid;
    grid-template-columns: 84px minmax(180px, 1fr) 140px;
    width: 100%;
    max-width: 660px;
    gap: 8px;
    align-items: center;
}

.chat-rank-settings-grid > span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.chat-rank-settings-grid input {
    min-width: 0;
}

.import-settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 320px));
    justify-content: start;
    gap: 10px;
    align-items: start;
    width: 100%;
    min-width: 0;
}

.import-settings-grid > label {
    grid-column: auto;
    min-height: 0;
    min-width: 0;
    align-content: start;
    gap: 5px;
}

.import-settings-grid > label.import-setting-compact {
    grid-column: auto;
}

.import-settings-grid > label:has(.folder-picker-field) {
    grid-column: 1 / -1;
    max-width: 650px;
}

.import-settings-grid input,
.import-settings-grid select,
.import-settings-grid .folder-picker-field {
    width: 100%;
    min-height: 38px;
    min-width: 0;
}

.import-settings-grid small {
    color: var(--muted);
    line-height: 1.25;
}

.compact-field {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    width: auto;
}

.compact-field input {
    width: 78px;
    min-height: 32px;
}

.compact-field small {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.2;
}

.client-visit-time-control {
    display: grid;
    align-content: start;
    gap: 5px;
    min-width: 0;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
}

.client-visit-time-row {
    display: inline-grid;
    grid-template-columns: max-content auto max-content;
    gap: 6px;
    align-items: end;
    justify-content: start;
}

.client-visit-time-unit {
    display: grid;
    gap: 3px;
    margin: 0;
    min-width: 0;
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
}

.client-visit-time-unit input {
    width: 54px;
    min-width: 54px;
    max-width: 54px;
    height: 34px;
    padding: 5px 2px 5px 6px;
    text-align: center;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.client-visit-time-separator {
    padding-bottom: 8px;
    color: var(--ink);
    font-size: 16px;
    font-weight: 800;
    line-height: 1;
}

.client-visit-time-control small {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
}

.client-visit-lookahead-control {
    display: grid;
    align-content: start;
    gap: 5px;
    min-width: 0;
    color: #3d4650;
    font-size: 13px;
    font-weight: 400;
}

.client-visit-lookahead-row {
    display: inline-grid;
    grid-template-columns: 70px 110px;
    gap: 6px;
    align-items: center;
}

.client-visit-lookahead-row input,
.client-visit-lookahead-row select {
    width: 100%;
    min-height: 36px;
}

.passkey-section > p {
    margin: 0;
}

.passkey-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.passkey-actions .copy-status {
    flex: 1 1 220px;
    min-width: min(100%, 220px);
    font-size: 13px;
    line-height: 1.35;
}

.passkey-list {
    gap: 8px;
}

.passkey-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    min-width: 0;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--soft);
}

.passkey-row span {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.passkey-row small {
    color: var(--muted);
    font-size: 12px;
}

.settings-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 0 16px 16px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.folder-location-table {
    display: grid;
    gap: 8px;
}

.folder-location-header,
.folder-location-row {
    display: grid;
    grid-template-columns: minmax(110px, 0.65fr) minmax(220px, 1.4fr) minmax(220px, 1.4fr);
    gap: 10px;
    align-items: center;
}

.folder-location-header {
    padding: 0 4px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.folder-location-row {
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--soft);
}

.folder-location-row label,
.folder-location-report label {
    min-width: 0;
}

.folder-location-report {
    margin-top: 12px;
}

.folder-location-report small {
    display: block;
    margin-top: 6px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.folder-picker-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 38px;
    gap: 8px;
    align-items: stretch;
    min-width: 0;
}

.folder-picker-field input[readonly] {
    width: 100%;
    min-width: 0;
    cursor: default;
    overflow: hidden;
    text-overflow: ellipsis;
}

.folder-picker-field .icon-button {
    width: 38px;
    height: 38px;
    min-height: 38px;
    align-self: stretch;
}

#folder-browser-dialog {
    width: min(980px, calc(100vw - 32px));
    max-width: min(980px, calc(100vw - 32px));
    max-height: min(820px, calc(100svh - 32px));
}

.folder-browser-dialog {
    width: 100%;
    max-height: min(820px, calc(100svh - 32px));
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
}

.folder-browser-current {
    padding: 11px 12px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--soft);
    color: var(--ink);
    font-weight: 700;
    overflow-wrap: anywhere;
}

.folder-browser-actions {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.folder-browser-list {
    display: grid;
    gap: 6px;
    max-height: min(62vh, 560px);
    overflow: auto;
    padding-right: 2px;
}

.folder-browser-item {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 9px 10px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--panel);
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.folder-browser-item:hover {
    border-color: var(--accent);
    background: var(--soft);
}

.folder-browser-item svg {
    width: 17px;
    height: 17px;
    color: var(--accent);
    flex: 0 0 auto;
}

.folder-browser-item-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.folder-browser-item-copy strong,
.folder-browser-item-copy small {
    min-width: 0;
    overflow-wrap: anywhere;
    white-space: normal;
    line-height: 1.25;
}

.folder-browser-item-copy small {
    color: var(--muted);
    font-size: 12px;
}

body.theme-dark .folder-picker-field input[readonly],
body.theme-vivid-dark .folder-picker-field input[readonly],
body.theme-dark .folder-browser-current,
body.theme-dark .folder-browser-item,
body.theme-vivid-dark .folder-browser-current,
body.theme-vivid-dark .folder-browser-item {
    color: #ffffff;
}

body.theme-dark .folder-picker-field input[readonly]::placeholder,
body.theme-vivid-dark .folder-picker-field input[readonly]::placeholder {
    color: rgba(255, 255, 255, 0.72);
}

.page-title-settings {
    gap: 10px;
}

.page-title-row {
    display: grid;
    grid-template-columns: minmax(120px, 0.7fr) minmax(180px, 1fr) minmax(240px, 1.8fr);
    gap: 10px;
    align-items: end;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
}

.page-title-row h3 {
    margin: 0 0 8px;
    font-size: 14px;
}

.inline-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
}

.inline-check input,
.access-days input,
.permission-grid input {
    width: auto;
}

.access-days,
.permission-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.director-region-access {
    margin: 0;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 6px;
}

.director-region-access[hidden] {
    display: none;
}

.director-region-access legend {
    padding: 0 5px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.access-days label,
.permission-grid label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--soft);
    font-weight: 700;
    font-size: 13px;
}

.permission-row {
    align-items: start;
}

.user-list {
    display: grid;
    gap: 12px;
    padding: 14px;
}

.user-card {
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
    background: var(--panel);
}

.user-card.is-deep-link-target {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

.user-summary-row {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto 24px;
    gap: 12px;
    align-items: center;
    padding: 12px;
    cursor: pointer;
    list-style: none;
}

.user-summary-row::-webkit-details-marker {
    display: none;
}

.user-summary-row:hover {
    background: var(--soft);
}

.user-summary-row > svg {
    width: 18px;
    height: 18px;
    color: var(--muted);
    transition: transform 140ms ease;
}

.user-card[open] .user-summary-row > svg {
    transform: rotate(180deg);
}

.user-summary-avatar {
    display: inline-flex;
}

.user-summary-main {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.user-summary-main strong,
.user-summary-main small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-summary-main small {
    color: var(--muted);
    font-weight: 700;
}

.user-summary-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.user-settings-panel {
    border-top: 1px solid var(--line);
}

.user-notification-add-note {
    max-width: 760px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}

.user-notification-settings {
    background: color-mix(in srgb, var(--panel) 92%, var(--soft));
}

.user-notification-settings-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.user-notification-settings-head > div,
.user-notification-option > span,
.user-notification-purchase-copy > span:last-child {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.user-notification-settings-head small,
.user-notification-option small,
.user-notification-purchase-copy small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}

.user-notification-channel-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.user-notification-option {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--panel);
    color: var(--ink);
}

.user-notification-option > input {
    width: auto;
    margin-top: 3px;
    accent-color: var(--accent);
}

.user-notification-purchase-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px 18px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--panel);
}

.user-notification-purchase-copy {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.user-notification-icon {
    display: inline-grid;
    flex: 0 0 36px;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: var(--soft);
    color: var(--accent);
}

.user-notification-icon svg {
    width: 18px;
    height: 18px;
}

.user-notification-purchase-options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px 14px;
}

.user-notification-purchase-options .inline-check {
    white-space: nowrap;
}

.user-notification-purchase-options input:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.user-notification-role-note {
    grid-column: 1 / -1;
    justify-self: start;
}

@media (max-width: 720px) {
    .user-notification-channel-grid,
    .user-notification-purchase-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .user-notification-purchase-options {
        justify-content: flex-start;
    }
}

.user-role-action {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(180px, 240px) max-content auto;
    gap: 12px;
    align-items: end;
    border-bottom: 1px solid var(--line);
}

.user-role-action > div {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.user-role-action small {
    color: var(--muted);
}

.user-role-action select {
    width: 100%;
}

.user-avatar-row {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: end;
    padding: 12px;
    border-bottom: 1px solid var(--line);
}

.avatar-upload-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: end;
}

.avatar-cropper {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 82px minmax(160px, 1fr);
    align-items: center;
    gap: 12px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--soft);
}

.avatar-cropper[hidden] {
    display: none;
}

.avatar-cropper canvas {
    width: 82px;
    height: 82px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--panel);
    object-fit: cover;
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.avatar-cropper canvas.is-dragging {
    cursor: grabbing;
}

.avatar-cropper label {
    display: grid;
    gap: 6px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.avatar-cropper input[type="range"] {
    width: 100%;
    accent-color: var(--accent);
}

.avatar-crop-hint {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.panel-head.compact {
    padding: 10px 12px;
}

.panel-head.compact h3 {
    margin: 0;
}

.reset-password-row {
    border-top: 1px solid var(--line);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: end;
}

.user-approval-row > div {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.user-approval-row > div small,
.user-approval-row label small {
    color: var(--muted);
    line-height: 1.4;
}

.reset-password-action {
    border-top: 1px solid var(--line);
    justify-items: start;
}

.owner-password-dialog .button.ghost {
    border-color: #2563eb;
    color: #2563eb;
}

.owner-password-dialog .button.ghost:hover {
    background: rgba(37, 99, 235, 0.08);
    color: #1d4ed8;
}

.muted-text {
    margin: 0;
    color: var(--muted);
}

.reports-table td .muted-text,
.report-overview-table td .muted-text {
    display: block;
    margin-top: 2px;
}

.report-sent-line {
    color: var(--success);
    font-weight: 700;
}

.reports-context {
    padding: 0 16px 12px;
}

.report-approval-queue {
    margin-bottom: 16px;
}

.report-approval-queue .panel-head > div {
    display: grid;
    gap: 4px;
}

.report-approval-queue .panel-head p {
    max-width: 760px;
    line-height: 1.4;
}

.report-approval-table td {
    vertical-align: top;
}

.report-approval-table td > small,
.report-approval-table .report-job-link small {
    display: block;
    margin-top: 3px;
}

.report-review-actions {
    flex-wrap: wrap;
    min-width: 260px;
}

.report-review-actions form {
    margin: 0;
}

.report-review-actions .button {
    min-height: 34px;
    padding: 7px 10px;
    white-space: nowrap;
}

.reports-kpi-panel {
    margin-bottom: 16px;
    overflow: hidden;
}

.reports-kpi-panel > summary.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.reports-kpi-context {
    padding: 0 16px 12px;
    line-height: 1.5;
}

.reports-kpi-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    padding: 0 16px 16px;
}

.report-kpi-card {
    display: grid;
    align-content: start;
    gap: 7px;
    min-width: 0;
    min-height: 105px;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--soft);
}

.report-kpi-card > span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.25;
}

.report-kpi-card > strong {
    color: var(--ink);
    font-size: 24px;
    line-height: 1.1;
}

.report-kpi-card > small,
.report-kpi-list td small {
    display: block;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.35;
}

.report-kpi-card.is-good > strong {
    color: var(--success);
}

.report-kpi-card.is-warning > strong {
    color: #e8a928;
}

.report-kpi-card.is-danger > strong {
    color: var(--danger);
}

.reports-kpi-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 0 16px 16px;
}

.report-kpi-list {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 9px;
}

.report-kpi-list h3 {
    margin: 0;
    padding: 11px 12px;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    font-size: 14px;
}

.report-kpi-list .data-table {
    margin: 0;
}

.report-kpi-slowest {
    grid-column: 1 / -1;
}

.report-kpi-slowest td:first-child {
    min-width: 125px;
}

.report-overview-table td {
    vertical-align: top;
}

@media (max-width: 1300px) {
    .reports-kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .reports-kpi-grid,
    .reports-kpi-detail-grid {
        grid-template-columns: 1fr;
    }

    .report-kpi-slowest {
        grid-column: auto;
    }
}

.report-ticket {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    padding: 3px 7px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--text);
    background: rgba(255, 255, 255, 0.04);
    white-space: nowrap;
}

.report-nav-link {
    color: inherit;
    text-decoration: none;
}

.report-nav-link:hover,
.report-nav-link:focus-visible {
    color: var(--danger);
    outline: 1px solid var(--danger);
    outline-offset: 2px;
}

.report-job-link {
    display: inline-block;
    border-radius: 4px;
}

.report-visit-link {
    display: inline-block;
    border-radius: 4px;
}

.empty-table-cell {
    padding: 18px;
    color: var(--muted);
    text-align: center;
}

.audit-table td {
    overflow-wrap: anywhere;
}

.theme-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
}

.theme-card {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px;
    display: grid;
    gap: 8px;
    cursor: pointer;
    background: var(--panel);
}

.theme-card input {
    width: auto;
}

.theme-preview {
    height: 72px;
    border-radius: 8px;
    border: 1px solid var(--line);
}

.theme-preview-light {
    background: linear-gradient(135deg, #f5f7f8 0 50%, #ffffff 50%);
}

.theme-preview-dark {
    background: linear-gradient(135deg, #111820 0 50%, #18222c 50%);
}

.theme-preview-vivid {
    background:
        linear-gradient(135deg, #000000 0 50%, #05070d 50%),
        radial-gradient(circle at 70% 30%, #39ff14, transparent 35%);
    box-shadow: inset 0 0 0 2px #39ff14, 0 0 14px rgba(57, 255, 20, 0.45);
}

.theme-preview-eon {
    display: grid;
    place-items: center;
    padding: 14px;
    border-color: #e9aeb3;
    background: linear-gradient(135deg, #ffffff 0 58%, #fff0f1 58%);
    box-shadow: inset 0 -5px 0 #EA1B0A;
}

.theme-preview-eon img {
    width: min(100%, 92px);
    max-height: 40px;
}

.theme-accent-note {
    margin: -2px 0 12px;
}

.swatch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}

.swatch-choice {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px;
    background: var(--panel);
    cursor: pointer;
}

.swatch-choice input {
    width: auto;
}

.custom-accent-choice {
    grid-template-columns: auto 22px minmax(0, 1fr) 42px;
}

.custom-accent-choice input[type="color"] {
    width: 42px;
    height: 30px;
    min-height: 30px;
    padding: 2px;
    border-radius: 8px;
    cursor: pointer;
}

.swatch {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--swatch);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
}

.logo-preview-row {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
}

.settings-logo-preview {
    max-width: 220px;
    max-height: 90px;
    width: auto;
    height: auto;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.logo-size-form {
    display: grid;
    gap: 12px;
}

.logo-size-controls {
    display: grid;
    grid-template-columns: repeat(3, minmax(120px, 180px)) auto;
    gap: 10px;
    align-items: end;
}

.logo-size-controls label {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 6px;
    align-items: center;
}

.logo-size-controls label input {
    grid-column: 1;
    min-width: 0;
}

.logo-size-controls label span {
    grid-column: 2;
    align-self: end;
    padding-bottom: 8px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.logo-upload-form {
    display: grid;
    gap: 10px;
    justify-items: start;
}

.logo-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.logo-reset-form {
    justify-self: end;
}

.selected-date-list {
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f8fafb;
    color: var(--muted);
    font-size: 13px;
}

.bulk-section {
    display: grid;
    gap: 12px;
}

.is-hidden {
    display: none !important;
}

@media (max-width: 980px) {
    .folder-location-header {
        display: none;
    }

    .folder-location-row {
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .folder-location-row > strong {
        font-size: 14px;
    }

    body { grid-template-columns: 1fr; }
    .sidebar {
        position: static;
        height: auto;
        display: flex;
        align-items: center;
        gap: 12px;
        overflow-x: auto;
        overflow-y: visible;
        z-index: 1000;
        background: color-mix(in srgb, var(--panel) 94%, var(--bg) 6%);
        color: var(--ink);
        border-bottom: 1px solid var(--line);
        box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
    }
    body.theme-dark .sidebar {
        background: color-mix(in srgb, var(--panel) 92%, var(--bg) 8%);
        color: var(--ink);
        border-bottom-color: var(--line);
        box-shadow: 0 12px 26px rgba(0, 0, 0, 0.34);
    }
    body.theme-vivid-dark .sidebar {
        background: color-mix(in srgb, var(--panel) 86%, var(--bg) 14%);
        border-right: 0;
        border-bottom: 1px solid var(--line);
        box-shadow: 0 0 22px color-mix(in srgb, var(--line) 42%, transparent);
    }
    .brand {
        padding: 0;
        order: 4;
        margin-left: auto;
        flex: 0 0 auto;
        display: flex;
    }
    .brand-logo {
        width: min(var(--nav-logo-width, 222px), 48vw);
        max-height: 72px;
    }
    .sidebar-user {
        order: 1;
        margin-top: 0;
        padding: 0;
        border-top: 0;
        min-width: 46px;
        position: relative;
        z-index: 1100;
    }
    .sidebar-user-summary {
        justify-content: flex-start;
        width: auto;
    }
    .sidebar-user-summary div {
        display: none;
    }
    .sidebar-online-users {
        display: none;
    }
    .sidebar-account-menu {
        position: fixed;
        top: 58px;
        left: 8px;
        z-index: 50000;
        width: min(254px, calc(100vw - 16px));
        height: auto;
        min-height: 0;
        max-height: min(420px, calc(100svh - 66px));
        overflow: auto;
        isolation: isolate;
        box-shadow: 0 18px 42px rgba(0, 0, 0, 0.5);
    }
    .sidebar-account-menu.is-account-menu-overlay,
    .sidebar-account-menu:popover-open {
        gap: 2px;
        padding: 5px;
        width: min(254px, calc(100vw - 16px));
        max-height: min(420px, calc(100svh - 16px));
    }
    .sidebar-account-menu a,
    .sidebar-account-action,
    .sidebar-account-role-switch label {
        min-height: 34px;
        padding: 7px 8px;
        gap: 7px;
        font-size: 14px;
        line-height: 1.15;
    }
    .sidebar-account-menu svg {
        width: 16px;
        height: 16px;
        flex: 0 0 16px;
    }
    .sidebar-avatar-form {
        grid-template-columns: minmax(0, 1fr) 34px;
        align-items: center;
        gap: 4px;
        padding: 5px;
    }
    .sidebar-avatar-file {
        min-height: 34px;
        padding: 7px 8px;
        font-size: 14px;
        line-height: 1.15;
    }
    .sidebar-avatar-form .button {
        min-height: 34px;
        width: 34px;
        padding: 0;
        justify-content: center;
    }
    .sidebar-account-role-switch {
        grid-template-columns: minmax(0, 1fr);
        gap: 3px;
    }
    .sidebar-account-role-switch select {
        width: 100%;
        max-width: 120px;
        height: 34px;
        font-size: 12px;
    }
    .sidebar-avatar-form .button .save-button-label {
        display: none;
    }
    .sidebar-avatar-cropper {
        grid-column: 1 / -1;
    }
    .nav { display: flex; }
    .sidebar .nav { order: 2; }
    .nav a {
        white-space: nowrap;
        color: color-mix(in srgb, var(--ink) 78%, var(--muted));
        border: 1px solid transparent;
        background: transparent;
    }
    .nav a.active,
    .nav a:hover,
    body.theme-dark .nav a.active,
    body.theme-dark .nav a:hover {
        background: color-mix(in srgb, var(--accent) 18%, var(--panel));
        border-color: color-mix(in srgb, var(--accent) 62%, var(--line));
        color: var(--accent);
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);
    }
    body.theme-vivid-dark .nav a {
        color: color-mix(in srgb, var(--ink) 70%, var(--accent));
    }
    body.theme-vivid-dark .nav a.active,
    body.theme-vivid-dark .nav a:hover {
        background: color-mix(in srgb, var(--accent) 18%, #000000);
        border-color: var(--accent);
        color: var(--accent);
        box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 36%, transparent), inset 0 0 0 1px var(--accent);
    }
    .split, .diary-layout, .sites-layout, .customers-layout { grid-template-columns: 1fr; }
    .customers-layout .list-panel {
        max-height: 260px;
        overflow: auto;
    }
    .customer-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .detail-grid { grid-template-columns: 1fr; }
    .logo-preview-row,
    .logo-size-controls { grid-template-columns: 1fr; }
    .logo-reset-form { justify-self: start; }
    .calendar-head, .calendar-grid { grid-template-columns: repeat(7, minmax(78px, 1fr)); }
    .calendar-cell { min-height: calc(104px * var(--calendar-zoom)); }
    .fields-2, .fields-3, .fields-4, .fields-5, .form-grid, .two-factor-actions, .user-avatar-row, .user-role-action, .reset-password-row, .avatar-upload-form, .import-settings-grid,
    .settings-panel .fields-2, .settings-panel .fields-3, .settings-panel .fields-4, .settings-panel .fields-5 { grid-template-columns: minmax(0, 1fr); }
    .import-settings-grid > label,
    .import-settings-grid > label.import-setting-compact {
        grid-column: 1 / -1;
        min-height: 0;
    }
    .settings-layout {
        gap: 12px;
    }
    .settings-panel .panel-head {
        align-items: stretch;
        gap: 10px;
        padding: 14px;
    }
    .settings-section {
        gap: 12px;
        padding: 14px;
    }
    .import-settings-grid {
        gap: 12px;
    }
    .customer-info-row {
        grid-template-columns: minmax(0, 1fr) 34px;
    }
    .customer-info-row label {
        grid-column: 1 / -1;
    }
    .customer-info-row .icon-button {
        grid-column: 2;
        justify-self: end;
    }
    .customer-info-grid {
        grid-template-columns: 1fr;
    }
    .visit-schedule-range {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .visit-schedule-range label:last-child {
        grid-column: 1 / -1;
    }
    .user-summary-row { grid-template-columns: 46px minmax(0, 1fr) 24px; }
    .user-summary-row .avatar-large { width: 46px; height: 46px; }
    .user-summary-meta { grid-column: 2 / -1; justify-content: flex-start; }
    .topbar {
        display: block;
        align-items: center;
        margin-bottom: 12px;
    }
    .topbar-copy {
        display: block;
    }
    .topbar h1 {
        min-width: 0;
        font-size: clamp(20px, 6.1vw, 24px);
        line-height: 1.08;
        white-space: nowrap;
    }
    .topbar p {
        margin-top: 4px;
    }
    .topbar-right {
        display: none;
    }
    .chat-layout {
        display: flex;
        flex-direction: column;
        grid-template-columns: 1fr;
        gap: 14px;
        height: auto;
        min-height: 0;
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }
    .chat-sidebar {
        display: block;
        border: 1px solid var(--line);
        border-radius: 8px;
        max-height: none;
        overflow: hidden;
        background: color-mix(in srgb, var(--panel) 92%, var(--bg) 8%);
        box-shadow: var(--shadow);
    }
    .chat-workspace-head,
    .chat-room-head {
        min-height: 54px;
    }
    .chat-workspace-head {
        padding: 10px;
    }
    .chat-workspace-icon {
        width: 34px;
        height: 34px;
        border-radius: 10px;
    }
    .chat-level-card {
        margin: 10px;
        padding: 10px;
    }
    .chat-sidebar-section {
        display: block;
        min-height: 0;
        border-top: 1px solid var(--line);
        border-bottom: 0;
    }
    .chat-sidebar-section:first-of-type {
        flex: 0 0 auto;
        border-top: 0;
    }
    .chat-sidebar-section h3 {
        padding: 11px 12px 0;
    }
    .chat-room-list {
        flex: none;
        max-height: min(28svh, 210px);
        padding: 10px;
    }
    .chat-dm-list {
        max-height: min(22svh, 170px);
        padding: 10px;
    }
    .chat-sidebar-bottom {
        display: block;
        max-height: none;
        margin-top: 0;
        overflow: visible;
        border-top: 1px solid var(--line);
    }
    .chat-dm-section {
        min-height: 0;
    }
    .chat-sidebar-resizer {
        display: none;
    }
    .chat-rank-section {
        display: block;
    }
    .chat-rank-section summary {
        min-height: 38px;
        padding: 10px 12px;
    }
    .chat-rank-list {
        max-height: min(24svh, 190px);
        padding: 8px 10px 10px;
    }
    .chat-create-drawer {
        margin-top: 0;
        border-top: 1px solid var(--line);
        border-bottom: 0;
    }
    .chat-create-drawer > summary {
        min-height: 40px;
        padding: 9px 10px;
    }
    .chat-create-form {
        padding: 0 10px 10px;
    }
    .chat-panel {
        display: flex;
        flex-direction: column;
        height: min(76svh, 760px);
        min-height: min(620px, calc(100svh - 96px));
        overflow: hidden;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: var(--panel);
        box-shadow: var(--shadow);
    }
    .chat-room-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
        padding: 10px;
    }
    .chat-room-head form {
        justify-self: stretch;
    }
    .chat-room-head .button {
        width: 100%;
        justify-content: center;
    }
    .chat-messages {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        overflow: auto;
        overscroll-behavior: contain;
        padding: 14px 10px;
    }
    .chat-message {
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 8px;
        padding-inline: 6px;
    }
    .chat-message-avatar {
        width: 34px;
        height: 34px;
    }
    .chat-message-main,
    .chat-compose,
    .chat-compose-message {
        min-width: 0;
        max-width: 100%;
    }
    .chat-message header {
        gap: 3px 7px;
    }
    .chat-reply-preview,
    .chat-forwarded-label,
    .chat-reply-composer {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        padding: 6px;
    }
    .chat-reply-preview,
    .chat-forwarded-label {
        display: grid;
        grid-template-columns: 16px minmax(0, 1fr);
        align-items: start;
    }
    .chat-reply-composer {
        display: grid;
        grid-template-columns: 16px minmax(0, 1fr) 30px;
        align-items: center;
        gap: 6px;
    }
    .chat-reply-preview span,
    .chat-forwarded-label span,
    .chat-reply-composer span {
        min-width: 0;
        white-space: normal;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        line-height: 1.25;
    }
    .chat-reply-composer .icon-button {
        width: 30px;
        min-height: 30px;
        padding: 0;
    }
    .chat-message-actions {
        opacity: 1;
        pointer-events: auto;
    }
    .chat-message-menu {
        position: fixed;
        top: auto;
        right: 10px;
        bottom: 10px;
        left: 10px;
        min-width: 0;
    }
    .chat-attachment {
        max-width: 100%;
    }
    .chat-compose {
        gap: 7px;
        padding: 10px 8px 12px;
    }
    .chat-compose-message textarea,
    .chat-rich-input {
        width: 100%;
        min-height: 68px;
        resize: vertical;
    }
    .chat-compose-actions {
        gap: 7px;
    }
    .chat-add-panel {
        position: fixed;
        right: 10px;
        bottom: 10px;
        left: 10px;
        width: auto;
        max-height: min(72svh, 520px);
    }
    .notification-content header {
        display: grid;
        gap: 3px;
    }
    .notification-content time {
        justify-self: start;
    }
    .page-title-row {
        grid-template-columns: 1fr;
    }
    .page-title-row h3 {
        margin-bottom: 0;
    }
}

@media (max-width: 640px) {
    .settings-layout {
        gap: 10px;
    }

    .settings-panel .panel-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        align-items: center;
        padding: 12px;
    }

    .settings-panel .panel-head > h2,
    .settings-panel .panel-head > div:first-child:not(.panel-actions) {
        grid-column: 1;
        grid-row: 1;
    }

    .settings-panel .panel-head > .button:not(.settings-panel-toggle) {
        grid-column: 2;
        grid-row: 1;
        width: 34px;
        min-width: 34px;
        height: 34px;
        min-height: 34px;
        padding: 0;
        justify-content: center;
    }

    .settings-panel .panel-head > .button:not(.settings-panel-toggle) span,
    .settings-panel .panel-actions .button span {
        display: none;
    }

    .settings-panel .panel-head > .settings-panel-toggle {
        grid-column: 3;
        grid-row: 1;
        width: 34px;
        justify-self: end;
    }

    .settings-panel .panel-actions {
        grid-column: 2;
        grid-row: 1;
        width: auto;
        display: flex;
        gap: 6px;
    }

    .settings-panel .panel-actions .button {
        width: 34px;
        min-width: 34px;
        height: 34px;
        min-height: 34px;
        padding: 0;
        justify-content: center;
    }

    .chat-rank-settings-grid {
        grid-template-columns: 48px minmax(0, 1fr) 92px;
    }

    .chat-rank-settings-grid input[type="number"] {
        width: 100%;
    }

    .settings-section {
        gap: 10px;
        padding: 12px;
    }

    .import-settings-grid {
        gap: 10px;
    }

    .import-settings-grid > label {
        gap: 5px;
    }

    .settings-check-grid {
        gap: 8px;
    }

    .folder-picker-field {
        grid-template-columns: minmax(0, 1fr) 36px;
        gap: 6px;
    }

    .folder-picker-field .icon-button {
        width: 36px;
        height: 36px;
        min-height: 36px;
    }

    dialog {
        width: calc(100vw - 8px);
        max-width: calc(100vw - 8px);
        max-height: calc(100svh - 12px);
        overflow: hidden;
    }

    #visit-dialog,
    #bulk-job-dialog {
        width: calc(100vw - 8px);
        max-width: calc(100vw - 8px);
    }

    #folder-browser-dialog {
        width: calc(100vw - 8px);
        max-width: calc(100vw - 8px);
        max-height: calc(100svh - 12px);
    }

    .folder-browser-dialog {
        max-height: calc(100svh - 12px);
    }

    .folder-browser-list {
        max-height: calc(100svh - 220px);
    }

    #visit-dialog {
        width: calc(100vw - 2px);
        max-width: calc(100vw - 2px);
    }

    #bulk-job-dialog {
        width: calc(100vw - 2px);
        max-width: calc(100vw - 2px);
    }

    .dialog-form {
        max-height: calc(100svh - 12px);
        overflow-y: auto;
        gap: 9px;
        padding: 10px;
    }

    #visit-dialog .dialog-form {
        gap: 7px;
        padding: 8px;
    }

    #bulk-job-dialog .dialog-form {
        gap: 7px;
        padding: 8px;
    }

    .dialog-form header {
        gap: 8px;
    }

    .dialog-form header h2 {
        min-width: 0;
        font-size: 18px;
    }

    .dialog-form footer {
        position: sticky;
        bottom: -10px;
        margin: 0 -10px -10px;
        padding: 10px;
        border-top: 1px solid var(--line);
        background: var(--popup);
    }

    .dialog-form footer .button {
        width: 100%;
        justify-content: center;
    }

    #visit-dialog .dialog-form footer {
        bottom: -8px;
        margin: 0 -8px -8px;
        padding: 8px;
    }

    #bulk-job-dialog .dialog-form footer {
        bottom: -8px;
        margin: 0 -8px -8px;
        padding: 8px;
    }

    #bulk-job-dialog .dialog-form input,
    #bulk-job-dialog .dialog-form select,
    #bulk-job-dialog .dialog-form textarea {
        min-width: 0;
        max-width: 100%;
        padding: 7px 6px;
        border-radius: 8px;
    }

    #bulk-job-dialog .fields-3 {
        gap: 7px;
    }

    #bulk-job-dialog .bulk-section {
        gap: 8px;
    }

    #bulk-job-dialog .selected-date-list {
        padding: 8px 9px;
        border-radius: 8px;
    }

    .dialog-form textarea {
        min-height: 84px;
        max-height: 150px;
    }

    .dialog-form .visit-date-range,
    .dialog-form .visit-time-range {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px;
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    .dialog-form .visit-date-range label,
    .dialog-form .visit-time-range label {
        min-width: 0;
        overflow: hidden;
    }

    .dialog-form .visit-date-range input,
    .dialog-form .visit-time-range input {
        box-sizing: border-box;
        height: 32px;
        min-width: 0;
        max-width: 100%;
        padding: 6px 2px;
        font-size: 10px;
        line-height: 1.1;
        letter-spacing: 0;
    }

    .dialog-form .visit-date-range input::-webkit-date-and-time-value,
    .dialog-form .visit-time-range input::-webkit-date-and-time-value {
        min-width: 0;
        text-align: center;
    }

    .dialog-form .visit-date-range input::-webkit-calendar-picker-indicator,
    .dialog-form .visit-time-range input::-webkit-calendar-picker-indicator {
        width: 12px;
        margin: 0;
        padding: 0;
    }

    .job-picker {
        gap: 5px;
    }

    .shell {
        width: 100%;
        max-width: 100vw;
        padding: 12px;
    }

    .toolbar {
        flex-wrap: wrap;
    }

    .toolbar .schedule-toolbar-actions {
        order: 20;
        width: 100%;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 6px;
        align-items: stretch;
    }

    .toolbar .schedule-toolbar-actions.schedule-toolbar-actions-callout {
        grid-template-columns: minmax(0, 1fr);
    }

    .schedule-toolbar-actions .button,
    .schedule-toolbar-actions .toolbar-action-form,
    .schedule-toolbar-actions .toolbar-action-form .button {
        width: 100%;
        min-width: 0;
    }

    .schedule-toolbar-actions .button {
        min-height: 34px;
        padding: 0 7px;
        gap: 5px;
        font-size: 12px;
        line-height: 1;
        white-space: nowrap;
    }

    .schedule-toolbar-actions .button svg {
        width: 15px;
        height: 15px;
        flex: 0 0 15px;
    }

    .schedule-toolbar-actions .delete-selected-button span {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .toolbar.wrap .search,
    .toolbar.wrap .toolbar-form,
    .toolbar.wrap .upload {
        flex: 1 1 100%;
        min-width: 0;
    }

    .toolbar.wrap .search input {
        min-width: 0;
    }

    .toolbar.wrap .search select {
        min-width: 92px;
        max-width: 38%;
    }

    .toolbar.wrap .upload {
        align-items: stretch;
    }

    .toolbar.wrap .upload input[type="file"] {
        min-width: 0;
        max-width: 100%;
    }

    .toolbar-title {
        min-width: 0;
        flex: 0 1 auto;
        max-width: min(220px, 42vw);
    }

    .sites-layout {
        width: 100%;
        max-width: 100%;
        gap: 10px;
        min-height: auto;
    }

    .sites-layout > .panel {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow: hidden;
    }

    .sites-layout .list-panel {
        height: min(46svh, 420px);
        max-height: min(46svh, 420px);
        overflow: auto;
    }

    .sites-layout .list-row,
    .sites-layout .detail-form {
        padding-left: 12px;
        padding-right: 12px;
    }

.sites-layout .panel-head,
.sites-layout .section-title {
    align-items: stretch;
    flex-wrap: wrap;
}

    .column-picker-menu {
        left: auto;
        right: 0;
    }

    .controller-group-head {
        align-items: stretch;
        flex-direction: column;
    }

    .controller-group-title {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        gap: 8px;
        width: 100%;
    }

    .controller-group-title h3 {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .controller-group-title .column-picker {
        justify-self: end;
    }

    .controller-group-title .column-picker summary.icon-button {
        width: 34px;
        height: 34px;
        min-width: 34px;
        padding: 0;
    }

    .controller-group-title .column-picker-menu {
        left: auto;
        right: 0;
        width: min(210px, calc(100vw - 28px));
        max-height: min(360px, calc(100svh - 120px));
        overflow: auto;
    }

    .controller-group-actions {
        justify-content: flex-start;
    }

    .controller-group-actions .lookup-status {
        min-width: 0;
        text-align: left;
    }

    .controller-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sites-layout .panel-head h2,
    .sites-layout .section-title h2 {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .sites-layout .table-scroll {
        border-top: 0;
    }

    .sites-layout .data-table.compact {
        min-width: 620px;
    }

    .site-vpn-status {
        align-items: stretch;
        flex-direction: column;
    }

    .site-vpn-status .button {
        width: 100%;
    }

    .local-connection-toggle {
        justify-content: center;
        width: 100%;
    }

    .sites-layout .controllers-table-standard {
        min-width: 980px;
    }

    .sites-layout .controllers-table-iq {
        min-width: 1280px;
    }

    .sites-layout .controllers-table th[data-controller-column="lan"],
    .sites-layout .controllers-table td[data-controller-column="lan"],
    .sites-layout .controllers-table th[data-controller-column="os"],
    .sites-layout .controllers-table td[data-controller-column="os"] {
        width: 42px;
        min-width: 42px;
    }

    .sites-layout .controllers-table th[data-controller-column="id"],
    .sites-layout .controllers-table td[data-controller-column="id"] {
        min-width: 92px;
    }

    .sites-layout .controllers-table th[data-controller-column="ip"],
    .sites-layout .controllers-table td[data-controller-column="ip"] {
        width: 176px;
        min-width: 176px;
    }

    .sites-layout .controllers-table th[data-controller-column="hostname"],
    .sites-layout .controllers-table td[data-controller-column="hostname"] {
        width: 150px;
        min-width: 150px;
    }

    .sites-layout .controllers-table .ip-actions {
        gap: 4px;
        min-width: 166px;
    }

    .sites-layout .controllers-table .ip-actions .ip-link {
        width: auto;
        min-width: max-content;
        max-width: none;
        overflow: visible;
        text-overflow: clip;
    }

    .rate-grid {
        grid-template-columns: 1fr;
        padding: 12px;
    }

    .rate-mode {
        padding: 12px 12px 0;
    }

    .detail-grid .panel,
    .rate-settings,
    .rate-grid {
        width: 100%;
        max-width: 100%;
    }

    .data-table.compact {
        min-width: 430px;
    }

    .reports-table {
        display: none;
    }

    .sites-layout .reports-table {
        display: table;
    }

    .sites-layout .site-reports-panel .table-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .sites-layout .site-reports-panel summary.section-title {
        gap: 8px;
    }

    .mobile-controller-list {
        display: none;
    }

    .mobile-controller-head,
    .mobile-controller-row {
        display: grid;
        grid-template-columns: 34px 34px minmax(108px, 1.35fr) minmax(104px, 0.9fr);
        gap: 8px;
        align-items: center;
    }

    .mobile-controller-head {
        color: var(--muted);
        font-size: 10px;
        font-weight: 700;
        padding: 0 4px 6px;
    }

    .mobile-controller-row {
        border-top: 1px solid var(--line);
        padding: 8px 4px;
        font-size: 11px;
        line-height: 1.15;
    }

    .mobile-controller-row span {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-controller-row .ip-link {
        display: block;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .report-template-summary,
    .report-download-form,
    .report-upload-form,
    .visit-subcategory-form,
    .job-subsetting-add,
    .job-visit-category-list form {
        grid-template-columns: minmax(0, 1fr);
    }

    .report-template-summary .button,
    .report-download-form .button,
    .report-upload-form .button,
    .job-subsetting-add .button {
        width: 100%;
    }

    .report-selection-toolbar {
        align-items: center;
        padding: 10px 12px;
    }

    .report-selection-toolbar > .report-selection-count {
        display: flex;
        align-items: center;
        margin-right: auto;
    }

    .report-selection-toolbar .button {
        width: auto;
    }

    #report-email-dialog,
    .report-email-dialog-form {
        max-height: calc(100svh - 12px);
    }

    .report-email-stakeholder-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .report-email-dialog-form footer {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .report-email-dialog-form footer .button {
        width: 100%;
    }

    .report-download-actions {
        justify-content: stretch;
        width: 100%;
    }

    .report-io-list-check {
        width: 100%;
    }

    .branch-tag-toggle {
        white-space: normal;
    }

    .shared-search-row {
        align-items: stretch;
        flex-direction: column;
    }

    .shared-upload-form footer {
        display: grid;
        grid-template-columns: 1fr;
    }

    .shared-upload-form footer .button {
        width: 100%;
    }

    .shared-visit-card-list {
        max-height: 58vh;
    }

    .mobile-report-list {
        display: grid;
        gap: 8px;
        padding: 12px;
    }

    .mobile-report-item {
        display: grid;
        grid-template-columns: 34px minmax(0, 1fr);
        align-items: start;
        gap: 10px;
        border: 1px solid var(--line);
        border-radius: 8px;
        padding: 10px;
        background: var(--panel);
    }

    .mobile-report-item > .report-selection-check {
        grid-column: 1;
        grid-row: 1;
        justify-content: flex-start;
        align-self: start;
    }

    .mobile-report-item > .mobile-report-details {
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
    }

    .mobile-report-item > .actions {
        grid-column: 2;
        grid-row: 2;
        min-width: 0;
        flex-wrap: wrap;
        justify-content: flex-end;
        justify-self: end;
    }

    .mobile-report-item strong,
    .mobile-report-item span {
        display: block;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-report-item span {
        color: var(--muted);
        font-size: 12px;
        margin-top: 3px;
    }

    .mobile-report-item .report-send-history {
        margin-top: 7px;
        gap: 4px;
    }

    .mobile-report-item .report-send-history span,
    .mobile-report-item .report-send-history small,
    .mobile-report-item .report-send-history-empty {
        display: block;
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
    }

    .mobile-report-item .report-send-history-item {
        display: flex;
        align-items: flex-start;
    }

    .mobile-report-item .report-photo-manager {
        grid-column: 1 / -1;
        width: 100%;
        margin-top: 9px;
    }

    .mobile-report-item .report-photo-manager span,
    .mobile-report-item .report-photo-manager small {
        margin-top: 0;
    }

    .mobile-report-item .report-photo-summary-label,
    .mobile-report-item .report-photo-queue-count {
        display: inline-flex;
        overflow: visible;
        text-overflow: clip;
        white-space: nowrap;
    }

    .report-photo-selection-toolbar form,
    .report-photo-selection-toolbar .button {
        width: 100%;
    }

    .report-photo-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .report-preview-dialog,
    .report-preview-dialog.is-draggable-dialog {
        position: fixed;
        box-sizing: border-box;
        top: max(4px, env(safe-area-inset-top));
        right: max(4px, env(safe-area-inset-right));
        bottom: max(4px, env(safe-area-inset-bottom));
        left: max(4px, env(safe-area-inset-left));
        width: auto;
        max-width: none;
        height: auto;
        max-height: none;
        margin: 0;
    }

    .report-preview-shell {
        box-sizing: border-box;
        height: 100%;
        padding: 10px;
    }

    .report-preview-shell header h2 {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .report-preview-body img {
        padding: 0;
        touch-action: pinch-zoom;
    }

    .report-photo-upload-form {
        grid-template-columns: minmax(0, 1fr);
    }

    .report-photo-upload-form .button {
        width: 100%;
    }

    .calendar-head,
    .calendar-grid {
        grid-template-columns: repeat(7, minmax(38px, 1fr));
    }

    .calendar-head span {
        padding: 8px 2px;
        font-size: 11px;
    }

    .calendar-cell {
        min-height: max(42px, calc(86px * var(--calendar-zoom)));
        padding: max(2px, calc(5px * var(--calendar-zoom))) max(1px, calc(3px * var(--calendar-zoom)));
        gap: max(1px, calc(3px * var(--calendar-zoom)));
    }

    .day-number,
    .chip,
    .more {
        font-size: max(7px, calc(10px * var(--calendar-zoom)));
    }

    .day-number {
        width: max(18px, calc(28px * var(--calendar-zoom)));
        height: max(18px, calc(28px * var(--calendar-zoom)));
    }

    .chip {
        padding: max(1px, calc(4px * var(--calendar-zoom))) max(2px, calc(6px * var(--calendar-zoom)));
    }

    .schedule-scroll,
    .table-panel {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .schedule-grid {
        --schedule-mobile-engineer-width: 118px;
        --schedule-mobile-day-width: 168px;
        grid-template-columns: var(--schedule-mobile-engineer-width) repeat(var(--schedule-days), var(--schedule-mobile-day-width));
        min-width: calc(var(--schedule-mobile-engineer-width) + (var(--schedule-days) * var(--schedule-mobile-day-width)));
    }

    .schedule-period-track-week {
        width: max-content;
        min-width: 100%;
    }

    .schedule-period-track-week > .schedule-grid-week,
    .schedule-grid-week {
        --schedule-mobile-engineer-width: clamp(86px, 24vw, 104px);
        --schedule-mobile-day-width: 134px;
        grid-template-columns: var(--schedule-mobile-engineer-width) repeat(var(--schedule-days), var(--schedule-mobile-day-width));
        width: max-content;
        min-width: calc(var(--schedule-mobile-engineer-width) + (var(--schedule-days) * var(--schedule-mobile-day-width)));
    }

    .schedule-grid-week .schedule-corner,
    .schedule-grid-week .schedule-engineer {
        padding: 5px 3px;
    }

    .schedule-grid-week .schedule-date {
        padding: 5px 2px;
    }

    .schedule-grid-week .schedule-date strong {
        font-size: 10px;
    }

    .schedule-grid-week .schedule-date span {
        font-size: 9px;
    }

    .schedule-grid-week .schedule-cell {
        padding: 3px;
        gap: 2px;
    }

    .schedule-grid-week .schedule-visit {
        padding: 2px 3px;
        gap: 1px;
    }

    .schedule-grid-week .schedule-visit strong {
        font-size: 10px;
        line-height: 1.05;
    }

    .schedule-grid-week .schedule-visit span,
    .schedule-grid-week .schedule-visit small {
        font-size: 8px;
        line-height: 1.05;
    }

    .schedule-grid-day {
        --schedule-mobile-engineer-width: 118px;
        --schedule-mobile-day-width: 320px;
        grid-template-columns: var(--schedule-mobile-engineer-width) repeat(var(--schedule-days), var(--schedule-mobile-day-width));
        min-width: calc(var(--schedule-mobile-engineer-width) + (var(--schedule-days) * var(--schedule-mobile-day-width)));
    }

    .schedule-grid-month {
        --schedule-mobile-engineer-width: 110px;
        --schedule-mobile-day-width: 76px;
        grid-template-columns: var(--schedule-mobile-engineer-width) repeat(var(--schedule-days), var(--schedule-mobile-day-width));
        min-width: calc(var(--schedule-mobile-engineer-width) + (var(--schedule-days) * var(--schedule-mobile-day-width)));
    }

    .schedule-corner,
    .schedule-date,
    .schedule-engineer,
    .schedule-cell {
        font-size: max(9px, calc(13px * var(--schedule-zoom)));
    }

    .schedule-corner,
    .schedule-engineer {
        padding: max(5px, calc(10px * var(--schedule-zoom)));
    }

    .schedule-date {
        padding: max(4px, calc(8px * var(--schedule-zoom))) max(3px, calc(6px * var(--schedule-zoom)));
    }

    .schedule-date span,
    .schedule-engineer span,
    .schedule-visit span,
    .schedule-visit small {
        font-size: max(8px, calc(11px * var(--schedule-zoom)));
    }

    .schedule-engineer,
    .schedule-cell {
        height: max(62px, calc(104px * var(--schedule-zoom)));
        min-height: max(62px, calc(104px * var(--schedule-zoom)));
    }

    .schedule-engineer.is-on-call-engineer {
        grid-template-rows: max(24px, calc(40px * var(--schedule-zoom))) auto auto;
        gap: max(1px, calc(2px * var(--schedule-zoom)));
        padding: max(2px, calc(6px * var(--schedule-zoom)));
    }

    .schedule-engineer.is-on-call-engineer .avatar-schedule {
        width: max(24px, calc(40px * var(--schedule-zoom)));
        height: max(24px, calc(40px * var(--schedule-zoom)));
        font-size: max(10px, calc(15px * var(--schedule-zoom)));
    }

    .schedule-engineer.is-on-call-engineer .schedule-engineer-name {
        font-size: max(8px, calc(12px * var(--schedule-zoom)));
        line-height: 1.05;
    }

    .schedule-engineer.is-on-call-engineer .schedule-engineer-phone {
        font-size: max(8px, calc(11px * var(--schedule-zoom)));
        line-height: 1.05;
    }

    .schedule-cell {
        padding: max(3px, calc(7px * var(--schedule-zoom)));
        gap: max(2px, calc(6px * var(--schedule-zoom)));
    }

    .schedule-visit {
        padding: max(3px, calc(7px * var(--schedule-zoom)));
        gap: max(1px, calc(2px * var(--schedule-zoom)));
    }

    .schedule-grid-month .schedule-visit {
        min-height: max(28px, calc(36px * var(--schedule-zoom)));
    }

    .engineer-schedule.is-single-engineer {
        height: calc(100svh - 218px);
        max-height: calc(100svh - 218px);
    }

    .engineer-schedule.is-single-engineer.schedule-mode-month {
        height: auto;
        max-height: none;
    }

    .engineer-schedule.is-single-engineer .schedule-grid {
        --schedule-header-height: max(42px, calc(50px * var(--schedule-zoom)));
        --schedule-row-height: clamp(220px, calc(100svh - 342px), 520px);
        grid-template-rows: var(--schedule-header-height) var(--schedule-row-height);
        grid-auto-rows: var(--schedule-row-height);
    }

    .engineer-schedule.is-single-engineer.schedule-mode-month .schedule-grid-month {
        --schedule-header-height: 46px;
        --schedule-row-height: max(82px, calc(104px * var(--schedule-zoom)));
        grid-template-columns: var(--schedule-mobile-engineer-width) repeat(var(--schedule-days), var(--schedule-mobile-day-width));
        min-width: calc(var(--schedule-mobile-engineer-width) + (var(--schedule-days) * var(--schedule-mobile-day-width)));
        grid-template-rows: var(--schedule-header-height) var(--schedule-row-height);
        grid-auto-rows: var(--schedule-row-height);
    }

    .engineer-schedule.is-single-engineer .schedule-grid-week {
        --schedule-mobile-engineer-width: clamp(86px, 24vw, 104px);
        --schedule-mobile-day-width: 134px;
        grid-template-columns: var(--schedule-mobile-engineer-width) repeat(var(--schedule-days), var(--schedule-mobile-day-width));
        width: max-content;
        min-width: calc(var(--schedule-mobile-engineer-width) + (var(--schedule-days) * var(--schedule-mobile-day-width)));
    }

    .engineer-schedule.is-single-engineer .schedule-engineer,
    .engineer-schedule.is-single-engineer .schedule-cell {
        height: var(--schedule-row-height);
        min-height: var(--schedule-row-height);
        max-height: var(--schedule-row-height);
    }

    .engineer-schedule.is-single-engineer .schedule-visit {
        min-height: 0;
        height: 100%;
        max-height: 100%;
        align-content: start;
    }

    .engineer-schedule.is-single-engineer .schedule-cell.has-single-visit {
        grid-template-rows: minmax(0, 1fr);
    }
}

@media (max-width: 980px) {
    .chat-layout {
        position: relative;
        display: block;
        height: calc(100svh - 150px);
        min-height: min(620px, calc(100svh - 150px));
        overflow: hidden;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: var(--panel);
        box-shadow: var(--shadow);
    }

    .chat-sidebar,
    .chat-panel {
        position: absolute;
        inset: 0;
        display: flex;
        width: 100%;
        height: 100%;
        min-height: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        transition: transform .22s ease;
    }

    .chat-sidebar {
        flex-direction: column;
        overflow: hidden;
        background: color-mix(in srgb, var(--panel) 92%, var(--bg) 8%);
        transform: translateX(0);
    }

    .chat-panel {
        overflow: hidden;
        transform: translateX(105%);
    }

    .chat-layout.has-selected-room .chat-sidebar {
        transform: translateX(-105%);
    }

    .chat-layout.has-selected-room .chat-panel {
        transform: translateX(0);
    }

    .chat-layout.is-room-list .chat-sidebar {
        transform: translateX(0);
    }

    .chat-layout.is-room-list .chat-panel {
        transform: translateX(105%);
    }

    .chat-member-sidebar {
        display: none;
    }

    .chat-workspace-head,
    .chat-create-drawer {
        flex: 0 0 auto;
    }

    .chat-sidebar-section {
        display: flex;
        flex-direction: column;
        min-height: 0;
        border-top: 1px solid var(--line);
        border-bottom: 0;
    }

    .chat-sidebar-section:first-of-type,
    .chat-dm-section {
        flex: 1 1 0;
    }

    .chat-room-list,
    .chat-dm-list {
        flex: 1 1 auto;
        max-height: none;
        min-height: 0;
        overflow: auto;
    }

    .chat-room-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px;
        min-height: 52px;
        padding: 8px 10px;
    }

    .chat-room-title {
        min-width: 0;
        gap: 7px;
    }

    .chat-mobile-room-back {
        display: inline-grid;
        width: 34px;
        height: 34px;
    }

    .chat-room-head form {
        justify-self: end;
    }

    .chat-room-head .chat-room-notification-button {
        width: 34px;
        height: 34px;
        padding: 0;
    }

    .chat-room-title h2 {
        font-size: 18px;
    }

    .chat-room-title p {
        display: none;
    }
}

/* ---------------------------------------------------------------------------
   Project plan (Gantt) — job detail panel
   Bar geometry comes from prepare_project_plan_gantt() as percentages, so this
   is presentation only. Uses the shared theme tokens so it follows the
   light / dark / E.ON themes without extra rules.
   --------------------------------------------------------------------------- */

/* Panel content sits 14px in from the panel edge, matching every other job
   panel (.section-title, .rate-grid and .purchase-request-form all use 14px). */
.project-plan-panel > .project-plan-intro,
.project-plan-panel > .project-plan-header-form,
.project-plan-panel > .project-plan-scale-row,
.project-plan-panel > .project-plan-gantt-scroll,
.project-plan-panel > .project-plan-task-scroll,
.project-plan-panel > .project-plan-add-form {
    margin-left: 14px;
    margin-right: 14px;
}

/* Whatever follows the heading needs to clear its bottom border. */
.project-plan-panel > summary + * {
    margin-top: 14px;
}

.project-plan-panel > .project-plan-add-form {
    margin-bottom: 14px;
}

.project-plan-panel > .project-plan-budget-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 14px 14px 0;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--soft);
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
}

/* Lucide swaps the <i> for an <svg>, so both need the colour. */
.project-plan-budget-note i,
.project-plan-budget-note svg {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    color: var(--success);
    stroke: var(--success);
}

.project-plan-budget-note.is-mismatch {
    border-color: color-mix(in srgb, var(--warn) 45%, var(--line));
    background: color-mix(in srgb, var(--warn) 10%, var(--panel));
}

.project-plan-budget-note.is-mismatch i,
.project-plan-budget-note.is-mismatch svg { color: var(--warn); stroke: var(--warn); }
.project-plan-budget-note strong { color: var(--ink); }

.project-plan-intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding: 16px 18px;
    border: 1px dashed var(--line);
    border-radius: 12px;
    background: var(--soft);
}

.project-plan-intro p {
    flex: 1 1 340px;
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.6;
}

.project-plan-panel .plan-published { color: var(--success); }

.project-plan-header-form { margin-top: 14px; margin-bottom: 18px; }

.project-plan-header-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

.project-plan-header-grid label,
.project-plan-summary-field,
.project-plan-add-form label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.project-plan-header-grid label > span,
.project-plan-summary-field > span,
.project-plan-task-head > span,
.project-plan-add-form label > span {
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    /* Kern pairs are cut for tight setting, so on tracked-out caps they leave
       one pair closed and the rest open — "(DAYS)" read as "DA YS". */
    font-kerning: none;
}

.project-plan-summary-field { margin-top: 12px; }
.project-plan-summary-field textarea { resize: vertical; }

.project-plan-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.project-plan-publish {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.project-plan-publish input[type="checkbox"] { width: 16px; height: 16px; }
.project-plan-publish-note { color: var(--muted); font-size: 12px; }

.project-plan-scale-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.project-plan-scale-row a {
    padding: 4px 11px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink);
    font-size: 11px;
    text-decoration: none;
}

.project-plan-scale-row a.active {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 14%, var(--panel));
    color: var(--accent);
}

/* Chart scrolls in its own box so the job page never scrolls sideways. */
.project-plan-gantt-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    margin-bottom: 18px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--panel);
}

.project-plan-gantt { position: relative; min-width: 780px; }

.project-plan-gantt-head {
    position: sticky;
    top: 0;
    z-index: 3;
    display: grid;
    grid-template-columns: var(--gantt-label-w) minmax(0, 1fr);
    border-bottom: 1px solid var(--line);
    background: var(--panel);
}

.project-plan-gantt-label-head {
    position: sticky;
    left: 0;
    z-index: 4;
    padding: 8px 12px;
    background: var(--panel);
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.project-plan-gantt-timeline-head { position: relative; height: 28px; }

.project-plan-gantt-column {
    position: absolute;
    top: 7px;
    padding-left: 7px;
    border-left: 1px solid var(--line);
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.project-plan-gantt-row {
    display: grid;
    grid-template-columns: var(--gantt-label-w) minmax(0, 1fr);
    align-items: center;
    min-height: 40px;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
}

.project-plan-gantt-row:last-of-type { border-bottom: 0; }

.project-plan-gantt-label {
    position: sticky;
    left: 0;
    z-index: 2;
    min-width: 0;
    padding: 6px 12px;
    background: var(--panel);
}

.project-plan-gantt-label strong {
    display: block;
    font-size: 12px;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-plan-gantt-label small {
    display: block;
    margin-top: 1px;
    color: var(--muted);
    font-size: 10px;
}

.project-plan-gantt-row.is-phase .project-plan-gantt-label strong { font-weight: 800; }
.project-plan-gantt-row.depth-1 .project-plan-gantt-label { padding-left: 26px; }
.project-plan-gantt-row.depth-2 .project-plan-gantt-label { padding-left: 40px; }
.project-plan-gantt-row.is-hidden-from-client { opacity: .55; }

.project-plan-gantt-timeline { position: relative; height: 40px; }

.project-plan-gantt-gridline {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: color-mix(in srgb, var(--line) 55%, transparent);
}

.project-plan-gantt-bar {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 16px;
    min-width: 3px;
    border-radius: 5px;
    background: color-mix(in srgb, var(--accent) 20%, var(--panel));
}

.project-plan-gantt-bar-fill {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: inherit;
    background: var(--accent);
}

.project-plan-gantt-row.is-phase .project-plan-gantt-bar { height: 20px; }
.project-plan-gantt-row.is-complete .project-plan-gantt-bar-fill { background: var(--success); }

.project-plan-gantt-row.is-overdue .project-plan-gantt-bar {
    box-shadow: inset 0 0 0 1px var(--danger);
}

.project-plan-gantt-baseline {
    position: absolute;
    top: calc(50% + 13px);
    transform: translateY(-50%);
    height: 3px;
    min-width: 3px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--muted) 45%, transparent);
}

.project-plan-gantt-milestone {
    position: absolute;
    top: 50%;
    width: 12px;
    height: 12px;
    margin-left: -6px;
    transform: translateY(-50%) rotate(45deg);
    border-radius: 2px;
    background: var(--accent);
}

.project-plan-gantt-row.is-complete .project-plan-gantt-milestone { background: var(--success); }

/* Offset past the sticky label column so the line lands on the right date. */
.project-plan-gantt-today {
    position: absolute;
    top: 28px;
    bottom: 0;
    z-index: 1;
    width: 2px;
    pointer-events: none;
    background: color-mix(in srgb, var(--danger) 55%, transparent);
    left: calc(var(--gantt-label-w) + (100% - var(--gantt-label-w)) * var(--today) / 100);
}

/* Tasks read as a table: the column titles are stated once in the header and
   the rows carry bare fields. Header and rows both take their tracks from
   --plan-task-cols so the two can never drift out of alignment. */
.project-plan-task-scroll { overflow-x: auto; }

.project-plan-task-list {
    /* The three date tracks are fixed at 136px because that is what Chrome's
       date field needs before it clips its own year. */
    --plan-task-cols:
        minmax(180px, 2fr) minmax(100px, 0.9fr) 136px 136px 136px
        minmax(122px, 1fr) 68px 86px 92px minmax(118px, 1fr)
        minmax(82px, .65fr) 78px 118px;
    display: grid;
    /* Below this the tracks would be squeezed past readability, so the wrapper
       scrolls sideways the way the Gantt above it does. */
    min-width: 1570px;
}

.project-plan-task-head,
.project-plan-task-row {
    display: grid;
    grid-template-columns: var(--plan-task-cols);
    gap: 8px;
}

/* Titles hug the bottom of the header so a wrapped one still sits on the same
   line as the rest. */
.project-plan-task-head {
    align-items: end;
    padding: 0 10px 6px;
}

.project-plan-task-row {
    align-items: center;
    padding: 7px 10px;
    border-top: 1px solid var(--line);
}

.project-plan-task-row > * { min-width: 0; }
.project-plan-task-row.is-hidden-from-client { background: var(--soft); }

.project-plan-task-engineers {
    overflow: hidden;
    color: var(--ink);
    font-size: 12px;
    font-weight: 750;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-plan-task-engineers.is-empty { color: var(--muted); }

.project-plan-add-form {
    display: grid;
    grid-template-columns: minmax(170px, 2fr) repeat(auto-fit, minmax(110px, 1fr));
    align-items: end;
    gap: 10px;
    margin-top: 14px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--soft);
}

.project-plan-task-delete-form { display: none; }

.project-plan-task-visible {
    display: flex;
    align-items: center;
    justify-content: center;
}

.project-plan-task-visible > input[type="checkbox"] {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin: 0;
    padding: 0;
    cursor: pointer;
}

.project-plan-task-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.project-plan-task-percent {
    min-width: 40px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

@media (max-width: 900px) {
    .project-plan-gantt { --gantt-label-w: 170px !important; min-width: 660px; }
    /* The task table keeps its columns and scrolls; only the add form reflows. */
    .project-plan-add-form { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
    .project-plan-header-actions { justify-content: flex-start; }
    .project-plan-panel > .project-plan-intro,
    .project-plan-panel > .project-plan-header-form,
    .project-plan-panel > .project-plan-scale-row,
    .project-plan-panel > .project-plan-gantt-scroll,
    .project-plan-panel > .project-plan-task-scroll,
    .project-plan-panel > .project-plan-add-form {
        margin-left: 10px;
        margin-right: 10px;
    }
}