/* =======================================================
   SDAU UIMS — Design Tokens & Styles
   Used by: guest-layout, dashboard-layout and all pages
   Base design system shared with the SDAU Finance Management
   System (project_bms) for a consistent app suite.
   ======================================================= */

:root {
    --navy: #0f3d1f;
    --navy-deep: #062a1a;
    --gold: #dfa039;
    --gold-soft: #f8dc95;
    --mint: #6dd89f;
    --blue: #8eaef9;
    --teal: #149cc6;
    --text: #37383a;
    --text-muted: #6f7172;
    --bg-section: #f7faf7;
    --bg-card: #ffffff;
    --border: #e3ebe3;
    --drawer-w: min(82%, 340px);
    /* Single source of truth for the header bar's vertical padding - shared
       by the guest navbar (.site-navbar) AND the dashboard topbar
       (.dash-topbar) so "the navbar/topbar" means one height/style in both
       layouts, not two independently-tuned ones. */
    --topbar-py: 4px;
    /* Heading/emphasis TEXT color - deliberately separate from --navy, which
       is also used as a BACKGROUND (sidebar gradient, greeting banner) that
       must stay dark in both themes. Text painted in --navy on a dark-mode
       card/topbar background is near-invisible; --heading is what h1-h6,
       .dash-heading, .uname, and .stat-value should use instead. */
    --heading: var(--navy);
    /* Plain-text link color - deliberately NOT --gold. #dfa039 text on a
       white/light background measures only 2.28:1 contrast (fails WCAG AA's
       4.5:1 for body text badly) - SDAU brand green clears 6:1, so links stay
       readable for low-vision/older users without abandoning the brand color.
       --gold itself is unaffected (still used for buttons/badges/icons, where
       Bootstrap's own color-contrast() already picks a readable text color
       against it). */
    --link: #1a5c2a;
}

/* Dark mode (see Settings > Theme) - [data-bs-theme="dark"] is Bootstrap
   5.3's own dark-mode attribute, set server-side (or by a tiny inline script
   for "system") in dashboard-layout.blade.php. Bootstrap's own components
   (cards, tables, forms, dropdowns, buttons...) already re-theme themselves
   from this attribute automatically; only this app's own hand-written custom
   properties need an explicit override here. */
[data-bs-theme="dark"] {
    --navy: #0f2a4a;
    --navy-deep: #06070b;
    --gold: #dfa039;
    --gold-soft: #f8dc95;
    --mint: #6dd89f;
    --blue: #8eaef9;
    --teal: #149cc6;
    --text: #e7e9ec;
    --text-muted: #9aa0a6;
    --bg-section: #10161d;
    --bg-card: #1a222b;
    --border: #2a333d;
    --heading: #eef2f6;
    /* --gold itself already clears ~7-8:1 against this theme's dark
       backgrounds (the opposite problem from light mode), so dark-mode links
       don't need the darkened --link swap - see the light-mode definition
       above for why one exists at all. */
    --link: var(--gold);
}

/* .btn-outline-secondary/-danger ship a FIXED --bs-btn-color/--bs-btn-border-color
   (#6c757d / #dc3545) with no [data-bs-theme=dark] variant of their own in
   Bootstrap itself - unlike neutral surface tokens (body bg/color, borders),
   Bootstrap deliberately keeps its contextual colors identical across themes.
   #6c757d in particular sits under WCAG AA contrast against our dark card
   background, reading as "just a border, barely there" - lightened here via
   Bootstrap's own --bs-btn-* local custom properties (the supported override
   point), not by fighting the class with !important. */
[data-bs-theme="dark"] .btn-outline-secondary {
    --bs-btn-color: #aeb6bd;
    --bs-btn-border-color: #aeb6bd;
    --bs-btn-hover-color: #10161d;
    --bs-btn-hover-bg: #aeb6bd;
    --bs-btn-hover-border-color: #aeb6bd;
    --bs-btn-active-color: #10161d;
    --bs-btn-active-bg: #aeb6bd;
    --bs-btn-active-border-color: #aeb6bd;
    --bs-btn-disabled-color: #6c757d;
    --bs-btn-disabled-border-color: #4a5259;
}
[data-bs-theme="dark"] .btn-outline-danger {
    --bs-btn-color: #f1888f;
    --bs-btn-border-color: #f1888f;
    --bs-btn-hover-color: #10161d;
    --bs-btn-hover-bg: #f1888f;
    --bs-btn-hover-border-color: #f1888f;
    --bs-btn-active-color: #10161d;
    --bs-btn-active-bg: #f1888f;
    --bs-btn-active-border-color: #f1888f;
}

* {
    box-sizing: border-box;
}
/* SD badge logo - reused standalone in navbar/sidebar/footer/auth cards, each
   context overriding size via an inline style (see usages). Generic (not
   parent-scoped) so it renders correctly regardless of surrounding markup. */
.crest {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(160deg, var(--gold), #b9781f);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: "Lora", serif;
    font-weight: 700;
    font-size: 15px;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(223, 160, 57, 0.35);
}

/* Premium hamburger toggle - shared by the guest navbar and the dashboard
   topbar so both mobile menu triggers look and feel identical. */
.navbar-toggler {
    border: 1px solid var(--gold);
    border-radius: 8px;
    padding: 6px 11px;
    color: var(--navy);
    box-shadow: none;
    line-height: 1;
}
.navbar-toggler:focus {
    box-shadow: 0 0 0 3px rgba(223, 160, 57, 0.25);
}
.navbar-toggler i {
    font-size: 16px;
    color: var(--navy);
}

body {
    margin: 0;
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: var(--text);
    line-height: 1.6;
    background: var(--bg-section);
}
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--heading);
    font-weight: 700;
    margin: 0 0 10px;
}
a {
    color: var(--link);
    text-decoration: none;
    transition: all 0.35s ease;
}
a:hover {
    color: var(--heading);
    text-decoration: underline;
}
img {
    max-width: 100%;
    display: block;
}
.container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
}

/* =======================================================
   Accessibility & feedback - shared by every page (guest + dashboard)

   Buttons get a firmer, larger, higher-contrast affordance (bigger touch
   target, bolder label, a visible hover/press state) and every focusable
   element gets an unmissable keyboard focus ring - both aimed at users who
   rely on a larger, clearer target rather than a subtle one (low vision,
   reduced fine motor control, keyboard-only navigation).
   ======================================================= */
.btn {
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: 0.55rem 1.15rem;
    min-height: 44px;
    /* icon + label buttons (the overwhelming majority in this app) already
       center via d-flex/gap classes on the element itself - this only
       affects the rare bare-text button, and is harmless either way. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4em;
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        background-color 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease;
}
.btn-sm {
    min-height: 34px;
    padding: 0.35rem 0.75rem;
}
.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(2, 27, 56, 0.16);
}
.btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(2, 27, 56, 0.14);
}

/* Bootstrap already draws its own focus box-shadow per button variant: this
   adds a second, high-contrast outline on top (browser default focus ring,
   restyled) so focus is visible against every background/button color in
   this app, not just the ones Bootstrap's per-variant shadow contrasts well
   against. Covers every focusable control, not just .btn - table row links,
   sidebar/nav links, form fields. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 2px;
}

/* Session-flash alerts (every controller's redirect()->with('status', ...))
   ease in instead of just appearing, so a "Saved."/"Deleted." confirmation
   registers as feedback rather than being missed entirely on a busy page. */
@keyframes fade-slide-in {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.alert {
    animation: fade-slide-in 0.3s ease;
}

/* Anyone with vestibular/motion sensitivity (disproportionately common among
   older users) can set this OS-level preference - every transition/animation
   above (and .action-card/.stat-card's hover lift elsewhere) collapses to an
   instant, motionless state instead of ignoring the preference. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}