/* =========================================
   VULN-X: PROFESSIONAL CYBERSECURITY SAAS THEME
   WITH ADVANCED MOTION SYSTEM
   CRIMSON RED EDITION
   ========================================= */

/* =========================================
   1. THEME VARIABLES - CRIMSON RED
   ========================================= */
:root {
    /* -- Backgrounds - Deep Black/Gray -- */
    --bg-deep: #0B0B0B;
    --bg-darker: #000000;
    --bg-panel: #1A1A1A;
    --bg-card: #141414;
    --bg-input: #0D0D0D;
    --bg-overlay: rgba(26, 26, 26, 0.95);
    
    /* -- Accent Colors - CRIMSON RED -- */
    --accent-crimson: #38BDF8;
    --accent-crimson-dark: #0284C7;
    --primary: #38BDF8;
    --primary-hover: #7DD8FC;
    --primary-glow: rgba(56, 189, 248, 0.4);
    --primary-light: rgba(56, 189, 248, 0.15);
    
    /* -- Functional Colors -- */
    --success: #00C853;
    --warning: #FFD600;
    /* Softer alert red: pure #FF0000 is a very dark, saturated, near-blood
       red that reads as oppressive across large filled areas (stat cards,
       gradients, glows) during extended dashboard use. These are lighter
       and brighter instead - still unambiguously "red alert", just easier
       to look at. Only Bucket-A elements (destructive actions, Failed/Error
       states, Critical/High severity, form errors) use this scale; anything
       that was red without alert meaning was already moved to blue in the
       earlier SOC Blue theme pass. */
    --red-soft-bg: #3f1d1d;
    --red-soft-border: #7f2d2d;
    --red-soft-text: #f87171;
    --red-soft-fill: #ef4444;
    --danger: var(--red-soft-fill);
    --critical: var(--red-soft-fill);
    /* Shifted from #64748B: that was nearly indistinguishable from the new
       --primary brand blue (#38BDF8) - a 1.1:1 contrast ratio between them,
       i.e. visually almost the same color. Moved to a blue-GRAY instead
       (matching the Info severity color already used in the PDF report),
       so Info-severity indicators stay visually distinct from ordinary
       brand-colored UI, not just coincidentally similar shades of blue. */
    --info: #64748B;

    /* -- Risk Levels -- */
    --risk-critical: var(--red-soft-fill);
    --risk-high: var(--red-soft-text);
    --risk-medium: #FFD600;
    --risk-low: #00C853;
    --risk-info: #64748B; /* shifted along with --info above, same reason */
    
    /* -- Glassmorphism -- */
    --glass-border: rgba(56, 189, 248, 0.15);
    --glass-bg: rgba(255, 255, 255, 0.03);
    --divider: rgba(255, 255, 255, 0.06);

    /* -- Text -- */
    --text-main: #E0E0E0;
    --text-muted: #888888;
    --text-dim: #555555;
    --text-bright: #FFFFFF;

    /* -- Card/panel surface used directly (background-color: var(--primary-surface))
       across settings.php, terms.php, index.php, new-scan.php, profile.php,
       reset-password.php, and subscription.php. This variable was referenced
       in 7 files but never defined anywhere, so every one of those
       background-color declarations was silently a no-op. Aliased to the
       existing panel token rather than inventing a new value. -- */
    --primary-surface: var(--bg-panel);
    
    /* -- Typography -- */
    --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-code: 'JetBrains Mono', 'Fira Code', monospace;
    
    /* -- Layout -- */
    --sidebar-width: 260px;
    --radius: 6px;
    --radius-lg: 10px;
    --radius-xl: 16px;
    
    /* -- MOTION SYSTEM - THE MOST IMPORTANT UPGRADE -- */
    /* Global smooth transition with SaaS-grade easing */
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: 150ms var(--ease-smooth);
    --transition-normal: 250ms var(--ease-smooth);
    --transition-slow: 400ms var(--ease-smooth);
    
    /* Motion Hierarchy Levels */
    --motion-micro: 150ms var(--ease-smooth);   /* buttons, icons */
    --motion-component: 200ms var(--ease-smooth); /* cards, tables */
    --motion-page: 300ms var(--ease-smooth);    /* sections */
}

/* =========================================
   1a. ACCENT COLOR PRESETS
   Settings -> Application -> Accent Color. "blue" is the default and needs
   no override block since it already matches :root above. Each preset only
   touches the brand-accent tokens (--primary*, --accent-crimson-dark) -
   never --danger/--critical/--risk-*/--success/--warning, which must stay
   fixed severity signals regardless of a user's cosmetic choice. Red is
   deliberately NOT offered as an accent option: this app spent real effort
   ensuring red only ever means Critical/High/error, and letting users repaint
   every button/link red again would undo that invariant page by page.
   ========================================= */
[data-accent="cyan"] {
    --accent-crimson: #22D3EE;
    --accent-crimson-dark: #0891B2;
    --primary: #22D3EE;
    --primary-hover: #67E8F9;
    --primary-glow: rgba(34, 211, 238, 0.4);
    --primary-light: rgba(34, 211, 238, 0.15);
}
[data-accent="purple"] {
    --accent-crimson: #A78BFA;
    --accent-crimson-dark: #7C3AED;
    --primary: #A78BFA;
    --primary-hover: #C4B5FD;
    --primary-glow: rgba(167, 139, 250, 0.4);
    --primary-light: rgba(167, 139, 250, 0.15);
}
[data-accent="green"] {
    --accent-crimson: #34D399;
    --accent-crimson-dark: #059669;
    --primary: #34D399;
    --primary-hover: #6EE7B7;
    --primary-glow: rgba(52, 211, 153, 0.4);
    --primary-light: rgba(52, 211, 153, 0.15);
}

/* =========================================
   1b. LIGHT THEME OVERRIDES
   The Settings -> Application -> Theme "Light" option saved correctly and
   set data-bs-theme="light" on <html> (that part always worked), but there
   was NOT A SINGLE [data-bs-theme="light"] rule anywhere in this stylesheet
   - every color in the app was a hardcoded-dark value in :root with no
   light counterpart, so switching the attribute had nothing to respond to
   and the page stayed visually dark. These overrides redefine the core
   structural tokens (backgrounds, text, borders, glass) for light mode;
   severity/risk colors (--risk-critical etc.) intentionally stay the same
   in both themes, since a Critical finding should always read as red.
   ========================================= */
:root[data-bs-theme="light"] {
    --bg-deep: #F4F5F7;
    --bg-darker: #E9EBEF;
    --bg-panel: #FFFFFF;
    --bg-card: #FFFFFF;
    --bg-input: #FFFFFF;
    --bg-overlay: rgba(255, 255, 255, 0.95);

    --primary-light: rgba(56, 189, 248, 0.08);

    --glass-border: rgba(0, 0, 0, 0.08);
    --glass-bg: rgba(0, 0, 0, 0.02);
    --divider: rgba(0, 0, 0, 0.08);

    --text-main: #1F2328;
    --text-muted: #5B6270;
    --text-dim: #8A909C;
    --text-bright: #000000;
}

:root[data-bs-theme="light"] body {
    background: linear-gradient(180deg, #FFFFFF 0%, #F4F5F7 50%, #EEF0F3 100%);
    background-attachment: fixed;
    background-size: 400% 400%;
}

:root[data-bs-theme="light"] body::before {
    background:
        radial-gradient(ellipse at 10% 20%, rgba(56, 189, 248, 0.05) 0%, transparent 50%),
        radial-gradient(ellipse at 90% 80%, rgba(2, 132, 199, 0.03) 0%, transparent 50%);
}

/* =========================================
   2. KEYFRAME ANIMATIONS - LAYERED MOTION
   ========================================= */
/* Page Motion - Sections fade + slide */
@keyframes fadeInUp {
    from { 
        opacity: 0; 
        transform: translateY(12px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

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

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

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

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

/* Micro Motion - Buttons, Icons */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* Status indicator with glow */
@keyframes signalPulse {
    0%, 100% { 
        opacity: 1; 
        box-shadow: 0 0 6px rgba(56, 189, 248, 0.4); 
        transform: scale(1);
    }
    50% { 
        opacity: 0.6; 
        box-shadow: 0 0 12px rgba(56, 189, 248, 0.6); 
        transform: scale(1.3);
    }
}

/* Circular progress */
@keyframes drawCircle {
    from { stroke-dashoffset: 157; }
    to { stroke-dashoffset: var(--progress-offset); }
}

/* Card glow effect */
@keyframes glow {
    0%, 100% { box-shadow: 0 0 5px var(--primary-glow); }
    50% { box-shadow: 0 0 15px var(--primary-glow), 0 0 25px var(--primary-glow); }
}

/* Dedicated red glow for .risk-critical below - kept separate from the
   shared `glow` keyframe above (which now pulses the SOC Blue brand color
   via --primary-glow) so a Critical severity badge's pulse stays red. */
@keyframes critical-glow {
    0%, 100% { box-shadow: 0 0 5px rgba(239, 68, 68, 0.4); }
    50% { box-shadow: 0 0 15px rgba(239, 68, 68, 0.4), 0 0 25px rgba(239, 68, 68, 0.4); }
}

/* Shimmer effect for loading */
@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Rotate for spinners */
@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Border glow animation */
@keyframes borderGlow {
    0%, 100% { border-color: rgba(56, 189, 248, 0.15); }
    50% { border-color: rgba(56, 189, 248, 0.4); }
}

/* ====== SCAN ANIMATIONS (VERY IMPORTANT) ====== */
/* Scanning line effect - horizontal line moving top → bottom */
@keyframes scanLine {
    0% { 
        transform: translateY(-100%); 
        opacity: 0.2; 
    }
    50% { 
        opacity: 0.8; 
    }
    100% { 
        transform: translateY(100%); 
        opacity: 0.2; 
    }
}

/* Progress bar shimmer - gradient moving left → right */
@keyframes progressShimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* ====== BACKGROUND DEPTH ANIMATION (IMPORTANT) ====== */
/* Slow gradient drift - background shifts every 8-12s */
@keyframes gradientDrift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Subtle grid motion */
@keyframes gridMove {
    0% { transform: translate(0, 0); }
    100% { transform: translate(50px, 50px); }
}

/* =========================================
   3. BASE STYLES WITH MOTION
   ========================================= */
* {
    /* Global smooth transition */
    transition: 
        background-color var(--transition-fast), 
        border-color var(--transition-fast), 
        box-shadow var(--transition-fast),
        transform var(--transition-normal),
        opacity var(--transition-fast);
}

html {
    scroll-behavior: smooth;
}

body {
    background: linear-gradient(180deg, #000000 0%, #0B0B0B 50%, #050505 100%);
    background-attachment: fixed;
    background-size: 400% 400%;
    animation: gradientDrift 12s ease infinite;
    color: var(--text-main);
    font-family: var(--font-ui);
    font-size: 14px;
    line-height: 1.6;
    letter-spacing: 0.01em;
    overflow-x: hidden;
    min-height: 100vh;
}

/* Subtle grid overlay with motion */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(ellipse at 10% 20%, rgba(56, 189, 248, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 90% 80%, rgba(2, 132, 199, 0.04) 0%, transparent 50%);
    pointer-events: none;
    z-index: -1;
    animation: gradientDrift 10s ease infinite;
}

/* Grid pattern with subtle red tint */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        linear-gradient(rgba(56, 189, 248, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(56, 189, 248, 0.04) 1px, transparent 1px);
    background-size: 50px 50px;
    pointer-events: none;
    z-index: -1;
    animation: gridMove 20s linear infinite;
}

/* Text Watermark Layer - Ghost Identity */
/* Applied via CSS pseudo-element for pages with .app-body or .login-body */
body.app-body::before,
body.login-body::before {
    content: 'VULN-X';
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-25deg);
    font-size: 14vw;
    font-weight: 900;
    color: rgba(56, 189, 248, 0.06);
    white-space: nowrap;
    pointer-events: none;
    z-index: 0;
    user-select: none;
    letter-spacing: 0.15em;
    font-family: var(--font-ui);
}

/* Different watermark text for app pages */
body.app-body::before {
    content: 'VULN-X • THREAT INTELLIGENCE';
    font-size: 8vw;
    letter-spacing: 0.1em;
}

/* Watermark for terms/landing */
body.terms-body::before {
    content: 'VULN-X • SECURITY';
    font-size: 10vw;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text-bright);
    font-weight: 600;
    letter-spacing: -0.02em;
}

a {
    color: var(--text-muted);
    text-decoration: none;
    transition: all var(--transition-normal);
}

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

/* =========================================
   4. GLASSMORPHISM WITH MOTION
   ========================================= */
.glass {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.glass-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    /* Glass thickness illusion */
    box-shadow: 
        inset 0 1px 0 rgba(255,255,255,0.05),
        0 10px 30px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: all var(--transition-normal);
}

/* UI Motion - Cards lift + glow */
.glass-card:hover {
    transform: translateY(-4px);
    box-shadow: 
        inset 0 1px 0 rgba(255,255,255,0.08),
        0 20px 40px rgba(0, 0, 0, 0.6), 
        0 0 20px rgba(56, 189, 248, 0.1);
    border-color: rgba(56, 189, 248, 0.3);
}

/* =========================================
   5. SIDEBAR WITH MOTION
   ========================================= */
.sidebar {
    width: var(--sidebar-width);
    min-width: var(--sidebar-width);
    background: linear-gradient(180deg, #000000 0%, #0D0D0D 100%);
    border-right: 1px solid var(--divider);
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    transition: transform var(--transition-slow), box-shadow var(--transition-normal);
}

.sidebar-header {
    padding: 1.5rem 1.25rem;
    border-bottom: 1px solid var(--divider);
}

.sidebar-header h4 {
    color: var(--text-bright);
    font-size: 1.1rem;
    font-weight: 700;
    background: linear-gradient(135deg, #38BDF8, #0284C7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Micro motion - nav links */
.sidebar .nav-link {
    padding: 0.75rem 1rem;
    margin: 0.15rem 0.5rem;
    border-radius: var(--radius);
    color: var(--text-muted);
    font-size: 0.875rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: all var(--transition-normal);
    position: relative;
}

/* Micro motion - hover with icon shift */
.sidebar .nav-link:hover {
    background: rgba(56, 189, 248, 0.08);
    color: var(--text-bright);
    padding-left: 1.25rem;
}

.sidebar .nav-link:hover i {
    color: var(--primary);
    transform: translateX(2px);
}

.sidebar .nav-link i {
    font-size: 1.1rem;
    color: var(--text-muted);
    transition: all var(--transition-normal);
}

/* Active state */
.sidebar .nav-link.active {
    background: rgba(56, 189, 248, 0.12);
    color: var(--primary);
    font-weight: 600;
    border: 1px solid rgba(56, 189, 248, 0.2);
}

.sidebar .nav-link.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
    background: linear-gradient(180deg, #38BDF8, #0284C7);
    border-radius: 0 2px 2px 0;
}

.sidebar.collapsed {
    transform: translateX(-100%);
}

.sidebar.collapsed + .main-content {
    margin-left: 0;
}

/* =========================================
   6. MAIN CONTENT
   ========================================= */
.main-content {
    margin-left: var(--sidebar-width);
    min-height: 100vh;
    padding: 1.5rem 2rem;
    background: transparent;
}

@media (max-width: 768px) {
    .main-content {
        margin-left: 0;
        padding: 1rem;
    }
    .sidebar {
        transform: translateX(-100%);
    }
    .sidebar.show {
        transform: translateX(0);
    }
}

/* =========================================
   7. GLASS BUTTON SYSTEM - PROFESSIONAL IMPLEMENTATION
   ========================================= */
/* Base rule - GPU acceleration + smooth transition */
.btn {
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: var(--radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    position: relative;
    overflow: hidden;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateZ(0);
    cursor: pointer;
    /* Glass thickness illusion */
    box-shadow: 
        inset 0 1px 0 rgba(255,255,255,0.08),
        0 4px 15px rgba(0, 0, 0, 0.3);
}

/* HOVER SYSTEM - ALL buttons follow same rule */
.btn:hover {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 10px 25px rgba(56, 189, 248, 0.25);
}

/* PRESSED STATE - IMPORTANT */
.btn:active {
    transform: scale(0.97);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

/* Primary Button - Crimson Red Glow */
.btn-primary {
    /*
      Text color changed from white to a dark navy here: the old red brand
      (#FF0000) gave white text ~4.0:1 contrast (passes WCAG AA for large/
      bold UI text at the 3:1 threshold). The new lighter SOC Blue
      (#38BDF8) only gives white text ~2.1:1 - a real accessibility
      regression - while dark navy against the same blue gives ~7.9:1.
    */
    background: linear-gradient(135deg, #38BDF8 0%, #0284C7 100%);
    border: none;
    color: #06202B;
    font-weight: 700;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.15),
        0 4px 15px rgba(56, 189, 248, 0.3);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #7DD8FC 0%, #0EA5E9 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.2),
        0 6px 25px rgba(56, 189, 248, 0.5);
    transform: translateY(-2px) scale(1.05);
    color: #06202B;
}

.btn-primary:active {
    transform: translateY(0) scale(0.98);
}

/* Secondary Button - Glass Outline */
.btn-secondary {
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(56, 189, 248, 0.2);
    color: var(--text-muted);
}

.btn-secondary:hover {
    background: rgba(56, 189, 248, 0.1);
    border-color: var(--primary);
    color: var(--primary);
    box-shadow: 
        inset 0 1px 0 rgba(255,255,255,0.08),
        0 0 18px rgba(56, 189, 248, 0.25);
}

/* Outline Primary - Red Border with glow */
.btn-outline-primary {
    background: transparent;
    border: 1px solid var(--primary);
    color: var(--primary);
}

.btn-outline-primary:hover {
    background: var(--primary);
    color: #06202B;
    box-shadow: 0 0 25px var(--primary-glow);
    transform: scale(1.05);
}

/* Danger Button - semantic (destructive actions), stays red like every
   other error/critical indicator - not part of the brand accent pass.
   Solid fill instead of the old gradient down to near-black #990000: a
   large filled button going that dark read as heavy/oppressive rather
   than a clean alert signal. */
.btn-danger {
    background: var(--red-soft-fill);
    border: 1px solid var(--red-soft-fill);
    color: #fff;
}

.btn-danger:hover {
    background: #dc2626;
    border-color: #dc2626;
    box-shadow: 0 4px 20px rgba(239, 68, 68, 0.5);
    transform: scale(1.05);
}

/* .btn-success and .btn-warning intentionally removed: every action button
   in the app now uses one of exactly three classes - .btn-primary (default
   action), .btn-secondary (neutral/glass), .btn-danger (destructive) - per
   the unified red+blue theme. No page should invent its own button color,
   including via Bootstrap's stock green/yellow variants. */

/* Dark Button - Glass style */
.btn-dark {
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--text-muted);
}

.btn-dark:hover {
    background: rgba(56, 189, 248, 0.1);
    border-color: var(--primary);
    color: var(--primary);
}

/* =========================================
   8. FORM ELEMENTS WITH MICRO-INTERACTIONS
   ========================================= */
.form-control, .form-select {
    background: var(--bg-input);
    border: 1px solid var(--divider);
    color: var(--text-main);
    border-radius: var(--radius);
    padding: 0.625rem 0.875rem;
    font-size: 0.875rem;
    transition: all var(--transition-normal);
}

/* Focus state with glow */
.form-control:focus, .form-select:focus {
    background: var(--bg-input);
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15);
    color: var(--text-bright);
    outline: none;
}

.form-control::placeholder {
    color: var(--text-dim);
}

.form-label {
    color: var(--text-muted);
    font-size: 0.8125rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.input-group-text {
    background: var(--bg-input);
    border: 1px solid var(--divider);
    border-radius: var(--radius) 0 0 var(--radius);
    color: var(--text-muted);
}

/* =========================================
   9. CARD STYLING WITH HOVER SYSTEM
   ========================================= */
.card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: 
        inset 0 1px 0 rgba(255,255,255,0.05),
        0 10px 30px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: all var(--transition-normal);
}

/* UI Motion - Card lift + glow */
.card:hover {
    border-color: rgba(56, 189, 248, 0.2);
    animation: borderGlow 3s ease-in-out infinite;
    transform: translateY(-4px);
    box-shadow: 
        inset 0 1px 0 rgba(255,255,255,0.08),
        0 15px 35px rgba(0, 0, 0, 0.6);
}

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

.card-body {
    padding: 1.25rem;
}

/* =========================================
   10. TABLE WITH HOVER GLIDE
   ========================================= */
.table {
    color: var(--text-main);
    border-color: var(--divider);
    font-size: 0.8125rem;
}

.table thead th {
    background: var(--bg-input);
    border-bottom: 2px solid var(--divider);
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    padding: 0.875rem 1rem;
    text-align: center;
}

.table thead th:first-child {
    text-align: left;
}

.table tbody tr {
    transition: background 0.2s ease, border-color var(--transition-fast);
    border-bottom: 1px solid var(--divider);
}

.table tbody tr:nth-child(odd) {
    background: rgba(255, 255, 255, 0.015);
}

/* Micro interaction - hover highlight glide with shift */
.table tbody tr {
    transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.table tbody tr:hover {
    background: rgba(56, 189, 248, 0.06);
    transform: translateX(2px);
}

.table tbody td {
    padding: 0.875rem 1rem;
    border-color: var(--divider);
    vertical-align: middle;
}

.table-dark {
    background: var(--bg-card);
    border-color: var(--divider);
}

/* =========================================
   11. BADGE SYSTEM WITH STATUS ANIMATIONS
   ========================================= */
.badge {
    padding: 0.35em 0.65em;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-radius: var(--radius);
}

.badge-success {
    background: rgba(0, 200, 83, 0.15);
    color: #00C853;
    border: 1px solid rgba(0, 200, 83, 0.3);
}

.badge-warning {
    background: rgba(255, 214, 0, 0.15);
    color: #FFD600;
    border: 1px solid rgba(255, 214, 0, 0.3);
}

/* Was rendering blue - a leftover from the earlier site-wide red-to-blue
   sweep that over-converted this one. A class literally named "danger" is
   Bucket A (error/alert) by definition and must stay red. */
.badge-danger {
    background: rgba(239, 68, 68, 0.15);
    color: var(--red-soft-fill);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.badge-info {
    background: rgba(100, 116, 139, 0.15);
    color: #64748B;
    border: 1px solid rgba(100, 116, 139, 0.3);
}

/* Status Badge with pulsing animation */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.status-badge::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: signalPulse 4s ease-in-out infinite;
}

.status-badge.running::before {
    background: #38BDF8;
    box-shadow: 0 0 8px var(--primary);
}

.status-badge.completed::before {
    background: #00C853;
    animation: none;
}

/* Was rendering blue - a "Failed" indicator with no failure signal at all,
   the same over-conversion bug as .badge-danger above. */
.status-badge.failed::before {
    background: var(--red-soft-fill);
    box-shadow: 0 0 8px var(--red-soft-fill);
}

/* Risk Level Badges with glow - severity indicators, intentionally left
   red/orange-red regardless of the SOC Blue brand pass (same rule as every
   other severity color in this file: unchanged, pixel-identical). */
.risk-critical {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.4);
    animation: critical-glow 2s ease-in-out infinite;
}

.risk-high {
    background: rgba(248, 113, 113, 0.2);
    color: #f87171;
    border: 1px solid rgba(248, 113, 113, 0.4);
}

.risk-medium {
    background: rgba(255, 214, 0, 0.2);
    color: #FFD600;
    border: 1px solid rgba(255, 214, 0, 0.4);
}

.risk-low {
    background: rgba(0, 200, 83, 0.2);
    color: #00C853;
    border: 1px solid rgba(0, 200, 83, 0.4);
}

/* =========================================
   12. ALERT SYSTEM
   ========================================= */
.alert {
    border-radius: var(--radius);
    border: 1px solid transparent;
    padding: 0.875rem 1rem;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    animation: fadeInUp 0.4s ease-out;
}

.alert-danger {
    background: rgba(56, 189, 248, 0.1);
    border-color: rgba(56, 189, 248, 0.3);
    color: #38BDF8;
}

.alert-success {
    background: rgba(0, 200, 83, 0.1);
    border-color: rgba(0, 200, 83, 0.3);
    color: #00C853;
}

.alert-warning {
    background: rgba(255, 214, 0, 0.1);
    border-color: rgba(255, 214, 0, 0.3);
    color: #FFD600;
}

.alert-info {
    background: rgba(100, 116, 139, 0.1);
    border-color: rgba(100, 116, 139, 0.3);
    color: #64748B;
}

/* =========================================
   13. PROGRESS BARS WITH SHIMMER
   ========================================= */
.progress {
    background: var(--bg-input);
    border-radius: var(--radius);
    height: 8px;
    overflow: hidden;
}

/* Progress bar with shimmer effect */
.progress-bar {
    background: linear-gradient(90deg, #38BDF8 0%, #0284C7 100%);
    background-size: 200% 100%;
    border-radius: var(--radius);
    transition: width 0.6s var(--ease-smooth);
    box-shadow: 0 0 10px var(--primary-glow);
    animation: progressShimmer 2s linear infinite;
}

/* Circular Progress */
.circular-progress {
    position: relative;
    width: 60px;
    height: 60px;
}

.circular-progress svg {
    transform: rotate(-90deg);
}

.circular-progress circle {
    fill: none;
    stroke-width: 4;
}

.circular-progress .bg {
    stroke: var(--bg-input);
}

.circular-progress .progress {
    stroke: #38BDF8;
    stroke-linecap: round;
    stroke-dasharray: 157;
    stroke-dashoffset: calc(157 - (157 * var(--progress, 0)) / 100);
    transition: stroke-dashoffset 1.5s var(--ease-smooth);
    filter: drop-shadow(0 0 4px var(--primary-glow));
}

/* =========================================
   14. LIVE STATUS INDICATOR
   ========================================= */
.status-live {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.status-dot {
    width: 8px;
    height: 8px;
    background: #38BDF8;
    border-radius: 50%;
    animation: signalPulse 4s ease-in-out infinite;
    box-shadow: 0 0 8px var(--primary-glow);
}

/* =========================================
   15. MODAL WITH MOTION
   ========================================= */
.modal-content {
    background: var(--bg-overlay);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    box-shadow: 
        inset 0 1px 0 rgba(255,255,255,0.05),
        0 20px 60px rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    animation: scaleIn 0.3s ease-out;
}

.modal-header {
    background: transparent;
    border-bottom: 1px solid var(--divider);
    padding: 1.25rem 1.5rem;
}

.modal-body {
    padding: 1.5rem;
}

.modal-footer {
    border-top: 1px solid var(--divider);
    padding: 1rem 1.5rem;
}

/* =========================================
   16. DROPDOWN WITH MOTION
   ========================================= */
.dropdown-menu {
    background: var(--bg-overlay);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: 
        inset 0 1px 0 rgba(255,255,255,0.03),
        0 10px 40px rgba(0, 0, 0, 0.6);
    padding: 0.5rem;
    animation: fadeInUp 0.2s ease-out;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.dropdown-item {
    color: var(--text-muted);
    padding: 0.625rem 1rem;
    border-radius: var(--radius);
    font-size: 0.875rem;
    transition: all var(--transition-fast);
}

.dropdown-item:hover {
    background: rgba(56, 189, 248, 0.1);
    color: var(--primary);
}

/* =========================================
   17. NAVIGATION TABS
   ========================================= */
.nav-tabs {
    border-bottom: 1px solid var(--divider);
    gap: 0.5rem;
}

.nav-tabs .nav-link {
    color: var(--text-muted);
    border: none;
    padding: 0.75rem 1.25rem;
    font-weight: 500;
    font-size: 0.875rem;
    border-radius: var(--radius) var(--radius) 0 0;
    transition: all var(--transition-normal);
}

.nav-tabs .nav-link:hover {
    color: var(--text-bright);
    background: rgba(56, 189, 248, 0.05);
}

.nav-tabs .nav-link.active {
    color: var(--primary);
    background: rgba(56, 189, 248, 0.1);
    border-bottom: 2px solid var(--primary);
}

/* =========================================
   18. SCROLLBAR WITH MOTION
   ========================================= */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-input);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #38BDF8, #0284C7);
    border-radius: 4px;
    transition: background var(--transition-normal);
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #7DD8FC, #0EA5E9);
}

/* =========================================
   19. ANIMATION CLASSES
   ========================================= */
.animate-fade-in {
    animation: fadeIn 0.4s ease-out forwards;
}

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

.animate-slide-in-left {
    animation: slideInLeft 0.4s ease-out forwards;
}

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

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

/* Staggered animations */
.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; }

/* =========================================
   20. FEATURE CARDS WITH MOTION
   ========================================= */
.feature-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    transition: all var(--transition-normal);
    animation: fadeInUp 0.5s ease-out both;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* UI Motion - Card hover lift + glow */
.feature-card:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 
        inset 0 1px 0 rgba(255,255,255,0.08),
        0 15px 40px rgba(0, 0, 0, 0.6), 
        0 0 30px rgba(56, 189, 248, 0.12);
    border-color: rgba(56, 189, 248, 0.3);
}

.feature-icon {
    font-size: 2rem;
    background: linear-gradient(135deg, #38BDF8, #7DD8FC);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 1rem;
}

/* =========================================
   21. PRICING CARDS
   ========================================= */
.pricing-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    padding: 2rem;
    transition: all var(--transition-normal);
    animation: scaleIn 0.4s ease-out both;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.pricing-card.popular {
    border-color: var(--primary);
    box-shadow: 0 0 30px rgba(56, 189, 248, 0.2);
}

.pricing-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 
        inset 0 1px 0 rgba(255,255,255,0.08),
        0 20px 50px rgba(0, 0, 0, 0.6), 
        0 0 40px rgba(56, 189, 248, 0.15);
    border-color: rgba(56, 189, 248, 0.4);
}

.price {
    font-size: 2.5rem;
    font-weight: 700;
    background: linear-gradient(135deg, #38BDF8, #7DD8FC);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* =========================================
   22. STAT CARDS (Dashboard)
   ========================================= */
.stat-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    transition: all var(--transition-normal);
    animation: fadeInUp 0.5s ease-out both;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 
        inset 0 1px 0 rgba(255,255,255,0.05),
        0 15px 30px rgba(0, 0, 0, 0.5), 
        0 0 20px rgba(56, 189, 248, 0.08);
    border-color: rgba(56, 189, 248, 0.25);
}

.stat-card h1 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-bright);
    line-height: 1;
}

.stat-card h1.high-risk {
    color: var(--danger);
    text-shadow: 0 0 20px rgba(56, 189, 248, 0.5);
}

.stat-card h6 {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* =========================================
   23. UTILITY CLASSES
   ========================================= */
.text-primary {
    color: var(--primary) !important;
}

.text-danger-custom {
    color: var(--danger) !important;
}

.text-success-custom {
    color: var(--success) !important;
}

.text-warning-custom {
    color: var(--warning) !important;
}

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

.glow-red {
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.4);
}

/* Gradient Text */
.gradient-text {
    background: linear-gradient(135deg, #38BDF8, #0284C7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* =========================================
   24. RESPONSIVE
   ========================================= */
@media (max-width: 576px) {
    .main-content {
        padding: 1rem 0.75rem;
    }
    .card-body {
        padding: 1rem;
    }
    .btn {
        padding: 0.5rem 1rem;
        font-size: 0.8125rem;
    }
    .stat-card h1 {
        font-size: 1.5rem;
    }
}

/* =========================================
   25. PRINT
   ========================================= */
@media print {
    .sidebar, .btn, .no-print {
        display: none !important;
    }
    .main-content {
        margin-left: 0;
    }
    body {
        background: #fff !important;
        color: #000 !important;
    }
}

/* =========================================
   26. LOGIN/REGISTER PAGES
   ========================================= */
.login-body {
    background: linear-gradient(180deg, #000000 0%, #0D0D0D 50%, #050505 100%);
    background-size: 400% 400%;
    animation: gradientDrift 12s ease infinite;
}

.login-body::before {
    background: 
        radial-gradient(ellipse at 20% 30%, rgba(56, 189, 248, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 70%, rgba(2, 132, 199, 0.06) 0%, transparent 50%);
    animation: gradientDrift 10s ease infinite;
}

/* =========================================
   27. SCAN OPTION CARDS
   ========================================= */
.scan-option-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all var(--transition-normal);
}

.scan-option-card:hover {
    border-color: var(--primary);
    background: rgba(56, 189, 248, 0.06);
    transform: translateY(-2px);
    box-shadow: 
        inset 0 1px 0 rgba(255,255,255,0.05),
        0 8px 20px rgba(0, 0, 0, 0.4), 
        0 0 15px rgba(56, 189, 248, 0.1);
}

.scan-option-card input:checked + label {
    color: var(--primary);
}

.scan-option-card input:checked ~ .scan-option-card {
    border-color: var(--primary);
    background: rgba(56, 189, 248, 0.1);
}

/* =========================================
   28. INSTRUCTION CARD
   ========================================= */
.instruction-card {
    background: var(--glass-bg);
    border-left: 4px solid #38BDF8;
    border-radius: var(--radius-lg);
    padding: 1rem;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* =========================================
   28b. SCAN REFERENCE GUIDE - ROW ACCENT COLORS
   Used by new-scan.php's per-OWASP-category table rows
   (.text-risk-critical/-high/-safe/-info, .text-purple).
   These classes were referenced in the markup but never
   defined anywhere, so every "colored" row silently
   rendered as plain default text. Defining them here
   reuses the same severity palette as the PDF report and
   findings views, so the whole product reads as one system.
   ========================================= */
.text-risk-critical { color: #DC2626 !important; }
.text-risk-high      { color: #F97316 !important; }
.text-risk-safe       { color: #22C55E !important; }
.text-risk-info        { color: #38BDF8 !important; }
.text-purple            { color: #A855F7 !important; }

/* =========================================
   29. LOADING SPINNER
   ========================================= */
.spinner-cyber {
    width: 40px;
    height: 40px;
    border: 3px solid var(--bg-input);
    border-top: 3px solid #38BDF8;
    border-radius: 50%;
    animation: rotate 1s linear infinite;
    box-shadow: 0 0 15px var(--primary-glow);
}

/* =========================================
   30. CUSTOM CHECKBOX WITH FOCUS GLOW
   ========================================= */
.form-check-input {
    background-color: var(--bg-input);
    border: 1px solid var(--divider);
    transition: all var(--transition-normal);
}

.form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 0 10px var(--primary-glow);
}

/* Focus state with glow */
.form-check-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15);
    outline: none;
}

/* =========================================
   31. NAVBAR
   ========================================= */
.navbar {
    background: rgba(0, 0, 0, 0.95) !important;
    border-bottom: 1px solid var(--divider);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.navbar-brand {
    color: var(--text-bright) !important;
    font-weight: 700;
}

.navbar-brand span {
    background: linear-gradient(135deg, #38BDF8, #0284C7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* =========================================
   32. HERO SECTION (Landing Page)
   ========================================= */
.hero-section {
    background: linear-gradient(180deg, #000000 0%, #0D0D0D 100%);
    padding: 8rem 0;
    position: relative;
    overflow: hidden;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(ellipse at 20% 30%, rgba(56, 189, 248, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 70%, rgba(2, 132, 199, 0.08) 0%, transparent 50%);
    opacity: 0.8;
    animation: gradientDrift 10s ease infinite;
}

.hero-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
    background-size: 40px 40px;
    animation: gridMove 20s linear infinite;
}

.hero-section .container {
    position: relative;
    z-index: 1;
}

.hero-section h1 {
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--text-bright) !important;
    line-height: 1.2;
    margin-bottom: 1rem;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}

.hero-section .lead {
    font-size: 1.25rem;
    color: var(--text-muted);
    font-weight: 400;
    animation: fadeInUp 0.6s ease-out 0.2s both;
}

.hero-section .usp {
    font-size: 0.95rem;
    color: var(--text-dim);
    margin-top: 1.5rem;
    font-weight: 400;
    animation: fadeInUp 0.6s ease-out 0.4s both;
}

.section-header {
    font-size: 2rem;
    font-weight: 700;
    position: relative;
    display: inline-block;
    color: var(--text-bright);
}

.section-header::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #38BDF8, #0284C7);
    border-radius: 2px;
}

/* =========================================
   33. BUTTON HIERARCHY & STATES
   ========================================= */
/* Primary/Secondary/Danger button hierarchy - already defined in section 7 */
/* Add pressed state (active) - SCALE DOWN for click feedback */
.btn:active {
    transform: scale(0.96) !important;
    transition: transform 0.1s ease-out;
}

/* Disabled state styling - consistent across all buttons */
.btn:disabled,
.btn.disabled {
    opacity: 0.5;
    cursor: not-allowed !important;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #888888 !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Disabled link styling */
a.btn.disabled {
    pointer-events: none;
    opacity: 0.5;
}

/* Disabled form controls */
.form-control:disabled,
.form-select:disabled,
input:disabled,
textarea:disabled,
select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.08);
}

/* =========================================
   34. SHADOW LAYERING SYSTEM
   ========================================= */
/* Level 1: Subtle - for subtle elevation */
.shadow-1 {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
/* Level 2: Medium - for cards */
.shadow-2 {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
/* Level 3: High - for modals, dropdowns */
.shadow-3 {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}
/* Level 4: Highest - for sticky elements */
.shadow-4 {
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
}
/* Glow shadow for primary elements */
.shadow-glow {
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.3);
}
.shadow-glow-strong {
    box-shadow: 0 0 30px rgba(56, 189, 248, 0.5);
}

/* =========================================
   35. LOADING SKELETONS
   ========================================= */
.skeleton {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.03) 25%,
        rgba(255, 255, 255, 0.08) 50%,
        rgba(255, 255, 255, 0.03) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    border-radius: var(--radius);
}

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

/* Skeleton for text lines */
.skeleton-text {
    height: 14px;
    margin-bottom: 8px;
    border-radius: 4px;
}
.skeleton-text-sm { height: 12px; width: 60%; }
.skeleton-text-md { height: 14px; width: 80%; }
.skeleton-text-lg { height: 16px; width: 100%; }

/* Skeleton for avatar */
.skeleton-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

/* Skeleton for buttons */
.skeleton-btn {
    height: 40px;
    width: 120px;
    border-radius: var(--radius);
}

/* Skeleton for cards */
.skeleton-card {
    height: 200px;
    border-radius: var(--radius-lg);
}

/* =========================================
   36. EMPTY STATE DESIGN
   ========================================= */
.empty-state {
    text-align: center;
    padding: 3rem 2rem;
    background: var(--glass-bg);
    border: 1px dashed var(--divider);
    border-radius: var(--radius-lg);
}

.empty-state-icon {
    font-size: 4rem;
    color: var(--text-dim);
    margin-bottom: 1rem;
    opacity: 0.5;
}

.empty-state-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 0.5rem;
}

.empty-state-text {
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}

.empty-state .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* =========================================
   37. TOAST SYSTEM ANIMATIONS
   ========================================= */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
}

.toast {
    background: var(--bg-overlay);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin-bottom: 0.75rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(12px);
    animation: toast-slide-in 0.3s ease-out;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 300px;
    max-width: 400px;
}

@keyframes toast-slide-in {
    from {
        opacity: 0;
        transform: translateX(100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.toast.toast-hide {
    animation: toast-slide-out 0.3s ease-in forwards;
}

@keyframes toast-slide-out {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(100px);
    }
}

/* Toast variants */
.toast-success {
    border-left: 4px solid var(--success);
}
.toast-success .toast-icon {
    color: var(--success);
}

.toast-error {
    border-left: 4px solid var(--danger);
}
.toast-error .toast-icon {
    color: var(--danger);
}

.toast-warning {
    border-left: 4px solid var(--warning);
}
.toast-warning .toast-icon {
    color: var(--warning);
}

.toast-info {
    border-left: 4px solid var(--info);
}
.toast-info .toast-icon {
    color: var(--info);
}

/* =========================================
   38. STICKY HEADER BEHAVIOR
   ========================================= */
.sticky-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(11, 11, 11, 0.95);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--divider);
    padding: 0.75rem 0;
}

.sticky-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Sidebar sticky */
.sidebar-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

/* Table sticky header */
.table-responsive.sticky-top {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bg-card);
}

/* =========================================
   39. MOBILE TABLE OPTIMIZATION
   ========================================= */
@media (max-width: 768px) {
    .table-responsive {
        border: 1px solid var(--divider);
        border-radius: var(--radius);
        margin-bottom: 1rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }
    
    .table-responsive::-webkit-scrollbar {
        height: 6px;
    }
    
    .table-responsive::-webkit-scrollbar-thumb {
        background: rgba(56, 189, 248, 0.3);
        border-radius: 3px;
    }
    
    /* Horizontal scroll hint */
    .table-scroll-hint {
        position: relative;
    }
    
    .table-scroll-hint::after {
        content: '← Swipe →';
        position: absolute;
        bottom: 8px;
        right: 12px;
        font-size: 0.7rem;
        color: var(--text-dim);
        opacity: 0.6;
    }
}

/* =========================================
   40. SORTING UX ANIMATION
   ========================================= */
.table-sortable th {
    cursor: pointer;
    user-select: none;
    transition: all var(--transition-fast);
}

.table-sortable th:hover {
    color: var(--primary);
}

.table-sortable th i {
    opacity: 0.3;
    transition: all var(--transition-fast);
    font-size: 0.75rem;
    margin-left: 4px;
}

.table-sortable th:hover i {
    opacity: 0.7;
}

.table-sortable th.sort-asc i.bi-chevron-up,
.table-sortable th.sort-desc i.bi-chevron-down {
    opacity: 1;
    color: var(--primary);
}

/* Sort animation */
.table-sortable tbody tr {
    transition: transform var(--transition-fast), background var(--transition-fast);
}

/* =========================================
   41. REAL-TIME STATUS INDICATORS
   ========================================= */
.status-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.status-indicator::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: status-pulse 2s ease-in-out infinite;
}

/* Online/Active - green */
.status-indicator.online::before,
.status-indicator.active::before {
    background: var(--success);
    box-shadow: 0 0 8px rgba(0, 200, 83, 0.5);
}

/* Offline/Inactive - grey */
.status-indicator.offline::before,
.status-indicator.inactive::before {
    background: var(--text-dim);
    animation: none;
}

/* Pending/Warning - yellow */
.status-indicator.pending::before,
.status-indicator.warning::before {
    background: var(--warning);
    box-shadow: 0 0 8px rgba(255, 214, 0, 0.5);
    animation: status-pulse 1.5s ease-in-out infinite;
}

/* Error/Failed - red */
.status-indicator.error::before,
.status-indicator.failed::before {
    background: var(--danger);
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
    animation: status-pulse 1s ease-in-out infinite;
}

@keyframes status-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.7; }
}

/* =========================================
   42. SEVERITY VISUALIZATION
   ========================================= */
.severity-bar {
    display: flex;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--bg-input);
}

.severity-bar-segment {
    height: 100%;
    transition: width var(--transition-slow);
}

.severity-critical {
    background: linear-gradient(90deg, #ef4444, var(--red-soft-border));
}
.severity-high {
    background: linear-gradient(90deg, #f87171, #b45454);
}
.severity-medium {
    background: linear-gradient(90deg, #FFD600, #CCAA00);
}
.severity-low {
    background: linear-gradient(90deg, #00C853, #009624);
}
.severity-info {
    background: linear-gradient(90deg, #64748B, #475569);
}

/* Severity badge with glow */
.severity-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.severity-badge.critical {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.4);
    animation: severity-glow 2s ease-in-out infinite;
}

.severity-badge.high {
    background: rgba(248, 113, 113, 0.2);
    color: #f87171;
    border: 1px solid rgba(248, 113, 113, 0.4);
}

.severity-badge.medium {
    background: rgba(255, 214, 0, 0.2);
    color: #FFD600;
    border: 1px solid rgba(255, 214, 0, 0.4);
}

.severity-badge.low {
    background: rgba(0, 200, 83, 0.2);
    color: #00C853;
    border: 1px solid rgba(0, 200, 83, 0.4);
}

@keyframes severity-glow {
    0%, 100% { box-shadow: 0 0 5px rgba(239, 68, 68, 0.3); }
    50% { box-shadow: 0 0 15px rgba(239, 68, 68, 0.5); }
}

/* =========================================
   43. KPI & METRIC STYLING
   ========================================= */
.kpi-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    transition: all var(--transition-normal);
    backdrop-filter: blur(12px);
}

.kpi-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
    border-color: rgba(56, 189, 248, 0.3);
}

.kpi-value {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-bright);
    line-height: 1;
    margin-bottom: 0.25rem;
}

.kpi-value.critical {
    color: var(--danger);
    text-shadow: 0 0 20px rgba(239, 68, 68, 0.4);
}

.kpi-value.warning {
    color: var(--warning);
    text-shadow: 0 0 15px rgba(255, 214, 0, 0.3);
}

.kpi-value.success {
    color: var(--success);
    text-shadow: 0 0 15px rgba(0, 200, 83, 0.3);
}

.kpi-label {
    font-size: 0.8125rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
}

.kpi-change {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8125rem;
    font-weight: 500;
    margin-top: 0.5rem;
}

.kpi-change.positive {
    color: var(--success);
}

.kpi-change.negative {
    color: var(--danger);
}

/* =========================================
   44. ERROR UX DESIGN
   ========================================= */
.error-state {
    text-align: center;
    padding: 3rem 2rem;
}

.error-state-icon {
    font-size: 5rem;
    color: var(--danger);
    margin-bottom: 1.5rem;
    animation: error-shake 0.5s ease-in-out;
}

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

.error-state-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-bright);
    margin-bottom: 0.5rem;
}

.error-state-text {
    color: var(--text-muted);
    margin-bottom: 1.5rem;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

/* Form error styling */
.form-error {
    color: var(--danger);
    font-size: 0.8125rem;
    margin-top: 0.375rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    animation: fadeInUp 0.3s ease-out;
}

.form-error i {
    font-size: 0.875rem;
}

.form-control.is-invalid {
    border-color: var(--danger);
    background-image: none;
}

.form-control.is-invalid:focus {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

/* =========================================
   45. HOVER FEEDBACK SYSTEM
   ========================================= */
/* Row hover with subtle highlight */
.hover-highlight {
    transition: background var(--transition-fast), transform var(--transition-fast);
}
.hover-highlight:hover {
    background: rgba(56, 189, 248, 0.05);
}

/* Card hover lift */
.hover-lift {
    transition: all var(--transition-normal);
}
.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
}

/* Icon hover rotation */
.hover-rotate {
    transition: transform var(--transition-normal);
}
.hover-rotate:hover {
    transform: rotate(10deg);
}

/* Icon hover scale */
.hover-scale {
    transition: transform var(--transition-fast);
}
.hover-scale:hover {
    transform: scale(1.15);
}

/* Link underline animation */
.link-animate {
    position: relative;
    display: inline-block;
}
.link-animate::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--primary);
    transition: width var(--transition-normal);
}
.link-animate:hover::after {
    width: 100%;
}

/* =========================================
   46. REAL-TIME SIMULATION UI
   ========================================= */
/* Log stream animation */
.log-stream {
    font-family: var(--font-code);
    font-size: 0.8125rem;
    line-height: 1.6;
    max-height: 400px;
    overflow-y: auto;
    background: var(--bg-input);
    border: 1px solid var(--divider);
    border-radius: var(--radius);
    padding: 1rem;
}

.log-entry {
    padding: 0.25rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    animation: log-fade-in 0.3s ease-out;
}

@keyframes log-fade-in {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.log-entry:last-child {
    border-bottom: none;
}

.log-timestamp {
    color: var(--text-dim);
    margin-right: 0.75rem;
}

.log-level-info { color: var(--info); }
.log-level-warning { color: var(--warning); }
.log-level-error { color: var(--danger); }
.log-level-success { color: var(--success); }

/* Scanning progress visualization */
.scan-progress {
    position: relative;
    overflow: hidden;
    background: var(--bg-input);
    border-radius: var(--radius);
    height: 24px;
}

.scan-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--primary) 0%, var(--primary-hover) 100%);
    border-radius: var(--radius);
    transition: width 0.3s ease-out;
    position: relative;
}

.scan-progress-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.3) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    animation: progress-shine 1.5s ease-in-out infinite;
}

@keyframes progress-shine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Pulse animation for active scanning */
.scanning-indicator {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.scanning-dot {
    width: 10px;
    height: 10px;
    background: var(--primary);
    border-radius: 50%;
    animation: scan-pulse 1.5s ease-in-out infinite;
}

@keyframes scan-pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.5);
    }
    50% {
        transform: scale(1.2);
        box-shadow: 0 0 0 8px rgba(56, 189, 248, 0);
    }
}

/* =========================================
   47. UNIFIED ANIMATION TIMING
   ========================================= */
/* All animations should use these variables */
:root {
    /* Use these for all transitions */
    /* --transition-fast: 150ms var(--ease-smooth); */
    /* --transition-normal: 250ms var(--ease-smooth); */
    /* --transition-slow: 400ms var(--ease-smooth); */
}

/* Ensure all interactive elements use consistent timing */
a, button, input, select, textarea, .card, .table tr {
    transition: all var(--transition-normal);
}

/* Exception for transform-only animations - can be faster */
.hover-lift, .hover-scale, .skeleton, .toast {
    transition: transform var(--transition-fast), opacity var(--transition-fast);
}

/* =========================================
   48. COMPREHENSIVE RESPONSIVE DESIGN
   ========================================= */

/* Base responsive adjustments */
html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

/* ===== LARGE DESKTOP (1440px+) ===== */
@media (min-width: 1440px) {
    :root {
        --sidebar-width: 280px;
    }
    
    .container {
        max-width: 1320px;
    }
    
    .main-content {
        padding: 2rem 3rem;
    }
    
    .hero-section h1 {
        font-size: 4rem;
    }
    
    .stat-card h1 {
        font-size: 2.5rem;
    }
}

/* ===== DESKTOP (1200px - 1439px) ===== */
@media (min-width: 1200px) and (max-width: 1439px) {
    .container {
        max-width: 1140px;
    }
    
    .sidebar {
        --sidebar-width: 260px;
    }
}

/* ===== LAPTOP (992px - 1199px) ===== */
@media (min-width: 992px) and (max-width: 1199px) {
    .container {
        max-width: 960px;
    }
    
    .sidebar {
        --sidebar-width: 240px;
    }
    
    .main-content {
        padding: 1.5rem;
    }
    
    .hero-section h1 {
        font-size: 3rem;
    }
    
    .stat-card h1 {
        font-size: 2rem;
    }
    
    .kpi-value {
        font-size: 2rem;
    }
}

/* ===== TABLET LANDSCAPE (768px - 991px) ===== */
@media (min-width: 768px) and (max-width: 991px) {
    :root {
        --sidebar-width: 220px;
    }
    
    .container {
        max-width: 720px;
    }
    
    .main-content {
        margin-left: var(--sidebar-width);
        padding: 1.25rem;
    }
    
    .sidebar {
        transform: translateX(-100%);
    }
    
    .sidebar.show {
        transform: translateX(0);
    }
    
    .hero-section {
        padding: 5rem 0;
    }
    
    .hero-section h1 {
        font-size: 2.5rem;
    }
    
    .feature-card, .stat-card, .pricing-card {
        padding: 1rem;
    }
    
    .stat-card h1 {
        font-size: 1.75rem;
    }
    
    .table thead th, 
    .table tbody td {
        padding: 0.625rem 0.75rem;
        font-size: 0.8125rem;
    }
    
    .card-body {
        padding: 1rem;
    }
    
    .btn {
        padding: 0.5rem 1rem;
        font-size: 0.8125rem;
    }
    
    .form-control, .form-select {
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
    }
}

/* ===== TABLET PORTRAIT (576px - 767px) ===== */
@media (min-width: 576px) and (max-width: 767px) {
    :root {
        --sidebar-width: 100%;
    }
    
    .container {
        max-width: 540px;
    }
    
    .main-content {
        margin-left: 0;
        padding: 1rem;
        width: 100%;
    }
    
    .sidebar {
        width: 280px;
        transform: translateX(-100%);
    }
    
    .sidebar.show {
        transform: translateX(0);
    }
    
    /* Mobile header */
    .mobile-header {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        padding: 0.75rem 1rem;
        background: rgba(0, 0, 0, 0.95);
        border-bottom: 1px solid var(--divider);
        position: sticky;
        top: 0;
        z-index: 100;
    }
    
    .hero-section {
        padding: 4rem 0;
    }
    
    .hero-section h1 {
        font-size: 2rem;
        text-align: center;
    }
    
    .hero-section .lead {
        font-size: 1rem;
        text-align: center;
    }
    
    h1, h2, h3 {
        font-size: 1.5rem;
    }
    
    h4, h5, h6 {
        font-size: 1.125rem;
    }
    
    .row {
        --bs-gutter-x: 1rem;
    }
    
    .col-md-3, .col-md-4, .col-md-6, .col-md-8, .col-md-9, .col-md-12 {
        margin-bottom: 1rem;
    }
    
    .card {
        margin-bottom: 1rem;
    }
    
    .card-body {
        padding: 0.875rem;
    }
    
    .stat-card {
        padding: 1rem;
    }
    
    .stat-card h1 {
        font-size: 1.5rem;
    }
    
    .stat-card h6 {
        font-size: 0.625rem;
    }
    
    .table {
        font-size: 0.75rem;
    }
    
    .table thead th, 
    .table tbody td {
        padding: 0.5rem;
    }
    
    .btn {
        padding: 0.5rem 0.875rem;
        font-size: 0.8125rem;
        width: 100%;
        margin-bottom: 0.5rem;
    }
    
    .btn-sm {
        padding: 0.375rem 0.625rem;
        font-size: 0.75rem;
    }
    
    .form-control, .form-select {
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
        margin-bottom: 0.75rem;
    }
    
    .form-label {
        font-size: 0.75rem;
    }
    
    .badge {
        font-size: 0.625rem;
        padding: 0.25em 0.5em;
    }
    
    .alert {
        padding: 0.75rem;
        font-size: 0.8125rem;
    }
    
    .modal-body {
        padding: 1rem;
    }
    
    .dropdown-menu {
        width: 100%;
    }
    
    .kpi-card {
        padding: 1rem;
    }
    
    .kpi-value {
        font-size: 1.5rem;
    }
    
    .kpi-label {
        font-size: 0.6875rem;
    }
}

/* ===== MOBILE LANDSCAPE (480px - 575px) ===== */
@media (min-width: 480px) and (max-width: 575px) {
    :root {
        --sidebar-width: 100%;
    }
    
    .container {
        width: 100%;
        padding: 0 0.75rem;
    }
    
    .main-content {
        padding: 0.875rem;
    }
    
    .sidebar {
        width: 280px;
        transform: translateX(-100%);
    }
    
    .sidebar.show {
        transform: translateX(0);
    }
    
    .hero-section {
        padding: 3rem 0.5rem;
    }
    
    .hero-section h1 {
        font-size: 1.75rem;
    }
    
    .hero-section .lead {
        font-size: 0.9375rem;
    }
    
    h1, h2 {
        font-size: 1.375rem;
    }
    
    h3, h4 {
        font-size: 1.125rem;
    }
    
    .d-flex {
        flex-wrap: wrap;
    }
    
    .d-flex.align-items-center {
        gap: 0.5rem;
    }
    
    .ms-auto {
        margin-left: 0 !important;
        width: 100%;
        margin-top: 0.5rem;
    }
    
    .btn {
        flex: 1;
        white-space: nowrap;
    }
    
    .btn + .btn {
        margin-left: 0;
        margin-top: 0.5rem;
    }
    
    .stat-card {
        padding: 0.75rem;
    }
    
    .stat-card h1 {
        font-size: 1.375rem;
    }
    
    .table-responsive {
        margin: 0 -0.75rem;
        padding: 0 0.75rem;
    }
    
    .table {
        font-size: 0.6875rem;
    }
    
    .table th, 
    .table td {
        padding: 0.375rem;
    }
    
    .card-body {
        padding: 0.75rem;
    }
    
    .form-control, .form-select {
        font-size: 0.8125rem;
        padding: 0.5rem;
    }
    
    .input-group {
        flex-wrap: wrap;
    }
    
    .input-group > * {
        flex: 1 1 auto;
    }
    
    .modal-dialog {
        margin: 0.5rem;
    }
    
    .toast-container {
        left: 0.5rem;
        right: 0.5rem;
    }
    
    .toast {
        min-width: auto;
        max-width: 100%;
    }
}

/* ===== MOBILE PORTRAIT (320px - 479px) ===== */
@media (min-width: 320px) and (max-width: 479px) {
    :root {
        --sidebar-width: 100%;
        --radius: 4px;
        --radius-lg: 8px;
    }
    
    html {
        font-size: 14px;
    }
    
    body {
        font-size: 0.875rem;
    }
    
    .container {
        width: 100%;
        padding: 0 0.5rem;
    }
    
    .main-content {
        padding: 0.5rem;
    }
    
    .sidebar {
        width: 260px;
        transform: translateX(-100%);
    }
    
    .sidebar.show {
        transform: translateX(0);
    }
    
    .mobile-header {
        padding: 0.5rem 0.75rem;
    }
    
    .mobile-header h1 {
        font-size: 1rem;
    }
    
    .hero-section {
        padding: 2.5rem 0.25rem;
    }
    
    .hero-section h1 {
        font-size: 1.5rem;
        line-height: 1.3;
    }
    
    .hero-section .lead {
        font-size: 0.875rem;
    }
    
    h1, h2 {
        font-size: 1.25rem;
    }
    
    h3 {
        font-size: 1.125rem;
    }
    
    h4, h5, h6 {
        font-size: 1rem;
    }
    
    p {
        font-size: 0.8125rem;
        line-height: 1.5;
    }
    
    .row {
        margin-left: -0.25rem;
        margin-right: -0.25rem;
    }
    
    .row > * {
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }
    
    .col-3, .col-4, .col-6, .col-8, .col-12 {
        padding: 0.25rem;
    }
    
    .card {
        margin-bottom: 0.75rem;
        border-radius: var(--radius-lg);
    }
    
    .card-body {
        padding: 0.625rem;
    }
    
    .card-title {
        font-size: 1rem;
    }
    
    .stat-card {
        padding: 0.625rem;
    }
    
    .stat-card h1 {
        font-size: 1.25rem;
    }
    
    .stat-card h6 {
        font-size: 0.5625rem;
    }
    
    .btn {
        padding: 0.5rem 0.75rem;
        font-size: 0.8125rem;
        min-height: 36px;
    }
    
    .btn-sm {
        padding: 0.3125rem 0.5rem;
        font-size: 0.6875rem;
    }
    
    .btn-block {
        width: 100%;
    }
    
    .form-control, .form-select {
        padding: 0.4375rem 0.625rem;
        font-size: 0.8125rem;
        min-height: 36px;
        margin-bottom: 0.625rem;
    }
    
    .form-label {
        font-size: 0.6875rem;
        margin-bottom: 0.375rem;
    }
    
    .form-text {
        font-size: 0.6875rem;
    }
    
    .table {
        font-size: 0.625rem;
    }
    
    .table thead th {
        padding: 0.375rem 0.25rem;
        font-size: 0.5625rem;
    }
    
    .table tbody td {
        padding: 0.375rem 0.25rem;
    }
    
    .table .btn-sm {
        padding: 0.1875rem 0.375rem;
        font-size: 0.5625rem;
    }
    
    .badge {
        font-size: 0.5rem;
        padding: 0.1875em 0.375em;
    }
    
    .alert {
        padding: 0.5rem 0.625rem;
        font-size: 0.75rem;
        border-radius: var(--radius);
    }
    
    .alert-dismissible {
        padding-right: 2rem;
    }
    
    .alert-dismissible .btn-close {
        padding: 0.5rem;
    }
    
    .modal-content {
        border-radius: var(--radius-lg);
    }
    
    .modal-header {
        padding: 0.75rem;
    }
    
    .modal-title {
        font-size: 1rem;
    }
    
    .modal-body {
        padding: 0.75rem;
    }
    
    .modal-footer {
        padding: 0.625rem;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .modal-footer .btn {
        flex: 1 1 auto;
        min-width: 80px;
    }
    
    .dropdown-menu {
        min-width: 180px;
        padding: 0.375rem;
    }
    
    .dropdown-item {
        padding: 0.5rem 0.75rem;
        font-size: 0.8125rem;
    }
    
    .nav-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .nav-tabs .nav-link {
        padding: 0.5rem 0.75rem;
        font-size: 0.8125rem;
        white-space: nowrap;
    }
    
    .toast-container {
        top: 0.5rem;
        left: 0.5rem;
        right: 0.5rem;
    }
    
    .toast {
        font-size: 0.75rem;
        padding: 0.625rem 0.875rem;
        min-width: auto;
    }
    
    .progress {
        height: 6px;
    }
    
    .spinner-border-sm {
        width: 0.75rem;
        height: 0.75rem;
        border-width: 0.125rem;
    }
    
    .visually-hidden {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }
    
    /* Hide non-essential elements on very small screens */
    .hide-xs {
        display: none !important;
    }
    
    /* Ensure touch targets are minimum 44px */
    a, button, input, select, .nav-link {
        min-height: 44px;
        touch-action: manipulation;
    }
    
    /* Better tap highlight */
    a, button {
        -webkit-tap-highlight-color: rgba(56, 189, 248, 0.3);
    }
}

/* ===== iPad SPECIFIC ===== */
@media (min-width: 768px) and (max-width: 1024px) {
    /* iPad Landscape & Portrait */
    .sidebar {
        transform: translateX(-100%);
    }
    
    .sidebar.show {
        transform: translateX(0);
    }
    
    .main-content {
        margin-left: 0;
    }
    
    /* iPad specific fixes */
    .col-lg-3, .col-lg-4, .col-lg-6 {
        margin-bottom: 1rem;
    }
    
    /* Better grid for iPad */
    .row-cols-md-2 > * {
        flex: 0 0 auto;
        width: 50%;
    }
    
    .row-cols-md-3 > * {
        flex: 0 0 auto;
        width: 33.333333%;
    }
    
    .row-cols-md-4 > * {
        flex: 0 0 auto;
        width: 25%;
    }
}

/* ===== iPad Pro ===== */
@media (min-width: 1024px) and (max-width: 1366px) {
    .sidebar {
        --sidebar-width: 260px;
    }
    
    .main-content {
        padding: 1.5rem 2rem;
    }
    
    .container {
        max-width: 960px;
    }
}

/* ===== ORIENTATION CHANGES ===== */
/* Landscape orientation */
@media (orientation: landscape) and (max-height: 500px) {
    .hero-section {
        padding: 2rem 0;
    }
    
    .hero-section h1 {
        font-size: 1.75rem;
    }
    
    .modal-dialog {
        max-width: 90%;
        margin: 0.5rem auto;
    }
    
    .modal-body {
        max-height: 60vh;
        overflow-y: auto;
    }
}

/* ===== TOUCH DEVICE OPTIMIZATIONS ===== */
@media (hover: none) and (pointer: coarse) {
    /* Touch devices - larger touch targets */
    .btn {
        min-height: 48px;
        padding: 0.75rem 1.25rem;
    }
    
    .btn-sm {
        min-height: 36px;
        padding: 0.5rem 0.875rem;
    }
    
    .nav-link {
        padding: 0.875rem 1rem;
    }
    
    .form-control, .form-select {
        min-height: 48px;
    }
    
    /* Remove hover effects that don't work well on touch */
    .glass-card:hover,
    .card:hover,
    .feature-card:hover,
    .stat-card:hover,
    .pricing-card:hover {
        transform: none;
    }
    
    /* Enable active states for touch */
    .btn:active {
        transform: scale(0.97);
    }
    
    /* Touch-friendly dropdown */
    .dropdown-menu {
        max-height: 300px;
        overflow-y: auto;
    }
    
    /* Touch-friendly table */
    .table-responsive {
        -webkit-overflow-scrolling: touch;
    }
}

/* ===== HIGH DPI / RETINA DISPLAYS ===== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Sharper text rendering */
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    
    /* Higher quality shadows */
    .shadow-1,
    .shadow-2,
    .shadow-3,
    .shadow-4 {
        box-shadow: none;
    }
}

/* ===== DARK MODE ENHANCEMENTS ===== */
@media (prefers-color-scheme: dark) {
    :root {
        /* Ensure dark theme is default */
    }
}

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

/* ===== PRINT STYLES ===== */
@media print {
    .sidebar, 
    .btn, 
    .no-print,
    .mobile-header,
    #sidebar-toggle {
        display: none !important;
    }
    
    .main-content {
        margin-left: 0;
        padding: 0;
    }
    
    .card {
        break-inside: avoid;
        page-break-inside: avoid;
    }
    
    body {
        background: #fff !important;
        color: #000 !important;
        font-size: 12pt;
    }
    
    a {
        color: #000;
        text-decoration: underline;
    }
    
    .table {
        border: 1px solid #000;
    }
    
    .table th, 
    .table td {
        border: 1px solid #ddd;
    }
}