/* ==========================================================================
   WorkLink Baao - Master Design System
   Bootstrap 5 Theme Extension
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design Tokens
   -------------------------------------------------------------------------- */

:root {
    /* Brand */
    --wl-primary: #102a56;
    --wl-primary-hover: #0b1f42;
    --wl-primary-light: #eaf3ff;
    --wl-accent: #e8b500;
    --wl-accent-hover: #c99c00;

    --wl-success: #43b86c;
    --wl-success-light: #f0fdf4;

    --wl-warning: #e8b500;
    --wl-warning-light: #fffbeb;

    --wl-danger: #dc2626;
    --wl-danger-light: #fef2f2;

    /* Neutral surfaces */
    --wl-bg: #f1f3f1;
    --wl-surface: #fafbf9;
    --wl-surface-soft: #f4f6f3;
    --wl-border: #e5e7eb;
    --wl-border-strong: #d1d5db;

    /* Text */
    --wl-text: #26302d;
    --wl-muted-text: #69736f;

    /* Components */
    --wl-card-bg: #fafbf9;
    --wl-input-bg: #fdfefc;

    /* Shape */
    --wl-radius-sm: 8px;
    --wl-radius-md: 10px;
    --wl-radius-lg: 12px;
    --wl-radius-xl: 16px;

    /* Shadows */
    --wl-shadow-sm: 0 4px 20px rgba(0, 0, 0, 0.06);
    --wl-shadow-md: 0 8px 26px rgba(16, 42, 86, 0.10);
    --wl-shadow-hover: 0 12px 30px rgba(16, 42, 86, 0.12);

    /* Typography */
    --wl-font-body: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --wl-font-heading: "Plus Jakarta Sans", "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /* Bootstrap integration */
    --bs-font-sans-serif: var(--wl-font-body);
    --bs-body-bg: var(--wl-bg);
    --bs-body-color: var(--wl-text);
    --bs-primary: var(--wl-primary);
    --bs-primary-rgb: 16, 42, 86;
    --bs-border-color: var(--wl-border);
    --bs-secondary-color: var(--wl-muted-text);
    --bs-tertiary-bg: var(--wl-surface-soft);
    --bs-border-radius: var(--wl-radius-md);
}


/* --------------------------------------------------------------------------
   2. Dark Theme
   -------------------------------------------------------------------------- */

[data-bs-theme="dark"],
[data-theme="dark"],
body.dark-mode {
    color-scheme: dark;

    --wl-bg: #0b0b0c;
    --wl-surface: #151516;
    --wl-surface-soft: #1c1c1e;
    --wl-border: #303033;
    --wl-border-strong: #444448;

    --wl-text: #f0f0f1;
    --wl-muted-text: #a4a4aa;

    --wl-card-bg: #151516;
    --wl-input-bg: #111112;

    --wl-primary: #60a5fa;
    --wl-primary-hover: #93c5fd;
    --wl-accent: #60a5fa;
    --wl-accent-hover: #93c5fd;
    --wl-warning: #60a5fa;

    --wl-primary-light: rgba(96, 165, 250, 0.13);
    --wl-success-light: rgba(22, 163, 74, 0.15);
    --wl-warning-light: rgba(96, 165, 250, 0.15);
    --wl-danger-light: rgba(220, 38, 38, 0.15);

    --wl-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.20);
    --wl-shadow-md: 0 7px 20px rgba(0, 0, 0, 0.28);
    --wl-shadow-hover: 0 10px 24px rgba(0, 0, 0, 0.36);

    --bs-body-bg: var(--wl-bg);
    --bs-body-color: var(--wl-text);
    --bs-border-color: var(--wl-border);
    --bs-secondary-color: var(--wl-muted-text);
    --bs-tertiary-bg: var(--wl-surface-soft);
    --bs-warning: #60a5fa;
    --bs-warning-rgb: 96, 165, 250;
}


/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    font-family: var(--wl-font-body);
    background: var(--wl-bg);
    color: var(--wl-text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-family: var(--wl-font-heading);
    font-weight: 700;
    color: var(--wl-text);
    letter-spacing: -0.025em;
}

p {
    color: inherit;
}

.text-muted {
    color: var(--wl-muted-text) !important;
}

a {
    color: var(--wl-primary);
    text-decoration: none;
    transition: color 0.18s ease;
}

a:hover {
    color: var(--wl-primary-hover);
}

::selection {
    background: rgba(37, 99, 235, 0.18);
}


/* --------------------------------------------------------------------------
   4. Navbar
   -------------------------------------------------------------------------- */

.navbar,
.worklink-navbar {
    background-color: color-mix(in srgb, var(--wl-surface) 94%, transparent) !important;
    border-bottom: 1px solid var(--wl-border);
}

.navbar-brand {
    color: var(--wl-primary) !important;
}

.nav-link {
    color: var(--wl-text) !important;
    font-weight: 500;
    border-radius: var(--wl-radius-sm);
    transition: color 0.18s ease, background-color 0.18s ease;
}

.nav-link:hover,
.nav-link.active {
    color: var(--wl-primary) !important;
    background-color: var(--wl-primary-light);
}

.worklink-navbar .nav-link:not(.dropdown-toggle) {
    position: relative;
}

.worklink-navbar .nav-link:not(.dropdown-toggle)::after {
    content: "";
    position: absolute;
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.25rem;
    height: 2px;
    background: var(--wl-primary);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.2s ease;
}

.worklink-navbar .nav-link:not(.dropdown-toggle):hover::after,
.worklink-navbar .nav-link:not(.dropdown-toggle).active::after {
    transform: scaleX(1);
}

.wl-summary-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    height: 100%;
    padding: 1.15rem;
    color: var(--wl-text);
    background: var(--wl-surface);
    border: 1px solid var(--wl-border);
    border-radius: 10px;
    box-shadow: var(--wl-shadow-sm);
    text-decoration: none;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.wl-summary-card:hover { color: var(--wl-text); border-color: var(--wl-primary); transform: translateY(-2px); box-shadow: var(--wl-shadow-md); }
.wl-summary-card > i { display: grid; place-items: center; width: 46px; height: 46px; flex: 0 0 46px; border-radius: 9px; color: var(--wl-primary); background: var(--wl-primary-light); font-size: 1.25rem; }
.wl-summary-card span { display: flex; flex-direction: column; }
.wl-summary-card strong { font-size: 1.55rem; line-height: 1.1; }
.wl-summary-card small { color: var(--wl-muted); margin-top: 0.2rem; }
.notification-content-link { border-radius: 8px; padding: 0.25rem; }
.notification-content-link:hover { background: var(--wl-surface-soft); }

.admin-dashboard-hero { padding: 1.5rem; border: 1px solid var(--wl-border); border-radius: 12px; background: var(--wl-surface); box-shadow: var(--wl-shadow-sm); }

/* Compact dashboard rhythm: less empty space while preserving readability. */
.app-dashboard {
    max-width: 1320px;
    margin-inline: auto;
    padding: 1.25rem;
}

.app-dashboard .mb-4,
.employer-dashboard .mb-4,
.admin-reports .mb-4 {
    margin-bottom: 1rem !important;
}

.app-dashboard-hero,
.employer-dashboard-hero {
    padding: 1.4rem !important;
}

.contact-page .card-body {
    padding: 1.25rem !important;
}

@media (max-width: 575.98px) {
    .app-dashboard { padding: 0.85rem; }
    .app-dashboard-hero,
    .employer-dashboard-hero { padding: 1.1rem !important; }
}

.dropdown-menu {
    background: var(--wl-surface);
    color: var(--wl-text);
    border: 1px solid var(--wl-border);
    border-radius: var(--wl-radius-md);
    box-shadow: var(--wl-shadow-md);
}

.dropdown-item {
    color: var(--wl-text);
}

.dropdown-item:hover,
.dropdown-item:focus {
    color: var(--wl-primary);
    background: var(--wl-primary-light);
}

.dropdown-divider {
    border-color: var(--wl-border);
}


/* --------------------------------------------------------------------------
   5. Cards
   -------------------------------------------------------------------------- */

.card,
.wl-card {
    background: var(--wl-card-bg);
    color: var(--wl-text);
    border: 1px solid var(--wl-border);
    border-radius: var(--wl-radius-lg);
    box-shadow: var(--wl-shadow-sm);
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        border-color 0.18s ease;
}

.card-hover:hover {
    transform: translateY(-1px);
    border-color: rgba(37, 99, 235, 0.42);
    box-shadow: var(--wl-shadow-md);
}

.card-header {
    padding: 1.2rem 1.4rem;
    background: transparent;
    color: var(--wl-text);
    border-bottom: 1px solid var(--wl-border);
    font-weight: 600;
}

.card-body {
    padding: 1.4rem;
}

.card-footer {
    padding: 1rem 1.4rem;
    background: transparent;
    color: var(--wl-text);
    border-top: 1px solid var(--wl-border);
}


/* --------------------------------------------------------------------------
   6. Dashboard Statistics
   -------------------------------------------------------------------------- */

.stat-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--wl-card-bg);
    border: 1px solid var(--wl-border);
    border-radius: var(--wl-radius-lg);
    box-shadow: var(--wl-shadow-sm);
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        border-color 0.18s ease;
}

.stat-card:hover {
    transform: translateY(-1px);
    border-color: rgba(37, 99, 235, 0.35);
    box-shadow: var(--wl-shadow-md);
}

.stat-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: grid;
    place-items: center;
    border-radius: var(--wl-radius-md);
    font-size: 1.25rem;
}

.stat-icon.primary {
    background: var(--wl-primary-light);
    color: var(--wl-primary);
}

.stat-icon.success {
    background: var(--wl-success-light);
    color: var(--wl-success);
}

.stat-icon.warning {
    background: var(--wl-warning-light);
    color: var(--wl-warning);
}

.stat-icon.danger {
    background: var(--wl-danger-light);
    color: var(--wl-danger);
}


/* --------------------------------------------------------------------------
   7. Buttons
   -------------------------------------------------------------------------- */

.btn {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.58rem 1.15rem;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    transition:
        transform 0.16s ease,
        box-shadow 0.16s ease,
        background-color 0.16s ease,
        border-color 0.16s ease,
        color 0.16s ease;
}

.btn:active {
    transform: translateY(1px);
}

.btn-primary {
    background: var(--wl-primary);
    border-color: var(--wl-primary);
    color: #fff;
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--wl-primary-hover);
    border-color: var(--wl-primary-hover);
    color: #fff;
    box-shadow: 0 5px 14px rgba(37, 99, 235, 0.20);
}

.btn-outline-primary {
    background: transparent;
    border-color: var(--wl-primary);
    color: var(--wl-primary);
}

.btn-outline-primary:hover {
    background: var(--wl-primary);
    border-color: var(--wl-primary);
    color: #fff;
}

.btn-danger {
    background: var(--wl-danger);
    border-color: var(--wl-danger);
    color: #fff;
}

.btn-danger:hover {
    background: #b91c1c;
    border-color: #b91c1c;
    color: #fff;
}

.btn-pill,
.btn-rounded {
    border-radius: 999px;
}


/* --------------------------------------------------------------------------
   8. Forms
   -------------------------------------------------------------------------- */

.form-control,
.form-select {
    min-height: 44px;
    padding: 0.62rem 0.9rem;
    background: var(--wl-input-bg);
    color: var(--wl-text);
    border: 1px solid var(--wl-border);
    border-radius: 10px;
    font-size: 0.92rem;
    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background-color 0.18s ease;
}

.form-control::placeholder {
    color: var(--wl-muted-text);
    opacity: 0.75;
}

.form-control:focus,
.form-select:focus {
    background: var(--wl-input-bg);
    color: var(--wl-text);
    border-color: var(--wl-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.form-label {
    margin-bottom: 0.4rem;
    color: var(--wl-text);
    font-size: 0.86rem;
    font-weight: 600;
}

.input-group-text {
    background: var(--wl-surface-soft);
    color: var(--wl-muted-text);
    border-color: var(--wl-border);
}


/* --------------------------------------------------------------------------
   9. Tables
   -------------------------------------------------------------------------- */

.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--wl-border);
    border-radius: var(--wl-radius-lg);
}

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--wl-text);
    --bs-table-border-color: var(--wl-border);
    --bs-table-hover-bg: var(--wl-primary-light);
    --bs-table-hover-color: var(--wl-text);

    margin-bottom: 0;
    color: var(--wl-text);
    vertical-align: middle;
}

.table th {
    padding: 0.9rem 1.1rem;
    background: var(--wl-surface-soft);
    color: var(--wl-muted-text);
    border-bottom: 1px solid var(--wl-border);
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.045em;
    white-space: nowrap;
}

.table td {
    padding: 0.95rem 1.1rem;
    background: var(--wl-card-bg);
    color: var(--wl-text);
    border-bottom: 1px solid var(--wl-border);
}

.table tbody tr:last-child td {
    border-bottom: 0;
}


/* --------------------------------------------------------------------------
   10. Badges
   -------------------------------------------------------------------------- */

.badge {
    padding: 0.42em 0.75em;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 600;
}

.badge-primary,
.bg-primary-subtle {
    background: var(--wl-primary-light) !important;
    color: var(--wl-primary) !important;
    border: 1px solid rgba(37, 99, 235, 0.18);
}

.badge-success,
.bg-success-subtle {
    background: var(--wl-success-light) !important;
    color: var(--wl-success) !important;
    border: 1px solid rgba(22, 163, 74, 0.18);
}

.badge-warning,
.bg-warning-subtle {
    background: var(--wl-warning-light) !important;
    color: #b45309 !important;
    border: 1px solid rgba(245, 158, 11, 0.18);
}

.badge-danger,
.bg-danger-subtle {
    background: var(--wl-danger-light) !important;
    color: var(--wl-danger) !important;
    border: 1px solid rgba(220, 38, 38, 0.18);
}


/* --------------------------------------------------------------------------
   11. Empty States
   -------------------------------------------------------------------------- */

.empty-state {
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--wl-muted-text);
}

.empty-state-icon {
    margin-bottom: 1rem;
    color: var(--wl-muted-text);
    font-size: 3rem;
    opacity: 0.55;
}


/* --------------------------------------------------------------------------
   12. Footer
   -------------------------------------------------------------------------- */

.footer {
    margin-top: auto;
    padding: 2rem 0;
    background: var(--wl-surface);
    color: var(--wl-muted-text);
    border-top: 1px solid var(--wl-border);
    font-size: 0.86rem;
}


/* ==========================================================================
   HOMEPAGE
   ========================================================================== */

.home-page {
    font-family: var(--wl-font-body);
}


/* --------------------------------------------------------------------------
   Homepage Hero
   -------------------------------------------------------------------------- */

.home-hero {
    position: relative;
    overflow: hidden;
    margin-top: 0.5rem;
    padding: clamp(2.5rem, 6vw, 4.75rem) clamp(1.4rem, 5vw, 4rem);
    background:
        linear-gradient(135deg,
            rgba(37, 99, 235, 0.08),
            rgba(37, 99, 235, 0.015)),
        var(--wl-surface);
    border: 1px solid var(--wl-border);
    border-radius: var(--wl-radius-xl);
}

.home-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 1.35rem;
    padding: 0.42rem 0.75rem;
    background: var(--wl-primary-light);
    color: var(--wl-primary);
    border: 1px solid rgba(37, 99, 235, 0.12);
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
}

.home-title {
    max-width: 720px;
    margin: 0 0 1.15rem;
    color: var(--wl-text);
    font-family: var(--wl-font-heading);
    font-size: clamp(2.35rem, 5vw, 4.1rem);
    font-weight: 800;
    line-height: 1.07;
    letter-spacing: -0.055em;
}

.home-title span {
    color: var(--wl-primary);
}

.home-description {
    max-width: 600px;
    margin-bottom: 1.9rem;
    color: var(--wl-muted-text);
    font-size: 1rem;
    line-height: 1.75;
}

.home-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
}

.home-btn-primary,
.home-btn-secondary {
    min-height: 46px;
    padding-inline: 1.25rem;
}

.home-btn-secondary {
    background: var(--wl-surface);
    color: var(--wl-text);
    border: 1px solid var(--wl-border);
}

.home-btn-secondary:hover {
    background: var(--wl-surface-soft);
    color: var(--wl-primary);
    border-color: var(--wl-primary);
}

.home-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem 1.35rem;
    margin-top: 1.8rem;
    color: var(--wl-muted-text);
    font-size: 0.76rem;
    font-weight: 600;
}

.home-trust div {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.home-trust i {
    color: var(--wl-primary);
}


/* --------------------------------------------------------------------------
   Homepage Preview
   -------------------------------------------------------------------------- */

.home-preview {
    padding: 1.15rem;
    background: var(--wl-card-bg);
    border: 1px solid var(--wl-border);
    border-radius: var(--wl-radius-lg);
    box-shadow: var(--wl-shadow-md);
}

.home-preview-top {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 0.5rem;
    padding: 0.2rem 0.25rem 1rem;
    border-bottom: 1px solid var(--wl-border);
}

.home-preview-icon {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: grid;
    place-items: center;
    background: var(--wl-primary);
    color: #fff;
    border-radius: 11px;
    font-size: 1.05rem;
}

.home-preview-label {
    display: block;
    margin-bottom: 0.12rem;
    color: var(--wl-muted-text);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.home-preview-top h2 {
    margin: 0;
    font-size: 0.98rem;
}

.home-preview-card {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.95rem 0.55rem;
    border-bottom: 1px solid var(--wl-border);
}

.home-preview-card:last-child {
    border-bottom: 0;
}

.home-preview-job-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: grid;
    place-items: center;
    background: var(--wl-primary-light);
    color: var(--wl-primary);
    border-radius: 10px;
}

.home-preview-card strong {
    display: block;
    margin-bottom: 0.15rem;
    color: var(--wl-text);
    font-size: 0.82rem;
}

.home-preview-card small {
    display: block;
    color: var(--wl-muted-text);
    font-size: 0.72rem;
    line-height: 1.5;
}


/* --------------------------------------------------------------------------
   Homepage Sections
   -------------------------------------------------------------------------- */

.home-section {
    padding: clamp(3.5rem, 7vw, 5rem) 0;
}

.home-section+.home-section {
    border-top: 1px solid var(--wl-border);
}

.home-section-heading {
    max-width: 620px;
    margin: 0 auto 2.6rem;
    text-align: center;
}

.home-section-heading>span {
    display: block;
    margin-bottom: 0.6rem;
    color: var(--wl-primary);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.home-section-heading h2 {
    margin-bottom: 0.75rem;
    font-size: clamp(1.55rem, 3vw, 2.1rem);
    font-weight: 800;
}

.home-section-heading p {
    margin: 0;
    color: var(--wl-muted-text);
    font-size: 0.9rem;
    line-height: 1.7;
}


/* --------------------------------------------------------------------------
   Homepage Features
   -------------------------------------------------------------------------- */

.home-feature-card {
    height: 100%;
    padding: 1.5rem;
    background: var(--wl-card-bg);
    border: 1px solid var(--wl-border);
    border-radius: var(--wl-radius-lg);
    box-shadow: var(--wl-shadow-sm);
    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}

.home-feature-card:hover {
    transform: translateY(-3px);
    border-color: rgba(37, 99, 235, 0.38);
    box-shadow: var(--wl-shadow-md);
}

.home-feature-icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    margin-bottom: 1rem;
    background: var(--wl-primary-light);
    color: var(--wl-primary);
    border-radius: 11px;
    font-size: 1.2rem;
}

.home-feature-card h3 {
    margin-bottom: 0.55rem;
    font-size: 0.94rem;
    font-weight: 700;
}

.home-feature-card p {
    margin: 0;
    color: var(--wl-muted-text);
    font-size: 0.82rem;
    line-height: 1.65;
}


/* --------------------------------------------------------------------------
   Homepage Steps
   -------------------------------------------------------------------------- */

.home-steps {
    max-width: 880px;
    margin: 0 auto;
    border-top: 1px solid var(--wl-border);
}

.home-step {
    display: grid;
    grid-template-columns: 58px 1fr;
    gap: 1.15rem;
    padding: 1.35rem 0;
    border-bottom: 1px solid var(--wl-border);
}

.home-step-number {
    color: var(--wl-primary);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
}

.home-step h3 {
    margin: 0 0 0.35rem;
    font-size: 0.96rem;
}

.home-step p {
    max-width: 650px;
    margin: 0;
    color: var(--wl-muted-text);
    font-size: 0.84rem;
    line-height: 1.65;
}


/* --------------------------------------------------------------------------
   Homepage CTA
   -------------------------------------------------------------------------- */

.home-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 2rem;
    padding: clamp(1.6rem, 4vw, 2.5rem) clamp(1.4rem, 5vw, 3rem);
    background: var(--wl-surface-soft);
    border: 1px solid var(--wl-border);
    border-radius: var(--wl-radius-lg);
}

.home-cta-label {
    display: block;
    margin-bottom: 0.45rem;
    color: var(--wl-primary);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.home-cta h2 {
    margin-bottom: 0.4rem;
    font-size: clamp(1.35rem, 3vw, 1.8rem);
    font-weight: 800;
}

.home-cta p {
    margin: 0;
    color: var(--wl-muted-text);
    font-size: 0.86rem;
}

.home-cta-button {
    flex: 0 0 auto;
}


/* --------------------------------------------------------------------------
   13. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 991.98px) {
    .navbar .nav-link {
        padding: 0.65rem 0.75rem !important;
    }
}

@media (max-width: 767.98px) {
    .home-hero {
        border-radius: 18px;
    }

    .home-title {
        font-size: clamp(2.15rem, 11vw, 2.7rem);
    }

    .home-description {
        font-size: 0.92rem;
    }

    .home-actions {
        flex-direction: column;
    }

    .home-actions .btn {
        width: 100%;
    }

    .home-trust {
        flex-direction: column;
        gap: 0.55rem;
    }

    .home-step {
        grid-template-columns: 42px 1fr;
    }

    .home-cta {
        align-items: stretch;
        flex-direction: column;
    }

    .home-cta-button {
        width: 100%;
    }

    .table th,
    .table td {
        padding: 0.8rem 0.9rem;
    }
}


/* --------------------------------------------------------------------------
   14. Accessibility / Motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}


/* ==========================================================================
   WorkLink Baao - Homepage
   Simple / Professional Landing Page
   ========================================================================== */

.wl-home {
    padding-bottom: 1rem;
}

/* Reusable landing/dashboard career carousel. */
.wl-journey-carousel-section {
    margin-top: 1.5rem;
}

.wl-journey-carousel {
    overflow: hidden;
    background: #050505;
    border: 1px solid var(--wl-border);
    border-radius: 16px;
    box-shadow: var(--wl-shadow-sm);
}

.wl-journey-image {
    height: clamp(270px, 35vw, 430px);
    object-fit: cover;
    background: #050505;
}

.wl-journey-caption {
    right: auto;
    bottom: 1.5rem;
    left: 1.5rem;
    max-width: min(520px, 76%);
    padding: 1rem 1.15rem;
    text-align: left;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 10px;
}
.wl-journey-caption h2 { margin-bottom: 0.25rem; color: #fff; font-size: clamp(1.1rem, 2vw, 1.45rem); }
.wl-journey-caption p { margin: 0; color: rgba(255,255,255,.9); font-size: 0.95rem; }

.wl-journey-carousel .carousel-control-prev,
.wl-journey-carousel .carousel-control-next {
    width: 9%;
}

.wl-journey-carousel .carousel-control-prev-icon,
.wl-journey-carousel .carousel-control-next-icon {
    width: 2.25rem;
    height: 2.25rem;
    padding: 0.4rem;
    background-color: rgba(0, 0, 0, 0.58);
    background-size: 55%;
    border-radius: 50%;
}

@media (max-width: 767.98px) {
    .wl-journey-image { height: 260px; }
    .wl-journey-carousel { border-radius: 12px; }
    .wl-journey-caption { right: 1rem; bottom: 1rem; left: 1rem; max-width: none; padding: 0.75rem; }
    .wl-journey-caption p { display: none; }
}


/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.wl-home-hero {
    margin-top: 0.5rem;
    padding: clamp(3.5rem, 8vw, 6.5rem) 1.5rem;
    background:
        linear-gradient(90deg, rgba(248, 250, 252, 0.98) 0%, rgba(248, 250, 252, 0.9) 48%, rgba(248, 250, 252, 0.3) 100%),
        url('/worklink_baao/assets/images/worklink-applicant-profile.png') center right / cover no-repeat;
    border: 1px solid var(--wl-border);
    border-radius: 22px;
}

.wl-home-hero-inner {
    max-width: 820px;
    margin: 0;
    text-align: left;
}

.wl-home-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    margin-bottom: 1.35rem;
    color: var(--wl-muted-text);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.wl-home-eyebrow-dot {
    width: 7px;
    height: 7px;
    background: var(--wl-primary);
    border-radius: 50%;
}

.wl-home-eyebrow-separator {
    color: var(--wl-border-strong);
}

.wl-home-hero h1 {
    max-width: 760px;
    margin: 0 0 1.2rem;
    color: var(--wl-text);
    font-family: var(--wl-font-heading);
    font-size: clamp(2.6rem, 6vw, 4.6rem);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -0.055em;
}

.wl-home-hero h1 span {
    color: var(--wl-primary);
}

.wl-home-lead {
    max-width: 660px;
    margin: 0;
    color: var(--wl-muted-text);
    font-size: clamp(1.05rem, 2vw, 1.18rem);
    line-height: 1.75;
}

.wl-home-actions {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 2rem;
}

.wl-home-primary-btn,
.wl-home-secondary-btn {
    min-height: 46px;
    padding: 0.68rem 1.25rem;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 600;
}

.wl-home-secondary-btn {
    background: var(--wl-surface);
    color: var(--wl-text);
    border: 1px solid var(--wl-border);
}

.wl-home-secondary-btn:hover {
    background: var(--wl-surface-soft);
    color: var(--wl-primary);
    border-color: var(--wl-primary);
}

.wl-home-highlights {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.7rem 1.5rem;
    margin-top: 2.1rem;
    color: var(--wl-muted-text);
    font-size: 0.95rem;
    font-weight: 500;
}

.wl-home-highlights span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.wl-home-highlights i {
    color: var(--wl-primary);
}


/* --------------------------------------------------------------------------
   Shared section styles
   -------------------------------------------------------------------------- */

.wl-home-section {
    padding: clamp(4rem, 8vw, 6rem) 0;
}

.wl-home-section+.wl-home-section {
    border-top: 1px solid var(--wl-border);
}

.wl-home-section-heading {
    max-width: 620px;
    margin: 0 auto 2.6rem;
    text-align: center;
}

.wl-home-section-label {
    display: block;
    margin-bottom: 0.65rem;
    color: var(--wl-primary);
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.wl-home-section-heading h2,
.wl-home-process-title {
    color: var(--wl-text);
    font-family: var(--wl-font-heading);
    font-weight: 800;
    letter-spacing: -0.035em;
}

.wl-home-section-heading h2 {
    margin-bottom: 0.75rem;
    font-size: clamp(1.65rem, 3vw, 2.15rem);
}

.wl-home-section-heading p {
    margin: 0;
    color: var(--wl-muted-text);
    font-size: 1.05rem;
    line-height: 1.7;
}


/* --------------------------------------------------------------------------
   Benefits
   -------------------------------------------------------------------------- */

.wl-home-benefit {
    height: 100%;
    padding: 1.6rem;
    background: var(--wl-card-bg);
    border: 1px solid var(--wl-border);
    border-radius: 14px;
    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}

.wl-home-benefit:hover {
    transform: translateY(-2px);
    border-color: rgba(37, 99, 235, 0.35);
    box-shadow: var(--wl-shadow-md);
}

.wl-home-benefit-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    margin-bottom: 1.15rem;
    background: var(--wl-primary-light);
    color: var(--wl-primary);
    border-radius: 11px;
    font-size: 1.15rem;
}

.wl-home-benefit h3 {
    margin-bottom: 0.55rem;
    color: var(--wl-text);
    font-size: 1.08rem;
    font-weight: 700;
}

.wl-home-benefit p {
    margin: 0;
    color: var(--wl-muted-text);
    font-size: 1rem;
    line-height: 1.7;
}


/* --------------------------------------------------------------------------
   Process
   -------------------------------------------------------------------------- */

.wl-home-process-title {
    margin-bottom: 0.9rem;
    font-size: clamp(1.65rem, 3vw, 2.1rem);
    line-height: 1.25;
}

.wl-home-process-intro {
    margin: 0;
    color: var(--wl-muted-text);
    font-size: 1.05rem;
    line-height: 1.7;
}

.wl-home-step {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 1.1rem;
    padding: 1.35rem 0;
    border-top: 1px solid var(--wl-border);
}

.wl-home-step:last-child {
    border-bottom: 1px solid var(--wl-border);
}

.wl-home-step-number {
    padding-top: 0.08rem;
    color: var(--wl-primary);
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.06em;
}

.wl-home-step h3 {
    margin: 0 0 0.35rem;
    color: var(--wl-text);
    font-size: 1.08rem;
    font-weight: 700;
}

.wl-home-step p {
    max-width: 650px;
    margin: 0;
    color: var(--wl-muted-text);
    font-size: 1rem;
    line-height: 1.65;
}


/* --------------------------------------------------------------------------
   CTA
   -------------------------------------------------------------------------- */

.wl-home-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 2rem;
    padding: clamp(1.8rem, 4vw, 2.6rem) clamp(1.5rem, 5vw, 3rem);
    background: var(--wl-primary);
    border-radius: 18px;
}

.wl-home-cta>div>span {
    display: block;
    margin-bottom: 0.45rem;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.wl-home-cta h2 {
    margin-bottom: 0.45rem;
    color: #fff;
    font-size: clamp(1.35rem, 3vw, 1.85rem);
    font-weight: 800;
}

.wl-home-cta p {
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.86rem;
}

.wl-home-cta-btn {
    flex: 0 0 auto;
    background: #fff;
    color: var(--wl-primary);
    border: 1px solid #fff;
    font-weight: 700;
}

.wl-home-cta-btn:hover {
    background: #eff6ff;
    color: var(--wl-primary-hover);
    border-color: #eff6ff;
}


/* --------------------------------------------------------------------------
   Dark theme refinement
   -------------------------------------------------------------------------- */

[data-bs-theme="dark"] .wl-home-hero,
[data-theme="dark"] .wl-home-hero {
    background:
        linear-gradient(90deg, rgba(8, 8, 9, 0.98) 0%, rgba(8, 8, 9, 0.9) 50%, rgba(8, 8, 9, 0.38) 100%),
        url('/worklink_baao/assets/images/worklink-applicant-profile.png') center right / cover no-repeat;
}


/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 767.98px) {
    .wl-home-hero {
        padding: 3.5rem 1.25rem;
        border-radius: 18px;
    }

    .wl-home-hero h1 {
        font-size: clamp(2.35rem, 12vw, 3.15rem);
    }

    .wl-home-actions {
        flex-direction: column;
    }

    .wl-home-actions .btn {
        width: 100%;
    }

    .wl-home-highlights {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.55rem;
    }

    .wl-home-section {
        padding: 3.75rem 0;
    }

    .wl-home-process-intro {
        margin-bottom: 1.5rem;
    }

    .wl-home-step {
        grid-template-columns: 42px 1fr;
    }

    .wl-home-cta {
        align-items: stretch;
        flex-direction: column;
    }

    .wl-home-cta-btn {
        width: 100%;
    }
}

/* Shared page rhythm for applicant, employer, and admin screens. */
.container {
    max-width: 1240px;
}

.card {
    border-color: var(--wl-border);
    border-radius: var(--wl-radius-md);
    box-shadow: var(--wl-shadow-sm);
}

.card-header {
    background: var(--wl-surface-soft);
    border-bottom-color: var(--wl-border);
    font-weight: 650;
}

.table > :not(caption) > * > * {
    padding: 0.9rem 1rem;
    border-bottom-color: var(--wl-border);
}

.table thead th {
    color: var(--wl-muted-text);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.035em;
    text-transform: uppercase;
}

.form-control,
.form-select {
    background-color: var(--wl-input-bg);
    border-color: var(--wl-border-strong);
    color: var(--wl-text);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--wl-primary);
    box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.12);
}

body,
.navbar,
.card,
.table,
.form-control,
.form-select,
.dropdown-menu,
.btn,
.modal-content {
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

/* ========================================================================== 
   Student Thesis UI Polish
   Calm surfaces, restrained decoration, and consistent component spacing.
   ========================================================================== */

body {
    background-color: var(--wl-bg);
    font-size: 0.94rem;
}

.worklink-navbar {
    min-height: 62px;
    background: var(--wl-surface) !important;
    box-shadow: 0 1px 5px rgba(31, 41, 38, 0.04);
}

.navbar-brand {
    font-weight: 700 !important;
    letter-spacing: -0.02em;
}

.navbar .nav-link {
    font-size: 1rem;
}

.card,
.wl-card,
.stat-card,
.modal-content,
.dropdown-menu,
.offcanvas {
    border-radius: var(--wl-radius-md);
}

.card-hover:hover,
.stat-card:hover {
    box-shadow: var(--wl-shadow-md);
}

.btn {
    min-height: 38px;
    padding: 0.5rem 0.95rem;
    border-radius: 8px;
    font-size: 0.84rem;
    box-shadow: none;
}

.btn:hover,
.btn:focus {
    box-shadow: none;
}

.form-control,
.form-select,
.input-group-text {
    border-radius: 8px;
}

.table-responsive {
    border-radius: 10px;
}

.table th {
    letter-spacing: 0.025em;
}

.alert {
    border-width: 1px;
    border-radius: 9px;
}

/* Shared action layout for tables, cards, and status controls. */
.wl-action-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.wl-action-group form {
    margin: 0;
}

.wl-action-group .btn {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .wl-action-group.wl-action-group-mobile-fill > .btn,
    .wl-action-group.wl-action-group-mobile-fill > form {
        flex: 1 1 calc(50% - 0.5rem);
    }

    .wl-action-group.wl-action-group-mobile-fill > form > .btn {
        width: 100%;
    }
}

.modal-content {
    box-shadow: var(--wl-shadow-md);
}

.bg-body,
.bg-white {
    background-color: var(--wl-surface) !important;
}

.bg-body-tertiary,
.bg-light,
.table-light {
    background-color: var(--wl-surface-soft) !important;
}

[data-bs-theme="dark"],
[data-theme="dark"],
body.dark-mode {
    --bs-body-bg: #0b0b0c;
    --bs-body-color: #f0f0f1;
    --bs-emphasis-color: #ffffff;
    --bs-secondary-bg: #19191b;
    --bs-tertiary-bg: #1c1c1e;
    --bs-border-color: #303033;
    --bs-primary-rgb: 117, 169, 223;
}

[data-bs-theme="dark"] body,
[data-theme="dark"] body,
body.dark-mode {
    background: #0b0b0c !important;
}

[data-bs-theme="dark"] .worklink-navbar,
[data-theme="dark"] .worklink-navbar,
[data-bs-theme="dark"] .card,
[data-theme="dark"] .card,
[data-bs-theme="dark"] .modal-content,
[data-theme="dark"] .modal-content,
[data-bs-theme="dark"] .dropdown-menu,
[data-theme="dark"] .dropdown-menu {
    background-color: #151516 !important;
}

[data-bs-theme="dark"] .table-light,
[data-theme="dark"] .table-light,
[data-bs-theme="dark"] .bg-light,
[data-theme="dark"] .bg-light,
[data-bs-theme="dark"] .bg-body-tertiary,
[data-theme="dark"] .bg-body-tertiary {
    --bs-table-bg: #1c1c1e;
    --bs-table-color: var(--wl-text);
    background-color: #1c1c1e !important;
    color: var(--wl-text) !important;
}

[data-bs-theme="dark"] .text-dark,
[data-theme="dark"] .text-dark {
    color: var(--wl-text) !important;
}

@media (max-width: 767.98px) {
    .container.py-4,
    .container.py-5 {
        padding-top: 1.25rem !important;
        padding-bottom: 1.5rem !important;
    }

    .card-body {
        padding: 1rem;
    }
}

/* ================================================================
   Readability for PESO staff and older users
   ================================================================ */
body {
    font-size: 17px !important;
    line-height: 1.6;
}

p,
li,
label,
.card-body,
.list-group-item,
.accordion-body,
.dropdown-item {
    font-size: 1rem;
}

small,
.small,
.form-text,
.text-muted.small {
    font-size: 0.9rem !important;
    line-height: 1.5;
}

.worklink-navbar .nav-link,
.worklink-navbar .dropdown-item {
    font-size: 0.98rem !important;
}

.form-control,
.form-select,
.input-group-text {
    min-height: 44px;
    font-size: 1rem !important;
}

textarea.form-control {
    min-height: 110px;
}

.table {
    font-size: 0.98rem;
}

.table th,
.table td {
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
}

.btn {
    min-height: 42px;
    font-size: 0.96rem !important;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}

.btn-sm {
    min-height: 38px;
    font-size: 0.9rem !important;
}

.badge {
    font-size: 0.85rem;
    padding: 0.45em 0.7em;
}

.wl-back-button {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    max-width: 100%;
    min-height: 44px;
    padding: 0.55rem 0.9rem;
    border-radius: 0.65rem;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
}
.wl-back-button .bi-arrow-left { flex: 0 0 auto; margin: 0; }
.wl-back-button:focus-visible { outline: 2px solid var(--wl-primary); outline-offset: 2px; }

[class*="-eyebrow"],
[class*="-kicker"],
[class*="-panel-label"],
[class*="-section-label"] {
    font-size: 0.9rem !important;
    line-height: 1.45;
}

[class*="-note"],
[class*="-meta"],
[class*="-copy"],
[class*="-intro"] {
    font-size: 0.95rem !important;
    line-height: 1.55;
}

[class*="-stat"] span,
[class*="-stat"] small,
[class*="-card"] small {
    font-size: 0.9rem !important;
}

a.btn:has(.bi-arrow-left) {
    min-height: 46px;
    padding: 0.65rem 1.1rem;
    font-size: 1rem !important;
    font-weight: 600;
}

/* Muted text remains secondary in color, but not difficult to read. */
.text-muted:not(i),
.text-secondary:not(i),
.text-body-secondary:not(i),
p.text-muted,
span.text-muted,
small.text-muted,
td.text-muted {
    font-size: 1rem !important;
    line-height: 1.6;
}

.form-text {
    font-size: 0.95rem !important;
    line-height: 1.55;
}

/* ========================================================================== 
   Final unified WorkLink Baao presentation layer
   Shared by public, applicant, employer, admin, and authentication pages.
   ========================================================================== */
.container{max-width:1200px;padding-left:clamp(1rem,3vw,2rem);padding-right:clamp(1rem,3vw,2rem)}
main.container,.role-applicant>.container,.role-employer>.container,.role-admin>.container{width:100%}
.container.py-4,.container.py-5{padding-top:clamp(1.25rem,3vw,2rem)!important;padding-bottom:clamp(1.75rem,4vw,3rem)!important}

.card,.wl-card,.stat-card,.wl-summary-card,.app-dashboard-panel,.employer-dashboard-panel,.modal-content,.offcanvas{border-radius:16px;box-shadow:var(--wl-shadow-sm)}
.card-header{padding:1.15rem 1.35rem;background:var(--wl-surface-soft)!important}
.card-body{padding:clamp(1.1rem,2vw,1.5rem)}
.card-footer{padding:1rem 1.35rem}
.card-hover:hover,.stat-card:hover,.wl-summary-card:hover{transform:translateY(-2px);box-shadow:var(--wl-shadow-hover)}

.btn{min-height:44px;padding:.58rem 1rem;border-radius:10px;font-weight:700}
.btn-sm{min-height:38px;padding:.42rem .75rem;border-radius:9px}
.btn-primary{background:#102a56;border-color:#102a56;color:#fff}
.btn-primary:hover,.btn-primary:focus{background:#0b1f42;border-color:#0b1f42;color:#fff;box-shadow:0 5px 16px rgba(16,42,86,.18)}
.btn-outline-primary{background:var(--wl-card-bg);border-color:#102a56;color:#102a56}
.btn-outline-primary:hover,.btn-outline-primary:focus{background:#102a56;border-color:#102a56;color:#fff}
.btn-warning{background:#e8b500;border-color:#e8b500;color:#172033}
.btn-warning:hover,.btn-warning:focus{background:#c99c00;border-color:#c99c00;color:#111827}

.form-control,.form-select{min-height:48px;padding:.68rem .9rem;border-radius:10px;border-color:var(--wl-border-strong)}
textarea.form-control{min-height:120px}
.form-label{margin-bottom:.5rem;font-weight:700}
.form-control:focus,.form-select:focus{border-color:#102a56;box-shadow:0 0 0 .2rem rgba(16,42,86,.12)}
.invalid-feedback{font-size:.9rem;font-weight:500}

.table-responsive{overflow-x:auto;border-radius:14px;box-shadow:0 2px 12px rgba(0,0,0,.035)}
.table thead th{padding:1rem;background:var(--wl-surface-soft);color:#526071;font-size:.8rem}
.table tbody td{padding:1rem}
.table-hover tbody tr:hover>*{background:#f2f7fd}
.badge{font-weight:700}
.text-bg-warning,.badge-warning{background:#fff5cc!important;color:#725800!important;border:1px solid #f0d66b}
.text-bg-success,.badge-success{background:#eaf8ef!important;color:#19733a!important;border:1px solid #a7dfb9}
.text-bg-danger,.badge-danger{background:#fef0f0!important;color:#b42323!important;border:1px solid #f4b6b6}

.worklink-navbar{min-height:68px;background:rgba(250,251,249,.97)!important;box-shadow:0 3px 14px rgba(16,42,86,.06)}
.worklink-navbar .nav-link{padding-top:.72rem!important;padding-bottom:.72rem!important;border-radius:9px}
.worklink-navbar .nav-link:not(.dropdown-toggle)::after{height:3px;background:#e8b500;border-radius:3px}
.worklink-navbar .nav-link.active{color:#102a56!important;background:#eaf3ff}
.brand-subtitle{color:#102a56!important}
.navbar-account-toggle{background:#f7f9fc}

.alert{padding:1rem 1.1rem;border-radius:12px}
.empty-state,.app-dashboard-empty,.career-empty{padding:clamp(2rem,5vw,3.5rem) 1.25rem}
.empty-state h2,.empty-state h3,.app-dashboard-empty h3,.career-empty h2{margin-top:.75rem}
.pagination{gap:.25rem}.page-link{min-width:42px;min-height:42px;display:grid;place-items:center;border-radius:9px!important}
.worklink-footer{margin-top:auto;padding:2rem 0;background:var(--wl-surface);border-top:1px solid var(--wl-border)}

.role-admin main>h1,.role-employer main>h1,.role-applicant main>h1{font-weight:800}
.admin-dashboard-hero{padding:clamp(1.35rem,3vw,2rem);border-radius:18px;background:linear-gradient(115deg,#fafbf9,#f1f3f1)}
.wl-summary-card{min-height:112px;border-radius:16px}
.wl-summary-card>i{background:#eaf3ff;color:#102a56}

[data-bs-theme="dark"] .btn-primary,[data-theme="dark"] .btn-primary,body.dark-mode .btn-primary{background:#60a5fa;border-color:#60a5fa;color:#081426}
[data-bs-theme="dark"] .btn-primary:hover,[data-theme="dark"] .btn-primary:hover,body.dark-mode .btn-primary:hover{background:#93c5fd;border-color:#93c5fd;color:#081426}
[data-bs-theme="dark"] .btn-outline-primary,[data-theme="dark"] .btn-outline-primary,body.dark-mode .btn-outline-primary{background:transparent;border-color:#60a5fa;color:#60a5fa}
[data-bs-theme="dark"] .btn-outline-primary:hover,[data-theme="dark"] .btn-outline-primary:hover,body.dark-mode .btn-outline-primary:hover{background:#60a5fa;color:#081426}
[data-bs-theme="dark"] .worklink-navbar,[data-theme="dark"] .worklink-navbar{background:rgba(21,21,22,.98)!important}
[data-bs-theme="dark"] .worklink-navbar .nav-link.active,[data-theme="dark"] .worklink-navbar .nav-link.active,body.dark-mode .worklink-navbar .nav-link.active{color:#93c5fd!important;background:rgba(96,165,250,.12)}
[data-bs-theme="dark"] .worklink-navbar .nav-link:not(.dropdown-toggle)::after,[data-theme="dark"] .worklink-navbar .nav-link:not(.dropdown-toggle)::after,body.dark-mode .worklink-navbar .nav-link:not(.dropdown-toggle)::after{background:#60a5fa}
[data-bs-theme="dark"] .table-hover tbody tr:hover>*,[data-theme="dark"] .table-hover tbody tr:hover>*{background:#202327}
[data-bs-theme="dark"] .admin-dashboard-hero,[data-theme="dark"] .admin-dashboard-hero{background:linear-gradient(115deg,#151516,#1c1c1e)}

@media(max-width:767.98px){
  .container{padding-left:1rem;padding-right:1rem}
  .card-header{padding:1rem}.card-body{padding:1rem}
  .table{font-size:.92rem}.table thead th,.table tbody td{padding:.8rem}
  .wl-action-group>.btn,.wl-action-group>form{max-width:100%}
  .worklink-navbar .navbar-collapse{max-height:calc(100vh - 92px);overflow-y:auto}
}

/* Final usability and defense-readiness helpers. */
.wl-required-mark{color:#dc2626;font-weight:800}.form-control:focus-visible,.form-select:focus-visible,.btn:focus-visible,.nav-link:focus-visible,a:focus-visible{outline:3px solid rgba(37,99,235,.35);outline-offset:2px}.wl-friendly-error{max-width:680px;margin:2rem auto;padding:clamp(2rem,6vw,3.5rem);background:var(--wl-card-bg);border:1px solid var(--wl-border);border-radius:18px;box-shadow:var(--wl-shadow-sm);text-align:center}.wl-friendly-error-icon{width:72px;height:72px;display:grid;place-items:center;margin:0 auto 1rem;background:var(--wl-primary-light);color:var(--wl-primary);border-radius:50%;font-size:2rem}.wl-friendly-error>span{color:var(--wl-primary);font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.wl-friendly-error h1{margin:.45rem 0;font-size:clamp(1.5rem,4vw,2rem)}.wl-friendly-error p{max-width:520px;margin:0 auto 1.25rem;color:var(--wl-muted-text);font-size:.92rem;line-height:1.7}.text-muted,.form-text,small{line-height:1.55}@media(max-width:767.98px){html,body{max-width:100%;overflow-x:hidden}.table-responsive{max-width:100%}.wl-action-group{max-width:100%}.modal-dialog{margin:.75rem}.dropdown-menu{max-width:calc(100vw - 1.5rem)}}

/* Compact, expandable admin support inbox. */
.admin-support-message{overflow:hidden;border-radius:13px;box-shadow:var(--wl-shadow-sm)}.admin-support-toggle{width:100%;display:flex;align-items:center;gap:.85rem;padding:.9rem 1rem;background:var(--wl-card-bg);color:var(--wl-text);border:0;text-align:left}.admin-support-toggle:hover{background:var(--wl-surface-soft)}.admin-support-sender-icon{width:40px;height:40px;flex:0 0 40px;display:grid;place-items:center;background:var(--wl-primary-light);color:var(--wl-primary);border-radius:10px}.admin-support-summary{min-width:0;flex:1;display:grid;grid-template-columns:minmax(170px,.65fr) minmax(220px,1.35fr);align-items:center;gap:1rem}.admin-support-summary strong,.admin-support-summary small{display:block}.admin-support-summary strong{overflow:hidden;font-size:.88rem;text-overflow:ellipsis;white-space:nowrap}.admin-support-summary small{overflow:hidden;color:var(--wl-muted-text);font-size:.7rem;text-overflow:ellipsis;white-space:nowrap}.admin-support-preview{overflow:hidden;color:var(--wl-muted-text);font-size:.76rem;text-overflow:ellipsis;white-space:nowrap}.admin-support-meta{flex:0 0 auto;display:flex;align-items:center;gap:.65rem}.admin-support-meta time{color:var(--wl-muted-text);font-size:.7rem}.admin-support-chevron{color:var(--wl-muted-text);transition:transform .2s ease}.admin-support-toggle[aria-expanded="true"] .admin-support-chevron{transform:rotate(180deg)}.admin-support-details{padding:1rem 1.15rem 1.15rem;background:var(--wl-card-bg);border-top:1px solid var(--wl-border)}
@media(max-width:767.98px){.admin-support-summary{display:block}.admin-support-preview{display:block;margin-top:.25rem;max-width:100%}.admin-support-meta time{display:none}.admin-support-toggle{align-items:flex-start}.admin-support-sender-icon{display:none}.contact-message-summary-actions{gap:.4rem}.contact-message-toggle{align-items:flex-start}.contact-status{padding:.3rem .5rem}}

/* Role-aware navbar: text destinations left, compact utilities right. */
.worklink-navbar .wl-primary-nav .nav-link{padding-left:.65rem!important;padding-right:.65rem!important;font-size:.9rem!important}.worklink-navbar .wl-icon-nav{flex:0 0 auto}.worklink-navbar .wl-navbar-icon.active,.worklink-navbar .wl-navbar-icon:hover,.worklink-navbar .wl-navbar-icon:focus{background:var(--wl-primary-light);color:var(--wl-primary);border-color:var(--wl-primary)}.worklink-navbar .wl-icon-nav .navbar-utilities{margin-left:.2rem;padding-left:.65rem;border-left:1px solid var(--wl-border)}
.worklink-navbar .wl-navbar-icon.active{background:#eaf3ff!important;color:#1f63ad!important;border-color:#9ec5ef!important;box-shadow:0 0 0 3px rgb(48 105 165 / 10%)}[data-bs-theme="dark"] .worklink-navbar .wl-navbar-icon.active,[data-theme="dark"] .worklink-navbar .wl-navbar-icon.active{background:#172842!important;color:#93c5fd!important;border-color:#34527b!important;box-shadow:0 0 0 3px rgb(147 197 253 / 10%)}
.worklink-navbar .wl-navbar-icon,.worklink-navbar .theme-toggle-btn{width:38px!important;height:38px!important;min-width:38px!important;min-height:38px!important;flex:0 0 38px!important;padding:0!important;border:0!important;border-radius:50%!important;background:transparent!important}.worklink-navbar .wl-navbar-icon:hover,.worklink-navbar .wl-navbar-icon:focus,.worklink-navbar .theme-toggle-btn:hover,.worklink-navbar .theme-toggle-btn:focus{background:transparent!important;color:var(--wl-primary)!important;box-shadow:0 0 0 2px var(--wl-border)}.worklink-navbar .navbar-account-toggle{background:transparent!important;border-color:transparent!important}

/* Only standalone back links are compact; buttons inside cards/heroes keep their local design. */

/* The shared header already supplies page padding; avoid doubling it in nested page containers. */
main.container.py-4>.container.py-4,main.container.py-4>main.container.py-4{padding-top:0!important}
@media(max-width:1199.98px){.worklink-navbar .wl-icon-nav .nav-item .btn-theme{width:38px;min-width:38px;min-height:38px;justify-content:center}.worklink-navbar .wl-icon-nav .navbar-account-toggle{width:auto;min-height:40px;justify-content:flex-start}.worklink-navbar .wl-icon-nav .navbar-utilities{margin-left:0;padding-left:0;border-left:0}.worklink-navbar .wl-primary-nav .nav-link{font-size:.95rem!important}}

/* Compact landing-page rhythm: complete content with less scrolling. */
.wl-home-hero{padding:clamp(2.35rem,5vw,4rem) 1.5rem}.wl-home-eyebrow{margin-bottom:.85rem}.wl-home-hero h1{max-width:680px;margin-bottom:.8rem;font-size:clamp(2.35rem,5vw,3.8rem);line-height:1.05}.wl-home-lead{font-size:clamp(1rem,1.6vw,1.1rem);line-height:1.6}.wl-home-actions{margin-top:1.35rem}.wl-home-highlights{margin-top:1.35rem}
.wl-home-section{padding:clamp(2.35rem,4.5vw,3.5rem) 0}.wl-home-section-heading{margin-bottom:1.45rem}.wl-home-section-label{margin-bottom:.4rem}.wl-home-section-heading h2{margin-bottom:.45rem;font-size:clamp(1.5rem,2.6vw,1.95rem)}.wl-home-section-heading p{font-size:.96rem;line-height:1.55}
.wl-home-benefit{padding:1.2rem}.wl-home-benefit-icon{width:40px;height:40px;margin-bottom:.75rem}.wl-home-benefit h3{margin-bottom:.35rem;font-size:1rem}.wl-home-benefit p{font-size:.92rem;line-height:1.55}
.wl-home-process-title{margin-bottom:.55rem;font-size:clamp(1.5rem,2.6vw,1.9rem)}.wl-home-process-intro{font-size:.95rem;line-height:1.55}.wl-home-step{grid-template-columns:44px 1fr;gap:.8rem;padding:.9rem 0}.wl-home-step h3{margin-bottom:.2rem;font-size:1rem}.wl-home-step p{font-size:.92rem;line-height:1.5}
.wl-home-faq-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}.wl-home-faq-grid .accordion-item{border-right:1px solid var(--wl-border);border-bottom:1px solid var(--wl-border)}.wl-home-faq-grid .accordion-button{min-height:58px;padding:.85rem 1rem;font-size:.92rem}.wl-home-faq-grid .accordion-body{padding:.85rem 1rem;font-size:.9rem;line-height:1.55}.wl-home-cta{gap:1.25rem;margin-bottom:1rem;padding:1.4rem 1.6rem}
@media(max-width:767.98px){.wl-home-hero{padding:2.25rem 1.15rem}.wl-home-hero h1{font-size:clamp(2rem,10vw,2.65rem)}.wl-home-highlights{gap:.4rem}.wl-home-section{padding:2.25rem 0}.wl-home-process-intro{margin-bottom:.75rem}.wl-home-faq-grid{grid-template-columns:1fr}.wl-home-faq-grid .accordion-item{border-right:0}.wl-home-cta{gap:1rem;padding:1.25rem}}

/* Compact shared footer with role-aware shortcuts and official PESO links. */
.worklink-footer{padding:1.45rem 0 .9rem}.worklink-footer-grid{display:grid;grid-template-columns:minmax(220px,1.25fr) minmax(320px,1.5fr) minmax(150px,.65fr);align-items:start;gap:1.5rem}.worklink-footer-title{display:flex;align-items:center;gap:.5rem;color:var(--wl-text);font-family:var(--wl-font-heading);font-size:1rem;font-weight:800}.worklink-footer-title i{color:var(--wl-primary)}.worklink-footer-brand p{max-width:430px;margin:.35rem 0 0;color:var(--wl-muted-text);font-size:.78rem;line-height:1.55}.worklink-footer-label{display:block;margin-bottom:.55rem;color:var(--wl-muted-text);font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.worklink-footer-shortcuts>div{display:flex;flex-wrap:wrap;gap:.35rem 1rem}.worklink-footer-shortcuts a{position:relative;padding:.1rem 0;color:var(--wl-muted-text);font-size:.76rem;font-weight:650}.worklink-footer-shortcuts a::after{content:"";position:absolute;right:0;bottom:-1px;left:0;height:1px;background:var(--wl-primary);transform:scaleX(0);transform-origin:left;transition:transform .18s ease}.worklink-footer-shortcuts a:hover,.worklink-footer-shortcuts a:focus{color:var(--wl-primary)}.worklink-footer-shortcuts a:hover::after,.worklink-footer-shortcuts a:focus::after{transform:scaleX(1)}.worklink-footer-social>div{display:flex;gap:.45rem}.worklink-footer-social a{width:38px;height:38px;display:grid;place-items:center;background:var(--wl-surface-soft);color:var(--wl-primary);border:1px solid var(--wl-border);border-radius:10px;font-size:1rem}.worklink-footer-social a:hover{background:var(--wl-primary);color:#fff;border-color:var(--wl-primary);transform:translateY(-1px)}.worklink-footer-bottom{display:flex;justify-content:space-between;gap:1rem;margin-top:1rem;padding-top:.8rem;color:var(--wl-muted-text);border-top:1px solid var(--wl-border);font-size:.72rem}
@media(max-width:991.98px){.worklink-footer-grid{grid-template-columns:1fr 1.5fr}.worklink-footer-social{grid-column:1/-1}.worklink-footer-social .worklink-footer-label{display:none}}
@media(max-width:575.98px){
  .worklink-footer-grid{grid-template-columns:1fr;gap:1rem}
  .worklink-footer-social{grid-column:auto}
  .worklink-footer-shortcuts>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem .85rem}
  .worklink-footer-shortcuts a{display:block;min-width:0;overflow-wrap:anywhere;line-height:1.4}
  .worklink-footer-bottom{align-items:flex-start;flex-direction:column;gap:.25rem}
}

/* Landing-page image stories replace repetitive feature cards. */
.wl-home-story-list{display:grid;gap:0}.wl-home-story{display:grid;grid-template-columns:minmax(260px,.85fr) minmax(0,1.15fr);align-items:center;gap:clamp(1.5rem,4vw,3.5rem);padding:2rem 0;border-bottom:1px solid var(--wl-border)}.wl-home-story:first-child{padding-top:.5rem}.wl-home-story:last-child{padding-bottom:.5rem;border-bottom:0}.wl-home-story-reverse{grid-template-columns:minmax(0,1.15fr) minmax(260px,.85fr)}.wl-home-story-reverse img{order:2}.wl-home-story img{width:100%;height:210px;object-fit:cover;border-radius:12px}.wl-home-story>div{padding:0}.wl-home-story>div>span{color:var(--wl-primary);font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}.wl-home-story h3{margin:.35rem 0 .5rem;color:var(--wl-text);font-size:1.2rem;font-weight:800}.wl-home-story p{max-width:620px;margin:0;color:var(--wl-muted-text);font-size:.9rem;line-height:1.65}.wl-home-faq .accordion-item{background:var(--wl-card-bg);border-color:var(--wl-border)}.wl-home-faq .accordion-button{min-height:58px;padding:.9rem 1.1rem;background:var(--wl-card-bg);color:var(--wl-text);font-size:.92rem;font-weight:700;box-shadow:none}.wl-home-faq .accordion-button:not(.collapsed){color:var(--wl-primary);background:var(--wl-surface-soft)}.wl-home-faq .accordion-body{padding:.9rem 1.1rem;color:var(--wl-muted-text)!important;font-size:.9rem;line-height:1.65}
@media(max-width:767.98px){.wl-home-story,.wl-home-story-reverse{grid-template-columns:1fr;gap:1rem;padding:1.5rem 0}.wl-home-story-reverse img{order:0}.wl-home-story img{height:190px}.wl-home-story>div{padding:0 .15rem}}

/* Upgraded landing process and FAQ: visual, compact, and thesis-friendly. */
.wl-home-process{position:relative}.wl-home-process-steps{position:relative;padding-left:.15rem}.wl-home-process-steps::before{content:"";position:absolute;top:2.1rem;bottom:2.1rem;left:25px;width:2px;background:linear-gradient(var(--wl-primary),var(--wl-accent));opacity:.28}.wl-home-step{position:relative;grid-template-columns:52px 1fr;gap:1.15rem;padding:1rem 0;border:0}.wl-home-step:last-child{border:0}.wl-home-step-number{position:relative;z-index:1;width:50px;height:50px;display:grid;place-items:center;background:var(--wl-card-bg);color:var(--wl-primary);border:2px solid color-mix(in srgb,var(--wl-primary) 24%,var(--wl-border));border-radius:50%;box-shadow:0 5px 14px rgba(16,42,86,.08)}.wl-home-step-number i{font-size:1.05rem}.wl-home-step-number span{position:absolute;right:-5px;bottom:-4px;min-width:21px;height:21px;display:grid;place-items:center;padding:0 4px;background:var(--wl-accent);color:#15233b;border:2px solid var(--wl-page-bg);border-radius:999px;font-size:.58rem;font-weight:900;letter-spacing:0}.wl-home-step>div:last-child{padding:.25rem 0 1rem;border-bottom:1px solid var(--wl-border)}.wl-home-step:last-child>div:last-child{border-bottom:0}.wl-home-step h3{font-size:1.05rem}.wl-home-step p{max-width:610px;color:var(--wl-muted-text)}
.wl-home-faq{border:1px solid var(--wl-border)!important;border-radius:14px!important;box-shadow:0 8px 24px rgba(16,42,86,.06)!important}.wl-home-faq .accordion-item{border:0;border-bottom:1px solid var(--wl-border)}.wl-home-faq .accordion-item:last-child{border-bottom:0}.wl-home-faq .accordion-button{gap:.9rem;min-height:66px;padding:.75rem 1rem;font-size:.95rem}.wl-home-faq .accordion-button::after{margin-left:auto}.wl-home-faq .accordion-button:not(.collapsed){background:color-mix(in srgb,var(--wl-primary) 7%,var(--wl-card-bg));color:var(--wl-primary)}.wl-home-faq-icon{width:36px;height:36px;display:grid;flex:0 0 36px;place-items:center;background:var(--wl-surface-soft);color:var(--wl-primary);border:1px solid var(--wl-border);border-radius:10px;font-size:1rem}.wl-home-faq .accordion-button:not(.collapsed) .wl-home-faq-icon{background:var(--wl-primary);color:#fff;border-color:var(--wl-primary)}.wl-home-faq .accordion-body{padding:.9rem 1.25rem 1.15rem 4.85rem;color:var(--wl-muted-text)!important;border-top:1px dashed color-mix(in srgb,var(--wl-primary) 18%,var(--wl-border));font-size:.91rem;line-height:1.65}.wl-home-faq-answer-label{display:block;margin-bottom:.25rem;color:var(--wl-primary);font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
@media(max-width:767.98px){.wl-home-process-steps::before{left:21px}.wl-home-step{grid-template-columns:42px 1fr;gap:.85rem}.wl-home-step-number{width:42px;height:42px}.wl-home-step-number i{font-size:.9rem}.wl-home-faq .accordion-button{gap:.7rem;padding:.7rem .8rem;font-size:.9rem}.wl-home-faq-icon{width:32px;height:32px;flex-basis:32px}.wl-home-faq .accordion-body{padding:.8rem 1rem 1rem 3.95rem}}

/* Employer recruitment workspace. */
.employer-recruitment-heading{position:relative;overflow:hidden}.employer-recruitment-heading::after{content:"";position:absolute;right:4%;bottom:-45px;width:150px;height:150px;border:28px solid color-mix(in srgb,var(--wl-primary) 10%,transparent);border-radius:50%;pointer-events:none}.employer-recruitment-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.employer-recruitment-stat{display:flex;align-items:center;gap:.9rem;padding:1rem 1.1rem;background:var(--wl-card-bg);color:var(--wl-text);border:1px solid var(--wl-border);border-radius:14px;box-shadow:var(--wl-shadow-sm);text-decoration:none}.employer-recruitment-stat:hover{color:var(--wl-text);border-color:color-mix(in srgb,var(--wl-primary) 35%,var(--wl-border));transform:translateY(-2px)}.employer-recruitment-stat-icon,.employer-recruitment-job-icon{width:44px;height:44px;display:grid;flex:0 0 44px;place-items:center;background:var(--wl-surface-soft);color:var(--wl-primary);border-radius:12px;font-size:1.1rem}.employer-recruitment-stat-icon.is-pending{color:#9a6a00;background:#fff7d6}.employer-recruitment-stat-icon.is-open{color:#20884a;background:#eaf8ef}.employer-recruitment-stat strong{display:block;font-family:var(--wl-font-heading);font-size:1.4rem;line-height:1}.employer-recruitment-stat small{display:block;margin-top:.28rem;color:var(--wl-muted-text);font-size:.78rem}.wl-section-eyebrow{display:block;margin-bottom:.25rem;color:var(--wl-primary);font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.employer-recruitment-job{overflow:hidden;border-top:3px solid var(--wl-primary);transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}.employer-recruitment-job:hover{border-top-color:var(--wl-accent);box-shadow:var(--wl-shadow-md);transform:translateY(-3px)}.employer-recruitment-job-counts{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--wl-border);border-radius:12px;overflow:hidden}.employer-recruitment-job-counts span{padding:.75rem 1rem;background:var(--wl-surface-soft)}.employer-recruitment-job-counts span+span{border-left:1px solid var(--wl-border)}.employer-recruitment-job-counts strong,.employer-recruitment-job-counts small{display:block}.employer-recruitment-job-counts strong{color:var(--wl-text);font-size:1.15rem}.employer-recruitment-job-counts small{color:var(--wl-muted-text);font-size:.72rem}.employer-recruitment-latest{display:flex;align-items:center;gap:.45rem;margin:0 0 1rem;color:var(--wl-muted-text);font-size:.75rem}.employer-applicant-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem}.employer-applicant-summary-item{display:grid;grid-template-columns:38px 1fr;grid-template-rows:auto auto;column-gap:.7rem;padding:.8rem;text-align:left;background:var(--wl-card-bg);color:var(--wl-text);border:1px solid var(--wl-border);border-radius:12px}.employer-applicant-summary-item:hover,.employer-applicant-summary-item.is-active{border-color:var(--wl-primary);box-shadow:0 4px 14px rgba(16,42,86,.08)}.employer-applicant-summary-item>span{grid-row:1/3;width:38px;height:38px;display:grid;place-items:center;background:var(--wl-surface-soft);color:var(--wl-primary);border-radius:10px}.employer-applicant-summary-item>span.is-pending{color:#956600;background:#fff7d6}.employer-applicant-summary-item>span.is-interview{color:#6c4bb7;background:#f2edff}.employer-applicant-summary-item>span.is-accepted{color:#20884a;background:#eaf8ef}.employer-applicant-summary-item strong{align-self:end;font-size:1.12rem;line-height:1}.employer-applicant-summary-item small{align-self:start;margin-top:.2rem;color:var(--wl-muted-text);font-size:.7rem}.employer-applicant-table-card{overflow:hidden}.employer-applicant-tools{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.1rem;background:var(--wl-card-bg);border-bottom:1px solid var(--wl-border)}.employer-applicant-filters{display:flex;gap:.65rem}.employer-applicant-search{position:relative}.employer-applicant-search i{position:absolute;top:50%;left:.85rem;color:var(--wl-muted-text);transform:translateY(-50%);pointer-events:none}.employer-applicant-search .form-control{min-width:240px;padding-left:2.35rem}.employer-applicant-row td{padding-top:1rem;padding-bottom:1rem}.employer-applicant-row:hover{background:color-mix(in srgb,var(--wl-primary) 3%,var(--wl-card-bg))}
@media(max-width:991.98px){.employer-applicant-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.employer-applicant-tools{align-items:stretch;flex-direction:column}.employer-applicant-filters{width:100%}.employer-applicant-search{flex:1}.employer-applicant-search .form-control{width:100%;min-width:0}}
@media(max-width:767.98px){.employer-recruitment-stats{grid-template-columns:1fr}.employer-recruitment-stat{padding:.85rem}.employer-applicant-filters{flex-direction:column}.employer-applicant-summary{gap:.55rem}.employer-applicant-summary-item{grid-template-columns:32px 1fr;padding:.65rem}.employer-applicant-summary-item>span{width:32px;height:32px}.employer-recruitment-heading::after{display:none}}

/* Employer My Jobs workspace. */
.employer-jobs-heading{position:relative;overflow:hidden}.employer-jobs-heading::after{content:"";position:absolute;right:4%;bottom:-55px;width:165px;height:165px;border:30px solid color-mix(in srgb,var(--wl-primary) 9%,transparent);border-radius:50%;pointer-events:none}.employer-job-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem}.employer-job-summary-item{display:grid;grid-template-columns:38px 1fr;grid-template-rows:auto auto;column-gap:.7rem;padding:.8rem;background:var(--wl-card-bg);color:var(--wl-text);border:1px solid var(--wl-border);border-radius:12px;text-decoration:none}.employer-job-summary-item:hover,.employer-job-summary-item.is-active{color:var(--wl-text);border-color:var(--wl-primary);box-shadow:0 4px 14px rgba(16,42,86,.08);transform:translateY(-1px)}.employer-job-summary-item>span{grid-row:1/3;width:38px;height:38px;display:grid;place-items:center;background:var(--wl-surface-soft);color:var(--wl-primary);border-radius:10px}.employer-job-summary-item strong{align-self:end;font-size:1.1rem;line-height:1}.employer-job-summary-item small{align-self:start;margin-top:.2rem;color:var(--wl-muted-text);font-size:.7rem}.employer-job-summary-item.is-action>span{background:var(--wl-accent);color:#15233b}.employer-jobs-table-card{overflow:hidden}.employer-jobs-tools{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.1rem;background:var(--wl-card-bg);border-bottom:1px solid var(--wl-border)}.employer-job-search{position:relative}.employer-job-search i{position:absolute;top:50%;left:.85rem;color:var(--wl-muted-text);transform:translateY(-50%);pointer-events:none}.employer-job-search .form-control{width:min(340px,38vw);padding-left:2.35rem}.employer-jobs-table tbody td{padding-top:1rem;padding-bottom:1rem}.employer-job-title-cell{display:flex;align-items:center;gap:.75rem;min-width:210px}.employer-job-title-cell .employer-recruitment-job-icon{width:38px;height:38px;flex-basis:38px;border-radius:10px}.employer-job-title-cell strong,.employer-job-title-cell small{display:block}.employer-job-title-cell small{margin-top:.2rem;color:var(--wl-muted-text);font-size:.7rem}.employer-job-location{display:flex;align-items:flex-start;gap:.35rem;min-width:160px;color:var(--wl-text);font-size:.84rem}.employer-job-location i{margin-top:.1rem;color:var(--wl-primary)}.employer-job-applicant-count{display:inline-flex;align-items:baseline;gap:.35rem;padding:.38rem .6rem;background:var(--wl-surface-soft);color:var(--wl-primary);border:1px solid var(--wl-border);border-radius:9px;text-decoration:none}.employer-job-applicant-count:hover{color:var(--wl-primary);border-color:var(--wl-primary)}.employer-job-applicant-count strong{font-size:1rem}.employer-job-applicant-count span{font-size:.7rem}.employer-status .bi-circle-fill{font-size:.45rem}.employer-job-row:hover{background:color-mix(in srgb,var(--wl-primary) 3%,var(--wl-card-bg))}
@media(max-width:991.98px){.employer-job-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.employer-jobs-tools{align-items:stretch;flex-direction:column}.employer-job-search .form-control{width:100%}}
@media(max-width:575.98px){.employer-job-summary{gap:.55rem}.employer-job-summary-item{grid-template-columns:32px 1fr;padding:.65rem}.employer-job-summary-item>span{width:32px;height:32px}.employer-jobs-heading::after{display:none}}
.nav-new-badge{display:inline-flex!important;align-items:center;justify-content:center;min-width:1.25rem;min-height:1.25rem;padding:.28rem .38rem;font-size:.68rem;line-height:1;z-index:2;position:absolute!important;top:-6px!important;right:-8px!important;left:auto!important;transform:none!important;color:#fff!important;background:#dc3545!important;border:2px solid var(--bs-body-bg);box-shadow:0 2px 6px rgba(0,0,0,.2)}
@media(max-width:1199.98px){.worklink-navbar .wl-primary-nav .nav-link .admin-nav-badge{position:static!important;top:auto!important;right:auto!important;left:auto!important;transform:none!important;margin-left:.45rem;vertical-align:middle}}
.admin-stat-card{width:100%;min-width:0;min-height:104px;display:flex;align-items:center;gap:.75rem;overflow:hidden}.admin-stat-card>span{min-width:0;flex:1;overflow-wrap:anywhere}.admin-stat-card strong,.admin-stat-card small{display:block;white-space:normal;overflow-wrap:anywhere;word-break:normal}.admin-table-wrapper{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.admin-users-table{min-width:680px;white-space:nowrap}.admin-users-table th,.admin-users-table td{padding:.75rem .65rem}@media(max-width:575.98px){.admin-stat-card{min-height:90px;padding:.85rem}.admin-stat-card strong{font-size:1.25rem}.admin-stat-card small{font-size:.78rem}.admin-users-table{min-width:620px;font-size:.8rem}.admin-users-table th,.admin-users-table td{padding:.6rem .5rem}.admin-users-card .card-header{align-items:flex-start;flex-direction:column}.admin-users-card .card-header .btn{width:100%}}
.admin-users-card{border:1px solid var(--wl-border);border-radius:16px;overflow:hidden}.admin-users-card .card-header{padding:1rem 1.25rem;border-bottom:1px solid var(--wl-border)}.admin-users-card .table thead th{background:var(--wl-surface-soft);color:var(--wl-muted-text);font-size:.72rem;letter-spacing:.04em;text-transform:uppercase}.admin-users-card .table tbody tr{transition:background-color .15s ease}.admin-users-card .table tbody tr:hover{background:var(--wl-surface-soft)}.admin-users-card .table tbody td{vertical-align:middle;color:var(--wl-text)}
@media (max-width:767.98px){
  .role-admin main.container{padding-left:1rem;padding-right:1rem}
  .role-admin .wl-summary-card{min-height:82px;padding:.8rem}
  .role-admin .card-header{padding:.85rem 1rem}
  .role-admin .table-responsive{border-radius:10px;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .role-admin .table{min-width:680px;font-size:.82rem}
  .role-admin .table th,.role-admin .table td{padding:.6rem .5rem;white-space:nowrap}
  .role-admin .wl-action-group{flex-wrap:wrap}
  .role-admin .form-control,.role-admin .form-select{min-height:44px}
  .role-admin h1{font-size:1.5rem}
  .role-admin .wl-summary-card{display:flex;align-items:center;gap:.65rem;min-width:0;overflow:hidden}
  .role-admin .wl-summary-card>span{min-width:0;overflow-wrap:anywhere;line-height:1.25}
  .role-admin .wl-summary-card strong,.role-admin .wl-summary-card small{display:block;white-space:normal;overflow-wrap:anywhere}
  .role-admin .row.g-3>.col-6{width:50%;padding-left:.35rem;padding-right:.35rem}
  .role-admin .wl-summary-card{height:100%;min-height:96px}
}
@media(max-width:575.98px){.role-admin main>.row.g-3.mb-4>.col-12{width:100%;flex:0 0 100%}}
@media(max-width:767.98px){.role-admin .table-responsive{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:12px}.role-admin .table-responsive>.table{min-width:640px;white-space:nowrap}.role-admin .table th,.role-admin .table td{padding:.7rem .6rem;vertical-align:middle}.role-admin .table thead th{font-size:.72rem;letter-spacing:.03em}.role-admin .pagination{flex-wrap:wrap;gap:.2rem}.role-admin .pagination .page-link{padding:.45rem .65rem}.role-admin .wl-action-group{display:flex;flex-wrap:wrap;gap:.4rem}}
@media(max-width:767.98px){.role-admin table{display:block;width:100%;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}.role-admin table thead,.role-admin table tbody{min-width:640px}.role-admin .card{max-width:100%;overflow:hidden}.role-admin .card-body{padding:1rem}.role-admin .form-row,.role-admin form.row{row-gap:.75rem}.role-admin .btn{min-height:40px}}
@media(max-width:767.98px){.role-admin table{display:block;width:100%;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}.role-admin table thead,.role-admin table tbody{min-width:640px}.role-admin .card{max-width:100%;overflow:hidden}.role-admin .card-body{padding:1rem}.role-admin .btn{min-height:40px}}
.role-admin .admin-dashboard-hero{padding:1.35rem 1.5rem;background:linear-gradient(135deg,var(--wl-card-bg),var(--wl-surface-soft));border:1px solid var(--wl-border);border-radius:16px;box-shadow:var(--wl-shadow-sm)}.role-admin .admin-dashboard-hero h1{color:var(--wl-text);letter-spacing:-.02em}.role-admin .wl-summary-card{border:1px solid var(--wl-border);background:var(--wl-card-bg);box-shadow:var(--wl-shadow-sm);transition:transform .18s ease,box-shadow .18s ease}.role-admin .wl-summary-card:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(16,42,86,.1)}.role-admin .admin-users-card{box-shadow:var(--wl-shadow-sm)}.role-admin .admin-users-card .card-header h2{font-weight:700;color:var(--wl-text)}.role-admin .admin-users-table tbody tr{border-color:var(--wl-border)}@media(max-width:575.98px){.role-admin .admin-dashboard-hero{padding:1rem}.role-admin .admin-dashboard-hero .wl-action-group{width:100%}.role-admin .admin-dashboard-hero .wl-action-group .btn{flex:1}}
.role-admin .admin-dashboard-hero{padding:1.35rem 1.5rem;background:linear-gradient(135deg,var(--wl-card-bg),var(--wl-surface-soft));border:1px solid var(--wl-border);border-radius:16px;box-shadow:var(--wl-shadow-sm)}.role-admin .wl-summary-card{border:1px solid var(--wl-border);background:var(--wl-card-bg);box-shadow:var(--wl-shadow-sm);transition:transform .18s ease,box-shadow .18s ease}.role-admin .wl-summary-card:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(16,42,86,.1)}@media(max-width:575.98px){.role-admin .admin-dashboard-hero{padding:1rem}.role-admin .admin-dashboard-hero .wl-action-group{width:100%}.role-admin .admin-dashboard-hero .wl-action-group .btn{flex:1}}
.role-admin .admin-users-card{border:1px solid var(--wl-border);border-radius:16px;overflow:hidden;background:var(--wl-card-bg)}.role-admin .admin-users-card .card-header{padding:1.1rem 1.25rem;background:var(--wl-surface-soft)!important;border-bottom:1px solid var(--wl-border)}.role-admin .admin-users-table{width:100%;min-width:680px;border-collapse:separate;border-spacing:0}.role-admin .admin-users-table thead th{padding:.8rem .75rem;background:var(--wl-surface-soft);color:var(--wl-muted-text);font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;border-bottom:1px solid var(--wl-border)}.role-admin .admin-users-table tbody td{padding:.85rem .75rem;border-bottom:1px solid var(--wl-border);color:var(--wl-text);font-size:.86rem}.role-admin .admin-users-table tbody tr:last-child td{border-bottom:0}.role-admin .admin-users-table tbody tr:hover td{background:rgba(234,243,255,.45)}.role-admin .admin-users-table .badge{font-size:.72rem;padding:.38rem .6rem}@media(max-width:767.98px){.role-admin .admin-users-card .card-header{padding:.9rem 1rem}.role-admin .admin-users-table{min-width:640px}.role-admin .admin-users-table thead th,.role-admin .admin-users-table tbody td{padding:.7rem .6rem}}
.role-admin .admin-table-wrapper{scrollbar-width:thin;scrollbar-color:#9aa9bd #edf1f6}.role-admin .admin-table-wrapper::-webkit-scrollbar{height:10px}.role-admin .admin-table-wrapper::-webkit-scrollbar-track{background:#edf1f6;border-radius:8px}.role-admin .admin-table-wrapper::-webkit-scrollbar-thumb{background:#9aa9bd;border-radius:8px;border:2px solid #edf1f6}.role-admin .admin-table-wrapper::-webkit-scrollbar-thumb:hover{background:#102a56}[data-theme="dark"] .role-admin .admin-table-wrapper{scrollbar-color:#64748b #1f2937}[data-theme="dark"] .role-admin .admin-table-wrapper::-webkit-scrollbar-track{background:#1f2937}[data-theme="dark"] .role-admin .admin-table-wrapper::-webkit-scrollbar-thumb{background:#64748b;border-color:#1f2937}
.role-admin .admin-users-table thead{background:linear-gradient(90deg,#102a56,#173e72)}.role-admin .admin-users-table thead th{background:transparent!important;color:#fff!important;border:0;font-size:.72rem;letter-spacing:.07em}.role-admin .admin-users-table tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--wl-surface-soft) 55%,transparent)}.role-admin .admin-users-table tbody tr:hover td{background:#eaf3ff!important}.role-admin .admin-users-table tbody td:first-child{font-weight:700;color:var(--wl-primary)}.role-admin .admin-users-table tbody td:nth-child(2){color:var(--wl-muted-text)}.role-admin .admin-users-table .badge{border-radius:999px;font-weight:700}.role-admin .admin-table-wrapper{border:1px solid var(--wl-border);border-radius:12px;background:var(--wl-card-bg)}@media(max-width:767.98px){.role-admin .admin-users-table tbody td:first-child{font-size:.84rem}.role-admin .admin-users-table tbody td{font-size:.8rem}.role-admin .admin-table-wrapper:after{content:"Swipe horizontally to view all columns";display:block;padding:.45rem .7rem;color:var(--wl-muted-text);font-size:.7rem;font-style:italic;border-top:1px solid var(--wl-border)}}
.role-admin .admin-management-table{min-width:900px;border-collapse:separate;border-spacing:0}.role-admin .admin-management-table thead th{background:#102a56;color:#fff;padding:.75rem .7rem;font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;border:0}.role-admin .admin-management-table tbody td{padding:.75rem .65rem;border-bottom:1px solid var(--wl-border);vertical-align:middle}.role-admin .admin-management-table tbody tr:hover td{background:var(--wl-surface-soft)}.role-admin .admin-management-table .account-reason-select{min-width:220px}.role-admin .admin-management-table .wl-action-group{gap:.4rem;align-items:center}.role-admin .admin-management-table .btn{white-space:nowrap}@media(max-width:767.98px){.role-admin .admin-management-table{min-width:900px;font-size:.8rem}.role-admin .admin-management-table th,.role-admin .admin-management-table td{padding:.6rem .5rem}}