/* =============================================================
   CAMAS — application supplement

   Loaded after camas.css. Holds only what the server-rendered
   application needs and the prototype never had: sidebar section
   headings, list rows, empty states, pagination and form errors.
   Keeping it separate leaves the ported prototype CSS untouched.
   ============================================================= */

/* ----- App shell -----
   The prototype hid the shell until its JavaScript revealed it. Pages are
   now rendered by the server, so the shell is always visible.

   Block, not flex. The sidebar and the header are both position:fixed and
   .main clears them with its own margins, so there is nothing for a flex
   container to lay out. As a flex item .main sized itself to its content
   (flex: 0 1 auto) and every page sat in a column down the left with the
   rest of the screen empty; as a block it fills the width it is given. */
.app {
    display: block;
    min-height: 100vh;
}

/* ----- Sidebar section headings -----
   --text2 is tuned for dark text on a pale ground; on the deep green panel
   it falls to about 2.6:1. These two lines are lightened so they can
   actually be read. */
.sidebar nav .nav-section {
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: 700;
    color: #7E9788;
    padding: 16px 20px 6px;
}

.sidebar .brand p {
    color: #9BB3A4;
}

.sidebar nav a .nav-icon {
    width: 18px;
    display: inline-flex;
    justify-content: center;
    flex: none;
    font-size: 13px;
}

/* ----- Page introduction ----- */
.page-intro {
    margin-bottom: 22px;
}

.page-intro h2 {
    font-family: var(--font-h);
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
}

.page-intro p {
    font-size: 13px;
    color: var(--text2);
    margin-top: 4px;
}

/* ----- List rows inside cards ----- */
.list-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}

.list-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.list-main {
    min-width: 0;
}

.list-title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
    display: block;
}

a.list-title:hover {
    color: var(--primary);
}

.list-meta {
    font-size: 11.5px;
    color: var(--text2);
    margin-top: 3px;
}

.card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.card-head h3 {
    margin-bottom: 0;
}

.link {
    font-size: 12px;
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
}

.link:hover {
    text-decoration: underline;
}

.is-danger {
    color: var(--danger);
}

.is-muted {
    color: var(--text2);
}

/* ----- Empty states ----- */
.empty {
    text-align: center;
    padding: 28px 16px;
    color: var(--text2);
    font-size: 13px;
}

.empty p {
    margin-bottom: 14px;
}

/* ----- Forms ----- */
.form-group label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 5px;
}

.form-group input[type="text"],
.form-group input[type="date"],
.form-group input[type="email"],
.form-group select,
.form-group textarea {
    width: 100%;
    border: 1px solid #C6D4CB;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13.5px;
    font-family: var(--font-b);
    color: var(--text);
    background: white;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--focus);
}

.form-group textarea {
    min-height: 130px;
    resize: vertical;
    line-height: 1.55;
}

.form-group .hint {
    font-size: 11.5px;
    color: var(--text2);
    margin-top: 4px;
}

.form-group + .form-group {
    margin-top: 16px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.field-error {
    color: var(--danger);
    font-size: 11.5px;
    margin-top: 4px;
}

.form-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

/* ----- Alerts ----- */
.alert-ok,
.alert-err,
.alert-warn,
.alert-info {
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 18px;
    border: 1px solid;
}

.alert-ok {
    background: #DCFCE7;
    color: #166534;
    border-color: #BBF7D0;
}

.alert-err {
    background: #FEE2E2;
    color: #991B1B;
    border-color: #FECACA;
}

.alert-warn {
    background: #FEF3C7;
    color: #92400E;
    border-color: #FDE68A;
}

.alert-info {
    background: #DBEAFE;
    color: #1E40AF;
    border-color: #BFDBFE;
}

/* ----- Tables ----- */
.table-wrap {
    overflow-x: auto;
    /* A containing block for anything absolutely positioned inside. Without
       it, an `.sr-only` label in a table wider than the screen is laid out
       against the page rather than the scroller, escapes the clip, and gives
       the whole page a sideways scrollbar. */
    position: relative;
}

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

.table-wrap th {
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text2);
    font-weight: 700;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.table-wrap td {
    padding: 12px;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}

.table-wrap tr:last-child td {
    border-bottom: none;
}

.table-wrap tbody tr:hover {
    background: #F6FAF7;
}

/* ----- Pagination ----- */
.pagination-wrap {
    margin-top: 18px;
    font-size: 12.5px;
    color: var(--text2);
}

.pagination-wrap nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.pagination-wrap a,
.pagination-wrap span[aria-current] {
    display: inline-block;
    padding: 6px 11px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: white;
    color: var(--text);
    text-decoration: none;
    margin-right: 4px;
}

.pagination-wrap a:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.pagination-wrap span[aria-current] {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
    font-weight: 600;
}

/* ----- Approval queue ----- */
.approval-item {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px 18px;
    margin-bottom: 14px;
    background: white;
}

.approval-item:last-child {
    margin-bottom: 0;
}

.approval-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 8px;
}

.approval-body {
    font-size: 13px;
    color: var(--text);
    line-height: 1.6;
    margin-bottom: 12px;
    white-space: pre-line;
}

.approval-actions {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.approval-actions input[type="text"] {
    flex: 1;
    height: 36px;
    border: 1px solid #C6D4CB;
    border-radius: 6px;
    padding: 0 12px;
    font-size: 12.5px;
    font-family: var(--font-b);
}

/* ----- Definition list used on detail screens ----- */
.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.detail-grid dt {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--text2);
    font-weight: 700;
    margin-bottom: 3px;
}

.detail-grid dd {
    font-size: 13.5px;
    color: var(--text);
}

/* ----- Mobile navigation -----
   The prototype was desktop-only. Below 900px the sidebar slides off-canvas
   and is opened by a button in the header. */
.nav-toggle {
    display: none;
    background: none;
    border: 1px solid var(--border);
    border-radius: 8px;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--text);
    cursor: pointer;
    flex: none;
}

.sidebar-scrim {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: 95;
}

.sidebar-scrim.is-open {
    display: block;
}

@media (max-width: 900px) {
    .nav-toggle {
        display: inline-flex;
    }

    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        z-index: 100;
    }

    .sidebar.is-open {
        transform: translateX(0);
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.35);
    }

    .header {
        left: 0;
        padding: 0 14px;
        gap: 10px;
    }

    .header-left {
        gap: 10px;
        min-width: 0;
    }

    .header .page-title {
        font-size: 15px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* The name is the useful part on a narrow header; the job title is not. */
    .header .user-info {
        display: none;
    }

    .main {
        margin-left: 0;
        padding: 18px 14px;
    }
}

/* ----- Responsive ----- */
@media (max-width: 1100px) {
    .stats-row.cols-5,
    .stats-row.cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .row-6040,
    .row-4060,
    .row-50,
    .row-334 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .stats-row.cols-5,
    .stats-row.cols-4,
    .stats-row.cols-3,
    .stats-row.cols-2 {
        grid-template-columns: 1fr;
    }

    .form-row {
        grid-template-columns: 1fr;
    }
}

/* =============================================================
   Attendance
   ============================================================= */

.attendance-calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

.cal-heading {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
    color: var(--text2);
    text-align: center;
    padding-bottom: 4px;
}

.cal-day {
    position: relative;
    min-height: 62px;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: white;
}

.cal-day.is-empty {
    border: none;
    background: none;
}

.cal-day.is-future {
    background: #FBFDFB;
    border-style: dashed;
}

.cal-date {
    font-size: 11px;
    font-weight: 700;
    color: var(--text2);
}

.cal-code {
    font-family: var(--font-h);
    font-size: 17px;
    font-weight: 800;
    line-height: 1;
}

.cal-time {
    font-family: var(--font-c);
    font-size: 9.5px;
    color: var(--text2);
    margin-top: auto;
}

/* Status tones, shared by the calendar and the register grid. */
.tone-present { background: #DCFCE7; border-color: #BBF7D0; color: #166534; }
.tone-late    { background: #FEF3C7; border-color: #FDE68A; color: #92400E; }
.tone-absent  { background: #FEE2E2; border-color: #FECACA; color: #991B1B; }
.tone-leave   { background: #DBEAFE; border-color: #BFDBFE; color: #1E40AF; }
.tone-official{ background: #EDE9FE; border-color: #DDD6FE; color: #5B21B6; }
.tone-weekend { background: #F6FAF7; border-color: var(--border); color: #9BB3A4; }
.tone-holiday { background: #EFF5F1; border-color: var(--border); color: #5C6B63; }

.cal-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    font-size: 11.5px;
    color: var(--text2);
}

.legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.legend-swatch {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    border: 1px solid;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-h);
    font-size: 11px;
    font-weight: 800;
}

/* ----- Register grid: officers down, days across ----- */
.register-wrap {
    overflow-x: auto;
}

.register {
    border-collapse: separate;
    border-spacing: 3px;
    font-size: 12px;
}

.register th.officer-col,
.register td.officer-col {
    position: sticky;
    left: 0;
    background: white;
    z-index: 2;
    text-align: left;
    min-width: 190px;
    padding-right: 10px;
}

.register th {
    font-size: 9.5px;
    font-weight: 700;
    color: var(--text2);
    text-align: center;
    padding: 2px;
    white-space: nowrap;
}

.register th.is-weekend {
    color: #C6D4CB;
}

.register .officer-name {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
}

.register .officer-role {
    font-size: 10.5px;
    color: var(--text2);
    white-space: nowrap;
}

.register .cell {
    width: 26px;
    height: 26px;
    border-radius: 5px;
    border: 1px solid var(--border);
    text-align: center;
    font-family: var(--font-h);
    font-size: 10.5px;
    font-weight: 700;
    padding: 0;
    cursor: default;
}

.register .cell.is-clickable {
    cursor: pointer;
}

.register .cell.is-clickable:hover {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}

.register .cell.is-future {
    border-style: dashed;
    color: #C6D4CB;
}

.register .rate-col {
    font-family: var(--font-h);
    font-weight: 800;
    font-size: 13px;
    white-space: nowrap;
    padding-left: 8px;
}

@media (max-width: 900px) {
    .attendance-calendar {
        gap: 4px;
    }

    .cal-day {
        min-height: 52px;
        padding: 4px 5px;
    }

    .cal-time {
        display: none;
    }
}

/* ----- Marking dialog ----- */
.mark-dialog {
    /* Keep the browser's centring; a bare width/padding rule loses it. */
    margin: auto;
    border: none;
    border-radius: 14px;
    padding: 24px 26px;
    width: min(440px, calc(100vw - 32px));
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
    color: var(--text);
    font-family: var(--font-b);
}

.mark-dialog::backdrop {
    background: rgba(15, 23, 42, 0.45);
}

.mark-dialog h3 {
    font-family: var(--font-h);
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 2px;
}

.mark-dialog .form-actions {
    margin-top: 20px;
}

/* =============================================================
   Appraisals
   ============================================================= */

.objectives-table input[type="text"],
.objectives-table input[type="number"],
.score-input {
    width: 100%;
    /* Wide enough for the "0–100" placeholder. Narrower, it clipped to
       "0–1", which reads as a one-point scale to a supervisor scoring. */
    min-width: 76px;
    border: 1px solid #C6D4CB;
    border-radius: 6px;
    padding: 7px 9px;
    font-size: 12.5px;
    font-family: var(--font-b);
    color: var(--text);
    background: white;
}

.objectives-table input:focus,
.score-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--focus);
}

.score-input {
    font-family: var(--font-h);
    font-weight: 700;
    text-align: center;
}

.objectives-table tfoot td {
    padding-top: 12px;
    font-size: 12.5px;
}

#weightTotal {
    font-family: var(--font-h);
    font-size: 15px;
}

/* A score the system worked out, not one anybody typed. */
.computed-score {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 16px 18px;
    background: #F6FAF7;
    border: 1px solid var(--border);
    border-radius: 10px;
}

.computed-value {
    font-family: var(--font-h);
    font-size: 30px;
    font-weight: 800;
    color: var(--text);
    line-height: 1;
    flex: none;
}

.computed-note {
    font-size: 12.5px;
    color: var(--text2);
    line-height: 1.55;
}

/* =============================================================
   Executive dashboard — department ranking
   ============================================================= */

.rank-row {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}

.rank-row:last-of-type {
    border-bottom: none;
}

.rank-position {
    font-family: var(--font-h);
    font-size: 15px;
    font-weight: 800;
    color: var(--text2);
    width: 24px;
    flex: none;
    text-align: right;
    padding-top: 1px;
}

.rank-body {
    flex: 1;
    min-width: 0;
}

.rank-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}

.rank-score {
    font-family: var(--font-h);
    font-size: 14px;
    font-weight: 800;
    flex: none;
}

.rank-bar {
    height: 7px;
    background: #EAF1EC;
    border-radius: 999px;
    overflow: hidden;
    margin: 6px 0 5px;
}

.rank-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
}

/* Reuse the framework's status vocabulary for the bar colour. */
.rank-fill.tone-ok { background: var(--success); }
.rank-fill.tone-warn { background: var(--warning); }
.rank-fill.tone-danger { background: var(--danger); }
.rank-fill.tone-muted { background: #C6D4CB; }

.unreported-block {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.unreported-block h4 {
    font-family: var(--font-h);
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 4px;
}

.unreported-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.unreported-list .chip {
    text-decoration: none;
    font-family: var(--font-c);
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    background: #EFF5F1;
    color: #40544A;
    border: 1px solid var(--border);
}

.unreported-list .chip:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.list-row.is-highlighted {
    background: #EFF7F2;
    margin: 0 -22px;
    padding-left: 22px;
    padding-right: 22px;
    border-left: 3px solid var(--primary);
}

/* ----- KPI recording ----- */
.kpi-record-row {
    border-bottom: 1px solid var(--border);
    padding: 14px 0;
}

.kpi-record-row:last-child {
    border-bottom: none;
}

.kpi-record-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 6px;
}

.kpi-record-target {
    font-size: 12px;
    color: var(--text2);
    line-height: 1.5;
    margin-bottom: 10px;
}

.kpi-record-inputs {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 10px;
    align-items: start;
}

.kpi-record-inputs input[type="number"] {
    font-family: var(--font-h);
    font-weight: 700;
    text-align: center;
}

.kpi-record-inputs input {
    width: 100%;
    border: 1px solid #C6D4CB;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 12.5px;
    font-family: var(--font-b);
    color: var(--text);
    background: white;
}

.kpi-record-inputs input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--focus);
}

@media (max-width: 720px) {
    .kpi-record-inputs {
        grid-template-columns: 1fr;
    }
}

/* =============================================================
   Header: notification bell and account link
   The prototype drew the bell as a div; it is a button here so it is
   reachable by keyboard, which needs the browser's button styling reset.
   ============================================================= */

.notif-bell {
    background: none;
    border: none;
    font: inherit;
    cursor: pointer;
    position: relative;
}

.notif-bell .dot {
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9.5px;
    font-weight: 700;
    line-height: 1;
    color: white;
}

.notif-dropdown form.notif-item {
    margin: 0;
}

.notif-dropdown .notif-item.is-muted {
    color: var(--text2);
    text-align: center;
    padding: 18px 16px;
}

.notif-body {
    display: block;
    color: var(--text2);
    font-weight: 400;
    margin-top: 2px;
}

.notif-clear {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-size: 11px;
    color: var(--primary);
    cursor: pointer;
}

.notif-footer {
    display: block;
    text-align: center;
    padding: 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
    border-top: 1px solid var(--border);
}

/* A whole notice is clickable, but it has to POST to be marked read. */
.notice-link {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    width: 100%;
}

.notice-link:hover strong,
.notice-link:hover .list-title {
    color: var(--primary);
}

.notice-row {
    margin: 0;
}

.notice-row.is-unread {
    background: #EFF7F2;
    margin: 0 -22px;
    padding-left: 22px;
    padding-right: 22px;
    border-left: 3px solid var(--primary);
}

.user-pill-link {
    text-decoration: none;
    color: inherit;
    border-radius: 10px;
    padding: 4px 6px;
    transition: background 0.15s;
}

.user-pill-link:hover {
    background: #EFF5F1;
}

.pw-field {
    width: 100%;
    border: 1px solid #C6D4CB;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13.5px;
    font-family: var(--font-b);
}

.pw-field:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--focus);
}

/* =============================================================
   Administration
   ============================================================= */

/* A temporary password is shown once, so make it easy to read out. */
.temp-password code {
    display: block;
    margin-top: 10px;
    font-family: var(--font-c);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 1.5px;
    color: var(--text);
    background: white;
    border: 1px dashed #D97706;
    border-radius: 8px;
    padding: 10px 14px;
    width: fit-content;
    user-select: all;
}

/* ----- Organogram editor ----- */
.org-dept {
    margin-bottom: 12px;
}

.org-dept > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-size: 14px;
}

.org-dept > summary::-webkit-details-marker {
    display: none;
}

.org-dept > summary::before {
    content: '▸';
    color: var(--text2);
    margin-right: 8px;
    transition: transform 0.15s;
}

.org-dept[open] > summary::before {
    transform: rotate(90deg);
}

.org-dept[open] > summary {
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.org-level {
    padding-left: 18px;
    border-left: 2px solid #EAF1EC;
    margin: 8px 0 4px 6px;
}

.org-node {
    margin-bottom: 8px;
}

.org-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 4px 0;
}

.org-tag {
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 700;
    color: var(--text2);
    width: 58px;
    flex: none;
}

.org-edit,
.org-add,
.category-add {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.org-edit input[type="text"],
.org-add input[type="text"],
.category-add input[type="text"] {
    border: 1px solid #C6D4CB;
    border-radius: 6px;
    padding: 6px 9px;
    font-size: 12.5px;
    font-family: var(--font-b);
    min-width: 200px;
    background: white;
}

.org-edit input:focus,
.org-add input:focus,
.category-add input:focus {
    outline: none;
    border-color: var(--primary);
}

.org-code {
    min-width: 0 !important;
    width: 80px;
    font-family: var(--font-c) !important;
}

.org-add {
    margin-top: 6px;
    padding-top: 6px;
}

.org-add input[type="text"] {
    border-style: dashed;
}

.org-check {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--text2);
    cursor: pointer;
}

.org-remove {
    background: none;
    border: 1px solid transparent;
    color: #9BB3A4;
    font-size: 16px;
    line-height: 1;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    cursor: pointer;
}

.org-remove:hover {
    color: var(--danger);
    border-color: #FECACA;
    background: #FEF2F2;
}

.org-centre {
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}

.org-centre:last-child {
    border-bottom: none;
}

/* ----- Service areas ----- */
.area-row {
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}

.area-row.is-inactive {
    opacity: 0.6;
}

.category-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0 0 0;
}

.category-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    padding: 3px 4px 3px 10px;
    border-radius: 999px;
    background: #EFF5F1;
    border: 1px solid var(--border);
    color: #40544A;
    margin: 0;
}

.category-chip.is-inactive {
    text-decoration: line-through;
    opacity: 0.6;
}

.category-chip button {
    background: none;
    border: none;
    color: #9BB3A4;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    padding: 0 4px;
}

.category-chip button:hover {
    color: var(--danger);
}

.category-add input[type="text"] {
    min-width: 150px;
    padding: 4px 8px;
    font-size: 11.5px;
    border-style: dashed;
}

/* ----- Roles & permissions ----- */
.role-tabs {
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.role-tabs .tab {
    text-decoration: none;
}

.perm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 14px;
}

.perm-group {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 14px 12px;
}

.perm-group legend {
    font-family: var(--font-h);
    font-size: 12.5px;
    font-weight: 700;
    padding: 0 6px;
}

.perm-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    padding: 3px 0;
    cursor: pointer;
}

.perm-item.is-locked {
    cursor: not-allowed;
    color: var(--text2);
}

/* ----- Audit log ----- */
.audit-props {
    font-family: var(--font-c);
    font-size: 10.5px;
    color: var(--text2);
    word-break: break-all;
}

/* ----- Link-style tabs (the prototype's tabs were buttons) ----- */
.task-tabs {
    margin: 0;
}

.task-tabs .tab,
.role-tabs .tab {
    text-decoration: none;
    display: inline-block;
}

/* =============================================================
   Work plan and projects
   ============================================================= */

.plan-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding: 14px 0 6px;
    border-top: 1px solid var(--border);
}

.plan-row:first-child {
    border-top: none;
    padding-top: 0;
}

.plan-main {
    flex: 1;
    min-width: 0;
}

.plan-figures {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex: none;
    font-family: var(--font-h);
    font-size: 15px;
}

.plan-edit {
    margin: 0 0 8px;
}

.plan-edit > summary {
    cursor: pointer;
    font-size: 11.5px;
    color: var(--primary);
    font-weight: 600;
    width: fit-content;
}

.plan-select {
    border: 1px solid #C6D4CB;
    border-radius: 6px;
    padding: 6px 8px;
    font-size: 12.5px;
    font-family: var(--font-b);
    background: white;
    max-width: 240px;
}

.plan-count {
    width: 70px;
    border: 1px solid #C6D4CB;
    border-radius: 6px;
    padding: 6px 8px;
    font-size: 12.5px;
    font-family: var(--font-h);
    font-weight: 700;
    text-align: center;
}

/* Deliverable checklist: a button so ticking one off is a real POST. */
.deliverable {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 13px;
}

.deliverable-box {
    width: 20px;
    height: 20px;
    flex: none;
    border-radius: 5px;
    border: 1.5px solid #C6D4CB;
    background: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    color: white;
    padding: 0;
    cursor: pointer;
}

span.deliverable-box {
    cursor: default;
}

.deliverable-box.is-done {
    background: var(--success);
    border-color: var(--success);
}

/* ----- Department pickers (collaborations, directives) ----- */
.partner-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    gap: 2px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    max-height: 230px;
    overflow-y: auto;
    background: white;
}

.form-group select[multiple] {
    width: 100%;
    border: 1px solid #C6D4CB;
    border-radius: 8px;
    padding: 8px;
    font-size: 13px;
    font-family: var(--font-b);
    background: white;
}

.form-group select[multiple] option {
    padding: 4px 6px;
}

/* =============================================================
   Supporting documents
   ============================================================= */

.attachment-list {
    font-size: 12.5px;
}

.attachment-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 5px 0;
}

.attachment-link {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    color: var(--text);
    text-decoration: none;
    min-width: 0;
}

.attachment-link:hover {
    color: var(--primary);
    text-decoration: underline;
}

.attachment-link .list-meta {
    display: inline;
    margin-left: 6px;
}

.attachment-icon {
    flex: none;
}

/* File inputs are left to the browser, but need to sit on the grid. */
.form-group input[type="file"] {
    width: 100%;
    font-size: 12.5px;
    font-family: var(--font-b);
    padding: 8px 0;
}

/* ----- Framework principles ----- */
.principle-list {
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
    line-height: 1.65;
    color: var(--text);
}

.principle-list li {
    margin-bottom: 8px;
}

.principle-list li:last-child {
    margin-bottom: 0;
}

/* =============================================================
   Trend charts

   Plain CSS bars rather than a charting library: no build step, no
   CDN, and they print. A period with nothing reported is drawn as an
   empty dashed track, never as a bar at zero.
   ============================================================= */

.trend {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    padding-top: 6px;
}

.trend-col {
    flex: 1;
    min-width: 0;
    text-align: center;
}

.trend-track {
    height: 120px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: #F6FAF7;
    border-radius: 6px 6px 0 0;
    overflow: hidden;
}

.trend-bar {
    display: block;
    width: 70%;
    border-radius: 5px 5px 0 0;
    position: relative;
    background: var(--primary);
}

.trend-bar.b-ok { background: var(--success); }
.trend-bar.b-warn { background: var(--warning); }
.trend-bar.b-err { background: var(--danger); }
.trend-bar.b-gray,
.trend-bar.tone-muted { background: #C6D4CB; }

/* The darker portion: approved out of logged. */
.trend-inner {
    display: block;
    width: 100%;
    background: var(--primary);
    border-radius: 5px 5px 0 0;
    position: absolute;
    bottom: 0;
    left: 0;
}

.trend-gap {
    display: block;
    width: 70%;
    height: 100%;
    border-left: 1px dashed #C6D4CB;
    border-right: 1px dashed #C6D4CB;
}

.trend-value {
    font-family: var(--font-h);
    font-size: 11.5px;
    font-weight: 700;
    padding-top: 5px;
}

.trend-label {
    font-size: 9.5px;
    color: var(--text2);
    white-space: nowrap;
}

@media (max-width: 720px) {
    .trend-label {
        font-size: 8px;
    }

    .trend-track {
        height: 90px;
    }
}

/* =============================================================
   Wide forms

   Single-card forms were pinned to a narrow column, leaving most of
   a wide screen empty. Fields now flow into as many columns as the
   screen allows: three across on a desktop, one on a phone, with no
   media query to keep in step. Row spacing comes from .form-group's
   own margin-bottom, so a grid field and a stacked field line up.
   ============================================================= */

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px 20px;
    align-items: start;
}

/* .form-group + .form-group adds a top margin to stack fields. Inside the
   grid that margin lands on every cell but the first, so the first field in
   a row sits higher than the rest of it. Row spacing is the grid's job. */
.form-grid > .form-group + .form-group {
    margin-top: 0;
}

/* A field that would read badly chopped into a column — a title, a
   choice with a paragraph of guidance under it. */
.form-grid > .form-group.is-full {
    grid-column: 1 / -1;
}

/* Prose keeps a readable measure. A 1400px-wide line of text does not
   get easier to read for being wide. */
.form-group textarea,
.form-group.is-prose input[type="text"] {
    max-width: 900px;
}

/* A genuinely short form reads better centred than pinned to one side. */
.card.is-centered {
    margin-left: auto;
    margin-right: auto;
}

/* =============================================================
   The Commission's crest

   Optional artwork, dropped into public/img on deployment. On the
   navy sidebar it sits on a white tile, because the crest's own
   lettering is dark and would disappear against the panel.
   ============================================================= */

.ecn-crest {
    display: block;
    width: auto;
    height: 34px;
}

.sidebar .brand .ecn-crest.on-dark {
    background: white;
    border-radius: 8px;
    padding: 7px 10px;
    height: 44px;
    margin-bottom: 12px;
}

.login-card .ecn-crest.on-light {
    height: 62px;
    margin-bottom: 18px;
}

/* The collapsed rail has 60px to play with — the wordmark alone. */
@media (max-width: 768px) {
    .sidebar .brand .ecn-crest {
        display: none;
    }
}

/* =============================================================
   Written briefings
   ============================================================= */

.briefing-text {
    font-size: 14px;
    line-height: 1.75;
    color: var(--text);
    white-space: pre-line;
    max-width: 68ch;
}

.briefing-text.is-compact {
    font-size: 13px;
    line-height: 1.65;
    color: var(--text2);
    margin-top: 6px;
}

/* Says who wrote it and what it is. Not decoration — an officer reading a
   briefing has to be able to tell it from a figure the system measured. */
.briefing-foot {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    font-size: 11.5px;
    line-height: 1.6;
    color: var(--text2);
    max-width: 68ch;
}

/* A disabled button must look disabled. Written briefings render the
   button while the feature is switched off, so the reason is visible. */
.btn:disabled,
.btn[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
}

/* =============================================================
   Awards
   ============================================================= */

.award-recipient {
    font-family: var(--font-h);
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
}

.award-citation {
    margin-top: 8px;
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--text);
    max-width: 68ch;
    border-left: 3px solid var(--accent);
    padding-left: 12px;
}

.award-rank {
    font-family: var(--font-c);
    font-size: 11px;
    font-weight: 600;
    color: var(--text2);
    min-width: 18px;
}

.award-figure {
    font-family: var(--font-c);
    font-size: 13px;
    font-weight: 600;
    color: var(--primary);
    white-space: nowrap;
}

.award-group {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: 700;
    color: var(--text2);
    padding: 16px 0 4px;
    border-bottom: 1px solid var(--border);
}

/* Listed apart, not ranked last: not reporting and reporting badly are
   different failures and must not look alike. */
.award-unmeasured {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    font-size: 12px;
    line-height: 1.6;
    color: var(--text2);
}

.award-unmeasured .badge {
    margin: 0 4px 4px 0;
}

/* =============================================================
   Charts

   Drawn in HTML and CSS rather than a charting library: no build step,
   nothing fetched from a CDN, and the markup is readable without script.
   Colours come from App\View\ChartPalette, never from here, so a class is
   the same colour on every chart.

   The house rules, which the partials in views/partials/charts follow:
   - Thin marks: columns at most 24px wide with a 4px rounded end and a
     square base; horizontal bars 12px thick.
   - Gridlines and axes are solid hairlines, never dashed.
   - Nothing measured is hatched, not coloured and not zero-height, so an
     unfiled return can never be read as a small figure.
   - Every value is also readable without hovering: a legend, a value at
     the bar's end, or the "Show as a table" view.
   ============================================================= */

.chart {
    margin: 0;
    container-type: inline-size;    /* lets a chart respond to its card, not the screen */
}

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

/* Hatching for "nothing measured". Low contrast on purpose: it marks an
   absence, it should not compete with the data. */
.chart-gap,
.chart-seg.is-nodata,
.chart-key.is-nodata,
.chart-hbar.is-nodata,
.chart-meter-track.is-nodata {
    background: repeating-linear-gradient(45deg, #D5DFD9 0 2px, #F3F7F4 2px 7px);
}

/* ----- Columns ----- */

.chart-body {
    display: flex;
    gap: 8px;
    padding-top: 18px;              /* room for the current-period label */
}

.chart-yaxis {
    position: relative;
    flex: none;
    width: 34px;
    height: 170px;
    font-size: 10px;
    color: var(--text2);
    font-variant-numeric: tabular-nums;
}

.chart-yaxis span {
    position: absolute;
    right: 0;
    transform: translateY(50%);
    line-height: 1;
}

.chart-plot {
    position: relative;
    flex: 1;
    min-width: 0;
    height: 170px;
}

.chart-grid {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: #E6EDE9;
}

.chart-grid:first-child {
    background: #C9D5CE;            /* the baseline, one step firmer */
}

.chart-target {
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    border-top: 1px solid #7E8D85;
    z-index: 2;
    pointer-events: none;
}

/* Labelled at the left: the right-hand column is the current period and
   carries its own value label, which the two would otherwise collide over. */
.chart-target span {
    position: absolute;
    left: 4px;
    bottom: 3px;
    font-size: 10px;
    font-weight: 600;
    color: var(--text2);
    background: rgba(255, 255, 255, 0.9);
    padding: 0 3px;
    border-radius: 3px;
}

.chart-cols {
    position: absolute;
    inset: 0;
    display: flex;
}

/* The whole slot is the hover target, not just the painted column. */
.chart-col {
    position: relative;
    flex: 1;
    min-width: 0;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    outline: none;
    cursor: default;
}

.chart-col:focus-visible {
    box-shadow: inset 0 0 0 2px var(--primary);
    border-radius: 4px;
}

.chart-bar,
.chart-gap {
    position: relative;
    display: block;
    width: 56%;
    max-width: 24px;
}

.chart-bar {
    border-radius: 4px 4px 0 0;
    overflow: hidden;
    transition: filter 0.12s ease;
}

.chart-gap {
    height: 100%;
    border-radius: 4px 4px 0 0;
}

/* Measured and zero: a hairline on the baseline, visibly not a gap. */
.chart-bar.is-zero {
    height: 2px !important;
    background: #7E8D85 !important;
    border-radius: 1px;
}

.chart-bar-part {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
}

.chart-col.is-hot .chart-bar {
    filter: brightness(1.14) saturate(1.05);
}

.chart-cap {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -4px);
    font-family: var(--font-h);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    pointer-events: none;
}

.chart-xaxis {
    display: flex;
    padding: 6px 0 0 42px;          /* y-axis width + gap */
}

.chart-xaxis span {
    flex: 1;
    min-width: 0;
    text-align: center;
    font-size: 10px;
    color: var(--text2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ----- Stacked bar ----- */

.chart-stack {
    display: flex;
    gap: 2px;                       /* the surface gap between segments */
    height: 22px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--card);
}

.chart-stack.is-empty {
    height: auto;
    padding: 12px;
    justify-content: center;
    background: #F3F7F4;
    font-size: 12px;
    color: var(--text2);
}

.chart-seg {
    flex-basis: 0;
    min-width: 4px;
    outline: none;
    transition: filter 0.12s ease;
}

.chart-seg.is-hot {
    filter: brightness(1.14);
}

.chart-seg:focus-visible {
    box-shadow: inset 0 0 0 2px #FFFFFF, inset 0 0 0 4px var(--text);
}

.chart-legend {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: grid;
    gap: 6px;
}

.chart-legend li {
    display: grid;
    grid-template-columns: 10px 1fr auto 46px;
    align-items: center;
    gap: 9px;
    font-size: 12.5px;
    color: var(--text);
}

.chart-legend li.is-none {
    color: var(--text2);
}

.chart-legend-value {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.chart-legend-share {
    font-size: 11.5px;
    color: var(--text2);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.chart-key {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex: none;
}

.chart-legend.is-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 0 0 4px;
    font-size: 11.5px;
    color: var(--text2);
}

.chart-legend.is-inline span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ----- Horizontal bars ----- */

.chart-bar-row {
    display: grid;
    grid-template-columns: minmax(180px, 44%) 1fr;
    align-items: center;
    gap: 16px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}

.chart-bar-row:last-child {
    border-bottom: none;
}

.chart-bar-row.is-highlighted {
    background: var(--primary-light);
    margin: 0 -10px;
    padding: 8px 10px;
    border-radius: 8px;
}

.chart-bar-name {
    min-width: 0;
}

/* The name stays on one line; the detail beneath it wraps rather than
   being cut, since it can carry figures (a division's attendance). */
.chart-bar-name .list-title {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chart-bar-name .list-meta {
    display: block;
}

/* The value sits at the bar's tip. 96px is held back on the right so a
   full-length bar still leaves room for its label. */
.chart-bar-track {
    --reserve: 96px;
    position: relative;
    height: 22px;
    outline: none;
}

.chart-bar-track:focus-visible {
    box-shadow: 0 0 0 2px var(--primary);
    border-radius: 4px;
}

/* --f is the value as a fraction of the axis. Bar and label both scale
   against the width left after the reserve, so they always agree. */
.chart-hbar {
    position: absolute;
    left: 0;
    top: 5px;
    display: block;
    height: 12px;
    width: calc((100% - var(--reserve)) * var(--f));
    border-radius: 0 4px 4px 0;     /* square at the baseline */
    transition: filter 0.12s ease;
}

.chart-bar-value {
    left: calc((100% - var(--reserve)) * var(--f) + 8px);
}

.chart-bar-track.is-nodata .chart-hbar {
    width: 36px;
    border-radius: 0 4px 4px 0;
}

.chart-bar-track.is-nodata .chart-bar-value {
    left: 44px;
    color: var(--text2);
    font-weight: 500;
}

/* Measured and zero: a hairline on the baseline. */
.chart-bar-track.is-zero .chart-hbar {
    width: 2px;
    background: #7E8D85 !important;
    border-radius: 0;
}

.chart-bar-track.is-zero .chart-bar-value {
    left: 10px;
}

.chart-bar-track.is-hot .chart-hbar {
    filter: brightness(1.14);
}

.chart-bar-value {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    pointer-events: none;
}

/* ----- Meter ----- */

.chart-meter + .chart-meter {
    margin-top: 16px;
}

.chart-meter-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.chart-meter-label {
    font-size: 12.5px;
    color: var(--text2);
}

.chart-meter-value {
    font-family: var(--font-h);
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
}

.chart-meter-track {
    position: relative;
    height: 8px;
    border-radius: 4px;
    background: #E4ECE7;
    overflow: hidden;
}

.chart-meter-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-radius: 4px;
}

.chart-meter-note {
    margin-top: 5px;
    font-size: 11.5px;
    color: var(--text2);
}

/* ----- Table view and tooltip ----- */

.chart-table {
    margin-top: 10px;
}

.chart-table summary {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--primary);
    cursor: pointer;
    width: max-content;
}

.chart-table table {
    width: 100%;
    margin-top: 8px;
    border-collapse: collapse;
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
}

.chart-table th,
.chart-table td {
    text-align: left;
    padding: 5px 8px;
    border-bottom: 1px solid var(--border);
}

.chart-table th {
    font-size: 11px;
    color: var(--text2);
    font-weight: 600;
}

.chart-tip {
    position: fixed;
    z-index: 1000;
    max-width: 240px;
    padding: 6px 10px;
    border-radius: 7px;
    background: #0F1F17;
    color: #FFFFFF;
    font-size: 11.5px;
    line-height: 1.35;
    box-shadow: 0 6px 18px rgba(6, 48, 29, 0.25);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.1s ease;
}

.chart-tip.is-open {
    opacity: 1;
}

.chart-tip strong {
    display: block;
    font-size: 13px;
    font-weight: 700;
}

.chart-tip span {
    color: #C4D3CA;
}

.card-sub {
    font-size: 11.5px;
    color: var(--text2);
    margin: -6px 0 12px;
}

@media (max-width: 720px) {
    .chart-bar-row {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .chart-yaxis,
    .chart-plot {
        height: 140px;
    }

}

/* Twelve month labels do not fit a narrow chart — a phone, or a card in a
   three-across row. Keep every other one; the tooltip and table have all. */
@container (max-width: 560px) {
    .chart-xaxis.is-dense span:nth-child(even) {
        visibility: hidden;
    }

    .chart-xaxis.is-dense span {
        overflow: visible;
    }
}

/* The overall appraisal score beneath its three parts. */
.appraisal-overall {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin: 18px 0 12px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    font-size: 12.5px;
    color: var(--text2);
}

.appraisal-overall strong {
    font-family: var(--font-h);
    font-size: 22px;
    color: var(--text);
}

/* Nineteen departments do not fit one tall column beside a short card.
   On a wide screen the ranking reads down two columns instead. */
.rank-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    column-gap: 36px;
}

.rank-list .rank-row:last-of-type {
    border-bottom: 1px solid var(--border);
}

/* A 10px legend key needs a firmer hatch than a wide segment to read at all,
   and an edge so it does not dissolve into the card. */
.chart-key.is-nodata {
    background: repeating-linear-gradient(45deg, #8FA398 0 1.5px, #FFFFFF 1.5px 3.5px);
    box-shadow: inset 0 0 0 1px #B7C6BD;
}

/* =============================================================
   The chain of command on an activity

   Submitted → reviewed at the branch → approved at the division.
   A step that has not happened yet is shown as waiting, never blank.
   ============================================================= */

.chain {
    list-style: none;
    display: flex;
    gap: 10px;
    margin: 18px 0 0;
    padding: 14px 0 0;
    border-top: 1px solid var(--border);
}

.chain li {
    flex: 1;
    min-width: 0;
    padding-left: 12px;
    border-left: 3px solid #D5DFD9;
    font-size: 11.5px;
    color: var(--text2);
}

.chain li.is-done {
    border-left-color: var(--primary);
}

.chain b {
    display: block;
    font-size: 12px;
    color: var(--text2);
}

.chain li.is-done b {
    color: var(--text);
}

.chain span {
    display: block;
    margin-top: 2px;
}

@media (max-width: 720px) {
    .chain {
        flex-direction: column;
        gap: 12px;
    }
}

/* =============================================================
   Readings and the indicator a piece of work serves
   ============================================================= */

.reading-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    font-size: 11.5px;
    color: var(--text2);
}

.reading-strip strong {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text2);
}

.reading-chip {
    background: var(--primary-light);
    color: #06301D;
    border-radius: 999px;
    padding: 3px 10px;
    font-weight: 600;
}

.reading-chip em {
    font-weight: 400;
    font-style: normal;
    color: var(--text2);
}

.indicator-confirm {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-bottom: 10px;
    font-size: 12px;
    color: var(--text2);
}

.indicator-confirm label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: var(--text);
}

.indicator-confirm select {
    max-width: 320px;
    border: 1px solid #C6D4CB;
    border-radius: 6px;
    padding: 5px 8px;
    font-family: var(--font-b);
    font-size: 12px;
}

.indicator-confirm.is-settled {
    color: var(--text);
}

/* Where an indicator's figure came from: measured, or typed. */
.kpi-basis {
    font-size: 11.5px;
    line-height: 1.5;
    border-radius: 6px;
    padding: 7px 10px;
    margin: 8px 0;
}

.kpi-basis.is-measured {
    background: var(--primary-light);
    color: #06301D;
}

.kpi-basis.is-typed {
    background: #F3F7F4;
    color: var(--text2);
}

/* =============================================================
   Figures read out of a quarterly report

   Each one shows the report's own words underneath it, because a
   figure nobody can trace back is worse than no figure at all.
   ============================================================= */

.finding {
    border: 1px solid var(--border);
    border-left: 3px solid var(--primary);
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 12px;
}

.finding.confirmed {
    border-left-color: var(--success);
    background: #F6FAF7;
}

.finding.rejected {
    border-left-color: #C6D4CB;
    opacity: 0.7;
}

.finding-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
}

.finding-figure {
    flex: none;
    font-family: var(--font-h);
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
    text-align: right;
}

.finding-figure .list-meta {
    font-family: var(--font-b);
    font-weight: 400;
}

.finding-quote {
    margin: 10px 0 0;
    padding: 8px 12px;
    background: #F3F7F4;
    border-radius: 6px;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--text);
}

.finding-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

/* The report's own words, beside a figure read out of it. */
.kpi-quote {
    display: block;
    margin-top: 4px;
    font-style: italic;
}

/* =============================================================
   The work behind an indicator

   Effort, shown under the framework's own headings and kept visibly
   apart from the figure. A heading nobody worked on this quarter is
   a gap worth seeing, so it is listed and marked rather than hidden.
   ============================================================= */

.kpi-work {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #F6FAF7;
    border: 1px solid var(--border);
}

.kpi-work-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    font-size: 12px;
    margin-bottom: 6px;
}

.kpi-work-head span {
    color: var(--text2);
}

.kpi-work-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 4px 18px;
}

.kpi-work-list li {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
    padding: 3px 0;
    border-bottom: 1px dashed transparent;
}

.kpi-work-list li b {
    font-variant-numeric: tabular-nums;
}

.kpi-work-list li.is-gap {
    color: #9A6A12;
}

.kpi-work-list li.is-gap b {
    font-weight: 600;
    font-style: italic;
}

/* =============================================================
   KPI tracker as a table

   One row per indicator with the columns people scan — code,
   indicator, target, baseline, achieved, where the figure came from,
   and the work behind it. The long framework text (mandate, data
   source, how the figure was reached, work by heading) lives in a
   detail row that opens under the indicator.
   ============================================================= */

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

.kpi-table thead th {
    background: var(--primary);
    color: #FFFFFF;
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 700;
    padding: 11px 12px;
    white-space: nowrap;
}

.kpi-table thead th:first-child { border-radius: 8px 0 0 0; }
.kpi-table thead th:last-child { border-radius: 0 8px 0 0; }

.kpi-table td {
    padding: 12px;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}

.kpi-table tbody tr.kpi-row:nth-of-type(4n+1) {
    background: #F8FBF9;
}

.kpi-table tbody tr.kpi-row:hover {
    background: #F0F6F2;
}

.kpi-code {
    font-weight: 700;
    white-space: nowrap;
    color: var(--primary-dark);
}

.kpi-title {
    min-width: 240px;
}

.kpi-title .list-title,
.kpi-title .list-meta {
    display: block;
}

.kpi-num {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.kpi-achieved {
    white-space: nowrap;
}

.kpi-achieved .kpi-figure {
    font-family: var(--font-h);
    font-size: 16px;
    font-weight: 700;
    margin-right: 6px;
}

.kpi-achieved input[type="number"] {
    width: 84px;
    padding: 6px 8px;
    border: 1px solid #C6D4CB;
    border-radius: 6px;
    font-size: 13px;
    margin-right: 6px;
}

.kpi-achieved .list-meta {
    display: block;
    margin: 2px 0 4px;
}

.kpi-source {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.kpi-source::before,
.kpi-origin {
    content: '';
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #B8C4BD;
}

.kpi-source.is-measured::before, .kpi-origin.is-measured { background: #059669; }
.kpi-source.is-report::before, .kpi-origin.is-report { background: #2563EB; }
.kpi-source.is-typed::before, .kpi-origin.is-typed { background: #D4921A; }
.kpi-source.is-none { color: var(--text2); font-weight: 500; }

.kpi-origins {
    display: grid;
    gap: 5px;
    margin-top: 8px;
    font-size: 12.5px;
}

.kpi-origins span {
    display: flex;
    align-items: center;
    gap: 8px;
}

.kpi-origins b {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
}

.kpi-effort {
    white-space: nowrap;
}

.kpi-gaps {
    display: block;
    font-size: 11.5px;
    color: #9A6A12;
}

.kpi-toggle {
    text-align: right;
}

tr.kpi-detail > td {
    background: #F6FAF7;
    padding: 16px 18px 18px;
}

.kpi-detail-grid {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 24px;
}

.kpi-detail-grid h4 {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text2);
    margin: 0 0 8px;
}

.kpi-facts {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 6px 14px;
    margin: 14px 0 0;
    font-size: 12.5px;
}

.kpi-facts dt {
    color: var(--text2);
    font-weight: 600;
}

.kpi-facts dd {
    margin: 0;
}

.kpi-narrative {
    display: grid;
    gap: 4px;
    margin-top: 10px;
    font-size: 12px;
    color: var(--text2);
}

.kpi-narrative input {
    padding: 8px 10px;
    border: 1px solid #C6D4CB;
    border-radius: 6px;
    font-size: 13px;
}

.kpi-work-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

.kpi-work-table td {
    padding: 5px 0;
    border-bottom: 1px solid var(--border);
}

.kpi-work-table td:last-child {
    text-align: right;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.kpi-work-table tr.is-gap td {
    color: #9A6A12;
}

.kpi-work-table tr.is-gap td:last-child {
    font-style: italic;
}

@media (max-width: 900px) {
    .kpi-detail-grid {
        grid-template-columns: 1fr;
    }
}

@media print {
    tr.kpi-detail[hidden] { display: table-row !important; }
    .kpi-toggle, [data-kpi-expand-all] { display: none !important; }
}

/* =============================================================
   The framework as a document

   The nine columns of the approved KPI Framework, in its own order.
   Wide by nature, so it scrolls sideways inside its card on a small
   screen, and prints landscape across the full page.
   ============================================================= */

.framework-card {
    padding: 0;
    overflow: hidden;
}

/* 1060px fits all nine columns on a 1440px laptop screen beside the
   sidebar; anything narrower scrolls sideways inside the card. */
.framework-table {
    width: 100%;
    min-width: 1060px;
    border-collapse: separate;
    border-spacing: 2px;
    font-size: 12px;
    line-height: 1.45;
}

.framework-table thead th {
    background: var(--primary);
    color: #FFFFFF;
    text-align: left;
    vertical-align: top;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 700;
    padding: 10px 10px 18px;
}

.framework-table td {
    vertical-align: top;
    padding: 10px;
    background: #E9F1EC;
}

.framework-table tbody tr:nth-child(even) td {
    background: #F4F8F5;
}

.framework-code {
    font-weight: 700;
    white-space: nowrap;
    color: var(--primary-dark);
}

.framework-title {
    font-weight: 600;
    min-width: 140px;
}

@media print {
    @page { size: A4 landscape; margin: 10mm; }
    .sidebar, .header, .page-header .btn { display: none !important; }
    .main { margin: 0 !important; padding: 0 !important; }
    .framework-table { min-width: 0; font-size: 9pt; }
    .framework-table thead th, .framework-table td { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* The score box on a KPI performance decision. */
.score-field {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text2);
    white-space: nowrap;
}

.score-field input {
    width: 84px;
    padding: 7px 9px;
    border: 1px solid #C6D4CB;
    border-radius: 6px;
    font-size: 13px;
}

/* The figure a reviewer confirms beside the indicator. Narrow boxes, because
   it is a quantity and a denominator, not a sentence. */
.figure-confirm {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--text2);
}

.figure-confirm input {
    width: 92px;
    border: 1px solid #C6D4CB;
    border-radius: 6px;
    padding: 6px 8px;
    font-family: var(--font-b);
    font-size: 12.5px;
}

.list-meta.is-quote {
    font-style: italic;
}