/* ==========================================================================
   Apki Naukri design system
   --------------------------------------------------------------------------
   One stylesheet for the whole app (public site, dashboards, admin). Colours,
   radii and shadows live in tokens below; nothing else should hardcode them.
   Bootstrap 5.3 is loaded first and re-pointed at these tokens, so every
   Bootstrap component picks up the palette and dark mode automatically.
   ========================================================================== */

/* ---- 1. Tokens ---------------------------------------------------------- */
:root {
    --primary: #4F46E5;
    --primary-600: #4338CA;
    --primary-50: #EEF2FF;
    --primary-100: #E0E7FF;
    --secondary: #7C3AED;
    --accent: #06B6D4;
    --success: #10B981;
    --warning: #F59E0B;
    --danger: #EF4444;

    --background: #F8FAFC;
    --surface: #FFFFFF;
    --surface-2: #F1F5F9;
    --text: #0F172A;
    --muted: #64748B;
    --border: #E2E8F0;
    --ink: #0F172A;

    --gradient-brand: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
    --gradient-cool: linear-gradient(135deg, #7C3AED 0%, #06B6D4 100%);
    --gradient-soft: linear-gradient(180deg, #EEF2FF 0%, #F8FAFC 100%);

    --radius-sm: 10px;
    --radius: 16px;
    --radius-lg: 24px;
    --radius-pill: 999px;

    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .05);
    --shadow: 0 4px 16px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .04);
    --shadow-lg: 0 18px 40px rgba(15, 23, 42, .10), 0 4px 12px rgba(15, 23, 42, .05);
    --ring: 0 0 0 4px rgba(79, 70, 229, .22);

    --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-display: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;

    --ease: cubic-bezier(.2, .7, .2, 1);
    --nav-h: 72px;

    /* Legacy names used by existing views — aliases, not new colours. */
    --jp-primary: var(--primary);
    --jp-primary-dark: var(--primary-600);
    --jp-accent: var(--accent);
    --jp-ink: var(--text);
    --jp-navy: var(--text);
    --jp-muted: var(--muted);
    --jp-line: var(--border);
    --jp-tint: var(--primary-50);
    --jp-tint-deep: var(--primary-100);

    /* Bootstrap, re-pointed at the tokens. */
    --bs-primary: var(--primary);
    --bs-primary-rgb: 79, 70, 229;
    --bs-secondary-rgb: 100, 116, 139;
    --bs-success: var(--success);
    --bs-success-rgb: 16, 185, 129;
    --bs-warning: var(--warning);
    --bs-warning-rgb: 245, 158, 11;
    --bs-danger: var(--danger);
    --bs-danger-rgb: 239, 68, 68;
    --bs-info: var(--accent);
    --bs-info-rgb: 6, 182, 212;
    --bs-body-font-family: var(--font-body);
    --bs-body-color: var(--text);
    --bs-body-bg: var(--background);
    --bs-secondary-color: var(--muted);
    --bs-tertiary-bg: var(--background);
    --bs-border-color: var(--border);
    --bs-link-color: var(--primary);
    --bs-link-color-rgb: 79, 70, 229;
    --bs-link-hover-color: var(--primary-600);
    --bs-border-radius: var(--radius-sm);
    --bs-border-radius-lg: var(--radius);
    --bs-focus-ring-color: rgba(79, 70, 229, .25);
    --bs-primary-bg-subtle: var(--primary-50);
    --bs-primary-text-emphasis: var(--primary-600);
    --bs-primary-border-subtle: var(--primary-100);
}

/* Dark mode: same system, different values (§47). */
[data-bs-theme="dark"] {
    --primary: #818CF8;
    --primary-600: #6366F1;
    --primary-50: rgba(129, 140, 248, .12);
    --primary-100: rgba(129, 140, 248, .22);
    --background: #0B1120;
    --surface: #111827;
    --surface-2: #1E293B;
    --text: #F8FAFC;
    --muted: #94A3B8;
    --border: #1F2A3D;
    --ink: #F8FAFC;
    --gradient-soft: linear-gradient(180deg, #111827 0%, #0B1120 100%);
    --shadow: 0 4px 16px rgba(0, 0, 0, .35);
    --shadow-lg: 0 18px 40px rgba(0, 0, 0, .45);
    --ring: 0 0 0 4px rgba(129, 140, 248, .3);

    --bs-primary-rgb: 129, 140, 248;
    --bs-body-color: var(--text);
    --bs-body-bg: var(--background);
    --bs-emphasis-color: var(--text);
    --bs-secondary-color: var(--muted);
    --bs-tertiary-bg: var(--surface-2);
    --bs-secondary-bg: var(--surface-2);
    --bs-border-color: var(--border);
    --bs-link-color: var(--primary);
    --bs-link-color-rgb: 129, 140, 248;
    --bs-link-hover-color: #A5B4FC;
    color-scheme: dark;
}

/* ---- 2. Base ------------------------------------------------------------ */
html { scroll-behavior: smooth; }
body {
    font-family: var(--font-body);
    color: var(--text);
    background: var(--background);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
.bg-body-tertiary { background-color: var(--background) !important; }

h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5, .display-font {
    font-family: var(--font-display);
    letter-spacing: -.02em;
    color: var(--text);
}
a { text-decoration: none; }
::selection { background: var(--primary-100); }

/* Visible, consistent focus for keyboard users (§42). */
:focus-visible { outline: none; box-shadow: var(--ring) !important; border-radius: var(--radius-sm); }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--primary); box-shadow: var(--ring); }

.skip-link {
    position: absolute; left: 1rem; top: -3rem; z-index: 2000;
    background: var(--primary); color: #fff; padding: .6rem 1rem; border-radius: var(--radius-sm);
    transition: top .2s var(--ease);
}
.skip-link:focus { top: 1rem; color: #fff; }

/* ---- 3. Buttons --------------------------------------------------------- */
.btn { border-radius: var(--radius-sm); font-weight: 600; transition: transform .15s var(--ease), box-shadow .15s var(--ease), background-color .15s, border-color .15s, color .15s; }
.btn:active { transform: scale(.98); }
.btn-lg { padding: .8rem 1.5rem; border-radius: 12px; }

.btn-primary, .btn-primary:focus {
    --bs-btn-bg: var(--primary); --bs-btn-border-color: var(--primary);
    --bs-btn-hover-bg: var(--primary-600); --bs-btn-hover-border-color: var(--primary-600);
    --bs-btn-active-bg: var(--primary-600); --bs-btn-active-border-color: var(--primary-600);
    --bs-btn-disabled-bg: var(--primary); --bs-btn-disabled-border-color: var(--primary);
    color: #fff;
}
.btn-primary:hover { box-shadow: 0 8px 20px rgba(79, 70, 229, .28); }
/* In dark mode --primary is a light indigo for text and links; white text on
   it would fail contrast, so filled buttons keep the deep brand indigo. */
[data-bs-theme="dark"] .btn-primary {
    --bs-btn-bg: #4F46E5; --bs-btn-border-color: #4F46E5;
    --bs-btn-hover-bg: #4338CA; --bs-btn-hover-border-color: #4338CA;
    --bs-btn-active-bg: #4338CA; --bs-btn-active-border-color: #4338CA;
}
[data-bs-theme="dark"] .btn-gradient { background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%); }
[data-bs-theme="dark"] .navbar-brand-mark, [data-bs-theme="dark"] .icon-tile.gradient, [data-bs-theme="dark"] .badge-premium { background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%); }
.btn-outline-primary {
    --bs-btn-color: var(--primary); --bs-btn-border-color: var(--primary);
    --bs-btn-hover-bg: var(--primary); --bs-btn-hover-border-color: var(--primary);
    --bs-btn-active-bg: var(--primary-600); --bs-btn-active-border-color: var(--primary-600);
}
.btn-gradient {
    background: var(--gradient-brand); color: #fff; border: 0;
    box-shadow: 0 10px 24px rgba(79, 70, 229, .30);
}
.btn-gradient:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 14px 30px rgba(79, 70, 229, .36); }
.btn-soft { background: var(--primary-50); color: var(--primary); border: 1px solid transparent; }
.btn-soft:hover { background: var(--primary-100); color: var(--primary-600); }
.btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--border); }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }
.btn-icon { width: 40px; height: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; }

.text-primary { color: var(--primary) !important; }
.bg-primary { background-color: var(--primary) !important; }
.link-primary { color: var(--primary); }
.text-gradient { background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---- 4. Surfaces -------------------------------------------------------- */
.card {
    --bs-card-bg: var(--surface);
    --bs-card-border-color: var(--border);
    --bs-card-border-radius: var(--radius);
    --bs-card-inner-border-radius: calc(var(--radius) - 1px);
    --bs-card-cap-bg: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}
.card-header, .card-footer { border-color: var(--border); }
.surface { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.surface-lg { border-radius: var(--radius-lg); }
.lift { transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease); }
.lift:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--primary-100); }

.badge { font-weight: 600; letter-spacing: .01em; }
.badge-soft { background: var(--primary-50); color: var(--primary); border-radius: var(--radius-pill); padding: .35em .75em; font-weight: 600; font-size: .75rem; }
.badge-soon { background: var(--surface-2); color: var(--muted); border: 1px dashed var(--border); border-radius: var(--radius-pill); padding: .3em .7em; font-size: .7rem; font-weight: 600; }
.badge-premium { background: var(--gradient-brand); color: #fff; border-radius: var(--radius-pill); padding: .3em .7em; font-size: .7rem; font-weight: 700; }

.eyebrow {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--primary); background: var(--primary-50); padding: .4rem .85rem; border-radius: var(--radius-pill);
}

.section { padding-block: clamp(3.5rem, 7vw, 6rem); }
.section-title { font-size: clamp(1.75rem, 3.2vw, 2.6rem); font-weight: 800; line-height: 1.15; margin-bottom: .75rem; }
.section-lead { color: var(--muted); font-size: 1.075rem; max-width: 40rem; }

.icon-tile {
    width: 48px; height: 48px; border-radius: 14px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--primary-50); color: var(--primary); font-size: 1.35rem;
}
.icon-tile.gradient { background: var(--gradient-brand); color: #fff; }
.icon-tile.cool { background: rgba(6, 182, 212, .12); color: var(--accent); }
.icon-tile.success { background: rgba(16, 185, 129, .12); color: var(--success); }
.icon-tile.warning { background: rgba(245, 158, 11, .14); color: var(--warning); }

/* Legacy utility classes, restyled on tokens. */
.skill-chip {
    display: inline-block; font-size: .78rem; font-weight: 500; padding: .25rem .65rem;
    border-radius: var(--radius-pill); background: var(--surface-2); color: var(--text);
    border: 1px solid var(--border); margin: 0 .3rem .35rem 0;
}
.stat-tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem 1.25rem; box-shadow: var(--shadow-sm); }
.stat-tile .value { font-family: var(--font-display); font-size: 1.75rem; font-weight: 800; line-height: 1.1; color: var(--text); }
.stat-tile .label { font-size: .82rem; color: var(--muted); }
.company-logo { width: 52px; height: 52px; object-fit: contain; border: 1px solid var(--border); border-radius: 12px; background: #fff; padding: 5px; }
.company-logo-lg { width: 96px; height: 96px; border-radius: 20px; }
.prose { white-space: pre-line; line-height: 1.75; color: var(--text); }

/* ---- 5. Navbar (§5) ----------------------------------------------------- */
.site-nav {
    height: var(--nav-h);
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    border-bottom: 1px solid transparent;
    transition: height .25s var(--ease), background-color .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
    z-index: 1030;
}
.site-nav.is-scrolled {
    height: 60px;
    background: color-mix(in srgb, var(--surface) 78%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom-color: var(--border);
    box-shadow: 0 6px 20px rgba(15, 23, 42, .06);
}
.site-nav .navbar-brand { font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; color: var(--text); letter-spacing: -.02em; }
.site-nav .nav-link { color: var(--muted); font-weight: 500; padding: .5rem .85rem !important; border-radius: var(--radius-sm); }
.site-nav .nav-link:hover, .site-nav .nav-link.active { color: var(--text); background: var(--surface-2); }
.navbar-brand-mark {
    width: 36px; height: 36px; border-radius: 11px; background: var(--gradient-brand); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 800; font-size: .95rem; letter-spacing: 0;
    box-shadow: 0 6px 16px rgba(79, 70, 229, .35);
}
.site-nav .dropdown-menu, .dropdown-menu {
    border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg);
    padding: .5rem; --bs-dropdown-bg: var(--surface); --bs-dropdown-link-color: var(--text);
    --bs-dropdown-link-hover-bg: var(--surface-2); --bs-dropdown-link-active-bg: var(--primary);
    animation: pop-in .16s var(--ease);
}
.dropdown-item { border-radius: var(--radius-sm); padding: .5rem .75rem; font-size: .92rem; }
.nav-mega .dropdown-item small { display: block; color: var(--muted); font-size: .78rem; white-space: normal; }
.theme-toggle .bi-sun { display: none; }
[data-bs-theme="dark"] .theme-toggle .bi-sun { display: inline; }
[data-bs-theme="dark"] .theme-toggle .bi-moon-stars { display: none; }
.notif-dot { position: absolute; top: 6px; right: 6px; min-width: 18px; height: 18px; font-size: .66rem; border-radius: 9px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; background: var(--danger); color: #fff; border: 2px solid var(--surface); }

@media (max-width: 991.98px) {
    .site-nav { height: auto; min-height: 64px; }
    .site-nav .navbar-collapse { padding: .75rem 0 1rem; }
}

/* ---- 6. Hero (§6, §7) --------------------------------------------------- */
.hero-v2 { position: relative; overflow: hidden; background: var(--gradient-soft); }
.hero-v2::before, .hero-v2::after {
    content: ""; position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; pointer-events: none;
}
.hero-v2::before { width: 520px; height: 520px; background: rgba(124, 58, 237, .18); top: -180px; right: -120px; }
.hero-v2::after { width: 420px; height: 420px; background: rgba(6, 182, 212, .14); bottom: -200px; left: -140px; }
.hero-v2 .container { position: relative; z-index: 1; }
.hero-title-v2 {
    font-family: var(--font-display); font-weight: 800; line-height: 1.05; letter-spacing: -.035em;
    font-size: clamp(2.4rem, 5.4vw, 4rem); margin-bottom: 1.1rem;
}
.hero-lead { color: var(--muted); font-size: clamp(1.05rem, 1.5vw, 1.2rem); line-height: 1.6; max-width: 34rem; }

.search-panel {
    background: var(--surface); border: 1px solid var(--border); border-radius: 18px;
    box-shadow: var(--shadow-lg); padding: .5rem;
}
.search-panel .field { position: relative; }
.search-panel .field > i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 1.1rem; pointer-events: none; }
.search-panel .form-control, .search-panel .form-select {
    border: 0; background-color: transparent; box-shadow: none; height: 56px; padding-left: 46px; font-size: 1rem; color: var(--text);
}
.search-panel .divider { border-left: 1px solid var(--border); }
.search-panel .btn { height: 56px; border-radius: 13px; padding-inline: 1.75rem; white-space: nowrap; }
@media (max-width: 991.98px) { .search-panel .divider { border-left: 0; border-top: 1px solid var(--border); } }

.chip-link {
    display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; font-weight: 500;
    color: var(--text); background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-pill); padding: .38rem .9rem; margin: 0 .4rem .5rem 0;
    transition: all .15s var(--ease);
}
.chip-link:hover { color: var(--primary); border-color: var(--primary); background: var(--primary-50); }

.hero-visual { position: relative; }
.hero-photo {
    width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
    border-radius: 28px; box-shadow: var(--shadow-lg); display: block;
}
.hero-visual::before {
    content: ""; position: absolute; inset: 22px -22px -22px 22px; border-radius: 30px;
    background: var(--gradient-brand); opacity: .14; z-index: -1;
}
.float-card {
    position: absolute; display: flex; align-items: center; gap: .7rem;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
    border-radius: 16px; padding: .7rem .95rem; box-shadow: var(--shadow-lg);
    font-size: .85rem; color: var(--text); white-space: nowrap;
    animation: float 6s ease-in-out infinite;
}
.float-card strong { font-family: var(--font-display); font-size: 1rem; display: block; line-height: 1.15; }
.float-card small { color: var(--muted); font-size: .74rem; }
.float-card .icon-tile { width: 38px; height: 38px; border-radius: 11px; font-size: 1.05rem; }
.float-card.fc-1 { top: 8%; left: -8%; }
.float-card.fc-2 { top: 42%; right: -7%; animation-delay: -2s; }
.float-card.fc-3 { bottom: 9%; left: -4%; animation-delay: -4s; }
.float-card.fc-4 { bottom: -5%; right: 12%; animation-delay: -3s; }
@media (max-width: 1199.98px) { .float-card.fc-1, .float-card.fc-3 { left: 2%; } .float-card.fc-2 { right: 2%; } }

@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes pop-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }

/* ---- 7. Stats + trust ---------------------------------------------------- */
.stats-strip { border-block: 1px solid var(--border); background: var(--surface); }
.stat-inline { display: flex; align-items: center; gap: .9rem; }
.stat-inline .num { font-family: var(--font-display); font-size: 1.7rem; font-weight: 800; line-height: 1; color: var(--text); }
.stat-inline .lbl { color: var(--muted); font-size: .85rem; }

.feature-card { height: 100%; padding: 1.5rem; }
.feature-card h3 { font-size: 1.08rem; font-weight: 700; margin: 1rem 0 .4rem; }
.feature-card p { color: var(--muted); font-size: .92rem; margin: 0; }

.category-tile { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.1rem; color: var(--text); }
.category-tile:hover { color: var(--text); }
.category-tile .count { color: var(--muted); font-size: .8rem; }
.category-tile .bi-arrow-right { margin-left: auto; color: var(--muted); transition: transform .2s var(--ease), color .2s; }
.category-tile:hover .bi-arrow-right { transform: translateX(3px); color: var(--primary); }

.photo-card { position: relative; overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.photo-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.photo-card:hover img { transform: scale(1.04); }

.split-band { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
.split-band .photo { position: relative; min-height: 280px; }
/* The <picture> must fill the column, or the photo stops at its natural
   height and leaves a gap beside a taller text column. */
.split-band .photo picture { position: absolute; inset: 0; display: block; }
.split-band .photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li { display: flex; gap: .6rem; align-items: flex-start; margin-bottom: .6rem; color: var(--text); }
.check-list li i { color: var(--success); margin-top: .15rem; }

.cta-band {
    position: relative; overflow: hidden; border-radius: var(--radius-lg);
    background: var(--gradient-brand); color: #fff; padding: clamp(2rem, 5vw, 3.5rem);
}
.cta-band::after { content: ""; position: absolute; width: 380px; height: 380px; right: -120px; top: -140px; border-radius: 50%; background: rgba(6, 182, 212, .35); filter: blur(60px); }
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { color: #fff; }
.cta-band .btn-light { color: var(--primary-600); }

/* ---- 8. Job cards (§9) --------------------------------------------------- */
.job-card { transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease); }
.job-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--primary-100); }
.jcard { position: relative; border-radius: var(--radius); }
.jcard .card-body { padding: 1.25rem 1.35rem; }
.jcard .title { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; color: var(--text); line-height: 1.3; }
.jcard .title:hover { color: var(--primary); }
.jcard .company { color: var(--muted); font-size: .9rem; }
.jcard .meta { display: flex; flex-wrap: wrap; gap: .35rem 1rem; color: var(--muted); font-size: .86rem; }
.jcard .meta i { margin-right: .3rem; }
.jcard .tag { display: inline-block; font-size: .75rem; font-weight: 600; padding: .25rem .6rem; border-radius: var(--radius-pill); background: var(--surface-2); color: var(--text); }
.jcard .tag.featured { background: rgba(245, 158, 11, .14); color: #B45309; }
[data-bs-theme="dark"] .jcard .tag.featured { color: #FBBF24; }
.jcard .card-footer { background: transparent; border-top: 1px dashed var(--border); padding: .8rem 1.35rem; }
.save-btn { color: var(--muted); }
.save-btn.is-saved, .save-btn:hover { color: var(--primary); }
.save-btn.is-saved i { animation: bookmark-pop .35s var(--ease); }
@keyframes bookmark-pop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }

/* ---- 9. Search page (§8) ------------------------------------------------ */
.filter-panel { position: sticky; top: calc(var(--nav-h) + 1rem); }
.filter-card .card-body { padding: 1.25rem; }
.filter-card .form-label { font-size: .82rem; font-weight: 600; color: var(--text); }
.filter-group + .filter-group { border-top: 1px solid var(--border); padding-top: 1rem; margin-top: 1rem; }
.results-bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .75rem; margin-bottom: 1rem; }
@media (max-width: 991.98px) { .filter-panel { position: static; } }

/* ---- 10. Job details (§10) ---------------------------------------------- */
.job-hero { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; }
.job-hero .band { height: 84px; background: var(--gradient-brand); }
/* Only the logo overlaps the band; the title sits below it. */
.job-hero .body { padding: 0 1.75rem 1.5rem; }
.job-hero .company-logo-lg { position: relative; margin-top: -42px; width: 84px; height: 84px; background: #fff; box-shadow: var(--shadow); }
.fact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; }
@media (max-width: 575.98px) { .fact-grid { grid-template-columns: 1fr 1fr; gap: .5rem; } .job-hero .body { padding-inline: 1rem; } }
.fact { background: var(--surface-2); border-radius: 12px; padding: .75rem .9rem; }
.fact .k { color: var(--muted); font-size: .76rem; }
.fact .v { font-weight: 600; font-size: .92rem; color: var(--text); }
.content-card h2 { font-size: 1.15rem; font-weight: 700; margin-bottom: .9rem; }
.sticky-side { position: sticky; top: calc(var(--nav-h) + 1rem); }
.mobile-apply-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1025;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-top: 1px solid var(--border); padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom));
}
@media (max-width: 991.98px) { .sticky-side { position: static; } body.has-apply-bar { padding-bottom: 84px; } }

/* ---- 11. Company page (§28) --------------------------------------------- */
.company-cover { height: clamp(160px, 24vw, 260px); border-radius: var(--radius-lg); overflow: hidden; background: var(--gradient-brand); }
/* No cover uploaded: a short band with a soft pattern, not a big empty slab. */
.company-cover.is-empty {
    height: 140px;
    background:
        radial-gradient(circle at 20% 30%, rgba(255, 255, 255, .18) 0 2px, transparent 3px) 0 0 / 28px 28px,
        var(--gradient-brand);
}
.company-cover img { width: 100%; height: 100%; object-fit: cover; }
.company-head { margin-top: -56px; padding-inline: 1.5rem; }

/* ---- 12. Dashboards ----------------------------------------------------- */
.sidebar-nav .nav-link {
    color: var(--muted); border-radius: 10px; padding: .55rem .8rem;
    display: flex; align-items: center; gap: .7rem; font-size: .92rem; font-weight: 500;
    transition: background-color .15s, color .15s;
}
.sidebar-nav .nav-link i { font-size: 1.05rem; }
.sidebar-nav .nav-link:hover { background: var(--surface-2); color: var(--text); }
.sidebar-nav .nav-link.active { background: var(--primary-50); color: var(--primary); font-weight: 600; }
.timeline { list-style: none; padding-left: 0; margin: 0; }
.timeline li { position: relative; padding-left: 1.6rem; padding-bottom: 1.1rem; border-left: 2px solid var(--border); margin-left: .4rem; }
.timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline li::before { content: ''; position: absolute; left: -7px; top: .28rem; width: 12px; height: 12px; border-radius: 50%; background: var(--border); }
.timeline li.done::before { background: var(--primary); }
.table { --bs-table-bg: transparent; --bs-table-color: var(--text); --bs-table-border-color: var(--border); }
.table-light { --bs-table-bg: var(--surface-2); --bs-table-color: var(--text); --bs-table-border-color: var(--border); }
.social-link { width: 38px; height: 38px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; background: var(--primary-50); color: var(--primary); font-size: 1.05rem; transition: all .15s var(--ease); }
.social-link:hover { background: var(--primary); color: #fff; transform: translateY(-2px); }

/* ---- 12b. App shell: dashboards (§11, §21, §29) -------------------------- */
.app-shell { display: flex; min-height: 100vh; }
.app-sidebar {
    width: 264px; flex-shrink: 0; background: var(--surface); border-right: 1px solid var(--border);
    display: flex; flex-direction: column;
}
@media (min-width: 992px) {
    .app-sidebar { position: sticky; top: 0; height: 100vh; }
}
/* Scrolls in both the desktop sidebar and the phone drawer. */
.app-sidebar .sidebar-nav { overflow-y: auto; }
.app-sidebar-head { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.25rem; }
.app-sidebar-head .brand-text { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; letter-spacing: -.02em; color: var(--text); }
.app-sidebar-context {
    margin: 0 1rem .75rem; padding: .5rem .75rem; border-radius: 10px; background: var(--surface-2);
    font-size: .8rem; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: .5rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.context-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); flex-shrink: 0; box-shadow: 0 0 0 3px rgba(16, 185, 129, .18); }
.app-sidebar .sidebar-nav { flex: 1 1 auto; min-height: 0; padding: 0 .75rem 1rem; gap: 2px; flex-wrap: nowrap; }
/* Long menus (admin) must scroll, not squash their links to fit. */
.app-sidebar .sidebar-nav > * { flex-shrink: 0; }
.app-sidebar-foot { border-top: 1px solid var(--border); padding: .9rem 1rem; }
.app-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.app-topbar {
    position: sticky; top: 0; z-index: 1020; height: 64px; display: flex; align-items: center; gap: .75rem;
    padding: 0 1.5rem; border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--background) 82%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px);
}
.app-topbar-title { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; color: var(--text); }
.app-content { padding: 1.75rem 1.5rem 2.5rem; width: 100%; max-width: 1480px; }
@media (max-width: 991.98px) {
    .app-topbar { padding: 0 .75rem; }
    .app-content { padding: 1.25rem 1rem 2rem; }
    .app-sidebar { --bs-offcanvas-width: 280px; }
}

/* Sidebar links: one line, no wrapping, grouped by section labels. */
.sidebar-nav .nav-link { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-nav .nav-section,
.sidebar-nav > div.text-uppercase {
    font-size: .68rem !important; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
    color: var(--muted) !important; padding: 1rem .8rem .35rem !important; margin: 0 !important;
}
.sidebar-nav .nav-link .count { margin-left: auto; font-size: .7rem; font-weight: 700; background: var(--primary); color: #fff; border-radius: 999px; padding: .1rem .45rem; }

/* Page header used by dashboard pages. */
.page-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; }
.page-head h1 { font-size: clamp(1.4rem, 2.4vw, 1.85rem); font-weight: 800; margin: 0; }
.page-head p { color: var(--muted); margin: .25rem 0 0; }

/* Stat card with an icon: <div class="stat-card"><span class="icon-tile">…</span><div class="value">…</div><div class="label">…</div></div> */
.stat-card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.15rem 1.25rem; box-shadow: var(--shadow-sm); height: 100%; transition: transform .2s var(--ease), box-shadow .2s var(--ease); color: var(--text); display: block; }
a.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); color: var(--text); }
.stat-card .icon-tile { width: 42px; height: 42px; border-radius: 12px; font-size: 1.15rem; margin-bottom: .9rem; }
.stat-card .value { font-family: var(--font-display); font-size: 1.85rem; font-weight: 800; line-height: 1; }
.stat-card .label { color: var(--muted); font-size: .84rem; margin-top: .3rem; }
.stat-card .trend { position: absolute; top: 1.15rem; right: 1.15rem; font-size: .74rem; font-weight: 600; color: var(--success); background: rgba(16, 185, 129, .1); border-radius: 999px; padding: .15rem .5rem; }
.stat-card .trend.flat { color: var(--muted); background: var(--surface-2); }
.icon-tile.sm { width: 34px; height: 34px; border-radius: 10px; font-size: .95rem; }
.icon-tile.danger { background: rgba(239, 68, 68, .1); color: var(--danger); }
.icon-tile.secondary { background: rgba(124, 58, 237, .1); color: var(--secondary); }

/* Progress ring (§12, §13): <div class="ring" style="--value: 72">72%</div> */
.ring {
    --value: 0; --size: 112px; --thickness: 10px;
    width: var(--size); height: var(--size); border-radius: 50%; flex-shrink: 0;
    display: grid; place-items: center; position: relative;
    background: conic-gradient(var(--primary) calc(var(--value) * 1%), var(--surface-2) 0);
    font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; color: var(--text);
}
.ring::before { content: ""; position: absolute; inset: var(--thickness); border-radius: 50%; background: var(--surface); }
.ring > span { position: relative; }
.ring.sm { --size: 56px; --thickness: 6px; font-size: .9rem; }
.ring.success { background: conic-gradient(var(--success) calc(var(--value) * 1%), var(--surface-2) 0); }

.greeting-card { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--gradient-brand); color: #fff; padding: 1.75rem; }
.greeting-card::after { content: ""; position: absolute; width: 320px; height: 320px; right: -80px; top: -120px; border-radius: 50%; background: rgba(6, 182, 212, .35); filter: blur(50px); }
.greeting-card > * { position: relative; z-index: 1; }
.greeting-card h1 { color: #fff; font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 800; }
.greeting-card .sub { color: rgba(255, 255, 255, .82); }
.greeting-card .ring { --size: 96px; background: conic-gradient(#fff calc(var(--value) * 1%), rgba(255, 255, 255, .2) 0); color: #fff; }
.greeting-card .ring::before { background: #5B45E8; }
.greeting-card .btn-light { color: var(--primary-600); font-weight: 700; }
.greeting-card .pill { display: inline-flex; align-items: center; gap: .4rem; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; padding: .3rem .75rem; font-size: .8rem; }

/* ---- 12c. Global component polish ---------------------------------------- */
/* Status badges: soft tints instead of saturated blocks (§45). */
.badge { font-size: .72rem; padding: .38em .7em; border-radius: 999px; }
.badge.bg-success, .badge.text-bg-success { background: rgba(16, 185, 129, .14) !important; color: #047857 !important; }
.badge.bg-danger, .badge.text-bg-danger { background: rgba(239, 68, 68, .12) !important; color: #B91C1C !important; }
.badge.bg-warning, .badge.text-bg-warning { background: rgba(245, 158, 11, .16) !important; color: #B45309 !important; }
.badge.bg-info, .badge.text-bg-info { background: rgba(6, 182, 212, .14) !important; color: #0E7490 !important; }
.badge.bg-primary, .badge.text-bg-primary { background: var(--primary-50) !important; color: var(--primary) !important; }
.badge.bg-secondary, .badge.text-bg-secondary { background: var(--surface-2) !important; color: var(--muted) !important; }
.badge.bg-dark, .badge.text-bg-dark { background: rgba(15, 23, 42, .08) !important; color: var(--text) !important; }
.badge.bg-light, .badge.text-bg-light { background: var(--surface-2) !important; color: var(--text) !important; }
[data-bs-theme="dark"] .badge.bg-success, [data-bs-theme="dark"] .badge.text-bg-success { color: #34D399 !important; }
[data-bs-theme="dark"] .badge.bg-danger, [data-bs-theme="dark"] .badge.text-bg-danger { color: #F87171 !important; }
[data-bs-theme="dark"] .badge.bg-warning, [data-bs-theme="dark"] .badge.text-bg-warning { color: #FBBF24 !important; }
[data-bs-theme="dark"] .badge.bg-info, [data-bs-theme="dark"] .badge.text-bg-info { color: #22D3EE !important; }
[data-bs-theme="dark"] .badge.bg-dark, [data-bs-theme="dark"] .badge.text-bg-dark { background: rgba(248, 250, 252, .1) !important; }
/* Pill links like the "Active subs" count keep a filled look. */
a.badge.bg-primary { background: var(--primary) !important; color: #fff !important; }

/* Cards and tables inside the app. */
.card-header { background: var(--surface) !important; padding: 1rem 1.25rem; }
.card-header h2, .card-header .h6 { font-size: .98rem !important; }
.card-body { padding: 1.25rem; }
.table { margin-bottom: 0; }
.table > :not(caption) > * > * { padding: .8rem 1rem; border-bottom-color: var(--border); }
.table thead th, .table .table-light th {
    font-size: .72rem !important; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    color: var(--muted) !important; background: var(--surface-2) !important; border-bottom: 1px solid var(--border);
}
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: var(--primary-50); }
.card > .table-responsive:last-child .table tr:last-child > * { border-bottom: 0; }

/* Tabs: underline style. */
.nav-tabs { border-bottom: 1px solid var(--border); gap: .25rem; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.nav-tabs .nav-link { border: 0; border-bottom: 2px solid transparent; color: var(--muted); font-weight: 600; padding: .7rem .9rem; white-space: nowrap; background: transparent; }
.nav-tabs .nav-link:hover { color: var(--text); border-bottom-color: var(--border); }
.nav-tabs .nav-link.active { color: var(--primary); border-bottom-color: var(--primary); background: transparent; }
.nav-pills .nav-link.active { background: var(--primary); }

/* Forms. */
.form-control, .form-select { border-color: var(--border); border-radius: 10px; min-height: 42px; }
.form-control-sm, .form-select-sm { min-height: 34px; border-radius: 8px; }
.form-control[readonly], .form-control:disabled { background: var(--surface-2); }
.form-label { font-weight: 600; font-size: .88rem; color: var(--text); }
.form-text { color: var(--muted); }
.form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }
input[type="file"].form-control { padding: .45rem .6rem; }
input[type="file"]::file-selector-button { border: 0; border-radius: 8px; background: var(--primary-50); color: var(--primary); font-weight: 600; padding: .35rem .8rem; margin-right: .75rem; }

.progress { background: var(--surface-2); border-radius: 999px; }
.progress-bar { border-radius: 999px; }
.pagination { --bs-pagination-border-radius: 10px; --bs-pagination-color: var(--text); --bs-pagination-active-bg: var(--primary); --bs-pagination-active-border-color: var(--primary); --bs-pagination-border-color: var(--border); --bs-pagination-bg: var(--surface); gap: .25rem; }
.pagination .page-link { border-radius: 10px !important; }
.list-group-item { border-color: var(--border); }
.list-group { --bs-list-group-active-bg: var(--primary); --bs-list-group-active-border-color: var(--primary); --bs-list-group-action-hover-bg: var(--surface-2); }

/* Views use .min-w-0 on flex children so long names truncate instead of
   pushing the card wider than its column. Bootstrap does not ship it. */
.min-w-0 { min-width: 0 !important; }

/* Table cells stay on one line (dates, amounts, statuses) and the table
   scrolls sideways when it must; add .text-wrap to a cell that should wrap. */
.table-responsive .table td, .table-responsive .table th { white-space: nowrap; }
.table-responsive .table td.text-wrap { white-space: normal; }
/* Long ids (transaction, order, event) may break so the row still fits. */
.table-responsive .table td:has(> code) { white-space: normal; word-break: break-all; min-width: 110px; max-width: 200px; }
.notif-menu { width: min(360px, 92vw); }
.notif-menu .is-unread { background: var(--primary-50); }

/* ---- 12c2. Smart Resume Check --------------------------------------------- */
.source-option { cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.source-option:has(input:checked) { border-color: var(--primary); box-shadow: var(--ring); }
.source-option:has(input:disabled) { cursor: not-allowed; }
.dropzone {
    display: block; text-align: center; cursor: pointer; padding: 2.25rem 1rem; border-radius: var(--radius);
    border: 2px dashed var(--border); background: var(--surface-2); transition: border-color .15s, background .15s;
}
.dropzone:hover, .dropzone.is-over { border-color: var(--primary); background: var(--primary-50); }
.dropzone:focus-within { box-shadow: var(--ring); }
.scan-overlay { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 1rem; background: rgba(15, 23, 42, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.scan-doc { position: relative; width: 72px; height: 92px; margin: 0 auto; border-radius: 10px; border: 2px solid var(--primary); background: repeating-linear-gradient(var(--surface), var(--surface) 10px, var(--primary-50) 10px, var(--primary-50) 14px); overflow: hidden; }
.scan-doc span { position: absolute; left: 0; right: 0; height: 3px; background: var(--accent); box-shadow: 0 0 12px var(--accent); animation: scan 1.4s ease-in-out infinite alternate; }
@keyframes scan { from { top: 4px; } to { top: calc(100% - 7px); } }
.spin { display: inline-block; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.score-ring { font-size: 2.6rem; line-height: 1; text-align: center; }

/* ---- 12d. Auth split screen ---------------------------------------------- */
.auth-shell { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100vh; background: var(--surface); }
@media (min-width: 992px) { .auth-shell { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } }
.auth-form-col { display: flex; flex-direction: column; padding: 1.75rem clamp(1.25rem, 5vw, 4.5rem); }
.auth-form { width: 100%; max-width: 480px; margin-inline: auto; }
.auth-form.wide { max-width: 640px; }
/* The auth views were written as cards; inside the split screen they read as
   plain forms. */
.auth-form .card { border: 0; box-shadow: none; background: transparent; }
.auth-form .card-body { padding: 0 !important; }
.auth-form .card.border-warning { border: 1px dashed var(--warning) !important; border-radius: var(--radius); background: rgba(245, 158, 11, .06); }
.auth-form .card.border-warning .card-body { padding: 1rem 1.1rem !important; }
.auth-form h1 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); font-weight: 800; }
.auth-form .form-control, .auth-form .form-select { min-height: 48px; }
.auth-form .btn-primary { min-height: 48px; }
.auth-art { position: relative; margin: 1rem; border-radius: 28px; overflow: hidden; align-items: flex-end; }
.auth-art picture, .auth-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.auth-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(79, 70, 229, .15) 0%, rgba(49, 36, 160, .88) 100%); }
.auth-art-content { position: relative; z-index: 1; padding: 3rem; color: #fff; }
.auth-art-content h2 { color: #fff; font-size: clamp(1.8rem, 2.8vw, 2.6rem); font-weight: 800; line-height: 1.1; max-width: 26rem; }
.auth-art-content li { display: flex; gap: .6rem; margin-bottom: .55rem; color: rgba(255, 255, 255, .92); }
.auth-art-content li i { color: #A5F3FC; }

/* Floating status cards over the photo panel. */
.auth-float { position: absolute; z-index: 2; display: flex; align-items: center; gap: .75rem; padding: .8rem 1.1rem .8rem .8rem;
    border-radius: 18px; background: rgba(255, 255, 255, .9); color: var(--ink); box-shadow: 0 20px 45px rgba(15, 23, 42, .25);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); animation: float 6s var(--ease) infinite; }
.auth-float strong { display: block; font-size: .92rem; color: #0F172A; }
.auth-float small { display: block; color: #64748B; font-size: .76rem; }
.auth-float-icon { flex: 0 0 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #fff; font-size: 1.15rem; }
.auth-float-1 { top: 12%; left: 8%; }
.auth-float-2 { top: 30%; right: 7%; animation-delay: -3s; }
@media (prefers-reduced-motion: reduce) { .auth-float { animation: none; } }

/* Login page. */
.auth-login { position: relative; }
.auth-login::before { content: ""; position: absolute; z-index: -1; inset: -12% -20% auto; height: 380px; pointer-events: none;
    background: radial-gradient(40% 55% at 25% 40%, rgba(124, 58, 237, .16), transparent 70%),
                radial-gradient(40% 55% at 75% 30%, rgba(6, 182, 212, .14), transparent 70%); filter: blur(10px); }
.auth-form-col { position: relative; isolation: isolate; overflow-x: clip; }
.login-card { padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: var(--radius-lg); background: var(--surface);
    border: 1px solid var(--border); box-shadow: var(--shadow-lg); }
.login-badge { display: inline-flex; align-items: center; gap: .4rem; margin-bottom: .75rem; padding: .35rem .8rem;
    border-radius: var(--radius-pill); background: var(--primary-50); color: var(--primary); font-weight: 600; font-size: .8rem; }
.input-icon { position: relative; }
.input-icon > .bi { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; transition: color .2s; }
.input-icon .form-control { padding-left: 2.75rem; border-radius: 12px; background: var(--surface-2); border-color: transparent; transition: all .2s var(--ease); }
.input-icon .form-control:focus { background: var(--surface); border-color: var(--primary); box-shadow: var(--ring); }
.input-icon:focus-within > .bi { color: var(--primary); }
.input-icon .form-control.is-invalid { border-color: var(--danger); background-image: none; }
.input-reveal { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); border: 0; background: none;
    color: var(--muted); width: 36px; height: 36px; border-radius: 10px; }
.input-reveal:hover { color: var(--primary); background: var(--primary-50); }
.login-submit { border: 0; border-radius: 12px; background: var(--gradient-brand); box-shadow: 0 10px 24px rgba(79, 70, 229, .35);
    transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.login-submit:hover, .login-submit:focus-visible { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(79, 70, 229, .45); }
.login-submit .bi { transition: transform .2s var(--ease); display: inline-block; }
.login-submit:hover .bi { transform: translateX(4px); }
.login-divider { display: flex; align-items: center; gap: .75rem; margin: 1.25rem 0 .75rem; color: var(--muted); font-size: .82rem; }
.login-divider::before, .login-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.login-role { flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: .55rem; padding: .55rem .75rem; border-radius: 12px;
    border: 1px solid var(--border); color: var(--text); transition: all .2s var(--ease); }
.login-role > .bi { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
    background: var(--primary-50); color: var(--primary); font-size: 1rem; }
.login-role strong { font-size: .88rem; white-space: nowrap; }

/* The login page fits one screen: the shell is locked to the viewport height on
   desktop, and spacing tightens on short screens instead of scrolling. */
@media (min-width: 992px) {
    .auth-shell:has(.auth-login) { height: 100vh; height: 100dvh; min-height: 0; }
    .auth-shell:has(.auth-login) .auth-form-col { padding-block: 1.25rem; overflow-y: auto; }
    .auth-shell:has(.auth-login) .auth-form-col > header { padding-bottom: 1rem !important; }
    .auth-shell:has(.auth-login) .auth-form-col > footer { padding-top: 1rem !important; }
}
@media (min-width: 992px) and (max-height: 760px) {
    .auth-login .login-card { padding: 1.35rem 1.75rem; }
    .auth-login h1 { font-size: 1.6rem; }
    .auth-login .form-control, .auth-login .btn-primary { min-height: 44px; }
    .auth-login .login-badge { display: none; }
    .auth-login .mb-3 { margin-bottom: .7rem !important; }
    .auth-art-content { padding: 2rem; }
    .auth-art-content h2 { font-size: 1.9rem; }
}
@media (max-width: 991.98px) and (max-height: 700px) {
    .auth-shell:has(.auth-login) .auth-form-col { padding-block: .9rem; }
    .auth-shell:has(.auth-login) .auth-form-col > header { padding-bottom: .75rem !important; }
    .auth-shell:has(.auth-login) .auth-form-col > footer { padding-top: .75rem !important; }
    .auth-login .login-card { padding: 1.1rem 1.1rem; }
    .auth-login .login-badge { display: none; }
    .auth-login h1 { font-size: 1.45rem; }
    .auth-login .form-control, .auth-login .btn-primary { min-height: 44px; }
    .auth-login .mb-3 { margin-bottom: .6rem !important; }
    .auth-login .login-divider { margin: .9rem 0 .6rem; }
}@media (min-width: 992px) and (max-height: 640px) {
    .auth-float { display: none; }
    .auth-art-content ul { display: none; }
}
.login-role:hover { border-color: var(--primary); box-shadow: var(--shadow); transform: translateY(-2px); color: var(--text); }
[data-bs-theme="dark"] .login-badge, [data-bs-theme="dark"] .login-role > .bi, [data-bs-theme="dark"] .input-reveal:hover { background: rgba(79, 70, 229, .18); color: #A5B4FC; }

/* ---- 13. Footer (§49) ---------------------------------------------------- */
.site-footer { background: #0F172A; color: #CBD5E1; }
.site-footer h6 { color: #fff; font-family: var(--font-display); font-weight: 700; font-size: .95rem; margin-bottom: 1rem; }
.site-footer a { color: #94A3B8; transition: color .15s; }
.site-footer a:hover { color: #fff; }
.site-footer .brand-name { color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; }
.site-footer .muted { color: #94A3B8; }
.site-footer hr { border-color: rgba(148, 163, 184, .2); opacity: 1; }
.site-footer .social-link { background: rgba(148, 163, 184, .12); color: #E2E8F0; }
.site-footer .social-link:hover { background: var(--primary); color: #fff; }
.site-footer .form-control { background: rgba(148, 163, 184, .1); border-color: rgba(148, 163, 184, .25); color: #fff; }
.site-footer .form-control::placeholder { color: #94A3B8; }
[data-bs-theme="dark"] .site-footer { background: #060B16; }

/* ---- 14. Mobile bottom nav (§35) ---------------------------------------- */
.bottom-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1020; display: flex;
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-top: 1px solid var(--border); padding-bottom: env(safe-area-inset-bottom);
}
.bottom-nav a {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: .55rem 0 .5rem; color: var(--muted); font-size: .7rem; font-weight: 600; min-height: 56px;
}
.bottom-nav a i { font-size: 1.25rem; }
.bottom-nav a.active { color: var(--primary); }
@media (max-width: 991.98px) { body.has-bottom-nav { padding-bottom: 64px; } body.has-bottom-nav .mobile-apply-bar { bottom: 64px; } }

/* ---- 15. States: empty, error, skeleton, toast (§37–§41) ---------------- */
.empty-state { text-align: center; padding: 3rem 1.5rem; }
.empty-state .art {
    width: 88px; height: 88px; margin: 0 auto 1.25rem; border-radius: 26px;
    display: flex; align-items: center; justify-content: center; font-size: 2.2rem;
    background: var(--primary-50); color: var(--primary);
}
.empty-state h3 { font-size: 1.15rem; font-weight: 700; }
.empty-state p { color: var(--muted); max-width: 26rem; margin-inline: auto; }

.error-page { min-height: calc(100vh - var(--nav-h) - 1px); display: flex; align-items: center; }
.error-code { font-family: var(--font-display); font-weight: 800; font-size: clamp(5rem, 16vw, 9rem); line-height: 1; letter-spacing: -.05em; }

.skeleton { position: relative; overflow: hidden; background: var(--surface-2); border-radius: 8px; }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent); animation: shimmer 1.3s infinite; }
[data-bs-theme="dark"] .skeleton::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .06), transparent); }
@keyframes shimmer { 100% { transform: translateX(100%); } }

.toast-stack { position: fixed; right: 1rem; bottom: 1rem; z-index: 1090; display: flex; flex-direction: column; gap: .5rem; }
.toast-v2 {
    display: flex; align-items: center; gap: .6rem; background: var(--text); color: var(--background);
    padding: .75rem 1rem; border-radius: 12px; box-shadow: var(--shadow-lg); font-size: .9rem;
    animation: toast-in .3s var(--ease);
}
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (max-width: 991.98px) { body.has-bottom-nav .toast-stack { bottom: 76px; } }

.alert { border-radius: var(--radius); border-width: 1px; }

/* ---- 16. Scroll reveal + count-up ---------------------------------------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: .08s; }
.reveal-delay-2 { transition-delay: .16s; }
.reveal-delay-3 { transition-delay: .24s; }

/* No script, no hidden content. */
.no-js .reveal { opacity: 1; transform: none; }

/* ---- 17. Dark-mode fixes for Bootstrap utilities used in existing views -- */
[data-bs-theme="dark"] .bg-white { background-color: var(--surface) !important; }
[data-bs-theme="dark"] .bg-light { background-color: var(--surface-2) !important; }
[data-bs-theme="dark"] .text-dark { color: var(--text) !important; }
[data-bs-theme="dark"] .bg-body-tertiary { background-color: var(--background) !important; }
[data-bs-theme="dark"] .company-logo { background: #fff; }
[data-bs-theme="dark"] .border { border-color: var(--border) !important; }
[data-bs-theme="dark"] .list-group { --bs-list-group-bg: var(--surface); --bs-list-group-border-color: var(--border); --bs-list-group-color: var(--text); }
[data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select { background-color: var(--surface-2); border-color: var(--border); color: var(--text); }

/* ---- 18. Motion preferences (§36) ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
    .reveal { opacity: 1; transform: none; }
}