/* ═══════════════════════════════════════════════════════════════════════════
   KX Suite — Full Restyle Override
   Loaded after the main CSS to override Nexfill's visual identity.
   Keeps the information architecture / UX structure but changes:
   - Color scheme: purple → teal/cyan
   - Font: Space Grotesk → Outfit
   - Background hue: blue-purple → neutral dark
   - Border radius, card styles, sidebar, gradients
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Design Token Overrides ──────────────────────────────────────────── */
/* Override ALL theme classes — .theme-kx-suite, .theme-dark, .theme-emerald, .theme-light */
/* Using !important to beat the theme class specificity */

:root,
.theme-kx-suite,
.theme-dark,
.theme-emerald,
.dark,
.dark.theme-kx-suite,
.dark.theme-dark,
.dark.theme-emerald {
    /* Base — neutral dark instead of blue-purple */
    --background: 200 12% 5% !important;
    --foreground: 180 10% 97% !important;
    --card: 200 12% 7% !important;
    --card-foreground: 180 10% 97% !important;
    --popover: 200 12% 7% !important;
    --popover-foreground: 180 10% 97% !important;

    /* Primary — teal/cyan instead of purple */
    --primary: 175 85% 45% !important;
    --primary-foreground: 200 12% 5% !important;

    /* Secondary — slightly lighter neutral */
    --secondary: 200 12% 14% !important;
    --secondary-foreground: 180 10% 97% !important;

    /* Muted */
    --muted: 200 12% 14% !important;
    --muted-foreground: 200 10% 62% !important;

    /* Accent — teal, slightly brighter */
    --accent: 175 80% 50% !important;
    --accent-foreground: 200 12% 5% !important;

    /* Destructive — warm red */
    --destructive: 0 72% 45% !important;
    --destructive-foreground: 180 10% 97% !important;

    /* Borders, inputs, rings */
    --border: 200 12% 14% !important;
    --input: 200 12% 14% !important;
    --ring: 175 85% 45% !important;

    /* Header */
    --header-bg: 200 12% 5% !important;

    /* Sidebar — slightly different from main bg */
    --sidebar-background: 200 14% 3% !important;
    --sidebar-foreground: 180 10% 85% !important;
    --sidebar-primary: 175 85% 45% !important;
    --sidebar-primary-foreground: 200 12% 5% !important;
    --sidebar-accent: 200 12% 12% !important;
    --sidebar-accent-foreground: 180 10% 97% !important;
    --sidebar-border: 200 12% 10% !important;
    --sidebar-ring: 175 85% 45% !important;

    /* Gradients — teal-based instead of purple */
    --gradient-card: linear-gradient(135deg, hsl(200 12% 7%), hsl(200 12% 10%)) !important;
    --glow-card: 0 4px 12px -2px rgba(20, 184, 166, 0.08) !important;
    --glow-primary: 0 0 15px hsl(175 85% 45% / 0.25) !important;
    --gradient-primary: linear-gradient(135deg, hsl(175 85% 45%), hsl(190 90% 50%)) !important;

    /* Radius — slightly sharper */
    --radius: 0.625rem !important;

    /* Success, warning, info */
    --success: 160 70% 40% !important;
    --warning: 38 90% 55% !important;
    --info: 200 80% 55% !important;
}

/* Light theme override */
.theme-light,
.dark.theme-light {
    --background: 200 20% 99% !important;
    --foreground: 200 30% 10% !important;
    --card: 0 0% 100% !important;
    --card-foreground: 200 30% 10% !important;
    --popover: 0 0% 100% !important;
    --popover-foreground: 200 30% 10% !important;
    --primary: 175 80% 40% !important;
    --primary-foreground: 0 0% 100% !important;
    --secondary: 200 20% 95% !important;
    --secondary-foreground: 200 30% 10% !important;
    --muted: 200 20% 95% !important;
    --muted-foreground: 200 10% 45% !important;
    --accent: 200 20% 95% !important;
    --accent-foreground: 200 30% 10% !important;
    --destructive: 0 72% 50% !important;
    --destructive-foreground: 0 0% 100% !important;
    --border: 200 20% 90% !important;
    --input: 200 20% 90% !important;
    --ring: 175 80% 40% !important;
    --header-bg: 0 0% 100% !important;
    --sidebar-background: 200 20% 97% !important;
    --sidebar-foreground: 200 30% 10% !important;
    --sidebar-primary: 175 80% 40% !important;
    --sidebar-primary-foreground: 0 0% 100% !important;
    --sidebar-accent: 200 20% 93% !important;
    --sidebar-accent-foreground: 200 30% 10% !important;
    --sidebar-border: 200 20% 88% !important;
    --sidebar-ring: 175 80% 40% !important;
    --gradient-card: linear-gradient(135deg, #ffffff, #f7f9fa) !important;
    --glow-card: 0 2px 4px rgba(20, 184, 166, 0.04) !important;
    --glow-primary: 0 0 8px rgba(20, 184, 166, 0.1) !important;
    --gradient-primary: linear-gradient(135deg, hsl(175 80% 40%), hsl(190 85% 45%)) !important;
}

/* ── 2. Light theme overrides ────────────────────────────────────────────── */
[data-theme="light"],
.theme-light {
    --background: 200 20% 99%;
    --foreground: 200 30% 10%;
    --card: 0 0% 100%;
    --card-foreground: 200 30% 10%;
    --popover: 0 0% 100%;
    --popover-foreground: 200 30% 10%;
    --primary: 175 80% 40%;
    --primary-foreground: 0 0% 100%;
    --secondary: 200 20% 95%;
    --secondary-foreground: 200 30% 10%;
    --muted: 200 20% 95%;
    --muted-foreground: 200 10% 45%;
    --accent: 200 20% 95%;
    --accent-foreground: 200 30% 10%;
    --destructive: 0 72% 50%;
    --destructive-foreground: 0 0% 100%;
    --border: 200 20% 90%;
    --input: 200 20% 90%;
    --ring: 175 80% 40%;
    --header-bg: 0 0% 100%;
    --sidebar-background: 200 20% 97%;
    --sidebar-foreground: 200 30% 10%;
    --sidebar-primary: 175 80% 40%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 200 20% 93%;
    --sidebar-accent-foreground: 200 30% 10%;
    --sidebar-border: 200 20% 88%;
    --sidebar-ring: 175 80% 40%;
    --gradient-card: linear-gradient(135deg, #ffffff, #f7f9fa);
    --glow-card: 0 2px 4px rgba(20, 184, 166, 0.04);
    --glow-primary: 0 0 8px rgba(20, 184, 166, 0.1);
    --gradient-primary: linear-gradient(135deg, hsl(175 80% 40%), hsl(190 85% 45%));
}

/* ── 3. Font override — Outfit instead of Space Grotesk ──────────────────── */
*,
*:before,
*:after {
    font-family: "Outfit", ui-sans-serif, system-ui, sans-serif !important;
}

/* Monospace stays monospace */
pre, code, kbd, samp, .font-mono, [class*="mono"] {
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
}

/* ── 4. Body / loading screen ────────────────────────────────────────────── */
html, body {
    background-color: hsl(200 12% 5%) !important;
    color: hsl(180 10% 97%) !important;
}

#root:empty::before {
    background: hsl(200 12% 5%) !important;
}

/* ── 5. Sidebar restyling ────────────────────────────────────────────────── */
[data-sidebar="sidebar"],
.sidebar,
[class*="sidebar"]:not([class*="sidebar-content"]) {
    background: hsl(200 14% 3%) !important;
    border-right: 1px solid hsl(200 12% 10%) !important;
}

/* Sidebar logo area — add subtle bottom border */
[data-sidebar="header"],
.sidebar-header {
    border-bottom: 1px solid hsl(200 12% 10%) !important;
    padding-bottom: 0.75rem !important;
}

/* Sidebar menu items — slightly different hover/active treatment */
[data-sidebar="menu-action"],
.sidebar-menu-action {
    border-radius: 0.375rem !important;
}

/* Active sidebar item — teal left border accent */
[data-state="active"][data-sidebar="menu-button"],
.sidebar-menu-button[data-state="active"],
.menu-button-active {
    background: hsl(175 85% 45% / 0.12) !important;
    color: hsl(175 80% 55%) !important;
    border-left: 3px solid hsl(175 85% 45%) !important;
    padding-left: calc(0.75rem - 3px) !important;
}

/* ── 6. Card restyling ───────────────────────────────────────────────────── */
.card,
[class*="card"]:not([class*="card-foreground"]):not([class*="card-content"]) {
    background: hsl(200 12% 7%) !important;
    border: 1px solid hsl(200 12% 12%) !important;
    border-radius: var(--radius) !important;
    box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.15) !important;
}

/* Card hover — subtle teal glow */
.card:hover,
[class*="card"]:hover:not([class*="card-foreground"]):not([class*="card-content"]) {
    border-color: hsl(175 85% 45% / 0.3) !important;
    box-shadow: 0 4px 12px -2px rgba(20, 184, 166, 0.08) !important;
}

/* ── 7. Button restyling ─────────────────────────────────────────────────── */
/* Primary button — teal gradient */
.btn-primary,
[class*="bg-primary"]:not([class*="hover"]):not([class*="focus"]):not([class*="active"]) {
    background: hsl(175 85% 45%) !important;
    color: hsl(200 12% 5%) !important;
    font-weight: 600 !important;
}

.btn-primary:hover,
[class*="bg-primary"]:hover {
    background: hsl(175 85% 50%) !important;
}

/* Gradient buttons — teal gradient instead of purple */
[class*="gradient-primary"],
.bg-gradient-to-r[class*="from-primary"] {
    background-image: linear-gradient(135deg, hsl(175 85% 45%), hsl(190 90% 50%)) !important;
}

/* ── 8. Input/Select restyling ───────────────────────────────────────────── */
input,
textarea,
select,
[class*="input"] {
    background: hsl(200 12% 9%) !important;
    border: 1px solid hsl(200 12% 14%) !important;
    border-radius: calc(var(--radius) - 2px) !important;
}

input:focus,
textarea:focus,
select:focus,
[class*="input"]:focus,
[class*="input"]:focus-within {
    border-color: hsl(175 85% 45%) !important;
    box-shadow: 0 0 0 2px hsl(175 85% 45% / 0.15) !important;
}

/* ── 9. Badge/Pill restyling ─────────────────────────────────────────────── */
[class*="badge"] {
    border-radius: 0.375rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
}

/* ── 10. Table restyling ─────────────────────────────────────────────────── */
table,
[class*="table"] {
    border-radius: var(--radius) !important;
    overflow: hidden;
}

thead,
[class*="thead"] {
    background: hsl(200 12% 9%) !important;
}

[class*="th"] {
    font-weight: 600 !important;
    text-transform: uppercase !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.05em !important;
    color: hsl(200 10% 62%) !important;
}

/* Table row hover — subtle teal tint */
[class*="tr"]:hover,
[class*="row"]:hover {
    background: hsl(175 85% 45% / 0.04) !important;
}

/* ── 11. Scrollbar restyling ─────────────────────────────────────────────── */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: hsl(200 12% 5%);
}

::-webkit-scrollbar-thumb {
    background: hsl(200 12% 18%);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: hsl(175 85% 45% / 0.5);
}

/* ── 12. Tab restyling ───────────────────────────────────────────────────── */
[class*="tab"][data-state="active"],
[class*="tab"]:active {
    color: hsl(175 80% 50%) !important;
    border-bottom-color: hsl(175 85% 45%) !important;
}

/* ── 13. Toggle/Switch restyling ─────────────────────────────────────────── */
[class*="switch"][data-state="checked"],
[class*="toggle"][data-state="on"] {
    background: hsl(175 85% 45%) !important;
}

/* ── 14. Progress bar restyling ──────────────────────────────────────────── */
[class*="progress-indicator"],
[class*="progress-bar"] {
    background: hsl(175 85% 45%) !important;
}

/* ── 15. Tooltip restyling ───────────────────────────────────────────────── */
[class*="tooltip-content"],
[class*="tooltip"] {
    background: hsl(200 12% 9%) !important;
    border: 1px solid hsl(200 12% 14%) !important;
    border-radius: calc(var(--radius) - 2px) !important;
}

/* ── 16. Dialog/Modal restyling ──────────────────────────────────────────── */
[class*="dialog-content"],
[class*="modal-content"],
[class*="sheet-content"] {
    background: hsl(200 12% 7%) !important;
    border: 1px solid hsl(200 12% 14%) !important;
    border-radius: var(--radius) !important;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.4) !important;
}

/* ── 17. Dropdown menu restyling ─────────────────────────────────────────── */
[class*="dropdown-menu-content"],
[class*="popover-content"] {
    background: hsl(200 12% 7%) !important;
    border: 1px solid hsl(200 12% 14%) !important;
    border-radius: var(--radius) !important;
    box-shadow: 0 10px 24px -4px rgba(0, 0, 0, 0.3) !important;
}

/* ── 18. Chart/Graph accent colors ───────────────────────────────────────── */
/* Override chart colors from purple to teal spectrum */
[class*="chart-1"] { --chart-color: hsl(175 85% 45%) !important; }
[class*="chart-2"] { --chart-color: hsl(190 80% 50%) !important; }
[class*="chart-3"] { --chart-color: hsl(160 70% 45%) !important; }
[class*="chart-4"] { --chart-color: hsl(200 80% 55%) !important; }
[class*="chart-5"] { --chart-color: hsl(180 60% 50%) !important; }

/* ── 19. Notification/Toast restyling ────────────────────────────────────── */
[class*="toast"],
[class*="notification"] {
    background: hsl(200 12% 9%) !important;
    border: 1px solid hsl(200 12% 14%) !important;
    border-radius: var(--radius) !important;
}

/* ── 20. Link restyling ──────────────────────────────────────────────────── */
a,
[class*="link"] {
    color: hsl(175 80% 50%);
    text-decoration: none;
    transition: color 0.15s ease;
}

a:hover,
[class*="link"]:hover {
    color: hsl(175 80% 55%);
}

/* ── 21. Code block restyling ────────────────────────────────────────────── */
pre,
[class*="code-block"] {
    background: hsl(200 12% 3%) !important;
    border: 1px solid hsl(200 12% 10%) !important;
    border-radius: calc(var(--radius) - 2px) !important;
    font-family: "JetBrains Mono", monospace !important;
}

/* ── 22. Separator/Divider restyling ─────────────────────────────────────── */
[class*="separator"],
hr {
    background: hsl(200 12% 12%) !important;
    height: 1px !important;
    border: none !important;
}

/* ── 23. Avatar restyling ────────────────────────────────────────────────── */
[class*="avatar"] {
    border-radius: 0.375rem !important;
    border: 2px solid hsl(200 12% 14%) !important;
}

/* ── 24. Animation tweaks ────────────────────────────────────────────────── */
* {
    transition-duration: 150ms !important;
}

/* Smooth fade-in for cards */
.card,
[class*="card"]:not([class*="card-foreground"]):not([class*="card-content"]) {
    animation: kx-fade-in 0.2s ease-out;
}

@keyframes kx-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── 25. Mobile responsive tweaks ────────────────────────────────────────── */
@media (max-width: 768px) {
    :root {
        --radius: 0.5rem;
    }

    .card,
    [class*="card"]:not([class*="card-foreground"]):not([class*="card-content"]) {
        border-radius: 0.5rem !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   26. License/Balance UI Removal
   The credit/balance/license system has been removed from the backend —
   all features are unrestricted. These rules hide the remaining frontend
   UI elements (balance display, deposit button, license/subscription
   card) that no longer serve a purpose.

   Selectors are kept specific (combining multiple class fragments) to
   avoid hiding unrelated elements that happen to share a single class.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hide the balance card on the dashboard.
   This card has the unique combination of emerald-500/5 background +
   emerald-500/20 border + contains the balance amount and deposit button. */
[class*="bg-emerald-500\/5"][class*="border-emerald-500\/20"] {
    display: none !important;
}

/* Hide the balance display in the header (the "$999999.99" text).
   The header shows full_name + "$balance" in a font-mono muted-foreground
   paragraph. This combination is specific to the header balance display. */
header [class*="font-mono"][class*="text-muted-foreground"] {
    display: none !important;
}

/* Hide the subscription freeze/unfreeze card.
   This card uses bg-primary/5 + border-primary/20 and contains
   the freeze/unfreeze controls. */
[class*="bg-primary\/5"][class*="border-primary\/20"] {
    display: none !important;
}