/* =====================================================================
   Theme tokens. Light is the default; dark applies when <html> carries
   data-theme="dark", or (with no explicit choice) when the OS prefers dark.
   The dark palette is a deep navy-slate "data dashboard" look with bright
   accents and colour-coded status chips. Edit the tokens here to rebrand.
   ===================================================================== */
:root {
    color-scheme: light;
    --primary: #0f2a57;          /* buttons, active states */
    --primary-light: #1d4180;
    --heading: #0f2a57;          /* headings and link text */
    --on-primary: #ffffff;
    --on-danger: #ffffff;
    --on-muted: #ffffff;
    --nav-bg: #0a1d3e;
    --accent: #b8861f;
    --bg: #fbf7ee;
    --card-bg: #ffffff;
    --input-bg: #ffffff;
    --border: #e6ddc6;
    --text: #1b2433;
    --text-muted: #6b7280;
    --danger: #b3261e;
    --amber: #92600a;
    --green: #146c43;
    --blue: #0b5ed7;
    --tint-red: #fdeceb;
    --tint-green: #eaf6ee;
    --tint-amber: #fdf3e2;
    --tint-blue: #eaf1fd;
    --msg-student: #f4e7c3;
    --msg-admin: #efe9d9;
    --shadow: 0 1px 3px rgba(0,0,0,0.06);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Dark palette, applied by explicit choice ... */
:root[data-theme="dark"] {
    color-scheme: dark;
    --primary: #c9962b;
    --primary-light: #dcae4c;
    --heading: #f8f0d8;
    --on-primary: #1a1405;
    --on-danger: #2a0a07;
    --on-muted: #0a1426;
    --nav-bg: #060e1c;
    --accent: #e0b04a;
    --bg: #0a1426;
    --card-bg: #111c33;
    --input-bg: #0c1730;
    --border: #22304f;
    --text: #e6edf7;
    --text-muted: #94a3c0;
    --danger: #ff8a80;
    --amber: #fbbf24;
    --green: #4ade80;
    --blue: #8fb6f5;
    --tint-red: rgba(255,138,128,0.14);
    --tint-green: rgba(74,222,128,0.13);
    --tint-amber: rgba(251,191,36,0.14);
    --tint-blue: rgba(143,182,245,0.14);
    --msg-student: rgba(201,150,43,0.22);
    --msg-admin: #16223c;
    --shadow: 0 1px 3px rgba(0,0,0,0.5);
}

/* ... or by OS preference when the visitor has not chosen (also covers no-JS). */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --primary: #c9962b;
        --primary-light: #dcae4c;
        --heading: #f8f0d8;
        --on-primary: #1a1405;
        --on-danger: #2a0a07;
        --on-muted: #0a1426;
        --nav-bg: #060e1c;
        --accent: #e0b04a;
        --bg: #0a1426;
        --card-bg: #111c33;
        --input-bg: #0c1730;
        --border: #22304f;
        --text: #e6edf7;
        --text-muted: #94a3c0;
        --danger: #ff8a80;
        --amber: #fbbf24;
        --green: #4ade80;
        --blue: #8fb6f5;
        --tint-red: rgba(255,138,128,0.14);
        --tint-green: rgba(74,222,128,0.13);
        --tint-amber: rgba(251,191,36,0.14);
        --tint-blue: rgba(143,182,245,0.14);
        --msg-student: rgba(201,150,43,0.22);
        --msg-admin: #16223c;
        --shadow: 0 1px 3px rgba(0,0,0,0.5);
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: inherit;
    line-height: 1.5;
}

.auth-card {
    max-width: 420px;
    margin: 8vh auto;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 2.5rem;
    box-shadow: var(--shadow);
}

.auth-card h1 { font-size: 1.4rem; margin: 0 0 0.25rem; color: var(--heading); }
.subtitle { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 1.5rem; }

label { display: block; font-size: 0.85rem; font-weight: 600; margin: 1rem 0 0.35rem; }
input, select, textarea {
    width: 100%;
    background: var(--input-bg);
    color: var(--text);
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.95rem;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary-light); box-shadow: 0 0 0 3px var(--tint-blue); }
input::placeholder, textarea::placeholder { color: var(--text-muted); opacity: .7; }
input[type="checkbox"], input[type="radio"] { width: auto; accent-color: var(--primary); }

button {
    width: 100%;
    margin-top: 1.5rem;
    padding: 0.7rem;
    background: var(--primary);
    color: var(--on-primary);
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
}
button:hover { background: var(--primary-light); }

.footer-link { text-align: center; margin-top: 1.5rem; font-size: 0.9rem; color: var(--text-muted); }
.footer-link a, .btn-link { color: var(--heading); text-decoration: none; font-weight: 600; }

.alert { padding: 0.75rem 1rem; border-radius: 8px; font-size: 0.88rem; margin-bottom: 1rem; }
.alert-error { background: var(--tint-red); color: var(--danger); }
.alert-success { background: var(--tint-green); color: var(--green); }
.alert-warning { background: var(--tint-amber); color: var(--amber); }

.topnav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--nav-bg);
    color: #fff;
    padding: 1rem 2rem;
}
.topnav a { color: #fff; }
.brand { font-weight: 700; }
.nav-right { font-size: 0.85rem; }

.dashboard { max-width: 960px; margin: 2rem auto; padding: 0 1.5rem; }

.card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}
.card h2 { margin-top: 0; font-size: 1.2rem; color: var(--heading); }
.card h3 { margin-top: 0; font-size: 1rem; color: var(--heading); }
.muted { color: var(--text-muted); font-size: 0.88rem; }

.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}
@media (max-width: 700px) { .grid-2 { grid-template-columns: 1fr; } }

.progress-track { display: flex; margin-top: 1.5rem; }
.progress-step { flex: 1; text-align: center; position: relative; }
.progress-step .dot {
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--border);
    margin: 0 auto 0.5rem;
    border: 3px solid var(--card-bg);
    box-shadow: 0 0 0 1px var(--border);
}
.progress-step.done .dot { background: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.progress-step.active .dot { background: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.progress-step .label { font-size: 0.72rem; color: var(--text-muted); }
.progress-step.active .label { color: var(--heading); font-weight: 700; }
.progress-step:not(:last-child)::after {
    content: ''; position: absolute; top: 8px; left: 50%; width: 100%; height: 2px;
    background: var(--border); z-index: -1;
}
.progress-step.done:not(:last-child)::after { background: var(--accent); }

.badge {
    display: inline-block; font-size: 0.72rem; font-weight: 700;
    padding: 0.2rem 0.6rem; border-radius: 999px; text-transform: uppercase;
}
.badge-green { background: var(--tint-green); color: var(--green); }
.badge-amber { background: var(--tint-amber); color: var(--amber); }
.badge-blue { background: var(--tint-blue); color: var(--blue); }

.doc-list, .notif-list { list-style: none; padding: 0; margin: 0.5rem 0 0; }
.doc-list li, .notif-list li {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.6rem 0; border-bottom: 1px solid var(--border); font-size: 0.88rem;
}
.doc-list li:last-child, .notif-list li:last-child { border-bottom: none; }
.notif-date { color: var(--text-muted); font-size: 0.78rem; margin-right: 0.75rem; }

.btn-primary {
    display: inline-block;
    background: var(--primary);
    color: var(--on-primary);
    border: none;
    border-radius: 8px;
    padding: 0.6rem 1.2rem;
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    cursor: pointer;
}
.btn-primary:hover { background: var(--primary-light); }

.inline-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.inline-row > div { flex: 1; min-width: 160px; }
.inline-row label { margin-top: 0; }

fieldset { border: 1px solid var(--border); border-radius: 8px; padding: 1rem; }
legend { padding: 0 0.5rem; font-weight: 700; color: var(--heading); font-size: 0.9rem; }
textarea { font-family: inherit; }


a { color: var(--heading); }
.topnav a { color: #fff; }

/* Theme toggle (injected by theme.js) */
.theme-toggle {
    width: auto; margin: 0 0.75rem 0 0; padding: 0.3rem 0.65rem;
    background: transparent; color: inherit; border: 1px solid rgba(255,255,255,0.35);
    border-radius: 999px; font-size: 0.8rem; font-weight: 600; cursor: pointer; line-height: 1.2;
}
.theme-toggle:hover { background: rgba(255,255,255,0.12); }
.theme-toggle.floating {
    position: fixed; top: 0.9rem; right: 0.9rem; z-index: 50;
    background: var(--card-bg); color: var(--text); border-color: var(--border);
}
.theme-toggle.floating:hover { background: var(--card-bg); border-color: var(--primary-light); }
.theme-toggle:focus-visible { outline: 2px solid var(--primary-light); outline-offset: 2px; }

/* Phones: let wide tables scroll sideways instead of breaking the layout */
@media (max-width: 700px) {
    .card table { display: block; overflow-x: auto; white-space: nowrap; }
    .topnav { padding: 0.9rem 1rem; }
    .dashboard { padding: 0 1rem; }
}


/* ---- Raeloh brand: logo in the top bar and on sign-in cards ---- */
.topnav .brand { display: inline-flex; align-items: center; gap: 0.6rem; }
.topnav .brand::before { content: ""; width: 34px; height: 34px; background: url("img/monogram.png") center / contain no-repeat; flex: none; }
.auth-card::before { content: ""; display: block; height: 58px; margin: 0 auto 1.1rem; background: url("img/logo-navy.png") center / contain no-repeat; }
:root[data-theme="dark"] .auth-card::before { background-image: url("img/logo-cream.png"); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .auth-card::before { background-image: url("img/logo-cream.png"); } }
.topnav .brand { letter-spacing: 0.01em; }


/* =====================================================================
   Interface polish: real buttons, clearer navigation, softer cards
   ===================================================================== */
button, .btn-primary { transition: background .15s, box-shadow .15s, transform .05s; }
button:hover, .btn-primary:hover { box-shadow: 0 4px 14px rgba(15,42,87,.25); }
button:active, .btn-primary:active { transform: translateY(1px); box-shadow: none; }
button:focus-visible, .btn-primary:focus-visible, a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* text colour that stays readable on the danger / muted buttons that set their own background */
button[style*="var(--danger)"] { color: var(--on-danger); }
button[style*="var(--text-muted)"] { color: var(--on-muted); }
button[style*="var(--danger)"]:hover { background: var(--danger) !important; filter: brightness(1.08); }
button[disabled] { opacity: .55; cursor: not-allowed; box-shadow: none; }

/* top bar: every link on the right is a button */
.topnav { padding: .8rem 2rem; box-shadow: 0 2px 14px rgba(0,0,0,.18); position: sticky; top: 0; z-index: 40; }
.nav-right { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; justify-content: flex-end; font-size: .85rem; }
.nav-user { color: rgba(255,255,255,.85); font-size: .82rem; margin-right: .2rem; }
.nav-right a, .site-actions a {
    display: inline-flex; align-items: center; gap: .35rem; padding: .42rem 1rem; border-radius: 999px;
    background: #c9962b; color: #1a1405 !important; font-weight: 700; font-size: .85rem; text-decoration: none;
    border: 1px solid transparent; transition: background .15s, transform .05s;
}
.nav-right a:hover { background: #dcae4c; }
.nav-right a:active { transform: translateY(1px); }
.nav-right a[href="logout.php"] { background: transparent; color: #fff !important; border-color: rgba(255,255,255,.45); }
.nav-right a[href="logout.php"]:hover { background: rgba(255,255,255,.14); }
.nav-right a[href="two_factor_setup.php"] { background: rgba(255,255,255,.14); color: #fff !important; }
.nav-right a[href="two_factor_setup.php"]:hover { background: rgba(255,255,255,.24); }
.theme-toggle { margin: 0 .2rem 0 0; padding: .4rem .8rem; }

/* cards and tables */
.card { border-radius: 16px; box-shadow: 0 2px 14px rgba(15,42,87,.06); }
.card h2 { font-size: 1.25rem; }
.card table { border-collapse: separate; border-spacing: 0; }
.card th { background: var(--tint-blue); color: var(--text-muted); padding: .6rem .7rem; }
.card th:first-child { border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
.card th:last-child { border-top-right-radius: 8px; border-bottom-right-radius: 8px; }
.card td { padding: .85rem .7rem; vertical-align: middle; }
.card tbody tr:hover td { background: var(--tint-blue); }
.card .btn-link, td a.btn-link {
    display: inline-block; padding: .25rem .8rem; border: 1px solid var(--border); border-radius: 999px;
    font-size: .8rem; text-decoration: none; background: var(--card-bg); font-weight: 600;
}
.card .btn-link:hover { border-color: var(--accent); background: var(--tint-blue); }
.badge { letter-spacing: .02em; }

/* dashboard tiles */
.quicklinks { gap: 1rem; }
.quicklink { border-radius: 16px; box-shadow: 0 2px 14px rgba(15,42,87,.06); transition: transform .18s, box-shadow .18s, border-color .18s; }
.quicklink:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(15,42,87,.14); border-color: var(--accent); }
.quicklink .count { font-size: 1.9rem; line-height: 1.15; }
.quicklink .label { font-weight: 600; }
.filters a { display: inline-block; padding: .3rem .85rem; border-radius: 999px; background: var(--tint-blue); margin-bottom: .4rem; }
.filters a.active { background: var(--primary); color: var(--on-primary) !important; }
.pagination a { border: 1px solid var(--border); }

/* forms */
input:hover, select:hover, textarea:hover { border-color: var(--accent); }
label { color: var(--heading); }
@media (max-width: 700px) { .topnav { padding: .7rem 1rem; } .nav-user { display: none; } }
/* in-table action links read as buttons */
td a[href*="manage_programmes.php"], td a[href*="manage_package_components.php"], td a[href*="application_detail.php"], td a[href*="package_order_detail.php"], td a[href*="agent_statement.php"] {
    display: inline-block; padding: .25rem .8rem; border: 1px solid var(--border); border-radius: 999px; font-size: .8rem; font-weight: 600;
    text-decoration: none; background: var(--card-bg); color: var(--heading); white-space: nowrap;
}
td a[href*="manage_programmes.php"]:hover, td a[href*="manage_package_components.php"]:hover, td a[href*="application_detail.php"]:hover,
td a[href*="package_order_detail.php"]:hover, td a[href*="agent_statement.php"]:hover { border-color: var(--accent); background: var(--tint-blue); }
td a[href^="?edit="], td a[href*="?edit="] {
    display: inline-block; padding: .25rem .8rem; border: 1px solid var(--border); border-radius: 999px; font-size: .8rem; font-weight: 600;
    text-decoration: none; background: var(--card-bg); color: var(--heading); margin-bottom: .3rem;
}
td a[href*="?edit="]:hover { border-color: var(--accent); background: var(--tint-blue); }