/* ===========================================================================
   MECHANIST enrol portal — admin design system
   ---------------------------------------------------------------------------
   One stylesheet shared by every admin page (linked from admin_header.php).
   Deliberately light-mode only: the pages carry a lot of inline colour that a
   dark theme would fight, so a half-working dark mode would look worse than none.

   Brand colour is injected from $config['branding'] by admin_header.php, which
   overrides --brand / --brand-light below. Legacy --primary / --card-bg aliases
   are kept at the bottom so existing inline styles keep working.
   =========================================================================== */

:root {
    --brand: #F04664;
    --brand-light: #FF7070;
    --brand-ink: #C22F49;
    --brand-wash: #FEF2F4;

    /* Neutrals carry a slight warm bias so they sit with the coral rather than
       looking like grey stuck next to red. */
    --bg: #F7F5F6;
    --surface: #FFFFFF;
    --surface-2: #FAF8F9;
    --border: #E9E3E5;
    --border-strong: #D6CDD0;
    --text: #1E1A1C;
    --muted: #6B5F64;
    --faint: #92868B;

    --ok: #1B8A54;      --ok-bg: #E7F5EE;      --ok-border: #BFE3D0;
    --warn: #A2660A;    --warn-bg: #FDF4E3;    --warn-border: #EDD6A8;
    --danger: #C6283C;  --danger-bg: #FDECEE;  --danger-border: #F3C6CC;
    --info: #24619E;    --info-bg: #EAF1FA;    --info-border: #C6DAF0;

    --radius: 10px;
    --radius-lg: 14px;
    --radius-pill: 999px;

    --shadow-sm: 0 1px 2px rgba(30, 26, 28, .05);
    --shadow: 0 1px 3px rgba(30, 26, 28, .05), 0 10px 26px rgba(30, 26, 28, .06);

    --font: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
    --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------- Top bar */

.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}
.topbar-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 26px;
    min-height: 62px;
    flex-wrap: wrap;
}
.brand {
    display: flex;
    align-items: baseline;
    gap: 9px;
    text-decoration: none;
    color: var(--text);
    white-space: nowrap;
}
.brand-mark {
    font-weight: 800;
    font-size: 19px;
    letter-spacing: -.02em;
    color: var(--brand);
}
.brand-sub {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--faint);
}

.nav { display: flex; gap: 2px; flex-wrap: wrap; margin-right: auto; }
.nav a {
    display: block;
    padding: 7px 13px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--muted);
    text-decoration: none;
    white-space: nowrap;
    transition: background .13s, color .13s;
}
.nav a:hover { background: var(--surface-2); color: var(--text); }
.nav a.active { background: var(--brand-wash); color: var(--brand-ink); font-weight: 600; }

.userchip {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--muted);
    white-space: nowrap;
}
.userchip .avatar {
    width: 30px; height: 30px;
    border-radius: var(--radius-pill);
    background: var(--brand-wash);
    color: var(--brand-ink);
    display: grid; place-items: center;
    font-weight: 700; font-size: 12px;
    border: 1px solid var(--border);
}
.userchip .logout {
    color: var(--faint);
    text-decoration: none;
    font-weight: 500;
    padding: 5px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    transition: color .13s, border-color .13s;
}
.userchip .logout:hover { color: var(--danger); border-color: var(--danger-border); }

/* -------------------------------------------------------------- Structure */

.container { max-width: 1200px; margin: 32px auto 64px; padding: 0 24px; }

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px 26px;
    margin-bottom: 22px;
    box-shadow: var(--shadow-sm);
}
.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }

h1, h2, h3, h4 { letter-spacing: -.015em; text-wrap: balance; }
.card h2 {
    font-size: 19px;
    font-weight: 700;
    margin: 0 0 18px;
    padding-bottom: 13px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
}
.card h3 { font-size: 15.5px; font-weight: 700; margin: 0 0 12px; color: var(--text); }

/* ------------------------------------------------------------------ Forms */

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 16px;
    align-items: end;
}
.form-group { display: flex; flex-direction: column; gap: 6px; }

label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--muted);
    letter-spacing: .01em;
}

input, select, textarea {
    font-family: var(--font);
    font-size: 14.5px;
    color: var(--text);
    background: var(--surface);
    padding: 9px 12px;
    border: 1px solid var(--border-strong);
    border-radius: 9px;
    transition: border-color .13s, box-shadow .13s;
    width: 100%;
}
textarea { line-height: 1.6; resize: vertical; }
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(240, 70, 100, .16);
}
input[type="checkbox"], input[type="radio"] { width: auto; accent-color: var(--brand); }
input::placeholder, textarea::placeholder { color: var(--faint); }

/* ---------------------------------------------------------------- Buttons */

button, .btn {
    display: inline-block;
    font-family: var(--font);
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: var(--brand);
    border: 1px solid transparent;
    border-radius: 9px;
    padding: 9px 17px;
    cursor: pointer;
    text-decoration: none;
    line-height: 1.4;
    transition: background .13s, box-shadow .13s, transform .06s;
}
button:hover, .btn:hover { background: var(--brand-light); }
button:active, .btn:active { transform: translateY(1px); }
button:focus-visible, .btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(240, 70, 100, .3);
}
button.secondary, .btn.secondary {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border-strong);
}
button.secondary:hover, .btn.secondary:hover { background: var(--surface-2); }

.action-link {
    color: var(--brand-ink);
    text-decoration: none;
    font-weight: 600;
    font-size: 13.5px;
}
.action-link:hover { text-decoration: underline; }

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

.table-wrap { overflow-x: auto; border-radius: var(--radius); }

table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 14px; }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--border); }
th {
    background: var(--surface-2);
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    white-space: nowrap;
    border-bottom: 1px solid var(--border);
}
tbody tr { transition: background .1s; }
tbody tr:hover { background: var(--surface-2); }
tbody tr:last-child td { border-bottom: none; }
td { vertical-align: middle; font-variant-numeric: tabular-nums; }

/* Unit codes / IDs read better monospaced and line up in a column. */
.mono, .unit-code, code { font-family: var(--mono); font-size: .92em; }

/* ----------------------------------------------------------------- Badges */

.badge {
    display: inline-block;
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .02em;
    color: #fff;
    background: var(--faint);
    white-space: nowrap;
}
.badge.active   { background: var(--ok); }
.badge.inactive { background: var(--danger); }
.badge.type-vic { background: #2F6FBF; }
.badge.type-nsw { background: #1B8FA5; }
.badge.type-vetis { background: #6F42C1; }

/* Soft status chips — quieter than a solid badge, for at-a-glance state. */
.chip {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 600;
    border: 1px solid;
}
.chip.ok     { color: var(--ok);     background: var(--ok-bg);     border-color: var(--ok-border); }
.chip.warn   { color: var(--warn);   background: var(--warn-bg);   border-color: var(--warn-border); }
.chip.danger { color: var(--danger); background: var(--danger-bg); border-color: var(--danger-border); }
.chip.info   { color: var(--info);   background: var(--info-bg);   border-color: var(--info-border); }

/* ---------------------------------------------------------------- Notices */

.notice {
    border: 1px solid;
    border-left-width: 4px;
    border-radius: var(--radius);
    padding: 13px 16px;
    margin-bottom: 20px;
    font-size: 14.5px;
}
.notice.ok     { background: var(--ok-bg);     border-color: var(--ok-border);     border-left-color: var(--ok); }
.notice.warn   { background: var(--warn-bg);   border-color: var(--warn-border);   border-left-color: var(--warn); }
.notice.danger { background: var(--danger-bg); border-color: var(--danger-border); border-left-color: var(--danger); }
.notice.info   { background: var(--info-bg);   border-color: var(--info-border);   border-left-color: var(--info); }

.empty { text-align: center; color: var(--faint); padding: 26px 10px; font-size: 14px; }

/* ------------------------------------------------------------ Responsive */

@media (max-width: 780px) {
    .topbar-inner { padding: 10px 16px; gap: 12px; }
    .nav { order: 3; width: 100%; margin-right: 0; }
    .container { padding: 0 16px; margin-top: 22px; }
    .card { padding: 19px 17px; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}

/* --------------------------------------------------- Back-compat aliases --
   Existing pages reference these variables inline (e.g. var(--primary)).
   --card-bg was previously referenced by .card but never defined, so cards
   rendered with no background at all; defining it here fixes that. */
:root {
    --primary: var(--brand);
    --primary-light: var(--brand-light);
    --bg-color: var(--bg);
    --text-dark: var(--text);
    --card-bg: var(--surface);
}