/* == START Imports == */
/* 08 June 2026 - auth.css loaded on every page. Other CSS loaded per page via $extraCss. */
@import url('auth.css');
/* == END Imports == */

/* == START Light Theme Tokens == */
/* 08 June 2026 - Default theme is light. Dark overrides follow under [data-theme="dark"]. */
:root {
    /* Accent colours - identical in both themes */
    --colour-blue:          #04A3ED;
    --colour-blue-hover:    #28B8F7;
    --colour-blue-active:   #038AC9;

    --colour-purple:        #9425C4;
    --colour-purple-hover:  #B030E0;
    --colour-purple-active: #7A1EA3;

    --colour-orange:        #F26411;
    --colour-orange-hover:  #F57E36;
    --colour-orange-active: #CC500A;

    --colour-red:           #ED031E;
    --colour-red-hover:     #F52030;
    --colour-red-active:    #C30019;

    --colour-yellow:        #F7CA16;
    --colour-yellow-hover:  #F9D53F;
    --colour-yellow-active: #D4AC0E;

    --colour-green:         #74CE7F;
    --colour-turquoise:     #2DB5C4;
    --colour-light-green:   #D0F224;

    /* Light theme backgrounds */
    --bg-body:      #ffffff;
    --bg-surface:   #f8f9fa;
    --bg-elevated:  #f0f2f5;
    --bg-overlay:   #e8eaed;

    /* Light theme borders */
    --border:       #e4e7eb;
    --border-hover: #c0c7d0;

    /* Light theme text */
    --text-primary:   #111827;
    --text-secondary: #6b7280;
    --text-disabled:  #9ca3af;
    --text-inverse:   #f0f0f0;

    /* Light theme shadows */
    --shadow-card:  0 1px 4px rgba(0, 0, 0, 0.07);
    --shadow-modal: 0 8px 28px rgba(0, 0, 0, 0.12);

    /* Nav and footer - locked dark regardless of theme */
    --nav-bg:           #111111;
    --nav-border:       #222222;
    --nav-text:         #9ca3af;
    --nav-text-hover:   #f5f5f5;
    --footer-bg:        #111111;
    --footer-border:    #222222;
    --footer-text:      #6b7280;

    /* 08 June 2026 - Send button: dark bg with white text on light theme. */
    --btn-send-bg:       #111827;
    --btn-send-bg-hover: #1f2937;
    --btn-send-text:     #ffffff;

    /* Spacing */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;

    /* Border radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 20px;

    /* Typography */
    --font-stack: 'Inter', 'Segoe UI', system-ui, sans-serif;
}
/* == END Light Theme Tokens == */

/* == START Dark Theme Overrides == */
/* 08 June 2026 - Applied when data-theme="dark" is set on the html element. */
:root[data-theme="dark"] {
    --bg-body:      #090909;
    --bg-surface:   #151515;
    --bg-elevated:  #1f1f1f;
    --bg-overlay:   rgba(15, 15, 15, 0.92);

    --border:       #272727;
    --border-hover: #323232;

    --text-primary:   #f5f5f5;
    --text-secondary: #9ca3af;
    --text-disabled:  #6b7280;
    --text-inverse:   #0f0f0f;

    --shadow-card:  0 14px 42px rgba(0, 0, 0, 0.22);
    --shadow-modal: 0 24px 68px rgba(0, 0, 0, 0.28);

    /* 08 June 2026 - Send button inverted on dark theme: light bg with dark text. */
    --btn-send-bg:       #e4e7eb;
    --btn-send-bg-hover: #cdd2d9;
    --btn-send-text:     #111827;
}
/* == END Dark Theme Overrides == */

/* == START Base Reset == */
* {
    box-sizing: border-box;
}
html, body {
    min-height: 100%;
}
body {
    margin: 0;
    font-family: var(--font-stack);
    font-size: 16px;
    color: var(--text-primary);
    background: var(--bg-body);
    line-height: 1.5;
}
/* 08 June 2026 - Dark mode body gets the radial glow effect; light mode is flat white. */
[data-theme="dark"] body {
    background: radial-gradient(circle at top, rgba(4, 163, 237, 0.12), transparent 24%),
                linear-gradient(180deg, #090909 0%, #070707 100%);
}
h1, h2, h3 {
    margin: 0 0 var(--space-4) 0;
    color: var(--text-primary);
    font-weight: 700;
    line-height: 1.2;
}
h1 { font-size: 2rem;   }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem;}
a {
    color: var(--colour-blue);
    text-decoration: none;
}
a:hover {
    color: var(--colour-blue-hover);
}
a:visited {
    color: var(--colour-purple-active);
}
button, input, select, textarea {
    font: inherit;
}
button {
    border: none;
    cursor: pointer;
}
img {
    max-width: 100%;
    height: auto;
}
/* == END Base Reset == */

/* == START Theme Toggle Icon == */
/* 08 June 2026 - Show moon in light mode (click to go dark), sun in dark mode (click to go light). */
.icon-sun  { display: none;   }
.icon-moon { display: inline; }
[data-theme="dark"] .icon-sun  { display: inline; }
[data-theme="dark"] .icon-moon { display: none;   }
/* == END Theme Toggle Icon == */

/* == START Layout == */
/* 08 June 2026 - Switched from fixed max-width to 5% side padding for consistent margins. */
.page {
    padding: var(--space-8) 5%;
}
.page-title {
    margin-bottom: var(--space-2);
}
.page-subtitle {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin: 0 0 var(--space-8) 0;
}
.subtext {
    color: var(--text-secondary);
    font-size: 0.875rem;
}
/* == END Layout == */

/* == START Top Navigation == */
/* 08 June 2026 - Nav uses explicit dark tokens so it stays dark in both light and dark themes. */
/* 08 June 2026 - Horizontal padding set to 5% to match page margins. Logo height raised to 80px. */
.topnav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) 5%;
    background: var(--nav-bg);
    border-bottom: 1px solid var(--nav-border);
    position: sticky;
    top: 0;
    z-index: 10;
}
.topnav-brand img {
    height: 80px;
    display: block;
}
.topnav-links {
    display: flex;
    gap: var(--space-5);
    flex: 1;
}
.topnav-links a {
    color: var(--nav-text);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
}
.topnav-links a:hover,
.topnav-links a:visited {
    color: var(--nav-text-hover);
}
.topnav-user {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.topnav-name {
    font-size: 0.9rem;
    color: var(--nav-text-hover);
}
.topnav .btn-ghost {
    background: #1f1f1f;
    color: var(--nav-text-hover);
}
.topnav .btn-ghost:hover {
    background: #2d2d2d;
    color: var(--nav-text-hover);
}
/* == END Top Navigation == */

/* == START Footer == */
/* 08 June 2026 - Footer wrapper spans full viewport width with dark background. */
/* 08 June 2026 - Horizontal padding set to 5% to match page margins. */
.site-footer {
    background: var(--footer-bg);
    border-top: 1px solid var(--footer-border);
    color: var(--footer-text);
    font-size: 0.85rem;
}
.site-footer-inner {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-5) 5%;
}
/* == END Footer == */

/* == START Form Fields == */
.field-label {
    display: block;
    margin-bottom: var(--space-2);
    color: var(--text-primary);
    font-size: 0.875rem;
    font-weight: 600;
}
.field-input {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    background: var(--bg-elevated);
    color: var(--text-primary);
    font-size: 0.9375rem;
}
.field-input::placeholder {
    color: var(--text-disabled);
}
.field-input:focus {
    outline: none;
    border-color: var(--colour-blue);
    box-shadow: 0 0 0 3px rgba(4, 163, 237, 0.18);
}
.field-input:disabled {
    background: var(--bg-overlay);
    color: var(--text-disabled);
}
.field-input-sm {
    padding: var(--space-2);
    font-size: 0.875rem;
}
.form-grid {
    display: grid;
    gap: var(--space-3);
}
/* == END Form Fields == */

/* == START Buttons == */
/* 08 June 2026 - Removed transform from transition and hover — no position shift on hover. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 120ms ease;
    cursor: pointer;
}
.btn:hover {
    text-decoration: none;
}
.btn-sm {
    padding: var(--space-1) var(--space-2);
    font-size: 0.75rem;
}
.btn-block {
    width: 100%;
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
}
/* 08 June 2026 - Explicit visited colour overrides prevent a:visited tinting button text. */
.btn-primary {
    background: var(--colour-blue);
    color: #ffffff;
}
.btn-primary:hover   { background: var(--colour-blue-hover);   color: #ffffff; }
.btn-primary:active  { background: var(--colour-blue-active);  color: #ffffff; }
.btn-primary:visited { color: #ffffff; }
.btn-secondary {
    background: var(--colour-purple);
    color: #ffffff;
}
.btn-secondary:hover   { background: var(--colour-purple-hover);   color: #ffffff; }
.btn-secondary:active  { background: var(--colour-purple-active);  color: #ffffff; }
.btn-secondary:visited { color: #ffffff; }
.btn-destructive {
    background: var(--colour-red);
    color: #ffffff;
}
.btn-destructive:hover   { background: var(--colour-red-hover);   color: #ffffff; }
.btn-destructive:active  { background: var(--colour-red-active);  color: #ffffff; }
.btn-destructive:visited { color: #ffffff; }
/* 08 June 2026 - Send button: dark on light theme, light on dark theme (inverted via tokens). */
.btn-send {
    background: var(--btn-send-bg);
    color: var(--btn-send-text);
}
.btn-send:hover   { background: var(--btn-send-bg-hover); color: var(--btn-send-text); }
.btn-send:visited { color: var(--btn-send-text); }
.btn-ghost {
    background: var(--bg-elevated);
    color: var(--text-primary);
}
.btn-ghost:hover   { background: var(--bg-overlay); color: var(--text-primary); }
.btn-ghost:visited { color: var(--text-primary); }
/* == END Buttons == */

/* == START Badges == */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 700;
}
.badge-role {
    background: var(--bg-elevated);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.badge-success { background: var(--colour-green);     color: #0f0f0f; }
.badge-warning { background: var(--colour-orange);    color: #0f0f0f; }
.badge-error   { background: var(--colour-red);       color: #ffffff; }
.badge-info    { background: var(--colour-turquoise); color: #0f0f0f; }
.badge-neutral { background: var(--text-disabled);    color: #ffffff; }
/* == END Badges == */

/* == START Alerts == */
.alert {
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-5);
    font-size: 0.9rem;
}
.alert-success { background: var(--colour-green);  color: #0f0f0f; }
.alert-error   { background: var(--colour-red);    color: #ffffff; }
.alert-warning { background: var(--colour-orange); color: #0f0f0f; }
/* == END Alerts == */

/* == START Cards == */
/* 08 June 2026 - Cards are flex columns so actions always sit at the bottom. */
.card-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
}
.report-card {
    flex: 0 0 calc(25% - 15px);
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: var(--space-5);
}
.report-card-title {
    font-size: 1.05rem;
    margin-bottom: var(--space-2);
}
.report-card-desc {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin: 0 0 var(--space-4) 0;
    flex: 1;
}
.report-card-actions {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--space-2);
    margin-top: auto;
}
@media (max-width: 900px) {
    .report-card { flex: 0 0 calc(50% - 10px); }
}
@media (max-width: 500px) {
    .report-card { flex: 0 0 100%; }
}
/* == END Cards == */

/* == START Panels == */
.panel {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: var(--space-5);
    margin-bottom: var(--space-6);
}
.panel-title {
    font-size: 1.25rem;
    margin-bottom: var(--space-4);
}
/* == END Panels == */

/* == START Tables == */
.report-table-wrap {
    overflow-x: auto;
}
.report-table {
    width: 100%;
    border-collapse: collapse;
}
.report-table th,
.report-table td {
    padding: var(--space-3);
    border-bottom: 1px solid var(--border);
    text-align: left;
}
.report-table th {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}
.report-table td {
    font-size: 0.9rem;
    color: var(--text-primary);
}
.report-table tr:hover td {
    background: var(--bg-elevated);
}
.report-empty {
    text-align: center;
    color: var(--text-secondary);
    padding: var(--space-8) var(--space-3);
}
/* == END Tables == */