/*
   TCS design language.

   Layers, in file order:
     1. Design tokens      - every colour, radius, shadow, and UI font size lives here
     2. Base               - element defaults, focus ring, utilities
     3. Chrome             - page header, navbar, user section, footer
     4. Forms & validation
     5. Shared components  - .tcs-* classes reused across pages
     6. Kendo overrides
     7. Page-specific      - rules that exist for a single page

   Conventions:
     - Never hardcode a colour, radius, or shadow that a token covers.
     - New UI reused on 2+ pages gets a .tcs-* component class here.
     - Page-local <style> blocks are fine for layout (widths, gaps) but must use tokens.
*/

/* ── 1. Design tokens ────────────────────────────────────── */

/* Palette language: every colour value is picked from five ramps in Tailwind's
   published colour chart (a reference chart only - the site does not use the
   Tailwind framework): Slate (text, surfaces, borders), Sky (brand accent /
   informational), Green (success), Amber (warning), Red (danger). White is the
   only colour used outside the ramps. When a new shade is needed, pick it from
   one of these five ramps and add it here - never introduce a sixth hue. */

:root {
    /* Text (Slate 900 / 800 / 600) */
    --tcs-text:         #0f172a;
    --tcs-text-body:    #1e293b;
    --tcs-text-muted:   #475569;
    /* Page titles (h1 only) - SCHN brand navy; the one sanctioned
       semantic use of a brand colour */
    --tcs-heading:      #003263;

    /* Brand accent (Sky 700 / 800 / 100) - also the "informational" status */
    --tcs-accent:        #0369a1;
    --tcs-accent-hover:  #075985;
    --tcs-accent-subtle: #e0f2fe;
    --tcs-accent-text:   #075985;

    /* Semantic status - solid tone, subtle tint background, text-on-tint */
    --tcs-success:        #15803d;  /* Green 700 */
    --tcs-success-subtle: #dcfce7;  /* Green 100 */
    --tcs-success-text:   #166534;  /* Green 800 */

    --tcs-warning:        #f59e0b;  /* Amber 500 */
    --tcs-warning-subtle: #fef3c7;  /* Amber 100 */
    --tcs-warning-text:   #92400e;  /* Amber 800 */
    --tcs-warning-faint:  #fffbeb;  /* Amber 50 */

    --tcs-danger:         #b91c1c;  /* Red 700 */
    --tcs-danger-hover:   #991b1b;  /* Red 800 */
    --tcs-danger-subtle:  #fee2e2;  /* Red 100 */
    --tcs-danger-text:    #991b1b;  /* Red 800 */

    /* Surfaces & borders (Slate 50 / 100; borders are neutral alphas).
       --tcs-border: structural lines (tables, sections, rules).
       --tcs-border-strong: interactive control outlines (inputs, selects) -
       darker because controls must read as controls. */
    --tcs-surface:        #f8fafc;
    --tcs-surface-strong: #f1f5f9;
    --tcs-border:         rgba(0, 0, 0, 0.20);
    --tcs-border-strong:  rgba(0, 0, 0, 0.35);

    /* SCHN brand colours (from the logo) - decorative use only (brand ribbon,
       avatar chips). Never use these for semantic UI: status, actions, text.
       Sole exception: navy is the display-heading colour via --tcs-heading. */
    --tcs-brand-navy:    #003263;
    --tcs-brand-teal:    #33cccc;
    --tcs-brand-lime:    #99cc33;
    --tcs-brand-yellow:  #ffcc33;
    --tcs-brand-magenta: #ea005e;

    /* Focus ring colour (paired with a white gap in box-shadow) */
    --tcs-focus: var(--tcs-accent);

    /* Shape & elevation */
    --tcs-radius-sm:     0.25rem;
    --tcs-radius:        0.5rem;
    --tcs-shadow-raised: 0 4px 16px rgba(0, 0, 0, 0.08);

    /* UI type scale (headings are set on elements below) */
    --tcs-fs-xs: 0.6875rem;  /* badges, step numerals */
    --tcs-fs-sm: 0.8125rem;  /* meta text, table headers, footer */
    --tcs-fs-md: 0.875rem;   /* controls, nav, hints - the UI default */
    --tcs-fs-lg: 0.9375rem;  /* page subtitles, prominent body text */

    /* Bootstrap bridge - keep Bootstrap (and therefore Kendo) on TCS colours,
       so utilities like .text-danger render the TCS palette, not Bootstrap's */
    --bs-primary:          #0369a1;
    --bs-primary-rgb:      3, 105, 161;
    --bs-link-color:       #0369a1;
    --bs-link-hover-color: #075985;
    --bs-success:          #15803d;
    --bs-success-rgb:      21, 128, 61;
    --bs-warning:          #f59e0b;
    --bs-warning-rgb:      245, 158, 11;
    --bs-danger:           #b91c1c;
    --bs-danger-rgb:       185, 28, 28;
    --bs-border-color:     var(--tcs-border);
    /* Bootstrap .text-muted resolves to this - keep it on the TCS muted tone */
    --bs-secondary-color:  var(--tcs-text-muted);
}

/* ── 2. Base ─────────────────────────────────────────────── */

html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    font-family: "Public Sans", sans-serif;
    color: var(--tcs-text-body);
    line-height: 1.6;
    /* Reserves space for the absolutely-positioned footer (line-height 44px + 2px ribbon) */
    margin-bottom: 46px;
}

/* Heading language: navy is reserved for the page title (h1) - scarcity is
   what makes it read as identity. In-page headings (h2–h3: sections, cards,
   tables) stay slate so they don't compete. Label headings (h4–h6): small
   uppercase muted labels, matching the table-header / stat-caption motif. */
h1, h2, h3 {
    color: var(--tcs-text);
    font-weight: 600;
    line-height: 1.3;
}

h1 {
    color: var(--tcs-heading);
    letter-spacing: -0.01em;
}

h4, h5, h6 {
    color: var(--tcs-text-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.4;
}

h1 { font-size: 1.5rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.0625rem; }
h4 { font-size: var(--tcs-fs-sm); }
h5 { font-size: var(--tcs-fs-xs); }
h6 { font-size: var(--tcs-fs-xs); }

/* Vertical rhythm: more space above a heading than below it, so each heading
   binds to the content it introduces. First children reset to keep card and
   section headers tight. (Bootstrap's reboot zeroes top margins.) */
h2 { margin-top: 1.75rem; }
h3 { margin-top: 1.25rem; }

h2:first-child,
h3:first-child {
    margin-top: 0;
}

a {
    color: var(--tcs-accent);

    &:hover {
        color: var(--tcs-accent-hover);
    }
}

.form-control:focus,
.form-check-input:focus,
.form-select:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--tcs-focus);
}

/* Utilities */

.hidden {
    display: none !important;
}

.tcs-muted {
    color: var(--tcs-text-muted);
}

/* Secondary guidance text under controls and section intros. */
.tcs-hint {
    font-size: var(--tcs-fs-md);
    color: var(--tcs-text-muted);
}

/* Prominent body text (declaration prose, in-form emphasis labels). */
.tcs-body-lg {
    font-size: var(--tcs-fs-lg);
}

/* ── 3. Chrome ───────────────────────────────────────────── */

/* SCHN brand ribbon - flat hard-stop stripes of the five logo colours.
   Rendered above the navbar (4px) and echoed above the footer (2px). */
.tcs-brand-ribbon {
    height: 3px;
    background: linear-gradient(
        to right,
        var(--tcs-brand-navy)    0 20%,
        var(--tcs-brand-teal)    20% 40%,
        var(--tcs-brand-lime)    40% 60%,
        var(--tcs-brand-yellow)  60% 80%,
        var(--tcs-brand-magenta) 80% 100%
    );
}

.tcs-brand-ribbon-thin {
    height: 2px;
}

.tcs-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1rem;
    margin-bottom: 1.75rem;
    border-bottom: 1px solid var(--tcs-border);

    h1 {
        margin-bottom: 0;
        line-height: 1.2;
    }

    p {
        color: var(--tcs-text-muted);
        font-size: var(--tcs-fs-lg);
        margin-top: 0.25rem;
        margin-bottom: 0;
    }
}

/* Compact navbar: tight vertical padding, hairline border, no shadow -
   the brand ribbon above is the chrome's one decorative separator. */
header .navbar {
    padding-block: 0.375rem;
}

/* Header spacing rhythm: 0.75rem between distinct elements (logo ↔ brand
   text, avatar ↔ name ↔ assignment select ↔ sign-out). */
.navbar-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: opacity 0.15s ease;

    img {
        height: 44px;
    }

    span {
        font-size: 1rem;
        font-weight: 600;
        letter-spacing: 0.01em;
        color: var(--tcs-text);
        transition: color 0.15s ease;
    }

    &:hover {
        opacity: 0.9;

        span {
            color: var(--tcs-accent);
        }
    }
}

/* Centered brand variant - pages with no nav items (e.g. dev sign-in) */
.navbar.tcs-navbar-centered {
    .container {
        justify-content: center;
    }

    .navbar-brand {
        margin-right: 0;

        img {
            height: 52px;
        }

        span {
            font-size: 1.125rem;
        }
    }
}

.navbar-nav .nav-link {
    font-size: var(--tcs-fs-md);
    font-weight: 500;
    color: var(--tcs-text-body);
    padding-inline: 0.625rem;
    transition: color 0.15s ease;

    &:hover,
    &:focus {
        color: var(--tcs-text);
    }

    &.active {
        color: var(--tcs-accent);
        font-weight: 600;
    }
}

.tcs-user-section {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.tcs-user-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.tcs-user-name {
    font-size: var(--tcs-fs-md);
    font-weight: 600;
    color: var(--tcs-text);
    white-space: nowrap;
}

/* User initials chip - background picked per user from the SCHN brand set */
.tcs-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    font-size: var(--tcs-fs-xs);
    font-weight: 700;
    letter-spacing: 0.02em;
    flex-shrink: 0;

    &.tcs-avatar-0 { background-color: var(--tcs-brand-navy);    color: #fff; }
    &.tcs-avatar-1 { background-color: var(--tcs-brand-teal);    color: var(--tcs-brand-navy); }
    &.tcs-avatar-2 { background-color: var(--tcs-brand-lime);    color: var(--tcs-brand-navy); }
    &.tcs-avatar-3 { background-color: var(--tcs-brand-yellow);  color: var(--tcs-brand-navy); }
    &.tcs-avatar-4 { background-color: var(--tcs-brand-magenta); color: #fff; }
}

.tcs-assignment-select {
    /* Wide enough for "Staff Specialist (Level n)" - the level must stay visible */
    max-width: 250px;
    font-size: var(--tcs-fs-md);
    font-weight: 500;
    color: var(--tcs-text-body);
    background-color: transparent;
    border-color: var(--tcs-border-strong);

    &:focus {
        background-color: #fff;
        color: var(--tcs-text);
    }
}

.tcs-signout-btn {
    background: none;
    border: none;
    border-left: 1px solid var(--tcs-border);
    padding: 0.25rem 0 0.25rem 0.75rem;
    color: var(--tcs-text-muted);
    font-size: var(--tcs-fs-sm);
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;

    &:hover,
    &:focus {
        color: var(--tcs-text-body);
    }
}

/* Mobile: reflow user section into a panel */
@media (max-width: 991.98px) {
    .tcs-user-section {
        border-top: 1px solid var(--tcs-border);
        margin-top: 0.5rem;
        padding: 0.75rem 0.5rem 0.5rem;
        align-items: center;
    }

    .tcs-user-info {
        flex-direction: column;
        align-items: flex-start;
        flex: 1;
        gap: 0.375rem;
        min-width: 0;
    }

    .tcs-assignment-select {
        max-width: none;
        width: 100%;
        background-color: #fff;
    }

    .tcs-signout-btn {
        border-left: none;
        padding: 0.25rem 0.5rem;
        align-self: flex-start;
    }

    .navbar-nav .nav-link.active {
        border-left: 2px solid var(--tcs-accent);
        padding-left: calc(0.625rem - 2px);
    }
}

/* Dropdown menus */
.dropdown-menu {
    border-color: var(--tcs-border);
    box-shadow: var(--tcs-shadow-raised);
    border-radius: var(--tcs-radius);
    padding-block: 0.375rem;
}

.dropdown-item {
    font-size: var(--tcs-fs-md);
    font-weight: 500;
    color: var(--tcs-text-body);
    padding-block: 0.375rem;

    &:hover,
    &:focus {
        background-color: var(--tcs-surface);
        color: var(--tcs-text);
    }
}

/* Left-aligned; the 44px line-height set in the layout's scoped CSS
   centres the single line vertically. */
.footer {
    font-size: var(--tcs-fs-sm);
    font-weight: 400;
    color: var(--tcs-text-muted);

    a {
        color: var(--tcs-text-muted);
        text-decoration: none;

        &:hover {
            color: var(--tcs-text-body);
            text-decoration: underline;
        }
    }
}

/* ── 4. Forms & validation ───────────────────────────────── */

label.required::after {
    content: "*";
    color: var(--tcs-danger);
    margin-left: 0.25rem;
}

.field-validation-valid {
    font-size: smaller;
    margin-left: 1em;
    height: 1.2rem;
}

/* Read-only display field styled like an input (pair with .k-textbox) */
.k-textbox.tcs-readonly-field {
    background: var(--tcs-surface);
    cursor: default;
}

/* ── 5. Shared components ────────────────────────────────── */

/* Toolbar / filter bar - a bordered strip of related controls (filters,
   pagers, import forms). Labelled Kendo inputs stack their label on top. */
.tcs-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--tcs-border);
    border-radius: var(--tcs-radius);
    background-color: var(--tcs-surface);

    .k-label {
        display: block;
    }
}

/* Application table */
.tcs-table {
    width: 100%;
    border-collapse: collapse;

    th {
        background-color: var(--tcs-surface);
        font-weight: 600;
        font-size: var(--tcs-fs-sm);
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: var(--tcs-text-muted);
        padding: 0.625rem 1rem;
        border-bottom: 1px solid var(--tcs-border);
        text-align: left;
        white-space: nowrap;
    }

    td {
        padding: 0.75rem 1rem;
        border-bottom: 1px solid var(--tcs-border);
        vertical-align: middle;
    }

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

    tbody tr:hover {
        background-color: var(--tcs-surface);
    }
}

/* Estimated costs table */
.tcs-costs-table {
    width: 100%;
    border-collapse: collapse;

    th {
        background-color: var(--tcs-surface);
        font-size: var(--tcs-fs-sm);
        font-weight: 600;
        text-align: left;
        padding: 0.5rem 0.75rem;
        border-bottom: 1px solid var(--tcs-border);
    }

    td {
        padding: 0.375rem 0.75rem;
        border-bottom: 1px solid var(--tcs-border);
        vertical-align: middle;
    }

    tr.costs-total td {
        font-weight: 600;
        border-top: 2px solid var(--tcs-border);
        border-bottom: none;
    }
}

/* Status tags. For workflow statuses and approver decisions, render via the
   <status-tag status="..."/> / <status-tag decision="..."/> tag helper - it owns
   the label/variant mapping. Use the classes directly only for literal labels
   (e.g. document "Provided", department "Not in StaffLink"). The dot and the
   current-colour border keep the variants distinguishable even when colour
   reproduction is poor (projectors, video streams). */
.tcs-status {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.1875rem 0.625rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
    font-size: var(--tcs-fs-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;

    &::before {
        content: "";
        width: 0.4375rem;
        height: 0.4375rem;
        border-radius: 50%;
        background-color: currentColor;
        flex-shrink: 0;
    }

    &.tcs-status-draft,
    &.tcs-status-neutral {
        background-color: var(--tcs-surface-strong);
        color: var(--tcs-text-muted);
    }

    &.tcs-status-pending,
    &.tcs-status-orphaned {
        background-color: var(--tcs-warning-subtle);
        color: var(--tcs-warning-text);
    }

    /* Informational events (e.g. "Submitted" in the activity timeline) */
    &.tcs-status-info {
        background-color: var(--tcs-accent-subtle);
        color: var(--tcs-accent-text);
    }

    &.tcs-status-approved {
        background-color: var(--tcs-success-subtle);
        color: var(--tcs-success-text);
    }

    &.tcs-status-rejected,
    &.tcs-status-withdrawn {
        background-color: var(--tcs-danger-subtle);
        color: var(--tcs-danger-text);
    }
}

/* Application type label rendered as a Kendo badge next to the page title */
.k-badge.tcs-type-badge {
    padding: 0.375rem 0.75rem;
    font-size: var(--tcs-fs-md);
}

/* Friendly empty state - render via the _EmptyState partial */
.tcs-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 2.5rem 1rem;
    text-align: center;

    p {
        margin: 0;
        color: var(--tcs-text-muted);
        max-width: 44ch;
    }
}

.tcs-empty-state-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background-color: var(--tcs-accent-subtle);
    color: var(--tcs-accent);
}

/* Activity timeline (ActivityTimeline component) - human comments with avatar
   chips, workflow events as quiet system lines between them. */
.tcs-timeline {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.tcs-timeline-comment {
    display: flex;
    gap: 0.625rem;
    align-items: flex-start;

    .tcs-avatar {
        margin-top: 0.125rem;
    }

    small {
        margin-left: 0.375rem;
    }

    p {
        overflow-wrap: anywhere;
    }
}

/* System lines read at body size and colour, semibold so events carry weight -
   the status tag names the verb; only the timestamp is small and muted. */
.tcs-timeline-event {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;

    > span:not(.tcs-status) {
        font-weight: 600;
    }

    small {
        color: var(--tcs-text-muted);
        font-weight: 400;
    }
}

/* Stat tile - headline figure with an uppercase caption (wizard totals).
   Pair with .k-card for the bordered card chrome. */
.tcs-stat {
    text-align: center;
    padding: 1rem;

    .tcs-stat-label {
        font-size: var(--tcs-fs-xs);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--tcs-text-muted);
    }

    .tcs-stat-value {
        font-size: 1.5rem;
        font-weight: 700;
    }
}

/* Stat-tile tones - one per tile, so a single-class selector owns both fill and figure colour
   without a specificity fight with the page's grid rules. Info = neutral (accent figure); warning
   and danger tint the risk tiles. */
.tcs-stat-info {
    background-color: var(--tcs-surface);

    .tcs-stat-value {
        color: var(--tcs-accent);
    }
}

.tcs-stat-warning {
    background-color: var(--tcs-warning-subtle);

    .tcs-stat-value {
        color: var(--tcs-warning-text);
    }
}

.tcs-stat-danger {
    background-color: var(--tcs-danger-subtle);

    .tcs-stat-value {
        color: var(--tcs-danger-text);
    }
}

/* Small info affordance next to a label; an inline SVG (the Kendo icon font is subsetted and
   doesn't include info-circle). The SVG inherits this colour via fill: currentColor. */
.tcs-info {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--tcs-border-strong);
    cursor: help;
}

.tcs-info:hover,
.tcs-info:focus-visible {
    color: var(--tcs-text-muted);
}

/* Approval stepper (_ApprovalPath). The active colour is themed per outcome:
   blue while in flight, green when approved, red when rejected, muted when
   withdrawn. `is-terminal` marks the step a rejected/withdrawn app stopped at. */
.tcs-stepper {
    --stepper-color: var(--tcs-accent);

    display: flex;
    align-items: flex-start;
    list-style: none;
    margin: 0;
    padding: 0;

    &.tcs-stepper-approved {
        --stepper-color: var(--tcs-success);
    }

    &.tcs-stepper-rejected {
        --stepper-color: var(--tcs-danger);
    }

    &.tcs-stepper-withdrawn {
        --stepper-color: var(--tcs-text-muted);
    }
}

.tcs-step {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 0;
    padding: 0 0.375rem;

    /* Connector to the previous step, drawn behind the node. */
    &::before {
        content: "";
        position: absolute;
        top: calc(1rem - 1px);
        right: 50%;
        width: 100%;
        height: 2px;
        background-color: var(--tcs-border);
    }

    &:first-child::before {
        content: none;
    }

    /* A step is reached once it is done, current, or terminal, so its incoming
       connector is "travelled". */
    &.is-done::before,
    &.is-current::before,
    &.is-terminal::before {
        background-color: var(--stepper-color);
    }
}

.tcs-step-node {
    position: relative;
    /* Paint above the connector ::before of the following step, which is later in the DOM. */
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: #fff;
    border: 1px solid var(--tcs-border);
    color: var(--tcs-text-muted);
    font-size: var(--tcs-fs-md);
    font-weight: 600;
    font-variant-numeric: tabular-nums;

    .tcs-step.is-done &,
    .tcs-step.is-terminal & {
        background-color: var(--stepper-color);
        border-color: var(--stepper-color);
        color: #fff;
    }

    .tcs-step.is-current & {
        border: 2px solid var(--stepper-color);
        color: var(--stepper-color);
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--stepper-color) 12%, transparent);
    }
}

.tcs-step-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 0.5rem;
    min-width: 0;
}

.tcs-step-label {
    font-size: var(--tcs-fs-lg);
    font-weight: 500;
    color: var(--tcs-text-muted);
    line-height: 1.3;

    .tcs-step.is-done & {
        color: var(--tcs-text-body);
    }

    .tcs-step.is-current &,
    .tcs-step.is-terminal & {
        color: var(--tcs-text);
        font-weight: 600;
    }

    /* Wizard steps are navigable links; keep them on the label's colour. */
    a {
        color: inherit;
        text-decoration: none;

        &:hover,
        &:focus {
            color: var(--tcs-accent);
            text-decoration: underline;
        }
    }
}

.tcs-step-approvers {
    margin-top: 0.125rem;
    font-size: var(--tcs-fs-md);
    color: var(--tcs-text-muted);
    line-height: 1.35;
    overflow-wrap: anywhere;

    .tcs-step.is-current & {
        color: var(--tcs-text-body);
    }
}

/* Vertical layout on narrow screens: node + connector on the left, text on the right. */
@media (max-width: 575.98px) {
    .tcs-stepper {
        flex-direction: column;
        gap: 1.25rem;
    }

    .tcs-step {
        flex-direction: row;
        align-items: flex-start;
        text-align: left;
        padding: 0;

        &::before {
            top: -1.25rem;
            right: auto;
            left: calc(1rem - 1px);
            width: 2px;
            height: 1.25rem;
        }
    }

    .tcs-step-node {
        flex-shrink: 0;
    }

    .tcs-step-text {
        align-items: flex-start;
        margin-top: 0.3125rem;
        margin-left: 0.75rem;
    }
}

/* Read-only detail list (label / value pairs) */
.tcs-detail-list {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.5rem 1.5rem;
    margin: 0;
}

.tcs-detail-list dt {
    color: var(--tcs-text-muted);
    font-weight: 500;
}

.tcs-detail-list dd {
    margin: 0;
}

@media (max-width: 575.98px) {
    .tcs-detail-list {
        grid-template-columns: 1fr;
        gap: 0.125rem 0;
    }

    .tcs-detail-list dd {
        margin-bottom: 0.5rem;
    }
}

/* Wizard form section card */
.tcs-form-section {
    border: 1px solid var(--tcs-border);
    border-radius: var(--tcs-radius);
    margin-bottom: 1.5rem;

    .tcs-form-section-header {
        background-color: var(--tcs-surface);
        padding: 0.75rem 1rem;
        border-bottom: 1px solid var(--tcs-border);
        border-radius: var(--tcs-radius) var(--tcs-radius) 0 0;

        h2 {
            margin: 0;
        }
    }

    .tcs-form-section-body {
        padding: 1.25rem 1rem;
    }
}

/* Document rows */
.tcs-doc-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;
    align-items: start;
    padding: 0.875rem 0;
    border-bottom: 1px solid var(--tcs-border);

    &:last-child {
        border-bottom: none;
    }

    .doc-label {
        font-weight: 500;
        padding-top: 0.25rem;

        small {
            display: block;
            font-weight: 400;
            color: var(--tcs-text-muted);
            margin-top: 0.125rem;
        }
    }

    .doc-actions {
        display: flex;
        gap: 0.5rem;
        align-items: center;
        flex-wrap: wrap;
        justify-content: flex-end;
    }
}

/* Destructive flat buttons (delete / abandon) */
.k-button-flat.tcs-btn-danger {
    color: var(--tcs-danger);
}

.k-button-flat.tcs-btn-danger:hover {
    color: var(--tcs-danger-hover);
    background-color: color-mix(in srgb, var(--tcs-danger) 8%, transparent);
}

/* Workflow decision buttons: semantic colour coding. Set explicitly from TCS
   status tokens rather than relying on the Kendo theme's success/warning/error
   button swatches, which don't render in this theme build. */
.tcs-btn-approve,
.tcs-btn-return,
.tcs-btn-reject {
    background-image: none;
    color: #fff !important;
}

.tcs-btn-approve {
    background-color: var(--tcs-success) !important;
    border-color: var(--tcs-success) !important;
}

.tcs-btn-reject {
    background-color: var(--tcs-danger) !important;
    border-color: var(--tcs-danger) !important;
}

.tcs-btn-return {
    background-color: var(--tcs-warning) !important;
    border-color: var(--tcs-warning) !important;
    color: var(--tcs-text) !important;
}

.tcs-btn-approve:hover,
.tcs-btn-return:hover,
.tcs-btn-reject:hover {
    filter: brightness(0.93);
}

/* Diary per-row comment button: latest comment is from someone else → a reply is needed. */
.tcs-comment-needsreply {
    background-color: var(--tcs-warning) !important;
    border-color: var(--tcs-warning) !important;
    color: var(--tcs-text) !important;
}

/* ── 6. Kendo overrides ──────────────────────────────────── */

/* Kendo colour bridge. Theme 13 exposes its whole colour system as
   --kendo-color-* custom properties and every widget rule consumes them, so
   overriding the variables here rethemes ALL Kendo components (buttons, grids,
   messageboxes, dialogs, notifications) with the TCS palette - no SCSS theme
   build required. All shades are picked from the five palette ramps. */
:root {
    --kendo-color-primary:           var(--tcs-accent);
    --kendo-color-primary-hover:     var(--tcs-accent-hover);
    --kendo-color-primary-active:    #0c4a6e; /* Sky 900 */
    --kendo-color-primary-emphasis:  var(--tcs-accent-hover);
    --kendo-color-primary-subtle:    var(--tcs-accent-subtle);
    --kendo-color-primary-on-subtle: var(--tcs-accent-text);
    --kendo-color-on-primary:        #fff;

    --kendo-color-error:           var(--tcs-danger);
    --kendo-color-error-hover:     var(--tcs-danger-hover);
    --kendo-color-error-active:    #7f1d1d; /* Red 900 */
    --kendo-color-error-emphasis:  var(--tcs-danger-hover);
    --kendo-color-error-subtle:    var(--tcs-danger-subtle);
    --kendo-color-error-on-subtle: var(--tcs-danger-text);
    --kendo-color-on-error:        #fff;

    --kendo-color-success:           var(--tcs-success);
    --kendo-color-success-hover:     #166534; /* Green 800 */
    --kendo-color-success-active:    #14532d; /* Green 900 */
    --kendo-color-success-emphasis:  var(--tcs-success-text);
    --kendo-color-success-subtle:    var(--tcs-success-subtle);
    --kendo-color-success-on-subtle: var(--tcs-success-text);
    --kendo-color-on-success:        #fff;

    --kendo-color-warning:           var(--tcs-warning);
    --kendo-color-warning-hover:     #d97706; /* Amber 600 */
    --kendo-color-warning-active:    #b45309; /* Amber 700 */
    --kendo-color-warning-emphasis:  var(--tcs-warning-text);
    --kendo-color-warning-subtle:    var(--tcs-warning-subtle);
    --kendo-color-warning-on-subtle: var(--tcs-warning-text);
    --kendo-color-on-warning:        var(--tcs-text);

    /* Informational maps to the accent (Sky) family per the palette language */
    --kendo-color-info:           var(--tcs-accent);
    --kendo-color-info-hover:     var(--tcs-accent-hover);
    --kendo-color-info-active:    #0c4a6e; /* Sky 900 */
    --kendo-color-info-emphasis:  var(--tcs-accent-hover);
    --kendo-color-info-subtle:    var(--tcs-accent-subtle);
    --kendo-color-info-on-subtle: var(--tcs-accent-text);
    --kendo-color-on-info:        #fff;

    /* Borders: keep Kendo widgets (grids, inputs) on the TCS border tones */
    --kendo-color-border:     var(--tcs-border);
    --kendo-color-border-alt: var(--tcs-border-strong);
}

/* Cards - mirror the .tcs-form-section chrome exactly, so dashboard panels
   and application form sections read as one visual system. */
.k-card {
    border: 1px solid var(--tcs-border);
    border-radius: var(--tcs-radius);
    box-shadow: none;
}

.k-card-header {
    background-color: var(--tcs-surface);
    border-bottom: 1px solid var(--tcs-border);
    border-radius: var(--tcs-radius) var(--tcs-radius) 0 0;
    padding: 0.75rem 1rem;

    h1, h2, h3, h4, h5, h6 {
        margin: 0;
    }
}

.k-card-body {
    padding: 1.25rem 1rem;
}

/* Diary grid: the comment button drives expand/collapse, so hide Kendo's own hierarchy column.
   Read-only diaries (Review/View) hide the Add Day toolbar. Keyed on the .tcs-diary-grid class so
   the rules apply to every per-destination grid instance, not a single id. */
.tcs-diary-grid .k-hierarchy-cell,
.tcs-diary-grid .k-hierarchy-col {
    display: none;
}

.tcs-diary-grid.tcs-diary-readonly .k-grid-toolbar {
    display: none;
}

/* Diary grid: icon-only row action buttons */
.tcs-diary-actions {
    white-space: nowrap;

    .k-button-text {
        display: none;
    }

    /* Flat, neutral icon buttons - overrides Kendo's default primary (blue) edit button
       so the row actions stay consistent with the site theme. */
    .k-button {
        padding-inline: 0.5rem;
        background: transparent;
        background-image: none;
        border-color: transparent;
        color: var(--tcs-text-muted);
        box-shadow: none;
    }

    .k-button:hover {
        background: var(--tcs-surface);
        color: var(--tcs-accent);
    }
}

/* Grids hosted flush inside a section card (.tcs-form-section-body.p-0, e.g. the
   read-only travel diary on the review page) follow the same pattern as flush
   .tcs-table tables: the card draws the chrome, so the grid drops its own outer
   border (no double frame) and clips to the card's bottom corners. */
.tcs-form-section-body.p-0 .k-grid {
    border-width: 0;
    border-radius: 0 0 var(--tcs-radius) var(--tcs-radius);
    overflow: hidden;
}

/* StaffLink employee picker - rich dropdown items: brand avatar chip beside the
   name over a muted employee number. Kendo wraps the item template in a non-flex
   .k-list-item-text span, so the template provides its own flex row (.tcs-picker-item).
   Only the user-selection picker uses this. */
.tcs-picker-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.tcs-picker-text {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    gap: 0.0625rem;
    line-height: 1.3;
}

.tcs-picker-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--tcs-text-body);
}

.tcs-picker-number {
    font-size: var(--tcs-fs-md);
    color: var(--tcs-text-muted);
}

/* Collapsed (selected) value - same chip + name + number language as the list items,
   but on a single line so the control keeps its standard input height. */
.tcs-picker-value {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

/* Name and number share a text baseline; the chip stays centred against this group. */
.tcs-picker-value-text {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    min-width: 0;
}

.tcs-picker-value-name {
    font-weight: 600;
    color: var(--tcs-text-body);
    overflow: hidden;
    text-overflow: ellipsis;
}

.tcs-picker-value-number {
    font-size: var(--tcs-fs-md);
    color: var(--tcs-text-muted);
}

/* Kendo wraps the item template in a display:block .k-list-item-text, which adds a
   phantom line-height strut above our flex content and inflates the row height. Make
   the wrapper hug the content. Scoped to the employee picker popup. */
.tcs-employee-picker .k-list-item-text {
    display: flex;
    align-items: center;
}

/* A touch more vertical rhythm per row. */
.tcs-employee-picker .k-list-item {
    padding-block: 0.5rem;
}

/* On the selected row Kendo paints a dark accent background and switches its text to
   white, but our explicit name/number colours override that and go dark-on-dark.
   Inherit the row colour so they invert to white on selection. */
.tcs-employee-picker .k-list-item.k-selected .tcs-picker-name,
.tcs-employee-picker .k-list-item.k-selected .tcs-picker-number {
    color: inherit;
}

/* The "Select employee..." option-label row is redundant with the control's own
   placeholder, so hide it in the employee picker popup (scoped via the marker class
   added in tcs.employeePickerOpen). The closed control keeps its placeholder text. */
.tcs-employee-picker .k-list-optionlabel {
    display: none;
}

/* Toast notifications - bind to TCS design tokens.
   Kendo sets --kendo-font-family to the Bootstrap system-font stack and uses
   --kendo-border-radius-md (0.375rem) and --kendo-elevation-4 (heavier shadow);
   override directly on the element so only notifications are affected. */
.k-notification {
    font-family: 'Public Sans', system-ui, sans-serif;
    border-radius: var(--tcs-radius);
    box-shadow: var(--tcs-shadow-raised);
    min-width: 18rem;
    max-width: 26rem;
}

/* Gap between stacked toast notifications.
   Kendo positions each new popup by anchoring its top edge to the bottom edge
   of the previous wrapper's bounding rect. padding-bottom on the wrapper is
   included in that rect, so it becomes the visual gap between toasts. Scoped
   with :has(.k-notification) so dropdowns and tooltips are unaffected. */
.k-animation-container:has(.k-notification) {
    padding-bottom: 0.5rem;
}

/* ── 7. Page-specific ────────────────────────────────────── */

/* Dashboard balances */
#balances-table {
    width: 100%;

    td {
        padding-inline: 1rem;
        padding-block: 0.5rem;
    }

    tr:nth-child(even) {
        background-color: var(--tcs-surface);
    }
}

/* Policy hints */
.tcs-policy {
    li {
        padding-block: 0.5em;
    }
}

/* Department workflow configuration */

/* A saved department that no longer appears in current StaffLink data. */
.tcs-table tbody tr.tcs-row-orphaned,
.tcs-table tbody tr.tcs-row-orphaned:hover {
    background-color: var(--tcs-warning-faint);
}

/* Fixed layout stops a column from growing to fit a long selected nominee value - the
   picker ellipsizes within its cell instead. Widths on the header cells govern all rows. */
.tcs-dept-table {
    table-layout: fixed;
    min-width: 1100px;
}

.tcs-dept-table .tcs-dept-picker-cell {
    width: 20%;
}

.tcs-dept-table .tcs-dept-actions-cell {
    width: 90px;
}

/* Development sign-in (dev/idp/sso) - a centred card crowned with the brand
   ribbon. Sits inside the standard chrome (navbar + footer ribbon). */
.tcs-auth {
    display: flex;
    justify-content: center;
    padding-block: 3rem 2rem;
}

.tcs-auth-card {
    width: 100%;
    max-width: 26rem;
    background-color: #fff;
    border: 1px solid var(--tcs-border);
    border-radius: var(--tcs-radius);
    box-shadow: var(--tcs-shadow-raised);
    overflow: hidden;            /* clip the ribbon crown to the top corners */
}

.tcs-auth-body {
    padding: 2rem 1.75rem;
}

/* Heading block centres to echo the centred navbar brand. */
.tcs-auth-title {
    text-align: center;
    margin-bottom: 0.25rem;

    h1 {
        margin: 0;
    }
}

/* Matches the sitewide page-subtitle treatment (.tcs-page-header p): prominent
   body size, muted, centred under the heading. */
.tcs-auth-subtitle {
    text-align: center;
    font-size: var(--tcs-fs-lg);
    color: var(--tcs-text-muted);
}