/**
 * JetBrains Theme Variables
 * Canonical list of JB design tokens used across dashboard, landing page, and mail UI.
 * Keep this file as the single source of truth for any `jb-*` background, text, border,
 * or component helper class to avoid mismatched token names.
 */

:root {
    /* Dark theme (default) */
    --jb-bg-primary: #1e1f22;
    --jb-bg-secondary: #2b2d30;
    --jb-bg-tertiary: #313335;
    --jb-bg-quaternary: #1a1c1f;
    --jb-bg-hover: #35373a;
    --jb-bg-active: #3f4246;
    --jb-bg-accent: rgba(0, 128, 199, 0.12);

    --jb-text-primary: #bcbec4;
    --jb-text-secondary: #868a91;
    --jb-text-tertiary: #6d7077;
    --jb-text-muted: #9fa2a7;
    --jb-text-accent: #33a7e5;
    --jb-text-success: #7edc90;

    --jb-accent: #0080c7;
    --jb-accent-hover: #1a9ce0;
    --jb-accent-light: #40b6ff;
    --jb-accent-dark: #00639e;
    --jb-blue: #3592c4;
    --jb-green: #499c54;
    --jb-purple: #9876aa;

    --jb-border: #3d3f41;
    --jb-border-primary: #3d3f41;
    --jb-border-secondary: #2a2c2e;
    --jb-border-accent: #0080c7;

    --jb-shadow: rgba(0, 0, 0, 0.5);
    --jb-ring-accent: rgba(0, 128, 199, 0.45);

    --jb-input: #25272a;
    --jb-select: #25272a;
    --jb-textarea: #1f2124;
    --jb-checkbox: #2f3134;
}

/* Light theme */
html:not(.dark) {
    --jb-bg-primary: #f2f2f2;
    --jb-bg-secondary: #ffffff;
    --jb-bg-tertiary: #e8e8e8;
    --jb-bg-quaternary: #dcdcdc;
    --jb-bg-hover: #f7f9fc;
    --jb-bg-active: #e1e7ef;
    --jb-bg-accent: #e6f4ff;

    --jb-text-primary: #2b2d30;
    --jb-text-secondary: #6c707e;
    --jb-text-tertiary: #9aa0ab;
    --jb-text-muted: #7f8491;
    --jb-text-accent: #0d6eaf;
    --jb-text-success: #2f855a;

    --jb-accent: #0080c7;
    --jb-accent-hover: #0070b0;
    --jb-accent-light: #5ec2ff;
    --jb-accent-dark: #005785;
    --jb-blue: #0d6eaf;
    --jb-green: #3b9a49;
    --jb-purple: #9876aa;

    --jb-border: #d1d1d1;
    --jb-border-primary: #d1d1d1;
    --jb-border-secondary: #e4e4e4;
    --jb-border-accent: #0d6eaf;

    --jb-shadow: rgba(0, 0, 0, 0.1);
    --jb-ring-accent: rgba(13, 110, 175, 0.35);

    --jb-input: #ffffff;
    --jb-select: #ffffff;
    --jb-textarea: #ffffff;
    --jb-checkbox: #ffffff;
}

/* Smooth transitions for theme changes */
body {
    transition: background-color 0.3s ease, color 0.3s ease;
}

* {
    transition-property: background-color, border-color, color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}

/* ========================================= */
/* Utility classes sourced from JB tokens    */
/* ========================================= */

/* Background helpers */
.jb-bg-primary { background-color: var(--jb-bg-primary); }
.jb-bg-secondary { background-color: var(--jb-bg-secondary); }
.jb-bg-tertiary { background-color: var(--jb-bg-tertiary); }
.jb-bg-quaternary { background-color: var(--jb-bg-quaternary); }
.jb-bg-hover { background-color: var(--jb-bg-hover); }
.jb-bg-active { background-color: var(--jb-bg-active); }
.jb-bg-accent { background-color: var(--jb-bg-accent); }

/* Text helpers */
.jb-text-primary { color: var(--jb-text-primary); }
.jb-text-secondary { color: var(--jb-text-secondary); }
.jb-text-tertiary { color: var(--jb-text-tertiary); }
.jb-text-muted { color: var(--jb-text-muted); }
.jb-text-accent { color: var(--jb-text-accent); }
.jb-text-success { color: var(--jb-text-success); }

/* Border helpers */
.jb-border { border-color: var(--jb-border); }
.jb-border-primary { border-color: var(--jb-border-primary); }
.jb-border-secondary { border-color: var(--jb-border-secondary); }
.jb-border-accent { border-color: var(--jb-border-accent); }

/* Accent / ring helper */
.jb-ring-accent {
    box-shadow: 0 0 0 2px var(--jb-ring-accent);
    border-radius: inherit;
}

/* Accent background pills */
.jb-bg-accent-solid {
    background-color: var(--jb-accent);
    color: #ffffff;
}

/* Form controls */
.jb-input,
.jb-select,
.jb-textarea {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    border: 1px solid var(--jb-border-primary);
    background-color: var(--jb-input);
    color: var(--jb-text-primary);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.jb-input::placeholder,
.jb-select::placeholder,
.jb-textarea::placeholder {
    color: var(--jb-text-muted);
    opacity: 0.8;
}

.jb-input:focus,
.jb-select:focus,
.jb-textarea:focus {
    outline: none;
    border-color: var(--jb-border-accent);
    box-shadow: 0 0 0 2px var(--jb-ring-accent);
}

.jb-select {
    appearance: none;
}

.jb-textarea {
    min-height: 6rem;
    background-color: var(--jb-textarea);
    resize: vertical;
}

.jb-checkbox {
    width: 1rem;
    height: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.25rem;
    border: 1px solid var(--jb-border-primary);
    background-color: var(--jb-checkbox);
    accent-color: var(--jb-accent);
}

/* RTL Support */

/* Dropdown positioning for RTL */
[dir="rtl"] .dropdown-menu {
    left: 0 !important;
    right: auto !important;
}

/* Sidebar positioning for RTL */
[dir="rtl"] #sidebar {
    left: auto !important;
    right: 0 !important;
}

[dir="rtl"] #sidebar {
    border-left: 1px solid var(--jb-border);
    border-right: none;
}

/* Sidebar transform for RTL */
[dir="rtl"] #sidebar.-translate-x-full {
    transform: translateX(100%) !important;
}

[dir="rtl"] #sidebar.translate-x-0 {
    transform: translateX(0) !important;
}

/* Sidebar item active border for RTL */
[dir="rtl"] .sidebar-item {
    border-left: none;
    border-right: 2px solid transparent;
}

[dir="rtl"] .sidebar-item.active {
    border-right-color: var(--jb-accent);
}

/* Toast container positioning for RTL */
[dir="rtl"] #toast-container {
    left: 1rem;
    right: auto;
}