/*
 * BlazorToolkit Design System
 *
 * Shared visual foundation for Blazor apps.
 * Provides dark/light tokens, layout primitives and btk-* mapping.
 *
 * Setup:
 *   <link rel="stylesheet" href="_content/BlazorToolkit.Components/blazortoolkit-design.css" />
 *   <script src="_content/BlazorToolkit.Components/blazortoolkit-design.js"></script>
 *
 * Theme: btkTheme.toggle() / .set('light') / .get()
 *
 * Layout options:
 *   A) App-bar + sidebar (Mission Control style):
 *      .btk-app > .btk-app-bar + .btk-app-body > .btk-sidebar + .btk-main
 *
 *   B) Full-height sidebar (FluxQuery style):
 *      .btk-shell > .btk-sidebar + .btk-main
 */

/* ═══════════════════════════════════════════
   Tokens — dark (default)
   ═══════════════════════════════════════════ */
:root {
    --app-bg: #0f0f0f;
    --app-surface: #1a1a1a;
    --app-inset: #0a0a0a;
    --app-muted: #252525;
    --app-card: #1e1e1e;

    --app-text: #e5e5e5;
    --app-text-secondary: #a3a3a3;
    --app-text-muted: #737373;
    --app-text-faint: #525252;

    --app-accent: #30a366;
    --app-accent-hover: #3dbe78;
    --app-accent-light: #B4FFE5;
    --app-accent-subtle: rgba(48, 163, 102, 0.08);

    --app-border: #2a2a2a;
    --app-border-light: #1f1f1f;

    --app-danger: #ef4444;
    --app-danger-subtle: rgba(239, 68, 68, 0.08);
    --app-warning: #f59e0b;
    --app-success: #22c55e;

    --app-code-bg: #11111b;
    --app-code-text: #cdd6f4;

    --app-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --app-font-mono: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', monospace;
    --app-font-size: 14px;
    --app-radius: 6px;
    --app-radius-sm: 4px;

    color-scheme: dark;
}

/* ═══════════════════════════════════════════
   Tokens — light
   ═══════════════════════════════════════════ */
:root.light {
    --app-bg: #f7f7f8;
    --app-surface: #ffffff;
    --app-inset: #f0f0f2;
    --app-muted: #e8e8ea;
    --app-card: #ffffff;

    --app-text: #3a3a3a;
    --app-text-secondary: #666666;
    --app-text-muted: #808080;
    --app-text-faint: #b0b0b0;

    --app-accent: #1a7a4a;
    --app-accent-hover: #15633d;
    --app-accent-light: #0A9B6A;
    --app-accent-subtle: rgba(26, 122, 74, 0.06);

    --app-border: #e0e0e2;
    --app-border-light: #eaeaec;

    --app-danger: #b91c1c;
    --app-danger-subtle: rgba(185, 28, 28, 0.06);
    --app-warning: #d97706;
    --app-success: #16a34a;

    --app-code-bg: #f0f0f2;
    --app-code-text: #1a1a1a;

    color-scheme: light;
}

/* ═══════════════════════════════════════════
   Base reset
   ═══════════════════════════════════════════ */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--app-font);
    font-size: var(--app-font-size);
    background: var(--app-bg);
    color: var(--app-text);
    height: 100%;
    overflow: hidden;
}

a {
    color: var(--app-accent);
}

a:hover {
    color: var(--app-accent-hover);
}

code {
    font-family: var(--app-font-mono);
    font-size: 0.85em;
}

h1, h2, h3, h4 {
    margin: 0;
    font-weight: 500;
}

h1 { font-size: 1.4rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }

button {
    font-family: inherit;
    font-size: inherit;
}

/* ═══════════════════════════════════════════
   Scrollbars
   ═══════════════════════════════════════════ */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--app-border);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--app-text-faint);
}

/* ═══════════════════════════════════════════
   Layout A: App-bar + sidebar
   Use: .btk-app > .btk-app-bar + .btk-app-body > .btk-sidebar + .btk-main
   ═══════════════════════════════════════════ */
.btk-app {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: var(--app-bg);
    color: var(--app-text);
}

.btk-app-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 3rem;
    background: var(--app-inset);
    border-bottom: 1px solid var(--app-border);
    padding: 0 1rem;
    flex-shrink: 0;
}

.btk-app-bar-left,
.btk-app-bar-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btk-app-title {
    color: var(--app-accent);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.btk-app-title:hover {
    color: var(--app-accent-hover);
}

.btk-app-body {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* ═══════════════════════════════════════════
   Layout B: Full-height sidebar
   Use: .btk-shell > .btk-sidebar + .btk-main
   ═══════════════════════════════════════════ */
.btk-shell {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

/* ═══════════════════════════════════════════
   Shared: Sidebar
   ═══════════════════════════════════════════ */
.btk-sidebar {
    width: 200px;
    flex-shrink: 0;
    background: var(--app-inset);
    border-right: 1px solid var(--app-border);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/* Wider sidebar variant */
.btk-sidebar-wide {
    width: 260px;
    min-width: 260px;
}

/* ═══════════════════════════════════════════
   Shared: Main content
   ═══════════════════════════════════════════ */
.btk-main {
    flex: 1;
    overflow-y: auto;
    background: var(--app-bg);
}

/* ═══════════════════════════════════════════
   Sidebar navigation
   ═══════════════════════════════════════════ */
.btk-sidebar-header {
    padding: 1rem;
    border-bottom: 1px solid var(--app-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.btk-sidebar-brand {
    color: var(--app-accent-light);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-decoration: none;
}

.btk-sidebar-brand:hover {
    color: var(--app-accent-light);
}

.btk-sidebar-nav {
    display: flex;
    flex-direction: column;
    padding: 0.75rem 0;
}

.btk-sidebar-section {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--app-text-faint);
    padding: 1.25rem 1rem 0.25rem;
}

.btk-sidebar-link {
    color: var(--app-text-secondary);
    padding: 0.5rem 1rem;
    text-decoration: none;
    font-size: 0.85rem;
    border-left: 2px solid transparent;
    transition: all 0.15s;
    display: block;
}

.btk-sidebar-link:hover {
    color: var(--app-text);
    background: var(--app-accent-subtle);
}

.btk-sidebar-link.active {
    color: var(--app-accent);
    border-left-color: var(--app-accent);
    background: var(--app-accent-subtle);
}

/* ═══════════════════════════════════════════
   Buttons
   ═══════════════════════════════════════════ */
.btk-btn-icon {
    background: none;
    border: none;
    color: var(--app-text-secondary);
    cursor: pointer;
    padding: 0.3rem 0.4rem;
    font-size: 1rem;
    border-radius: var(--app-radius-sm);
    line-height: 1;
    text-decoration: none;
}

.btk-btn-icon:hover {
    color: var(--app-text);
    background: var(--app-accent-subtle);
}

.btk-theme-toggle {
    background: none;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-sm);
    color: var(--app-text-secondary);
    font-size: 1rem;
    width: 2rem;
    height: 2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    padding: 0;
}

.btk-theme-toggle:hover {
    color: var(--app-accent-light);
    border-color: var(--app-accent);
}

/* ═══════════════════════════════════════════
   Mobile sidebar (opt-in for Layout A)
   ═══════════════════════════════════════════ */
.btk-nav-toggle {
    background: none;
    border: none;
    color: var(--app-text-secondary);
    font-size: 1.2rem;
    padding: 0.25rem;
    cursor: pointer;
}

.btk-sidebar.hidden {
    display: none !important;
}

.btk-sidebar-backdrop {
    display: none;
}

@media (max-width: 768px) {
    .btk-app-body > .btk-sidebar {
        display: none !important;
        position: fixed;
        top: 3rem;
        left: 0;
        bottom: 0;
        z-index: 100;
        width: 220px;
        border-right: 1px solid var(--app-border);
    }

    .btk-app-body > .btk-sidebar.open {
        display: flex !important;
    }

    .btk-sidebar-backdrop.open {
        display: block !important;
        position: fixed;
        top: 3rem;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 99;
    }
}

/* ═══════════════════════════════════════════
   Bootstrap overrides for dark/light theming
   These ensure Bootstrap components respect
   the active theme when both are used.
   ═══════════════════════════════════════════ */

/* Form inputs */
.form-select,
.form-control {
    background-color: var(--app-surface);
    color: var(--app-text);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-sm);
    padding: 0.4rem 0.6rem;
    font-size: 0.85rem;
    transition: border-color 0.15s;
}

.form-select:focus,
.form-control:focus {
    background-color: var(--app-surface);
    color: var(--app-text);
    border-color: var(--app-accent);
    box-shadow: 0 0 0 2px var(--app-accent-subtle);
    outline: none;
}

.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23737373' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 0.75rem;
    padding-right: 2rem;
    appearance: none;
}

.form-select option {
    background: var(--app-surface);
    color: var(--app-text);
}

.form-label {
    color: var(--app-text);
    font-weight: 500;
    font-size: 0.85rem;
}

/* Checkboxes */
.form-check-input {
    width: 1rem;
    height: 1rem;
    background-color: var(--app-surface);
    border: 1.5px solid var(--app-border);
    border-radius: 3px;
    appearance: none;
    cursor: pointer;
    transition: all 0.15s;
    vertical-align: middle;
    margin-top: 0;
}

.form-check-input:checked {
    background-color: var(--app-accent);
    border-color: var(--app-accent);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
    background-size: 0.7rem;
    background-repeat: no-repeat;
    background-position: center;
}

.form-check-input:focus {
    border-color: var(--app-accent);
    box-shadow: 0 0 0 2px var(--app-accent-subtle);
    outline: none;
}

.form-check-label {
    color: var(--app-text-secondary);
    font-size: 0.85rem;
    cursor: pointer;
}

/* Cards */
.card {
    background: var(--app-card, var(--app-surface));
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    color: var(--app-text);
}

.card-header {
    background: var(--app-muted);
    border-bottom: 1px solid var(--app-border);
    color: var(--app-text);
    padding: 0.6rem 1rem;
    font-size: 0.85rem;
}

.card-body {
    padding: 1rem;
}

.card-body pre {
    background: var(--app-code-bg);
    color: var(--app-code-text);
    border-radius: var(--app-radius-sm);
    padding: 0.75rem;
    margin: 0;
}

/* Badges */
.badge {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
}

.badge.bg-success {
    background-color: var(--app-accent) !important;
}

.badge.bg-danger {
    background-color: var(--app-danger) !important;
}

/* Alerts */
.alert-success {
    background: var(--app-accent-subtle);
    border: 1px solid var(--app-accent);
    color: var(--app-accent);
    border-radius: var(--app-radius-sm);
}

.alert-danger {
    background: var(--app-danger-subtle);
    border: 1px solid var(--app-danger);
    color: var(--app-danger);
    border-radius: var(--app-radius-sm);
}

/* Tables */
.table {
    color: var(--app-text);
}

.table > :not(caption) > * > * {
    background-color: transparent;
    border-bottom-color: var(--app-border-light);
    color: var(--app-text);
}

.table > thead > tr > th {
    background: var(--app-muted);
    border-bottom-color: var(--app-border);
}

/* ═══════════════════════════════════════════
   Short aliases for convenience
   Apps may use --bg-page or --app-bg etc.
   ═══════════════════════════════════════════ */
:root {
    --bg-page: var(--app-bg);
    --bg-surface: var(--app-surface);
    --bg-inset: var(--app-inset);
    --bg-muted: var(--app-muted);

    --text: var(--app-text);
    --text-secondary: var(--app-text-secondary);
    --text-muted: var(--app-text-muted);
    --text-faint: var(--app-text-faint);

    --accent: var(--app-accent);
    --accent-hover: var(--app-accent-hover);
    --accent-subtle: var(--app-accent-subtle);

    --border: var(--app-border);
    --border-light: var(--app-border-light);

    --error: var(--app-danger);
    --warning: var(--app-warning);
    --terminal-bg: var(--app-code-bg);
}

/* ═══════════════════════════════════════════
   Map app tokens → btk-* component variables
   ═══════════════════════════════════════════ */
:root {
    --btk-font-family: var(--app-font);
    --btk-font-family-mono: var(--app-font-mono);
    --btk-font-size-xs: 0.65rem;
    --btk-font-size-sm: 0.75rem;
    --btk-font-size-base: 0.8125rem;
    --btk-font-size-md: 0.875rem;
    --btk-line-height: 1.5;
    --btk-radius: var(--app-radius);
    --btk-radius-sm: var(--app-radius-sm);
    --btk-radius-lg: 8px;
    --btk-transition: 0.15s ease;

    --btk-primary: var(--app-accent);
    --btk-primary-hover: var(--app-accent-hover);
    --btk-primary-light: var(--app-accent-subtle);
    --btk-primary-border: var(--app-accent);
    --btk-danger: var(--app-danger);
    --btk-danger-light: var(--app-danger-subtle);
    --btk-danger-border: var(--app-danger);
    --btk-danger-dark: var(--app-danger);
    --btk-success: var(--app-success);
    --btk-success-light: var(--app-accent-subtle);

    --btk-bg: var(--app-surface);
    --btk-bg-surface: var(--app-inset);
    --btk-bg-muted: var(--app-muted);
    --btk-bg-inset: var(--app-inset);

    --btk-text: var(--app-text);
    --btk-text-strong: var(--app-text);
    --btk-text-label: var(--app-text-secondary);
    --btk-text-muted: var(--app-text-muted);
    --btk-text-faint: var(--app-text-faint);

    --btk-border: var(--app-border);
    --btk-border-light: var(--app-border-light);
    --btk-border-focus: var(--app-accent);
    --btk-focus-ring: var(--app-accent-subtle);

    --btk-code-bg: var(--app-code-bg);
    --btk-code-text: var(--app-code-text);

    --btk-selected-bg: var(--app-accent-subtle);
    --btk-selected-border: var(--app-accent);
    --btk-hover-bg: var(--app-muted);

    /* Syntax highlighting — dark mode (VS Code Dark+ inspired) */
    --btk-hl-keyword: #569cd6;
    --btk-hl-builtin: #4ec9b0;
    --btk-hl-string: #ce9178;
    --btk-hl-number: #b5cea8;
    --btk-hl-comment: #6a9955;
    --btk-hl-pipe: #dcdcaa;
    --btk-hl-field: #c586c0;
    --btk-hl-operator: #d4d4d4;

    /* Tree view type badges — dark defaults */
    --btk-type-object-bg: rgba(59, 130, 246, 0.15);
    --btk-type-object-text: #60a5fa;
    --btk-type-array-bg: rgba(236, 72, 153, 0.15);
    --btk-type-array-text: #f472b6;
    --btk-type-string-bg: rgba(34, 197, 94, 0.15);
    --btk-type-string-text: #4ade80;
    --btk-type-number-bg: rgba(245, 158, 11, 0.15);
    --btk-type-number-text: #fbbf24;
    --btk-type-bool-bg: rgba(99, 102, 241, 0.15);
    --btk-type-bool-text: #818cf8;
    --btk-type-null-bg: var(--app-muted);
    --btk-type-null-text: var(--app-text-faint);
}

/* Light mode overrides */
:root.light {
    /* Syntax highlighting — light mode (IntelliJ inspired) */
    --btk-hl-keyword: #0033b3;
    --btk-hl-builtin: #0033b3;
    --btk-hl-string: #067d17;
    --btk-hl-number: #1750eb;
    --btk-hl-comment: #8c8c8c;
    --btk-hl-pipe: #cf8e00;
    --btk-hl-field: #9c27b0;
    --btk-hl-operator: #555;

    /* Type badges */
    --btk-type-object-bg: #dbeafe;
    --btk-type-object-text: #1d4ed8;
    --btk-type-array-bg: #fce7f3;
    --btk-type-array-text: #be185d;
    --btk-type-string-bg: #dcfce7;
    --btk-type-string-text: #166534;
    --btk-type-number-bg: #fef3c7;
    --btk-type-number-text: #92400e;
    --btk-type-bool-bg: #e0e7ff;
    --btk-type-bool-text: #3730a3;
    --btk-type-null-bg: #f1f5f9;
    --btk-type-null-text: #94a3b8;
}