:root {
    /* Monochromatic palette built entirely from one hue (28deg, the
       original brand orange). Two scales share that hue:
       - the numbered scale (50-900) is full-saturation, for brand/accent
         elements (buttons, active states, badges, focus rings);
       - the "neutral" scale is the same hue at very low saturation, used
         everywhere a plain gray would normally go (page background,
         borders, body/muted text) so those surfaces read as a warm,
         desaturated tint of the same orange rather than true gray. */
    --tracer-50:  hsl(28, 100%, 96%);
    --tracer-100: hsl(28, 95%, 91%);
    --tracer-200: hsl(28, 90%, 82%);
    --tracer-300: hsl(28, 87%, 72%);
    --tracer-400: hsl(28, 85%, 64%);
    --tracer-500: hsl(28, 78%, 58%);
    --tracer-600: hsl(28, 68%, 48%);
    --tracer-700: hsl(28, 58%, 38%);
    --tracer-800: hsl(28, 48%, 28%);
    --tracer-900: hsl(28, 40%, 18%);

    --tracer-neutral-0:   hsl(28, 40%, 99%);
    --tracer-neutral-50:  hsl(28, 30%, 97%);
    --tracer-neutral-100: hsl(28, 20%, 93%);
    --tracer-neutral-200: hsl(28, 14%, 85%);
    --tracer-neutral-300: hsl(28, 10%, 70%);
    --tracer-neutral-400: hsl(28, 8%, 55%);
    --tracer-neutral-600: hsl(28, 10%, 38%);
    --tracer-neutral-800: hsl(28, 14%, 20%);
    --tracer-neutral-900: hsl(28, 18%, 12%);

    /* Original variable names kept so nothing else has to change - now
       backed by the monochromatic scale above instead of standalone hex. */
    --tracer-orange: var(--tracer-400);
    --tracer-orange-dark: var(--tracer-500);
    --tracer-bg: var(--tracer-neutral-50);
    --tracer-border: var(--tracer-neutral-100);
    --tracer-text-muted: var(--tracer-neutral-400);
}

body {
    background-color: var(--tracer-bg);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--tracer-neutral-800);
}

.tracer-page {
    display: block;
    min-height: calc(100vh - 64px);
    flex: 1;
    min-width: 0;
}

.tracer-body {
    display: flex;
    align-items: flex-start;
}

.tracer-wrapper {
    max-width: 760px;
    margin: 0 auto;
    padding: 28px 16px 60px;
}

/* Vertically centers the login/register forms within the viewport.
   Scoped to its own class (not .tracer-page/.tracer-wrapper themselves)
   so ordinary content pages - dashboards, tables, the survey wizard -
   keep their normal top-aligned flow. */
.auth-center {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 40px 0;
}

.tracer-header h1 {
    font-size: 1.7rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.tracer-header p {
    color: var(--tracer-text-muted);
    margin-bottom: 24px;
}

.tracer-header-logo {
    width: 64px;
    height: 64px;
    object-fit: contain;
    flex-shrink: 0;
}

@media (max-width: 575.98px) {
    .tracer-header-logo {
        width: 44px;
        height: 44px;
    }
}

/* Stepper */
.tracer-stepper {
    display: flex;
    align-items: center;
    margin-bottom: 24px;
}

.tracer-step-circle {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    background: var(--tracer-neutral-100);
    color: var(--tracer-neutral-400);
    transition: background .2s ease, color .2s ease;
}

.tracer-step-circle.active {
    background: var(--tracer-orange);
    color: var(--tracer-neutral-0);
}

.tracer-step-circle.done {
    background: var(--tracer-orange);
    color: var(--tracer-neutral-0);
}

.tracer-step-circle.clickable {
    cursor: pointer;
}

.tracer-step-circle.clickable:hover,
.tracer-step-circle.clickable:focus-visible {
    background: var(--tracer-orange-dark);
    color: var(--tracer-neutral-0);
    outline: none;
    box-shadow: 0 0 0 3px rgba(240, 160, 88, 0.35);
}

.tracer-step-circle.locked {
    cursor: not-allowed;
}

.tracer-step-line {
    flex: 1;
    height: 3px;
    background: var(--tracer-neutral-200);
    margin: 0 8px;
    border-radius: 2px;
}

.tracer-step-line.done {
    background: var(--tracer-orange);
}

/* Card */
.tracer-card {
    background: var(--tracer-neutral-0);
    border: 1px solid var(--tracer-border);
    border-radius: 16px;
    padding: 28px 24px;
}

.tracer-card h2 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 2px;
}

.tracer-card > p.tracer-card-sub {
    color: var(--tracer-text-muted);
    margin-bottom: 22px;
}

.tracer-section { display: none; }
.tracer-section.active { display: block; }

.form-label {
    font-weight: 600;
    font-size: .92rem;
}

.form-label .req {
    color: #e0554a;
}

.form-control, .form-select {
    border-color: var(--tracer-border);
    padding: 10px 14px;
    border-radius: 10px;
}

.form-control:focus, .form-select:focus {
    border-color: var(--tracer-orange);
    box-shadow: 0 0 0 .2rem rgba(240, 160, 88, .18);
}

.tracer-check-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 16px;
}

@media (max-width: 576px) {
    .tracer-check-grid { grid-template-columns: 1fr; }
    .tracer-card { padding: 20px 16px; border-radius: 12px; }
    .tracer-wrapper { padding: 18px 10px 48px; }
}

.tracer-repeat-row {
    border: 1px solid var(--tracer-border);
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 12px;
    position: relative;
}

.tracer-remove-row {
    position: absolute;
    top: 8px;
    right: 8px;
    border: none;
    background: transparent;
    color: #c0453a;
    font-weight: 600;
    font-size: .85rem;
}

.tracer-add-row {
    border: 1px dashed var(--tracer-orange);
    color: var(--tracer-orange-dark);
    background: var(--tracer-50);
    border-radius: 10px;
    padding: 8px 14px;
    font-weight: 600;
    font-size: .9rem;
}

.tracer-nav {
    display: flex;
    justify-content: space-between;
    margin-top: 24px;
}

.btn-tracer-prev {
    border: 1px solid var(--tracer-border);
    background: var(--tracer-neutral-0);
    color: var(--tracer-neutral-600);
    border-radius: 999px;
    padding: 10px 22px;
    font-weight: 600;
}

.btn-tracer-next, .btn-tracer-submit {
    background: var(--tracer-orange);
    border: none;
    color: var(--tracer-neutral-0);
    border-radius: 999px;
    padding: 10px 24px;
    font-weight: 600;
}

.btn-tracer-next:hover, .btn-tracer-submit:hover {
    background: var(--tracer-orange-dark);
    color: var(--tracer-neutral-0);
}

.tracer-conditional { display: none; }
.tracer-conditional.show { display: block; }

/* Bigger, higher-contrast checkboxes and radios */
.form-check-input {
    width: 1.25em;
    height: 1.25em;
    margin-top: 0.15em;
    border: 2px solid var(--tracer-neutral-300);
    box-shadow: none;
}

.form-check-input:checked {
    background-color: var(--tracer-orange);
    border-color: var(--tracer-orange-dark);
}

.form-check-input:focus {
    border-color: var(--tracer-orange);
    box-shadow: 0 0 0 .2rem rgba(240, 160, 88, .25);
}

.form-check-input:hover {
    border-color: var(--tracer-orange-dark);
    cursor: pointer;
}

.form-check-label {
    padding-left: 2px;
    cursor: pointer;
}

.form-check {
    margin-bottom: 6px;
}

/* Nav bar links styled as visible outlined buttons */
.nav-pill-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    border: 1.5px solid var(--tracer-orange);
    border-radius: 999px;
    color: var(--tracer-orange-dark);
    font-weight: 600;
    font-size: .9rem;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
    white-space: nowrap;
}

.nav-pill-link:hover {
    background-color: var(--tracer-orange);
    color: var(--tracer-neutral-0);
}

.nav-pill-link.active {
    background-color: var(--tracer-orange);
    color: var(--tracer-neutral-0);
}

.nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nav-icon-svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Guarantee the logout button is always on-screen: if the pills, account
   label/badge, and logout button don't all fit on one line (regardless of
   how many nav items a given role has), wrap onto a second line instead of
   letting the row overflow past the viewport edge and clip the button. */
.nav-actions {
    flex-wrap: wrap;
    row-gap: 8px;
}

.nav-logout-btn {
    border-color: var(--tracer-neutral-300);
    color: var(--tracer-neutral-600);
}

.nav-logout-btn:hover {
    background-color: var(--tracer-neutral-300);
    color: var(--tracer-neutral-0);
}

/* Initials badge - hidden by default (desktop shows the full "Name (Role)"
   text); swapped in at tablet/mobile widths below so the nav-user-label
   never grows wide enough to push the logout button out of view. */
.nav-user-initials {
    display: none;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: var(--tracer-orange);
    color: var(--tracer-neutral-0);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .02em;
    flex-shrink: 0;
    cursor: default;
}

/* Tablet and mobile (below Bootstrap's lg breakpoint, matching this nav's
   navbar-expand-lg): swap the full "Name (Role)" text for an initials
   badge - e.g. "John Doe (Admin)" becomes "JD" - instead of hiding it
   outright, so there's still an at-a-glance account indicator while
   guaranteeing the logout button has room and never disappears. */
@media (max-width: 991.98px) {
    .nav-user-full {
        display: none;
    }

    .nav-user-initials {
        display: inline-flex;
    }
}

/* Mobile: shrink the nav to icon-only buttons so it stays usable on
   small screens - text labels are hidden, the pill becomes a compact
   circular icon button. Scoped to .navbar specifically: at this width the
   admin's Dashboard/Users/Programs/School Years/Audit Logs pills and the
   name+logout section have already been moved into the sidebar (see the
   script in layouts/app.blade.php), so this rule no longer applies to
   them there - they keep their full text label, matching the sidebar's
   other links (Analytics, Survey Templates, Integrations, View Map). It
   still applies to user/faculty roles, who have no sidebar to move into. */
@media (max-width: 767.98px) {
    .navbar .nav-label {
        display: none;
    }

    .navbar .nav-pill-link:has(.nav-icon) {
        padding: 8px;
        width: 38px;
        height: 38px;
        gap: 0;
        justify-content: center;
    }

    .navbar .d-flex.align-items-center {
        gap: 8px !important;
    }
}

/* Analytics: CSV preview table - monospace to read like the actual file */
.tracer-csv-preview {
    font-family: 'Courier New', Courier, monospace;
    font-size: .85rem;
}

.tracer-csv-preview thead th {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 600;
    border-bottom: 2px solid var(--tracer-orange);
}

/* Auto-refresh indicator (partials/auto-refresh.blade.php) - deliberately
   small and out of the way in the corner, not a banner, since it's a
   passive status readout rather than something that needs attention. */
.auto-refresh-indicator {
    position: fixed;
    right: 14px;
    bottom: 14px;
    z-index: 1040;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--tracer-neutral-0);
    border: 1px solid var(--tracer-border);
    border-radius: 999px;
    padding: 6px 8px 6px 14px;
    font-size: .78rem;
    color: var(--tracer-text-muted);
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

.auto-refresh-toggle-btn {
    border: 1px solid var(--tracer-border);
    background: var(--tracer-bg);
    color: var(--tracer-neutral-800);
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    padding: 3px 10px;
    cursor: pointer;
}

.auto-refresh-toggle-btn:hover {
    border-color: var(--tracer-orange);
    color: var(--tracer-orange-dark);
}

@media (max-width: 575.98px) {
    .auto-refresh-indicator {
        left: 14px;
        right: 14px;
        justify-content: space-between;
    }
}

/* Admin sidebar (partials/admin-sidebar.blade.php) - Analytics, Survey
   Templates, Integrations, View Map, plus (on mobile/tablet only) the
   Dashboard/Users/Programs/School Years/Audit Logs pills and the
   name+logout section, moved in from the top navbar. Desktop: a normal
   flex sibling of .tracer-page (see .tracer-body above), always visible.
   Mobile: an off-canvas panel, hidden by default and toggled via the
   hamburger icon button next to the "Graduate Tracer" brand - see the
   media query below and the script in layouts/app.blade.php. */
.tracer-sidebar {
    display: flex;
    flex-direction: column;
    width: 220px;
    flex-shrink: 0;
    background: var(--tracer-neutral-0);
    border-right: 1px solid var(--tracer-border);
    min-height: calc(100vh - 64px);
    padding: 16px 0;
}

.tracer-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px 12px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--tracer-border);
    font-weight: 700;
    color: var(--tracer-neutral-800);
}

.tracer-sidebar-close {
    border: none;
    background: none;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--tracer-text-muted);
    cursor: pointer;
    padding: 0 4px;
}

.tracer-sidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    color: var(--tracer-neutral-600);
    text-decoration: none;
    font-weight: 600;
    font-size: .9rem;
    border-left: 3px solid transparent;
}

.tracer-sidebar-link:hover {
    background-color: var(--tracer-bg);
    color: var(--tracer-orange-dark);
}

.tracer-sidebar-link.active {
    background-color: var(--tracer-bg);
    border-left-color: var(--tracer-orange);
    color: var(--tracer-orange-dark);
}

.tracer-sidebar-slot:empty {
    display: none;
}

/* #navAdminLinks, once moved in here, is a plain flex row of pill-shaped
   .nav-pill-link buttons (built for a horizontal navbar) - restyle them
   to look like native, full-width .tracer-sidebar-link rows instead. */
#sidebarPrimaryLinksSlot {
    border-bottom: 1px solid var(--tracer-border);
    padding-bottom: 8px;
    margin-bottom: 8px;
}

#sidebarPrimaryLinksSlot #navAdminLinks {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 0;
}

#sidebarPrimaryLinksSlot .nav-pill-link {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    border: none;
    border-radius: 0;
    border-left: 3px solid transparent;
    padding: 10px 16px;
    color: var(--tracer-neutral-600);
    font-weight: 600;
    font-size: .9rem;
    background: none;
}

#sidebarPrimaryLinksSlot .nav-pill-link:hover,
#sidebarPrimaryLinksSlot .nav-pill-link.active {
    background-color: var(--tracer-bg);
    color: var(--tracer-orange-dark);
    border-left-color: var(--tracer-orange);
}

/* #navAccountSection (name badge + logout form), once moved in here, is
   pinned to the very bottom of the sidebar via margin-top: auto,
   regardless of how many links are above it. */
.tracer-sidebar-account {
    margin-top: auto;
    border-top: 1px solid var(--tracer-border);
    padding: 12px 16px;
}

.tracer-sidebar-account #navAccountSection {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}

/* Plenty of room in the sidebar, unlike the cramped navbar - show the
   full name instead of the initials-only badge the navbar falls back to
   at this same breakpoint (see the .nav-user-full/.nav-user-initials
   rules above). */
.tracer-sidebar-account .nav-user-full {
    display: inline-block !important;
    font-weight: 600;
    color: var(--tracer-neutral-800);
}

.tracer-sidebar-account .nav-user-initials {
    display: none !important;
}

.tracer-sidebar-account .nav-logout-btn {
    justify-content: flex-start;
}

.sidebar-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 4px;
    margin-right: 10px;
    color: var(--tracer-orange, #f0a058);
    cursor: pointer;
}

.sidebar-backdrop {
    display: none;
}

@media (max-width: 991.98px) {
    .tracer-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        z-index: 1045;
        transform: translateX(-100%);
        transition: transform .25s ease;
        box-shadow: 4px 0 16px rgba(0,0,0,.15);
    }

    .tracer-sidebar.sidebar-open {
        transform: translateX(0);
    }

    .tracer-sidebar-header {
        padding-top: 4px;
    }

    .sidebar-backdrop.sidebar-open {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .35);
        z-index: 1040;
    }
}

/* Dims Current Address's fields while "(same as permanent address)" is
   checked - values are still copied in and still submit normally (no
   `disabled` attribute, which would drop them from the POST body), this
   just visually signals + mouse-blocks direct editing while it's synced. */
.tracer-fields-locked {
    opacity: .6;
    pointer-events: none;
}