/* ============================================================
   Data Indx - Brand palette + custom styles
   Works with Bootstrap 5.3+ dark/light mode (data-bs-theme)
   ============================================================ */

/* ------------------------------------------------------------
   Brand palette tokens (--di-*) — light theme (default)
   ------------------------------------------------------------ */
:root {
    color-scheme: light;

    --di-bg: #fbfaff;
    --di-bg-subtle: #f5f1ff;
    --di-surface: #ffffff;
    --di-surface-raised: #ffffff;
    --di-surface-muted: #faf7ff;
    --di-border: #e7ddff;
    --di-border-strong: #d8c7ff;

    --di-text: #21143f;
    --di-text-muted: #6d6280;
    --di-text-soft: #8f84a6;
    --di-text-inverse: #ffffff;

    --di-primary: #7c3aed;
    --di-primary-hover: #6d28d9;
    --di-primary-active: #5b21b6;
    --di-primary-soft: #ede9fe;
    --di-primary-subtle: #f5f3ff;

    --di-secondary: #22d3ee;
    --di-secondary-hover: #0891b2;
    --di-secondary-soft: #cffafe;

    --di-accent: #f59e0b;
    --di-accent-hover: #d97706;
    --di-accent-soft: #fef3c7;

    --di-success: #16a34a;
    --di-success-soft: #dcfce7;
    --di-warning: #d97706;
    --di-warning-soft: #ffedd5;
    --di-danger: #dc2626;
    --di-danger-soft: #fee2e2;

    --di-focus-ring: #a78bfa;
    --di-shadow-sm: 0 1px 2px rgb(33 20 63 / 0.08);
    --di-shadow-md: 0 12px 32px rgb(88 28 135 / 0.14);
    --di-brand-gradient: linear-gradient(135deg, #7c3aed 0%, #a855f7 58%, #22d3ee 100%);
    --di-ai-gradient: linear-gradient(135deg, #f8c14a 0%, #f97316 100%);

    /* Layout */
    --sidebar-width: 250px;
    --sidebar-collapsed-width: 68px;
    --transition-speed: 0.2s;

    /* Sidebar uses the dark surface palette in both themes for contrast */
    --sidebar-bg: #17102b;
    --sidebar-text: #c8bce0;
    --sidebar-active: var(--di-primary);
    --sidebar-active-text: #ffffff;
    --sidebar-hover-bg: rgba(255, 255, 255, 0.06);
}

[data-bs-theme="dark"] {
    color-scheme: dark;

    --di-bg: #0b0618;
    --di-bg-subtle: #120b2e;
    --di-surface: #17102b;
    --di-surface-raised: #20143b;
    --di-surface-muted: #261846;
    --di-border: #3c2a62;
    --di-border-strong: #5b3f8c;

    --di-text: #f8f5ff;
    --di-text-muted: #c8bce0;
    --di-text-soft: #9b8bb8;
    --di-text-inverse: #21143f;

    --di-primary: #a78bfa;
    --di-primary-hover: #c4b5fd;
    --di-primary-active: #8b5cf6;
    --di-primary-soft: #2c1a55;
    --di-primary-subtle: #1f143d;

    --di-secondary: #67e8f9;
    --di-secondary-hover: #22d3ee;
    --di-secondary-soft: #123746;

    --di-accent: #fbbf24;
    --di-accent-hover: #f59e0b;
    --di-accent-soft: #3f2c12;

    --di-success: #4ade80;
    --di-success-soft: #12351f;
    --di-warning: #fb923c;
    --di-warning-soft: #3f2411;
    --di-danger: #f87171;
    --di-danger-soft: #411b24;

    --di-focus-ring: #c084fc;
    --di-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.28);
    --di-shadow-md: 0 18px 48px rgb(0 0 0 / 0.38);
    --di-brand-gradient: linear-gradient(135deg, #8b5cf6 0%, #c084fc 58%, #22d3ee 100%);
    --di-ai-gradient: linear-gradient(135deg, #f8c14a 0%, #f97316 100%);

    --sidebar-bg: #0b0618;
}

/* ------------------------------------------------------------
   Bridge --di-* tokens into Bootstrap's CSS variables. Every
   built-in Bootstrap component (buttons, alerts, cards,
   tables, badges, etc.) reads from these, so this single
   mapping recolors the entire app.
   ------------------------------------------------------------ */
:root {
    --bs-primary: var(--di-primary);
    --bs-primary-rgb: 124, 58, 237;
    --bs-primary-text-emphasis: var(--di-primary-active);
    --bs-primary-bg-subtle: var(--di-primary-soft);
    --bs-primary-border-subtle: var(--di-border-strong);
    --bs-link-color: var(--di-primary);
    --bs-link-color-rgb: 124, 58, 237;
    --bs-link-hover-color: var(--di-primary-hover);
    --bs-link-hover-color-rgb: 109, 40, 217;

    --bs-success: var(--di-success);
    --bs-success-rgb: 22, 163, 74;
    --bs-success-bg-subtle: var(--di-success-soft);
    --bs-warning: var(--di-warning);
    --bs-warning-rgb: 217, 119, 6;
    --bs-warning-bg-subtle: var(--di-warning-soft);
    --bs-danger: var(--di-danger);
    --bs-danger-rgb: 220, 38, 38;
    --bs-danger-bg-subtle: var(--di-danger-soft);
    --bs-info: var(--di-secondary);
    --bs-info-rgb: 34, 211, 238;
    --bs-info-bg-subtle: var(--di-secondary-soft);

    --bs-body-bg: var(--di-bg);
    --bs-body-bg-rgb: 251, 250, 255;
    --bs-body-color: var(--di-text);
    --bs-body-color-rgb: 33, 20, 63;
    --bs-emphasis-color: var(--di-text);
    --bs-secondary-color: var(--di-text-muted);
    --bs-secondary-color-rgb: 109, 98, 128;
    --bs-tertiary-color: var(--di-text-soft);
    --bs-tertiary-bg: var(--di-bg-subtle);
    --bs-secondary-bg: var(--di-surface-muted);
    --bs-border-color: var(--di-border);
    --bs-border-color-translucent: rgba(33, 20, 63, 0.08);

    --bs-focus-ring-color: rgba(167, 139, 250, 0.35);
    --bs-box-shadow-sm: var(--di-shadow-sm);
    --bs-box-shadow: var(--di-shadow-md);
}

[data-bs-theme="dark"] {
    --bs-primary: var(--di-primary);
    --bs-primary-rgb: 167, 139, 250;
    --bs-primary-text-emphasis: var(--di-primary-hover);
    --bs-primary-bg-subtle: var(--di-primary-soft);
    --bs-primary-border-subtle: var(--di-border-strong);
    --bs-link-color: var(--di-primary);
    --bs-link-color-rgb: 167, 139, 250;
    --bs-link-hover-color: var(--di-primary-hover);
    --bs-link-hover-color-rgb: 196, 181, 253;

    --bs-success: var(--di-success);
    --bs-success-rgb: 74, 222, 128;
    --bs-success-bg-subtle: var(--di-success-soft);
    --bs-warning: var(--di-warning);
    --bs-warning-rgb: 251, 146, 60;
    --bs-warning-bg-subtle: var(--di-warning-soft);
    --bs-danger: var(--di-danger);
    --bs-danger-rgb: 248, 113, 113;
    --bs-danger-bg-subtle: var(--di-danger-soft);
    --bs-info: var(--di-secondary);
    --bs-info-rgb: 103, 232, 249;
    --bs-info-bg-subtle: var(--di-secondary-soft);

    --bs-body-bg: var(--di-bg);
    --bs-body-bg-rgb: 11, 6, 24;
    --bs-body-color: var(--di-text);
    --bs-body-color-rgb: 248, 245, 255;
    --bs-emphasis-color: var(--di-text);
    --bs-secondary-color: var(--di-text-muted);
    --bs-secondary-color-rgb: 200, 188, 224;
    --bs-tertiary-color: var(--di-text-soft);
    --bs-tertiary-bg: var(--di-bg-subtle);
    --bs-secondary-bg: var(--di-surface-muted);
    --bs-border-color: var(--di-border);
    --bs-border-color-translucent: rgba(255, 255, 255, 0.08);

    --bs-focus-ring-color: rgba(192, 132, 252, 0.35);
}

/* ============================================================
   LAYOUT
   ============================================================ */

body {
    min-height: 100vh;
    overflow-x: hidden;
    background: var(--di-bg);
    color: var(--di-text);
}

.auth-page {
    background: var(--di-brand-gradient);
}

[data-bs-theme="dark"] .auth-page {
    background: linear-gradient(135deg, #1f143d 0%, #2c1a55 50%, #123746 100%);
}

/* Cards lift off the page slightly so the surface tone reads */
.card {
    background: var(--di-surface);
    box-shadow: var(--di-shadow-sm);
}

[data-bs-theme="dark"] .card {
    background: var(--di-surface);
}

/* ============================================================
   SIDEBAR
   ============================================================ */

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-width);
    height: 100vh;
    background: var(--sidebar-bg);
    z-index: 1040;
    transition: width var(--transition-speed) ease;
    overflow-x: hidden;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.sidebar.collapsed {
    width: var(--sidebar-collapsed-width);
}

.sidebar.collapsed .sidebar-text,
.sidebar.collapsed .nav-section-title {
    display: none;
}

.sidebar.collapsed .sidebar-header {
    justify-content: center;
}

.sidebar.collapsed #sidebarToggle i {
    transform: rotate(180deg);
}

.sidebar-header {
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar-header a {
    color: #fff;
}

.sidebar-nav {
    flex: 1;
    padding-top: 0.5rem;
}

.sidebar .nav-link {
    color: var(--sidebar-text);
    font-size: 0.875rem;
    transition: all var(--transition-speed);
    white-space: nowrap;
}

.sidebar .nav-link:hover {
    color: #fff;
    background: var(--sidebar-hover-bg);
}

.sidebar .nav-link.active {
    color: var(--sidebar-active-text);
    background: var(--sidebar-active);
    box-shadow: 0 0 0 1px var(--di-primary-hover) inset;
}

.sidebar .nav-link i {
    width: 20px;
    text-align: center;
    font-size: 1rem;
}

.sidebar .nav-section-title {
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    margin-top: 0.5rem;
}

.sidebar .nav-link.disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* ------------------------------------------------------------
   Collapsible platform sections
   ------------------------------------------------------------ */

.sidebar .nav-section-header {
    background: transparent;
    border: 0;
    color: var(--sidebar-text);
    font-size: 0.875rem;
    font-weight: 600;
    transition: all var(--transition-speed);
    white-space: nowrap;
}

.sidebar .nav-section-header:hover,
.sidebar .nav-section-header:focus {
    color: #fff;
    background: var(--sidebar-hover-bg);
    outline: none;
    box-shadow: none;
}

.sidebar .nav-section-header i {
    width: 20px;
    text-align: center;
    font-size: 1rem;
}

.sidebar .nav-section-chevron {
    font-size: 0.7rem;
    opacity: 0.6;
    transition: transform var(--transition-speed);
}

.sidebar .nav-section-header[aria-expanded="true"] .nav-section-chevron {
    transform: rotate(180deg);
}

.sidebar .nav-section-header-sub {
    font-weight: 500;
    font-size: 0.8rem;
    opacity: 0.85;
    margin-top: 0.25rem;
}

.sidebar .nav-link-sub {
    padding-left: 1.75rem !important;
}

.sidebar.collapsed .nav-section-chevron {
    display: none;
}

.sidebar.collapsed .nav-link-sub {
    padding-left: 0.75rem !important;
}

.sidebar.collapsed .nav-section-header {
    pointer-events: none;
}

/* ============================================================
   MAIN CONTENT
   ============================================================ */

.main-content {
    margin-left: var(--sidebar-width);
    min-height: 100vh;
    transition: margin-left var(--transition-speed) ease;
}

.sidebar.collapsed ~ .main-content {
    margin-left: var(--sidebar-collapsed-width);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 991.98px) {
    .sidebar {
        transform: translateX(-100%);
        width: var(--sidebar-width) !important;
    }

    .sidebar.show {
        transform: translateX(0);
    }

    .main-content {
        margin-left: 0 !important;
    }

    .sidebar-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(11, 6, 24, 0.5);
        z-index: 1035;
        display: none;
    }

    .sidebar-overlay.show {
        display: block;
    }
}

/* ============================================================
   CARDS & TABLES
   ============================================================ */

.card {
    border: 1px solid var(--di-border);
    border-radius: 0.5rem;
}

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

.table th {
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--di-text-muted);
    border-bottom-width: 1px;
}

.table td {
    vertical-align: middle;
}

/* ============================================================
   BUTTONS — brand styling on the primary
   ============================================================ */

.btn-primary {
    --bs-btn-bg: var(--di-primary);
    --bs-btn-border-color: var(--di-primary);
    --bs-btn-hover-bg: var(--di-primary-hover);
    --bs-btn-hover-border-color: var(--di-primary-hover);
    --bs-btn-active-bg: var(--di-primary-active);
    --bs-btn-active-border-color: var(--di-primary-active);
    --bs-btn-disabled-bg: var(--di-primary);
    --bs-btn-disabled-border-color: var(--di-primary);
    --bs-btn-color: var(--di-text-inverse);
}

.btn-outline-primary {
    --bs-btn-color: var(--di-primary);
    --bs-btn-border-color: var(--di-primary);
    --bs-btn-hover-bg: var(--di-primary);
    --bs-btn-hover-border-color: var(--di-primary);
    --bs-btn-hover-color: var(--di-text-inverse);
    --bs-btn-active-bg: var(--di-primary-active);
    --bs-btn-active-border-color: var(--di-primary-active);
}

/* ============================================================
   MISC COMPONENTS
   ============================================================ */

.avatar-sm {
    font-weight: 600;
    font-size: 0.875rem;
}

.tracking-widest {
    letter-spacing: 0.5em;
}

.font-monospace {
    font-size: 0.85em;
}

.badge {
    font-weight: 500;
    font-size: 0.75rem;
    padding: 0.35em 0.6em;
}

/* "New to Brand" badge — uses the brand gradient */
.badge.bg-brand-new {
    background: var(--di-brand-gradient) !important;
    color: var(--di-text-inverse) !important;
}

/* Optional: drop-in for AI-flavored badges/buttons that want the warm gradient */
.bg-ai-gradient {
    background: var(--di-ai-gradient) !important;
    color: var(--di-text-inverse) !important;
}

.bg-brand-gradient {
    background: var(--di-brand-gradient) !important;
    color: var(--di-text-inverse) !important;
}

/* Password visibility toggle */
.toggle-password .bi-eye-slash {
    display: none;
}

.toggle-password.active .bi-eye {
    display: none;
}

.toggle-password.active .bi-eye-slash {
    display: inline;
}

/* Scrollbar styling for sidebar */
.sidebar::-webkit-scrollbar {
    width: 4px;
}

.sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

/* Flash messages */
.alert {
    border-radius: 0.5rem;
}

/* Form controls pick up the brand focus ring */
.form-control:focus,
.form-select:focus {
    border-color: var(--di-focus-ring);
    box-shadow: 0 0 0 0.2rem var(--bs-focus-ring-color);
}

/* ============================================================
   DARK MODE TWEAKS
   ============================================================ */

[data-bs-theme="dark"] .card {
    border-color: var(--di-border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

[data-bs-theme="dark"] .sidebar-header {
    border-bottom-color: rgba(255, 255, 255, 0.05);
}

/* ============================================================
   SORTABLE TABLE HEADERS
   ============================================================ */

th.sortable:hover {
    background-color: rgba(124, 58, 237, 0.06);
}

[data-bs-theme="dark"] th.sortable:hover {
    background-color: rgba(167, 139, 250, 0.10);
}

th.sortable .sort-icon {
    font-size: 0.7em;
    opacity: 0.35;
    margin-left: 4px;
    vertical-align: middle;
}

th.sortable:hover .sort-icon {
    opacity: 0.7;
}

th.sortable .sort-icon.bi-arrow-up,
th.sortable .sort-icon.bi-arrow-down {
    opacity: 1;
}

/* ============================================================
   DATE RANGE PICKER
   ============================================================ */

.date-range-picker {
    position: relative;
    display: inline-block;
}

.date-range-trigger {
    font-size: 0.875rem;
    white-space: nowrap;
}

.date-range-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1050;
    min-width: 280px;
    background: var(--di-surface);
    border: 1px solid var(--di-border);
    border-radius: 0.5rem;
    margin-top: 4px;
    overflow: hidden;
    box-shadow: var(--di-shadow-md);
}

.date-range-dropdown.show {
    display: flex;
}

.dr-presets {
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--di-border);
    min-width: 150px;
    padding: 0.5rem 0;
}

.dr-preset {
    display: block;
    width: 100%;
    padding: 0.4rem 1rem;
    border: none;
    background: none;
    text-align: left;
    font-size: 0.8125rem;
    color: var(--di-text);
    cursor: pointer;
    transition: background 0.15s;
}

.dr-preset:hover {
    background: var(--di-primary-soft);
}

.dr-preset.active {
    background: var(--di-primary);
    color: var(--di-text-inverse);
    font-weight: 500;
}

.dr-custom {
    padding: 0.75rem;
    min-width: 200px;
}

.dr-custom-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--di-text-muted);
    margin-bottom: 0.5rem;
}

.dr-custom-fields {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.dr-custom-sep {
    font-size: 0.8rem;
    color: var(--di-text-soft);
}

.dr-custom-fields input {
    font-size: 0.8rem;
}

@media (max-width: 575.98px) {
    .date-range-dropdown {
        flex-direction: column;
        min-width: 220px;
    }
    .dr-presets {
        border-right: none;
        border-bottom: 1px solid var(--di-border);
        flex-direction: row;
        flex-wrap: wrap;
        min-width: auto;
    }
    .dr-preset {
        width: auto;
        padding: 0.3rem 0.6rem;
        font-size: 0.75rem;
    }
}