:root {
    --blue: #1f4e79;
    --blue-light: #2f6fb0;
    --gray: #6b7280;
    --bg: #f4f6f9;
    --shade: #d9d9d9;
    --border: #c8ccd2;
    --danger: #b3261e;
    --green: #15803d;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "Segoe UI", Arial, sans-serif;
    background: var(--bg);
    color: #1f2937;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--blue);
    color: #fff;
    padding: 10px 20px;
}

.brand { color: #fff; text-decoration: none; font-weight: 600; letter-spacing: .3px; }
.topbar-right { display: flex; align-items: center; gap: 8px; }
.topbar-link {
    color: #fff; text-decoration: none; font-size: 13px;
    border: 1px solid rgba(255,255,255,.5); padding: 2px 10px; border-radius: 4px;
}
.topbar-link:hover { background: rgba(255,255,255,.15); }
.page-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.page-header h1 { margin: 0; }
.template-rename { margin-bottom: 16px; }
.lang-label { font-size: 13px; opacity: .85; }
.lang {
    color: #fff; text-decoration: none; border: 1px solid rgba(255,255,255,.5);
    padding: 2px 8px; border-radius: 4px; font-size: 13px;
}
.lang.active { background: #fff; color: var(--blue); font-weight: 600; }

.container { max-width: 1500px; margin: 0 auto; padding: 20px; }

h1 { color: var(--blue); margin-top: 0; }
h2 { color: var(--blue-light); font-size: 18px; }

.card {
    background: #fff; border: 1px solid var(--border);
    border-radius: 8px; padding: 16px 20px; margin-bottom: 18px;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

.inline-form { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; }
.inline-form label, .row-form label { display: flex; flex-direction: column; font-size: 13px; gap: 4px; color: var(--gray); }
.inline-form input, .inline-form select, .row-form input {
    padding: 7px 10px; border: 1px solid var(--border); border-radius: 5px; font-size: 14px;
}
.row-form { display: flex; gap: 8px; align-items: center; }
.row-form input { flex: 1; }
.narrow { max-width: 90px; flex: none !important; }

.btn {
    display: inline-block; cursor: pointer; border: 1px solid var(--border);
    background: #fff; color: #1f2937; padding: 8px 14px; border-radius: 5px;
    font-size: 14px; text-decoration: none; transition: background .15s;
}
.btn:hover { background: #eef2f7; }
.btn.primary { background: var(--blue); color: #fff; border-color: var(--blue); }
.btn.primary:hover { background: var(--blue-light); }
.btn.danger { color: var(--danger); border-color: #e3b0ad; }
.btn.danger:hover { background: #fbeae9; }
.btn.small { padding: 5px 10px; font-size: 13px; }
.btn.link { border: none; background: none; color: var(--blue-light); padding-left: 0; }

.dept-list { list-style: none; padding: 0; margin: 0; }
.dept-list li {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 0; border-bottom: 1px solid #eef1f5;
}
.dept-link { display: flex; flex-direction: column; text-decoration: none; color: #1f2937; }
.dept-name { font-weight: 600; font-size: 16px; color: var(--blue); }
.dept-count { font-size: 13px; color: var(--gray); }
.muted { color: var(--gray); font-style: italic; }

.simple-table { width: 100%; border-collapse: collapse; }
.simple-table th, .simple-table td { text-align: left; padding: 8px; border-bottom: 1px solid #eef1f5; }
.simple-table th { color: var(--gray); font-size: 13px; }

/* Schedule */
.schedule-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.schedule-toolbar .spacer { flex: 1; }
.save-status { font-weight: 700; min-width: 20px; }
.save-status.ok { color: var(--green); }
.save-status.error { color: var(--danger); }

.plan-header { text-align: center; margin-bottom: 12px; }
.plan-header .hospital { font-weight: 700; color: var(--blue); }
.plan-header .plan-title { font-size: 15px; margin-top: 4px; }
.plan-header .unit { font-weight: 700; padding: 0 6px; }
.plan-header .org-unit { font-size: 12px; color: var(--gray); }

.table-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: 6px; background: #fff; }
.schedule-table { border-collapse: collapse; font-size: 12px; }
.schedule-table th, .schedule-table td { border: 1px solid var(--border); text-align: center; }
.schedule-table thead th { background: #f2f2f2; padding: 3px; position: sticky; top: 0; }
.schedule-table .col-no { width: 28px; }
.schedule-table .col-name-header,
.schedule-table .col-name {
    min-width: 72px; max-width: 88px; text-align: left; padding: 4px 6px; font-weight: 700;
    background: #eef4fb; border-left: 3px solid var(--blue);
    overflow: hidden;
}
.schedule-table .col-name-header { font-size: 10px; text-align: center; white-space: nowrap; }
.schedule-table .emp-name-cell { vertical-align: middle; }
.schedule-table .emp-name-line {
    font-weight: 700;
    line-height: 1.15;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.schedule-table .emp-name-cell.name-size-default .emp-name-line { font-size: 14px; }
.schedule-table .emp-name-cell.name-size-md .emp-name-line { font-size: 12px; }
.schedule-table .emp-name-cell.name-size-sm .emp-name-line { font-size: 11px; }
.schedule-table .emp-name-cell.name-size-xs .emp-name-line { font-size: 10px; }
.schedule-table .emp-name-cell.name-size-xxs .emp-name-line { font-size: 9px; }
.schedule-table tr.block-start td { border-top: 3px solid var(--blue); }
.schedule-table .col-fond { width: 44px; }
.schedule-table .col-rowtype { text-align: left; white-space: nowrap; padding: 0 6px; color: var(--gray); font-size: 11px; }
.schedule-table .col-total { width: 58px; font-size: 11px; }
.schedule-table .col-handover { width: 38px; font-size: 9px; line-height: 1.2; padding: 2px; }
.schedule-table .col-autofill {
    min-width: 140px; max-width: 170px; vertical-align: middle;
    padding: 4px; background: #f8fafc; font-size: 10px; text-align: left;
}
.auto-fill-controls { display: flex; flex-direction: column; gap: 4px; }
.auto-fill-controls .af-label {
    display: flex; flex-direction: column; gap: 2px;
    font-size: 10px; color: var(--gray); font-weight: 600;
}
.auto-fill-controls select,
.auto-fill-controls input[type="number"] {
    width: 100%; font-size: 11px; padding: 2px 4px; border: 1px solid var(--border);
    border-radius: 4px; box-sizing: border-box;
}
.btn-sm { font-size: 11px; padding: 4px 8px; }
.auto-fill-hint { margin: 0 0 10px; }
.auto-fill-report { margin-top: 16px; }
.auto-fill-report .af-gap-list { margin: 0 0 12px; padding-left: 18px; font-size: 13px; }
.auto-fill-report .af-emp-table { max-width: 480px; }
.auto-fill-report .negative { color: var(--danger); font-weight: 600; }
.auto-fill-report .positive { color: var(--green); font-weight: 600; }
.schedule-table .day-col { width: 26px; }
.schedule-table .shaded { background: var(--shade) !important; }

.schedule-table .day-cell { padding: 0; }
.schedule-table .day-cell input {
    width: 30px; border: none; text-align: center; font-size: 12px;
    padding: 4px 0; background: transparent; outline: none;
}
.schedule-table .day-cell input:focus { background: #fff3bf; }
/* Screen-only: under min staff for that day/row. Weekends keep grey + orange cue. */
.schedule-table .day-cell.coverage-short:not(.shaded) {
    background-color: #ffd8a8 !important;
}
.schedule-table .day-cell.coverage-short.shaded {
    background: repeating-linear-gradient(
        -45deg,
        #d9d9d9,
        #d9d9d9 3px,
        #ffc078 3px,
        #ffc078 6px
    ) !important;
}
.schedule-table .worked { font-weight: 600; }
.schedule-table .diff.negative { color: var(--danger); }
.schedule-table .diff.positive { color: var(--green); }
#btn-undo-autofill:disabled { opacity: 0.45; cursor: not-allowed; }
.undo-count { font-weight: 600; margin-left: 2px; }

.legend-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 14px; }
.legend-list li { font-size: 13px; }
.legend h3 { margin: 0 0 10px; font-size: 15px; }

.checkbox-label {
    display: flex; align-items: center; gap: 8px;
    font-size: 14px; color: #1f2937; flex-direction: row;
}
.settings-table input.narrow { max-width: 80px; }
.legend-form input.code-input { max-width: 70px; flex: none !important; }
.schedule-dropdown { min-width: 280px; }
.saved-schedule-picker { align-items: flex-end; }
.muted.small { font-size: 12px; margin-top: 8px; }

.flash-list { list-style: none; padding: 0; margin: 0 0 16px; }
.flash {
    padding: 10px 14px; border-radius: 6px; margin-bottom: 8px;
    font-size: 14px; font-weight: 600;
}
.flash.success { background: #dcfce7; color: #166534; border: 1px solid #86efac; }
.flash.error { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }

.legend-entries { display: flex; flex-direction: column; gap: 10px; }
.legend-entry-form {
    display: grid;
    grid-template-columns: 80px 1fr 1fr 80px 80px auto;
    gap: 10px;
    align-items: end;
    padding: 12px;
    border: 1px solid #eef1f5;
    border-radius: 6px;
    background: #fafbfc;
}
.legend-entry-form label {
    display: flex; flex-direction: column; font-size: 12px; color: var(--gray); gap: 4px;
}
.legend-entry-form input {
    padding: 7px 10px; border: 1px solid var(--border); border-radius: 5px; font-size: 14px;
}
.legend-entry-actions { display: flex; gap: 8px; align-items: center; padding-bottom: 2px; }

.row-type-entry-form {
    display: grid;
    grid-template-columns: 1fr 1fr auto 80px auto;
    gap: 10px;
    align-items: end;
    padding: 12px;
    border: 1px solid #eef1f5;
    border-radius: 6px;
    background: #fafbfc;
}
.row-type-entry-form label {
    display: flex; flex-direction: column; font-size: 12px; color: var(--gray); gap: 4px;
}
.row-type-show { flex-direction: row !important; align-self: end; padding-bottom: 8px; }

@media print {
    @page { size: landscape; margin: 10mm; }
    .no-print { display: none !important; }
    .topbar { display: none; }
    body { background: #fff; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .table-scroll { overflow: visible; border: none; }
    .schedule-table { font-size: 9px; }
    .schedule-table .day-cell input { font-size: 9px; width: 22px; }
    .schedule-table .day-col { width: 24px; }
    .schedule-table .col-handover { width: 34px; font-size: 8px; }
    .schedule-table .col-name-header { font-size: 8px; }
    .schedule-table .emp-name-cell.name-size-default .emp-name-line { font-size: 12px; }
    .schedule-table .emp-name-cell.name-size-md .emp-name-line { font-size: 11px; }
    .schedule-table .emp-name-cell.name-size-sm .emp-name-line { font-size: 10px; }
    .schedule-table .emp-name-cell.name-size-xs .emp-name-line { font-size: 9px; }
    .schedule-table .emp-name-cell.name-size-xxs .emp-name-line { font-size: 8px; }
    .schedule-table .shaded,
    .schedule-table th.shaded,
    .schedule-table td.shaded,
    .schedule-table .day-cell.shaded input {
        background-color: #d9d9d9 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    /* Do not print coverage-alert colours */
    .schedule-table .day-cell.coverage-short:not(.shaded) {
        background-color: transparent !important;
    }
    .schedule-table .day-cell.coverage-short.shaded {
        background-color: #d9d9d9 !important;
        background-image: none !important;
    }
    .schedule-table .col-name-header,
    .schedule-table .col-name,
    .schedule-table .emp-name-cell {
        background-color: #eef4fb !important;
        border-left: 3px solid #1f4e79 !important;
        font-weight: 700;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .schedule-table tr.block-start td {
        border-top: 3px solid #1f4e79 !important;
    }
    .legend {
        break-inside: avoid;
        margin-top: 10px;
        border: none;
        box-shadow: none;
        padding: 6px 0 0;
    }
    .legend h3 { font-size: 11px; margin: 0 0 6px; }
    .legend-list { font-size: 9px; gap: 10px 16px; }
    .legend-list li { font-size: 9px; }
}