/* =====================================================================
   CAMHS - Application stylesheet

   A single stylesheet for the whole system. Every page draws its
   layout, tables, forms, buttons and feedback from the definitions
   below, so consistency is structural rather than maintained by hand.

   Organised as: tokens, reset, layout, components, utilities,
   responsive.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Design tokens
   --------------------------------------------------------------------- */
:root {
    /* Palette. Restrained and clinical: colour is used to convey
       status, not for decoration. */
    --colour-brand:          #005eb8;
    --colour-brand-dark:     #003d78;
    --colour-brand-light:    #e6f0f9;

    --colour-ink:            #1a1a1a;
    --colour-ink-muted:      #5a5f66;
    --colour-ink-faint:      #7d838b;

    --colour-surface:        #ffffff;
    --colour-canvas:         #f4f6f8;
    --colour-border:         #d5dae0;
    --colour-border-strong:  #b4bcc5;

    --colour-header:         #10233d;
    --colour-header-ink:     #ffffff;

    /* Status colours. Each has a tint for backgrounds and a strong
       tone for text, so that badges stay legible. */
    --colour-success:        #00703c;
    --colour-success-tint:   #e3f2ea;
    --colour-warning:        #8a5a00;
    --colour-warning-tint:   #fdf3e2;
    --colour-danger:         #b40e20;
    --colour-danger-tint:    #fbe9eb;
    --colour-info:           #005eb8;
    --colour-info-tint:      #e6f0f9;
    --colour-neutral:        #4c5257;
    --colour-neutral-tint:   #eceff1;

    /* Spacing scale */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;

    /* Typography */
    --font-body: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
    --font-mono: "Cascadia Mono", Consolas, "Courier New", monospace;

    --size-xs:   0.75rem;
    --size-sm:   0.8125rem;
    --size-base: 0.9375rem;
    --size-md:   1.0625rem;
    --size-lg:   1.375rem;
    --size-xl:   1.75rem;
    --size-xxl:  2.25rem;

    /* Shape and depth */
    --radius-sm: 3px;
    --radius:    6px;
    --radius-lg: 10px;

    --shadow-sm: 0 1px 2px rgba(16, 35, 61, 0.08);
    --shadow:    0 2px 6px rgba(16, 35, 61, 0.10);
    --shadow-lg: 0 8px 24px rgba(16, 35, 61, 0.16);

    --focus-ring: 0 0 0 3px #ffdd00, 0 0 0 5px var(--colour-ink);
}

/* ---------------------------------------------------------------------
   Reset
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--size-base);
    line-height: 1.5;
    color: var(--colour-ink);
    background: var(--colour-canvas);
}

h1, h2, h3, h4 { margin: 0 0 var(--space-3); line-height: 1.25; font-weight: 600; }
h1 { font-size: var(--size-xl); }
h2 { font-size: var(--size-lg); }
h3 { font-size: var(--size-md); }
h4 { font-size: var(--size-base); }

p { margin: 0 0 var(--space-3); }
ul, ol { margin: 0 0 var(--space-3); padding-left: var(--space-5); }

a { color: var(--colour-brand); }
a:hover { color: var(--colour-brand-dark); }

img { max-width: 100%; height: auto; }

:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

/* ---------------------------------------------------------------------
   Application shell
   --------------------------------------------------------------------- */
.app-header {
    background: var(--colour-header);
    color: var(--colour-header-ink);
    padding: var(--space-3) var(--space-5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.app-brand { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; color: inherit; }
.app-brand img { height: 34px; width: auto; }
.app-brand__name { font-size: var(--size-md); font-weight: 700; letter-spacing: 0.02em; }
.app-brand__sub { display: block; font-size: var(--size-xs); font-weight: 400; opacity: 0.75; letter-spacing: 0; }

.app-nav { background: var(--colour-brand-dark); padding: 0 var(--space-5); }
.app-nav ul { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; gap: var(--space-1); }
.app-nav a {
    display: block;
    padding: var(--space-3) var(--space-4);
    color: #ffffff;
    text-decoration: none;
    font-size: var(--size-sm);
    font-weight: 500;
    border-bottom: 3px solid transparent;
}
.app-nav a:hover { background: rgba(255, 255, 255, 0.10); color: #ffffff; }
.app-nav a[aria-current="page"] { border-bottom-color: #ffdd00; background: rgba(255, 255, 255, 0.08); font-weight: 600; }

.app-main { max-width: 1280px; margin: 0 auto; padding: var(--space-5); }

.app-footer {
    max-width: 1280px;
    margin: 0 auto;
    padding: var(--space-5);
    color: var(--colour-ink-muted);
    font-size: var(--size-sm);
    border-top: 1px solid var(--colour-border);
}

/* Page heading block. Every page opens with a title and one sentence
   stating its purpose, so the page's role is never ambiguous. */
.page-head { margin-bottom: var(--space-5); }
.page-head h1 { margin-bottom: var(--space-2); }
.page-head p { color: var(--colour-ink-muted); margin: 0; max-width: 68ch; }

/* ---------------------------------------------------------------------
   Cards and grids
   --------------------------------------------------------------------- */
.card {
    background: var(--colour-surface);
    border: 1px solid var(--colour-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: var(--space-5);
    margin-bottom: var(--space-5);
}
.card__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-4); }
.card__head h2, .card__head h3 { margin: 0; }
.card__hint { color: var(--colour-ink-muted); font-size: var(--size-sm); margin: 0; }

.grid { display: grid; gap: var(--space-4); }
.grid--stats  { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.grid--halves { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }

/* Statistic tile */
.stat {
    background: var(--colour-surface);
    border: 1px solid var(--colour-border);
    border-left: 4px solid var(--colour-brand);
    border-radius: var(--radius);
    padding: var(--space-4);
    box-shadow: var(--shadow-sm);
}
.stat__label { font-size: var(--size-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--colour-ink-muted); font-weight: 600; }
.stat__value { font-size: var(--size-xxl); font-weight: 700; line-height: 1.1; margin: var(--space-2) 0 0; font-variant-numeric: tabular-nums; }
.stat__note  { font-size: var(--size-sm); color: var(--colour-ink-muted); margin: var(--space-1) 0 0; }
.stat--danger  { border-left-color: var(--colour-danger); }
.stat--warning { border-left-color: var(--colour-warning); }
.stat--success { border-left-color: var(--colour-success); }

/* ---------------------------------------------------------------------
   Tables

   Wrapped in .table-wrap so wide tables scroll inside their own
   container rather than forcing the page to scroll sideways.
   --------------------------------------------------------------------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--colour-border); border-radius: var(--radius); background: var(--colour-surface); }

table { width: 100%; border-collapse: collapse; font-size: var(--size-sm); }

thead th {
    background: var(--colour-header);
    color: #ffffff;
    text-align: left;
    font-weight: 600;
    padding: var(--space-3) var(--space-4);
    white-space: nowrap;
    position: sticky;
    top: 0;
}

tbody td { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--colour-border); vertical-align: middle; }
tbody tr:nth-child(even) { background: #fafbfc; }
tbody tr:hover { background: var(--colour-brand-light); }

td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.actions { white-space: nowrap; text-align: right; }
td.actions .btn { margin-left: var(--space-2); }

.table-caption { font-size: var(--size-sm); color: var(--colour-ink-muted); margin: var(--space-3) 0 0; }

/* ---------------------------------------------------------------------
   Forms
   --------------------------------------------------------------------- */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); }
.field { display: flex; flex-direction: column; gap: var(--space-1); }
.field--wide { grid-column: 1 / -1; }

label { font-size: var(--size-sm); font-weight: 600; color: var(--colour-ink); }
.field__hint { font-size: var(--size-xs); color: var(--colour-ink-muted); }

input, select, textarea {
    font-family: inherit;
    font-size: var(--size-base);
    padding: var(--space-3);
    border: 1px solid var(--colour-border-strong);
    border-radius: var(--radius-sm);
    background: var(--colour-surface);
    color: var(--colour-ink);
    width: 100%;
}
textarea { min-height: 90px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; box-shadow: var(--focus-ring); border-color: var(--colour-brand); }

input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
    border-color: var(--colour-danger);
    border-width: 2px;
}

.field__error { font-size: var(--size-xs); color: var(--colour-danger); font-weight: 600; min-height: 1em; }

.required-marker { color: var(--colour-danger); font-weight: 700; }

.form-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-5); }

/* Filter bar for parameterised reports */
.filter-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: var(--space-4);
    align-items: end;
    padding: var(--space-4);
    background: var(--colour-brand-light);
    border: 1px solid var(--colour-border);
    border-radius: var(--radius);
    margin-bottom: var(--space-5);
}

/* ---------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-family: inherit;
    font-size: var(--size-sm);
    font-weight: 600;
    padding: var(--space-3) var(--space-4);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-decoration: none;
    line-height: 1.2;
}
.btn:disabled { opacity: 0.55; cursor: not-allowed; }

.btn--primary   { background: var(--colour-brand); color: #ffffff; }
.btn--primary:hover:not(:disabled) { background: var(--colour-brand-dark); color: #ffffff; }

.btn--secondary { background: var(--colour-surface); color: var(--colour-brand); border-color: var(--colour-brand); }
.btn--secondary:hover:not(:disabled) { background: var(--colour-brand-light); }

.btn--danger    { background: var(--colour-danger); color: #ffffff; }
.btn--danger:hover:not(:disabled) { background: #8f0b19; color: #ffffff; }

.btn--quiet     { background: transparent; color: var(--colour-ink-muted); border-color: var(--colour-border-strong); }
.btn--quiet:hover:not(:disabled) { background: var(--colour-neutral-tint); color: var(--colour-ink); }

.btn--sm { padding: var(--space-1) var(--space-3); font-size: var(--size-xs); }

/* ---------------------------------------------------------------------
   Status badges
   --------------------------------------------------------------------- */
.badge {
    display: inline-block;
    padding: 2px var(--space-3);
    border-radius: 999px;
    font-size: var(--size-xs);
    font-weight: 700;
    white-space: nowrap;
}
.badge--success { background: var(--colour-success-tint); color: var(--colour-success); }
.badge--warning { background: var(--colour-warning-tint); color: var(--colour-warning); }
.badge--danger  { background: var(--colour-danger-tint);  color: var(--colour-danger); }
.badge--info    { background: var(--colour-info-tint);    color: var(--colour-info); }
.badge--neutral { background: var(--colour-neutral-tint); color: var(--colour-neutral); }

/* ---------------------------------------------------------------------
   Feedback: toasts, inline messages, dialogs

   Toasts replace alert(). They announce through aria-live so that a
   screen reader hears the outcome without the focus being stolen.
   --------------------------------------------------------------------- */
.toast-region {
    position: fixed;
    right: var(--space-5);
    bottom: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    z-index: 1000;
    max-width: min(420px, calc(100vw - 2 * var(--space-5)));
}

.toast {
    background: var(--colour-surface);
    border-left: 4px solid var(--colour-info);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: var(--space-4);
    font-size: var(--size-sm);
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}
.toast--success { border-left-color: var(--colour-success); }
.toast--error   { border-left-color: var(--colour-danger); }
.toast--warning { border-left-color: var(--colour-warning); }
.toast__body    { flex: 1; }
.toast__title   { font-weight: 700; display: block; margin-bottom: 2px; }
.toast__close   { background: none; border: none; cursor: pointer; font-size: var(--size-md); color: var(--colour-ink-muted); padding: 0 var(--space-1); }

.notice { padding: var(--space-4); border-radius: var(--radius); border-left: 4px solid var(--colour-info); background: var(--colour-info-tint); font-size: var(--size-sm); margin-bottom: var(--space-4); }
.notice--error   { border-left-color: var(--colour-danger);  background: var(--colour-danger-tint); }
.notice--warning { border-left-color: var(--colour-warning); background: var(--colour-warning-tint); }
.notice--success { border-left-color: var(--colour-success); background: var(--colour-success-tint); }

/* Confirmation dialog, replacing confirm() */
.dialog-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(16, 35, 61, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-5);
    z-index: 1100;
}
.dialog {
    background: var(--colour-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    max-width: 520px;
    width: 100%;
    padding: var(--space-5);
}
.dialog h2 { margin-bottom: var(--space-3); }
.dialog__actions { display: flex; justify-content: flex-end; gap: var(--space-3); margin-top: var(--space-5); }
.dialog__consequence { font-size: var(--size-sm); }

/* States */
.state { padding: var(--space-6); text-align: center; color: var(--colour-ink-muted); }
.state__title { font-weight: 600; color: var(--colour-ink); display: block; margin-bottom: var(--space-1); }

.spinner {
    display: inline-block;
    width: 18px; height: 18px;
    border: 2px solid var(--colour-border-strong);
    border-top-color: var(--colour-brand);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    vertical-align: -3px;
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .spinner { animation-duration: 3s; }
    * { transition: none !important; }
}

/* ---------------------------------------------------------------------
   Charts
   --------------------------------------------------------------------- */
.chart-box { position: relative; height: 320px; }
.chart-box--tall { height: 420px; }

/* ---------------------------------------------------------------------
   Utilities
   --------------------------------------------------------------------- */
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.muted   { color: var(--colour-ink-muted); }
.small   { font-size: var(--size-sm); }
.mono    { font-family: var(--font-mono); }
.nowrap  { white-space: nowrap; }
.mt-0    { margin-top: 0; }
.mb-0    { margin-bottom: 0; }
.row-gap { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }
.push-right { margin-left: auto; }

/* ---------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------- */
@media (max-width: 720px) {
    .app-header { padding: var(--space-3) var(--space-4); }
    .app-nav { padding: 0 var(--space-2); }
    .app-nav a { padding: var(--space-3); }
    .app-main { padding: var(--space-4); }
    .card { padding: var(--space-4); }
    .stat__value { font-size: var(--size-xl); }
    .form-actions .btn { flex: 1 1 auto; }
    thead th { position: static; }
}

@media print {
    .app-nav, .form-actions, .filter-bar, .toast-region, td.actions, th.actions { display: none !important; }
    body { background: #ffffff; }
    .card { box-shadow: none; border: 1px solid #999; break-inside: avoid; }
}