@import url('antigravity-theme.css');



/**

 * ====================================================================

 * SHADCN UI DESIGN SYSTEM & DYNAMIC THEME TOKENS

 * Compatible with https://ui.shadcn.com/

 * Supports: Zinc (Default), Slate, Stone, Neutral, Violet

 * Dual-Mode: Full Dark & Light Mode Support

 * Designed for 1:1 Parity with Shadcn UI Component Primitives

 * ====================================================================

 */



/* ====================================================================

   1. COLOR PALETTES (HSL TOKENS)

   ==================================================================== */



/* --- SHADCN ZINC (Default & 'shadcn') --- */

:root[data-ui-theme="shadcn"],

:root[data-ui-theme="shadcn-zinc"],

[data-theme="light"][data-ui-theme="shadcn"],

[data-theme="light"][data-ui-theme="shadcn-zinc"] {

    --background: 0 0% 100%;

    --foreground: 240 10% 3.9%;

    --card: 0 0% 100%;

    --card-foreground: 240 10% 3.9%;

    --popover: 0 0% 100%;

    --popover-foreground: 240 10% 3.9%;

    --primary: 240 5.9% 10%;

    --primary-foreground: 0 0% 98%;

    --secondary: 240 4.8% 95.9%;

    --secondary-foreground: 240 5.9% 10%;

    --muted: 240 4.8% 95.9%;

    --muted-foreground: 240 3.8% 46.1%;

    --accent: 240 4.8% 95.9%;

    --accent-foreground: 240 5.9% 10%;

    --destructive: 0 84.2% 60.2%;

    --destructive-foreground: 0 0% 98%;

    --border: 240 5.9% 90%;

    --input: 240 5.9% 90%;

    --ring: 240 5.9% 10%;

    --radius: 0.625rem;

}



[data-theme="dark"][data-ui-theme="shadcn"],

[data-theme="dark"][data-ui-theme="shadcn-zinc"],

:root.dark[data-ui-theme="shadcn"]:not([data-theme="light"]),

:root.dark[data-ui-theme="shadcn-zinc"]:not([data-theme="light"]),

html[data-ui-theme="shadcn"]:not([data-theme="light"]),

html[data-ui-theme="shadcn-zinc"]:not([data-theme="light"]) {

    --background: 240 10% 3.9%;          /* #09090b */

    --foreground: 0 0% 98%;              /* #fafafa */

    --card: 240 10% 4.8%;                /* #0c0c0e / #111113 */

    --card-foreground: 0 0% 98%;         /* #fafafa */

    --popover: 240 10% 4.8%;             /* #111113 */

    --popover-foreground: 0 0% 98%;      /* #fafafa */

    --primary: 0 0% 98%;                 /* Solid crisp white primary */

    --primary-foreground: 240 5.9% 10%;  /* #09090b jet black text */

    --secondary: 240 3.7% 15.9%;         /* #27272a */

    --secondary-foreground: 0 0% 98%;    /* #fafafa */

    --muted: 240 3.7% 15.9%;             /* #27272a */

    --muted-foreground: 240 5% 64.9%;    /* #a1a1aa */

    --accent: 240 3.7% 15.9%;            /* #27272a */

    --accent-foreground: 0 0% 98%;       /* #fafafa */

    --destructive: 0 62.8% 30.6%;        /* #7f1d1d */

    --destructive-foreground: 0 0% 98%;

    --border: 240 3.7% 15.9%;            /* rgba(255, 255, 255, 0.08) */

    --input: 240 3.7% 15.9%;             /* rgba(255, 255, 255, 0.12) */

    --ring: 240 4.9% 83.9%;

    --radius: 0.625rem;

}



/* --- SHADCN SLATE --- */

:root[data-ui-theme="shadcn-slate"],

[data-theme="light"][data-ui-theme="shadcn-slate"] {

    --background: 0 0% 100%;

    --foreground: 222.2 84% 4.9%;

    --card: 0 0% 100%;

    --card-foreground: 222.2 84% 4.9%;

    --popover: 0 0% 100%;

    --popover-foreground: 222.2 84% 4.9%;

    --primary: 222.2 47.4% 11.2%;

    --primary-foreground: 210 40% 98%;

    --secondary: 210 40% 96.1%;

    --secondary-foreground: 222.2 47.4% 11.2%;

    --muted: 210 40% 96.1%;

    --muted-foreground: 215.4 16.3% 46.9%;

    --accent: 210 40% 96.1%;

    --accent-foreground: 222.2 47.4% 11.2%;

    --destructive: 0 84.2% 60.2%;

    --destructive-foreground: 210 40% 98%;

    --border: 214.3 31.8% 91.4%;

    --input: 214.3 31.8% 91.4%;

    --ring: 222.2 84% 4.9%;

    --radius: 0.625rem;

}



[data-theme="dark"][data-ui-theme="shadcn-slate"],

:root.dark[data-ui-theme="shadcn-slate"] {

    --background: 222.2 84% 4.9%;

    --foreground: 210 40% 98%;

    --card: 222.2 84% 5.5%;

    --card-foreground: 210 40% 98%;

    --popover: 222.2 84% 5.5%;

    --popover-foreground: 210 40% 98%;

    --primary: 210 40% 98%;

    --primary-foreground: 222.2 47.4% 11.2%;

    --secondary: 217.2 32.6% 17.5%;

    --secondary-foreground: 210 40% 98%;

    --muted: 217.2 32.6% 17.5%;

    --muted-foreground: 215 20.2% 65.1%;

    --accent: 217.2 32.6% 17.5%;

    --accent-foreground: 210 40% 98%;

    --destructive: 0 62.8% 30.6%;

    --destructive-foreground: 210 40% 98%;

    --border: 217.2 32.6% 17.5%;

    --input: 217.2 32.6% 17.5%;

    --ring: 212.7 26.8% 83.9%;

    --radius: 0.625rem;

}



/* --- SHADCN STONE --- */

:root[data-ui-theme="shadcn-stone"],

[data-theme="light"][data-ui-theme="shadcn-stone"] {

    --background: 0 0% 100%;

    --foreground: 20 14.3% 4.1%;

    --card: 0 0% 100%;

    --card-foreground: 20 14.3% 4.1%;

    --popover: 0 0% 100%;

    --popover-foreground: 20 14.3% 4.1%;

    --primary: 24 9.8% 10%;

    --primary-foreground: 60 9.1% 97.8%;

    --secondary: 60 4.8% 95.9%;

    --secondary-foreground: 24 9.8% 10%;

    --muted: 60 4.8% 95.9%;

    --muted-foreground: 25 5.3% 44.7%;

    --accent: 60 4.8% 95.9%;

    --accent-foreground: 24 9.8% 10%;

    --destructive: 0 84.2% 60.2%;

    --destructive-foreground: 60 9.1% 97.8%;

    --border: 20 5.9% 90%;

    --input: 20 5.9% 90%;

    --ring: 20 14.3% 4.1%;

    --radius: 0.625rem;

}



[data-theme="dark"][data-ui-theme="shadcn-stone"],

:root.dark[data-ui-theme="shadcn-stone"] {

    --background: 20 14.3% 4.1%;

    --foreground: 60 9.1% 97.8%;

    --card: 20 14.3% 5.1%;

    --card-foreground: 60 9.1% 97.8%;

    --popover: 20 14.3% 5.1%;

    --popover-foreground: 60 9.1% 97.8%;

    --primary: 60 9.1% 97.8%;

    --primary-foreground: 24 9.8% 10%;

    --secondary: 12 6.5% 15.1%;

    --secondary-foreground: 60 9.1% 97.8%;

    --muted: 12 6.5% 15.1%;

    --muted-foreground: 24 5.4% 63.9%;

    --accent: 12 6.5% 15.1%;

    --accent-foreground: 60 9.1% 97.8%;

    --destructive: 0 62.8% 30.6%;

    --destructive-foreground: 60 9.1% 97.8%;

    --border: 12 6.5% 15.1%;

    --input: 12 6.5% 15.1%;

    --ring: 24 5.7% 82.9%;

    --radius: 0.625rem;

}





/* ====================================================================

   2. SHADCN TOKEN BRIDGE (Map Application Tokens to Shadcn)

   ==================================================================== */

[data-ui-theme^="shadcn"],

html[data-ui-theme^="shadcn"] {

    /* Core Layout Tokens */

    --bg-page: hsl(var(--background));

    --bg-hero: hsl(var(--background));

    --bg-card: hsl(var(--card));

    --bs-body-bg: hsl(var(--background)) !important;

    --card-bg: hsl(var(--card)) !important;

    --card-border: hsl(var(--border));

    --border-color: hsl(var(--border)) !important;

    --glass-bg: hsl(var(--card)) !important;

    --sidebar-bg: hsl(var(--background)) !important;

    --modal-bg: hsl(var(--card)) !important;

    --bg-gradient: none !important;



    /* Typography Tokens */

    --text-title: hsl(var(--foreground)) !important;

    --text-subtitle: hsl(var(--muted-foreground)) !important;

    --text-main: hsl(var(--foreground)) !important;

    --text-muted: hsl(var(--muted-foreground)) !important;



    /* Button & Action Tokens (High Contrast Shadcn Solid White Primary) */

    --btn-primary: hsl(var(--primary)) !important;

    --btn-primary-hover: hsl(var(--primary) / 0.9) !important;

    --btn-text: hsl(var(--primary-foreground)) !important;

    --btn-primary-bg: hsl(var(--primary)) !important;

    --btn-primary-text: hsl(var(--primary-foreground)) !important;

    --btn-secondary-bg: hsl(var(--secondary)) !important;

    --btn-secondary-text: hsl(var(--secondary-foreground)) !important;

    --btn-secondary-border: hsl(var(--border)) !important;



    /* Header, Navbar & Drawer Tokens */

    --toggle-bg: hsl(var(--secondary)) !important;

    --toggle-border: hsl(var(--border)) !important;

    --tab-active-bg: hsl(var(--secondary)) !important;

    --nav-hover: rgba(255, 255, 255, 0.05) !important;

    --nav-active: hsl(var(--secondary)) !important;

    --nav-active-border: hsl(var(--border)) !important;



    /* Dropdowns, Popovers & Tooltips */

    --dropdown-bg: hsl(var(--popover)) !important;

    --dropdown-border: hsl(var(--border)) !important;

    --dropdown-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), 0 0 0 1px hsl(var(--border)) !important;

    --dropdown-hover-bg: hsl(var(--secondary)) !important;

    --dropdown-hover-text: hsl(var(--foreground)) !important;

    --dropdown-divider: hsl(var(--border)) !important;



    /* Input & Form Tokens */

    --input-bg: hsl(var(--background)) !important;

    --input-border: hsl(var(--input)) !important;

    --input-text: hsl(var(--foreground)) !important;

    --input-placeholder: hsl(var(--muted-foreground)) !important;



    /* Social Buttons & Badges */

    --social-btn-bg: hsl(var(--background)) !important;

    --social-btn-hover: hsl(var(--secondary)) !important;

    --social-btn-text: hsl(var(--foreground)) !important;

    --divider-line: hsl(var(--border)) !important;

    --badge-bg: hsl(var(--secondary)) !important;

    --badge-text: hsl(var(--secondary-foreground)) !important;

    --badge-border: hsl(var(--border)) !important;

    --btn-admin: hsl(var(--destructive)) !important;

    --btn-admin-hover: hsl(var(--destructive) / 0.9) !important;

}





/* ====================================================================

   3. SHADCN UI COMPONENT STYLES & PRECISION ELEVATION (Matching Image)

   ==================================================================== */

[data-ui-theme^="shadcn"] body,

html[data-ui-theme^="shadcn"] body {

    background-color: hsl(var(--background)) !important;

    background-image: none !important;

    color: hsl(var(--foreground)) !important;

    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;

    letter-spacing: -0.012em !important;

    -webkit-font-smoothing: antialiased;

}



/* --- Cards & Containers (Deep Flat Zinc, Crisp 1px Border) --- */

[data-ui-theme^="shadcn"] .card,

[data-ui-theme^="shadcn"] .glass-card,

[data-ui-theme^="shadcn"] .auth-card,

[data-ui-theme^="shadcn"] .core-feature-card,

[data-ui-theme^="shadcn"] .tool-preview-card,

[data-ui-theme^="shadcn"] .testimonial-card,

[data-ui-theme^="shadcn"] .bg-card-custom,

[data-ui-theme^="shadcn"] .theme-metric-card {

    background-color: hsl(var(--card)) !important;

    border: 1px solid hsl(var(--border)) !important;

    border-radius: var(--radius) !important;

    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4) !important;

    backdrop-filter: none !important;

    -webkit-backdrop-filter: none !important;

    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease !important;

}



/* Alert Green Card (Converted to Minimalist Shadcn Metric Card) */

[data-ui-theme^="shadcn"] .alert-green-card {

    background-color: hsl(var(--card)) !important;

    background-image: none !important;

    border: 1px solid hsl(var(--border)) !important;

    border-radius: var(--radius) !important;

    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4) !important;

    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease !important;

}



/* Card Interactive Hover Lift & Ambient Glow */

[data-ui-theme^="shadcn"] .card:hover,

[data-ui-theme^="shadcn"] .glass-card:hover,

[data-ui-theme^="shadcn"] .auth-card:hover,

[data-ui-theme^="shadcn"] .core-feature-card:hover,

[data-ui-theme^="shadcn"] .tool-preview-card:hover,

[data-ui-theme^="shadcn"] .testimonial-card:hover,

[data-ui-theme^="shadcn"] .bg-card-custom:hover,

[data-ui-theme^="shadcn"] .theme-metric-card:hover,

[data-ui-theme^="shadcn"] .alert-green-card:hover {

    border-color: rgba(0, 242, 254, 0.3) !important;

    box-shadow: 0 4px 20px rgba(0, 242, 254, 0.08), 0 4px 16px rgba(0, 0, 0, 0.5) !important;

    transform: translateY(-2px);

}



/* Light Mode Cards: Clean crisp white background, subtle light grey border (#e4e4e7), soft shadow */

[data-theme="light"][data-ui-theme^="shadcn"] .card,

[data-theme="light"][data-ui-theme^="shadcn"] .glass-card,

[data-theme="light"][data-ui-theme^="shadcn"] .auth-card,

[data-theme="light"][data-ui-theme^="shadcn"] .core-feature-card,

[data-theme="light"][data-ui-theme^="shadcn"] .tool-preview-card,

[data-theme="light"][data-ui-theme^="shadcn"] .testimonial-card,

[data-theme="light"][data-ui-theme^="shadcn"] .bg-card-custom,

[data-theme="light"][data-ui-theme^="shadcn"] .theme-metric-card,

[data-theme="light"][data-ui-theme^="shadcn"] .alert-green-card {

    background-color: #ffffff !important;

    border: 1px solid #e4e4e7 !important;

    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;

}



[data-ui-theme^="shadcn"] .alert-green-bg-shape {

    display: none !important;

}



[data-ui-theme^="shadcn"] .alert-green-badge {

    background: rgba(16, 185, 129, 0.15) !important;

    border: 1px solid rgba(16, 185, 129, 0.3) !important;

    color: #34d399 !important;

    border-radius: 9999px !important;

    padding: 3px 10px !important;

    font-size: 0.75rem !important;

    font-weight: 600 !important;

}



[data-ui-theme^="shadcn"] .alert-green-date {

    color: hsl(var(--muted-foreground)) !important;

    font-size: 0.8rem !important;

}



[data-ui-theme^="shadcn"] .alert-green-text {

    color: hsl(var(--foreground)) !important;

    font-size: 1.05rem !important;

    font-weight: 600 !important;

}



[data-ui-theme^="shadcn"] .alert-green-link {

    color: hsl(var(--foreground)) !important;

    text-decoration: none !important;

}



/* Card Header, Title & Subtitles */

[data-ui-theme^="shadcn"] .card-header {

    background-color: transparent !important;

    border-bottom: 1px solid hsl(var(--border)) !important;

}



[data-ui-theme^="shadcn"] .card-title,

[data-ui-theme^="shadcn"] .page-title,

[data-ui-theme^="shadcn"] h1,

[data-ui-theme^="shadcn"] h2,

[data-ui-theme^="shadcn"] h3,

[data-ui-theme^="shadcn"] h4,

[data-ui-theme^="shadcn"] h5,

[data-ui-theme^="shadcn"] h6 {

    color: hsl(var(--foreground)) !important;

    letter-spacing: -0.02em !important;

    font-weight: 600 !important;

}



[data-ui-theme^="shadcn"] .card-subtitle,

[data-ui-theme^="shadcn"] .page-subtitle,

[data-ui-theme^="shadcn"] .theme-text-muted,

[data-ui-theme^="shadcn"] .text-muted {

    color: hsl(var(--muted-foreground)) !important;

}



[data-ui-theme^="shadcn"] .metric-card-value {

    color: hsl(var(--foreground)) !important;

    font-weight: 700 !important;

    letter-spacing: -0.02em !important;

}



[data-ui-theme^="shadcn"] .metric-card-date {

    color: hsl(var(--muted-foreground)) !important;

    font-size: 0.78rem !important;

}



[data-ui-theme^="shadcn"] .metric-card-footer {

    border-top: 1px solid hsl(var(--border)) !important;

    color: hsl(var(--muted-foreground)) !important;

    font-size: 0.78rem !important;

}



/* --- Buttons (1:1 with Shadcn Reference Image) --- */

/* Primary Button: Solid White in Dark Mode with Jet Black Text */

[data-ui-theme^="shadcn"] .hero-btn-primary,

[data-ui-theme^="shadcn"] .btn-submit,

[data-ui-theme^="shadcn"] .btn-primary,

[data-ui-theme^="shadcn"] .btn-primary.text-white,

[data-ui-theme^="shadcn"] .btn-primary:not(:disabled) {

    background-color: hsl(var(--primary)) !important;

    color: hsl(var(--primary-foreground)) !important;

    border: 1px solid hsl(var(--primary)) !important;

    font-weight: 600 !important;

    border-radius: 50rem !important;

    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) !important;

    transition: all 0.15s ease-in-out !important;

}



[data-ui-theme^="shadcn"] .btn-primary *,

[data-ui-theme^="shadcn"] .btn-primary.text-white *,

[data-ui-theme^="shadcn"] .btn-primary i,

[data-ui-theme^="shadcn"] .btn-primary span {

    color: hsl(var(--primary-foreground)) !important;

}



[data-ui-theme^="shadcn"] .hero-btn-primary:hover,

[data-ui-theme^="shadcn"] .btn-submit:hover:not(:disabled),

[data-ui-theme^="shadcn"] .btn-primary:hover,

[data-ui-theme^="shadcn"] .btn-primary:hover * {

    background-color: rgba(250, 250, 250, 0.88) !important;

    color: hsl(var(--primary-foreground)) !important;

    transform: none !important;

}



/* Secondary Button: Dark Zinc #27272a with White Text */

[data-ui-theme^="shadcn"] .btn-secondary,

[data-ui-theme^="shadcn"] .theme-pill-btn,

[data-ui-theme^="shadcn"] .auth-nav-btn,

[data-ui-theme^="shadcn"] .hamburger-btn,

[data-ui-theme^="shadcn"] .hero-btn-video,

[data-ui-theme^="shadcn"] .social-btn {

    background-color: hsl(var(--secondary)) !important;

    color: hsl(var(--secondary-foreground)) !important;

    border: 1px solid hsl(var(--border)) !important;

    font-weight: 500 !important;

    border-radius: 50rem !important;

    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1) !important;

    backdrop-filter: none !important;

}



[data-ui-theme^="shadcn"] .btn-secondary:hover,

[data-ui-theme^="shadcn"] .theme-pill-btn:hover {

    background-color: rgba(63, 63, 70, 0.6) !important;

    color: hsl(var(--foreground)) !important;

    border-color: hsl(var(--border)) !important;

}



/* Outline Buttons: Transparent with Crisp 1px Border */

[data-ui-theme^="shadcn"] .btn-outline-primary,

[data-ui-theme^="shadcn"] .btn-outline-secondary,

[data-ui-theme^="shadcn"] .btn-date-picker {

    background-color: transparent !important;

    color: hsl(var(--foreground)) !important;

    border: 1px solid hsl(var(--border)) !important;

    font-weight: 500 !important;

    border-radius: 50rem !important;

}



[data-ui-theme^="shadcn"] .btn-outline-primary:hover,

[data-ui-theme^="shadcn"] .btn-outline-secondary:hover,

[data-ui-theme^="shadcn"] .btn-date-picker:hover {

    background-color: hsl(var(--secondary)) !important;

    color: hsl(var(--foreground)) !important;

    border-color: hsl(var(--border)) !important;

}



/* Destructive / Danger Buttons */

[data-ui-theme^="shadcn"] .btn-danger,

[data-ui-theme^="shadcn"] .btn-outline-danger {

    background-color: hsl(var(--destructive)) !important;

    color: hsl(var(--destructive-foreground)) !important;

    border: 1px solid hsl(var(--destructive)) !important;

    border-radius: 50rem !important;

}



[data-ui-theme^="shadcn"] .btn-danger:hover {

    background-color: rgba(127, 29, 29, 0.85) !important;

}



/* Standardize all button paddings & heights */

[data-ui-theme^="shadcn"] .btn {

    font-size: 0.875rem !important;

    border-radius: 50rem !important;

    transition: all 0.15s ease-in-out !important;

}



/* Button Group / Segmented Pills: Curved Pill Outlines and Pill Buttons */

[data-ui-theme^="shadcn"] .btn-group {

    background: hsl(var(--card)) !important;

    border: 1px solid hsl(var(--border)) !important;

    border-radius: 50rem !important;

    padding: 3px !important;

}



[data-ui-theme^="shadcn"] .btn-group .btn {

    border: none !important;

    border-radius: 50rem !important;

}



[data-ui-theme^="shadcn"] .btn-group .btn.btn-primary,

[data-ui-theme^="shadcn"] .btn-group .btn.active {

    background-color: hsl(var(--primary)) !important;

    color: hsl(var(--primary-foreground)) !important;

}



[data-ui-theme^="shadcn"] .btn-group .btn.btn-primary *,

[data-ui-theme^="shadcn"] .btn-group .btn.active * {

    color: hsl(var(--primary-foreground)) !important;

}



/* Container Border Radius Standardization */

[data-ui-theme^="shadcn"] .rounded-4,

[data-ui-theme^="shadcn"] .rounded-3 {

    border-radius: var(--radius) !important;

}



/* Select Dropdown Options */

[data-ui-theme^="shadcn"] select option {

    background-color: #18181b !important;

    color: hsl(var(--foreground)) !important;

}



/* ATM Strike Row Accent */

[data-ui-theme^="shadcn"] tr.table-active {

    background: rgba(255, 255, 255, 0.08) !important;

    border-top: 1px solid rgba(255, 255, 255, 0.25) !important;

    border-bottom: 1px solid rgba(255, 255, 255, 0.25) !important;

}



/* --- Form Controls & Inputs (from Reference Image) --- */

[data-ui-theme^="shadcn"] .form-control,

[data-ui-theme^="shadcn"] .admin-form-control,

[data-ui-theme^="shadcn"] .form-select,

[data-ui-theme^="shadcn"] input[type="text"],

[data-ui-theme^="shadcn"] input[type="email"],

[data-ui-theme^="shadcn"] input[type="password"],

[data-ui-theme^="shadcn"] input[type="number"],

[data-ui-theme^="shadcn"] textarea {

    background-color: hsl(var(--background)) !important;

    border: 1px solid hsl(var(--input)) !important;

    color: hsl(var(--foreground)) !important;

    border-radius: calc(var(--radius) - 2px) !important;

    font-size: 0.875rem !important;

    padding: 8px 12px !important;

    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;

}



[data-ui-theme^="shadcn"] .form-control::placeholder,

[data-ui-theme^="shadcn"] input::placeholder,

[data-ui-theme^="shadcn"] textarea::placeholder {

    color: hsl(var(--muted-foreground)) !important;

    opacity: 0.7 !important;

}



[data-ui-theme^="shadcn"] .form-control:focus,

[data-ui-theme^="shadcn"] .form-select:focus,

[data-ui-theme^="shadcn"] input:focus,

[data-ui-theme^="shadcn"] textarea:focus {

    border-color: rgba(255, 255, 255, 0.4) !important;

    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4) !important;

    outline: none !important;

}



/* Form Switches (from Reference Image) */

[data-ui-theme^="shadcn"] .form-check-input[type="checkbox"] {

    background-color: hsl(var(--background)) !important;

    border: 1px solid hsl(var(--border)) !important;

    border-radius: 4px !important;

}



[data-ui-theme^="shadcn"] .form-check-input:checked {

    background-color: hsl(var(--primary)) !important;

    border-color: hsl(var(--primary)) !important;

}



[data-ui-theme^="shadcn"] .form-switch .form-check-input {

    border-radius: 9999px !important;

    background-color: hsl(var(--secondary)) !important;

    border-color: hsl(var(--border)) !important;

}



[data-ui-theme^="shadcn"] .form-switch .form-check-input:checked {

    background-color: hsl(var(--primary)) !important;

    border-color: hsl(var(--primary)) !important;

}



/* --- Badges & Metric Indicators --- */

[data-ui-theme^="shadcn"] .badge {

    font-weight: 500 !important;

    font-size: 0.75rem !important;

    letter-spacing: 0.02em !important;

    border-radius: 9999px !important;

    padding: 3px 10px !important;

}



[data-ui-theme^="shadcn"] .badge:not([class*="bg-"]):not([class*="text-"]) {

    background-color: hsl(var(--secondary)) !important;

    color: hsl(var(--secondary-foreground)) !important;

    border: 1px solid hsl(var(--border)) !important;

}



[data-ui-theme^="shadcn"] .metric-card-badge {

    background: hsl(var(--secondary)) !important;

    color: hsl(var(--secondary-foreground)) !important;

    border: 1px solid hsl(var(--border)) !important;

    border-radius: 9999px !important;

    padding: 3px 10px !important;

    font-size: 0.75rem !important;

    font-weight: 500 !important;

}



/* Trend Badges */

[data-ui-theme^="shadcn"] .trend-badge.trend-up {

    background: rgba(16, 185, 129, 0.12) !important;

    border: 1px solid rgba(16, 185, 129, 0.25) !important;

    color: #34d399 !important;

}



[data-ui-theme^="shadcn"] .trend-badge.trend-down {

    background: rgba(239, 68, 68, 0.12) !important;

    border: 1px solid rgba(239, 68, 68, 0.25) !important;

    color: #f87171 !important;

}



/* --- Sidebar Navigation (Glassmorphic Theme Match across Modes) --- */

[data-ui-theme^="shadcn"] #sidebar,

[data-ui-theme^="shadcn"] .sidebar-wrapper {

    background-color: var(--glass-bg, hsla(var(--card), 0.88)) !important;

    backdrop-filter: blur(20px) saturate(180%) !important;

    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;

    border-right: 1px solid hsl(var(--border)) !important;

    box-shadow: none !important;

}



[data-theme="light"][data-ui-theme^="shadcn"] #sidebar,

[data-theme="light"][data-ui-theme^="shadcn"] .sidebar-wrapper {

    background-color: var(--glass-bg, rgba(255, 255, 255, 0.92)) !important;

    backdrop-filter: blur(20px) saturate(180%) !important;

    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;

    border-right: 1px solid #e4e4e7 !important;

    box-shadow: none !important;

}



[data-ui-theme^="shadcn"] .sidebar-brand,

[data-theme="light"][data-ui-theme^="shadcn"] .sidebar-brand {

    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;

}



[data-ui-theme^="shadcn"] .sidebar-brand-name,

[data-theme="light"][data-ui-theme^="shadcn"] .sidebar-brand-name {

    color: #fafafa !important;

    font-weight: 700 !important;

    letter-spacing: -0.02em !important;

}



[data-ui-theme^="shadcn"] .sidebar-menu-title,

[data-theme="light"][data-ui-theme^="shadcn"] .sidebar-menu-title {

    color: #71717a !important;

}



[data-ui-theme^="shadcn"] .sidebar-menu-link,

[data-theme="light"][data-ui-theme^="shadcn"] .sidebar-menu-link {

    color: #a1a1aa !important;

    border: none !important;

    border-radius: calc(var(--radius) - 2px) !important;

    padding: 8px 12px !important;

    margin: 2px 8px !important;

    transition: all 0.15s ease !important;

}



[data-ui-theme^="shadcn"] .sidebar-menu-link:hover,

[data-theme="light"][data-ui-theme^="shadcn"] .sidebar-menu-link:hover {

    background-color: rgba(255, 255, 255, 0.05) !important;

    color: #fafafa !important;

}



[data-ui-theme^="shadcn"] .sidebar-menu-link.active,

[data-theme="light"][data-ui-theme^="shadcn"] .sidebar-menu-link.active {

    background-color: #27272a !important;

    color: #fafafa !important;

    font-weight: 500 !important;

    border-left: none !important;

    box-shadow: none !important;

}



/* Sidebar Icons & Utility Classes (Identical High-Contrast Crisp Chrome in Light & Dark Mode) */

[data-ui-theme^="shadcn"] .sidebar-wrapper .sidebar-menu-link i,

[data-ui-theme^="shadcn"] .sidebar-wrapper .sidebar-menu-link .material-icons,

[data-theme="light"][data-ui-theme^="shadcn"] .sidebar-wrapper .sidebar-menu-link i,

[data-theme="light"][data-ui-theme^="shadcn"] .sidebar-wrapper .sidebar-menu-link .material-icons {

    font-size: 1.15rem !important;

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    width: 20px !important;

    height: 20px !important;

    margin-right: 10px !important;

    flex-shrink: 0 !important;

    opacity: 0.9 !important;

    transition: color 0.15s ease, opacity 0.15s ease !important;

}



[data-ui-theme^="shadcn"] .sidebar-wrapper .sidebar-menu-link:hover i,

[data-ui-theme^="shadcn"] .sidebar-wrapper .sidebar-menu-link:hover .material-icons,

[data-theme="light"][data-ui-theme^="shadcn"] .sidebar-wrapper .sidebar-menu-link:hover i,

[data-theme="light"][data-ui-theme^="shadcn"] .sidebar-wrapper .sidebar-menu-link:hover .material-icons,

[data-ui-theme^="shadcn"] .sidebar-wrapper .sidebar-menu-link.active i,

[data-ui-theme^="shadcn"] .sidebar-wrapper .sidebar-menu-link.active .material-icons,

[data-theme="light"][data-ui-theme^="shadcn"] .sidebar-wrapper .sidebar-menu-link.active i,

[data-theme="light"][data-ui-theme^="shadcn"] .sidebar-wrapper .sidebar-menu-link.active .material-icons {

    opacity: 1 !important;

}



/* Ensure vibrant colored utility classes never invert or darken in light mode within the sidebar */

[data-ui-theme^="shadcn"] .sidebar-wrapper .text-primary,

[data-theme="light"][data-ui-theme^="shadcn"] .sidebar-wrapper .text-primary {

    color: #38bdf8 !important;

}

[data-ui-theme^="shadcn"] .sidebar-wrapper .text-success,

[data-theme="light"][data-ui-theme^="shadcn"] .sidebar-wrapper .text-success {

    color: #4ade80 !important;

}

[data-ui-theme^="shadcn"] .sidebar-wrapper .text-info,

[data-theme="light"][data-ui-theme^="shadcn"] .sidebar-wrapper .text-info {

    color: #38bdf8 !important;

}

[data-ui-theme^="shadcn"] .sidebar-wrapper .text-warning,

[data-theme="light"][data-ui-theme^="shadcn"] .sidebar-wrapper .text-warning {

    color: #facc15 !important;

}

[data-ui-theme^="shadcn"] .sidebar-wrapper .text-danger,

[data-theme="light"][data-ui-theme^="shadcn"] .sidebar-wrapper .text-danger {

    color: #f87171 !important;

}

[data-ui-theme^="shadcn"] .sidebar-wrapper .text-secondary,

[data-theme="light"][data-ui-theme^="shadcn"] .sidebar-wrapper .text-secondary {

    color: #a1a1aa !important;

}

[data-ui-theme^="shadcn"] .sidebar-wrapper .text-muted,

[data-theme="light"][data-ui-theme^="shadcn"] .sidebar-wrapper .text-muted {

    color: #a1a1aa !important;

}



[data-ui-theme^="shadcn"] .sidebar-profile {

    background-color: rgba(255, 255, 255, 0.03) !important;

    border: 1px solid rgba(255, 255, 255, 0.08) !important;

    backdrop-filter: blur(12px) !important;

    -webkit-backdrop-filter: blur(12px) !important;

}



[data-theme="light"][data-ui-theme^="shadcn"] .sidebar-profile {

    background-color: rgba(0, 0, 0, 0.03) !important;

    border: 1px solid rgba(0, 0, 0, 0.08) !important;

    backdrop-filter: blur(12px) !important;

    -webkit-backdrop-filter: blur(12px) !important;

}



[data-ui-theme^="shadcn"] .sidebar-profile-name,

[data-theme="light"][data-ui-theme^="shadcn"] .sidebar-profile-name {

    color: #fafafa !important;

}



[data-ui-theme^="shadcn"] .sidebar-profile-email,

[data-theme="light"][data-ui-theme^="shadcn"] .sidebar-profile-email {

    color: #a1a1aa !important;

}



[data-ui-theme^="shadcn"] #adminSidebarActivePill,

[data-ui-theme^="shadcn"] #userSidebarActivePill {

    display: none !important;

}



/* --- Top Navbar (Always Dark in Shadcn Theme, even in Light Mode) --- */

[data-ui-theme^="shadcn"] .navbar-custom,

[data-ui-theme^="shadcn"] header.navbar-custom,

[data-theme="light"][data-ui-theme^="shadcn"] .navbar-custom,

[data-theme="light"][data-ui-theme^="shadcn"] header.navbar-custom {

    background-color: rgba(9, 9, 11, 0.95) !important;

    backdrop-filter: blur(12px) !important;

    -webkit-backdrop-filter: blur(12px) !important;

    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;

    box-shadow: none !important;

}



[data-ui-theme^="shadcn"] .navbar-custom *,

[data-theme="light"][data-ui-theme^="shadcn"] .navbar-custom * {

    color: #fafafa;

}



[data-ui-theme^="shadcn"] .navbar-search-wrapper,

[data-theme="light"][data-ui-theme^="shadcn"] .navbar-search-wrapper {

    background-color: #18181b !important;

    border: 1px solid rgba(255, 255, 255, 0.12) !important;

}



[data-ui-theme^="shadcn"] .navbar-search-input,

[data-theme="light"][data-ui-theme^="shadcn"] .navbar-search-input {

    background-color: transparent !important;

    color: #fafafa !important;

}



[data-ui-theme^="shadcn"] .navbar-search-input::placeholder,

[data-theme="light"][data-ui-theme^="shadcn"] .navbar-search-input::placeholder {

    color: #71717a !important;

}



[data-ui-theme^="shadcn"] .navbar-search-btn,

[data-theme="light"][data-ui-theme^="shadcn"] .navbar-search-btn {

    color: #a1a1aa !important;

}



[data-ui-theme^="shadcn"] .navbar-action-btn,

[data-ui-theme^="shadcn"] .btn-quick-action,

[data-ui-theme^="shadcn"] .sidebar-toggle-btn,

[data-ui-theme^="shadcn"] .btn-desktop-toggle,

[data-theme="light"][data-ui-theme^="shadcn"] .navbar-action-btn,

[data-theme="light"][data-ui-theme^="shadcn"] .btn-quick-action,

[data-theme="light"][data-ui-theme^="shadcn"] .sidebar-toggle-btn,

[data-theme="light"][data-ui-theme^="shadcn"] .btn-desktop-toggle {

    background-color: rgba(255, 255, 255, 0.05) !important;

    border: 1px solid rgba(255, 255, 255, 0.1) !important;

    color: #fafafa !important;

}



[data-ui-theme^="shadcn"] .navbar-profile-btn,

[data-theme="light"][data-ui-theme^="shadcn"] .navbar-profile-btn {

    background-color: transparent !important;

    border: none !important;

    color: #fafafa !important;

}



[data-ui-theme^="shadcn"] .dropdown-menu-profile,

[data-ui-theme^="shadcn"] .dropdown-menu-notification,

[data-ui-theme^="shadcn"] .dropdown-menu-quick-action,

[data-theme="light"][data-ui-theme^="shadcn"] .dropdown-menu-profile,

[data-theme="light"][data-ui-theme^="shadcn"] .dropdown-menu-notification,

[data-theme="light"][data-ui-theme^="shadcn"] .dropdown-menu-quick-action {

    background-color: rgba(14, 18, 26, 0.95) !important;
    backdrop-filter: blur(12px) !important;

    border: 1px solid rgba(255, 255, 255, 0.1) !important;

    color: #fafafa !important;

}



[data-ui-theme^="shadcn"] .dropdown-menu-profile .dropdown-item,

[data-ui-theme^="shadcn"] .dropdown-menu-quick-action .dropdown-item,

[data-theme="light"][data-ui-theme^="shadcn"] .dropdown-menu-profile .dropdown-item,

[data-theme="light"][data-ui-theme^="shadcn"] .dropdown-menu-quick-action .dropdown-item {

    color: #fafafa !important;

}



[data-ui-theme^="shadcn"] .dropdown-menu-profile .dropdown-item:hover,

[data-ui-theme^="shadcn"] .dropdown-menu-quick-action .dropdown-item:hover,

[data-theme="light"][data-ui-theme^="shadcn"] .dropdown-menu-profile .dropdown-item:hover,

[data-theme="light"][data-ui-theme^="shadcn"] .dropdown-menu-quick-action .dropdown-item:hover {

    background-color: #27272a !important;

    color: #ffffff !important;

}



/* --- Tables & Telemetry Lists --- */

[data-ui-theme^="shadcn"] .table,

[data-ui-theme^="shadcn"] .table-custom {

    background-color: transparent !important;

    color: hsl(var(--foreground)) !important;

    border-collapse: collapse !important;

    width: 100% !important;

}



[data-ui-theme^="shadcn"] .table th,

[data-ui-theme^="shadcn"] .table-custom th {

    background-color: transparent !important;

    color: hsl(var(--muted-foreground)) !important;

    font-size: 0.75rem !important;

    font-weight: 500 !important;

    text-transform: uppercase !important;

    letter-spacing: 0.05em !important;

    border-bottom: 1px solid hsl(var(--border)) !important;

    border-top: none !important;

    padding: 10px 14px !important;

}



[data-ui-theme^="shadcn"] .table td,

[data-ui-theme^="shadcn"] .table-custom td {

    background-color: transparent !important;

    color: hsl(var(--foreground)) !important;

    border-bottom: 1px solid hsl(var(--border)) !important;

    border-top: none !important;

    padding: 12px 14px !important;

}



[data-ui-theme^="shadcn"] .table tbody tr:hover td,

[data-ui-theme^="shadcn"] .table-custom tbody tr:hover td {

    background-color: rgba(255, 255, 255, 0.03) !important;

}



/* --- Segmented Controls & Nav Pills --- */

[data-ui-theme^="shadcn"] .nav-pills {

    background-color: hsl(var(--background)) !important;

    border: 1px solid hsl(var(--border)) !important;

    border-radius: var(--radius) !important;

    padding: 3px !important;

}



[data-ui-theme^="shadcn"] .nav-pills .nav-link {

    color: hsl(var(--muted-foreground)) !important;

    border-radius: calc(var(--radius) - 3px) !important;

    border: none !important;

    font-weight: 500 !important;

    padding: 6px 14px !important;

    transition: all 0.15s ease !important;

}



[data-ui-theme^="shadcn"] .nav-pills .nav-link:hover {

    color: hsl(var(--foreground)) !important;

}



[data-ui-theme^="shadcn"] .nav-pills .nav-link.active {

    background-color: hsl(var(--secondary)) !important;

    color: hsl(var(--foreground)) !important;

    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) !important;

}



/* --- Modals & Dialogs (Base / Dark Mode) --- */

[data-ui-theme^="shadcn"] .modal-backdrop {

    background-color: rgba(0, 0, 0, 0.8) !important;

    backdrop-filter: blur(4px) !important;

    -webkit-backdrop-filter: blur(4px) !important;

}



[data-ui-theme^="shadcn"] .modal-content {

    background-color: hsl(var(--card)) !important;

    background: hsl(var(--card)) !important;

    color: hsl(var(--foreground)) !important;

    border: 1px solid hsl(var(--border)) !important;

    border-radius: var(--radius) !important;

    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 8px 10px -6px rgba(0, 0, 0, 0.6), 0 0 0 1px hsl(var(--border)) !important;

    backdrop-filter: none !important;

    -webkit-backdrop-filter: none !important;

}



[data-ui-theme^="shadcn"] .modal-header {

    background-color: transparent !important;

    border-bottom: 1px solid hsl(var(--border)) !important;

    padding: 16px 20px !important;

}



[data-ui-theme^="shadcn"] .modal-header .modal-title,

[data-ui-theme^="shadcn"] .modal-header h5,

[data-ui-theme^="shadcn"] .modal-header h6 {

    color: hsl(var(--foreground)) !important;

    font-size: 1.125rem !important;

    font-weight: 600 !important;

    letter-spacing: -0.02em !important;

}



[data-ui-theme^="shadcn"] .modal-body {

    background-color: transparent !important;

    color: hsl(var(--foreground)) !important;

    padding: 20px !important;

}



[data-ui-theme^="shadcn"] .modal-footer {

    background-color: transparent !important;

    border-top: 1px solid hsl(var(--border)) !important;

    padding: 14px 20px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: flex-end !important;

    gap: 8px !important;

}



[data-ui-theme^="shadcn"] .modal-footer.border-0 {

    border-top: none !important;

}



[data-ui-theme^="shadcn"] .modal .btn-close,

[data-ui-theme^="shadcn"] .modal .btn-close-white {

    filter: invert(1) grayscale(100%) brightness(200%) !important;

    opacity: 0.65 !important;

    transition: opacity 0.15s ease !important;

}



[data-ui-theme^="shadcn"] .modal .btn-close:hover,

[data-ui-theme^="shadcn"] .modal .btn-close-white:hover {

    opacity: 1 !important;

}



/* --- Shadcn UI Form Labels (Global Standard) --- */

[data-ui-theme^="shadcn"] .form-label,

[data-ui-theme^="shadcn"] .modal .form-label,

[data-ui-theme^="shadcn"] label:not(.form-check-label):not(.btn):not(.badge):not(.edit-modal-rule-item) {

    color: hsl(var(--foreground)) !important;

    display: inline-flex !important;

    align-items: center !important;

    gap: 6px !important;

    padding: 0 !important;

    padding-top: 0 !important;

    padding-bottom: 0 !important;

    margin-top: 0 !important;

    margin-bottom: 8px !important;

    font-size: 0.75rem !important;

    font-weight: 600 !important;

    letter-spacing: 0.04em !important;

    line-height: 1.25 !important;

}



[data-ui-theme^="shadcn"] .form-label .material-icons,

[data-ui-theme^="shadcn"] label:not(.form-check-label):not(.btn):not(.badge):not(.edit-modal-rule-item) .material-icons {

    font-size: 0.90rem !important;

    line-height: 1 !important;

    margin: 0 !important;

    vertical-align: middle !important;

}



[data-ui-theme^="shadcn"] .modal .form-control,

[data-ui-theme^="shadcn"] .modal .form-select {

    background-color: hsl(var(--background)) !important;

    border: 1px solid hsl(var(--input)) !important;

    color: hsl(var(--foreground)) !important;

}



/* --- Shadcn UI Alerts (Base / Dark Mode) --- */

[data-ui-theme^="shadcn"] .alert {

    position: relative !important;

    width: 100% !important;

    border-radius: var(--radius) !important;

    border: 1px solid hsl(var(--border)) !important;

    padding: 12px 16px !important;

    font-size: 0.875rem !important;

    line-height: 1.5 !important;

    background-color: hsl(var(--card)) !important;

    color: hsl(var(--foreground)) !important;

    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) !important;

}



[data-ui-theme^="shadcn"] .alert-heading,

[data-ui-theme^="shadcn"] .alert .alert-title,

[data-ui-theme^="shadcn"] .alert strong,

[data-ui-theme^="shadcn"] .alert b {

    font-weight: 600 !important;

    letter-spacing: -0.01em !important;

    color: inherit !important;

}



[data-ui-theme^="shadcn"] .alert-danger,

[data-ui-theme^="shadcn"] .alert-destructive,

[data-ui-theme^="shadcn"] .alert.bg-danger {

    background-color: rgba(239, 68, 68, 0.10) !important;

    border: 1px solid rgba(239, 68, 68, 0.30) !important;

    color: #f87171 !important;

}



[data-ui-theme^="shadcn"] .alert-danger *,

[data-ui-theme^="shadcn"] .alert-destructive * {

    color: inherit !important;

}



[data-ui-theme^="shadcn"] .alert-success,

[data-ui-theme^="shadcn"] .alert.bg-success {

    background-color: rgba(16, 185, 129, 0.10) !important;

    border: 1px solid rgba(16, 185, 129, 0.30) !important;

    color: #34d399 !important;

}



[data-ui-theme^="shadcn"] .alert-success * {

    color: inherit !important;

}



[data-ui-theme^="shadcn"] .alert-warning,

[data-ui-theme^="shadcn"] .alert.bg-warning {

    background-color: rgba(245, 158, 11, 0.10) !important;

    border: 1px solid rgba(245, 158, 11, 0.30) !important;

    color: #fbbf24 !important;

}



[data-ui-theme^="shadcn"] .alert-warning * {

    color: inherit !important;

}



[data-ui-theme^="shadcn"] .alert-info,

[data-ui-theme^="shadcn"] .alert-primary,

[data-ui-theme^="shadcn"] .alert.bg-info,

[data-ui-theme^="shadcn"] .alert.bg-primary {

    background-color: rgba(56, 189, 248, 0.08) !important;

    border: 1px solid rgba(56, 189, 248, 0.25) !important;

    color: #38bdf8 !important;

}



[data-ui-theme^="shadcn"] .alert-info *,

[data-ui-theme^="shadcn"] .alert-primary * {

    color: inherit !important;

}



[data-ui-theme^="shadcn"] .alert-secondary,

[data-ui-theme^="shadcn"] .alert.bg-secondary {

    background-color: hsl(var(--secondary)) !important;

    border: 1px solid hsl(var(--border)) !important;

    color: hsl(var(--secondary-foreground)) !important;

}



/* --- Tooltips & Popovers (Base / Dark Mode) --- */

[data-ui-theme^="shadcn"] .tooltip {
    --bs-tooltip-bg: rgba(14, 18, 26, 0.95) !important;
    --bs-tooltip-color: #f8fafc !important;
    --bs-tooltip-border-color: rgba(0, 242, 254, 0.35) !important;
    --bs-tooltip-opacity: 1 !important;
    z-index: 1000000 !important;
}

[data-ui-theme^="shadcn"] .tooltip .tooltip-inner {
    background-color: rgba(14, 18, 26, 0.95) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    color: #f8fafc !important;
    border: 1px solid rgba(0, 242, 254, 0.35) !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.65), 0 0 12px rgba(0, 242, 254, 0.15) !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    padding: 6px 12px !important;
}




[data-ui-theme^="shadcn"] .popover {

    background-color: hsl(var(--popover)) !important;

    border: 1px solid hsl(var(--border)) !important;

    border-radius: var(--radius) !important;

    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5) !important;

}



[data-ui-theme^="shadcn"] .popover-header {

    background-color: transparent !important;

    border-bottom: 1px solid hsl(var(--border)) !important;

    color: hsl(var(--foreground)) !important;

    font-weight: 600 !important;

    font-size: 0.875rem !important;

    padding: 10px 14px !important;

}



[data-ui-theme^="shadcn"] .popover-body {

    color: hsl(var(--foreground)) !important;

    font-size: 0.875rem !important;

    padding: 12px 14px !important;

}



/* --- Toasts --- */

[data-ui-theme^="shadcn"] .toast {

    background-color: hsl(var(--card)) !important;

    border: 1px solid hsl(var(--border)) !important;

    border-radius: var(--radius) !important;

    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5) !important;

    color: hsl(var(--foreground)) !important;

}



[data-ui-theme^="shadcn"] .toast-header {

    background-color: transparent !important;

    border-bottom: 1px solid hsl(var(--border)) !important;

    color: hsl(var(--foreground)) !important;

}



[data-ui-theme^="shadcn"] .toast-body {

    color: hsl(var(--foreground)) !important;

}



/* --- Offcanvas / Slide-in Drawers --- */

[data-ui-theme^="shadcn"] .offcanvas {

    background-color: hsl(var(--card)) !important;

    border-color: hsl(var(--border)) !important;

    color: hsl(var(--foreground)) !important;

}



[data-ui-theme^="shadcn"] .offcanvas-header {

    border-bottom: 1px solid hsl(var(--border)) !important;

}



[data-ui-theme^="shadcn"] .offcanvas-header .btn-close {

    filter: invert(1) grayscale(100%) brightness(200%) !important;

}



/* --- Input Groups & Pagination --- */

[data-ui-theme^="shadcn"] .input-group-text {

    background-color: hsl(var(--secondary)) !important;

    border: 1px solid hsl(var(--input)) !important;

    color: hsl(var(--muted-foreground)) !important;

    font-size: 0.875rem !important;

}



[data-ui-theme^="shadcn"] .form-floating > label {

    color: hsl(var(--muted-foreground)) !important;

}



[data-ui-theme^="shadcn"] .pagination .page-link {

    background-color: hsl(var(--card)) !important;

    border: 1px solid hsl(var(--border)) !important;

    color: hsl(var(--foreground)) !important;

    border-radius: calc(var(--radius) - 4px) !important;

    margin: 0 2px !important;

}



[data-ui-theme^="shadcn"] .pagination .page-item.active .page-link {

    background-color: hsl(var(--primary)) !important;

    color: hsl(var(--primary-foreground)) !important;

    border-color: hsl(var(--primary)) !important;

}



/* --- Dropdown Menus (Base / Dark Mode) --- */

[data-ui-theme^="shadcn"] .dropdown-menu {

    background-color: hsl(var(--card)) !important;

    color: hsl(var(--foreground)) !important;

    border: 1px solid hsl(var(--border)) !important;

    border-radius: var(--radius) !important;

    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.7), 0 0 0 1px hsl(var(--border)) !important;

}



[data-ui-theme^="shadcn"] .dropdown-item {

    color: hsl(var(--foreground)) !important;

    border-radius: calc(var(--radius) - 4px) !important;

    padding: 6px 12px !important;

    margin: 2px 4px !important;

}



[data-ui-theme^="shadcn"] .dropdown-item:hover {

    background-color: hsl(var(--secondary)) !important;

    color: hsl(var(--foreground)) !important;

}



[data-ui-theme^="shadcn"] .dropdown-divider {

    border-color: hsl(var(--border)) !important;

}



/* Hide Ambient Neon Blobs & Aurora in Shadcn Mode */

[data-ui-theme^="shadcn"] .hero-glow-blob,

[data-ui-theme^="shadcn"] .ambient-blob-container,

[data-ui-theme^="shadcn"] .spark-aurora-bg {

    display: none !important;

}



/* ====================================================================

   4. HYBRID SHADCN LIGHT MODE (Content Section Only)

   Top Bar & Sidebar stay in Dark Mode (#09090b).

   Main content renders in clean, high-contrast Shadcn Light mode.

   ==================================================================== */

[data-theme="light"][data-ui-theme^="shadcn"] body,

html[data-theme="light"][data-ui-theme^="shadcn"] body,

[data-theme="light"][data-ui-theme^="shadcn"] #mainWrapper,

[data-theme="light"][data-ui-theme^="shadcn"] .main-wrapper,

[data-theme="light"][data-ui-theme^="shadcn"] #app-main-container,

[data-theme="light"][data-ui-theme^="shadcn"] .user-portal-container,

[data-theme="light"][data-ui-theme^="shadcn"] .admin-portal-container {

    background-color: #f4f4f5 !important;

    background-image: none !important;

    color: #09090b !important;

}



/* Light Mode Cards in Content */

[data-theme="light"][data-ui-theme^="shadcn"] #app-main-container .card,

[data-theme="light"][data-ui-theme^="shadcn"] #app-main-container .glass-card,

[data-theme="light"][data-ui-theme^="shadcn"] #app-main-container .theme-metric-card,

[data-theme="light"][data-ui-theme^="shadcn"] #app-main-container .alert-green-card,

[data-theme="light"][data-ui-theme^="shadcn"] #app-main-container .bg-card-custom,

[data-theme="light"][data-ui-theme^="shadcn"] .user-portal-container .card,

[data-theme="light"][data-ui-theme^="shadcn"] .user-portal-container .glass-card,

[data-theme="light"][data-ui-theme^="shadcn"] .user-portal-container .theme-metric-card,

[data-theme="light"][data-ui-theme^="shadcn"] .user-portal-container .alert-green-card,

[data-theme="light"][data-ui-theme^="shadcn"] .user-portal-container .bg-card-custom {

    background-color: #ffffff !important;

    background-image: none !important;

    border: 1px solid #e4e4e7 !important;

    border-radius: var(--radius) !important;

    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05) !important;

    color: #09090b !important;

}



/* Light Mode Card Headers, Titles & Subtitles in Content */

[data-theme="light"][data-ui-theme^="shadcn"] #app-main-container .card-header,

[data-theme="light"][data-ui-theme^="shadcn"] .user-portal-container .card-header {

    background-color: transparent !important;

    border-bottom: 1px solid #e4e4e7 !important;

}



[data-theme="light"][data-ui-theme^="shadcn"] #app-main-container .card-title,

[data-theme="light"][data-ui-theme^="shadcn"] #app-main-container .page-title,

[data-theme="light"][data-ui-theme^="shadcn"] #app-main-container .theme-text-main,

[data-theme="light"][data-ui-theme^="shadcn"] #app-main-container h1,

[data-theme="light"][data-ui-theme^="shadcn"] #app-main-container h2,

[data-theme="light"][data-ui-theme^="shadcn"] #app-main-container h3,

[data-theme="light"][data-ui-theme^="shadcn"] #app-main-container h4,

[data-theme="light"][data-ui-theme^="shadcn"] #app-main-container h5,

[data-theme="light"][data-ui-theme^="shadcn"] #app-main-container h6,

[data-theme="light"][data-ui-theme^="shadcn"] #app-main-container .metric-card-value,

[data-theme="light"][data-ui-theme^="shadcn"] .user-portal-container .card-title,

[data-theme="light"][data-ui-theme^="shadcn"] .user-portal-container .page-title,

[data-theme="light"][data-ui-theme^="shadcn"] .user-portal-container .theme-text-main,

[data-theme="light"][data-ui-theme^="shadcn"] .user-portal-container h1,

[data-theme="light"][data-ui-theme^="shadcn"] .user-portal-container h2,

[data-theme="light"][data-ui-theme^="shadcn"] .user-portal-container h3,

[data-theme="light"][data-ui-theme^="shadcn"] .user-portal-container h4,

[data-theme="light"][data-ui-theme^="shadcn"] .user-portal-container h5,

[data-theme="light"][data-ui-theme^="shadcn"] .user-portal-container h6,

[data-theme="light"][data-ui-theme^="shadcn"] .user-portal-container .metric-card-value {

    color: #09090b !important;

}



[data-theme="light"][data-ui-theme^="shadcn"] #app-main-container .card-subtitle,

[data-theme="light"][data-ui-theme^="shadcn"] #app-main-container .page-subtitle,

[data-theme="light"][data-ui-theme^="shadcn"] #app-main-container .theme-text-muted,

[data-theme="light"][data-ui-theme^="shadcn"] #app-main-container .text-muted,

[data-theme="light"][data-ui-theme^="shadcn"] #app-main-container .metric-card-date,

[data-theme="light"][data-ui-theme^="shadcn"] .user-portal-container .card-subtitle,

[data-theme="light"][data-ui-theme^="shadcn"] .user-portal-container .page-subtitle,

[data-theme="light"][data-ui-theme^="shadcn"] .user-portal-container .theme-text-muted,

[data-theme="light"][data-ui-theme^="shadcn"] .user-portal-container .text-muted,

[data-theme="light"][data-ui-theme^="shadcn"] .user-portal-container .metric-card-date {

    color: #71717a !important;

}



[data-theme="light"][data-ui-theme^="shadcn"] #app-main-container .metric-card-footer,

[data-theme="light"][data-ui-theme^="shadcn"] .user-portal-container .metric-card-footer {

    border-top: 1px solid #e4e4e7 !important;

    color: #71717a !important;

}



/* Light Mode Primary Button in Content (Solid Black Zinc #18181b with White Text) */

[data-theme="light"][data-ui-theme^="shadcn"] #app-main-container .hero-btn-primary,

[data-theme="light"][data-ui-theme^="shadcn"] #app-main-container .btn-submit,

[data-theme="light"][data-ui-theme^="shadcn"] #app-main-container .btn-primary,

[data-theme="light"][data-ui-theme^="shadcn"] .user-portal-container .hero-btn-primary,

[data-theme="light"][data-ui-theme^="shadcn"] .user-portal-container .btn-submit,

[data-theme="light"][data-ui-theme^="shadcn"] .user-portal-container .btn-primary {

    background-color: #18181b !important;

    color: #fafafa !important;

    border: 1px solid #18181b !important;

}



[data-theme="light"][data-ui-theme^="shadcn"] #app-main-container .btn-primary *,

[data-theme="light"][data-ui-theme^="shadcn"] .user-portal-container .btn-primary * {

    color: #fafafa !important;

}



[data-theme="light"][data-ui-theme^="shadcn"] #app-main-container .btn-primary:hover,

[data-theme="light"][data-ui-theme^="shadcn"] .user-portal-container .btn-primary:hover {

    background-color: #27272a !important;

    color: #fafafa !important;

}



/* Light Mode Secondary & Pill Buttons in Content */

[data-theme="light"][data-ui-theme^="shadcn"] #app-main-container .btn-secondary,

[data-theme="light"][data-ui-theme^="shadcn"] #app-main-container .theme-pill-btn,

[data-theme="light"][data-ui-theme^="shadcn"] #app-main-container .btn-date-picker,

[data-theme="light"][data-ui-theme^="shadcn"] .user-portal-container .btn-secondary,

[data-theme="light"][data-ui-theme^="shadcn"] .user-portal-container .theme-pill-btn,

[data-theme="light"][data-ui-theme^="shadcn"] .user-portal-container .btn-date-picker {

    background-color: #f4f4f5 !important;

    color: #18181b !important;

    border: 1px solid #e4e4e7 !important;

}



[data-theme="light"][data-ui-theme^="shadcn"] #app-main-container .btn-secondary:hover,

[data-theme="light"][data-ui-theme^="shadcn"] #app-main-container .theme-pill-btn:hover,

[data-theme="light"][data-ui-theme^="shadcn"] #app-main-container .btn-date-picker:hover,

[data-theme="light"][data-ui-theme^="shadcn"] .user-portal-container .btn-secondary:hover,

[data-theme="light"][data-ui-theme^="shadcn"] .user-portal-container .theme-pill-btn:hover,

[data-theme="light"][data-ui-theme^="shadcn"] .user-portal-container .btn-date-picker:hover {

    background-color: #e4e4e7 !important;

    color: #09090b !important;

}



/* Light Mode Outline Buttons in Content */

[data-theme="light"][data-ui-theme^="shadcn"] #app-main-container .btn-outline-primary,

[data-theme="light"][data-ui-theme^="shadcn"] #app-main-container .btn-outline-secondary,

[data-theme="light"][data-ui-theme^="shadcn"] .user-portal-container .btn-outline-primary,

[data-theme="light"][data-ui-theme^="shadcn"] .user-portal-container .btn-outline-secondary {

    background-color: transparent !important;

    color: #09090b !important;

    border: 1px solid #e4e4e7 !important;

}



[data-theme="light"][data-ui-theme^="shadcn"] #app-main-container .btn-outline-primary:hover,

[data-theme="light"][data-ui-theme^="shadcn"] #app-main-container .btn-outline-secondary:hover,

[data-theme="light"][data-ui-theme^="shadcn"] .user-portal-container .btn-outline-primary:hover,

[data-theme="light"][data-ui-theme^="shadcn"] .user-portal-container .btn-outline-secondary:hover {

    background-color: #f4f4f5 !important;

    color: #09090b !important;

}



/* Light Mode Button Groups / Segmented Controls in Content */

[data-theme="light"][data-ui-theme^="shadcn"] #app-main-container .btn-group,

[data-theme="light"][data-ui-theme^="shadcn"] .user-portal-container .btn-group {

    background-color: #f4f4f5 !important;

    border: 1px solid #e4e4e7 !important;

}



[data-theme="light"][data-ui-theme^="shadcn"] #app-main-container .btn-group .btn.btn-primary,

[data-theme="light"][data-ui-theme^="shadcn"] #app-main-container .btn-group .btn.active,

[data-theme="light"][data-ui-theme^="shadcn"] .user-portal-container .btn-group .btn.btn-primary,

[data-theme="light"][data-ui-theme^="shadcn"] .user-portal-container .btn-group .btn.active {

    background-color: #ffffff !important;

    color: #09090b !important;

    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;

}



[data-theme="light"][data-ui-theme^="shadcn"] #app-main-container .btn-group .btn.btn-primary *,

[data-theme="light"][data-ui-theme^="shadcn"] #app-main-container .btn-group .btn.active *,

[data-theme="light"][data-ui-theme^="shadcn"] .user-portal-container .btn-group .btn.btn-primary *,

[data-theme="light"][data-ui-theme^="shadcn"] .user-portal-container .btn-group .btn.active * {

    color: #09090b !important;

}



/* Light Mode Tables in Content */

[data-theme="light"][data-ui-theme^="shadcn"] #app-main-container .table,

[data-theme="light"][data-ui-theme^="shadcn"] #app-main-container .table-custom,

[data-theme="light"][data-ui-theme^="shadcn"] .user-portal-container .table,

[data-theme="light"][data-ui-theme^="shadcn"] .user-portal-container .table-custom {

    background-color: transparent !important;

    color: #09090b !important;

}



[data-theme="light"][data-ui-theme^="shadcn"] #app-main-container .table th,

[data-theme="light"][data-ui-theme^="shadcn"] #app-main-container .table-custom th,

[data-theme="light"][data-ui-theme^="shadcn"] .user-portal-container .table th,

[data-theme="light"][data-ui-theme^="shadcn"] .user-portal-container .table-custom th {

    background-color: #f8fafc !important;

    color: #64748b !important;

    border-bottom: 1px solid #e2e8f0 !important;

}



[data-theme="light"][data-ui-theme^="shadcn"] #app-main-container .table td,

[data-theme="light"][data-ui-theme^="shadcn"] #app-main-container .table-custom td,

[data-theme="light"][data-ui-theme^="shadcn"] .user-portal-container .table td,

[data-theme="light"][data-ui-theme^="shadcn"] .user-portal-container .table-custom td {

    background-color: transparent !important;

    color: #09090b !important;

    border-bottom: 1px solid #f1f5f9 !important;

}



[data-theme="light"][data-ui-theme^="shadcn"] #app-main-container .table tbody tr:hover td,

[data-theme="light"][data-ui-theme^="shadcn"] #app-main-container .table-custom tbody tr:hover td,

[data-theme="light"][data-ui-theme^="shadcn"] .user-portal-container .table tbody tr:hover td,

[data-theme="light"][data-ui-theme^="shadcn"] .user-portal-container .table-custom tbody tr:hover td {

    background-color: #f8fafc !important;

}



/* Light Mode Option Chain Table */

[data-theme="light"][data-ui-theme^="shadcn"] tr.table-active {

    background: #f1f5f9 !important;

    border-top: 2px solid #09090b !important;

    border-bottom: 2px solid #09090b !important;

}



/* Light Mode Form Controls in Content */

[data-theme="light"][data-ui-theme^="shadcn"] #app-main-container .form-control,

[data-theme="light"][data-ui-theme^="shadcn"] #app-main-container .form-select,

[data-theme="light"][data-ui-theme^="shadcn"] #app-main-container input,

[data-theme="light"][data-ui-theme^="shadcn"] #app-main-container select,

[data-theme="light"][data-ui-theme^="shadcn"] #app-main-container textarea,

[data-theme="light"][data-ui-theme^="shadcn"] .user-portal-container .form-control,

[data-theme="light"][data-ui-theme^="shadcn"] .user-portal-container .form-select,

[data-theme="light"][data-ui-theme^="shadcn"] .user-portal-container input,

[data-theme="light"][data-ui-theme^="shadcn"] .user-portal-container select,

[data-theme="light"][data-ui-theme^="shadcn"] .user-portal-container textarea {

    background-color: #ffffff !important;

    border: 1px solid #e4e4e7 !important;

    color: #09090b !important;

}



[data-theme="light"][data-ui-theme^="shadcn"] #app-main-container select option,

[data-theme="light"][data-ui-theme^="shadcn"] .user-portal-container select option {

    background-color: #ffffff !important;

    color: #09090b !important;

}



[data-theme="light"][data-ui-theme^="shadcn"] #app-main-container .form-control:focus,

[data-theme="light"][data-ui-theme^="shadcn"] #app-main-container .form-select:focus,

[data-theme="light"][data-ui-theme^="shadcn"] .user-portal-container .form-control:focus,

[data-theme="light"][data-ui-theme^="shadcn"] .user-portal-container .form-select:focus {

    border-color: #18181b !important;

    box-shadow: 0 0 0 1px #18181b !important;

}



/* Light Mode Badges in Content */

[data-theme="light"][data-ui-theme^="shadcn"] #app-main-container .badge:not([class*="bg-"]):not([class*="text-"]),

[data-theme="light"][data-ui-theme^="shadcn"] .user-portal-container .badge:not([class*="bg-"]):not([class*="text-"]) {

    background-color: #f4f4f5 !important;

    color: #18181b !important;

    border: 1px solid #e4e4e7 !important;

}



[data-theme="light"][data-ui-theme^="shadcn"] #app-main-container .metric-card-badge,

[data-theme="light"][data-ui-theme^="shadcn"] .user-portal-container .metric-card-badge {

    background-color: #f4f4f5 !important;

    color: #18181b !important;

    border: 1px solid #e4e4e7 !important;

}



/* ====================================================================

   5. LIGHT MODE GLOBAL OVERRIDES FOR MODALS, ALERTS, TOOLTIPS & TOASTS

   Applied globally across the entire DOM (including elements outside #app-main-container)

   ==================================================================== */



/* --- Light Mode Modals & Dialogs --- */

[data-theme="light"][data-ui-theme^="shadcn"] .modal-content {

    background-color: #ffffff !important;

    background: #ffffff !important;

    color: #09090b !important;

    border: 1px solid #e4e4e7 !important;

    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05), 0 0 0 1px #e4e4e7 !important;

}



[data-theme="light"][data-ui-theme^="shadcn"] .modal-header {

    border-bottom: 1px solid #e4e4e7 !important;

}



[data-theme="light"][data-ui-theme^="shadcn"] .modal-header .modal-title,

[data-theme="light"][data-ui-theme^="shadcn"] .modal-header h5,

[data-theme="light"][data-ui-theme^="shadcn"] .modal-header h6 {

    color: #09090b !important;

}



[data-theme="light"][data-ui-theme^="shadcn"] .modal-body {

    color: #09090b !important;

}



/* Force override of hardcoded .text-white and white font colors inside Light Mode modals */

[data-theme="light"][data-ui-theme^="shadcn"] .modal .text-white,

[data-theme="light"][data-ui-theme^="shadcn"] .modal [style*="color: #fff"],

[data-theme="light"][data-ui-theme^="shadcn"] .modal [style*="color:#fff"],

[data-theme="light"][data-ui-theme^="shadcn"] .modal [style*="color: var(--theme-text-main, #fff)"],

[data-theme="light"][data-ui-theme^="shadcn"] .modal [style*="color: var(--text-main, #F1F5F9)"] {

    color: #09090b !important;

}



[data-theme="light"][data-ui-theme^="shadcn"] .modal small,

[data-theme="light"][data-ui-theme^="shadcn"] .modal .theme-text-muted,

[data-theme="light"][data-ui-theme^="shadcn"] .modal .text-muted {

    color: #71717a !important;

}



[data-theme="light"][data-ui-theme^="shadcn"] .modal-footer {

    border-top: 1px solid #e4e4e7 !important;

}



[data-theme="light"][data-ui-theme^="shadcn"] .modal-footer.border-0 {

    border-top: none !important;

}



/* Close Button in Light Mode: Dark 'x' */

[data-theme="light"][data-ui-theme^="shadcn"] .modal .btn-close,

[data-theme="light"][data-ui-theme^="shadcn"] .modal .btn-close-white {

    filter: none !important;

    opacity: 0.55 !important;

}



[data-theme="light"][data-ui-theme^="shadcn"] .modal .btn-close:hover,

[data-theme="light"][data-ui-theme^="shadcn"] .modal .btn-close-white:hover {

    opacity: 1 !important;

}



/* Light Mode Form Elements inside Modals & Components */

[data-theme="light"][data-ui-theme^="shadcn"] .form-label,

[data-theme="light"][data-ui-theme^="shadcn"] .modal .form-label,

[data-theme="light"][data-ui-theme^="shadcn"] label:not(.form-check-label):not(.btn):not(.badge):not(.edit-modal-rule-item) {

    color: #09090b !important;

    padding: 0 !important;

    padding-top: 0 !important;

    padding-bottom: 0 !important;

    margin-top: 0 !important;

    margin-bottom: 8px !important;

}



[data-theme="light"][data-ui-theme^="shadcn"] .modal .form-control,

[data-theme="light"][data-ui-theme^="shadcn"] .modal .form-select,

[data-theme="light"][data-ui-theme^="shadcn"] .modal input,

[data-theme="light"][data-ui-theme^="shadcn"] .modal select,

[data-theme="light"][data-ui-theme^="shadcn"] .modal textarea {

    background-color: #ffffff !important;

    border: 1px solid #e4e4e7 !important;

    color: #09090b !important;

}



[data-theme="light"][data-ui-theme^="shadcn"] .modal .form-control::placeholder,

[data-theme="light"][data-ui-theme^="shadcn"] .modal input::placeholder {

    color: #a1a1aa !important;

}



[data-theme="light"][data-ui-theme^="shadcn"] .modal .form-control:focus,

[data-theme="light"][data-ui-theme^="shadcn"] .modal .form-select:focus {

    border-color: #18181b !important;

    box-shadow: 0 0 0 1px #18181b !important;

}



/* Light Mode Buttons inside Modals */

[data-theme="light"][data-ui-theme^="shadcn"] .modal .btn-primary {

    background-color: #18181b !important;

    color: #fafafa !important;

    border: 1px solid #18181b !important;

}



[data-theme="light"][data-ui-theme^="shadcn"] .modal .btn-primary * {

    color: #fafafa !important;

}



[data-theme="light"][data-ui-theme^="shadcn"] .modal .btn-secondary {

    background-color: #f4f4f5 !important;

    color: #18181b !important;

    border: 1px solid #e4e4e7 !important;

}



[data-theme="light"][data-ui-theme^="shadcn"] .modal .btn-outline-secondary {

    background-color: transparent !important;

    color: #09090b !important;

    border: 1px solid #e4e4e7 !important;

}



/* --- Light Mode Alerts --- */

[data-theme="light"][data-ui-theme^="shadcn"] .alert {

    background-color: #ffffff !important;

    color: #09090b !important;

    border: 1px solid #e4e4e7 !important;

    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;

}



[data-theme="light"][data-ui-theme^="shadcn"] .alert-danger,

[data-theme="light"][data-ui-theme^="shadcn"] .alert-destructive,

[data-theme="light"][data-ui-theme^="shadcn"] .alert.bg-danger {

    background-color: #fef2f2 !important;

    border: 1px solid #fecaca !important;

    color: #b91c1c !important;

}



[data-theme="light"][data-ui-theme^="shadcn"] .alert-danger *,

[data-theme="light"][data-ui-theme^="shadcn"] .alert-destructive * {

    color: inherit !important;

}



[data-theme="light"][data-ui-theme^="shadcn"] .alert-success,

[data-theme="light"][data-ui-theme^="shadcn"] .alert.bg-success {

    background-color: #f0fdf4 !important;

    border: 1px solid #bbf7d0 !important;

    color: #15803d !important;

}



[data-theme="light"][data-ui-theme^="shadcn"] .alert-success * {

    color: inherit !important;

}



[data-theme="light"][data-ui-theme^="shadcn"] .alert-warning,

[data-theme="light"][data-ui-theme^="shadcn"] .alert.bg-warning {

    background-color: #fffbeb !important;

    border: 1px solid #fef08a !important;

    color: #92400e !important;

}



[data-theme="light"][data-ui-theme^="shadcn"] .alert-warning * {

    color: inherit !important;

}



[data-theme="light"][data-ui-theme^="shadcn"] .alert-info,

[data-theme="light"][data-ui-theme^="shadcn"] .alert-primary,

[data-theme="light"][data-ui-theme^="shadcn"] .alert.bg-info,

[data-theme="light"][data-ui-theme^="shadcn"] .alert.bg-primary {

    background-color: #f0f9ff !important;

    border: 1px solid #bae6fd !important;

    color: #0369a1 !important;

}



[data-theme="light"][data-ui-theme^="shadcn"] .alert-info *,

[data-theme="light"][data-ui-theme^="shadcn"] .alert-primary * {

    color: inherit !important;

}



[data-theme="light"][data-ui-theme^="shadcn"] .alert-secondary,

[data-theme="light"][data-ui-theme^="shadcn"] .alert.bg-secondary {

    background-color: #f4f4f5 !important;

    border: 1px solid #e4e4e7 !important;

    color: #18181b !important;

}



/* --- Light Mode Tooltips & Popovers --- */

[data-theme="light"][data-ui-theme^="shadcn"] .tooltip {

    --bs-tooltip-bg: #ffffff !important;

    --bs-tooltip-color: #09090b !important;

    --bs-tooltip-border-color: #e4e4e7 !important;

}



[data-theme="light"][data-ui-theme^="shadcn"] .tooltip .tooltip-inner {

    background-color: #ffffff !important;

    color: #09090b !important;

    border: 1px solid #e4e4e7 !important;

    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;

}



[data-theme="light"][data-ui-theme^="shadcn"] .popover {

    background-color: #ffffff !important;

    border: 1px solid #e4e4e7 !important;

    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1) !important;

}



[data-theme="light"][data-ui-theme^="shadcn"] .popover-header {

    background-color: #f8fafc !important;

    border-bottom: 1px solid #e4e4e7 !important;

    color: #09090b !important;

}



[data-theme="light"][data-ui-theme^="shadcn"] .popover-body {

    color: #09090b !important;

}



/* --- Light Mode Toasts & Drawers --- */

[data-theme="light"][data-ui-theme^="shadcn"] .toast {

    background-color: #ffffff !important;

    border: 1px solid #e4e4e7 !important;

    color: #09090b !important;

    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1) !important;

}



[data-theme="light"][data-ui-theme^="shadcn"] .offcanvas {

    background-color: #ffffff !important;

    border-color: #e4e4e7 !important;

    color: #09090b !important;

}



[data-theme="light"][data-ui-theme^="shadcn"] .offcanvas-header {

    border-bottom: 1px solid #e4e4e7 !important;

}



[data-theme="light"][data-ui-theme^="shadcn"] .offcanvas-header .btn-close {

    filter: none !important;

}



/* --- Light Mode Dropdown Menus (Outside Top Navbar) --- */

[data-theme="light"][data-ui-theme^="shadcn"] .dropdown-menu:not(.dropdown-menu-profile):not(.dropdown-menu-notification):not(.dropdown-menu-quick-action) {

    background-color: #ffffff !important;

    border: 1px solid #e4e4e7 !important;

    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 0 0 1px #e4e4e7 !important;

}



[data-theme="light"][data-ui-theme^="shadcn"] .dropdown-menu:not(.dropdown-menu-profile):not(.dropdown-menu-notification):not(.dropdown-menu-quick-action) .dropdown-item {

    color: #09090b !important;

}



[data-theme="light"][data-ui-theme^="shadcn"] .dropdown-menu:not(.dropdown-menu-profile):not(.dropdown-menu-notification):not(.dropdown-menu-quick-action) .dropdown-item:hover {

    background-color: #f4f4f5 !important;

    color: #09090b !important;

}



[data-theme="light"][data-ui-theme^="shadcn"] .dropdown-menu:not(.dropdown-menu-profile):not(.dropdown-menu-notification):not(.dropdown-menu-quick-action) .dropdown-divider {

    border-color: #e4e4e7 !important;

}



/* --- Light Mode Input Groups & Pagination --- */

[data-theme="light"][data-ui-theme^="shadcn"] .input-group-text {

    background-color: #f4f4f5 !important;

    border: 1px solid #e4e4e7 !important;

    color: #71717a !important;

}



[data-theme="light"][data-ui-theme^="shadcn"] .pagination .page-link {

    background-color: #ffffff !important;

    border: 1px solid #e4e4e7 !important;

    color: #09090b !important;

}



[data-theme="light"][data-ui-theme^="shadcn"] .pagination .page-item.active .page-link {

    background-color: #18181b !important;

    color: #fafafa !important;

    border-color: #18181b !important;

}



/* ====================================================================

   16. BACKTEST MODAL PRECISION OVERRIDES (SHADCN SYSTEM)

   ==================================================================== */



/* --- Dark Mode Edit Parameters Modal --- */

html[data-ui-theme^="shadcn"] .edit-backtest-modal-card,

[data-ui-theme^="shadcn"] .edit-backtest-modal-card,

:root.dark[data-ui-theme^="shadcn"] .edit-backtest-modal-card {

    background-color: #09090b !important;

    background: #09090b !important;

    border-color: #27272a !important;

    color: #fafafa !important;

    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.75), 0 0 0 1px #27272a !important;

}



html[data-ui-theme^="shadcn"] .edit-backtest-modal-card .edit-modal-subpanel,

[data-ui-theme^="shadcn"] .edit-backtest-modal-card .edit-modal-subpanel {

    background-color: rgba(14, 18, 26, 0.95) !important;
    backdrop-filter: blur(12px) !important;

    background: #111113 !important;

    border-color: #27272a !important;

}



html[data-ui-theme^="shadcn"] .edit-backtest-modal-card .edit-modal-input,

[data-ui-theme^="shadcn"] .edit-backtest-modal-card .edit-modal-input {

    background-color: #18181b !important;

    background: #18181b !important;

    border-color: #27272a !important;

    color: #fafafa !important;

}



html[data-ui-theme^="shadcn"] .edit-backtest-modal-card .edit-modal-input:focus,

[data-ui-theme^="shadcn"] .edit-backtest-modal-card .edit-modal-input:focus {

    border-color: #fafafa !important;

    box-shadow: 0 0 0 2px rgba(250, 250, 250, 0.15) !important;

}



html[data-ui-theme^="shadcn"] .edit-modal-rule-item,

[data-ui-theme^="shadcn"] .edit-modal-rule-item {

    background-color: rgba(14, 18, 26, 0.95) !important;
    backdrop-filter: blur(12px) !important;

    background: #111113 !important;

    border-color: #27272a !important;

}



html[data-ui-theme^="shadcn"] .edit-modal-rule-item:hover,

[data-ui-theme^="shadcn"] .edit-modal-rule-item:hover {

    background-color: #18181b !important;

    background: #18181b !important;

    border-color: #3f3f46 !important;

}



html[data-ui-theme^="shadcn"] .edit-modal-rule-item:has(input:checked),

[data-ui-theme^="shadcn"] .edit-modal-rule-item:has(input:checked) {

    background-color: #18181b !important;

    background: #18181b !important;

    border-color: #3f3f46 !important;

    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5) !important;

}



html[data-ui-theme^="shadcn"] .edit-modal-rule-item:has(input:checked) .fw-bold,

[data-ui-theme^="shadcn"] .edit-modal-rule-item:has(input:checked) .fw-bold {

    color: #fafafa !important;

}



html[data-ui-theme^="shadcn"] .edit-modal-rule-item:has(input:checked) .edit-modal-muted,

[data-ui-theme^="shadcn"] .edit-modal-rule-item:has(input:checked) .edit-modal-muted {

    color: #d4d4d8 !important;

}



html[data-ui-theme^="shadcn"] .edit-rule-toggle,

[data-ui-theme^="shadcn"] .edit-rule-toggle {

    background-color: #27272a !important;

    border-color: #3f3f46 !important;

    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23a1a1aa'/%3e%3c/svg%3e") !important;

}



html[data-ui-theme^="shadcn"] .edit-rule-toggle:checked,

[data-ui-theme^="shadcn"] .edit-rule-toggle:checked {

    background-color: #fafafa !important;

    border-color: #fafafa !important;

    box-shadow: 0 0 10px rgba(250, 250, 250, 0.25) !important;

    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2309090b'/%3e%3c/svg%3e") !important;

}



html[data-ui-theme^="shadcn"] .edit-modal-footer-sticky,

[data-ui-theme^="shadcn"] .edit-modal-footer-sticky {

    background-color: rgba(10, 20, 36, 0.72) !important;

    background: rgba(10, 20, 36, 0.72) !important;

    border-color: var(--border-color) !important;

}



html[data-ui-theme^="shadcn"] .edit-modal-icon-badge,

[data-ui-theme^="shadcn"] .edit-modal-icon-badge {

    background-color: #27272a !important;

    background: #27272a !important;

    color: #fafafa !important;

    border: 1px solid #3f3f46 !important;

}



html[data-ui-theme^="shadcn"] .edit-modal-id-badge,

[data-ui-theme^="shadcn"] .edit-modal-id-badge {

    background-color: #27272a !important;

    background: #27272a !important;

    color: #fafafa !important;

    border: 1px solid #3f3f46 !important;

}



html[data-ui-theme^="shadcn"] .edit-modal-market-badge,

[data-ui-theme^="shadcn"] .edit-modal-market-badge {

    background-color: #27272a !important;

    background: #27272a !important;

    color: #fafafa !important;

    border: 1px solid #3f3f46 !important;

}



/* --- Light Mode Edit Parameters Modal --- */

[data-theme="light"][data-ui-theme^="shadcn"] .edit-backtest-modal-card {

    background-color: #ffffff !important;

    background: #ffffff !important;

    border-color: #e4e4e7 !important;

    color: #09090b !important;

    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.12), 0 0 0 1px #e4e4e7 !important;

}



[data-theme="light"][data-ui-theme^="shadcn"] .edit-backtest-modal-card .edit-modal-subpanel {

    background-color: #f8fafc !important;

    background: #f8fafc !important;

    border-color: #e4e4e7 !important;

}



[data-theme="light"][data-ui-theme^="shadcn"] .edit-backtest-modal-card .edit-modal-input {

    background-color: #ffffff !important;

    background: #ffffff !important;

    border-color: #e4e4e7 !important;

    color: #09090b !important;

}



[data-theme="light"][data-ui-theme^="shadcn"] .edit-backtest-modal-card .edit-modal-input:focus {

    border-color: #18181b !important;

    box-shadow: 0 0 0 2px rgba(24, 24, 27, 0.12) !important;

}



[data-theme="light"][data-ui-theme^="shadcn"] .edit-modal-rule-item {

    background-color: #ffffff !important;

    background: #ffffff !important;

    border-color: #e4e4e7 !important;

}



[data-theme="light"][data-ui-theme^="shadcn"] .edit-modal-rule-item:hover {

    background-color: #f4f4f5 !important;

    background: #f4f4f5 !important;

    border-color: #d4d4d8 !important;

}



[data-theme="light"][data-ui-theme^="shadcn"] .edit-modal-rule-item:has(input:checked) {

    background-color: #f4f4f5 !important;

    background: #f4f4f5 !important;

    border-color: #18181b !important;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;

}



[data-theme="light"][data-ui-theme^="shadcn"] .edit-modal-rule-item:has(input:checked) .fw-bold {

    color: #18181b !important;

}



[data-theme="light"][data-ui-theme^="shadcn"] .edit-modal-rule-item:has(input:checked) .edit-modal-muted {

    color: #52525b !important;

}



[data-theme="light"][data-ui-theme^="shadcn"] .edit-rule-toggle {

    background-color: #e4e4e7 !important;

    border-color: #d4d4d8 !important;

    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2371717a'/%3e%3c/svg%3e") !important;

}



[data-theme="light"][data-ui-theme^="shadcn"] .edit-rule-toggle:checked {

    background-color: #18181b !important;

    border-color: #18181b !important;

    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15) !important;

    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e") !important;

}



[data-theme="light"][data-ui-theme^="shadcn"] .edit-modal-footer-sticky {

    background-color: rgba(255, 255, 255, 0.98) !important;

    background: rgba(255, 255, 255, 0.98) !important;

    border-color: #e4e4e7 !important;

}



[data-theme="light"][data-ui-theme^="shadcn"] .edit-modal-icon-badge {

    background-color: #f4f4f5 !important;

    background: #f4f4f5 !important;

    color: #18181b !important;

    border: 1px solid #e4e4e7 !important;

}



[data-theme="light"][data-ui-theme^="shadcn"] .edit-modal-id-badge {

    background-color: #f4f4f5 !important;

    background: #f4f4f5 !important;

    color: #18181b !important;

    border: 1px solid #e4e4e7 !important;

}



[data-theme="light"][data-ui-theme^="shadcn"] .edit-modal-market-badge {

    background-color: #f4f4f5 !important;

    background: #f4f4f5 !important;

    color: #18181b !important;

    border: 1px solid #e4e4e7 !important;

}



/* --- Rule Ablation & Deploy Modals --- */

html[data-ui-theme^="shadcn"] .rule-ablation-modal-card,

[data-ui-theme^="shadcn"] .rule-ablation-modal-card {

    background-color: #09090b !important;

    background: #09090b !important;

    border-color: #27272a !important;

    color: #fafafa !important;

}



[data-theme="light"][data-ui-theme^="shadcn"] .rule-ablation-modal-card {

    background-color: #ffffff !important;

    background: #ffffff !important;

    border-color: #e4e4e7 !important;

    color: #09090b !important;

}



/* --- Seamless Connected Input Groups for Modals --- */

html[data-ui-theme^="shadcn"] .edit-backtest-modal-card .input-group > .edit-modal-input:not(:last-child),

[data-ui-theme^="shadcn"] .edit-backtest-modal-card .input-group > .edit-modal-input:not(:last-child) {

    border-top-right-radius: 0 !important;

    border-bottom-right-radius: 0 !important;

}



html[data-ui-theme^="shadcn"] .edit-backtest-modal-card .input-group > .edit-modal-input:not(:first-child),

[data-ui-theme^="shadcn"] .edit-backtest-modal-card .input-group > .edit-modal-input:not(:first-child) {

    border-top-left-radius: 0 !important;

    border-bottom-left-radius: 0 !important;

    border-left: 0 !important;

}



html[data-ui-theme^="shadcn"] .edit-modal-target-badge,

[data-ui-theme^="shadcn"] .edit-modal-target-badge {

    background-color: #27272a !important;

    background: #27272a !important;

    color: #fafafa !important;

    border: 1px solid #3f3f46 !important;

}



[data-theme="light"][data-ui-theme^="shadcn"] .edit-modal-target-badge {

    background-color: #f4f4f5 !important;

    background: #f4f4f5 !important;

    color: #18181b !important;

    border: 1px solid #e4e4e7 !important;

}



/* ====================================================================

   17. REAL-TIME OPTION CHAIN WIDGET (FULL STRIKES & SHADCN HARMONY)

   ==================================================================== */



[data-ui-theme^="shadcn"] #live-option-chain-container .table-responsive {

    max-height: none !important;

    overflow-y: visible !important;

    overflow-x: auto !important;

}



[data-ui-theme^="shadcn"] .option-chain-atm-row {

    background-color: rgba(255, 255, 255, 0.05) !important;

    border-top: 1px solid hsl(var(--border)) !important;

    border-bottom: 1px solid hsl(var(--border)) !important;

}



[data-theme="light"][data-ui-theme^="shadcn"] .option-chain-atm-row {

    background-color: #f4f4f5 !important;

    border-top: 1px solid #e4e4e7 !important;

    border-bottom: 1px solid #e4e4e7 !important;

}



[data-ui-theme^="shadcn"] .option-chain-atm-badge {

    background-color: hsl(var(--primary)) !important;

    color: hsl(var(--primary-foreground)) !important;

    border: 1px solid hsl(var(--primary)) !important;

}



[data-theme="light"][data-ui-theme^="shadcn"] #backupIndexSelect {

    background-color: #ffffff !important;

    color: #09090b !important;

    border-color: #e4e4e7 !important;

}



/* ====================================================================

   18. GLOBAL HIGH-CONTRAST BADGE & PILL SYSTEM (DARK & LIGHT MODES)

   ==================================================================== */



/* --- Base Badge Sizing & Alignment --- */

.badge,

[data-ui-theme] .badge {

    font-weight: 600 !important;

    letter-spacing: 0.025em !important;

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    line-height: 1.25 !important;

}



/* --- Universal High-Contrast Badge Text Overrides (Guaranteed Readability Regardless of Theme Attributes) --- */

.badge.text-primary,

.badge[class*="text-primary"],

:root.dark .badge.text-primary,

:root.dark .badge[class*="text-primary"],

[data-theme="dark"] .badge.text-primary,

[data-theme="dark"] .badge[class*="text-primary"],

html:not([data-theme="light"]) .badge.text-primary,

html:not([data-theme="light"]) .badge[class*="text-primary"] {

    color: #38bdf8 !important;

}



[data-theme="light"] .badge.text-primary,

[data-theme="light"] .badge[class*="text-primary"] {

    color: #0284c7 !important;

}



.badge.text-success,

.badge[class*="text-success"],

:root.dark .badge.text-success,

:root.dark .badge[class*="text-success"],

[data-theme="dark"] .badge.text-success,

[data-theme="dark"] .badge[class*="text-success"],

html:not([data-theme="light"]) .badge.text-success,

html:not([data-theme="light"]) .badge[class*="text-success"] {

    color: #4ade80 !important;

}



[data-theme="light"] .badge.text-success,

[data-theme="light"] .badge[class*="text-success"] {

    color: #16a34a !important;

}



.badge.text-warning,

.badge[class*="text-warning"],

:root.dark .badge.text-warning,

:root.dark .badge[class*="text-warning"],

[data-theme="dark"] .badge.text-warning,

[data-theme="dark"] .badge[class*="text-warning"],

html:not([data-theme="light"]) .badge.text-warning,

html:not([data-theme="light"]) .badge[class*="text-warning"] {

    color: #fde047 !important;

}



[data-theme="light"] .badge.text-warning,

[data-theme="light"] .badge[class*="text-warning"] {

    color: #b45309 !important;

}



.badge.text-danger,

.badge[class*="text-danger"],

:root.dark .badge.text-danger,

:root.dark .badge[class*="text-danger"],

[data-theme="dark"] .badge.text-danger,

[data-theme="dark"] .badge[class*="text-danger"],

html:not([data-theme="light"]) .badge.text-danger,

html:not([data-theme="light"]) .badge[class*="text-danger"] {

    color: #f87171 !important;

}



[data-theme="light"] .badge.text-danger,

[data-theme="light"] .badge[class*="text-danger"] {

    color: #dc2626 !important;

}



.badge.text-info,

.badge[class*="text-info"],

:root.dark .badge.text-info,

:root.dark .badge[class*="text-info"],

[data-theme="dark"] .badge.text-info,

[data-theme="dark"] .badge[class*="text-info"],

html:not([data-theme="light"]) .badge.text-info,

html:not([data-theme="light"]) .badge[class*="text-info"] {

    color: #38bdf8 !important;

}



[data-theme="light"] .badge.text-info,

[data-theme="light"] .badge[class*="text-info"] {

    color: #0284c7 !important;

}



/* --- Universal Background & Border for Semantic Badges (Dark Mode Default) --- */

.badge.bg-primary,

.badge[class*="bg-primary"],

:root.dark .badge.bg-primary,

:root.dark .badge[class*="bg-primary"],

[data-theme="dark"] .badge.bg-primary,

[data-theme="dark"] .badge[class*="bg-primary"],

html:not([data-theme="light"]) .badge.bg-primary,

html:not([data-theme="light"]) .badge[class*="bg-primary"] {

    background-color: rgba(56, 189, 248, 0.16) !important;

    border: 1px solid rgba(56, 189, 248, 0.35) !important;

}



[data-theme="light"] .badge.bg-primary,

[data-theme="light"] .badge[class*="bg-primary"] {

    background-color: rgba(2, 132, 199, 0.12) !important;

    border: 1px solid rgba(2, 132, 199, 0.28) !important;

}



.badge.bg-success,

.badge[class*="bg-success"],

:root.dark .badge.bg-success,

:root.dark .badge[class*="bg-success"],

[data-theme="dark"] .badge.bg-success,

[data-theme="dark"] .badge[class*="bg-success"],

html:not([data-theme="light"]) .badge.bg-success,

html:not([data-theme="light"]) .badge[class*="bg-success"] {

    background-color: rgba(34, 197, 94, 0.16) !important;

    border: 1px solid rgba(34, 197, 94, 0.35) !important;

}



[data-theme="light"] .badge.bg-success,

[data-theme="light"] .badge[class*="bg-success"] {

    background-color: rgba(22, 163, 74, 0.12) !important;

    border: 1px solid rgba(22, 163, 74, 0.28) !important;

}



.badge.bg-warning,

.badge[class*="bg-warning"],

:root.dark .badge.bg-warning,

:root.dark .badge[class*="bg-warning"],

[data-theme="dark"] .badge.bg-warning,

[data-theme="dark"] .badge[class*="bg-warning"],

html:not([data-theme="light"]) .badge.bg-warning,

html:not([data-theme="light"]) .badge[class*="bg-warning"] {

    background-color: rgba(234, 179, 8, 0.16) !important;

    border: 1px solid rgba(234, 179, 8, 0.35) !important;

}



[data-theme="light"] .badge.bg-warning,

[data-theme="light"] .badge[class*="bg-warning"] {

    background-color: rgba(202, 138, 4, 0.12) !important;

    border: 1px solid rgba(202, 138, 4, 0.28) !important;

}



.badge.bg-danger,

.badge[class*="bg-danger"],

:root.dark .badge.bg-danger,

:root.dark .badge[class*="bg-danger"],

[data-theme="dark"] .badge.bg-danger,

[data-theme="dark"] .badge[class*="bg-danger"],

html:not([data-theme="light"]) .badge.bg-danger,

html:not([data-theme="light"]) .badge[class*="bg-danger"] {

    background-color: rgba(239, 68, 68, 0.16) !important;

    border: 1px solid rgba(239, 68, 68, 0.35) !important;

}



[data-theme="light"] .badge.bg-danger,

[data-theme="light"] .badge[class*="bg-danger"] {

    background-color: rgba(220, 38, 38, 0.12) !important;

    border: 1px solid rgba(220, 38, 38, 0.28) !important;

}



.badge.bg-info,

.badge[class*="bg-info"],

:root.dark .badge.bg-info,

:root.dark .badge[class*="bg-info"],

[data-theme="dark"] .badge.bg-info,

[data-theme="dark"] .badge[class*="bg-info"],

html:not([data-theme="light"]) .badge.bg-info,

html:not([data-theme="light"]) .badge[class*="bg-info"] {

    background-color: rgba(14, 165, 233, 0.16) !important;

    border: 1px solid rgba(14, 165, 233, 0.35) !important;

}



[data-theme="light"] .badge.bg-info,

[data-theme="light"] .badge[class*="bg-info"] {

    background-color: rgba(2, 132, 199, 0.12) !important;

    border: 1px solid rgba(2, 132, 199, 0.28) !important;

}



.badge.bg-secondary,

.badge.bg-dark,

.badge[class*="bg-secondary"],

.badge[class*="bg-dark"],

:root.dark .badge.bg-secondary,

:root.dark .badge.bg-dark,

[data-theme="dark"] .badge.bg-secondary,

[data-theme="dark"] .badge.bg-dark,

html:not([data-theme="light"]) .badge.bg-secondary,

html:not([data-theme="light"]) .badge.bg-dark {

    background-color: #27272a !important;

    color: #fafafa !important;

    border: 1px solid #3f3f46 !important;

}



[data-theme="light"] .badge.bg-secondary,

[data-theme="light"] .badge.bg-dark,

[data-theme="light"] .badge[class*="bg-secondary"],

[data-theme="light"] .badge[class*="bg-dark"] {

    background-color: #f4f4f5 !important;

    color: #18181b !important;

    border: 1px solid #e4e4e7 !important;

}



/* --- High-Contrast Font Invariant Overrides (Fix text-white-50 / text-muted / text-white) --- */

.badge.text-white-50,

.badge .text-white-50,

:root.dark .badge.text-white-50,

:root.dark .badge .text-white-50,

[data-theme="dark"] .badge.text-white-50,

[data-theme="dark"] .badge .text-white-50,

html:not([data-theme="light"]) .badge.text-white-50,

html:not([data-theme="light"]) .badge .text-white-50 {

    color: #fafafa !important;

}



[data-theme="light"] .badge.text-white-50,

[data-theme="light"] .badge .text-white-50,

[data-theme="light"] .badge.text-white,

[data-theme="light"] .badge .text-white {

    color: #18181b !important;

}



.badge.text-muted,

.badge .text-muted,

:root.dark .badge.text-muted,

:root.dark .badge .text-muted,

[data-theme="dark"] .badge.text-muted,

[data-theme="dark"] .badge .text-muted,

html:not([data-theme="light"]) .badge.text-muted,

html:not([data-theme="light"]) .badge .text-muted {

    color: #d4d4d8 !important;

}



[data-theme="light"] .badge.text-muted,

[data-theme="light"] .badge .text-muted {

    color: #52525b !important;

}



/* ─── Universal Table Row Hover & High-Contrast Typography (Exact :8088 Parity) ─── */

.table > tbody > tr {

    transition: background-color 0.15s ease;

}



.table > tbody > tr:hover > * {

    background-color: rgba(0, 242, 254, 0.06) !important;

    color: #ffffff !important;

}



.table > tbody > tr:hover .text-muted,

.table > tbody > tr:hover .text-secondary,

.table > tbody > tr:hover .theme-text-muted {

    color: #cbd5e1 !important;

}



.table > tbody > tr:hover .text-success {

    color: #4ade80 !important;

    text-shadow: 0 0 8px rgba(74, 222, 128, 0.35);

}



.table > tbody > tr:hover .text-danger {

    color: #f87171 !important;

    text-shadow: 0 0 8px rgba(248, 113, 113, 0.35);

}



.table > tbody > tr:hover .text-info {

    color: #38bdf8 !important;

    text-shadow: 0 0 8px rgba(56, 189, 248, 0.35);

}



.table > tbody > tr:hover .text-warning {

    color: #fde047 !important;

    text-shadow: 0 0 8px rgba(253, 224, 71, 0.35);

}



.table > tbody > tr:hover .badge {

    filter: brightness(1.2);

}



/* ─── Universal Interactive Semantic Badges Hover ─── */

.badge {

    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;

}



.badge:hover {

    filter: brightness(1.25) !important;

    transform: translateY(-1px);

}



.badge.bg-success:hover, .badge[class*="bg-success"]:hover {

    background-color: rgba(34, 197, 94, 0.28) !important;

    color: #86efac !important;

    border-color: rgba(34, 197, 94, 0.6) !important;

    box-shadow: 0 0 10px rgba(34, 197, 94, 0.4) !important;

}



.badge.bg-warning:hover, .badge[class*="bg-warning"]:hover {

    background-color: rgba(245, 158, 11, 0.28) !important;

    color: #fef08a !important;

    border-color: rgba(245, 158, 11, 0.6) !important;

    box-shadow: 0 0 10px rgba(245, 158, 11, 0.4) !important;

}



.badge.bg-danger:hover, .badge[class*="bg-danger"]:hover {

    background-color: rgba(239, 68, 68, 0.28) !important;

    color: #fca5a5 !important;

    border-color: rgba(239, 68, 68, 0.6) !important;

    box-shadow: 0 0 10px rgba(239, 68, 68, 0.4) !important;

}



.badge.bg-info:hover, .badge[class*="bg-info"]:hover,

.badge.bg-primary:hover, .badge[class*="bg-primary"]:hover {

    background-color: rgba(56, 189, 248, 0.28) !important;

    color: #7dd3fc !important;

    border-color: rgba(56, 189, 248, 0.6) !important;

    box-shadow: 0 0 10px rgba(56, 189, 248, 0.4) !important;

}



.badge.bg-secondary:hover, .badge.bg-dark:hover {

    background-color: #334155 !important;

    color: #ffffff !important;

    border-color: rgba(255, 255, 255, 0.3) !important;

    box-shadow: 0 0 8px rgba(255, 255, 255, 0.15) !important;

}



/* ====================================================================

   SHADCN EXACT LAYOUT OVERRIDES (FLAT GEOMETRY)

   ==================================================================== */



/* 1. Remove all radial gradient backgrounds and glows */

[data-ui-theme^="shadcn"] body,

html[data-ui-theme^="shadcn"] body {

    background-image: none !important;

    background-color: hsl(var(--background)) !important;

}



[data-ui-theme^="shadcn"] .app-wrapper,

[data-ui-theme^="shadcn"] #app-main-container {

    background-image: none !important;

    background: transparent !important;

}



/* 4. Buttons and Badges (Enforce Curved Pill) */

[data-ui-theme^="shadcn"] .btn,

[data-ui-theme^="shadcn"] .btn-date-picker,

[data-ui-theme^="shadcn"] .theme-pill-btn,

[data-ui-theme^="shadcn"] .rounded-pill {

    border-radius: 50rem !important;

}



/* 5. Cards (Clean Border & Low Elevation) */

[data-ui-theme^="shadcn"] .card,

[data-ui-theme^="shadcn"] .rounded-3,

[data-ui-theme^="shadcn"] .rounded-4 {

    border-radius: calc(var(--radius) + 2px) !important;

    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;

    border: 1px solid hsl(var(--border)) !important;

    background-color: hsl(var(--card)) !important;

}



[data-ui-theme^="shadcn"] .card:hover {

    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;

    border-color: hsl(var(--border)) !important;

    transform: none !important;

}



/* 7. Final Cleanups */

[data-ui-theme^="shadcn"] .sidebar-profile-card {

    border-radius: var(--radius) !important;

    background: transparent !important;

    border: none !important;

    border-top: 1px solid hsl(var(--border)) !important;

}

[data-ui-theme^="shadcn"] * {

    --bg-gradient: none !important;

}

[data-ui-theme^="shadcn"] body::before,

[data-ui-theme^="shadcn"] body::after,

[data-ui-theme^="shadcn"] .app-wrapper::before,

[data-ui-theme^="shadcn"] .app-wrapper::after {

    display: none !important;

}

[data-ui-theme^="shadcn"] .sidebar-menu-item .badge {

    border-radius: 50rem !important;

}

/* 8. Metric Cards Override (Converting Spark metrics to Shadcn Card) */

[data-ui-theme^="shadcn"] .theme-metric-card,

[data-ui-theme^="shadcn"] .alert-green-card {

    padding: 16px 24px 24px 24px !important;

    display: flex !important;

    flex-direction: column !important;

    gap: 16px !important;

    background: hsl(var(--card)) !important;

    border: 1px solid hsl(var(--border)) !important;

    border-radius: var(--radius) !important;

    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;

}



[data-ui-theme^="shadcn"] .alert-green-bg-shape {

    display: none !important;

}



[data-ui-theme^="shadcn"] .metric-card-badge {

    background: transparent !important;

    border: none !important;

    color: hsl(var(--muted-foreground)) !important;

    font-size: 0.875rem !important;

    font-weight: 500 !important;

    padding: 0 !important;

}



[data-ui-theme^="shadcn"] .metric-card-date,

[data-ui-theme^="shadcn"] .alert-green-date {

    color: hsl(var(--muted-foreground)) !important;

    font-size: 0.75rem !important;

    order: 3 !important;

    margin-top: 4px !important;

}



[data-ui-theme^="shadcn"] .metric-card-value,

[data-ui-theme^="shadcn"] .alert-green-text {

    font-size: 1.5rem !important;

    font-weight: 700 !important;

    color: hsl(var(--foreground)) !important;

    order: 2 !important;

}



[data-ui-theme^="shadcn"] .metric-card-footer {

    border-top: none !important;

    padding-top: 0 !important;

    margin-top: 0 !important;

    font-size: 0.875rem !important;

    color: hsl(var(--muted-foreground)) !important;

}

/* 9. Badges & Buttons Curved Pill Standardization */

[data-ui-theme^="shadcn"] .btn,

[data-ui-theme^="shadcn"] .btn-date-picker,

[data-ui-theme^="shadcn"] .theme-pill-btn,

[data-ui-theme^="shadcn"] .badge.rounded-pill,

[data-ui-theme^="shadcn"] .rounded-pill {

    border-radius: 50rem !important;

}



[data-ui-theme^="shadcn"] .trend-badge {

    border-radius: 50rem !important;

    background: transparent !important;

    border: 1px solid hsl(var(--border)) !important;

    color: hsl(var(--foreground)) !important;

}



[data-ui-theme^="shadcn"] .trend-badge.trend-up i {

    color: hsl(var(--primary)) !important;

}



[data-ui-theme^="shadcn"] .trend-badge.trend-down i {

    color: hsl(var(--destructive)) !important;

}

/* 10. Ultra Aggressive Glow Removal */

html[data-ui-theme^="shadcn"]::before,

html[data-ui-theme^="shadcn"]::after,

html[data-ui-theme^="shadcn"] body::before,

html[data-ui-theme^="shadcn"] body::after,

html[data-ui-theme^="shadcn"] .app-wrapper::before,

html[data-ui-theme^="shadcn"] .app-wrapper::after,

html[data-ui-theme^="shadcn"] .main-wrapper::before,

html[data-ui-theme^="shadcn"] .main-wrapper::after,

html[data-ui-theme^="shadcn"] #app-main-container::before,

html[data-ui-theme^="shadcn"] #app-main-container::after {

    display: none !important;

    background: none !important;

    background-image: none !important;

    opacity: 0 !important;

}

/* 11. Define Radius and Enforce Curved Pill Badges/Buttons/Outlines */

:root {

    --radius: 0.5rem;

}



html[data-ui-theme^="shadcn"] .btn,

html[data-ui-theme^="shadcn"] .btn-date-picker,

html[data-ui-theme^="shadcn"] .theme-pill-btn,

html[data-ui-theme^="shadcn"] .badge.rounded-pill,

html[data-ui-theme^="shadcn"] .rounded-pill,

html[data-ui-theme^="shadcn"] .trend-badge,

html[data-ui-theme^="shadcn"] .alert-green-badge {

    border-radius: 50rem !important;

}



html[data-ui-theme^="shadcn"] .filter-search-wrapper .form-control,

html[data-ui-theme^="shadcn"] .card-filter .filter-search-wrapper .form-control {

    border-radius: 50rem !important;

}



html[data-ui-theme^="shadcn"] .rounded-circle {

    border-radius: 50% !important;

}



html[data-ui-theme^="shadcn"] .sidebar-profile-card,

html[data-ui-theme^="shadcn"] .sidebar-profile-card .sidebar-profile-icon {

    border-radius: var(--radius) !important;

}



/* 12. Institutional Terminal & Precision Surface Elevations */

html[data-ui-theme^="shadcn"] .glass-card,

html[data-ui-theme^="shadcn"] .card {

    background-color: hsl(var(--card)) !important;

    border-color: hsl(var(--border)) !important;

    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.25), 0 1px 2px -1px rgba(0, 0, 0, 0.25) !important;

}



html[data-ui-theme^="shadcn"] .mw-item {

    transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1) !important;

    border-color: hsl(var(--border)) !important;

    background: rgba(255, 255, 255, 0.02) !important;

}



html[data-ui-theme^="shadcn"] .mw-item:hover {

    background: rgba(255, 255, 255, 0.05) !important;

    border-color: rgba(255, 255, 255, 0.18) !important;

    transform: translateY(-1px);

}



html[data-ui-theme^="shadcn"] .mw-item.active-symbol-item {

    background: rgba(0, 242, 254, 0.08) !important;

    border-color: #00F2FE !important;

}



html[data-ui-theme^="shadcn"] .table th {

    letter-spacing: 0.04em !important;

    font-weight: 600 !important;

    border-bottom: 1px solid hsl(var(--border)) !important;

}



html[data-ui-theme^="shadcn"] .table td {

    border-bottom: 1px solid hsl(var(--border)) !important;

}







/* ====================================================================

   GLOBAL SYSTEM DEFAULT TYPOGRAPHY & PROPORTIONAL NUMERICS

   Enforces clean system default font stack across all elements, badges,

   tables, cards, and digits.

   ==================================================================== */

:root,

body,

button:not([class*="bi-"]):not(.bi):not(.material-icons):not(.material-symbols-outlined):not(.google-symbols),

input,

select,

textarea,

table,

.card,

.glass-card,

.font-monospace,

[class*="font-monospace"],

.badge:not(.material-icons):not(.material-symbols-outlined):not(.google-symbols),

.table td:not(.material-icons):not(.material-symbols-outlined):not(.google-symbols),

.table th:not(.material-icons):not(.material-symbols-outlined):not(.google-symbols),

.fs-1:not(.material-icons):not(.material-symbols-outlined):not(.google-symbols):not([class*="bi-"]):not(.bi),

.fs-2:not(.material-icons):not(.material-symbols-outlined):not(.google-symbols):not([class*="bi-"]):not(.bi),

.fs-3:not(.material-icons):not(.material-symbols-outlined):not(.google-symbols):not([class*="bi-"]):not(.bi),

.fs-4:not(.material-icons):not(.material-symbols-outlined):not(.google-symbols):not([class*="bi-"]):not(.bi),

.fs-5:not(.material-icons):not(.material-symbols-outlined):not(.google-symbols):not([class*="bi-"]):not(.bi),

.fs-6:not(.material-icons):not(.material-symbols-outlined):not(.google-symbols):not([class*="bi-"]):not(.bi) {

    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;

}



/* --- High-Priority Icon Font Protection (Immunity against generic text overrides) --- */

.material-icons,

.material-symbols-outlined,

.google-symbols {

    font-family: 'Material Symbols Outlined', 'Material Icons', 'Google Symbols', sans-serif !important;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24 !important;
    -webkit-font-feature-settings: 'liga' !important;

    font-weight: normal !important;

    font-style: normal !important;

    font-size: 24px;

    line-height: 1 !important;

    display: inline-block !important;

    text-transform: none !important;

    letter-spacing: normal !important;

    word-wrap: normal !important;

    white-space: nowrap !important;

    direction: ltr !important;

    -webkit-font-smoothing: antialiased !important;

    text-rendering: optimizeLegibility !important;

    -moz-osx-font-smoothing: grayscale !important;

    font-feature-settings: 'liga' !important;

}



i[class*="bi-"],

.bi {

    font-family: "bootstrap-icons" !important;

    font-style: normal !important;

    font-weight: normal !important;

    line-height: 1 !important;

}



.glass-icon-btn {
    overflow: visible !important;
    white-space: nowrap !important;
    padding: 0 !important;
}
.glass-icon-btn .material-icons,
.glass-icon-btn .material-symbols-outlined,
.glass-icon-btn i {
    max-width: none !important;
    overflow: visible !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

pre code,

.ag-code-pre,

.ag-code-lang {

    font-family: "Google Sans Code", "JetBrains Mono", Consolas, "Courier New", monospace !important;

}



/* ====================================================================
   MINIMIZED SIDEBAR OVERRIDES (SHADCN THEME PRECISION ALIGNMENT)
   ==================================================================== */
body.sidebar-minimized [data-ui-theme^="shadcn"] .sidebar-menu-link,
[data-ui-theme^="shadcn"] body.sidebar-minimized .sidebar-menu-link {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    padding: 0 !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

body.sidebar-minimized [data-ui-theme^="shadcn"] .sidebar-menu-link i,
body.sidebar-minimized [data-ui-theme^="shadcn"] .sidebar-menu-link .material-icons,
[data-ui-theme^="shadcn"] body.sidebar-minimized .sidebar-menu-link i,
[data-ui-theme^="shadcn"] body.sidebar-minimized .sidebar-menu-link .material-icons {
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

body.sidebar-minimized [data-ui-theme^="shadcn"] .sidebar-profile,
[data-ui-theme^="shadcn"] body.sidebar-minimized .sidebar-profile {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0 !important;
    margin: 0 auto !important;
    width: 100% !important;
}

body.sidebar-minimized [data-ui-theme^="shadcn"] .sidebar-profile button,
[data-ui-theme^="shadcn"] body.sidebar-minimized .sidebar-profile button {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    padding: 0 !important;
    margin: 0 auto !important;
}