:root {
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #172033;
    background: #f3f5f8;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
    background: #f3f5f8;
}

body {
    min-height: 100vh;
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

a {
    color: inherit;
    text-decoration: none;
}

/* APP SHELL */

.app-shell {
    min-height: 100vh;
    display: flex;
}

.sidebar {
    width: 220px;
    min-height: 100vh;
    background: #17263b;
    padding: 22px 14px 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-shrink: 0;
}

.sidebar-brand {
    padding: 4px 12px 22px;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.sidebar-title {
    color: #ffffff;
    font-size: 18px;
    font-weight: 750;
    letter-spacing: -0.2px;
}

.sidebar-date {
    margin-top: 7px;
    color: #aab7c7;
    font-size: 12px;
}

.nav-menu {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 11px;
    color: #cbd4df;
    padding: 12px 13px;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 600;
    transition: 0.15s ease;
}

    .nav-item:hover {
        color: #ffffff;
        background: rgba(255, 255, 255, 0.07);
    }

    .nav-item.active {
        background: #ffffff;
        color: #17263b;
    }

.nav-icon {
    width: 22px;
    text-align: center;
    font-size: 16px;
}

.sidebar-footer {
    color: #78879a;
    font-size: 12px;
    line-height: 1.5;
    padding: 10px 12px;
}

    .sidebar-footer span {
        color: #58697e;
    }

.main-content {
    flex: 1;
    min-width: 0;
    padding: 22px 28px;
    max-width: 1600px;
}

/* PAGE */

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 18px;
}

    .page-header h1 {
        margin: 0;
        font-size: 27px;
        letter-spacing: -0.5px;
    }

    .page-header p {
        margin: 5px 0 0;
        color: #738094;
        font-size: 14px;
    }

.page-card {
    background: #ffffff;
    border: 1px solid #e2e6ec;
    border-radius: 13px;
    padding: 20px;
    margin-bottom: 18px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.025);
}

.card-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 16px;
}

    .card-heading h2 {
        margin: 0;
        font-size: 18px;
    }

    .card-heading p {
        margin: 5px 0 0;
        color: #7b8697;
        font-size: 13px;
    }

/* SUMMARY */

.summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(140px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.summary-card {
    background: #ffffff;
    border: 1px solid #e1e6ed;
    border-radius: 12px;
    padding: 15px 18px;
}

.summary-label {
    display: block;
    color: #7b8697;
    font-size: 12px;
    font-weight: 650;
    margin-bottom: 6px;
}

.summary-card strong {
    display: block;
    color: #17263b;
    font-size: 24px;
    line-height: 1;
}

/* BUTTONS */

.button-row {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}

.btn {
    border: none;
    border-radius: 8px;
    min-height: 39px;
    padding: 9px 15px;
    font-weight: 650;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: 0.15s ease;
}

.btn-primary {
    background: #15365f;
    color: #ffffff;
}

    .btn-primary:hover {
        background: #0f2b4d;
    }

.btn-secondary {
    background: #edf0f4;
    color: #334155;
}

    .btn-secondary:hover {
        background: #e2e6eb;
    }

.btn-danger-outline {
    background: transparent;
    color: #b42318;
    border: 1px solid #efc7c3;
}

    .btn-danger-outline:hover {
        background: #fff3f2;
    }

.btn:disabled {
    opacity: 0.45;
    cursor: default;
}

/* IMPORT */

.csv-box {
    display: block;
    width: 100%;
    min-height: 190px;
    resize: vertical;
    padding: 14px;
    border: 1px solid #d5dbe4;
    border-radius: 9px;
    background: #fbfcfd;
    color: #283548;
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
    line-height: 1.45;
    margin-bottom: 14px;
}

    .csv-box:focus,
    input:focus,
    select:focus,
    textarea:focus {
        outline: none;
        border-color: #5079a7;
        box-shadow: 0 0 0 3px rgba(80, 121, 167, 0.12);
    }

/* ALERTS */

.alert {
    padding: 12px 14px;
    border-radius: 8px;
    background: #eef2f6;
    color: #44546a;
    font-size: 13px;
    margin: 14px 0;
}

.alert-success {
    background: #edf8f1;
    color: #276749;
    border: 1px solid #cae9d5;
}

.alert-error {
    background: #fff1f0;
    color: #a52720;
    border: 1px solid #f0cfcc;
}

/* TABLES */

.table-wrap {
    overflow-x: auto;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

    .data-table th {
        text-align: left;
        color: #697386;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.35px;
        font-weight: 700;
        padding: 11px 10px;
        border-bottom: 1px solid #dfe4eb;
    }

    .data-table td {
        padding: 12px 10px;
        border-bottom: 1px solid #edf0f4;
        vertical-align: middle;
    }

    .data-table tbody tr:hover {
        background: #fafbfc;
    }

/* TAGS */

.tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.tag {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 4px 8px;
    background: #e8eef5;
    color: #294b70;
    font-size: 10px;
    font-weight: 750;
}

.tag-warning {
    background: #fff3cd;
    color: #725b00;
}

.tag-muted {
    background: #f0f1f3;
    color: #626b7a;
}

/* EMPTY */

.empty-state {
    background: #ffffff;
    border: 1px dashed #ccd3dd;
    border-radius: 13px;
    text-align: center;
    padding: 65px 25px;
}

.empty-icon {
    font-size: 42px;
    color: #8793a4;
    margin-bottom: 10px;
}

.empty-state h2 {
    margin: 0 0 7px;
}

.empty-state p {
    color: #7b8697;
    margin: 0 0 18px;
}

/* SETTINGS */

.settings-tabs {
    display: flex;
    gap: 5px;
    margin-bottom: 16px;
}

.settings-tab {
    border: 1px solid #dce1e8;
    background: #ffffff;
    color: #5f6b7c;
    border-radius: 8px;
    padding: 9px 14px;
    font-weight: 650;
    font-size: 13px;
}

    .settings-tab.active {
        color: #ffffff;
        background: #15365f;
        border-color: #15365f;
    }

.settings-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.settings-item {
    border: 1px solid #e1e5eb;
    border-radius: 10px;
    background: #fbfcfd;
    padding: 17px;
}

.settings-item-header {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    margin-bottom: 16px;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.field-grow {
    flex: 1;
}

.field label {
    color: #667085;
    font-size: 11px;
    font-weight: 700;
}

.field input,
.field select {
    min-height: 38px;
    border: 1px solid #d5dbe4;
    border-radius: 7px;
    background: #ffffff;
    padding: 7px 10px;
    color: #253347;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(120px, 1fr));
    gap: 12px;
    margin-bottom: 15px;
}

.technician-time-grid {
    grid-template-columns: repeat(6, minmax(115px, 1fr));
}

.lunch-hint {
    margin: -2px 0 14px;
    padding: 9px 11px;
    border-radius: 7px;
    background: #f0f4f8;
    color: #68768a;
    font-size: 12px;
}

.ability-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(100px, 1fr));
    gap: 8px;
    padding-top: 13px;
    border-top: 1px solid #e5e9ef;
}

    .ability-grid label,
    .toggle-line {
        display: flex;
        align-items: center;
        gap: 7px;
        color: #435168;
        font-size: 12px;
        font-weight: 600;
    }

.icon-danger {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 7px;
    background: #fff0ef;
    color: #b42318;
    font-size: 19px;
    line-height: 1;
}

    .icon-danger:hover {
        background: #ffe1de;
    }

.table-input {
    width: 100%;
    min-width: 110px;
    border: 1px solid #d5dbe4;
    border-radius: 6px;
    background: #ffffff;
    padding: 7px 8px;
    color: #253347;
}

.code-input {
    min-width: 80px;
    width: 90px;
}

.checkbox-cell {
    text-align: center;
}

    .checkbox-cell input,
    .ability-grid input,
    .toggle-line input {
        width: 16px;
        height: 16px;
    }

/* LABEL SETTINGS */

.label-help {
    margin-bottom: 16px;
    padding: 11px 13px;
    border-radius: 8px;
    background: #f3f6f9;
    color: #607086;
    font-size: 12px;
}

    .label-help code {
        background: #ffffff;
        border: 1px solid #dde3ea;
        border-radius: 5px;
        padding: 2px 5px;
        color: #30445d;
    }

.priority-input {
    width: 70px;
    min-width: 65px;
}

.label-match-input {
    min-width: 250px;
}

.colour-edit {
    display: flex;
    align-items: center;
    gap: 7px;
}

.colour-picker {
    width: 38px;
    height: 34px;
    padding: 2px;
    border: 1px solid #d5dbe4;
    border-radius: 6px;
    background: #ffffff;
}

.colour-code {
    width: 92px;
    min-width: 92px;
}

.label-preview {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 90px;
    padding: 7px 10px;
    border-radius: 7px;
    color: #172033;
    font-size: 11px;
    font-weight: 750;
}

.label-example-card {
    margin-top: 18px;
    padding: 14px;
    border: 1px solid #e2e6ec;
    border-radius: 9px;
    background: #fafbfc;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 12px;
}

    .label-example-card > div:first-child {
        display: flex;
        flex-direction: column;
        gap: 3px;
        margin-right: 8px;
    }

    .label-example-card span {
        color: #798598;
    }

.split-preview {
    min-width: 190px;
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid rgba(23, 32, 51, 0.12);
    color: #172033;
    font-size: 10px;
    font-weight: 800;
}

.split-preview-two {
    background: linear-gradient( 135deg, #f6d96b 0%, #f6d96b 49.8%, #8bcb88 50.2%, #8bcb88 100% );
}

.split-preview-three {
    background: linear-gradient( 135deg, #f2a65a 0%, #f2a65a 33%, #7db7e8 33.4%, #7db7e8 66%, #8bcb88 66.4%, #8bcb88 100% );
}

/* RESPONSIVE */

@media (max-width: 1250px) {

    .technician-time-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1050px) {

    .summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ability-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .form-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 760px) {

    .app-shell {
        display: block;
    }

    .sidebar {
        width: 100%;
        min-height: auto;
        padding: 12px;
    }

    .sidebar-brand {
        margin-bottom: 10px;
        padding-bottom: 12px;
    }

    .nav-menu {
        flex-direction: row;
    }

    .nav-item {
        flex: 1;
        justify-content: center;
    }

    .sidebar-footer {
        display: none;
    }

    .main-content {
        padding: 17px;
    }

    .page-header {
        flex-direction: column;
    }

    .summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .form-grid,
    .technician-time-grid {
        grid-template-columns: 1fr;
    }

    .ability-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Workshop plan: identical geometry on screen and A4 paper. */
.plan-scroll { overflow-x:auto; }
.plan-page { background:white; color:#172033; width:287mm; height:197mm; padding:3mm; margin:0 auto 18px; box-shadow:0 2px 12px #17203320; display:flex; flex-direction:column; }
.plan-heading { display:flex; justify-content:space-between; align-items:center; height:14mm; flex-shrink:0; }
.plan-heading h2 { margin:0 0 2px; font-size:20px; }.plan-heading span,.plan-heading>strong { font-size:12px; }
.plan-key { display:flex; flex-wrap:wrap; gap:12px; align-items:center; height:9mm; font-size:10px; flex-shrink:0; }
.plan-key span { display:flex; align-items:center; gap:4px; }.plan-key i { width:12px;height:12px;display:inline-block;border:1px solid #aab5c2; }
.time-heading,.plan-row { display:grid; grid-template-columns:35mm 1fr; }
.time-heading { height:8mm; align-items:center; font-size:10px;flex-shrink:0; }
.time-scale { position:relative;height:14px; margin-right:4mm; }.time-scale span { position:absolute; transform:translateX(-50%); font-size:9px; }.time-scale span:first-child {transform:none;}.time-scale span:last-child { transform:translateX(-100%); }
.plan-row { height:21mm; flex-shrink:0; border:1px solid #c5ced8; border-bottom:0; }
.plan-row:nth-last-of-type(1) { border-bottom:1px solid #c5ced8; }
.technician-name { background:#f4f6f9; border-right:1px solid #c5ced8; padding:7px 6px;display:flex;flex-direction:column;gap:4px;overflow:hidden; }.technician-name strong {font-size:12px;}.technician-name small {font-size:8px;line-height:1.25;}
.track { position:relative; margin-right:4mm; background:repeating-linear-gradient(to right,#bcc7d5 0,#bcc7d5 1px,transparent 1px,transparent var(--grid)); }
.job-block,.lunch-block { position:absolute;top:5px;bottom:5px;border:1px solid #8190a266; border-radius:3px; padding:3px;color:#101c30;min-width:0;overflow:hidden; display:flex;flex-direction:column; gap:2px;align-items:flex-start;text-align:left;font-size:9px;line-height:1.2; }
.job-block strong {font-size:10px;}.job-block span,.job-block small {max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.job-block small {font-size:8px;}.job-block:hover,.job-block:focus-visible {z-index:2;outline:2px solid #253d62;}
.lunch-block { background:repeating-linear-gradient(135deg,#f1f1f1 0,#f1f1f1 4px,#ddd 4px,#ddd 5px);align-items:center;justify-content:center;font-size:8px;padding:1px; }
.extra-cards {display:flex;align-items:stretch;gap:3px;padding:3px;overflow:auto;}.extra-card {background:#fff3e8;border:1px solid #d9af8b;border-radius:3px;padding:3px;flex:1;min-width:115px;max-width:220px;display:flex;flex-direction:column;gap:2px;font-size:8px;}.extra-card span {white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.extra-card small {font-size:7px;line-height:1.1;}.all-placed {align-self:center;color:#2a6144;font-size:12px;}
.plan-footer {display:flex;justify-content:space-between;align-items:center;flex:1;font-size:10px;}
@page { size:A4 landscape; margin:5mm; }
@media print {
    html,body {margin:0!important;padding:0!important;background:white!important;min-height:0;}
    .sidebar,.no-print,#blazor-error-ui {display:none!important;}
    .app-shell,.main-content,.plan-scroll {display:block!important;margin:0!important;padding:0!important;min-height:0!important;width:auto!important;overflow:visible!important;}
    .plan-page {margin:0!important;box-shadow:none;break-after:page;break-inside:avoid;print-color-adjust:exact;-webkit-print-color-adjust:exact;}
    .plan-page:last-child {break-after:auto;}
    .extra-cards {overflow:visible;}.extra-card {min-width:0;max-width:none;}.extra-card span {white-space:normal;overflow:visible;}
}
.extra-cards { min-width:0; overflow:hidden; }
.extra-card { min-width:0; overflow:hidden; overflow-wrap:anywhere; }
.job-block.narrow { align-items:center;justify-content:center;padding:1px; }
.job-block.narrow strong { writing-mode:vertical-rl;transform:rotate(180deg);font-size:10px;white-space:nowrap; }
.job-block.narrow span,.job-block.narrow small { display:none; }
.extra-sheet { break-before:page; }.extra-sheet .data-table { table-layout:fixed; }.extra-sheet td { overflow-wrap:anywhere; font-size:11px;padding:10px 7px; }.extra-sheet p {font-size:12px;}
@media print { .extra-card { overflow:hidden; } .extra-sheet .data-table th {font-size:10px;} }
@media print { .cloud-toolbar { display:none !important; } }