/* ============================================================
   FILE: Content/css/site.css
   OnboardingHub — Main Stylesheet
   Font: Plus Jakarta Sans (body) + Space Mono (code/numbers)
   ============================================================ */

:root {
    --primary: #1f2937; /* charcoal — neutral accent that matches the header/buttons */
    --primary-dark: #111827;
    --primary-light: #f3f4f6;
    --success: #16a34a;
    --success-light: #f0fdf4;
    --warning: #d97706;
    --warning-light: #fffbeb;
    --danger: #dc2626;
    --danger-light: #fef2f2;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-500: #6b7280;
    --gray-700: #374151;
    --gray-900: #111827;
    --white: #ffffff;
    /* Stronger, darker border used to make cards, containers, tables and grids
       more visible. Tweak this single value to make all borders lighter/darker. */
    --border-strong: #9ca3af; /* gray-400 — clearly darker than the default gray-200 */
    /* Soft, light border used for tables and grids so data reads gently
       instead of being boxed in by heavy dark lines. */
    --border-soft: #e8ebef;
    /* Glassmorphism surface for stat cards — translucent, frosted, with a
       soft white edge highlight so cards read like panes of glass. */
    --glass-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.60) 100%);
    --glass-border: rgba(255, 255, 255, 0.70);
    --glass-blur: saturate(160%) blur(12px);
    /* Near-solid surfaces: the page keeps its background gradient/image, but
       containers, tables and grids sit on an almost-opaque white so content
       stays crisp and easy to read. */
    --surface: rgba(255, 255, 255, 0.88);
    --surface-strong: rgba(255, 255, 255, 0.92);
    --surface-muted: rgba(248, 250, 252, 0.90);
    /* Tables/grids: near-solid white background with clear row separation. */
    --surface-table: rgba(255, 255, 255, 0.92);
    --surface-table-header: rgba(248, 250, 252, 0.95);
    /* Subtle row hover tint (neutral charcoal). */
    --row-hover: rgba(31, 41, 55, 0.05);
    --surface-blur: saturate(150%) blur(6px);
    --radius: 12px;
    --radius-sm: 8px;
    --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
    --shadow: 0 4px 16px rgba(0,0,0,.10);
    --shadow-lg: 0 12px 40px rgba(0,0,0,.14);
    --font: 'Plus Jakarta Sans', sans-serif;
    --font-mono: 'Space Mono', monospace;
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font);
    background-color: #f0f4f8;
    color: var(--gray-900);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Fixed, full-viewport background image layer.
   A pseudo-element is used instead of `background-attachment: fixed`
   because iOS Safari and several mobile browsers ignore that property,
   which made the background image disappear on those devices.
   The light gradient sits on top of the image to keep the look soft,
   bright and readable, and acts as a graceful fallback tint. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(135deg, rgba(239, 246, 255, 0.55) 0%, rgba(240, 244, 248, 0.30) 50%, rgba(237, 233, 254, 0.55) 100%),
        url('../images/back3.png');
    background-repeat: no-repeat, no-repeat;
    background-position: center center, center center;
    background-size: cover, cover;
}

a {
    color: var(--primary);
    text-decoration: none;
}

    a:hover {
        text-decoration: underline;
    }

/* ============================================================
   NAVBAR
   ============================================================ */
.navbar {
    background: var(--surface-strong);
    -webkit-backdrop-filter: var(--surface-blur);
    backdrop-filter: var(--surface-blur);
    border-bottom: 1px solid var(--gray-200);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow-sm);
}

.navbar-inner {
    margin: 0 auto;
    padding: 0 2rem;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.navbar-brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--gray-900);
    text-decoration: none;
}

.brand-icon {
    width: 36px;
    height: 36px;
    background: transparent;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: .9rem;
}

.navbar-links {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.nav-link {
    padding: .45rem .9rem;
    border-radius: 8px;
    color: var(--gray-700);
    font-size: .875rem;
    font-weight: 500;
    transition: background .15s;
}

    .nav-link:hover {
        background: var(--gray-100);
        text-decoration: none;
    }

.nav-btn {
    padding: .45rem 1rem;
    border-radius: 8px;
    font-size: .875rem;
    font-weight: 600;
}

/* Navbar User Info */
.nav-user-info {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: var(--primary-light);
    border-radius: 20px;
    font-size: 0.85rem;
    color: var(--gray-700);
}

.nav-user-email {
    font-weight: 500;
    color: var(--gray-700);
}

.nav-user-role {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(255, 255, 255, 0.2);
    padding: 2px 8px;
    border-radius: 10px;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem 1.1rem;
    border-radius: var(--radius-sm);
    font-family: var(--font);
    font-size: .875rem;
    font-weight: 600;
    cursor: ptr;
    border: 2px solid transparent;
    transition: all .15s;
    text-decoration: none;
    white-space: nowrap;
}

    .btn:hover {
        text-decoration: none;
    }

.btn-primary {
    background: var(--gray-900);
    color: white;
}

    .btn-primary:hover {
        background: #000;
    }

.btn-outline {
    border-color: var(--gray-300);
    color: var(--gray-700);
    background: white;
}

    .btn-outline:hover {
        border-color: var(--gray-900);
        color: var(--gray-900);
    }

.btn-ghost {
    background: transparent;
    color: var(--gray-500);
}

    .btn-ghost:hover {
        background: var(--gray-100);
        color: var(--gray-900);
    }

.btn-lg {
    padding: .75rem 1.5rem;
    font-size: 1rem;
    border-radius: var(--radius);
}

.btn-sm {
    padding: .3rem .7rem;
    font-size: .8rem;
}

.btn-full {
    width: 100%;
    justify-content: center;
}

/* ============================================================
   MAIN & FOOTER
   ============================================================ */
.main-content {
    flex: 1;
}

.site-footer {
    text-align: center;
    padding: 1.5rem;
    color: var(--gray-700);
    font-size: .8rem;
    font-weight: 500;
    border-top: 1px solid var(--gray-200);
    background: transparent;
    margin-top: 4rem;
}

/* ============================================================
   HERO SECTION
   ============================================================ */
.hero-section {
    margin: 0 auto;
    padding: 5rem 2rem 4rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: var(--primary-light);
    color: var(--primary);
    font-size: .8rem;
    font-weight: 600;
    padding: .3rem .8rem;
    border-radius: 999px;
    margin-bottom: 1.25rem;
}

.hero-title {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--gray-900);
    margin-bottom: 1rem;
}

.accent {
    color: var(--primary);
}

.hero-sub {
    font-size: 1.05rem;
    color: var(--gray-500);
    line-height: 1.7;
    margin-bottom: 2rem;
}

.hero-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.hero-illustration {
    position: relative;
    height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-circle {
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gray-100), var(--gray-200));
    position: absolute;
}

.illustration-card {
    position: absolute;
    background: var(--surface-strong);
    -webkit-backdrop-filter: var(--surface-blur);
    backdrop-filter: var(--surface-blur);
    border-radius: var(--radius);
    padding: .75rem 1.1rem;
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .85rem;
    font-weight: 600;
    box-shadow: var(--shadow);
    color: var(--gray-700);
}

    .illustration-card i {
        color: var(--primary);
        font-size: 1rem;
    }

.card-float-1 {
    top: 20px;
    right: 20px;
}

.card-float-2 {
    bottom: 60px;
    left: 0;
}

.card-float-3 {
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

/* ============================================================
   TEAMS SECTION
   ============================================================ */
.teams-section, .steps-overview {
    margin: 0 auto;
    padding: 3rem 2rem;
}

.section-title {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: .5rem;
}

.section-sub {
    color: var(--gray-500);
    margin-bottom: 2rem;
}

.teams-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.team-card {
    background: var(--surface);
    -webkit-backdrop-filter: var(--surface-blur);
    backdrop-filter: var(--surface-blur);
    border-radius: var(--radius);
    padding: 1.5rem;
    border: 2px solid var(--gray-200);
    transition: all .2s;
}

    .team-card:hover {
        box-shadow: var(--shadow);
        transform: translateY(-2px);
    }

.team-icon {
    font-size: 1.6rem;
    margin-bottom: .75rem;
}

.team-name {
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: .4rem;
}

.team-extras {
    font-size: .78rem;
    color: var(--gray-500);
    line-height: 1.5;
}

.team-blue .team-icon {
    color: #2563eb;
}

.team-green .team-icon {
    color: #16a34a;
}

.team-orange .team-icon {
    color: #ea580c;
}

.team-purple .team-icon {
    color: #7c3aed;
}

.team-teal .team-icon {
    color: #0d9488;
}

.team-rose .team-icon {
    color: #e11d48;
}

/* Timeline Steps */
.steps-timeline {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: .75rem;
}

.timeline-step {
    background: var(--surface);
    -webkit-backdrop-filter: var(--surface-blur);
    backdrop-filter: var(--surface-blur);
    border-radius: var(--radius-sm);
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    border: 1px solid var(--gray-200);
}

.step-num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    font-size: .85rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-family: var(--font-mono);
}

.step-info {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .875rem;
    font-weight: 500;
}

    .step-info i {
        color: var(--primary);
    }

/* ============================================================
   PAGE HEADER
   ============================================================ */
.page-header {
    background: var(--surface-strong);
    -webkit-backdrop-filter: var(--surface-blur);
    backdrop-filter: var(--surface-blur);
    border-bottom: 1px solid var(--gray-200);
}

.page-header-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2.5rem 2rem 2rem;
}

.page-header h1 {
    font-size: 1.75rem;
    font-weight: 700;
    margin: .5rem 0 .4rem;
}

.page-header p {
    color: var(--gray-500);
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .875rem;
    font-weight: 500;
    color: var(--primary);
    margin-bottom: .75rem;
    padding: .35rem .75rem;
    border-radius: var(--radius-sm);
    background: var(--primary-light);
    transition: background .2s, color .2s;
    text-decoration: none;
}

    .back-link:hover {
        color: var(--primary-dark);
        background: var(--gray-200);
    }

/* ============================================================
   FORM PAGE
   ============================================================ */
.form-page {
    max-width: 720px;
    margin: 2.5rem auto;
    padding: 0 1.5rem;
}

.form-card {
    background: var(--surface-strong);
    -webkit-backdrop-filter: var(--surface-blur);
    backdrop-filter: var(--surface-blur);
    border-radius: var(--radius);
    padding: 2.5rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-200);
}

.form-section {
    margin-bottom: 2rem;
}

.form-section-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 1.25rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--primary-light);
    display: flex;
    align-items: center;
    gap: .5rem;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-group {
    margin-bottom: 1.25rem;
}

.form-label {
    display: block;
    font-size: .875rem;
    font-weight: 600;
    margin-bottom: .4rem;
    color: var(--gray-700);
}

.form-control {
    width: 100%;
    padding: .6rem .9rem;
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-sm);
    font-family: var(--font);
    font-size: .9rem;
    color: var(--gray-900);
    background: white;
    transition: border-color .15s;
}

    .form-control:focus {
        outline: none;
        border-color: var(--primary);
    }

.form-select {
    cursor: pointer;
}

.field-error {
    font-size: .8rem;
    color: var(--danger);
    display: block;
    margin-top: .25rem;
}

.form-actions {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
    align-items: center;
}

.team-preview {
    background: var(--primary-light);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-sm);
    padding: 1rem 1.25rem;
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    margin-bottom: 1.5rem;
    font-size: .875rem;
    color: var(--primary-dark);
}

    .team-preview i {
        margin-top: .1rem;
    }

/* ============================================================
   SEARCH PAGE
   ============================================================ */
.search-form {
    display: block;
}

.search-group {
    display: flex;
    gap: .75rem;
}

.search-input {
    flex: 1;
}

/* ============================================================
   AUTH PAGE
   ============================================================ */
.auth-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 140px);
    padding: 2rem;
    background: linear-gradient(135deg, #f9fafb 0%, #f0f4f8 50%, #e5e7eb 100%);
}

.auth-card {
    background: var(--surface-strong);
    -webkit-backdrop-filter: var(--surface-blur);
    backdrop-filter: var(--surface-blur);
    border-radius: var(--radius);
    padding: 2.5rem;
    width: 100%;
    max-width: 440px;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--gray-200);
    animation: authFadeIn 0.4s ease-out;
}

@keyframes authFadeIn {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.auth-shake {
    animation: authShake 0.5s ease-in-out;
}

@keyframes authShake {
    0%, 100% {
        transform: translateX(0);
    }

    15% {
        transform: translateX(-8px);
    }

    30% {
        transform: translateX(8px);
    }

    45% {
        transform: translateX(-6px);
    }

    60% {
        transform: translateX(6px);
    }

    75% {
        transform: translateX(-3px);
    }

    90% {
        transform: translateX(3px);
    }
}

.auth-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.auth-icon {
    width: 60px;
    height: 60px;
    background: none;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    margin: 0 auto 1rem;
    box-shadow: none;
}

.auth-header h1 {
    font-size: 1.5rem;
    margin-bottom: .3rem;
    color: var(--gray-900);
}

.auth-header p {
    color: var(--gray-500);
    font-size: .9rem;
}

/* Role Pills */
.auth-roles {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 1.75rem;
}

.auth-role-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--gray-50);
    color: var(--gray-500);
    border: 1px solid var(--gray-200);
}

    .auth-role-pill i {
        font-size: 0.65rem;
    }

/* Auth Fields */
.auth-field {
    margin-bottom: 1.25rem;
}

.auth-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .85rem;
    font-weight: 600;
    margin-bottom: .4rem;
    color: var(--gray-700);
}

    .auth-label i {
        font-size: 0.75rem;
        color: var(--gray-400);
    }

.auth-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.auth-input {
    width: 100%;
    padding: .7rem 1rem;
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-sm);
    font-family: var(--font);
    font-size: .9rem;
    color: var(--gray-900);
    background: white;
    transition: border-color .2s, box-shadow .2s;
}

    .auth-input:focus {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(31, 41, 55, 0.12);
    }

    .auth-input::placeholder {
        color: var(--gray-300);
    }

/* Password Toggle */
.auth-toggle-pw {
    position: absolute;
    right: 10px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--gray-400);
    padding: 4px;
    font-size: 0.9rem;
    transition: color .15s;
}

    .auth-toggle-pw:hover {
        color: var(--gray-700);
    }

/* Remember Me */
.auth-remember {
    margin-bottom: 1.5rem;
}

.auth-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .85rem;
    color: var(--gray-600);
    cursor: pointer;
}

.auth-checkbox {
    width: 16px;
    height: 16px;
    accent-color: var(--primary);
    cursor: pointer;
}

/* Submit Button */
.auth-submit {
    padding: .8rem 1.5rem;
    font-size: 1rem;
    border-radius: var(--radius-sm);
    transition: all .2s;
}

    .auth-submit:active {
        transform: scale(0.98);
    }

.auth-footer {
    text-align: center;
    margin-top: 1.75rem;
    font-size: .78rem;
    color: var(--gray-400);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

    .auth-footer code {
        background: var(--gray-100);
        padding: .1rem .4rem;
        border-radius: 4px;
    }

/* ============================================================
   ALERTS
   ============================================================ */
.alert {
    padding: .9rem 1.2rem;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    font-size: .875rem;
    margin-bottom: 1.25rem;
}

    .alert i {
        margin-top: .1rem;
        flex-shrink: 0;
    }

.alert-error {
    background: var(--danger-light);
    color: var(--danger);
    border: 1px solid #fecaca;
}

.alert-warning {
    background: var(--warning-light);
    color: var(--warning);
    border: 1px solid #fde68a;
}

/* ============================================================
   CHECKLIST PAGE
   ============================================================ */
.checklist-page {
    margin: 0 auto;
    padding: 2.5rem 2rem 4rem;
}

.checklist-header {
    background: var(--surface-strong);
    -webkit-backdrop-filter: var(--surface-blur);
    backdrop-filter: var(--surface-blur);
    border-radius: var(--radius);
    padding: 1.75rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-200);
}

.emp-info {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.emp-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    font-size: 1.2rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-family: var(--font-mono);
    letter-spacing: -1px;
}

.emp-details {
    flex: 1;
    min-width: 0;
}

    .emp-details h1 {
        font-size: 1.3rem;
        font-weight: 700;
        margin-bottom: .4rem;
    }

.emp-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    font-size: .8rem;
    color: var(--gray-500);
}

    .emp-meta span {
        display: flex;
        align-items: center;
        gap: .3rem;
    }

.emp-status {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .3rem;
}

    .emp-status small {
        font-size: .75rem;
        color: var(--gray-500);
    }

/* Progress Bar */
.progress-section {
}

.progress-info {
    display: flex;
    justify-content: space-between;
    font-size: .875rem;
    font-weight: 600;
    margin-bottom: .4rem;
}

.progress-bar-bg {
    height: 10px;
    background: var(--gray-100);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: .4rem;
}

.progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--gray-700), var(--gray-500));
    border-radius: 999px;
    transition: width .5s ease;
}

.progress-counts {
    font-size: .8rem;
    color: var(--gray-500);
}

/* Checklist Sections */
.checklist-section {
    background: var(--surface-strong);
    -webkit-backdrop-filter: var(--surface-blur);
    backdrop-filter: var(--surface-blur);
    border-radius: var(--radius);
    border: 1px solid var(--gray-200);
    margin-bottom: 1.25rem;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.checklist-section-title {
    padding: 1rem 1.5rem;
    background: var(--surface-muted);
    border-bottom: 1px solid var(--gray-200);
    font-size: 1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--gray-700);
}

/* Step Rows */
.step-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.5rem;
    border-bottom: 1px solid var(--gray-200);
    transition: background .15s;
}

    .step-row:last-child {
        border-bottom: none;
    }

    .step-row:hover {
        background: var(--row-hover);
    }

.step-done {
    background: var(--success-light) !important;
}

.step-inprog {
    background: var(--gray-50) !important;
}

.step-skipped {
    opacity: .65;
}

.step-blocked {
    background: var(--danger-light) !important;
}

.step-icon {
    font-size: 1.25rem;
    flex-shrink: 0;
    color: var(--gray-300);
}

.step-done .step-icon {
    color: var(--success);
}

.step-inprog .step-icon {
    color: var(--gray-700);
}

.step-blocked .step-icon {
    color: var(--danger);
}

.step-body {
    flex: 1;
    min-width: 0;
}

.step-header {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    margin-bottom: .4rem;
}

.step-order {
    font-size: .75rem;
    font-family: var(--font-mono);
    color: white;
    background: var(--primary);
    padding: .15rem .5rem;
    border-radius: 4px;
    white-space: nowrap;
}

.step-title {
    font-weight: 600;
    font-size: 1rem;
}

.step-desc {
    font-size: .825rem;
    color: var(--gray-500);
    margin-bottom: .4rem;
    line-height: 1.5;
}

.step-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem .9rem;
    font-size: .78rem;
    color: var(--gray-500);
}

    .step-meta span {
        display: flex;
        align-items: center;
        gap: .25rem;
    }

.step-notes {
    margin-top: .5rem;
    background: var(--gray-50);
    border-radius: 6px;
    padding: .5rem .75rem;
    font-size: .78rem;
    color: var(--gray-600);
    display: flex;
    flex-wrap: wrap;
    gap: .3rem .9rem;
}

.step-note-text {
    width: 100%;
    margin: .2rem 0 0;
}

.step-action {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 4px;
}

.step-right {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.step-updated-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    font-size: .78rem;
    color: var(--gray-500);
}

    .step-updated-info span {
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .step-updated-info i {
        font-size: .7rem;
    }

/* Status tags */
.step-status-tag, .status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .72rem;
    font-weight: 700;
    padding: .2rem .6rem;
    border-radius: 999px;
    letter-spacing: .02em;
    text-transform: uppercase;
}
/* Not Started */
.status-not-started {
    background: var(--gray-100);
    color: var(--gray-500);
}
/* Pending */
.status-pending {
    color: #92400e;
}
/* In Progress */
.status-in-progress {
    background: #dbeafe;
    color: #1e40af;
}
/* Completed */
.status-completed, .status-done {
    color: #166534;
}
/* Skipped */
.status-skipped {
    background: #f3e8ff;
    color: #6b21a8;
}
/* Blocked */
.status-blocked {
    background: #fef2f2;
    color: #991b1b;
}
/* Generic progress (used in grids/dashboards) */
.status-progress {
    color: #1e40af;
}

/* ============================================================
   MODAL
   ============================================================ */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .45);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    padding: 1rem;
}

.modal-box {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    width: 100%;
    max-width: 520px;
    box-shadow: var(--shadow-lg);
}

.modal-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .modal-header h3 {
        font-size: 1.05rem;
        font-weight: 700;
    }

.modal-close {
    background: none;
    border: none;
    font-size: 1.1rem;
    color: var(--gray-500);
    cursor: pointer;
    padding: .2rem;
}

    .modal-close:hover {
        color: var(--gray-900);
    }

.modal-body {
    padding: 1.5rem;
}

    .modal-body .form-group:last-child {
        margin-bottom: 0;
    }

.modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--gray-200);
    display: flex;
    justify-content: flex-end;
    gap: .75rem;
}

/* ============================================================
   ADMIN PAGE
   ============================================================ */
.admin-page {
    margin: 0 auto;
    padding: 2.5rem 2rem 4rem;
}

.admin-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

    .admin-header h1 {
        font-size: 1.75rem;
        font-weight: 700;
        flex: 1;
        display: flex;
        align-items: center;
        gap: .5rem;
    }

    .admin-header p {
        width: 100%;
        color: var(--gray-500);
        margin-top: -.5rem;
        order: 1;
    }

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}

/* Glassmorphism stat cards: frosted translucent panes with a coloured
   top accent line and a soft sheen that sweeps across on hover. */
.stat-card {
    position: relative;
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border-radius: var(--radius);
    padding: 1.4rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    overflow: hidden;
    transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease, border-color .3s ease;
}

    /* Coloured accent line that runs along the top edge of each card. */
    .stat-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, var(--gray-700), var(--gray-500));
        opacity: .9;
    }

    /* Soft moving glass sheen that sweeps across the card on hover. */
    .stat-card::after {
        content: "";
        position: absolute;
        top: 0;
        left: -75%;
        width: 50%;
        height: 100%;
        background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent);
        transform: skewX(-20deg);
        transition: left .6s ease;
        pointer-events: none;
    }

    .stat-card:hover {
        transform: translateY(-6px);
        box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.7);
        border-color: rgba(255, 255, 255, 0.9);
    }

        .stat-card:hover::after {
            left: 125%;
        }

.stat-icon {
    font-size: 1.5rem;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

/* Dashboard stat-card icons are intentionally static (no animation). */

.stat-blue .stat-icon {
    background: var(--gray-100);
    color: var(--gray-700);
}

.stat-yellow .stat-icon {
    background: #fef3c7;
    color: #b45309;
}

.stat-orange .stat-icon {
    background: #fff7ed;
    color: #ea580c;
}

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

.stat-info h2 {
    font-size: 1.75rem;
    font-weight: 700;
    font-family: var(--font-mono);
    line-height: 1;
}

.stat-info p {
    font-size: .8rem;
    color: var(--gray-500);
    font-weight: 500;
    margin-top: .2rem;
}

/* Short description under each stat label — explains what the metric
   means / its function. Used across every dashboard stat card. Pair it
   with a `title` attribute on the .stat-card for a hover tooltip too. */
.stat-info .stat-hint {
    display: block;
    font-size: .68rem;
    line-height: 1.35;
    color: var(--gray-500);
    opacity: .8;
    font-weight: 500;
    margin-top: .25rem;
}

/* Admin Sections */
.admin-section {
    background: var(--surface-strong);
    -webkit-backdrop-filter: var(--surface-blur);
    backdrop-filter: var(--surface-blur);
    border-radius: var(--radius);
    border: 1px solid var(--gray-200);
    box-shadow: var(--shadow-sm);
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.admin-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    background: var(--surface-muted);
    border-bottom: 1px solid var(--gray-200);
}

.admin-section-title {
    padding: 1rem 1.5rem;
    background: var(--surface-muted);
    font-size: 1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* Team Breakdown */
.team-breakdown {
    padding: 1.25rem 1.5rem;
}

.breakdown-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: .65rem;
}

.breakdown-team {
    width: 180px;
    font-size: .875rem;
    font-weight: 600;
    flex-shrink: 0;
}

.breakdown-bar-bg {
    flex: 1;
    height: 8px;
    background: var(--gray-100);
    border-radius: 999px;
}

.breakdown-bar {
    height: 8px;
    background: var(--primary);
    border-radius: 999px;
    max-width: 100%;
}

.breakdown-count {
    font-size: .8rem;
    font-family: var(--font-mono);
    color: var(--gray-500);
    width: 30px;
    text-align: right;
}

/* Tables */
.table-wrap {
    overflow-x: auto;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
    background: var(--surface-table);
    -webkit-backdrop-filter: var(--surface-blur);
    backdrop-filter: var(--surface-blur);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

    .data-table th {
        padding: .75rem 1rem;
        text-align: left;
        font-size: .78rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: var(--gray-500);
        background: var(--surface-muted);
        border-bottom: 1px solid var(--gray-200);
    }

    .data-table td {
        padding: .9rem 1rem;
        border-bottom: 1px solid var(--gray-200);
        vertical-align: middle;
    }

    .data-table tr:last-child td {
        border-bottom: none;
    }

    .data-table tbody tr {
        transition: background .15s ease;
    }

    .data-table tr:hover td {
        background: var(--row-hover);
    }

.table-employee {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
}

.table-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    font-size: .8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-family: var(--font-mono);
}

/* Hardening: keep the initials badge a perfect, non-collapsing circle even
   inside Syncfusion grid cells (whose Material theme can otherwise shrink a
   flex child to zero width, making the initials overlap the name). The
   `flex`/`min-*` lock its size and `!important` beats the grid theme. */
.table-employee .table-avatar,
.e-grid .table-avatar {
    flex: 0 0 36px !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    line-height: 1 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    text-transform: uppercase;
    white-space: nowrap !important;
}

.table-employee strong {
    display: block;
    font-size: .875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

.table-employee small {
    font-size: .78rem;
    color: var(--gray-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    max-width: 220px;
}

.table-employee > div:last-child {
    min-width: 0;
    line-height: 1.4;
}

.team-pill {
    background: var(--primary-light);
    color: var(--primary);
    font-size: .75rem;
    font-weight: 600;
    padding: .25rem .65rem;
    border-radius: 999px;
    white-space: nowrap;
}

.desc-cell {
    max-width: 280px;
    font-size: .8rem;
    color: var(--gray-500);
}

.step-num-badge {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    font-family: var(--font-mono);
    font-size: .8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.empty-state {
    text-align: center;
    color: var(--gray-400);
    padding: 2.5rem;
    font-size: .875rem;
}

/* Filter Bar */
.filter-bar {
    display: flex;
    gap: .75rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

    .filter-bar .form-control {
        max-width: 360px;
    }

    .filter-bar .form-select {
        max-width: 180px;
    }

/* ============================================================
   PAGE SPECIFIC
   ============================================================ */
/* Confirmation email sent */
.confirm-sent {
    text-align: center;
    padding: 3rem 2rem;
}

.confirm-sent h1 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: .5rem;
}

.confirm-sent p {
    color: var(--gray-600);
    font-size: .9rem;
    line-height: 1.6;
    margin-bottom: 2rem;
}

.confirm-sent a {
    display: inline-block;
    margin-top: 1rem;
    padding: .6rem 1.2rem;
    border-radius: var(--radius-sm);
    background: var(--primary);
    color: white;
    font-weight: 500;
    text-decoration: none;
    transition: background .2s;
}

    .confirm-sent a:hover {
        background: #000;
    }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .hero-section {
        gap: 3rem;
        padding: 4rem 1.5rem 3rem;
    }

    .hero-title {
        font-size: 2.5rem;
    }

    .stats-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.75rem;
    }

    .stat-card {
        padding: 1rem;
    }

    .stat-info h2 {
        font-size: 1.5rem;
    }
}

@media (max-width: 768px) {
    /* ── Hero Section ────────────────────────────── */
    .hero-section {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 2.5rem 1.25rem 2rem;
    }

    .hero-badge {
        font-size: 0.75rem;
        padding: 0.25rem 0.6rem;
    }

    .hero-title {
        font-size: 1.75rem;
        line-height: 1.2;
        margin-bottom: 0.75rem;
    }

    .hero-sub {
        font-size: 0.95rem;
        line-height: 1.6;
        margin-bottom: 1.5rem;
    }

    .hero-actions {
        gap: 0.75rem;
    }

    .hero-illustration {
        display: none;
    }

    /* ── Section Titles ──────────────────────────── */
    .section-title {
        font-size: 1.4rem;
    }

    .section-sub {
        font-size: 0.9rem;
        margin-bottom: 1.5rem;
    }

    /* ── Teams Section ───────────────────────────── */
    .teams-section, .steps-overview {
        padding: 2rem 1.25rem;
    }

    .teams-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 0.75rem;
    }

    .team-card {
        padding: 1.25rem 1rem;
        border-radius: 10px;
    }

    .team-icon {
        font-size: 1.4rem;
        margin-bottom: 0.5rem;
    }

    .team-name {
        font-size: 0.9rem;
        margin-bottom: 0.3rem;
    }

    .team-extras {
        font-size: 0.75rem;
        line-height: 1.4;
    }

    /* ── Timeline Steps ──────────────────────────── */
    .steps-timeline {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .timeline-step {
        gap: 0.75rem;
        padding: 0.9rem;
    }

    .step-num {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
    }

    /* ── Forms ───────────────────────────────────── */
    .form-row {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .form-card {
        padding: 1.5rem 1.25rem;
    }

    .form-page {
        padding: 0 1rem;
        margin: 1.5rem auto;
    }

    /* ── Navbar ──────────────────────────────────── */
    .navbar-inner {
        padding: 0 0.75rem;
        height: 56px;
    }

    .navbar-brand {
        gap: 0.4rem;
        font-size: 1rem;
    }

    .brand-icon {
        width: 28px;
        height: 28px;
    }

    /* ── Buttons ─────────────────────────────────── */
    .btn {
        padding: 0.5rem 1rem;
        font-size: 0.8rem;
        gap: 0.3rem;
    }

    .btn-lg {
        padding: 0.65rem 1.25rem;
        font-size: 0.9rem;
    }

    /* ── Stats Grid ──────────────────────────────── */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .stat-card {
        padding: 1rem 0.75rem;
        gap: 0.75rem;
    }

    .stat-icon {
        width: 40px;
        height: 40px;
        font-size: 1.25rem;
    }

    .stat-info h2 {
        font-size: 1.4rem;
    }

    .stat-info p {
        font-size: 0.75rem;
    }

    /* ── Employee Info ───────────────────────────── */
    .emp-info {
        flex-direction: column;
        gap: 1rem;
    }

    .emp-avatar {
        width: 48px;
        height: 48px;
        font-size: 1rem;
    }

    .emp-details h1 {
        font-size: 1.1rem;
    }

    .emp-meta {
        font-size: 0.75rem;
    }

    .emp-status {
        align-items: flex-start;
    }

    /* ── Checklist Section ───────────────────────── */
    .checklist-page {
        padding: 1.5rem 1.25rem 3rem;
    }

    .checklist-header {
        padding: 1.25rem;
        margin-bottom: 1rem;
    }

    .step-row {
        flex-direction: column;
        align-items: flex-start;
        padding: 1rem;
        gap: 0.75rem;
    }

    .step-right {
        width: 100%;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .step-body {
        width: 100%;
    }

    .step-title {
        font-size: 0.9rem;
    }

    .step-desc {
        font-size: 0.8rem;
    }

    /* ── Admin Page ──────────────────────────────── */
    .admin-page {
        padding: 1.5rem 1.25rem 3rem;
    }

    .admin-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
        margin-bottom: 1.5rem;
    }

    .admin-header h1 {
        font-size: 1.4rem;
        width: 100%;
    }

    .admin-header > div:last-child {
        width: 100%;
        flex-direction: column;
        gap: 0.75rem;
    }

    .admin-header .btn {
        width: 100%;
        justify-content: flex-start;
        font-size: 0.85rem;
        padding: 0.6rem 1rem;
    }

    .admin-section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
        padding: 1rem;
    }

    .admin-section-header .btn {
        width: 100%;
        justify-content: center;
    }

    /* ── Charts Grid ─────────────────────────────── */
    .admin-page > div:nth-child(3) {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    .admin-section {
        margin-bottom: 1.5rem;
    }

    .admin-section-title {
        padding: 1rem;
        font-size: 1rem;
    }

    #statusChart,
    #teamChart {
        min-height: 250px !important;
    }

    /* ── Table ───────────────────────────────────── */
    .table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .data-table {
        font-size: 0.8rem;
    }

    .data-table th {
        padding: 0.6rem 0.75rem;
        font-size: 0.7rem;
    }

    .data-table td {
        padding: 0.7rem 0.75rem;
    }

    .table-employee strong {
        max-width: 140px;
        font-size: 0.8rem;
    }

    .table-employee small {
        font-size: 0.75rem;
        max-width: 140px;
    }

    .desc-cell {
        max-width: 160px;
        font-size: 0.75rem;
    }

    /* ── Auth Page ───────────────────────────────── */
    .auth-page {
        min-height: calc(100vh - 120px);
        padding: 1.5rem 1rem;
    }

    .auth-card {
        padding: 1.75rem 1.5rem;
        max-width: 100%;
    }

    .auth-header {
        margin-bottom: 1.25rem;
    }

    .auth-icon {
        width: 48px;
        height: 48px;
        font-size: 1.15rem;
    }

    .auth-header h1 {
        font-size: 1.15rem;
        margin-bottom: 0.2rem;
    }

    .auth-header p {
        font-size: 0.8rem;
    }

    .auth-roles {
        gap: 4px;
        margin-bottom: 1.25rem;
    }

    .auth-role-pill {
        font-size: 0.6rem;
        padding: 2px 6px;
    }

    .auth-field {
        margin-bottom: 1rem;
    }

    .auth-label {
        font-size: 0.75rem;
        margin-bottom: 0.3rem;
    }

    .auth-label i {
        font-size: 0.65rem;
    }

    .auth-input {
        padding: 0.6rem 0.75rem;
        font-size: 0.85rem;
    }

    .auth-toggle-pw {
        font-size: 0.85rem;
    }

    .auth-remember {
        margin-bottom: 1.25rem;
    }

    .auth-checkbox-label {
        font-size: 0.75rem;
        gap: 6px;
    }

    .auth-submit {
        padding: 0.65rem 1rem;
        font-size: 0.85rem;
        width: 100%;
    }

    .auth-footer {
        margin-top: 1.25rem;
        font-size: 0.7rem;
        flex-direction: column;
        gap: 4px;
    }

    /* ── Modals ──────────────────────────────────── */
    .modal-overlay {
        padding: 1rem;
    }

    .modal-box {
        max-width: 95vw;
    }

    .modal-header h3 {
        font-size: 1rem;
    }

    /* ── Admin Dashboard Mobile ──────────────────── */
    .admin-page {
        padding: 1rem 0.75rem 2rem;
    }

    .admin-header {
        margin-bottom: 1.25rem;
    }

    .admin-header h1 {
        font-size: 1.25rem;
        margin-bottom: 0.5rem;
    }

    .admin-header > p {
        font-size: 0.8rem;
        margin-bottom: 0.75rem;
    }

    .admin-header > div {
        width: 100%;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0.5rem !important;
    }

    .admin-header .btn {
        width: 100%;
        justify-content: center;
        font-size: 0.8rem;
        padding: 0.55rem 0.85rem;
        white-space: normal;
    }

    .stats-grid {
        display: none !important;
    }

    .stat-card {
        padding: 0.9rem 0.75rem;
        gap: 0.5rem;
    }

    .stat-icon {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }

    .stat-info h2 {
        font-size: 1.25rem;
    }

    .stat-info p {
        font-size: 0.7rem;
    }

    /* ── Charts Stack on Mobile ──────────────────── */
    .admin-page > div:nth-child(3) {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
    }

    .admin-section {
        margin-bottom: 1.25rem;
    }

    .admin-section-title {
        padding: 0.85rem;
        font-size: 0.95rem;
    }

    .admin-section-header {
        padding: 0.85rem;
        gap: 0.5rem;
        flex-direction: column;
        align-items: stretch;
    }

    .admin-section-header .btn {
        width: 100%;
        font-size: 0.75rem;
        padding: 0.5rem 0.85rem;
    }

    #statusChart,
    #teamChart {
        min-height: 200px !important;
    }

    /* ── Syncfusion Grid on Mobile ───────────────── */
    .e-grid {
        font-size: 0.8rem !important;
    }

    .e-grid .e-rowcell {
        padding: 0.5rem !important;
    }

    .e-grid .e-headercell {
        padding: 0.5rem !important;
        font-size: 0.7rem !important;
    }

    /* Mobile size-only override; the global rule above keeps the circle shape. */
    .table-employee .table-avatar,
    .e-grid .table-avatar {
        flex: 0 0 32px !important;
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        font-size: 0.7rem;
    }

    .table-employee strong {
        max-width: 120px;
        font-size: 0.75rem;
    }

    .table-employee small {
        font-size: 0.7rem;
        max-width: 120px;
    }

    .team-pill {
        font-size: 0.7rem;
        padding: 0.2rem 0.5rem;
    }

    .status-badge {
        font-size: 0.65rem;
        padding: 0.15rem 0.5rem;
    }
}

/* ============================================================
   SYNCFUSION GRID OVERRIDES — blend with OnboardingHub theme
   ============================================================ */
.e-grid {
    border: 1px solid var(--gray-200) !important;
    border-radius: var(--radius-sm) !important;
    overflow: hidden;
    font-family: var(--font) !important;
    /* Standalone tables are mostly transparent with just a little white
       tint, so the page background image clearly shows through. */
    background: var(--surface-table) !important;
    -webkit-backdrop-filter: var(--surface-blur);
    backdrop-filter: var(--surface-blur);
    box-shadow: var(--shadow-sm);
}

    /* When a grid already lives inside a frosted container, keep it
       transparent so we don't stack two translucent layers and over-darken
       the table. The wrapper supplies the frosting (exactly like the
       dashboard's Recent Onboarding grid). */
    .admin-section .e-grid,
    .checklist-section .e-grid,
    #step-training-assignments .e-grid {
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .e-grid .e-gridheader {
        background: var(--surface-table-header) !important;
        border-bottom: 1px solid var(--gray-200) !important;
    }

    .e-grid .e-headercell {
        font-size: .78rem !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: .05em !important;
        color: var(--gray-500) !important;
        background: transparent !important;
    }

    /* Rows/content sit on a near-solid white so the table reads cleanly over
       the page background while keeping clear row separation. */
    .e-grid .e-content,
    .e-grid .e-gridcontent,
    .e-grid .e-table,
    .e-grid .e-row,
    .e-grid .e-rowcell {
        background: transparent !important;
    }

    .e-grid .e-rowcell {
        font-size: .875rem !important;
        color: var(--gray-900) !important;
        border-color: var(--gray-200) !important;
        border-bottom: 1px solid var(--gray-200) !important;
        vertical-align: middle !important;
    }

    .e-grid .e-row {
        transition: background .15s ease;
    }

    .e-grid .e-row:hover .e-rowcell {
        background: var(--row-hover) !important;
    }

    /* Chart container backgrounds — keep the frosted panel visible behind charts */
    .e-chart, .e-accumulationchart {
        background: transparent !important;
    }

        /* The Syncfusion chart renders an inner <svg> with its own background
           <rect>; force those transparent so the page background shows through. */
        .e-chart svg,
        .e-accumulationchart svg {
            background: transparent !important;
        }

        .e-chart svg > rect:first-child,
        .e-accumulationchart svg > rect:first-child,
        .e-chart [id$="_ChartBorder"],
        .e-accumulationchart [id$="_AccumulationChartBorder"] {
            fill: transparent !important;
            fill-opacity: 0 !important;
        }

    /* Fix employee cell overflow in grids */
    .e-grid .e-rowcell .table-employee {
        overflow: visible;
    }

        .e-grid .e-rowcell .table-employee > div:last-child {
            min-width: 0;
        }

    .e-grid .e-rowcell {
        overflow: visible !important;
        white-space: normal !important;
    }

    /* Action By Dropdown (Supervisor inline edit) */
    .action-by-wrapper {
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

    .action-by-dropdown {
        font-size: 0.8rem;
        font-weight: 600;
        padding: 2px 6px;
        border: 1px solid var(--gray-300, #d1d5db);
        border-radius: 6px;
        background: var(--gray-50, #f9fafb);
        color: var(--gray-700, #374151);
        cursor: pointer;
        outline: none;
        transition: border-color 0.2s, box-shadow 0.2s;
    }

        .action-by-dropdown:hover {
            border-color: var(--primary, #374151);
        }

        .action-by-dropdown:focus {
            border-color: var(--primary, #374151);
            box-shadow: 0 0 0 2px rgba(31, 41, 55, 0.15);
        }

    /* Training Grid — equal sides */
    #step-training-assignments {
        flex-wrap: wrap;
    }

        #step-training-assignments .step-body {
            width: 100% !important;
            flex-basis: 100%;
            padding: 0 0.5rem;
        }

        #step-training-assignments #trainingGrid {
            width: 100%;
            border-radius: var(--radius-sm);
            overflow: hidden;
        }

/* ============================================================
   SOFT BORDERS — gentle, glassy edges for cards, tables & grids
   Centralised at the end so these override the lighter gray-200
   borders defined throughout the file. Card/container colours stay
   on the strong tone; tables and grids use the soft tone so data
   reads gently. Adjust --border-strong / --border-soft (in :root)
   to retune every border at once.
   ============================================================ */

/* ---- Cards & container panels (color only, keeps existing width/radius) ---- */
.team-card,
.form-card,
.auth-card,
.illustration-card,
.timeline-step,
.admin-section,
.checklist-section,
.checklist-header,
.modal-box {
    border-color: var(--border-strong);
}

/* ---- Section / modal dividers & rows ---- */
.admin-section-header,
.checklist-section-title,
.modal-header,
.modal-footer,
.step-row {
    border-color: var(--border-strong);
}

/* ---- Native tables — soft, light borders ---- */
.data-table {
    border: 1px solid var(--border-soft);
}

    .data-table th {
        border-bottom: 1px solid var(--border-soft);
    }

    .data-table td {
        border-bottom-color: var(--border-soft);
    }

/* ---- Syncfusion grids — soft borders (need !important to beat theme overrides above) ---- */
.e-grid {
    border-color: var(--border-soft) !important;
}

    .e-grid .e-gridheader,
    .e-grid .e-headercell {
        border-bottom: 1px solid var(--border-soft) !important;
    }

    .e-grid .e-rowcell {
        border-color: var(--border-soft) !important;
    }

/* ============================================================
   DASHBOARD HERO & STAT ENHANCEMENTS
   Shared by the Supervisor, Infra and HR dashboards so they get
   the same polished welcome banner, completion ring, department
   badge and animated stat cards used on the employee checklist.
   ============================================================ */

/* ── Welcome hero banner ─────────────────────────────────── */
.dash-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    background: linear-gradient(135deg, var(--gray-900) 0%, var(--gray-700) 100%);
    color: #fff;
    border-radius: var(--radius);
    padding: 1.6rem 1.85rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow);
}

    /* When everyone is fully onboarded the hero turns celebratory green. */
    .dash-hero.dash-hero--done {
        background: linear-gradient(135deg, #15803d 0%, var(--success) 100%);
    }

.dash-hero__text {
    min-width: 0;
}

    .dash-hero__text h1 {
        font-size: 1.5rem;
        font-weight: 700;
        margin: 0 0 .35rem;
        color: #fff;
        display: flex;
        align-items: center;
        gap: .6rem;
        flex-wrap: wrap;
    }

    .dash-hero__text p {
        font-size: .9rem;
        opacity: .85;
        margin: 0;
        max-width: 60ch;
    }

/* Department badge / role chip sitting in the hero. */
.dash-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: .28rem .7rem;
    border-radius: 999px;
    background: rgba(255,255,255,.16);
    color: #fff;
    border: 1px solid rgba(255,255,255,.28);
    white-space: nowrap;
}

.dash-hero__meta {
    margin-top: .65rem;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.1rem;
    font-size: .82rem;
    opacity: .92;
}

    .dash-hero__meta span {
        display: inline-flex;
        align-items: center;
        gap: .4rem;
    }

/* ── Completion ring (matches the employee welcome ring) ──── */
.dash-ring {
    --pct: 0;
    width: 104px;
    height: 104px;
    border-radius: 50%;
    flex-shrink: 0;
    background: conic-gradient(#fff calc(var(--pct) * 1%), rgba(255,255,255,.22) 0);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: box-shadow .3s ease;
}

.dash-hero--done .dash-ring {
    box-shadow: 0 0 0 4px rgba(255,255,255,.16);
}

.dash-ring__inner {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    /* Darker, more opaque disc so the white % text stays legible even when the
       ring fills to 100% - a near-white ring previously washed the text out,
       especially on the green "complete" hero. */
    background: rgba(0,0,0,.45);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.dash-ring__pct {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1;
    font-family: var(--font-mono);
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,.45);
}

.dash-ring__label {
    font-size: .62rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #fff;
    opacity: .92;
    margin-top: 2px;
    text-shadow: 0 1px 2px rgba(0,0,0,.45);
}

/* ── Entrance animation for stat cards ───────────────────────
   The resting state is VISIBLE by default; the hidden start lives
   in the keyframes so cards still show if the animation never runs
   (cached CSS, reduced motion, etc.). */
.dash-animate {
    animation: dashFadeUp .5s ease both;
}

.dash-d1 { animation-delay: .04s; }
.dash-d2 { animation-delay: .11s; }
.dash-d3 { animation-delay: .18s; }
.dash-d4 { animation-delay: .25s; }

@keyframes dashFadeUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 640px) {
    .dash-hero {
        padding: 1.25rem;
    }

        .dash-hero__text h1 {
            font-size: 1.25rem;
        }

    .dash-ring {
        width: 88px;
        height: 88px;
    }

        .dash-ring__inner {
            width: 68px;
            height: 68px;
        }
}

@media (prefers-reduced-motion: reduce) {
    .dash-animate {
        animation: none !important;
        opacity: 1;
        transform: none;
    }
}