/* ==========================================================================
   Rlife HRMS — Modern Enterprise UI Design System
   Brand: IndusInd Nippon Life Insurance
   Primary: Deep Maroon #8B1A1A | Accent: Gold #C8A951
   Version: 2.0.0
   ========================================================================== */

/* ==========================================================================
   1. CSS VARIABLES & DESIGN TOKENS
   ========================================================================== */

@import url('../fonts/inter/inter.css');

:root {
    /* Brand Colors */
    --primary: #8B1A1A;     
    --primary-light: #B33335;
    --primary-dark: #6D1416;
    --primary-hover: #7A1618;
    --primary-subtle: #FEF2F2;
    --primary-muted: rgba(139, 26, 26, 0.08);
    --primary-ring: rgba(139, 26, 26, 0.2);

    /* Accent */
    --accent-gold: #C8A951;
    --accent-gold-light: #D4BD74;
    --accent-gold-dark: #A88D3A;
    --accent-gold-subtle: #FBF8EF;

    /* Semantic Colors */
    --success: #059669;
    --success-light: #D1FAE5;
    --success-dark: #047857;
    --warning: #D97706;
    --warning-light: #FEF3C7;
    --warning-dark: #B45309;
    --danger: #DC2626;
    --danger-light: #FEE2E2;
    --danger-dark: #B91C1C;
    --info: #2563EB;
    --info-light: #DBEAFE;
    --info-dark: #1D4ED8;

    /* Neutral Palette */
    --bg: #F1F5F9;
    --bg-secondary: #E2E8F0;
    --surface: #FFFFFF;
    --surface-secondary: #F8FAFC;
    --surface-hover: #F1F5F9;
    --text-primary: #1E293B;
    --text-secondary: #64748B;
    --text-tertiary: #94A3B8;
    --text-inverse: #FFFFFF;
    --border: #E2E8F0;
    --border-light: #F1F5F9;
    --border-dark: #CBD5E1;
    --divider: #E2E8F0;

    /* Border Radius */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.03);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.03);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
    --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.04);
    --shadow-primary: 0 4px 14px rgba(139, 26, 26, 0.25);
    --shadow-primary-lg: 0 8px 24px rgba(139, 26, 26, 0.3);

    /* Typography */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    --font-mono: 'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace;
    --font-size-xs: 11px;
    --font-size-sm: 12px;
    --font-size-base: 13px;
    --font-size-md: 14px;
    --font-size-lg: 16px;
    --font-size-xl: 18px;
    --font-size-2xl: 20px;
    --font-size-3xl: 24px;
    --font-size-4xl: 30px;
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.625;

    /* Spacing */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    /* Transitions */
    --transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Z-index Scale */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    --z-toast: 1080;
    --z-overlay: 9999;

    /* Layout */
    --navbar-height: 56px;
    --sidebar-width: 260px;
    --content-max-width: 1400px;
}


/* ==========================================================================
   2. BASE & RESET
   ========================================================================== */

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

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: var(--font-family) !important;
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    color: var(--text-primary);
    background-color: var(--bg) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-family) !important;
    font-weight: 600;
    color: var(--text-primary);
    line-height: var(--line-height-tight);
    margin-top: 0;
}

h1, .h1 { font-size: var(--font-size-4xl); font-weight: 700; }
h2, .h2 { font-size: var(--font-size-3xl); font-weight: 700; }
h3, .h3 { font-size: var(--font-size-2xl); font-weight: 600; }
h4, .h4 { font-size: var(--font-size-xl); font-weight: 600; }
h5, .h5 { font-size: var(--font-size-lg); font-weight: 600; }
h6, .h6 { font-size: var(--font-size-md); font-weight: 600; }

p {
    margin-top: 0;
    margin-bottom: var(--space-4);
    color: white;
}

p, span, label, td, th, li, a, div {
    font-family: var(--font-family);
}

label {
    font-weight: 500 !important;
    color: var(--text-primary);
    margin-bottom: var(--space-1);
    font-size: var(--font-size-base);
    display: inline-block;
}

small, .small {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

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

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

a:focus-visible {
    outline: 2px solid var(--primary-ring);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

hr {
    border: 0;
    border-top: 1px solid var(--border);
    margin: var(--space-4) 0;
}

img {
    max-width: 100%;
    height: auto;
}

::selection {
    background-color: var(--primary-muted);
    color: var(--primary-dark);
}


/* ==========================================================================
   3. NAVBAR / HEADER
   ========================================================================== */

.headersection {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%) !important;
    height: var(--navbar-height);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.1);
    border-bottom: none !important;
    position: relative;
    z-index: var(--z-fixed);
    transition: var(--transition);
}

.headersection::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(200, 169, 81, 0.3), transparent);
}

.headersection .navbar-brand,
.headersection .h-title {
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--text-inverse) !important;
    font-size: var(--font-size-lg);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.headersection .navbar-brand img,
.headersection .h-title img {
    height: 32px;
    width: auto;
}

.headersection .navbar-nav > li > a {
    color: rgba(255, 255, 255, 0.85) !important;
    transition: var(--transition-fast);
    font-weight: 500;
    font-size: var(--font-size-base);
    padding: var(--space-2) var(--space-3) !important;
    border-radius: var(--radius-sm);
    position: relative;
}

.headersection .navbar-nav > li > a:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.12) !important;
}

.headersection .navbar-nav > li.active > a,
.headersection .navbar-nav > li > a.active {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.15) !important;
}

.headersection .navbar-nav > li.active > a::after,
.headersection .navbar-nav > li > a.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 2px;
    background: var(--accent-gold);
    border-radius: var(--radius-full);
}

.headersection .navbar-nav > li > a i,
.headersection .navbar-nav > li > a .fa,
.headersection .navbar-nav > li > a .glyphicon {
    font-size: var(--font-size-lg);
    vertical-align: middle;
}

.navbar-fixed-top {
    border-radius: 0;
    border: none;
}

/* Profile Dropdown in Navbar */
.headersection .dropdown-menu {
    min-width: 220px;
    border-radius: var(--radius-md) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-xl) !important;
    padding: var(--space-2) !important;
    margin-top: var(--space-2);
    animation: fadeInDown 0.15s ease-out;
}

.headersection .dropdown-menu > li > a,
.headersection .dropdown-item {
    color: var(--text-primary) !important;
    padding: var(--space-2) var(--space-3) !important;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-base);
    font-weight: 500;
    transition: var(--transition-fast);
}

.headersection .dropdown-menu > li > a:hover,
.headersection .dropdown-item:hover {
    background: var(--primary-subtle) !important;
    color: var(--primary) !important;
}

.headersection .dropdown-menu .divider,
.headersection .dropdown-menu .dropdown-divider {
    margin: var(--space-1) 0;
    border-top: 1px solid var(--border);
}

/* Mobile Menu Toggle */
.headersection .navbar-toggle,
.headersection .navbar-toggler {
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: var(--radius-sm);
    padding: var(--space-1) var(--space-2);
    transition: var(--transition-fast);
}

.headersection .navbar-toggle:hover,
.headersection .navbar-toggler:hover {
    background: rgba(255, 255, 255, 0.12) !important;
}

.headersection .navbar-toggle .icon-bar {
    background-color: #fff !important;
    height: 2px;
    border-radius: 1px;
}

/* Mobile Slide-in Nav */
@media (max-width: 767px) {
    .headersection .navbar-collapse {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: 280px;
        background: var(--surface);
        box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
        z-index: var(--z-modal);
        padding: var(--space-6) var(--space-4);
        overflow-y: auto;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .headersection .navbar-collapse:not(.in):not(.show) {
        transform: translateX(100%);
    }

    .headersection .navbar-collapse.in,
    .headersection .navbar-collapse.show {
        transform: translateX(0);
    }

    .headersection .navbar-nav > li > a {
        color: var(--text-primary) !important;
        padding: var(--space-3) var(--space-4) !important;
        border-radius: var(--radius-sm);
        margin-bottom: var(--space-1);
    }

    .headersection .navbar-nav > li > a:hover {
        background: var(--primary-subtle) !important;
        color: var(--primary) !important;
    }

    .headersection .navbar-nav > li.active > a {
        background: var(--primary) !important;
        color: #fff !important;
    }
}

/* Notification Badge */
.headersection .badge,
.headersection .notification-count {
    background: var(--danger) !important;
    color: #fff !important;
    font-size: 10px;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    padding: 0 5px;
    border-radius: var(--radius-full);
    position: absolute;
    top: 4px;
    right: 0;
}


/* ==========================================================================
   4. CONTENT AREA & LAYOUT
   ========================================================================== */

.main-content,
.content-section,
#inForce {
    padding: var(--space-6);
    max-width: var(--content-max-width);
    margin: 0 auto;
    animation: fadeInUp 0.3s ease-out;
}

.content-wrapper {
    min-height: calc(100vh - var(--navbar-height) - 60px);
    padding-top: var(--space-4);
}

/* Page Title */
.section-title,
.page-title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-3);
    border-bottom: 2px solid var(--border);
    position: relative;
}

.section-title::after,
.page-title::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 48px;
    height: 2px;
    background: var(--primary);
    border-radius: var(--radius-full);
}

.pdc-step-page-title {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-4);
    padding: var(--space-3) 0;
}

/* Breadcrumb */
.breadcrumb {
    background: transparent !important;
    padding: var(--space-2) 0 !important;
    margin-bottom: var(--space-4);
    font-size: var(--font-size-base);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.breadcrumb > li + li:before,
.breadcrumb-item + .breadcrumb-item::before {
    color: var(--text-tertiary);
    content: '/';
    padding: 0 var(--space-2);
}

.breadcrumb a {
    color: var(--info);
    font-weight: 500;
}

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

.breadcrumb .active,
.breadcrumb-item.active {
    color: var(--text-secondary);
}


/* ==========================================================================
   5. CARDS & PANELS
   ========================================================================== */

.card,
.full-panel,
.panel1,
.form-section,
.renewls-filter {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-sm) !important;
    transition: var(--transition);
    overflow: hidden;
}

.card:hover,
.full-panel:hover,
.panel1:hover {
    box-shadow: var(--shadow-md) !important;
}

/* Card Header */
.panel-heading,
.card-header {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
    padding: var(--space-4) var(--space-5) !important;
    font-weight: 600;
    background: var(--surface-secondary) !important;
    border-bottom: 1px solid var(--border) !important;
    font-size: var(--font-size-md);
    color: var(--text-primary);
}

/* Card Body */
.panel-body,
.card-body {
    padding: var(--space-5) !important;
}

/* Card Footer */
.panel-footer,
.card-footer {
    padding: var(--space-3) var(--space-5) !important;
    background: var(--surface-secondary) !important;
    border-top: 1px solid var(--border) !important;
}

/* Card Outlined Variant */
.card-outlined {
    border: 2px solid var(--border) !important;
    box-shadow: none !important;
}

.card-outlined:hover {
    border-color: var(--primary-light) !important;
}

/* Card Elevated Variant */
.card-elevated {
    border: none !important;
    box-shadow: var(--shadow-lg) !important;
}

.card-elevated:hover {
    box-shadow: var(--shadow-xl) !important;
    transform: translateY(-2px);
}

/* Panel within panel groups */
.panel {
    border-radius: var(--radius-md) !important;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-xs);
    margin-bottom: var(--space-4);
}

/* Form Section Heading */
.form-heading,
.form-heading2 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-3);
    border-bottom: 1px solid var(--border);
    background: var(--surface-secondary);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.form-heading2 {
    font-size: var(--font-size-md);
    padding: var(--space-2) var(--space-4);
}


/* ==========================================================================
   6. BUTTONS — COMPLETE SYSTEM
   ========================================================================== */

.btn {
    border-radius: var(--radius-sm) !important;
    transition: var(--transition) !important;
    font-weight: 500;
    font-family: var(--font-family);
    letter-spacing: 0.2px;
    font-size: var(--font-size-base);
    padding: var(--space-2) var(--space-5) !important;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    line-height: 1.5;
    white-space: nowrap;
    text-decoration: none;
    vertical-align: middle;
    border: 1px solid transparent;
    position: relative;
    overflow: visible; /* was hidden — clipped long button text on mobile */
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    text-decoration: none;
}

.btn:active {
    transform: scale(0.98) !important;
    box-shadow: var(--shadow-sm) !important;
}

.btn:focus,
.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--primary-ring) !important;
}

/* Primary / Save / With-Background */
.btn-primary,
.btn-with-bg,
.btn-save {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%) !important;
    border: none !important;
    color: var(--text-inverse) !important;
    box-shadow: var(--shadow-sm);
}

.btn-primary:hover,
.btn-with-bg:hover,
.btn-save:hover {
    background: linear-gradient(135deg, var(--primary-hover) 0%, var(--primary) 100%) !important;
    box-shadow: var(--shadow-primary) !important;
    color: var(--text-inverse) !important;
}

.btn-primary:focus,
.btn-with-bg:focus,
.btn-save:focus {
    box-shadow: 0 0 0 3px var(--primary-ring) !important;
}

.btn-primary:active,
.btn-with-bg:active,
.btn-save:active {
    background: var(--primary-dark) !important;
}

/* Secondary / Cancel / Outline */
.btn-secondary,
.btn-cancel,
.btn-default {
    background: var(--surface) !important;
    border: 1px solid var(--border-dark) !important;
    color: var(--text-primary) !important;
}

.btn-secondary:hover,
.btn-cancel:hover,
.btn-default:hover {
    background: var(--surface-hover) !important;
    border-color: var(--text-tertiary) !important;
    color: var(--text-primary) !important;
}

.btn-secondary:focus,
.btn-cancel:focus,
.btn-default:focus {
    box-shadow: 0 0 0 3px rgba(100, 116, 139, 0.15) !important;
}

/* Success */
.btn-success {
    background: linear-gradient(135deg, var(--success) 0%, var(--success-dark) 100%) !important;
    border: none !important;
    color: var(--text-inverse) !important;
}

.btn-success:hover {
    background: linear-gradient(135deg, var(--success-dark) 0%, var(--success) 100%) !important;
    box-shadow: 0 4px 14px rgba(5, 150, 105, 0.3) !important;
    color: var(--text-inverse) !important;
}

/* Danger */
.btn-danger {
    background: linear-gradient(135deg, var(--danger) 0%, var(--danger-dark) 100%) !important;
    border: none !important;
    color: var(--text-inverse) !important;
}

.btn-danger:hover {
    background: linear-gradient(135deg, var(--danger-dark) 0%, var(--danger) 100%) !important;
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.3) !important;
    color: var(--text-inverse) !important;
}

/* Info */
.btn-info {
    background: linear-gradient(135deg, var(--info) 0%, var(--info-dark) 100%) !important;
    border: none !important;
    color: var(--text-inverse) !important;
}

.btn-info:hover {
    background: linear-gradient(135deg, var(--info-dark) 0%, var(--info) 100%) !important;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3) !important;
    color: var(--text-inverse) !important;
}

/* Warning */
.btn-warning {
    background: linear-gradient(135deg, var(--warning) 0%, var(--warning-dark) 100%) !important;
    border: none !important;
    color: var(--text-inverse) !important;
}

.btn-warning:hover {
    background: linear-gradient(135deg, var(--warning-dark) 0%, var(--warning) 100%) !important;
    box-shadow: 0 4px 14px rgba(217, 119, 6, 0.3) !important;
    color: var(--text-inverse) !important;
}

/* Button — Outline Variants */
.btn-outline-primary {
    background: transparent !important;
    border: 1px solid var(--primary) !important;
    color: var(--primary) !important;
}

.btn-outline-primary:hover {
    background: var(--primary) !important;
    color: var(--text-inverse) !important;
}

.btn-outline-danger {
    background: transparent !important;
    border: 1px solid var(--danger) !important;
    color: var(--danger) !important;
}

.btn-outline-danger:hover {
    background: var(--danger) !important;
    color: var(--text-inverse) !important;
}

.btn-outline-success {
    background: transparent !important;
    border: 1px solid var(--success) !important;
    color: var(--success) !important;
}

.btn-outline-success:hover {
    background: var(--success) !important;
    color: var(--text-inverse) !important;
}

/* Ghost Button */
.btn-ghost {
    background: transparent !important;
    border: none !important;
    color: var(--text-secondary) !important;
    box-shadow: none !important;
}

.btn-ghost:hover {
    background: var(--surface-hover) !important;
    color: var(--text-primary) !important;
    transform: none;
    box-shadow: none !important;
}

/* Button Sizes */
.btn-xs {
    padding: 2px var(--space-2) !important;
    font-size: var(--font-size-xs);
    border-radius: var(--radius-xs) !important;
    line-height: 1.4;
}

.btn-sm {
    padding: var(--space-1) var(--space-3) !important;
    font-size: var(--font-size-sm);
}

.btn-lg {
    padding: var(--space-3) var(--space-8) !important;
    font-size: var(--font-size-lg);
    font-weight: 600;
    border-radius: var(--radius-md) !important;
}

/* Button — Disabled */
.btn.disabled,
.btn[disabled],
.btn:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    pointer-events: none;
    transform: none !important;
    box-shadow: none !important;
}

/* Button Groups */
.btn-group .btn {
    border-radius: 0 !important;
}

.btn-group .btn:first-child {
    border-radius: var(--radius-sm) 0 0 var(--radius-sm) !important;
}

.btn-group .btn:last-child {
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
}

.btn-group .btn + .btn {
    margin-left: -1px;
}

/* Next/Previous Buttons */
.btn-next,
.btn-prev {
    padding: var(--space-2) var(--space-5) !important;
    font-weight: 500;
}

.form-button,
.prev-next-link {
    display: flex !important; /* !important needed to override .clearfix { display:block } */
    justify-content: space-between !important;
    gap: var(--space-3);
    align-items: center !important;
    flex-wrap: wrap;
}

/* Buttons inside form-button containers — prevent overlap */
.form-button .btn-primary,
.form-button .btn-submit,
.form-button .btn-next,
.prev-next-link .btn-primary,
.prev-next-link .btn-submit {
    padding: 10px 28px !important;
    font-size: 14px !important;
    font-weight: 600;
    border-radius: 8px;
    min-width: auto;
    white-space: nowrap;
    margin-left: auto; /* push to right */
}

.form-button a.back-link,
.prev-next-link a.back-link {
    float: none !important; /* override old customstyles float */
    padding: 10px 0 !important;
    white-space: nowrap;
}

/* File Upload Button */
.fileUpload {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 200px;
    cursor: pointer;
    opacity: 0;
}


/* ==========================================================================
   7. FORMS
   ========================================================================== */

input.form-control,
select.form-control,
textarea.form-control,
.form-select,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="search"],
input[type="url"],
input[type="datetime-local"] {
    border-radius: var(--radius-sm) !important;
    border: 1px solid var(--border-dark) !important;
    padding: var(--space-2) var(--space-3) !important;
    transition: var(--transition-fast) !important;
    font-size: var(--font-size-md);
    font-family: var(--font-family);
    color: var(--text-primary);
    background-color: var(--surface);
    line-height: 1.5;
    height: auto;
    min-height: 38px;
    width: 100%;
}

input.form-control:focus,
select.form-control:focus,
textarea.form-control:focus,
.form-select:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input[type="datetime-local"]:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px var(--primary-ring) !important;
    outline: none !important;
    background-color: var(--surface);
}

input.form-control::placeholder,
textarea.form-control::placeholder {
    color: var(--text-tertiary);
    font-size: var(--font-size-base);
    opacity: 1;
}

/* Fix Bootstrap 5 form-select dropdown arrow overlap — needs extra right padding for the chevron */
.form-select {
    padding-right: 2.25rem !important;
    background-position: right 0.75rem center !important;
}

input.form-control:disabled,
select.form-control:disabled,
textarea.form-control:disabled,
input.form-control[readonly],
select.form-control[readonly],
textarea.form-control[readonly] {
    background-color: var(--surface-secondary) !important;
    cursor: not-allowed;
    opacity: 0.7;
    color: var(--text-secondary);
}

textarea.form-control {
    min-height: 80px;
    resize: vertical;
}

/* Form Groups */
.form-group {
    margin-bottom: var(--space-4);
}

.form-group label {
    display: block;
    margin-bottom: var(--space-1);
    font-size: var(--font-size-base);
    font-weight: 500;
    color: var(--text-primary);
}

/* Form Horizontal */
.form-horizontal .control-label {
    text-align: right;
    padding-top: var(--space-2);
    font-weight: 500;
}

@media (max-width: 767px) {
    .form-horizontal .control-label {
        text-align: left;
        margin-bottom: var(--space-1);
    }
}

/* Validation States */
.form-group.has-error .form-control,
.form-control.is-invalid,
input.input-validation-error {
    border-color: var(--danger) !important;
    box-shadow: none !important;
}

.form-group.has-error .form-control:focus,
.form-control.is-invalid:focus,
input.input-validation-error:focus {
    border-color: var(--danger) !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15) !important;
}

.form-group.has-success .form-control,
.form-control.is-valid {
    border-color: var(--success) !important;
}

.form-group.has-success .form-control:focus,
.form-control.is-valid:focus {
    border-color: var(--success) !important;
    box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.15) !important;
}

.help-block,
.form-text,
.field-validation-error {
    font-size: var(--font-size-sm);
    margin-top: var(--space-1);
    display: block;
}

.field-validation-error,
.text-danger.field-validation-error {
    color: var(--danger) !important;
    font-size: var(--font-size-sm);
}

.help-block {
    color: var(--text-secondary);
}

/* Custom Checkbox & Radio */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--primary);
    width: 16px;
    height: 16px;
    cursor: pointer;
    margin-right: var(--space-2);
    vertical-align: middle;
}

/* Custom Select Arrow */
select.form-control {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
    padding-right: 36px !important;
}

/* Input Group */
.input-group {
    border-radius: var(--radius-sm);
    display: flex;
}

.input-group-addon,
.input-group-text {
    border-radius: var(--radius-sm) 0 0 var(--radius-sm) !important;
    border: 1px solid var(--border-dark);
    background: var(--surface-secondary);
    color: var(--text-secondary);
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-base);
    display: flex;
    align-items: center;
}

.input-group .form-control:last-child {
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
}

/* Required Field Asterisk */
.required:after {
    content: ' *';
    color: var(--danger);
    font-weight: 600;
}

/* Select / Upload Operations */
.select-opn,
.uploading-opn {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}


/* ==========================================================================
   8. TABLES
   ========================================================================== */

.table-responsive {
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    overflow: auto;
    background: var(--surface);
}

.table,
.r_table {
    border-collapse: separate !important;
    border-spacing: 0;
    width: 100%;
    margin-bottom: 0;
}

.table thead th,
.r_table thead th {
    background: var(--surface-secondary) !important;
    font-weight: 600;
    color: var(--text-primary);
    padding: var(--space-3) var(--space-4) !important;
    border-bottom: 2px solid var(--border) !important;
    font-size: var(--font-size-base);
    text-transform: none;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 1;
}

.table tbody tr {
    transition: var(--transition-fast);
}

.table tbody tr:nth-child(even),
.r_table tbody tr:nth-child(even) {
    background-color: var(--surface-secondary);
}

.table tbody tr:hover,
.r_table tbody tr:hover {
    background-color: var(--primary-subtle) !important;
}

.table td,
.r_table td {
    padding: var(--space-3) var(--space-4) !important;
    vertical-align: middle;
    border-color: var(--border);
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    border-top: 1px solid var(--border-light);
}

.table th,
.r_table th {
    border-color: var(--border);
}

.table-bordered {
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md);
}

.table-bordered th,
.table-bordered td {
    border: 1px solid var(--border) !important;
}

/* Highlighted / Selected Rows */
tr.highlight,
tr.selected,
tr.selectedrow {
    background: var(--primary-subtle) !important;
}

/* DataTables Integration */
.dataTables_wrapper {
    padding: var(--space-3) 0;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: var(--radius-sm) !important;
    margin: 0 2px;
    padding: var(--space-1) var(--space-3) !important;
    font-size: var(--font-size-base);
    transition: var(--transition-fast);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--text-inverse) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--primary-subtle) !important;
    border-color: var(--primary) !important;
    color: var(--primary) !important;
}

.dataTables_wrapper .dataTables_filter input {
    border-radius: var(--radius-sm) !important;
    border: 1px solid var(--border-dark) !important;
    padding: var(--space-1) var(--space-3) !important;
    transition: var(--transition-fast);
}

.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px var(--primary-ring) !important;
    outline: none;
}

.dataTables_wrapper .dataTables_length select {
    border-radius: var(--radius-sm) !important;
    border: 1px solid var(--border-dark) !important;
    padding: var(--space-1) var(--space-2) !important;
}

.dataTables_info {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    padding: var(--space-2) 0;
}


/* ==========================================================================
   9. DASHBOARD TILES
   ========================================================================== */

.homepage,
.dbtable-section .card,
.dashboard-card {
    border-radius: var(--radius-lg) !important;
    overflow: hidden;
    transition: var(--transition-slow);
    background: var(--surface);
    border: 1px solid var(--border);
    position: relative;
}

.homepage::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    opacity: 0;
    transition: var(--transition);
}

.homepage:hover::before {
    opacity: 1;
}

.homepage:hover,
.dbtable-section .card:hover,
.dashboard-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg) !important;
}

.homepage .count,
.dashboard-card .count {
    font-size: var(--font-size-4xl);
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    margin-bottom: var(--space-1);
}

.homepage .title,
.dashboard-card .title {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    font-weight: 500;
    letter-spacing: 0.2px;
}

.homepage a,
.dashboard-card a {
    text-decoration: none;
    color: inherit;
    display: block;
    padding: var(--space-5);
}

.homepage a:hover {
    color: inherit;
}

/* Dashboard Title Section */
.h-title-section {
    padding: var(--space-5) var(--space-6);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--space-6);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.h-title-section h2,
.h-title-section h3 {
    margin: 0;
    font-weight: 700;
    color: var(--text-primary);
}

/* Dashboard Grid */
.db-table,
.dbtable-section {
    border-radius: var(--radius-lg) !important;
    overflow: hidden;
}

/* Dashboard tile grid layout */
.homepage-grid,
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
    padding: var(--space-4) 0;
}

@media (max-width: 991px) {
    .homepage-grid,
    .dashboard-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575px) {
    .homepage-grid,
    .dashboard-grid {
        grid-template-columns: 1fr;
    }
}

/* Dashboard Tile Color Accents */
.homepage.tile-primary { border-left: 4px solid var(--primary); }
.homepage.tile-success { border-left: 4px solid var(--success); }
.homepage.tile-warning { border-left: 4px solid var(--warning); }
.homepage.tile-danger  { border-left: 4px solid var(--danger); }
.homepage.tile-info    { border-left: 4px solid var(--info); }


/* ==========================================================================
   10. CANDIDATE LIST CARDS
   ========================================================================== */

.renewallist {
    list-style: none;
    padding: 0;
    margin: 0;
}

.list-container {
    border-radius: var(--radius-md) !important;
    border: 1px solid var(--border) !important;
    transition: var(--transition);
    margin-bottom: var(--space-2) !important;
    padding: var(--space-3) var(--space-4);
    background: var(--surface);
    cursor: pointer;
    position: relative;
}

.list-container:hover {
    border-color: var(--primary-light) !important;
    box-shadow: 0 2px 8px rgba(139, 26, 26, 0.08);
    background: var(--surface-secondary);
}

.list-container.active,
.list-container.selectedrow,
.list-container.dvuser.active {
    border-left: 3px solid var(--primary) !important;
    background: var(--primary-subtle) !important;
    box-shadow: var(--shadow-sm);
}

/* List Header */
.list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-2);
}

.list-header ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.list-header .applicantName {
    font-weight: 600;
    color: var(--text-primary);
    font-size: var(--font-size-md);
}

.list-header .status {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--space-2);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 600;
    letter-spacing: 0.3px;
}

.list-header .status.inforce {
    background: var(--success-light);
    color: var(--success-dark);
}

/* List Body */
.list-body {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.list-body ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.list-body .text-content {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    width: 100%;
}

.list-body .text-content li {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.list-container .candidate-name,
.list-container .name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: var(--font-size-md);
}

.list-container .candidate-info,
.list-container .info {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

/* Contact Option */
.contact-opn {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.contact-opn a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background: var(--primary-subtle);
    color: var(--primary);
    transition: var(--transition-fast);
}

.contact-opn a:hover {
    background: var(--primary);
    color: var(--text-inverse);
}

/* Mobile User Details (within list card) */
.m-user-details {
    padding: var(--space-3);
}


/* ==========================================================================
   11. COUNTER / STATUS TABS
   ========================================================================== */

.nav-tabsection {
    display: flex;
    overflow-x: auto;
    gap: var(--space-1);
    padding: var(--space-2) 0;
    border-bottom: 2px solid var(--border);
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.nav-tabsection::-webkit-scrollbar {
    display: none;
}

.nav-tabsection li {
    list-style: none;
    flex-shrink: 0;
}

.nav-tabsection li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-3) var(--space-4);
    text-decoration: none;
    color: var(--text-secondary);
    border-bottom: 3px solid transparent;
    transition: var(--transition-fast);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    min-width: 80px;
    text-align: center;
}

.nav-tabsection li a:hover {
    color: var(--primary);
    background: var(--primary-subtle);
}

.nav-tabsection li a h1,
.nav-tabsection li a .count {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: inherit;
    margin: 0 0 var(--space-1) 0;
    line-height: 1;
}

.nav-tabsection li a span,
.nav-tabsection li a .label-text {
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    white-space: nowrap;
}

.nav-tabsection li.active a,
.nav-tabsection li.newactive a {
    color: var(--primary);
    border-bottom-color: var(--primary);
    background: var(--primary-subtle);
}

.nav-tabsection li.active a h1,
.nav-tabsection li.newactive a h1 {
    color: var(--primary);
}

.nav-tabsection li a h1.disabled {
    color: var(--text-tertiary);
    opacity: 0.5;
}

/* Nav Tab Links (Sidebar steps) */
.navtab-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.navtab-links li {
    margin-bottom: var(--space-1);
}

.navtab-links li a {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: var(--transition-fast);
    font-size: var(--font-size-base);
    font-weight: 500;
}

.navtab-links li a:hover {
    background: var(--primary-subtle);
    color: var(--primary);
}

.navtab-links li.active a,
.navtab-links li.newactive a {
    background: var(--primary);
    color: var(--text-inverse);
}

.navtab-links .ord-no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    border-radius: var(--radius-full);
    background: var(--primary-muted);
    color: var(--primary);
    font-size: var(--font-size-sm);
    font-weight: 600;
    flex-shrink: 0;
}

.navtab-links li.active .ord-no,
.navtab-links li.newactive .ord-no {
    background: rgba(255, 255, 255, 0.2);
    color: var(--text-inverse);
}

/* PDC Steps */
.pdc-steps {
    padding: var(--space-3);
}

.pdcnavsteps {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Step status indicators (done / incomplete) — replaces old image-based approach */
/* Default step icon (warning triangle) shown for EVERY step from initial page load —
   before the AJAX completion check runs and applies .done/.incomplete. Matches the OLD
   H2J behaviour where each step carries a triangle until it is completed. .done overrides
   this with the green check. Scoped to .left-sub-nav-section (the Joining-form left menu)
   so the Documents-Upload page's own horizontal step styling is unaffected. */
.left-sub-nav-section .pdcnavsteps li a {
    position: relative;
}
/* NOTE: the trailing status triangle/tick for the joining step-nav is rendered by the
   `body.joining-flow .pdcnavsteps > li > a::after` rules (search "replicates OLD H2J").
   The earlier scoped workaround here was removed because it only lit up the two steps
   (Previous Employment / Other) that never receive a status class, while the
   joining-flow redesign force-hid the triangle on every step that did. */

.pdcnavsteps li a.done {
    color: var(--primary);
    position: relative;
}

.pdcnavsteps li a.done::after {
    content: '\f26a'; /* bi-check-circle-fill */
    font-family: 'bootstrap-icons';
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: #16A34A;
}

.pdcnavsteps li a.done .ord-no {
    background: #16A34A;
    color: #fff;
}

.pdcnavsteps li a.incomplete {
    color: var(--text-secondary);
    position: relative;
}

.pdcnavsteps li a.incomplete::after {
    content: '\f33a'; /* bi-exclamation-triangle-fill (matches the default) */
    font-family: 'bootstrap-icons';
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: #D97706;
}

.pdcnavsteps li a.incomplete .ord-no {
    background: #FEF3C7;
    color: #D97706;
}

.pdcnavsteps li a[disabled="disabled"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* VMS Layout Shared Styles */
.vms-layout-navbar {
    background: linear-gradient(135deg, #8B1A1A 0%, #6D1416 100%);
    padding: 0 16px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.vms-layout-navbar .navbar-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.vms-layout-navbar .navbar-brand-img {
    height: 36px;
    width: auto;
}

.vms-layout-navbar .navbar-title {
    color: #fff;
    font-weight: 600;
    font-size: 1rem;
}

.vms-layout-navbar .navbar-right {
    display: flex;
    align-items: center;
    gap: 6px;
}

.vms-layout-navbar .nav-icon-btn {
    color: rgba(255,255,255,0.8);
    font-size: 1.15rem;
    text-decoration: none;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.2s;
}

.vms-layout-navbar .nav-icon-btn:hover {
    color: #fff;
    background: rgba(255,255,255,0.12);
}

.vms-layout-navbar .profile-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    text-decoration: none;
    padding: 4px 10px 4px 4px;
    border-radius: 24px;
    transition: all 0.2s;
    cursor: pointer;
    border: none;
    background: none;
}

.vms-layout-navbar .profile-toggle:hover {
    background: rgba(255,255,255,0.12);
}

.vms-layout-navbar .profile-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    color: #fff;
}

.vms-layout-navbar .profile-name {
    font-size: 0.85rem;
    font-weight: 500;
    color: #fff;
}

.vms-layout-navbar .navbar-back-btn {
    color: rgba(255,255,255,0.8);
    font-size: 1.2rem;
    text-decoration: none;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.2s;
}

.vms-layout-navbar .navbar-back-btn:hover {
    color: #fff;
    background: rgba(255,255,255,0.1);
}

.vms-content-wrapper {
    padding-top: 72px;
    min-height: calc(100vh - 56px);
    background: #F1F5F9;
}

.vms-footer {
    background: #1E293B;
    color: #94A3B8;
    padding: 16px 32px;
    text-align: center;
}

.vms-footer a {
    color: #94A3B8;
    text-decoration: none;
    font-size: 0.78rem;
    margin: 0 12px;
    transition: color 0.2s;
}

.vms-footer a:hover {
    color: #CBD5E1;
}

/* VMS Profile Dropdown Shared */
.vms-profile-dropdown {
    min-width: 260px;
    padding: 8px;
    border-radius: 10px;
    border: none;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
}

.vms-profile-info {
    padding: 16px;
    border-bottom: 1px solid #F1F5F9;
    display: flex;
    align-items: center;
    gap: 12px;
}

.vms-profile-info .pd-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #8B1A1A 0%, #A52020 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    flex-shrink: 0;
}

.vms-profile-info .pd-name {
    font-weight: 600;
    color: #1E293B;
    font-size: 0.9rem;
}

.vms-profile-info .pd-role {
    font-size: 0.78rem;
    color: #64748B;
}

.vms-profile-dropdown .pd-logout {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    color: #DC2626;
    font-weight: 600;
    font-size: 0.85rem;
    border-radius: 8px;
    margin-top: 4px;
    transition: background 0.2s;
}

.vms-profile-dropdown .pd-logout:hover {
    background: #FEF2F2;
}

@media (max-width: 768px) {
    .vms-layout-navbar .profile-name {
        display: none;
    }
    .vms-layout-navbar .navbar-title {
        max-width: 180px;
        font-size: 0.9rem;
    }
}

/* Error Page */
.error-page-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
}

.error-page-card {
    background: var(--surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    padding: 48px 40px;
    text-align: center;
    max-width: 480px;
    width: 100%;
}

.error-page-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #FEE2E2;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
}

.error-page-icon i {
    font-size: 2.5rem;
    color: #DC2626;
}

/* Bulk Upload Card */
.bulk-upload-card {
    background: var(--surface);
    border: 2px dashed var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    transition: var(--transition-fast);
}

.bulk-upload-card:hover {
    border-color: var(--primary);
    background: var(--primary-subtle);
}

.bulk-upload-card .upload-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--primary-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
}

.bulk-upload-card .upload-icon i {
    font-size: 1.4rem;
    color: var(--primary);
}


/* ==========================================================================
   12. DETAIL PANEL (RIGHT SIDE)
   ========================================================================== */

/* User Top Section — Profile */
.r-user-top-section {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-5) var(--space-4);
    border-bottom: 1px solid var(--border);
}

.r-user-pic {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-full);
    object-fit: cover;
    border: 3px solid var(--border);
    box-shadow: var(--shadow-md);
    transition: var(--transition);
}

.r-user-pic:hover {
    border-color: var(--primary-light);
    transform: scale(1.05);
}

.r-u-name {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--text-primary);
    margin-top: var(--space-3);
}

.p-high {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    font-weight: 500;
    margin-top: var(--space-1);
    padding: 2px var(--space-3);
    background: var(--primary-subtle);
    border-radius: var(--radius-full);
    display: inline-block;
}

/* User Details Section — Key-Value Pairs */
.r-user-details-section {
    list-style: none;
    padding: var(--space-4);
    margin: 0;
}

.r-user-details-section li {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--border-light);
    font-size: var(--font-size-base);
}

/* Value cell: take remaining row width, but allow shrinking to 0 + word-break.
   Without min-width:0, flex children inherit min-content sizing → if the bold
   key label is wider than the row (narrow sidebar columns), the value gets
   squeezed to ~25px and Chrome breaks every character to its own line. */
.r-user-details-section li label:last-child,
.r-user-details-section li span:last-child {
    flex: 1 1 200px;
    min-width: 0;
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}

.r-user-details-section li:last-child {
    border-bottom: none;
}

.r-user-details-section li label:first-child {
    color: var(--text-secondary);
    font-weight: 500;
    min-width: 130px;
    flex-shrink: 0;
}

.r-user-details-section li label:last-child,
.r-user-details-section li span {
    color: var(--text-primary);
    font-weight: 400;
}

/* Top Filter Section */
.top-filtersection {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5);
    margin-bottom: var(--space-4);
    box-shadow: var(--shadow-sm);
}

/* User Details inline */
.user-details {
    padding: var(--space-3) 0;
}

.user-details ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Desktop Sticky Sidebar */
.desk-stick {
    position: sticky;
    top: calc(var(--navbar-height) + var(--space-4));
}

/* Left Sub Nav Section */
.left-sub-nav-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}


/* ==========================================================================
   13. MODALS
   ========================================================================== */

.modal-content {
    border-radius: var(--radius-xl) !important;
    border: none !important;
    box-shadow: var(--shadow-2xl) !important;
    overflow: hidden;
}

.modal-header {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: var(--text-inverse);
    border-bottom: none !important;
    padding: var(--space-4) var(--space-6);
    position: relative;
}

.modal-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(200, 169, 81, 0.3), transparent);
}

.modal-header .modal-title {
    font-weight: 600;
    color: var(--text-inverse);
    font-size: var(--font-size-lg);
}

.modal-header .btn-close,
.modal-header .close {
    /* BS3→BS5 fix: float:right is ignored in flexbox, use order+margin instead */
    order: 1;
    margin-left: auto !important;
    float: none !important;
    filter: brightness(0) invert(1);
    opacity: 0.8;
    transition: var(--transition-fast);
    border: 0;
    padding: 0.25rem;
    cursor: pointer;
    color: #fff;
    font-size: 1.25rem;
    line-height: 1;
}
.modal-header .close {
    background: transparent;
}

.modal-header .btn-close:hover,
.modal-header .close:hover {
    opacity: 1;
    transform: rotate(90deg);
}

.modal-header .modal-title {
    order: 0;
}

.modal-body {
    padding: var(--space-6) !important;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

.modal-footer {
    padding: var(--space-4) var(--space-6) !important;
    border-top: 1px solid var(--border) !important;
    background: var(--surface-secondary);
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
}

.modal-backdrop.show {
    opacity: 0.5;
    backdrop-filter: blur(4px);
}

.modal.fade .modal-dialog {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
}

/* Modal Sizes */
.modal-lg .modal-content,
.modal-xl .modal-content {
    border-radius: var(--radius-lg) !important;
}


/* ==========================================================================
   14. SEARCH & FILTER SECTION
   ========================================================================== */

.search-box,
.search-container {
    position: relative;
}

.search-box input,
.search-container input {
    padding-left: 40px !important;
    border-radius: var(--radius-md) !important;
    background: var(--surface);
}

.search-box .search-icon,
.search-container .search-icon {
    position: absolute;
    left: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-tertiary);
    font-size: var(--font-size-md);
    pointer-events: none;
}

/* Filter Section Layout */
.filter-section,
.search-filter-row {
    display: flex;
    align-items: flex-end;
    gap: var(--space-4);
    flex-wrap: wrap;
    padding: var(--space-4);
    background: var(--surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    margin-bottom: var(--space-4);
}

.filter-section .form-group,
.search-filter-row .form-group {
    margin-bottom: 0;
    flex: 1;
    min-width: 180px;
}

@media (max-width: 767px) {
    .filter-section,
    .search-filter-row {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-section .form-group,
    .search-filter-row .form-group {
        min-width: auto;
    }
}


/* ==========================================================================
   15. ALERTS & NOTIFICATIONS
   ========================================================================== */

.alert {
    border-radius: var(--radius-md) !important;
    border: none !important;
    padding: var(--space-4) var(--space-5) !important;
    padding-right: 40px !important; /* space for absolute-positioned close button */
    font-size: var(--font-size-md);
    font-weight: 500;
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    position: relative;
    animation: fadeInDown 0.3s ease-out;
}

.alert-success {
    background: var(--success-light) !important;
    color: var(--success-dark) !important;
    border-left: 4px solid var(--success) !important;
}

.alert-danger,
.alert-error {
    background: var(--danger-light) !important;
    color: var(--danger-dark) !important;
    border-left: 4px solid var(--danger) !important;
}

.alert-warning {
    background: var(--warning-light) !important;
    color: var(--warning-dark) !important;
    border-left: 4px solid var(--warning) !important;
}

.alert-info {
    background: var(--info-light) !important;
    color: var(--info-dark) !important;
    border-left: 4px solid var(--info) !important;
}

.alert .close,
.alert .btn-close {
    opacity: 0.6;
    transition: var(--transition-fast);
    position: absolute;
    top: var(--space-3);
    right: var(--space-4);
    background: none;
    border: none;
    font-size: var(--font-size-xl);
    cursor: pointer;
    line-height: 1;
}

.alert .close:hover,
.alert .btn-close:hover {
    opacity: 1;
}


/* ==========================================================================
   16. SIDEBAR NAVIGATION
   ========================================================================== */

.leftsection,
.sidebar,
.left-panel {
    background: var(--surface) !important;
    border-right: 1px solid var(--border) !important;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.03);
    min-height: calc(100vh - var(--navbar-height));
}

.leftsection ul,
.sidebar ul {
    list-style: none;
    padding: var(--space-2);
    margin: 0;
}

.leftsection ul li a,
.sidebar ul li a {
    padding: var(--space-3) var(--space-4);
    color: var(--text-secondary);
    font-weight: 500;
    transition: var(--transition-fast);
    border-radius: var(--radius-sm);
    margin: var(--space-1) 0;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none;
    font-size: var(--font-size-base);
}

.leftsection ul li a:hover,
.sidebar ul li a:hover {
    background: var(--primary-subtle);
    color: var(--primary);
}

.leftsection ul li.active a,
.sidebar ul li.active a {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    color: var(--text-inverse) !important;
    box-shadow: var(--shadow-primary);
}

.leftsection ul li a i,
.sidebar ul li a i {
    width: 20px;
    text-align: center;
    font-size: var(--font-size-lg);
    flex-shrink: 0;
}


/* ==========================================================================
   17. FOOTER
   ========================================================================== */

.footersection {
    background: var(--text-primary) !important;
    color: var(--text-tertiary) !important;
    padding: var(--space-3) var(--space-6) !important;
    font-size: var(--font-size-sm);
    letter-spacing: 0.2px;
    border-top: none !important;
    text-align: center;
}

.footersection a {
    color: var(--bg-secondary) !important;
    transition: var(--transition-fast);
}

.footersection a:hover {
    color: var(--text-inverse) !important;
}


/* ==========================================================================
   18. LOADING STATES
   ========================================================================== */

/* CSS Spinner — hidden by default, shown via JS .show() or parent .loading-overlay */
.loading-spinner {
    width: 44px !important;
    height: 44px !important;
    border: 4px solid #E2E8F0 !important;
    border-top-color: #8B1A1A !important;
    border-radius: 50% !important;
    animation: spin 0.7s linear infinite !important;
    margin: 20px auto !important;
    display: none; /* was display:block !important — caused 80+ spinners to be permanently visible on every page */
    background: transparent !important;
}

/* Small Inline Variant */
.loading-spinner-sm {
    width: 20px;
    height: 20px;
    border-width: 3px;
    margin: 0;
    display: inline-block;
}

/* Overlay Spinner — uses absolute centering so it works with jQuery .show()
   which sets display:block instead of display:flex.
   All spinner properties use !important to prevent CSS resets from hiding it. */
.loading-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(2px);
    z-index: 99999 !important;
}
.loading-overlay .loading-spinner {
    position: absolute !important;
    top: calc(50% - 22px) !important;
    left: calc(50% - 22px) !important;
    width: 44px !important;
    height: 44px !important;
    border: 4px solid #E2E8F0 !important;
    border-top-color: #8B1A1A !important;
    border-radius: 50% !important;
    animation: spin 0.7s linear infinite !important;
    margin: 0 !important;
    background: transparent !important;
    display: block !important;
}

.loading-overlay .loading-text {
    font-size: var(--font-size-md);
    color: var(--text-secondary);
    font-weight: 500;
}

/* Skeleton Loading */
.skeleton {
    background: linear-gradient(90deg, var(--surface-secondary) 25%, var(--border-light) 50%, var(--surface-secondary) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    border-radius: var(--radius-sm);
}

.skeleton-text {
    height: 14px;
    margin-bottom: var(--space-2);
}

.skeleton-title {
    height: 20px;
    width: 60%;
    margin-bottom: var(--space-3);
}

.skeleton-circle {
    border-radius: var(--radius-full);
}

/* Legacy loading-image — allow JS to show/hide via .show()/.hide() */
/* Removed display:none !important — old views use jQuery .show() on #loading-image which can't override !important */

/* Datepicker z-index fix for modals — datepicker at 1000, modal at 1050, so datepicker inside modal is invisible */
.modal .datepicker,
.modal .datepicker.dropdown-menu,
.modal-open .datepicker.dropdown-menu {
    z-index: 1060 !important;
}

/* ==========================================================================
   19. ANIMATIONS
   ========================================================================== */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideDown {
    from {
        opacity: 0;
        max-height: 0;
        overflow: hidden;
    }
    to {
        opacity: 1;
        max-height: 1000px;
        overflow: visible;
    }
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-4px); }
    40% { transform: translateX(4px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Page Content Entrance */
.content-section,
.main-content,
#inForce {
    animation: fadeInUp 0.3s ease-out;
}

.validation-error {
    animation: shake 0.4s ease;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* ==========================================================================
   20. CUSTOM SCROLLBAR
   ========================================================================== */

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb {
    background: var(--border-dark);
    border-radius: var(--radius-full);
    transition: background 0.2s;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary);
}

/* Firefox Scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border-dark) transparent;
}


/* ==========================================================================
   21. RESPONSIVE DESIGN
   ========================================================================== */

/* Extra Large: 1400px+ (full width) */
@media (min-width: 1400px) {
    .main-content,
    .content-section {
        max-width: var(--content-max-width);
    }
}

/* Large: 1200px - 1399px */
@media (max-width: 1399px) {
    .main-content,
    .content-section {
        padding: var(--space-5);
    }
}

/* Desktop: 992px - 1199px */
@media (max-width: 1199px) {
    .main-content,
    .content-section {
        padding: var(--space-4);
    }

    .homepage .count,
    .dashboard-card .count {
        font-size: var(--font-size-3xl);
    }
}

/* Tablet: 768px - 991px */
@media (max-width: 991px) {
    .desk-stick {
        position: static;
    }

    .left-sub-nav-section {
        margin-bottom: var(--space-4);
    }

    .modal-body {
        padding: var(--space-4) !important;
    }

    .nav-tabsection {
        -webkit-overflow-scrolling: touch;
    }
}

/* Small Tablet / Large Phone: 576px - 767px */
@media (max-width: 767px) {
    body {
        font-size: var(--font-size-base);
    }

    .main-content,
    .content-section {
        padding: var(--space-3);
    }

    .card,
    .full-panel,
    .panel1,
    .form-section {
        border-radius: var(--radius-md) !important;
        margin-left: var(--space-1) !important;
        margin-right: var(--space-1) !important;
    }

    .panel-body,
    .card-body {
        padding: var(--space-3) !important;
    }

    .btn {
        padding: var(--space-2) var(--space-4) !important;
        font-size: var(--font-size-base);
    }

    .table td,
    .table th,
    .r_table td,
    .r_table th {
        padding: var(--space-2) var(--space-3) !important;
        font-size: var(--font-size-sm);
    }

    .modal-content {
        border-radius: var(--radius-lg) !important;
        margin: var(--space-3);
    }

    .modal-header {
        padding: var(--space-3) var(--space-4);
    }

    .modal-body {
        padding: var(--space-4) !important;
    }

    .modal-footer {
        padding: var(--space-3) var(--space-4) !important;
        flex-wrap: wrap;
    }

    .homepage:hover,
    .dashboard-card:hover {
        transform: none;
    }

    .homepage .count {
        font-size: var(--font-size-2xl);
    }

    .h-title-section {
        padding: var(--space-3) var(--space-4);
    }

    .section-title,
    .page-title {
        font-size: var(--font-size-xl);
    }

    /* Stack list header on mobile */
    .list-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }

    .list-body .text-content {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-1);
    }

    /* Mobile-hide utility */
    .mobile-hide,
    .mobile-hide-block {
        display: none !important;
    }

    /* Touch-friendly tap targets */
    .btn,
    .navtab-links li a,
    .list-container,
    .leftsection ul li a,
    .sidebar ul li a {
        min-height: 44px;
    }

    .form-horizontal .control-label {
        text-align: left;
        padding-top: 0;
    }

    .top-filtersection {
        padding: var(--space-3);
    }
}

/* Phone: below 576px */
@media (max-width: 575px) {
    .main-content,
    .content-section {
        padding: var(--space-2);
    }

    .btn {
        padding: var(--space-2) var(--space-3) !important;
        font-size: var(--font-size-sm);
    }

    .btn-lg {
        padding: var(--space-3) var(--space-5) !important;
        font-size: var(--font-size-md);
    }

    .modal-body {
        padding: var(--space-3) !important;
    }

    .table td {
        font-size: var(--font-size-xs);
    }

    .alert {
        padding: var(--space-3) var(--space-4) !important;
        font-size: var(--font-size-base);
    }

    .r-user-pic {
        width: 64px;
        height: 64px;
    }

    .r-u-name {
        font-size: var(--font-size-lg);
    }

    .nav-tabsection li a {
        padding: var(--space-2) var(--space-3);
        min-width: 60px;
    }

    .nav-tabsection li a h1,
    .nav-tabsection li a .count {
        font-size: var(--font-size-xl);
    }
}


/* ==========================================================================
   22. PRINT STYLES
   ========================================================================== */

@media print {
    .headersection,
    .footersection,
    .sidebar,
    .leftsection,
    .left-panel,
    .btn,
    .btn-group,
    .search-box,
    .search-container,
    .filter-section,
    .top-filtersection,
    .nav-tabsection,
    .loading-overlay,
    .modal-backdrop,
    .navbar-toggle,
    .navbar-toggler,
    .pdc-steps {
        display: none !important;
    }

    body {
        background: #fff !important;
        font-size: 11pt;
        color: #000 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .card,
    .panel1,
    .full-panel,
    .form-section {
        box-shadow: none !important;
        border: 1px solid #ccc !important;
        page-break-inside: avoid;
    }

    .main-content,
    .content-section {
        padding: 0 !important;
        max-width: 100%;
        animation: none !important;
    }

    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        color: #666;
    }

    .table th,
    .table td,
    .r_table th,
    .r_table td {
        border: 1px solid #ccc !important;
        padding: 4px 8px !important;
    }

    h1, h2, h3 {
        page-break-after: avoid;
    }

    .table,
    .r_table {
        page-break-inside: avoid;
    }
}


/* ==========================================================================
   23. UTILITY CLASSES
   ========================================================================== */

/* Text Colors */
.text-maroon, .text-primary-brand { color: var(--primary) !important; }
.text-gold { color: var(--accent-gold) !important; }
.text-success { color: var(--success) !important; }
.text-warning { color: var(--warning) !important; }
.text-danger { color: var(--danger) !important; }
.text-info { color: var(--info) !important; }
.text-muted { color: var(--text-secondary) !important; }
.text-light { color: var(--text-tertiary) !important; }

/* Background Colors */
.bg-maroon, .bg-primary-brand { background-color: var(--primary) !important; color: var(--text-inverse) !important; }
.bg-gold { background-color: var(--accent-gold) !important; }
.bg-light { background-color: var(--surface-secondary) !important; }

/* Shadows */
.shadow-none { box-shadow: none !important; }
.shadow-xs { box-shadow: var(--shadow-xs) !important; }
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow-md { box-shadow: var(--shadow-md) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }
.shadow-xl { box-shadow: var(--shadow-xl) !important; }

/* Border Radius */
.rounded-none { border-radius: 0 !important; }
.rounded-sm { border-radius: var(--radius-sm) !important; }
.rounded-md { border-radius: var(--radius-md) !important; }
.rounded-lg { border-radius: var(--radius-lg) !important; }
.rounded-xl { border-radius: var(--radius-xl) !important; }
.rounded-full { border-radius: var(--radius-full) !important; }

/* Spacing Utilities */
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.mt-4 { margin-top: var(--space-1) !important; }
.mb-4 { margin-bottom: var(--space-1) !important; }
.mt-8 { margin-top: var(--space-2) !important; }
.mb-8 { margin-bottom: var(--space-2) !important; }
.mt-12 { margin-top: var(--space-3) !important; }
.mb-12 { margin-bottom: var(--space-3) !important; }
.mt-16 { margin-top: var(--space-4) !important; }
.mb-16 { margin-bottom: var(--space-4) !important; }
.mt-24 { margin-top: var(--space-6) !important; }
.mb-24 { margin-bottom: var(--space-6) !important; }
.mt-32 { margin-top: var(--space-8) !important; }
.mb-32 { margin-bottom: var(--space-8) !important; }

.p-0 { padding: 0 !important; }
.p-8 { padding: var(--space-2) !important; }
.p-12 { padding: var(--space-3) !important; }
.p-16 { padding: var(--space-4) !important; }
.p-24 { padding: var(--space-6) !important; }
.p-32 { padding: var(--space-8) !important; }

/* Display */
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.d-grid { display: grid !important; }
.d-block { display: block !important; }
.d-inline-block { display: inline-block !important; }
.d-none { display: none !important; }

/* Flex */
.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }
.flex-column { flex-direction: column !important; }
.align-items-center { align-items: center !important; }
.align-items-start { align-items: flex-start !important; }
.align-items-end { align-items: flex-end !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-end { justify-content: flex-end !important; }
.gap-1 { gap: var(--space-1) !important; }
.gap-2 { gap: var(--space-2) !important; }
.gap-3 { gap: var(--space-3) !important; }
.gap-4 { gap: var(--space-4) !important; }

/* Text */
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.text-left { text-align: left !important; }
.font-bold { font-weight: 700 !important; }
.font-semibold { font-weight: 600 !important; }
.font-medium { font-weight: 500 !important; }
.font-normal { font-weight: 400 !important; }
.text-xs { font-size: var(--font-size-xs) !important; }
.text-sm { font-size: var(--font-size-sm) !important; }
.text-base { font-size: var(--font-size-base) !important; }
.text-lg { font-size: var(--font-size-lg) !important; }
.text-xl { font-size: var(--font-size-xl) !important; }
.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Width */
.w-full { width: 100% !important; }
.w-auto { width: auto !important; }

/* Overflow */
.overflow-hidden { overflow: hidden !important; }
.overflow-auto { overflow: auto !important; }

/* Cursor */
.cursor-pointer { cursor: pointer !important; }
.cursor-not-allowed { cursor: not-allowed !important; }

/* Opacity */
.opacity-50 { opacity: 0.5 !important; }
.opacity-75 { opacity: 0.75 !important; }


/* ==========================================================================
   24. PROGRESS BARS & STATUS INDICATORS
   ========================================================================== */

/* Progress Bar */
.progress {
    border-radius: var(--radius-full) !important;
    height: 8px !important;
    background: var(--border);
    overflow: hidden;
}

.progress-bar {
    border-radius: var(--radius-full) !important;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%) !important;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.progress-bar.bg-success {
    background: linear-gradient(135deg, var(--success) 0%, var(--success-dark) 100%) !important;
}

.progress-bar.bg-info {
    background: linear-gradient(135deg, var(--info) 0%, var(--info-dark) 100%) !important;
}

.progress-bar.bg-warning {
    background: linear-gradient(135deg, var(--warning) 0%, var(--warning-dark) 100%) !important;
}

/* Badges */
.badge {
    border-radius: var(--radius-full) !important;
    padding: 3px var(--space-3) !important;
    font-size: var(--font-size-xs);
    font-weight: 600;
    letter-spacing: 0.3px;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    line-height: 1.4;
}

.badge-success, .bg-success {
    background-color: var(--success-light) !important;
    color: var(--success-dark) !important;
}

.badge-warning, .bg-warning {
    background-color: var(--warning-light) !important;
    color: var(--warning-dark) !important;
}

.badge-danger, .bg-danger {
    background-color: var(--danger-light) !important;
    color: var(--danger-dark) !important;
}

.badge-info, .bg-info-custom {
    background-color: var(--info-light) !important;
    color: var(--info-dark) !important;
}

.badge-primary {
    background-color: var(--primary-subtle) !important;
    color: var(--primary) !important;
}

.badge-gold {
    background-color: var(--accent-gold-subtle) !important;
    color: var(--accent-gold-dark) !important;
}

/* Status Dots */
.status-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    display: inline-block;
    margin-right: var(--space-2);
    flex-shrink: 0;
}

.status-dot.active,
.status-dot.green { background: var(--success); }
.status-dot.pending,
.status-dot.yellow { background: var(--warning); }
.status-dot.inactive,
.status-dot.red { background: var(--danger); }
.status-dot.info,
.status-dot.blue { background: var(--info); }

/* Status Dot with Pulse Animation */
.status-dot.pulse {
    position: relative;
}

.status-dot.pulse::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    width: 12px;
    height: 12px;
    border-radius: var(--radius-full);
    background: inherit;
    opacity: 0.4;
    animation: pulse 2s ease-in-out infinite;
}

/* Pipeline Progress */
.pipeline-progress {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.pipeline-step {
    flex: 1;
    height: 4px;
    border-radius: var(--radius-full);
    background: var(--border);
    position: relative;
}

.pipeline-step.completed {
    background: var(--success);
}

.pipeline-step.current {
    background: var(--primary);
}

/* Tag / Chip */
.tag,
.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 500;
    background: var(--surface-secondary);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    transition: var(--transition-fast);
}

.tag:hover,
.chip:hover {
    background: var(--primary-subtle);
    border-color: var(--primary-light);
    color: var(--primary);
}

.tag .close-tag,
.chip .close-chip {
    cursor: pointer;
    opacity: 0.6;
    font-size: var(--font-size-xs);
    line-height: 1;
}

.tag .close-tag:hover,
.chip .close-chip:hover {
    opacity: 1;
}


/* ==========================================================================
   25. FILE UPLOAD AREA
   ========================================================================== */

.file-upload,
.upload-area {
    border: 2px dashed var(--border-dark) !important;
    border-radius: var(--radius-lg) !important;
    padding: var(--space-8) !important;
    text-align: center;
    transition: var(--transition);
    background: var(--surface-secondary);
    cursor: pointer;
    position: relative;
}

.file-upload:hover,
.upload-area:hover {
    border-color: var(--primary) !important;
    background: var(--primary-subtle);
}

.file-upload.drag-over,
.upload-area.drag-over {
    border-color: var(--primary) !important;
    background: var(--primary-subtle);
    box-shadow: 0 0 0 4px var(--primary-ring);
}

.file-upload .upload-icon {
    font-size: 40px;
    color: var(--text-tertiary);
    margin-bottom: var(--space-3);
}

.file-upload .upload-text {
    font-size: var(--font-size-md);
    color: var(--text-secondary);
    font-weight: 500;
}

.file-upload .upload-hint {
    font-size: var(--font-size-sm);
    color: var(--text-tertiary);
    margin-top: var(--space-1);
}

/* File Name Display */
.file-name-display {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--surface-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-base);
    color: var(--text-primary);
    margin-top: var(--space-2);
}


/* ==========================================================================
   26. DATE PICKER OVERRIDE
   ========================================================================== */

.datepicker {
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-xl) !important;
    border: 1px solid var(--border) !important;
    font-family: var(--font-family);
    padding: var(--space-2);
}

.datepicker table tr td,
.datepicker table tr th {
    border-radius: var(--radius-sm);
    transition: var(--transition-fast);
    width: 36px;
    height: 36px;
}

.datepicker table tr td.active,
.datepicker table tr td.active.highlighted,
.datepicker table tr td span.active {
    background: var(--primary) !important;
    color: var(--text-inverse) !important;
    border-radius: var(--radius-sm);
}

.datepicker table tr td.today {
    background: var(--primary-subtle) !important;
    color: var(--primary) !important;
    font-weight: 600;
}

.datepicker table tr td:hover,
.datepicker table tr td span:hover {
    background: var(--surface-hover) !important;
    border-radius: var(--radius-sm);
}

.datepicker .datepicker-switch {
    font-weight: 600;
    color: var(--text-primary);
}

.datepicker .prev,
.datepicker .next {
    color: var(--text-secondary);
    cursor: pointer;
}


/* ==========================================================================
   27. SELECT2 OVERRIDE
   ========================================================================== */

.select2-container--default .select2-selection--single {
    border-radius: var(--radius-sm) !important;
    border: 1px solid var(--border-dark) !important;
    height: 38px !important;
    padding: var(--space-1) var(--space-3);
    display: flex;
    align-items: center;
    transition: var(--transition-fast);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--text-primary);
    font-size: var(--font-size-md);
    font-family: var(--font-family);
    line-height: 1.5;
    padding-left: 0;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--text-tertiary);
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 36px;
    right: 8px;
}

.select2-container--default .select2-selection--single:focus,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px var(--primary-ring) !important;
    outline: none;
}

.select2-dropdown {
    border-radius: var(--radius-md) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-xl) !important;
    overflow: hidden;
    margin-top: var(--space-1);
}

.select2-container--default .select2-results__option {
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-md);
    transition: var(--transition-fast);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--primary-subtle) !important;
    color: var(--primary) !important;
}

.select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: var(--primary) !important;
    color: var(--text-inverse) !important;
}

.select2-search--dropdown .select2-search__field {
    border-radius: var(--radius-sm) !important;
    border: 1px solid var(--border-dark) !important;
    padding: var(--space-2) var(--space-3) !important;
    font-family: var(--font-family);
}

.select2-search--dropdown .select2-search__field:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px var(--primary-ring) !important;
    outline: none;
}

/* Multi-select */
.select2-container--default .select2-selection--multiple {
    border-radius: var(--radius-sm) !important;
    border: 1px solid var(--border-dark) !important;
    min-height: 38px;
    padding: var(--space-1);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--primary-subtle);
    color: var(--primary);
    border: 1px solid rgba(139, 26, 26, 0.2);
    border-radius: var(--radius-full);
    padding: 1px var(--space-2);
    font-size: var(--font-size-sm);
    font-weight: 500;
}


/* ==========================================================================
   28. TOOLTIP & POPOVER
   ========================================================================== */

.tooltip-inner {
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
    background: var(--text-primary);
    font-family: var(--font-family);
    font-weight: 500;
    max-width: 250px;
}

.tooltip.bs-tooltip-top .tooltip-arrow::before,
.tooltip.top .tooltip-arrow {
    border-top-color: var(--text-primary);
}

.tooltip.bs-tooltip-bottom .tooltip-arrow::before,
.tooltip.bottom .tooltip-arrow {
    border-bottom-color: var(--text-primary);
}

.popover {
    border-radius: var(--radius-md) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-xl) !important;
    font-family: var(--font-family);
}

.popover-header {
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    font-weight: 600;
    background: var(--surface-secondary);
    border-bottom: 1px solid var(--border);
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-md);
}

.popover-body {
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-base);
    color: var(--text-secondary);
}


/* ==========================================================================
   29. TABS (STANDARD & PILL)
   ========================================================================== */

/* Standard Tabs */
.nav-tabs {
    border-bottom: 2px solid var(--border);
}

.nav-tabs > li > a,
.nav-tabs .nav-link {
    border-radius: var(--radius-sm) var(--radius-sm) 0 0 !important;
    color: var(--text-secondary);
    font-weight: 500;
    padding: var(--space-3) var(--space-5);
    transition: var(--transition-fast);
    border: none !important;
    font-size: var(--font-size-base);
    position: relative;
}

.nav-tabs > li > a:hover,
.nav-tabs .nav-link:hover {
    color: var(--primary);
    background: var(--primary-subtle);
    border: none !important;
}

.nav-tabs > li.active > a,
.nav-tabs .nav-link.active {
    color: var(--primary) !important;
    border: none !important;
    border-bottom: 3px solid var(--primary) !important;
    font-weight: 600;
    background: transparent !important;
}

/* Pill Tabs */
.nav-pills > li > a,
.nav-pills .nav-link {
    border-radius: var(--radius-sm) !important;
    padding: var(--space-2) var(--space-5);
    color: var(--text-secondary);
    font-weight: 500;
    transition: var(--transition-fast);
    font-size: var(--font-size-base);
}

.nav-pills > li > a:hover,
.nav-pills .nav-link:hover {
    background: var(--primary-subtle);
    color: var(--primary);
}

.nav-pills > li.active > a,
.nav-pills .nav-link.active {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%) !important;
    color: var(--text-inverse) !important;
    box-shadow: var(--shadow-primary);
}


/* ==========================================================================
   30. DROPDOWN MENUS
   ========================================================================== */

.dropdown-menu {
    border-radius: var(--radius-md) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-xl) !important;
    padding: var(--space-1) !important;
    animation: scaleIn 0.15s ease-out;
    transform-origin: top center;
    min-width: 180px;
}

.dropdown-menu > li > a,
.dropdown-item {
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3) !important;
    font-size: var(--font-size-base);
    color: var(--text-primary);
    transition: var(--transition-fast);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.dropdown-menu > li > a:hover,
.dropdown-item:hover {
    background: var(--primary-subtle) !important;
    color: var(--primary) !important;
}

.dropdown-menu > li > a:active,
.dropdown-item:active {
    background: var(--primary) !important;
    color: var(--text-inverse) !important;
}

.dropdown-menu .divider,
.dropdown-divider {
    margin: var(--space-1) 0;
    border-top: 1px solid var(--border);
}

.dropdown-header {
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}


/* ==========================================================================
   31. PAGINATION
   ========================================================================== */

.pagination {
    display: flex;
    gap: var(--space-1);
    align-items: center;
    flex-wrap: wrap;
}

.pagination > li > a,
.pagination > li > span,
.page-link {
    border-radius: var(--radius-sm) !important;
    margin: 0;
    color: var(--text-secondary);
    border: 1px solid var(--border);
    padding: var(--space-1) var(--space-3);
    font-size: var(--font-size-base);
    transition: var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    font-weight: 500;
}

.pagination > li > a:hover,
.page-link:hover {
    background: var(--primary-subtle) !important;
    border-color: var(--primary) !important;
    color: var(--primary) !important;
}

.pagination > li.active > a,
.pagination > li.active > span,
.page-item.active .page-link {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--text-inverse) !important;
    box-shadow: var(--shadow-sm);
}

.pagination > li.disabled > a,
.page-item.disabled .page-link {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}


/* ==========================================================================
   32. ACCORDION / COLLAPSIBLE
   ========================================================================== */

.panel-group .panel {
    border-radius: var(--radius-md) !important;
    margin-bottom: var(--space-2);
    border: 1px solid var(--border);
    box-shadow: none;
    overflow: hidden;
}

.panel-group .panel-heading {
    background: var(--surface-secondary) !important;
    border-radius: 0 !important;
    padding: var(--space-3) var(--space-5) !important;
    transition: var(--transition-fast);
}

.panel-group .panel-heading:hover {
    background: var(--surface-hover) !important;
}

.panel-group .panel-heading a {
    font-weight: 600;
    color: var(--text-primary);
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.panel-group .panel-heading a:hover {
    color: var(--primary);
}

.panel-group .panel-heading a.collapsed {
    color: var(--text-secondary);
}

.panel-group .panel-body {
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--border);
}


/* ==========================================================================
   33. MISCELLANEOUS COMPONENT OVERRIDES
   ========================================================================== */

/* Blockquote */
blockquote {
    border-left: 4px solid var(--primary);
    padding: var(--space-3) var(--space-5);
    background: var(--primary-subtle);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-style: italic;
    color: var(--text-secondary);
    margin: var(--space-4) 0;
}

/* Code Blocks */
code {
    border-radius: var(--radius-xs);
    font-size: var(--font-size-sm);
    font-family: var(--font-mono);
    padding: 2px var(--space-1);
    background: var(--surface-secondary);
    color: var(--primary);
}

pre {
    background: var(--text-primary);
    color: var(--border);
    padding: var(--space-4);
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-mono);
    font-size: var(--font-size-base);
    overflow-x: auto;
}

pre code {
    background: transparent;
    color: inherit;
    padding: 0;
}

/* Image Thumbnails */
.thumbnail,
.img-thumbnail {
    border-radius: var(--radius-sm) !important;
    border: 1px solid var(--border);
    padding: var(--space-1);
    transition: var(--transition);
    background: var(--surface);
}

.thumbnail:hover,
.img-thumbnail:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--primary-light);
}

/* Fieldset / Legend */
fieldset {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
}

/* Radio-group fieldsets (Gender "Male/Female", controlgroup-style pill groups)
   render the pill buttons directly and don't want the generic fieldset frame. */
fieldset.male-femail,
fieldset[data-role="controlgroup"] {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

legend {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    padding: 0 var(--space-2);
    width: auto;
}

/* .btn-switch Yes/No toggle — legacy knob-slider design rendered broken against
   the H2J white card background (z-index:-1 pseudo-track got hidden behind the
   card, and when no radio was pre-selected the knob sat on top of the "Yes"
   text). Re-skin as a clean pill-button group that matches the rest of the H2J
   design system. All legacy class hooks and radio semantics are preserved —
   this is a pure CSS re-theme, no HTML/JS changes. */
.btn-switch {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    background: #F8FAFC !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 10px !important;
    padding: 3px !important;
    gap: 2px !important;
    width: auto !important;
    max-width: fit-content !important;
    -webkit-user-select: none;
    user-select: none;
}
.btn-switch__radio { display: none !important; }
.btn-switch__label {
    position: static !important;
    display: inline-block !important;
    padding: 6px 18px !important;
    border-radius: 8px !important;
    color: #64748B !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    margin: 0 !important;
}
.btn-switch__label:hover {
    color: #1E293B !important;
    background: rgba(15,23,42,0.04) !important;
}
.btn-switch__txt {
    position: static !important;
    display: inline-block !important;
    opacity: 1 !important;
    min-width: auto !important;
    line-height: 1.3 !important;
}
.btn-switch__label::before,
.btn-switch__label::after {
    display: none !important;
    content: none !important;
}
.btn-switch__radio_yes:checked ~ .btn-switch__label_yes,
.btn-switch__radio_no:checked  ~ .btn-switch__label_no {
    background: linear-gradient(135deg,#8B1A1A,#6B1414) !important;
    color: #fff !important;
    box-shadow: 0 2px 6px rgba(139,26,26,0.20) !important;
}
.btn-switch__radio_yes:checked ~ .btn-switch__label_yes:hover,
.btn-switch__radio_no:checked  ~ .btn-switch__label_no:hover {
    background: linear-gradient(135deg,#8B1A1A,#6B1414) !important;
    color: #fff !important;
}
.btn-switch__radio:disabled ~ .btn-switch__label {
    opacity: 0.55 !important;
    cursor: not-allowed !important;
}

/* Well / Jumbotron */
.well,
.jumbotron {
    border-radius: var(--radius-lg) !important;
    background: var(--surface-secondary) !important;
    border: 1px solid var(--border) !important;
    box-shadow: none !important;
    padding: var(--space-5) !important;
}

/* Disabled State */
.disabled,
[disabled] {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

/* Color Accent Text */
.text-success, .badge-success { color: var(--success) !important; }
.text-warning, .badge-warning { color: var(--warning) !important; }
.text-info, .badge-info { color: var(--info) !important; }
.text-danger, .badge-danger { color: var(--danger) !important; }

/* Dividers */
.divider-horizontal {
    border: none;
    border-top: 1px solid var(--border);
    margin: var(--space-4) 0;
}

.divider-vertical {
    width: 1px;
    background: var(--border);
    align-self: stretch;
    margin: 0 var(--space-3);
}


/* ==========================================================================
   34. INTRO.JS TOUR OVERRIDE
   ========================================================================== */

.introjs-tooltip {
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-2xl) !important;
    font-family: var(--font-family);
    border: 1px solid var(--border);
}

.introjs-button {
    border-radius: var(--radius-sm) !important;
    font-weight: 500;
    font-family: var(--font-family);
    padding: var(--space-2) var(--space-4);
    transition: var(--transition-fast);
}

.introjs-button.introjs-nextbutton {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--text-inverse) !important;
}

.introjs-button.introjs-nextbutton:hover {
    background: var(--primary-dark) !important;
    box-shadow: var(--shadow-primary);
}

.introjs-button.introjs-prevbutton {
    background: var(--surface) !important;
    border: 1px solid var(--border-dark) !important;
    color: var(--text-primary) !important;
}

.introjs-helperLayer {
    border-radius: var(--radius-md);
}


/* ==========================================================================
   35. TOAST / NOTIFICATION
   ========================================================================== */

.toast-container {
    position: fixed;
    top: var(--space-6);
    right: var(--space-6);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.toast {
    background: var(--surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xl);
    padding: var(--space-4);
    border-left: 4px solid var(--primary);
    min-width: 300px;
    max-width: 420px;
    animation: slideInRight 0.3s ease-out;
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.toast.toast-success { border-left-color: var(--success); }
.toast.toast-error   { border-left-color: var(--danger); }
.toast.toast-warning { border-left-color: var(--warning); }
.toast.toast-info    { border-left-color: var(--info); }


/* ==========================================================================
   36. EMPTY STATE
   ========================================================================== */

.empty-state {
    text-align: center;
    padding: var(--space-12) var(--space-6);
    color: var(--text-tertiary);
}

.empty-state .empty-icon {
    font-size: 48px;
    margin-bottom: var(--space-4);
    opacity: 0.4;
}

.empty-state .empty-title {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
}

.empty-state .empty-description {
    font-size: var(--font-size-md);
    color: var(--text-tertiary);
    max-width: 400px;
    margin: 0 auto var(--space-5);
}


/* ==========================================================================
   37. FOCUS VISIBLE STYLES (ACCESSIBILITY)
   ========================================================================== */

:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

button:focus-visible,
.btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--primary-ring) !important;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: none;
}

/* Skip to Content (Accessibility) */
.skip-to-content {
    position: absolute;
    top: -100%;
    left: var(--space-4);
    background: var(--primary);
    color: var(--text-inverse);
    padding: var(--space-2) var(--space-4);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    z-index: calc(var(--z-overlay) + 1);
    font-weight: 600;
    transition: top 0.2s ease;
}

.skip-to-content:focus {
    top: 0;
    color: var(--text-inverse);
}


/* ==========================================================================
   38. HIGH CONTRAST / DARK MODE SUPPORT (PREFERS)
   ========================================================================== */

@media (forced-colors: active) {
    .btn-primary,
    .btn-with-bg,
    .btn-save {
        border: 2px solid ButtonText !important;
    }

    .card,
    .full-panel,
    .panel1 {
        border: 1px solid CanvasText !important;
    }
}

@media (prefers-contrast: high) {
    :root {
        --border: #94A3B8;
        --border-dark: #64748B;
        --text-secondary: #475569;
    }

    .btn {
        font-weight: 600;
    }
}


/* ==========================================================================
   39. MOBILE UTILITIES
   ========================================================================== */

/* Show/Hide at breakpoints */
.mobile-hide,
.mobile-hide-block {
    /* Default: visible */
}

@media (max-width: 767px) {
    .mobile-hide,
    .mobile-hide-block {
        display: none !important;
    }

    .mobile-show {
        display: block !important;
    }

    .mobile-show-flex {
        display: flex !important;
    }
}

@media (min-width: 768px) {
    .desktop-hide {
        display: none !important;
    }

    .mobile-show,
    .mobile-show-flex {
        display: none !important;
    }
}

/* Safe area padding for notched devices */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .footersection {
        padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom)) !important;
    }
}


/* ==========================================================================
   40. ANIMATION HELPERS
   ========================================================================== */

.animate-fade-in {
    animation: fadeIn 0.3s ease-out;
}

.animate-fade-in-up {
    animation: fadeInUp 0.3s ease-out;
}

.animate-fade-in-down {
    animation: fadeInDown 0.3s ease-out;
}

.animate-slide-in-right {
    animation: slideInRight 0.3s ease-out;
}

.animate-scale-in {
    animation: scaleIn 0.2s ease-out;
}

.animate-bounce-in {
    animation: bounceIn 0.5s ease-out;
}

/* Staggered Animation Delays */
.stagger-1 { animation-delay: 0.05s; }
.stagger-2 { animation-delay: 0.1s; }
.stagger-3 { animation-delay: 0.15s; }
.stagger-4 { animation-delay: 0.2s; }
.stagger-5 { animation-delay: 0.25s; }
.stagger-6 { animation-delay: 0.3s; }

/* Hover Animations */
.hover-lift {
    transition: var(--transition);
}

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

.hover-scale {
    transition: var(--transition);
}

.hover-scale:hover {
    transform: scale(1.02);
}

.hover-glow {
    transition: var(--transition);
}

.hover-glow:hover {
    box-shadow: 0 0 20px var(--primary-ring);
}


/* ==========================================================================
   OVERRIDE SECTION: Fix conflicts between customstyles.css and modernization
   These rules use higher specificity + !important to win over old CSS.
   ========================================================================== */

/* --- 1. .headersection overrides ---
   customstyles.css sets:
     .headersection { position: fixed; z-index: 9999; height: 50px; background: #97282a; }
     .headersection { position: fixed; z-index: 1040; }  (line ~6950)
   We need the modern gradient navbar. Pages using _Layout.cshtml use .layout-navbar
   instead, but pages still using the old .headersection class need these overrides. */
body .headersection {
    background: linear-gradient(135deg, #8B1A1A 0%, #6D1416 100%) !important;
    height: 56px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
    border-bottom: none !important;
    position: fixed !important;
    width: 100% !important;
    top: 0 !important;
    z-index: 1030 !important;
    padding: 0 16px !important;
    text-shadow: none !important;
}

body .headersection .back {
    color: rgba(255,255,255,0.8) !important;
    font-size: 1.2rem !important;
    font-weight: 400 !important;
    padding: 4px 8px !important;
}

body .headersection .back:hover {
    color: #fff !important;
}

body .headersection .pagetitle {
    color: #fff !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
}

body .headersection .dropdown-menu {
    z-index: 1060 !important;
    border-radius: 10px !important;
    border: none !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15) !important;
    min-width: 260px !important;
}

/* --- 2. footer / .footersection overrides ---
   customstyles.css sets:
     footer { position: fixed; left: 0; bottom: 0; }
     .footersection { background: #97282a; padding: 3px; }
   The new layout uses .layout-footer instead, but pages still using
   the old .footersection need proper overrides. */
body footer:not(.layout-footer) {
    position: relative !important;
    left: auto !important;
    bottom: auto !important;
}

body .footersection {
    background: #1E293B !important;
    color: #94A3B8 !important;
    padding: 16px 32px !important;
    text-align: center !important;
}

body .footersection li {
    display: inline-block !important;
}

body .footersection li::after {
    color: #64748B !important;
}

body .footersection li a {
    color: #94A3B8 !important;
    text-decoration: none !important;
    font-size: 0.78rem !important;
    transition: color 0.2s !important;
}

body .footersection li a:hover {
    color: #CBD5E1 !important;
}

/* --- 3. .form-heading / .form-heading2 overrides ---
   customstyles.css sets:
     .form-heading { border-bottom: 4px solid; color: #97282a; font-weight: bold; font-family: Arial; }
     .form-heading2 { color: #565656; font-weight: bold; font-family: Arial; }
   Modernize to use new design system colors and typography. */
body .form-heading {
    border-bottom: 2px solid var(--border) !important;
    color: var(--text-primary) !important;
    font-weight: 600 !important;
    font-family: var(--font-family) !important;
    font-size: var(--font-size-lg) !important;
    padding: var(--space-3) var(--space-4) !important;
    margin-bottom: var(--space-3) !important;
    background: var(--surface-secondary) !important;
    border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
    display: block !important;
    line-height: 1.5 !important;
}

body .form-heading2 {
    color: var(--text-primary) !important;
    font-weight: 600 !important;
    font-family: var(--font-family) !important;
    font-size: var(--font-size-md) !important;
    padding: var(--space-2) var(--space-4) !important;
    border-bottom: 1px solid var(--border) !important;
    display: block !important;
}

/* --- 4. body padding-top override ---
   customstyles.css sets body { padding-top: 50px; } and body { padding-top: 55px; }
   The new layout uses .layout-content-wrapper with padding-top: 72px.
   For pages still using .headersection, we need consistent padding. */
body {
    padding-top: 56px !important;
    background-color: #F1F5F9 !important;
}

/* --- 5. .profile-dropdown overrides ---
   customstyles.css sets:
     .mobile-noti, .desk-noti, .profile-dropdown, .add-section, .desk-sync {
       position: absolute; top: 43px; z-index: 99; background: #fff; border: #CCC 1px solid;
       box-shadow: ... !important;
     }
   Need to ensure profile dropdown works with new navbar. */
body .layout-navbar .profile-dropdown,
body .layout-navbar .dropdown-menu {
    position: absolute !important;
    z-index: 1060 !important;
    background: #fff !important;
    border: none !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15) !important;
    border-radius: 10px !important;
}

/* Old profile dropdown in .headersection pages */
body .headersection .profile-dropdown {
    position: absolute !important;
    z-index: 1060 !important;
    background: #fff !important;
    border: none !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15) !important;
    border-radius: 10px !important;
    top: 100% !important;
}

/* --- 6. .list-container overrides ---
   customstyles.css sets:
     .list-container { background-color: #fff; border: 1px solid #d8d8d8; padding: 0 10px; }
   Modernize with card-like styling. */
body .list-container {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    padding: var(--space-3) var(--space-4) !important;
    margin-bottom: var(--space-2) !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

body .list-container:hover {
    border-color: var(--primary-light) !important;
    box-shadow: 0 2px 8px rgba(139, 26, 26, 0.08) !important;
}

body .list-container.active,
body .list-container.selectedrow {
    border-left: 3px solid var(--primary) !important;
    background: var(--primary-subtle) !important;
}

body .list-container .applicantName {
    font-weight: 600 !important;
    color: var(--text-primary) !important;
    font-family: var(--font-family) !important;
}

/* --- 7. .r-user-details-section overrides ---
   customstyles.css sets:
     .r-user-details-section > li > label { display: inline-block !important; ... }
     .r-user-details-section > li { margin: 0px !important; }
   Modernize with flex layout. */
body .r-user-details-section > li {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 8px !important;
    padding: 8px 0 !important;
    border-bottom: 1px solid var(--border-light) !important;
    margin: 0 !important;
    line-height: 1.5 !important;
}

/* Higher-specificity twin of the .r-user-details-section li label:last-child
   rule above — needed because the body-scoped block uses !important and would
   otherwise win specificity, leaving the value cell at min-content (= per-char
   wrap on long company names in narrow sidebar columns). */
body .r-user-details-section > li > label:last-child,
body .r-user-details-section > li > span:last-child {
    flex: 1 1 200px !important;
    min-width: 0 !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
}

body .r-user-details-section > li > label {
    display: inline-block !important;
    font-size: var(--font-size-base) !important;
    color: var(--text-secondary) !important;
}

body .r-user-details-section > li:last-child {
    border-bottom: none !important;
}

/* --- 8. Modal overrides ---
   customstyles.css sets:
     .modal-header { background: #97282a; box-shadow: ... !important; }
     .modal-footer { background-color: #EBEBEB; }
     .modal-body { max-height: calc(77vh - 150px); }
     .modal-dialog { margin: 70px auto; }
     .modal-backdrop.in { opacity: 0.8; }
   Modernize modals. */
body .modal-header {
    background: linear-gradient(135deg, #8B1A1A 0%, #6D1416 100%) !important;
    box-shadow: none !important;
    border-bottom: none !important;
    padding: 16px 24px !important;
}

body .modal-header .modal-title {
    color: #fff !important;
    font-weight: 600 !important;
    font-family: var(--font-family) !important;
    font-size: var(--font-size-md) !important;
}

body .modal-footer {
    background-color: var(--surface-secondary) !important;
    border-top: 1px solid var(--border) !important;
    padding: 12px 24px !important;
}

body .modal-body {
    padding: 20px 24px !important;
    max-height: calc(80vh - 160px) !important;
    overflow-y: auto !important;
}

body .modal-content {
    border-radius: 16px !important;
    border: none !important;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.15) !important;
    overflow: visible !important; /* was hidden — clipped select2 dropdowns & datepickers inside modals */
}

body .modal-dialog {
    margin: 60px auto !important;
}

body .modal-backdrop.show,
body .modal-backdrop.in {
    opacity: 0.5 !important;
    background-color: #0F172A !important;
}

/* --- 9. .stickit position override ---
   customstyles.css sets .stickit { position: fixed; top: 50px; margin-left: 780px; }
   Adjust top to account for new 56px navbar. */
body .stickit {
    top: 72px !important;
}

body .left-nav-sticky {
    top: 72px !important;
}

body .renwal-left-nav-sticky {
    top: 148px !important;
}

/* --- 10. Layout-specific overrides ---
   When using .layout-navbar + .layout-content-wrapper (new layouts),
   prevent old body padding-top from doubling up. */
body:has(.layout-navbar) {
    padding-top: 0 !important;
}

body:has(.layout-navbar) .layout-content-wrapper {
    padding-top: 72px !important;
    min-height: calc(100vh - 56px) !important;
    background: #F1F5F9 !important;
}

/* Ensure .layout-footer is not affected by old footer styles */
body .layout-footer {
    position: relative !important;
    left: auto !important;
    bottom: auto !important;
    background: #1E293B !important;
    color: #94A3B8 !important;
    padding: 16px 32px !important;
    text-align: center !important;
    width: 100% !important;
    height: auto !important;
}

body .layout-footer a {
    color: #94A3B8 !important;
    text-decoration: none !important;
    font-size: 0.78rem !important;
    margin: 0 12px !important;
}

body .layout-footer a:hover {
    color: #CBD5E1 !important;
}

/* Ensure .layout-navbar is not affected by old .headersection styles */
body .layout-navbar {
    background: linear-gradient(135deg, #8B1A1A 0%, #6D1416 100%) !important;
    height: 56px !important;
    padding: 0 16px !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1030 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: auto !important;
}


/* ==========================================================================
   11. UAT LAYOUT FIXES — Visual polish for beta release
   ========================================================================== */

/* --- 11a. Content area consistent padding below navbar --- */
.layout-content-wrapper,
body > .container-fluid:first-of-type,
body > div:first-of-type:not(.layout-navbar):not(nav) {
    padding-top: 72px;
}

/* --- 11b. Compact filter section cards --- */
.card .extraFilterSection,
.card .renewls-filter,
.extraFilterSection .card-body,
.renewls-filter .card-body {
    padding: 12px !important;
}

/* --- 11c. Upload section horizontal layout --- */
.fileUpload-section,
.upload-section,
.uploading-opn {
    display: flex !important;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* --- 11d. Date filter section horizontal layout --- */
.form-group.calendar,
.date-filter-group {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* --- 11e. Search/filter section compact layout --- */
.extraFilterSection .row,
.renewls-filter .row {
    align-items: end;
}

.extraFilterSection .col-md-2,
.extraFilterSection .col-md-3,
.renewls-filter .col-md-2,
.renewls-filter .col-md-3 {
    margin-bottom: 8px;
}

/* --- 11f. List body items inline where space allows --- */
.list-body li {
    display: inline-block;
    margin-right: 16px;
    vertical-align: top;
}

.list-body .btn {
    vertical-align: middle;
}

/* --- 11g. Candidate name styling --- */
.list-header li.applicantName {
    font-weight: 600;
    font-size: 14px;
}

/* --- 11h. Detail panel right side sticky --- */
.r-user-details-section {
    position: sticky;
    top: 72px;
}

/* --- 11i. Modal radio card selection visual feedback --- */
.emp-type-card.selected,
.emp-type-card:has(input:checked) {
    border-color: var(--primary, #8B1A1A) !important;
    background: rgba(139, 26, 26, 0.03) !important;
    box-shadow: 0 0 0 2px rgba(139, 26, 26, 0.2) !important;
}

/* --- 11j. Show more/less — hide text-content initially on mobile --- */
@media (max-width: 767.98px) {
    .list-body ul.text-content {
        display: none;
    }
}

/* --- 11k. Show more link styling --- */
.show-more {
    padding: 8px 12px;
    text-align: center;
}

.show-more a {
    color: var(--primary, #8B1A1A);
    font-size: var(--font-size-sm, 12px);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.show-more a:hover {
    text-decoration: underline;
}

/* --- 11l. Navbar title truncation for long page titles --- */
.layout-navbar .navbar-brand,
.headersection .navbar-brand,
.headersection .h-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 60%;
}

/* --- 11m. Footer must not overlap content — ensure relative positioning --- */
body footer {
    position: relative !important;
    left: auto !important;
    bottom: auto !important;
}

/* --- 11n. Fix old form-heading border color to use brand color --- */
body .form-heading {
    border-bottom-color: var(--primary, #8B1A1A) !important;
    color: var(--primary, #8B1A1A) !important;
}

/* --- 11o. Fix old list-container borders/shadows to use modern style --- */
body .list-container {
    border: 1px solid var(--border, #E2E8F0) !important;
    border-radius: var(--radius-md, 10px) !important;
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.05)) !important;
    background: var(--surface, #fff) !important;
    margin-bottom: 8px !important;
}

body .list-container.active,
body .list-container:hover {
    border-color: var(--primary, #8B1A1A) !important;
    box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0,0,0,0.07)) !important;
}

/* --- 11p. Fix old navtab-links styling in filter sections --- */
body .nav-tabsection .navtab-links li.active a {
    background: var(--primary, #8B1A1A) !important;
    border-color: var(--primary, #8B1A1A) !important;
    color: #fff !important;
}

body .nav-tabsection .navtab-links li.active a h1,
body .nav-tabsection .navtab-links li.active a p {
    color: #fff !important;
}

/* --- 11q. Profile dropdown positioning fix --- */
body .profile-dropdown {
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    z-index: var(--z-dropdown, 1000) !important;
}

/* --- 11r. MyCandidateList desktop search/filter row fix --- */
/* Row 1: Search By | Search Value | Filter By | Sort | Search btn — horizontal */
.card.d-none.d-md-block .card-body > ul.row {
    display: flex !important;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0;
}

.card.d-none.d-md-block .card-body > ul.row > li {
    list-style: none;
}

/* Row 2: Upload Sap Code | dates | filter — horizontal */
.filter-friz .container > ul.row {
    display: flex !important;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0;
}

.filter-friz .container > ul.row > li {
    list-style: none;
}

/* Upload section label alignment */
.filter-friz .label-align {
    display: flex !important;
    align-items: center;
    padding-top: 0 !important;
    height: 100%;
}

/* Tighten row spacing in filter cards */
.filter-friz {
    padding-top: 12px !important;
}

/* --- 11s. JoiningConfirmation search section compact layout --- */
.card .card-body > ul.row {
    display: flex !important;
    flex-wrap: wrap;
    align-items: flex-end;
    margin: 0;
    padding: 0;
    list-style: none;
}

.card .card-body > ul.row > li {
    list-style: none;
}

/* Fix search input height */
.serachfield,
input.serachfield {
    height: 36px !important;
    padding: 4px 8px !important;
    border: 1px solid var(--border, #E2E8F0) !important;
    border-radius: var(--radius-sm, 6px) !important;
    width: 100%;
    font-size: var(--font-size-base, 13px);
}

/* Fix button alignment in filter rows */
.card .card-body > ul.row .btn-xs,
.filter-friz .btn-xs {
    margin-top: 0;
    white-space: nowrap;
}

/* --- 11t. Download format link styling --- */
a.download-btn {
    color: var(--primary, #8B1A1A);
    font-size: var(--font-size-sm, 12px);
    text-decoration: underline;
    white-space: nowrap;
}

/* --- 11l. Footer must not overlap content --- */
.footersection,
footer,
.layout-footer {
    position: relative !important;
    bottom: auto !important;
}

/* --- 11m. JoiningConfirmation search area compact --- */
.extraFilterSection .row .col-sm-2,
.extraFilterSection .row .col-sm-3,
.extraFilterSection .row .col-sm-4,
.extraFilterSection .row .col-md-2,
.extraFilterSection .row .col-md-3 {
    margin-bottom: 8px;
}

.extraFilterSection .form-control,
.renewls-filter .form-control {
    height: 36px;
    font-size: 13px;
}

.extraFilterSection .btn,
.renewls-filter .btn {
    height: 36px;
    font-size: 13px;
    padding: 4px 12px;
}

/* --- 11n. Upload section inline layout --- */
.uploading-opn {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
}

.uploading-opn .fileUpload {
    margin-bottom: 0 !important;
}

/* --- 11o. Date filter inline --- */
.filter-friz .col-sm-4 .row {
    display: flex;
    align-items: end;
    flex-wrap: wrap;
    gap: 4px;
}

.filter-friz .mb-3 {
    margin-bottom: 4px !important;
}

/* --- 11p. List body items inline on desktop --- */
@media (min-width: 768px) {
    .list-body ul.list-unstyled:not(.d-block):not(.d-none):not(.d-md-none):not(.d-md-block) {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 16px;
    }
    
    .list-body ul.list-unstyled li {
        margin-bottom: 0 !important;
    }
}

/* --- 11q. MyCandidateList filter/upload section fix --- */
.filter-friz {
    padding-top: 8px !important;
}

.filter-friz .container {
    max-width: 100%;
    padding: 0;
}

.filter-friz > .container > ul.row {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.filter-friz > .container > ul.row > li {
    flex: 0 0 auto;
    padding: 0 4px;
}

.filter-friz > .container > ul.row > li.col-sm-6 {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
}

.filter-friz > .container > ul.row > li.col-sm-4 {
    flex: 0 0 auto;
    width: auto;
}

.filter-friz > .container > ul.row > li.col-sm-2 {
    flex: 0 0 auto;
    width: auto;
}

.filter-friz .label-align {
    font-size: 12px;
    font-weight: 600;
    color: #64748B;
    padding-top: 0 !important;
    white-space: nowrap;
}

.filter-friz .uploading-opn {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
}

.filter-friz .uploading-opn .fileUpload {
    height: 32px !important;
    line-height: 18px !important;
    font-size: 12px !important;
    padding: 4px 8px !important;
}

.filter-friz .uploading-opn .btn {
    height: 32px !important;
    line-height: 18px !important;
    font-size: 12px !important;
    padding: 4px 10px !important;
}

.filter-friz .download-btn {
    font-size: 12px;
    padding-top: 0 !important;
    white-space: nowrap;
}

.filter-friz .calendar {
    width: 100px !important;
    font-size: 12px !important;
    height: 32px !important;
    padding: 4px 24px 4px 6px !important;
}

.filter-friz .mb-3 {
    margin-bottom: 0 !important;
}

/* Hide the desktop search section that duplicates mobile bottom sheet */
.filter-friz + .d-block.d-md-none.renewls-filter.filter-friz.mobile-filter-old {
    display: none !important;
}

/* Fix the "Select file"/"Upload" row inside the form */
.filter-friz .col-md-5 {
    padding-top: 0 !important;
}

.filter-friz .col-sm-2.label-align {
    display: flex;
    align-items: center;
    padding-top: 0 !important;
}

/* --- 11r. Search section compact for all pages --- */
.top-filtersection .extraFilterSection,
.extraFilterSection {
    background: #fff;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 12px;
}

.extraFilterSection .row {
    align-items: end;
}

.extraFilterSection label {
    font-size: 12px;
    font-weight: 600;
    color: #64748B;
    margin-bottom: 2px;
}

/* --- 11s. Desktop search row inline --- */
@media (min-width: 768px) {
    .d-none.d-md-block .extraFilterSection .row {
        display: flex;
        flex-wrap: wrap;
        align-items: end;
        gap: 8px;
    }
}

/* --- 11t. Inline search field fix for JoiningConfirmation and similar pages --- */
.serachfield {
    height: 36px !important;
    border: 1.5px solid #E2E8F0 !important;
    border-radius: 6px !important;
    padding: 4px 10px !important;
    font-size: 13px !important;
    width: 100% !important;
    transition: border-color 0.2s;
}

.serachfield:focus {
    border-color: #8B1A1A !important;
    outline: none;
    box-shadow: 0 0 0 2px rgba(139,26,26,0.1);
}

/* ============================================================
   CRITICAL: Bootstrap display utility overrides
   These MUST come last to ensure d-none/d-block/d-md-* work
   ============================================================ */
@media (min-width: 768px) {
    .d-md-block { display: block !important; }
    .d-md-none { display: none !important; }
    .d-md-flex { display: flex !important; }
    .d-md-inline { display: inline !important; }
    .d-md-inline-block { display: inline-block !important; }
}
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }

/* Ensure list-body flex doesn't override display utilities */
.list-body ul.d-none,
.list-body ul.d-block.d-md-none,
ul.clearfix.d-block.d-md-none,
ul.clearfix.d-none.d-md-block {
    /* Let Bootstrap utilities take precedence */
}

/* Fix: The list-body flex rule was overriding d-none on mobile views */
.list-body ul.list-unstyled.d-none {
    display: none !important;
}

@media (min-width: 768px) {
    .list-body ul.list-unstyled.d-none.d-md-block {
        display: block !important;
    }
    .list-body ul.list-unstyled.d-none.d-md-flex {
        display: flex !important;
    }
}

/* --- 12. CV Funnel / Referral Dashboard tile overrides --- */
.refdashboardtile {
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-left: 4px solid #8B1A1A !important;
    border-radius: 10px !important;
    padding: 16px !important;
    margin-bottom: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}

.refdashboardtile:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
    transform: translateY(-2px);
    border-left-color: #C8A951 !important;
}

.refdashboardtile span {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #8B1A1A !important;
}

.refdashboardtile .reftitle {
    color: #334155 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-top: 1px solid #F1F5F9 !important;
    padding-top: 8px !important;
    margin-top: 8px !important;
    background: none !important;
}

.refdashboardtile .reftilebody {
    background: none !important;
}

.refdashboardtile .reficon {
    color: #8B1A1A !important;
    opacity: 0.3;
}

/* Override per-tile colored backgrounds */
#divRefPosting .refdashboardtile,
#divRefPending .refdashboardtile,
#divRefShortlisted .refdashboardtile,
#divRefJoined .refdashboardtile,
#divRefActive .refdashboardtile,
#divRefInactive .refdashboardtile,
#divRefIncentives .refdashboardtile,
#divRefRejected .refdashboardtile,
#divRefNoresponse .refdashboardtile {
    background: #FFFFFF !important;
}

#divRefPosting .refdashboardtile .reftitle,
#divRefPending .refdashboardtile .reftitle,
#divRefShortlisted .refdashboardtile .reftitle,
#divRefJoined .refdashboardtile .reftitle,
#divRefActive .refdashboardtile .reftitle,
#divRefInactive .refdashboardtile .reftitle,
#divRefIncentives .refdashboardtile .reftitle,
#divRefRejected .refdashboardtile .reftitle,
#divRefNoresponse .refdashboardtile .reftitle {
    color: #334155 !important;
    background: none !important;
}

/* Active/selected tile */
.filter-dashboard.active .refdashboardtile,
.filter-dashboard.selected .refdashboardtile {
    border-left-color: #C8A951 !important;
    background: #FBF9F4 !important;
}

/* Referral filter search area */
.referral-filter,
.ref-filter-section {
    background: #fff;
    border-radius: 8px;
    padding: 16px;
    border: 1px solid #E2E8F0;
}

/* ============================================================
   NUCLEAR: These rules MUST be the last in the file.
   They ensure Bootstrap responsive display utilities work.
   ============================================================ */
@media (min-width: 768px) {
    .d-md-none { display: none !important; }
    .d-md-block { display: block !important; }
    .d-md-flex { display: flex !important; }
    .d-md-inline-block { display: inline-block !important; }
    
    /* Override any flex/block rules that conflict */
    .d-md-none.d-flex,
    .d-md-none.d-block,
    .d-md-none.d-inline-flex {
        display: none !important;
    }
}

@media (max-width: 767.98px) {
    .d-block.d-md-none { display: block !important; }
    .d-none.d-md-block { display: none !important; }
    .d-none.d-md-flex { display: none !important; }
}

/* --- 13. Step tabs / Nav tabs modernization --- */
/* Override old maroon gradient nav-tabs used in multi-step forms */
.nav.navbar-nav {
    display: flex !important;
    flex-wrap: wrap;
    gap: 0;
    list-style: none;
    padding: 0;
    margin: 0;
    border: none !important;
    background: none !important;
}

.nav.navbar-nav > li {
    flex: 1;
    text-align: center;
}

.nav.navbar-nav > li > a {
    display: block;
    padding: 12px 16px !important;
    color: #64748B !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    text-decoration: none !important;
    background: #F8FAFC !important;
    border: 1px solid #E2E8F0 !important;
    border-bottom: 3px solid transparent !important;
    transition: all 0.2s ease;
}

.nav.navbar-nav > li > a:hover {
    color: #8B1A1A !important;
    background: #FFF !important;
    border-bottom-color: #C8A951 !important;
}

.nav.navbar-nav > li.active > a,
.nav.navbar-nav > li > a.active {
    color: #8B1A1A !important;
    background: #FFF !important;
    border-bottom: 3px solid #8B1A1A !important;
}

/* Navbar used as step container */
.navbar-default {
    background: #FFF !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
    margin-bottom: 16px;
    min-height: auto !important;
}

.navbar-collapse {
    padding: 0 !important;
    border: none !important;
}

.navbar-header {
    display: none;
}

/* form-heading modernization */
h3.form-heading,
.form-heading {
    color: #8B1A1A !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    padding-bottom: 8px !important;
    margin-bottom: 16px !important;
    border-bottom: 2px solid #8B1A1A !important;
    border-left: none !important;
    background: none !important;
}

/* Form section cards */
.tab-pane .card,
.tab-content .card {
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

/* Required asterisk */
.asterisk {
    color: #DC2626 !important;
}

/* --- 14. Status badges & Confirm button overrides --- */
.status.inforce,
.status.open-s,
.status.submitted,
.status.closed {
    background: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    border: none !important;
}

/* Override green background on cards that have status badges */
.card .badge,
.card .status {
    box-shadow: none !important;
}

/* Confirm button clean styling */
.card .btn-secondary.btn-xs,
.card a.btn.btn-xs {
    background: #8B1A1A !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 4px 14px !important;
    font-size: 12px !important;
    box-shadow: none !important;
}

/* Fix green alert background that leaks onto cards */
.green-alert,
.list-body .green-alert,
.card-body .green-alert {
    background: none !important;
    box-shadow: none !important;
}

/* --- 15. JoiningConfirmation mobile fixes --- */
@media (max-width: 767px) {
    /* Search section compact on mobile */
    .d-flex.align-items-end.gap-2 .form-label {
        font-size: 12px !important;
    }
    .d-flex.align-items-end.gap-2 .form-control {
        font-size: 13px !important;
        height: 36px !important;
    }
    .d-flex.align-items-end.gap-2 .btn {
        font-size: 13px !important;
        height: 36px !important;
        padding: 4px 12px !important;
    }
    
    /* Card badges should not have green shadow */
    .card .badge,
    .card .status.inforce {
        box-shadow: none !important;
        background: transparent !important;
    }
    
    /* Confirm button clean on mobile */
    .card a.btn[onclick*="ConfirmMsg"],
    .card a.btn[style*="8B1A1A"] {
        box-shadow: none !important;
        outline: none !important;
    }
    
    /* Candidate card mobile layout */
    .card .card-body .d-flex.flex-wrap {
        gap: 4px 8px !important;
    }
    
    .card .card-body .d-flex.justify-content-between {
        flex-direction: column !important;
        gap: 4px !important;
    }
    
    .card .card-body .d-flex.justify-content-between .d-flex.align-items-center {
        flex-wrap: wrap;
        gap: 4px !important;
    }
}

/* Fix green outline around buttons in cards */
.card .btn-secondary.btn-xs,
.card .btn-secondary {
    background: #fff !important;
    color: #8B1A1A !important;
    border: 1px solid #8B1A1A !important;
    border-radius: 6px !important;
    box-shadow: none !important;
}

.card .btn-secondary.btn-xs:hover,
.card .btn-secondary:hover {
    background: #8B1A1A !important;
    color: #fff !important;
}

/* Override the old green gradient on status.inforce in list views */
.card .status.inforce,
.dvgrid .status.inforce {
    background: none !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* Show more section clean */
.show-more {
    border-top: 1px solid #F1F5F9;
    padding-top: 8px;
    margin-top: 8px;
}
.show-more a {
    color: #8B1A1A !important;
    font-weight: 600;
    text-decoration: none !important;
}

/* ═══════════════════════════════════════════════════════
   GLOBAL UI REVAMP OVERRIDES (2026)
   Applied across ALL pages to modernize legacy patterns
   ═══════════════════════════════════════════════════════ */

/* ── Legacy Dashboard Tiles (.homepage, .relodeclass) ── */
.homepage, .relodeclass {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 16px;
    padding: 22px 24px;
    text-decoration: none !important;
    color: inherit !important;
    transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
    border: 1px solid #E2E8F0;
    border-left: 4px solid #8B1A1A;
    height: 100%;
    min-height: 96px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.03);
    margin-bottom: 12px;
}
.homepage:hover, .relodeclass:hover {
    border-left-color: #C8A951;
    box-shadow: 0 10px 32px rgba(139,26,26,0.12);
    transform: translateY(-4px);
    text-decoration: none !important;
    color: inherit !important;
}
.homepage .h-title-section h1,
.relodeclass .h-title-section h1 {
    font-size: 0.92rem;
    font-weight: 700;
    color: #1E293B;
    margin: 0 0 4px;
    line-height: 1.3;
}
.homepage .h-title-section span,
.relodeclass .h-title-section span {
    font-size: 0.78rem;
    color: #64748B;
}
.homepage .section-icon,
.relodeclass .section-icon {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(139,26,26,0.06), rgba(139,26,26,0.12));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    color: #8B1A1A;
    flex-shrink: 0;
    margin-right: 16px;
    transition: all 0.25s;
}
.homepage:hover .section-icon,
.relodeclass:hover .section-icon {
    background: linear-gradient(135deg, #8B1A1A, #6B1414);
    color: #fff;
    transform: scale(1.08);
    box-shadow: 0 4px 12px rgba(139,26,26,0.25);
}

/* ── Legacy Referral Dashboard Tiles ── */
.refdashboardtile {
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    border: 1px solid #E2E8F0;
    border-left: 4px solid #8B1A1A;
    transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
    text-align: center;
    box-shadow: 0 1px 4px rgba(0,0,0,0.03);
}
.refdashboardtile:hover {
    border-left-color: #C8A951;
    box-shadow: 0 10px 32px rgba(139,26,26,0.12);
    transform: translateY(-4px);
}
.reftitle {
    font-size: 0.85rem;
    font-weight: 700;
    color: #1E293B;
    margin-top: 8px;
}

/* ── Legacy Welcome Header ── */
.welcome-header {
    background: linear-gradient(135deg, #8B1A1A 0%, #5C1010 50%, #3D0A0A 100%);
    border-radius: 18px;
    padding: 28px 28px 24px;
    color: #fff !important;
    margin-bottom: 28px;
    box-shadow: 0 6px 24px rgba(139,26,26,0.22);
}
.welcome-header strong,
.welcome-header label {
    color: #fff !important;
    font-size: 18px;
}
.welcome-header small {
    color: rgba(255,255,255,0.65) !important;
    font-size: 14px;
}

/* ── Form Headings ── */
.form-heading, .form-heading2 {
    font-size: 14px;
    font-weight: 700;
    color: #1E293B;
    padding: 12px 16px;
    margin-bottom: 16px;
    background: linear-gradient(135deg, rgba(139,26,26,0.04), transparent);
    border-left: 3px solid #8B1A1A;
    border-radius: 0 8px 8px 0;
}

/* ── Old Mobile Filter (hide completely — replaced by bottom sheets) ── */
.mobile-filter-old,
.extraFilterSection.extraFiltermobile {
    display: none !important;
}

/* ── Global Form Control Improvements ── */
.form-control, .form-select {
    border-radius: 8px;
    border: 1px solid #E2E8F0;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.form-control:focus, .form-select:focus {
    border-color: #8B1A1A;
    box-shadow: 0 0 0 3px rgba(139,26,26,0.08);
}

/* ── Global Button Improvements ── */
.btn-primary, .btn-submit {
    background: linear-gradient(135deg, #8B1A1A, #6B1414) !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 600;
    transition: all 0.2s;
}
.btn-primary:hover, .btn-submit:hover {
    background: linear-gradient(135deg, #6B1414, #4A0E0E) !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(139,26,26,0.3);
}

/* ── Global Card Improvements ── */
.card {
    border-radius: 12px;
    border: 1px solid #E2E8F0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.03);
}
/* Originally `.card { padding: 0 }` to override customstyles.css:279 `padding:20px`
   which double-pads cards that ALSO have a .card-body. The unscoped rule blew
   away inner padding on every other card too — e.g. BMEvaluation #step2.card
   form fields stuck to the left edge with zero left/right breathing room.
   Scoped via :has(> .card-body) so cards with their own card-body still avoid
   the double-pad, while plain content cards keep their declared padding. */
.card:has(> .card-body) {
    padding: 0;
}
.card-header {
    background: linear-gradient(135deg, #8B1A1A 0%, #5C1010 100%) !important;
    color: #fff !important;
    border-radius: 12px 12px 0 0 !important;
    font-weight: 600;
    padding: 14px 18px;
}
.card-header .btn-close {
    filter: brightness(0) invert(1);
}

/* ── Modal Improvements ── */
.modal-content {
    border-radius: 14px !important;
    border: none !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.18) !important;
    overflow: hidden;
}
.modal-header {
    background: linear-gradient(135deg, #8B1A1A 0%, #5C1010 100%);
    color: #fff;
    padding: 16px 20px;
    border-bottom: none;
}
.modal-header .modal-title {
    color: #fff !important;
    font-weight: 700;
    font-size: 1rem;
}
.modal-header .btn-close {
    filter: brightness(0) invert(1);
    opacity: 0.8;
}
.modal-header .btn-close:hover {
    opacity: 1;
}
.modal-body {
    padding: 24px;
}
.modal-footer {
    padding: 12px 24px;
    border-top: 1px solid #F1F5F9;
}

/* ── Table/DataGrid Improvements ── */
/* Scoped to .table/.r_table/.dataTable — bare "table th/td" was breaking datepicker calendar cells */
.table th, .r_table th, .dataTable th {
    background: #F8FAFC;
    font-size: 12px;
    font-weight: 700;
    color: #64748B;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 10px 12px;
    border-bottom: 2px solid #E2E8F0;
}
.table td, .r_table td, .dataTable td {
    padding: 10px 12px;
    font-size: 13px;
    color: #1E293B;
    border-bottom: 1px solid #F1F5F9;
    vertical-align: middle;
}
.table tr:hover td, .r_table tr:hover td, .dataTable tr:hover td {
    background: #F8FAFC;
}

/* ── Alert/Status Badge Improvements ── */
.alert-success {
    background: #D1FAE5;
    color: #059669;
    border: 1px solid #BBF7D0;
    border-radius: 10px;
    font-weight: 600;
}
.alert-danger {
    background: #FEF2F2;
    color: #DC2626;
    border: 1px solid #FECACA;
    border-radius: 10px;
    font-weight: 600;
}
.alert-warning {
    background: #FEF3C7;
    color: #B45309;
    border: 1px solid #FDE68A;
    border-radius: 10px;
    font-weight: 600;
}
.alert-info {
    background: #DBEAFE;
    color: #2563EB;
    border: 1px solid #BFDBFE;
    border-radius: 10px;
    font-weight: 600;
}

/* ── Status Badges ── */
.badge {
    border-radius: 6px;
    font-weight: 600;
    font-size: 11px;
    padding: 4px 10px;
    letter-spacing: 0.3px;
}

/* ── Scrollbar Styling ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #94A3B8; }

/* ── Old Navigation Tab Override (counter tabs/steps) ── */
.nav-tabsection .navtab-links {
    display: flex;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.nav-tabsection .navtab-links li {
    flex-shrink: 0;
}
.nav-tabsection .navtab-links li.divider-line {
    display: none;
}
.nav-tabsection .navtab-links li a {
    display: block;
    text-align: center;
    padding: 8px 16px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #E2E8F0;
    text-decoration: none;
    color: inherit;
    min-width: 80px;
    transition: all 0.2s;
}
.nav-tabsection .navtab-links li a:hover {
    border-color: #8B1A1A;
    background: #FFF5F5;
}
.nav-tabsection .navtab-links li.active a {
    background: linear-gradient(135deg, #8B1A1A, #6B1414);
    border-color: #8B1A1A;
    color: #fff;
}
.nav-tabsection .navtab-links li.active a h1,
.nav-tabsection .navtab-links li.active a p {
    color: #fff;
}
.nav-tabsection .navtab-links li a h1.counter {
    font-size: 18px;
    font-weight: 800;
    margin: 0;
    color: #1E293B;
}
.nav-tabsection .navtab-links li.active a h1.counter {
    color: #fff;
}
.nav-tabsection .navtab-links li a p {
    font-size: 11px;
    margin: 2px 0 0;
    color: #64748B;
}

/* ── Responsive Global ── */
@media (max-width: 767.98px) {
    .nav-tabsection .navtab-links {
        gap: 6px;
    }
    .nav-tabsection .navtab-links li a {
        padding: 6px 12px;
        min-width: 60px;
    }
    .nav-tabsection .navtab-links li a h1.counter {
        font-size: 16px;
    }
    .nav-tabsection .navtab-links li a p {
        font-size: 10px;
    }
    .form-heading, .form-heading2 {
        font-size: 13px;
        padding: 10px 14px;
    }
}

/* ── Modern Pagination Override ── */
.pagination {
    gap: 6px !important;
    flex-wrap: wrap;
    margin-top: 16px;
    margin-bottom: 20px;
    padding: 16px 0;
}
.pagination > li > a,
.pagination > li > span,
.page-link {
    border-radius: 10px !important;
    border: 1px solid #E2E8F0 !important;
    color: #475569 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    min-width: 38px !important;
    height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 12px !important;
    background: #fff !important;
    transition: all 0.2s !important;
    text-decoration: none !important;
}
.pagination > li > a:hover,
.page-link:hover {
    background: #FFF5F5 !important;
    border-color: #8B1A1A !important;
    color: #8B1A1A !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(139,26,26,0.1);
}
.pagination > li.active > a,
.pagination > li.active > span,
.page-item.active .page-link {
    background: linear-gradient(135deg, #8B1A1A, #6B1414) !important;
    border-color: #8B1A1A !important;
    color: #fff !important;
    box-shadow: 0 3px 10px rgba(139,26,26,0.25) !important;
}
.pagination > li.disabled > a,
.page-item.disabled .page-link {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    background: #F8FAFC !important;
}

/* ── Table Header Enhancement ── */
/* Scoped to .table only — bare "table thead th" was forcing 11px uppercase on datepicker calendar headers */
.table thead th,
.table-light th {
    background: linear-gradient(180deg, #F8FAFC 0%, #F1F5F9 100%) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    color: #64748B !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    padding: 12px 14px !important;
    border-bottom: 2px solid #E2E8F0 !important;
    white-space: nowrap;
}
.table-responsive {
    border-radius: 12px;
    overflow-x: auto;
    overflow-y: visible;
}
table.table {
    margin-bottom: 0;
}
table.table td {
    padding: 12px 14px;
    font-size: 13px;
    vertical-align: middle;
    border-bottom: 1px solid #F1F5F9;
}
table.table tbody tr:hover td {
    background: rgba(139,26,26,0.02);
}
table.table tbody tr:nth-child(even) td {
    background: #FAFBFC;
}
table.table tbody tr:nth-child(even):hover td {
    background: rgba(139,26,26,0.03);
}

/* === Document Verification: side-by-side layout fix === */
#divdoc.row > #divdocumentviewer {
    flex: 0 0 auto;
    width: 100%;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
}
@media (min-width: 768px) {
    #divdoc.row > #divdocumentviewer {
        width: 66.666667%;
    }
}
/* Inner partial already wraps in col-md-8; override to full width since parent constrains */
#divdocumentviewer > .col-12.col-md-8,
#divdocumentviewer > .col-md-8 {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
}

/* ══════════════════════════════════════════════════════════════════
   UPLOAD DOCUMENT PAGE — Complete Redesign
   Scoped under #uploaddocument for specificity over inline styles
   ══════════════════════════════════════════════════════════════════ */

#uploaddocument {
    /* Brand alignment: --ud-maroon now matches the canonical IndusInd maroon
       (#8B1A1A) used by the navbar, primary buttons, and the inline gradient
       linear-gradient(135deg, #8B1A1A, #6B1414). The previous #6B1B2E shifted
       the dropzone border/icon/Upload-button into a wine-leaning shade that
       didn't match the rest of the page. --ud-maroon-dark is the same #6B1414
       used as the gradient-stop end so hover states stay on-brand. */
    --ud-maroon: #8B1A1A;
    --ud-maroon-light: #8B1A1A;
    --ud-maroon-dark: #6B1414;
    --ud-maroon-soft: #FDF2F4;
    --ud-green: #059669;
    --ud-green-soft: #D1FAE5;
    --ud-amber: #D97706;
    --ud-amber-soft: #FEF3C7;
    --ud-gray-50: #F9FAFB;
    --ud-gray-100: #F1F5F9;
    --ud-gray-200: #E2E8F0;
    --ud-gray-300: #D1D5DB;
    --ud-gray-400: #94A3B8;
    --ud-gray-500: #6B7280;
    --ud-gray-700: #334155;
    --ud-gray-900: #1E293B;
}

/* ── Sidebar Container ── */
#uploaddocument .ud-sidebar {
    border-radius: 12px !important;
    border: 1px solid var(--ud-gray-200) !important;
    background: #fff !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06) !important;
    padding: 0 !important;
    overflow: hidden !important;
}
#uploaddocument .ud-sidebar-header {
    padding: 16px 16px 12px;
    border-bottom: 1px solid var(--ud-gray-200);
}
#uploaddocument .ud-sidebar-title {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ud-gray-500);
    font-weight: 600;
    margin-bottom: 2px;
}
#uploaddocument .ud-sidebar-subtitle {
    font-size: 12px;
    color: var(--ud-gray-400);
    margin-bottom: 8px;
}
#uploaddocument .ud-progress {
    height: 4px !important;
    border-radius: 2px !important;
    background: var(--ud-gray-100) !important;
    overflow: hidden;
}
#uploaddocument .ud-progress-bar {
    background: var(--ud-maroon) !important;
    border-radius: 2px !important;
    transition: width 0.3s ease;
}

/* ── Document Checklist List ── */
#uploaddocument .pdcnavsteps {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    border-bottom: none !important;
}
#uploaddocument .pdcnavsteps li {
    list-style: none !important;
    width: 100% !important;
    border-bottom: 1px solid var(--ud-gray-200) !important;
}
#uploaddocument .pdcnavsteps li:last-child {
    border-bottom: none !important;
}

/* ── List Item Link ── */
#uploaddocument .pdcnavsteps li a {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px 16px !important;
    min-height: 56px !important;
    text-decoration: none !important;
    color: var(--ud-gray-500) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    background: #fff !important;
    border: none !important;
    border-left: 4px solid transparent !important;
    border-radius: 0 !important;
    margin: 0 !important;
    transition: background 0.15s ease, border-color 0.15s ease !important;
    cursor: pointer !important;
    position: relative !important;
    min-width: unset !important;
    text-align: left !important;
    box-shadow: none !important;
    transform: none !important;
    background-image: none !important;
}
#uploaddocument .pdcnavsteps li a:hover {
    background: var(--ud-gray-50) !important;
    transform: none !important;
    box-shadow: none !important;
    border-left: 4px solid transparent !important;
}
/* Active Row */
#uploaddocument .pdcnavsteps li.active a,
#uploaddocument .pdcnavsteps li.active a:hover {
    background: var(--ud-maroon-soft) !important;
    border-left: 4px solid var(--ud-maroon) !important;
    color: var(--ud-maroon) !important;
    font-weight: 500 !important;
}

/* ── Status Circle (ord-no) ── */
#uploaddocument .pdcnavsteps .ord-no {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    border-radius: 50% !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
    background: transparent !important;
    border: 2px solid var(--ud-gray-300) !important;
    color: var(--ud-gray-400) !important;
}
#uploaddocument .pdcnavsteps li.active .ord-no {
    background: var(--ud-maroon) !important;
    border-color: var(--ud-maroon) !important;
    color: #fff !important;
}
#uploaddocument .pdcnavsteps li a.done .ord-no {
    background: var(--ud-green) !important;
    border-color: var(--ud-green) !important;
    color: #fff !important;
    font-size: 0 !important;
}
#uploaddocument .pdcnavsteps li a.done .ord-no::after {
    content: '\F26A' !important;
    font-family: 'bootstrap-icons' !important;
    font-size: 14px !important;
    color: #fff !important;
    position: static !important;
    transform: none !important;
    background: none !important;
    margin: 0 !important;
}
#uploaddocument .pdcnavsteps li a.incomplete .ord-no {
    background: var(--ud-amber) !important;
    border-color: var(--ud-amber) !important;
    color: #fff !important;
    font-size: 0 !important;
}
#uploaddocument .pdcnavsteps li a.incomplete .ord-no::after {
    content: '\F33B' !important;
    font-family: 'bootstrap-icons' !important;
    font-size: 14px !important;
    color: #fff !important;
    position: static !important;
    transform: none !important;
    background: none !important;
    margin: 0 !important;
}
/* Kill old status pseudo-elements on <a> tags (incl. the joining-flow base triangle —
   the Documents Upload nav uses its own .ud-chevron indicator, not the amber triangle). */
#uploaddocument .pdcnavsteps li a::after,
#uploaddocument .pdcnavsteps li a.done::after,
#uploaddocument .pdcnavsteps li a.incomplete::after,
#uploaddocument .pdcnavsteps li a.NotReaded::after,
#uploaddocument .pdcnavsteps li a.CFRRaised::after {
    content: none !important;
    display: none !important;
}
#uploaddocument .pdcnavsteps li a.done,
#uploaddocument .pdcnavsteps li a.incomplete,
#uploaddocument .pdcnavsteps li a.NotReaded {
    background-image: none !important;
}

/* ── Document Name ── */
#uploaddocument .pdcnavsteps .doc-name {
    flex: 1 !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    word-break: break-word !important;
    min-width: 0 !important;
}
#uploaddocument .pdcnavsteps li a b {
    font-weight: inherit !important;
    font-size: 13px !important;
    flex: 1 !important;
    line-height: 1.4 !important;
}

/* ── Chevron ── */
#uploaddocument .ud-chevron {
    color: var(--ud-gray-400) !important;
    font-size: 14px !important;
    flex-shrink: 0 !important;
    transition: color 0.15s !important;
}
#uploaddocument .pdcnavsteps li.active .ud-chevron {
    color: var(--ud-maroon) !important;
}

/* Disabled items */
#uploaddocument .pdcnavsteps li.disabled_li a,
#uploaddocument .pdcnavsteps li a.disabled_li {
    opacity: 0.5 !important;
    pointer-events: none !important;
}

/* ══════════════════════════════════════════════════
   RIGHT CONTENT PANEL
   ══════════════════════════════════════════════════ */

/* ── Case Number Pill — hidden on desktop, shown on mobile ── */
#uploaddocument #dvUploadCaseno {
    display: none !important;
}
@media (max-width: 767.98px) {
    #uploaddocument #dvUploadCaseno {
        display: inline-flex !important;
        align-items: center !important;
        background: var(--ud-gray-100) !important;
        color: var(--ud-maroon) !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        padding: 4px 14px !important;
        border-radius: 999px !important;
        border: 1px solid var(--ud-gray-200) !important;
        float: none !important;
        margin-bottom: 12px !important;
        gap: 0 !important;
    }
}

/* ── Section Title ── */
#uploaddocument .form-heading {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: var(--ud-maroon) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    padding-bottom: 8px !important;
    margin-bottom: 4px !important;
    border-bottom: none !important;
    position: relative !important;
    display: inline-block !important;
}
#uploaddocument .form-heading::after {
    content: '' !important;
    display: block !important;
    width: 40px !important;
    height: 3px !important;
    background: var(--ud-maroon) !important;
    border-radius: 2px !important;
    margin-top: 6px !important;
    position: static !important;
    transform: none !important;
    font-family: inherit !important;
    color: inherit !important;
}
/* Subtitle injected below form-heading */
#uploaddocument .ud-section-subtitle {
    font-size: 13px;
    color: var(--ud-gray-500);
    margin-bottom: 16px;
    margin-top: 8px;
}

/* ── Info Tip (replaces harsh yellow warning) ── */
#uploaddocument .alert-warning {
    background: var(--ud-amber-soft) !important;
    border: none !important;
    border-left: 4px solid var(--ud-amber) !important;
    border-radius: 8px !important;
    color: #92400E !important;
    font-size: 13px !important;
    padding: 12px 16px !important;
    margin-bottom: 16px !important;
}
#uploaddocument .alert-warning .close,
#uploaddocument .alert-warning [data-bs-dismiss="alert"] {
    display: none !important;
}

/* ── Upload Card ── */
#uploaddocument .utab .card {
    border-radius: 12px !important;
    border: 1px solid var(--ud-gray-200) !important;
    background: #fff !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06) !important;
    padding: 24px !important;
}

/* ══════════════════════════════════════════════════
   DROPZONE (Upload Area)
   ══════════════════════════════════════════════════ */

/* Desktop dropzone container */
#uploaddocument .renewaldesktop .select-opn {
    border: 2px dashed var(--ud-gray-300) !important;
    border-radius: 12px !important;
    background: var(--ud-gray-50) !important;
    padding: 24px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    min-height: 200px !important;
    justify-content: center !important;
    transition: border-color 0.2s ease, background 0.2s ease !important;
    cursor: pointer !important;
    margin-bottom: 24px !important;
}
#uploaddocument .renewaldesktop [id^="Grid_"]:not(:empty) {
    margin-top: 8px !important;
}
#uploaddocument .renewaldesktop .select-opn:hover,
#uploaddocument .renewaldesktop .select-opn.is-dragover {
    border-color: var(--ud-maroon) !important;
    border-style: solid !important;
    background: var(--ud-maroon-soft) !important;
}

/* Injected dropzone label */
#uploaddocument .ud-dz-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 12px;
    pointer-events: none;
}
#uploaddocument .ud-dz-label > i {
    font-size: 48px;
    color: var(--ud-gray-400);
    margin-bottom: 12px;
    line-height: 1;
    transition: color 0.2s;
}
#uploaddocument .select-opn:hover .ud-dz-label > i,
#uploaddocument .select-opn.is-dragover .ud-dz-label > i {
    color: var(--ud-maroon);
}
#uploaddocument .ud-dz-text {
    font-size: 14px;
    font-weight: 500;
    color: var(--ud-gray-700);
    margin-bottom: 4px;
}
#uploaddocument .ud-dz-touch {
    display: none;
    font-size: 14px;
    font-weight: 500;
    color: var(--ud-gray-700);
    margin-bottom: 4px;
}
#uploaddocument .ud-dz-or {
    font-size: 12px;
    color: var(--ud-gray-400);
}
#uploaddocument .ud-dz-hint {
    font-size: 12px;
    color: var(--ud-gray-400);
    margin-top: 12px;
    pointer-events: none;
}

/* Browse button inside dropzone — outlined style */
#uploaddocument .renewaldesktop .select-opn .uploading-opn {
    display: inline-flex !important;
    flex-direction: row !important;
    gap: 0 !important;
    width: auto !important;
    align-items: center !important;
}
#uploaddocument .renewaldesktop .select-opn .fileUpload {
    background: transparent !important;
    border: 2px solid var(--ud-maroon) !important;
    border-radius: 8px !important;
    color: var(--ud-maroon) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 8px 24px !important;
    width: auto !important;
    flex: none !important;
    min-width: unset !important;
    position: relative !important;
    overflow: hidden !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}
#uploaddocument .renewaldesktop .select-opn .fileUpload:hover {
    background: var(--ud-maroon) !important;
    color: #fff !important;
    transform: none !important;
    box-shadow: none !important;
}
#uploaddocument .uploading-opn .fileUpload input.upload {
    position: absolute !important;
    inset: 0 !important;
    opacity: 0 !important;
    cursor: pointer !important;
    width: 100% !important;
    height: 100% !important;
    font-size: 0 !important;
}

/* Upload button: always visible alongside Browse (was hidden-until-.has-file —
   that JS-toggled visibility was intermittently failing on BMEvaluation /
   BMDocumentUpload because of duplicate #uploaddocument IDs from nested
   partial render. User-reported: "sometimes upload button is missing".
   Server-side validation already alerts "Please select a file before uploading"
   if Upload is clicked without a selection, so always-on is safe.) */
#uploaddocument .renewaldesktop .select-opn .uploading-opn > div:not(.fileUpload) {
    display: block !important;
    margin-left: 8px !important;
    /* Override Bootstrap .col-3 { flex: 0 0 auto; width: 25% } — inside an
       inline-flex parent with width:auto, the 25% resolves to 0px and the
       Upload button collapses to 0×0 (root cause of "Upload button randomly
       hiding"). Force content-width so it never shrinks away. */
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: unset !important;
    flex-shrink: 0 !important;
}
#uploaddocument .renewaldesktop .select-opn .uploading-opn > div:not(.fileUpload) .form-button,
#uploaddocument .renewaldesktop .select-opn .uploading-opn > div:not(.fileUpload) .form-button .btn {
    width: auto !important;
    min-width: 90px !important;
    flex: 0 0 auto !important;
}
/* BMEvaluation embeds _UploadDocument inside its own div#uploaddocument.bme-tab.
   The partial's root is also div#uploaddocument.tab. When BMEvaluation's outer
   bme-tab becomes .active, the inner .tab still has display:none from the
   global ".tab { display: none }" rule unless JS specifically adds .active to it.
   Force the inner .tab visible whenever its bme-tab parent is active so the
   entire upload section never gets stuck hidden. */
.bme-tab.active > .tab,
.bme-tab.Liuploaddocument.active > .tab.Liuploaddocument {
    display: block !important;
}
/* When file selected, give the Upload button a slightly emphasised treatment. */
#uploaddocument .renewaldesktop .select-opn.has-file .uploading-opn {
    flex-direction: row !important;
    align-items: center !important;
    width: auto !important;
}
#uploaddocument .renewaldesktop .select-opn.has-file .uploading-opn > div:not(.fileUpload) {
    display: block !important;
    margin-left: 8px !important;
}
#uploaddocument .renewaldesktop .select-opn.has-file .form-button .btn {
    background: var(--ud-maroon) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 10px 32px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}
#uploaddocument .renewaldesktop .select-opn.has-file .form-button .btn:hover {
    box-shadow: 0 4px 12px rgba(107,27,46,0.3) !important;
}

/* File name display */
#uploaddocument .file-name-display {
    font-size: 13px !important;
    color: var(--ud-gray-900) !important;
    font-weight: 500 !important;
    margin-top: 8px !important;
    padding: 8px 16px !important;
    background: #fff !important;
    border: 1px solid var(--ud-gray-200) !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* ── Document Grid Table ── */
#uploaddocument .document-upload table,
#uploaddocument .re_table table,
#uploaddocument .r_table table {
    border-radius: 8px !important;
    overflow: hidden !important;
    border: 1px solid var(--ud-gray-200) !important;
    width: 100% !important;
}
#uploaddocument .document-upload table th,
#uploaddocument .re_table table th,
#uploaddocument .r_table table th {
    background: var(--ud-gray-50) !important;
    color: var(--ud-gray-500) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 10px 14px !important;
    border-bottom: 1px solid var(--ud-gray-200) !important;
}
#uploaddocument .document-upload table td,
#uploaddocument .re_table table td,
#uploaddocument .r_table table td {
    font-size: 13px !important;
    padding: 10px 14px !important;
    color: var(--ud-gray-700) !important;
    border-bottom: 1px solid var(--ud-gray-100) !important;
    vertical-align: middle !important;
}
#uploaddocument table tr:hover td {
    background: var(--ud-gray-50) !important;
}

/* ══════════════════════════════════════════════════
   MOBILE ACCORDION REDESIGN
   ══════════════════════════════════════════════════ */

/* Mobile progress header */
#uploaddocument .ud-mobile-progress {
    padding: 0 0 12px;
}

/* Accordion container — one unified card, no gaps */
#uploaddocument .renewalmobilesec #accordion {
    border-radius: 12px !important;
    border: 1px solid var(--ud-gray-200) !important;
    overflow: hidden !important;
    background: #fff !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06) !important;
}
#uploaddocument .renewalmobilesec #accordion > .card {
    border: none !important;
    border-radius: 0 !important;
    border-bottom: 1px solid var(--ud-gray-200) !important;
    margin: 0 !important;
    box-shadow: none !important;
    background: #fff !important;
}
#uploaddocument .renewalmobilesec #accordion > .card:last-child {
    border-bottom: none !important;
}

/* Mobile case number card (first card without an id) */
#uploaddocument .renewalmobilesec #accordion > .card:not([id]) {
    padding: 8px 16px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--ud-maroon) !important;
    background: var(--ud-gray-100) !important;
    text-align: right !important;
    border-radius: 0 !important;
}

/* Card header (accordion trigger) */
#uploaddocument .renewalmobilesec .card-header {
    background: #fff !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 14px 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    cursor: pointer !important;
    min-height: 56px !important;
    transition: background 0.15s ease !important;
    border-left: 3px solid transparent !important;
}
#uploaddocument .renewalmobilesec .card-header:hover {
    background: var(--ud-gray-50) !important;
}
#uploaddocument .renewalmobilesec .card-header strong {
    color: var(--ud-gray-700) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    flex: 1 !important;
    line-height: 1.4 !important;
    word-break: break-word !important;
}

/* Hide old float spacers */
#uploaddocument .renewalmobilesec .card-header a[style*="float"] {
    display: none !important;
}

/* Plus/chevron icon */
#uploaddocument .renewalmobilesec .card-header > .bi-plus-lg {
    transition: transform 0.2s ease !important;
    color: var(--ud-gray-400) !important;
    font-size: 16px !important;
    flex-shrink: 0 !important;
}

/* Expanded state */
#uploaddocument .renewalmobilesec .card-header.ud-expanded {
    background: var(--ud-maroon-soft) !important;
    border-left: 3px solid var(--ud-maroon) !important;
}
#uploaddocument .renewalmobilesec .card-header.ud-expanded strong {
    color: var(--ud-maroon) !important;
    font-weight: 500 !important;
}
#uploaddocument .renewalmobilesec .card-header.ud-expanded > .bi-plus-lg {
    transform: rotate(45deg) !important;
    color: var(--ud-maroon) !important;
}

/* Collapse body */
#uploaddocument .renewalmobilesec .card-collapse {
    transition: height 0.2s ease-out !important;
}
#uploaddocument .renewalmobilesec .card-body {
    padding: 16px !important;
    background: #fff !important;
}
#uploaddocument .renewalmobilesec .card-body .card {
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}
#uploaddocument .renewalmobilesec .card-body .row {
    margin: 0 !important;
}

/* Mobile warning banners */
#uploaddocument .renewalmobilesec .alert-warning {
    background: var(--ud-amber-soft) !important;
    border: none !important;
    border-left: 4px solid var(--ud-amber) !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    padding: 10px 14px !important;
}
#uploaddocument .renewalmobilesec .alert-warning .close {
    display: none !important;
}

/* Mobile upload area — keep Browse + Upload side by side */
#uploaddocument .renewalmobilesec .uploading-opn {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
}
#uploaddocument .renewalmobilesec .fileUpload {
    background: transparent !important;
    border: 2px solid var(--ud-maroon) !important;
    border-radius: 8px !important;
    color: var(--ud-maroon) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 10px 16px !important;
    width: 100% !important;
    text-align: center !important;
    position: relative !important;
    overflow: hidden !important;
}
#uploaddocument .renewalmobilesec .fileUpload:hover {
    background: var(--ud-maroon) !important;
    color: #fff !important;
}
#uploaddocument .renewalmobilesec .form-button .btn {
    background: var(--ud-maroon) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 10px 24px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    width: 100% !important;
}
#uploaddocument .renewalmobilesec .form-button .btn:hover {
    box-shadow: 0 4px 12px rgba(107,27,46,0.3) !important;
}

/* Mobile dropzone */
#uploaddocument .renewalmobilesec .ud-dz-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 12px;
}
#uploaddocument .renewalmobilesec .ud-dz-label > i {
    font-size: 36px;
    color: var(--ud-gray-400);
    margin-bottom: 8px;
}
#uploaddocument .renewalmobilesec .select-opn {
    border: 2px dashed var(--ud-gray-300) !important;
    border-radius: 12px !important;
    padding: 16px !important;
    background: var(--ud-gray-50) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    min-height: 140px !important;
    justify-content: center !important;
}

/* ══════════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════════ */

#uploaddocument .form-button .btn-primary,
#uploaddocument .form-button .btn {
    background: var(--ud-maroon) !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 10px 24px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    color: #fff !important;
    transition: all 0.2s !important;
}
#uploaddocument .form-button .btn-primary:hover,
#uploaddocument .form-button .btn:hover {
    box-shadow: 0 4px 12px rgba(107,27,46,0.3) !important;
    transform: none !important;
}

/* Verification checkboxes */
#uploaddocument #dvVerify .alert-warning,
#uploaddocument #dvCandidateConfirm .alert-warning,
#uploaddocument #mdvCandidateConfirm .alert-warning {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
}

/* Form Controls */
#uploaddocument .form-select {
    border-radius: 8px !important;
    border: 1px solid var(--ud-gray-200) !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
    color: var(--ud-gray-700) !important;
    padding-right: 2.25rem !important;
}

/* ══════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════ */

@media (hover: none) and (pointer: coarse) {
    #uploaddocument .ud-dz-text { display: none !important; }
    #uploaddocument .ud-dz-or { display: none !important; }
    #uploaddocument .ud-dz-touch { display: block !important; }
}
@media (max-width: 479.98px) {
    #uploaddocument .ud-dz-wrap .fileUpload { width: 100% !important; }
    #uploaddocument .ud-upload-btn { width: 100% !important; }
}
@media (max-width: 767.98px) {
    #uploaddocument .form-heading { font-size: 18px !important; }
    #uploaddocument #dvUploadCaseno { float: none !important; }
    #uploaddocument .renewalmobilesec .card-header { min-height: 48px !important; }
}
@media (min-width: 768px) {
    #uploaddocument .renewalmobilesec .ud-dz-touch { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════════
   UI-015 fix — global focus ring for ALL form controls
   Earlier rules targeted only .form-control class; plain <input>/<select>
   without the class (e.g. MyCandidateList ddlsearch/txtsearch) had
   outline:none from the reset and NO replacement ring → invisible focus.
   This broadens the focus ring to every interactive form element.
   ══════════════════════════════════════════════════════════════════ */
input:focus:not([type="hidden"]):not([type="radio"]):not([type="checkbox"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
select:focus,
textarea:focus {
    border-color: #8B1A1A !important;
    box-shadow: 0 0 0 3px rgba(139, 26, 26, 0.15) !important;
    outline: none !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* UI-014 fix — dashboard tile :focus ring uses H2J maroon, not navy
   Previously the tile inherited :focus outline rgb(30,41,59) (BS5 --bs-dark).
   Keyboard users now see a maroon 2px ring matching the brand. */
a.dash-tile:focus,
a.dash-tile:focus-visible {
    outline: 2px solid #8B1A1A !important;
    outline-offset: 2px !important;
}

/* UAT-01 fix — From/To Year+Month pair renders side-by-side on desktop.
   Defect: two `.col-6 col-sm-3` children nested inside `.mb-3` lacked a `.row`
   flex context, so Year stacked above Month on desktop. Adding `ym-pair`
   restores the horizontal pairing at ≥576px without disturbing the mobile
   single-column stack. Scope is class-only — no global selector changes. */
@media (min-width: 576.01px) {
    .ym-pair {
        display: flex;
        gap: 10px;
        align-items: flex-end;
    }
    .ym-pair > [class*="col-"] {
        flex: 1 1 0;
        max-width: none;
    }
}

/* UAT-02 / UAT-04 fix — Borderless row wrapping a standalone "Add" button.
   Defect: `.card` around a single `<button>Add</button>` inherits the full
   Bootstrap card chrome (border + background + shadow) making the Add row
   look like a detached bordered strip. Swap the Bootstrap card styling off
   for this specific wrapper only. Scope is class-only, does not affect the
   legitimate form footer `.card` (which still wraps Previous/Proceed). */
.joining-add-row {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 8px 0 !important;
    margin: 0 !important;
}

/* Joining flow: Previous/Proceed footer card sits at the bottom of every step
   (PartTime + FullTime: JoiningForm, CandidateFamilyDetails, EducationDetails,
   PFFormDetails, NomineeBankDetails). Default Bootstrap .card chrome added 20px
   top + 24px side padding plus 16px margin-bottom on TOP of whatever row preceded
   it (form fields or family/grid table) — leaving a visibly large empty band
   between the content and the Previous/Proceed buttons. Compress padding and
   pull the card up flush with the previous content via :has() — a plain
   .card { padding: ... } would over-reach since the same class wraps real
   content cards on these pages. */
/* :not(.joining-add-row) — inner Add-button card on CandidateFamilyDetails /
   EducationDetails / NomineeDetails / PreviousEmploymentDetails uses
   <div class="card joining-add-row"> nested inside the outer form .card.
   The `.joining-add-row { border: 0 !important; ... }` rule above is meant
   to strip its chrome, but :has() has higher specificity (4 classes vs 1)
   and would re-add the border, causing a visible double-border overlap with
   the outer card. Excluding .joining-add-row keeps the inner-card chrome
   suppressed while still rendering the Previous/Proceed footer card. */
.card:not(.joining-add-row):has(> .form-button.prev-next-link.clearfix),
.card:not(.joining-add-row):has(> .form-button.prev-next-link) {
    padding: 12px 20px !important;
    margin-top: -8px !important;
    margin-bottom: 0 !important;
    border: 1px solid #E2E8F0 !important;
    background: #fff !important;
}

/* H2J-PROD-DEFECT-2026-05-05 — Joining-flow grid pages: explicit gaps between
   [Add row] -> [Grid table] -> [Prev/Proceed footer] inside the outer form card.
   Affected pages (FullTime + PartTime): CandidateFamilyDetails, EducationDetails,
   NomineeDetails, PreviousEmploymentDetails, OtherDetails. Without these
   overrides, `joining-add-row { margin: 0 }` and the global footer-card
   `:has() { margin-top: -8px }` rule above caused the three sections to sit
   flush against each other. Tableless pages (JoiningForm, PFFormDetails,
   NomineeBankDetails) are unaffected because the override selector requires
   a `.row:has(.document-upload.r_table)` or `#dvGridDetails` adjacent sibling. */

/* (1) Add-row card -- bottom gap so the grid table doesn't touch the Add button.
   joining-add-row: borderless wrapper used by 4 of the 5 pages.
   #dvbtnsection.card: bordered wrapper used only on OtherDetails. */
.joining-add-row {
    margin-bottom: 14px !important;
}
#dvbtnsection.card {
    margin-bottom: 14px !important;
}

/* (2) Grid table row -- bottom gap so the Prev/Proceed footer doesn't touch it.
   Two selectors cover the wrapper variants: anonymous `.row` (4 pages) and
   `#dvGridDetails` (OtherDetails only). */
.card > .row:has(.document-upload.r_table) {
    margin-bottom: 14px;
}
#dvGridDetails {
    margin-bottom: 14px;
}

/* (3) Footer Prev/Proceed card immediately following a grid table -- cancel
   the global `margin-top: -8px` from the `:has()` block above so the 14px
   bottom-margin from (2) is honored instead of being eaten by the negative. */
.card > .row:has(.document-upload.r_table) + .card:has(> .form-button.prev-next-link),
.card > .row:has(.document-upload.r_table) + .card:has(> .form-button.prev-next-link.clearfix),
#dvGridDetails + .card:has(> .form-button.prev-next-link),
#dvGridDetails + .card:has(> .form-button.prev-next-link.clearfix) {
    margin-top: 0 !important;
}

/* UAT-03 / UAT-06 fix — compact the Joining case-info strip on desktop.
   Defect: the Case-No bar (.top-filtersection) used the default
   space-4 padding + space-4 margin-bottom, leaving a thick horizontal
   strip and a 16px gap before the JoiningMenu + form content. Combined
   with `.mb-3` on the content wrapper that stacks another 16px below,
   the desktop layout reads as wasted whitespace.
   The scoped class `jf-compact` is applied only to `.top-filtersection`
   inside `_JoiningMenu.cshtml` and `_JoiningMenuPartTime.cshtml`, so no
   other page's filter strip is affected. Mobile (<992px) is untouched
   because larger padding keeps the Case-No strip tappable. */
@media (min-width: 992px) {
    .top-filtersection.jf-compact {
        padding: 4px 16px !important;
        margin-bottom: 10px !important;
    }
    .top-filtersection.jf-compact .py-2 {
        padding-top: 2px !important;
        padding-bottom: 2px !important;
    }
    .top-filtersection.jf-compact + .mb-3,
    .top-filtersection.jf-compact ~ .mb-3 {
        margin-bottom: 8px !important;
    }
}

/* UI-wide tab-tile stretch — Joining Form / Documents Upload (and the
   sibling 2-tile strips on Evaluation/Hiring/Joining flows) were pinned
   to content-width, wasting the right side of the viewport. Let each
   <li> expand equally with flex:1 so the pair fills the card. Mobile
   (<576px) stacks to one-tile-per-row so tap targets stay touchable. */
.bi-tab-nav .navtab-links {
    width: 100% !important;
    flex-wrap: wrap;
}
.bi-tab-nav .navtab-links > li {
    flex: 1 1 0 !important;
    min-width: 180px;
}
.bi-tab-nav .navtab-links > li > a {
    width: 100% !important;
    justify-content: center;
    padding: 14px 20px !important;
}
@media (max-width: 575.98px) {
    .bi-tab-nav .navtab-links {
        flex-direction: column;
        gap: 8px !important;
    }
    .bi-tab-nav .navtab-links > li {
        width: 100%;
        min-width: 0;
    }
}

/* Tighten the tile-strip card so the top nav pair hugs the viewport
   on desktop. Mobile retains native padding for touch targets. */
@media (min-width: 992px) {
    .bi-tab-nav {
        padding: 0 !important;
    }
    .nav-tabsection.bi-tab-nav {
        padding: 0 !important;
    }
    .card > .card-body.p-2:has(> .bi-tab-nav) {
        padding: 8px !important;
    }
}

/* UI-wide label polish — dark readable labels + bold red asterisk.
   Most form views have an inline `<style>` block that sets
   `label { color:#64748B }` (grey) which makes every label look disabled
   ("Education Qualification Details" reported on 2026-04-20). The
   `body label` selector (specificity 0,0,0,2) beats the bare `label`
   rule (0,0,0,1) without touching 146 inline blocks individually.
   `.req-star` is used by the global auto-wrapper in _Layout.cshtml that
   converts hardcoded trailing `*` characters into a visible red marker. */
body label {
    color: #1E293B !important;
}
body label.required::after {
    content: " *" !important;
    color: #DC2626 !important;
    font-size: 14px;
    font-weight: 700;
    margin-left: 3px;
}
body .req-star {
    color: #DC2626 !important;
    font-weight: 700;
    font-size: 14px;
    margin-left: 3px;
}

/* UAT-05 / UAT-07 fix — calendar-icon breathing room on date inputs.
   Defect: the legacy `.calendar` class in customstyles.css positions the
   calendar.png at `center right` with only 24px right-padding, so the icon
   touches the input border and typed text crowds the icon. This selector
   chain `.form-control.calendar` matches the exact view markup
   `@class = "form-control calendar"` used across Joining + JoiningPartTime
   date pickers, so one rule covers every affected date input without
   touching other `.calendar` consumers (e.g. filter-friz blocks). */
.form-control.calendar {
    background-position: right 12px center !important;
    background-size: 16px 16px !important;
    padding-right: 40px !important;
}

/* ===============================================================
   Joining flow redesign (2026-04-21) — activates on every page
   that renders _JoiningTabs.cshtml (which adds `joining-flow`
   on <body>). Scoped via `.joining-segmented-tabs`, `.jm-*`, and
   `body.joining-flow` so nothing leaks to non-joining pages.
   =============================================================== */
:root {
    --jf-maroon: #8B1A1A;
    --jf-maroon-soft: #FDF2F4;
    --jf-border: #E5E7EB;
    --jf-divider: #F3F4F6;
    --jf-hover: #F9FAFB;
    --jf-muted: #6B7280;
    --jf-green: #15803D;
    --jf-amber: #D97706;
    --jf-amber-soft: #FEF3C7;
    --jf-amber-ink: #78350F;
    --jf-chip: #F3F4F6;
}

/* -- Horizontal gap fix: the max-width set on .desk-stick in
      responsive.css (370px at >=760px, 304px at <=1024px) caps the
      sidebar card below its column width, leaving ~100-150px of
      dead gray between sidebar and form on desktop. Override so
      the card fills its Bootstrap column. Mobile rule at <768px
      in responsive.css hides .desk-stick entirely - unchanged. */
@media (min-width: 768px) {
    body.joining-flow .desk-stick,
    body.joining-flow .r-user-details {
        max-width: none !important;
        width: 100% !important;
    }
}

/* ==== Segmented pill tabs (replaces old 120px tile cards) ==== */
.joining-segmented-tabs-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 8px 0 16px 0;
    padding: 0;
    border: 0;
    background: transparent;
}
.joining-segmented-tabs {
    list-style: none;
    padding: 4px;
    margin: 0;
    display: inline-flex;
    background: #fff;
    border: 1px solid var(--jf-border);
    border-radius: 999px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06);
    max-width: 100%;
}
.joining-segmented-tabs > li {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 0 0 auto;
    min-width: 0;
    background: transparent !important;
    border: 0 !important;
}
.joining-segmented-tabs > li > a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px;
    padding: 8px 20px !important;
    min-width: 180px;
    min-height: 40px;
    border-radius: 999px;
    text-decoration: none !important;
    color: var(--jf-muted) !important;
    background: transparent;
    transition: background 150ms ease, color 150ms ease;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    justify-content: center;
    cursor: pointer;
    border: 0 !important;
}
.joining-segmented-tabs > li > a:hover { background: var(--jf-hover); color: var(--jf-muted) !important; }
.joining-segmented-tabs > li.active > a,
.joining-segmented-tabs > li.active > a:hover {
    background: var(--jf-maroon-soft);
    color: var(--jf-maroon) !important;
}
.joining-segmented-tabs .seg-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
    border: 1.5px solid #D1D5DB;
    background: transparent;
    color: var(--jf-muted);
    line-height: 1;
    transition: all 150ms ease;
}
.joining-segmented-tabs > li.active .seg-circle {
    background: var(--jf-maroon);
    border-color: var(--jf-maroon);
    color: #fff;
}
.joining-segmented-tabs > li.done .seg-circle {
    background: var(--jf-green);
    border-color: var(--jf-green);
    color: #fff;
}
.joining-segmented-tabs .seg-label {
    font-size: 14px;
    font-weight: 500;
    color: inherit;
    line-height: 1.3;
    text-transform: none;
    letter-spacing: 0;
}

@media (max-width: 767.98px) {
    .joining-segmented-tabs-wrap { padding: 0 12px; justify-content: stretch; }
    .joining-segmented-tabs { width: 100%; display: flex; padding: 4px; }
    .joining-segmented-tabs > li { flex: 1 1 0; min-width: 0; }
    .joining-segmented-tabs > li > a { min-width: 0; min-height: 36px; padding: 6px 12px !important; gap: 8px; font-size: 13px; }
    .joining-segmented-tabs .seg-circle { width: 20px; height: 20px; font-size: 11px; }
    .joining-segmented-tabs .seg-label { font-size: 13px; white-space: normal; line-height: 1.2; text-align: left; }
}

/* ==== Case-number pill (overrides the old full-width bordered strip) ==== */
body.joining-flow .top-filtersection.jf-compact {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 0 16px 0 !important;
    width: 100%;
}
body.joining-flow .top-filtersection.jf-compact .container-fluid {
    padding: 0 !important;
    display: flex;
    justify-content: flex-start;
}
@media (min-width: 768px) {
    body.joining-flow .top-filtersection.jf-compact .container-fluid { justify-content: flex-end; }
}
body.joining-flow .top-filtersection.jf-compact .d-flex {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: var(--jf-chip) !important;
    border: 0 !important;
    border-radius: 999px !important;
    padding: 6px 14px !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: var(--jf-muted) !important;
    flex-wrap: nowrap !important;
    margin: 0 !important;
}
body.joining-flow .top-filtersection.jf-compact .d-flex > span {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    color: var(--jf-maroon);
    font-weight: 500;
}
body.joining-flow .top-filtersection.jf-compact .d-flex > span strong { color: var(--jf-muted); font-weight: 400; }
body.joining-flow .top-filtersection.jf-compact .d-flex i {
    font-size: 14px !important;
    color: var(--jf-muted) !important;
}

/* ==== Sidebar card redesign (shared partial _JoiningMenu[PartTime]) ==== */
body.joining-flow .left-sub-nav-section {
    background: #fff !important;
    border: 1px solid var(--jf-border) !important;
    border-radius: 12px !important;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06);
}
body.joining-flow .left-sub-nav-section .form-heading {
    background: #fff !important;
    background-image: none !important;
    color: var(--jf-muted) !important;
    padding: 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    border-bottom: 1px solid var(--jf-border);
    margin: 0 !important;
    display: block !important;
    line-height: 1.4;
}
body.joining-flow .left-sub-nav-section .form-heading hr { display: none !important; }
body.joining-flow .left-sub-nav-section .form-heading i {
    color: var(--jf-maroon) !important;
    font-size: 16px !important;
}
body.joining-flow .jm-counter {
    font-size: 12px;
    font-weight: 400;
    color: #9CA3AF;
    margin-top: 4px;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.3;
}
body.joining-flow .jm-progress {
    height: 4px;
    background: var(--jf-divider);
    border-radius: 999px;
    margin-top: 10px;
    overflow: hidden;
}
body.joining-flow .jm-progress .progress-bar {
    background: var(--jf-maroon);
    height: 100%;
    transition: width 250ms ease;
}

body.joining-flow .pdcnavsteps { padding: 0; margin: 0; list-style: none; }
body.joining-flow .pdcnavsteps > li { list-style: none; border-bottom: 1px solid var(--jf-divider); position: relative; }
body.joining-flow .pdcnavsteps > li:last-child { border-bottom: 0; }
body.joining-flow .pdcnavsteps > li > a {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px 16px !important;
    text-decoration: none !important;
    color: var(--jf-muted) !important;
    font-size: 14px !important;
    transition: background 150ms ease;
    position: relative;
    cursor: pointer;
    min-height: 56px;
    background: #fff;
    background-image: none !important;
}
body.joining-flow .pdcnavsteps > li > a:hover { background: var(--jf-hover) !important; color: var(--jf-muted) !important; }
body.joining-flow .pdcnavsteps > li > a b { font-weight: 400 !important; color: inherit !important; }
body.joining-flow .pdcnavsteps .ord-no {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    flex-shrink: 0;
    border: 2px solid #D1D5DB !important;
    background: transparent !important;
    color: var(--jf-muted) !important;
    line-height: 1 !important;
}
/* Completed - green filled circle with white check; hide inner number */
body.joining-flow .pdcnavsteps > li > a.done { color: #374151 !important; }
body.joining-flow .pdcnavsteps > li > a.done b { color: #374151 !important; font-weight: 400 !important; }
body.joining-flow .pdcnavsteps > li > a.done .ord-no {
    background: var(--jf-green) !important;
    border-color: var(--jf-green) !important;
    color: transparent !important;
    position: relative !important;
}
body.joining-flow .pdcnavsteps > li > a.done .ord-no::before {
    content: "\F26A";
    font-family: "bootstrap-icons";
    color: #fff;
    font-size: 14px;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
/* Trailing status icon — replicates OLD H2J (Alert.png / GrrenTick.png behaviour).
   OLD showed an amber warning triangle on every not-yet-completed step and a
   green tick once done. Here the DEFAULT state of every step (before AND after the
   GetJoiningCount AJAX runs) is the amber triangle, so steps that never receive an
   .incomplete class from the JS (e.g. lnkPrevEmp / lnkOther) still show it — matching
   OLD, where the triangle is the resting state of a pending step. A completed step
   (.done) is indicated by the green numbered circle-check rendered above, so its
   trailing triangle is suppressed. NotReaded / CFRRaised keep no trailing glyph. */
body.joining-flow .pdcnavsteps > li > a::after {
    content: "\F33A" !important;              /* bi-exclamation-triangle-fill */
    font-family: "bootstrap-icons" !important;
    display: inline-block !important;
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 15px;
    line-height: 1;
    color: #D97706 !important;                /* amber (matches OLD Alert.png) */
}
body.joining-flow .pdcnavsteps > li > a#lnkPrevEmp::after,
body.joining-flow .pdcnavsteps > li > a#lnkOther::after {
    content: none !important;
    display: none !important;
}
body.joining-flow .pdcnavsteps > li > a.incomplete::after {
    content: "\F33A" !important;              /* explicit: pending step → triangle */
    display: inline-block !important;
    color: #D97706 !important;
}
body.joining-flow .pdcnavsteps > li > a.done::after,
body.joining-flow .pdcnavsteps > li > a.NotReaded::after,
body.joining-flow .pdcnavsteps > li > a.CFRRaised::after { content: "" !important; display: none !important; }
/* Pending (incomplete) - hollow gray numbered circle; no amber */
body.joining-flow .pdcnavsteps > li > a.incomplete .ord-no {
    background: transparent !important;
    border: 2px solid #D1D5DB !important;
    color: var(--jf-muted) !important;
}
body.joining-flow .pdcnavsteps > li > a.incomplete { color: var(--jf-muted) !important; }
body.joining-flow .pdcnavsteps > li > a.incomplete b { color: var(--jf-muted) !important; }
/* Active = current route step (li.jf-active-step added by sidebar JS) */
body.joining-flow .pdcnavsteps > li.jf-active-step > a,
body.joining-flow .pdcnavsteps > li.jf-active-step > a:hover {
    background: var(--jf-maroon-soft) !important;
    color: var(--jf-maroon) !important;
    font-weight: 500 !important;
    border-left: 4px solid var(--jf-maroon);
    padding-left: 12px !important;
}
body.joining-flow .pdcnavsteps > li.jf-active-step > a b {
    color: var(--jf-maroon) !important;
    font-weight: 500 !important;
}
body.joining-flow .pdcnavsteps > li.jf-active-step .ord-no {
    background: var(--jf-maroon) !important;
    border-color: var(--jf-maroon) !important;
    color: #fff !important;
}
body.joining-flow .pdcnavsteps > li.jf-active-step .ord-no::before { content: none !important; }

/* ==== Section header (form-heading2) - title + accent bar ====
   Transforms the legacy pale-pink strip into a clean title with a
   40x3px maroon accent bar underneath. No subtitle - the amber
   banners inside each form already carry the instructional copy. */
body.joining-flow .form-heading2 {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-left: 0 !important;
    padding: 0 0 20px 0 !important;
    margin: 0 0 20px 0 !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    color: var(--jf-maroon) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    line-height: 1.3 !important;
    border-bottom: 1px solid var(--jf-divider) !important;
    position: relative !important;
    display: block !important;
}
body.joining-flow .form-heading2::before {
    content: "" !important;
    display: block !important;
    width: 40px;
    height: 3px;
    background: var(--jf-maroon);
    border-radius: 2px;
    position: absolute;
    left: 0;
    bottom: 6px;
}
@media (max-width: 767.98px) {
    body.joining-flow .form-heading2 { font-size: 18px !important; margin-bottom: 16px !important; }
    body.joining-flow .form-heading2::before { width: 32px; }
}

/* ==== NomineeBankDetails "Note:" banner restyle (in-place) ====
   Keep DOM position identical - just reskin. Soft amber background,
   4px amber left rail, 13px body text, no dismiss. */
body.joining-flow .alert-warning {
    background: var(--jf-amber-soft) !important;
    border: 0 !important;
    border-left: 4px solid var(--jf-amber) !important;
    border-radius: 8px !important;
    color: var(--jf-amber-ink) !important;
    padding: 12px 16px !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
}
body.joining-flow .alert-warning strong { color: var(--jf-amber-ink) !important; }