/**
 * Claude AI-Inspired Design Theme
 * ---
 * Light mode only. Warm, clean, minimal aesthetic inspired by Claude's design language.
 * 
 * Key design traits:
 *  - Warm cream/beige backgrounds (#FAF9F7, #F5F3EF)
 *  - Left colored borders on cards/sections for visual accents
 *  - Inter font family with generous spacing
 *  - Magenta primary accent (#CE40AA), Coral red (#FF3058), Orange (#FC7541)
 *  - Soft shadows, rounded corners, breathing room
 *  - Muted, sophisticated color palette
 *
 * Loaded AFTER shadcn-overrides.css to override with Claude aesthetics.
 */

/* ==========================================================================
   0. FORCE LIGHT MODE — override any dark mode
   ========================================================================== */

html,
[data-bs-theme='dark'],
[data-bs-theme='light'] {
    color-scheme: light;
}

[data-bs-theme='dark'] {
    --tblr-body-bg: var(--claude-bg);
    --tblr-body-color: var(--claude-text);
    --tblr-bg-surface: var(--claude-surface);
    --tblr-border-color: var(--claude-border);
    --tblr-card-bg: var(--claude-surface);
}

/* ==========================================================================
   1. CSS CUSTOM PROPERTIES — Claude design tokens
   ========================================================================== */

:root,
[data-bs-theme='light'],
[data-bs-theme='dark'] {
    /* Claude warm palette */
    --claude-bg: #faf9f7;
    --claude-bg-secondary: #f5f3ef;
    --claude-surface: #ffffff;
    --claude-surface-hover: #f9f8f6;
    --claude-text: #1a1a1a;
    --claude-text-secondary: #6b6560;
    --claude-text-tertiary: #9b9590;
    --claude-border: #e8e4df;
    --claude-border-light: #f0ece7;
    --claude-ring: #ce40aa;

    /* Primary accent — Magenta */
    --claude-primary: #ce40aa;
    --claude-primary-hover: #b5389a;
    --claude-primary-light: rgba(206, 64, 170, 0.08);
    --claude-primary-lighter: rgba(206, 64, 170, 0.04);

    /* Accent colors for left borders */
    --claude-accent-orange: #fc7541;
    --claude-accent-blue: #5b8def;
    --claude-accent-green: #4caf7d;
    --claude-accent-purple: #8b5cf6;
    --claude-accent-amber: #fc7541;
    --claude-accent-rose: #ff3058;
    --claude-accent-teal: #3ba3a1;
    --claude-accent-indigo: #8b5cf6;

    /* Gradient for left accent borders */
    --claude-gradient-border: linear-gradient(to bottom, #ce40aa, #ff3058, #fc7541);

    /* Remap Tabler variables */
    --tblr-body-bg: var(--claude-bg);
    --tblr-body-color: var(--claude-text);
    --tblr-bg-surface: var(--claude-surface);
    --tblr-bg-surface-secondary: var(--claude-bg-secondary);
    --tblr-border-color: var(--claude-border);
    --tblr-border-color-translucent: rgba(0, 0, 0, 0.06);
    --tblr-card-bg: var(--claude-surface);
    --tblr-muted: var(--claude-text-tertiary);
    --tblr-secondary: var(--claude-text-secondary);
    --tblr-hover-bg: var(--claude-surface-hover);

    /* Override shadcn tokens */
    --shadcn-background: var(--claude-bg);
    --shadcn-foreground: var(--claude-text);
    --shadcn-card: var(--claude-surface);
    --shadcn-card-foreground: var(--claude-text);
    --shadcn-muted: var(--claude-bg-secondary);
    --shadcn-muted-foreground: var(--claude-text-secondary);
    --shadcn-accent: var(--claude-bg-secondary);
    --shadcn-accent-foreground: var(--claude-text);
    --shadcn-border: var(--claude-border);
    --shadcn-input: var(--claude-border);
    --shadcn-ring: var(--claude-ring);
    --shadcn-secondary: var(--claude-bg-secondary);
    --shadcn-secondary-foreground: var(--claude-text);

    /* Radius — slightly softer */
    --tblr-border-radius: 0.5rem;
    --tblr-border-radius-sm: 0.375rem;
    --tblr-border-radius-lg: 0.625rem;
    --tblr-border-radius-xl: 0.75rem;

    /* Control heights — slightly more spacious */
    --control-h: 2rem;
    --control-h-sm: 1.625rem;
    --control-h-lg: 2.25rem;
}

/* ==========================================================================
   2. TYPOGRAPHY — Inter, warm, generous spacing
   ========================================================================== */

:root,
[data-bs-theme='light'],
[data-bs-theme='dark'] {
    --tblr-font-sans-serif: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --tblr-headings-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

body {
    background-color: var(--claude-bg);
    color: var(--claude-text);
    font-family:
        'Inter',
        -apple-system,
        BlinkMacSystemFont,
        'Segoe UI',
        Roboto,
        sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 0.8125rem;
    line-height: 1.6;
    letter-spacing: -0.011em;
    font-feature-settings: 'cv01', 'cv03', 'cv04', 'cv11';
}

h1,
.h1 {
    font-size: 1.375rem;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--claude-text);
    line-height: 1.3;
}

h2,
.h2 {
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--claude-text);
    line-height: 1.35;
}

h3,
.h3 {
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--claude-text);
}

h4,
.h4 {
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--claude-text);
}

h5,
.h5 {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--claude-text);
}

h6,
.h6 {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--claude-text-secondary);
}

p {
    line-height: 1.6;
    color: var(--claude-text-secondary);
}

small,
.small,
.text-sm {
    font-size: 0.75rem;
    color: var(--claude-text-tertiary);
}

.text-secondary {
    color: var(--claude-text-secondary);
}

.text-muted {
    color: var(--claude-text-tertiary);
}

/* ==========================================================================
   3. BODY & BACKGROUND
   ========================================================================== */

body[data-bs-theme='dark'] {
    background-color: var(--claude-bg);
    color: var(--claude-text);
}

.page-wrapper {
    background-color: var(--claude-bg);
}

/* ==========================================================================
   4. SIDEBAR — Clean, warm, with accent indicators
   ========================================================================== */

.app-sidebar {
    background: var(--claude-surface);
    border-right: 1px solid var(--claude-border);
}

.sidebar-header {
    border-bottom: 1px solid var(--claude-border-light);
    padding: 0.875rem 1.125rem;
}

.sidebar-brand {
    font-weight: 600;
    color: var(--claude-text);
    font-size: 0.9375rem;
    letter-spacing: -0.02em;
}

.sidebar-label {
    color: var(--claude-text-tertiary);
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.875rem 0.875rem 0.375rem;
}

.sidebar-link {
    color: var(--claude-text-secondary);
    border-radius: 0.5rem;
    padding: 0.5rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 400;
    transition: all 0.15s ease;
    border-left: 3px solid transparent;
    margin-left: 0.25rem;
    margin-right: 0.25rem;
}

.sidebar-link i {
    color: var(--claude-text-tertiary);
    opacity: 1;
    font-size: 1.1rem;
}

.sidebar-link:hover {
    background: var(--claude-primary-light);
    color: var(--claude-primary);
    border-image: var(--claude-gradient-border) 1;
    border-image-width: 0 0 0 3px;
}

.sidebar-link:hover i {
    color: var(--claude-primary);
}

.sidebar-link.active {
    background: var(--claude-primary-light);
    color: var(--claude-primary);
    font-weight: 500;
    border-image: var(--claude-gradient-border) 1;
    border-image-width: 0 0 0 3px;
}

.sidebar-link.active i {
    color: var(--claude-primary);
}

.sidebar-footer {
    border-top: 1px solid var(--claude-border-light);
    background: var(--claude-surface);
}

.sidebar-user:hover {
    background: var(--claude-bg-secondary);
}

/* Dark-mode sidebar overrides (force light) */
[data-bs-theme='dark'] .app-sidebar {
    background: var(--claude-surface);
    border-right-color: var(--claude-border);
}

[data-bs-theme='dark'] .sidebar-link {
    color: var(--claude-text-secondary);
}

[data-bs-theme='dark'] .sidebar-link:hover {
    background: var(--claude-primary-light);
    color: var(--claude-primary);
}

[data-bs-theme='dark'] .sidebar-link.active {
    background: var(--claude-primary-light);
    color: var(--claude-primary);
}

[data-bs-theme='dark'] .sidebar-user:hover {
    background: var(--claude-bg-secondary);
}

/* ==========================================================================
   5. CARDS — Clean with optional left-border accents
   ========================================================================== */

.card {
    background: var(--claude-surface);
    border: 1px solid var(--claude-border);
    border-radius: var(--tblr-border-radius-lg);
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.04),
        0 1px 2px rgba(0, 0, 0, 0.02);
    transition:
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}

.card:hover {
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.06),
        0 1px 3px rgba(0, 0, 0, 0.04);
}

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--claude-border-light);
}

/* Keep default spacing only when no utility padding class is present (p-*, px-*, py-*, pt-*, etc.). */
.card-header:not([class*=' p-']):not([class^='p-']) {
    padding: 0.75rem 1rem;
}

.card-body {
    padding: 1rem;
}

.card-footer {
    background: var(--claude-bg-secondary);
    border-top: 1px solid var(--claude-border-light);
    padding: 0.625rem 1rem;
}

.card-title {
    font-weight: 600;
    font-size: 0.875rem;
    letter-spacing: -0.015em;
    color: var(--claude-text);
}

/* Dark-mode card override (force light) */
[data-bs-theme='dark'] .card {
    background: var(--claude-surface);
    border-color: var(--claude-border);
}

[data-bs-theme='dark'] .card-header {
    background: transparent;
    border-color: var(--claude-border-light);
}

[data-bs-theme='dark'] .card-footer {
    background: var(--claude-bg-secondary);
    border-color: var(--claude-border-light);
}

/* === LEFT-BORDER ACCENT CARDS (Claude signature pattern) === */

.card-accent-orange,
.card-accent-blue,
.card-accent-green,
.card-accent-purple,
.card-accent-amber,
.card-accent-rose,
.card-accent-teal,
.card-accent-indigo,
.card-accent-primary {
    border-left: 3px solid #ce40aa;
    border-image: var(--claude-gradient-border) 1;
    border-image-width: 0 0 0 3px;
}

/* ==========================================================================
   6. BUTTONS — Warm, rounded, Claude aesthetic
   ========================================================================== */

.btn {
    font-family:
        'Inter',
        -apple-system,
        sans-serif;
    font-weight: 500;
    font-size: 0.8125rem;
    border-radius: var(--tblr-border-radius);
    transition: all 0.15s ease;
    letter-spacing: -0.01em;
    line-height: 1;
    padding: 0 0.625rem;
    height: var(--control-h);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    white-space: nowrap;
    box-shadow: none;
    border: 1px solid transparent;
}

.btn:focus-visible {
    outline: 2px solid var(--claude-ring);
    outline-offset: 2px;
    box-shadow: none;
}

/* Button sizes */
.btn-sm {
    padding: 0 0.375rem;
    font-size: 0.75rem;
    border-radius: var(--tblr-border-radius-sm);
    height: var(--control-h-sm);
}

.btn-lg {
    padding: 0 1rem;
    font-size: 0.875rem;
    height: var(--control-h-lg);
}

.btn-xs {
    padding: 0 0.25rem;
    font-size: 0.6875rem;
    height: 1.25rem;
    border-radius: var(--tblr-border-radius-sm);
}

.btn-icon {
    width: var(--control-h);
    height: var(--control-h);
    padding: 0;
}

.btn-icon.btn-sm {
    width: var(--control-h-sm);
    height: var(--control-h-sm);
}

/* Primary CTA — Claude terracotta */
.btn-primary,
.btn-green,
.btn-github {
    background-color: var(--claude-primary);
    border-color: var(--claude-primary);
    color: #ffffff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-green:hover,
.btn-green:focus,
.btn-github:hover,
.btn-github:focus {
    background-color: var(--claude-primary-hover);
    border-color: var(--claude-primary-hover);
    color: #ffffff;
}

/* Outline primary */
.btn-outline-primary,
.btn-outline-green,
.btn-primary-outlined {
    background-color: transparent;
    border: 1px solid var(--claude-border);
    color: var(--claude-text);
}

.btn-outline-primary:hover,
.btn-outline-green:hover,
.btn-primary-outlined:hover {
    background-color: var(--claude-bg-secondary);
    border-color: var(--claude-border);
    color: var(--claude-text);
}

/* Secondary */
.btn-secondary,
.btn-default {
    background-color: var(--claude-bg-secondary);
    border: 1px solid var(--claude-border);
    color: var(--claude-text);
}

.btn-secondary:hover,
.btn-default:hover {
    background-color: var(--claude-border-light);
    border-color: var(--claude-border);
}

/* Ghost */
.btn-ghost,
.btn-ghost-secondary,
.btn-ghost-primary {
    background: transparent;
    border-color: transparent;
    color: var(--claude-text-secondary);
}

.btn-ghost:hover,
.btn-ghost-secondary:hover,
.btn-ghost-primary:hover {
    background: var(--claude-bg-secondary);
    color: var(--claude-text);
}

/* Success */
.btn-success {
    background-color: var(--claude-accent-green);
    border-color: var(--claude-accent-green);
    color: #ffffff;
}

.btn-success:hover {
    background-color: #429a6f;
    border-color: #429a6f;
}

/* Danger */
.btn-danger {
    background-color: var(--claude-accent-rose);
    border-color: var(--claude-accent-rose);
    color: #ffffff;
}

.btn-danger:hover {
    background-color: #c4566d;
    border-color: #c4566d;
}

/* Info */
.btn-info {
    background-color: var(--claude-accent-blue);
    border-color: var(--claude-accent-blue);
    color: #ffffff;
}

/* Indigo (used in onboarding) */
.btn-indigo {
    background: var(--claude-primary);
    color: #fff;
    border: none;
}

.btn-indigo:hover {
    background: var(--claude-primary-hover);
    color: #fff;
}

/* Purple (used in AI Coach) */
.btn-purple {
    background: var(--claude-primary);
    color: #fff;
    border: none;
}

.btn-purple:hover {
    background: var(--claude-primary-hover);
    color: #fff;
}

/* Dark-mode button overrides (force light look) */
[data-bs-theme='dark'] .btn-primary,
[data-bs-theme='dark'] .btn-green,
[data-bs-theme='dark'] .btn-github {
    background-color: var(--claude-primary);
    border-color: var(--claude-primary);
    color: #ffffff;
}

[data-bs-theme='dark'] .btn-primary:hover,
[data-bs-theme='dark'] .btn-green:hover,
[data-bs-theme='dark'] .btn-github:hover {
    background-color: var(--claude-primary-hover);
    border-color: var(--claude-primary-hover);
}

[data-bs-theme='dark'] .btn-secondary,
[data-bs-theme='dark'] .btn-default {
    background-color: var(--claude-bg-secondary);
    border-color: var(--claude-border);
    color: var(--claude-text);
}

[data-bs-theme='dark'] .btn-ghost,
[data-bs-theme='dark'] .btn-ghost-secondary,
[data-bs-theme='dark'] .btn-ghost-primary {
    color: var(--claude-text-secondary);
}

[data-bs-theme='dark'] .btn-ghost:hover,
[data-bs-theme='dark'] .btn-ghost-secondary:hover,
[data-bs-theme='dark'] .btn-ghost-primary:hover {
    background: var(--claude-bg-secondary);
    color: var(--claude-text);
}

/* ==========================================================================
   7. FORM CONTROLS — Warm, clean, spacious
   ========================================================================== */

.form-control,
.form-select {
    background-color: var(--claude-surface);
    border: 1px solid var(--claude-border);
    border-radius: var(--tblr-border-radius);
    color: var(--claude-text);
    font-size: 0.8125rem;
    padding: 0 0.5rem;
    height: var(--control-h);
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

textarea.form-control {
    height: auto;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--claude-primary);
    box-shadow: 0 0 0 3px rgba(206, 64, 170, 0.1);
    outline: none;
}

.form-control::placeholder {
    color: var(--claude-text-tertiary);
}

.form-label,
label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--claude-text);
    margin-bottom: 0.25rem;
}

textarea.form-control {
    line-height: 1.6;
}

/* Dark-mode form overrides */
[data-bs-theme='dark'] .form-control,
[data-bs-theme='dark'] .form-select {
    background-color: var(--claude-surface);
    border-color: var(--claude-border);
    color: var(--claude-text);
}

[data-bs-theme='dark'] .form-control:focus,
[data-bs-theme='dark'] .form-select:focus {
    border-color: var(--claude-primary);
    box-shadow: 0 0 0 3px rgba(206, 64, 170, 0.1);
}

[data-bs-theme='dark'] .form-control::placeholder {
    color: var(--claude-text-tertiary);
}

/* Input group */
.input-group-text {
    background-color: var(--claude-bg-secondary);
    border-color: var(--claude-border);
    color: var(--claude-text-secondary);
}

[data-bs-theme='dark'] .input-group-text {
    background-color: var(--claude-bg-secondary);
    border-color: var(--claude-border);
    color: var(--claude-text-secondary);
}

/* Checkboxes & radios */
.form-check-input {
    border-color: var(--claude-border);
}

.form-check-input:checked {
    background-color: var(--claude-primary);
    border-color: var(--claude-primary);
}

.form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(206, 64, 170, 0.1);
    border-color: var(--claude-primary);
}

[data-bs-theme='dark'] .form-check-input {
    border-color: var(--claude-border);
    background-color: var(--claude-surface);
}

[data-bs-theme='dark'] .form-check-input:checked {
    background-color: var(--claude-primary);
    border-color: var(--claude-primary);
}

/* Switch */
.form-switch .form-check-input {
    background-color: var(--claude-border);
}

.form-switch .form-check-input:checked {
    background-color: var(--claude-primary);
}

[data-bs-theme='dark'] .form-switch .form-check-input {
    background-color: var(--claude-border);
}

[data-bs-theme='dark'] .form-switch .form-check-input:checked {
    background-color: var(--claude-primary);
}

/* Input group sizing */
.input-group-text {
    height: var(--control-h);
    display: inline-flex;
    align-items: center;
    padding: 0 0.375rem;
    font-size: 0.6875rem;
}

.input-group .form-control,
.input-group .form-select {
    height: var(--control-h);
}

.input-group .btn {
    height: var(--control-h);
}

/* Dropdown toggle — same height as buttons */
.btn.dropdown-toggle,
.btn[data-bs-toggle='dropdown'] {
    height: var(--control-h);
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

/* Tom Select — match form control height */
.ts-wrapper,
.ts-wrapper.single,
.ts-wrapper.multi,
.ts-wrapper.form-control,
.ts-wrapper.form-select,
.ts-wrapper:not(.form-control):not(.form-select),
.input-group .ts-wrapper {
    min-height: 0;
    max-height: none;
    height: auto;
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
}

.ts-control,
.ts-wrapper .ts-control,
.ts-wrapper.single .ts-control,
.ts-wrapper.multi .ts-control,
.ts-wrapper.multi.has-items .ts-control,
.input-group .ts-wrapper .ts-control,
.ts-wrapper.form-control .ts-control,
.ts-wrapper.form-select .ts-control,
.ts-wrapper:not(.form-control):not(.form-select) .ts-control {
    border: 1px solid var(--claude-border) !important;
    border-radius: var(--tblr-border-radius);
    font-size: 0.8125rem;
    padding: 0 0.5rem;
    height: var(--control-h);
    min-height: var(--control-h);
    max-height: var(--control-h);
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    overflow: hidden;
    box-sizing: border-box;
    line-height: 1;
    background-color: var(--claude-surface) !important;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.ts-wrapper.multi .ts-control {
    max-height: none;
    flex-wrap: wrap;
}

.ts-control input,
.ts-wrapper .ts-control input,
.ts-wrapper.single .ts-control input,
.ts-wrapper.multi .ts-control input {
    height: auto;
    min-height: 0;
    max-height: none;
    padding: 0;
    margin: 0;
    line-height: 1;
    font-size: 0.8125rem;
    border: none;
    box-shadow: none;
}

.ts-wrapper .ts-control:hover {
    border-color: var(--claude-primary) !important;
}

.ts-wrapper.focus .ts-control {
    border-color: var(--claude-primary) !important;
    box-shadow: 0 0 0 3px rgba(206, 64, 170, 0.1) !important;
}

.ts-wrapper.multi .ts-control > div {
    margin: 1px 2px 1px 0;
    padding: 0 0.25rem;
    font-size: 0.6875rem;
    line-height: calc(var(--control-h) - 6px);
    height: calc(var(--control-h) - 6px);
    display: inline-flex;
    align-items: center;
}

.input-group-sm > .ts-wrapper .ts-control,
.ts-wrapper.form-control-sm .ts-control,
.ts-wrapper.form-select-sm .ts-control {
    height: var(--control-h-sm);
    min-height: var(--control-h-sm);
    max-height: var(--control-h-sm);
}

/* ==========================================================================
   8. TABLES — Clean with subtle row separation
   ========================================================================== */

.table {
    font-size: 0.8125rem;
    color: var(--claude-text);
}

.table thead th {
    color: var(--claude-text-tertiary);
    font-size: 0.75rem;
    font-weight: 500;
    border-bottom: 1px solid var(--claude-border);
    text-transform: none;
    letter-spacing: 0;
    background: var(--claude-bg-secondary);
}

.table > :not(caption) > * > * {
    border-bottom-color: var(--claude-border-light);
}

.table-hover > tbody > tr:hover > * {
    background-color: var(--claude-surface-hover);
}

[data-bs-theme='dark'] .table {
    color: var(--claude-text);
    --tblr-table-bg: transparent;
}

[data-bs-theme='dark'] .table thead th {
    color: var(--claude-text-tertiary);
    background: var(--claude-bg-secondary);
    border-bottom-color: var(--claude-border);
}

[data-bs-theme='dark'] .table > :not(caption) > * > * {
    border-bottom-color: var(--claude-border-light);
}

[data-bs-theme='dark'] .table-hover > tbody > tr:hover > * {
    background-color: var(--claude-surface-hover);
}

/* ==========================================================================
   9. MODALS — Warm, clean, spacious
   ========================================================================== */

.modal-content {
    background: var(--claude-surface);
    border: 1px solid var(--claude-border);
    border-radius: var(--tblr-border-radius-xl);
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.12),
        0 8px 20px rgba(0, 0, 0, 0.08);
}

.modal-header {
    border-bottom: 1px solid var(--claude-border-light);
    padding: 1rem 1.25rem;
}

.modal-header .modal-title {
    font-weight: 600;
    font-size: 1rem;
    color: var(--claude-text);
}

.modal-body {
    padding: 1.25rem;
}

.modal-footer {
    border-top: 1px solid var(--claude-border-light);
    padding: 0.75rem 1.25rem;
    background: var(--claude-bg-secondary);
}

.modal-backdrop.show {
    background: rgba(26, 26, 26, 0.4);
    backdrop-filter: blur(4px);
}

[data-bs-theme='dark'] .modal-content {
    background: var(--claude-surface);
    border-color: var(--claude-border);
}

[data-bs-theme='dark'] .modal-header,
[data-bs-theme='dark'] .modal-footer {
    border-color: var(--claude-border-light);
}

/* ==========================================================================
   10. DROPDOWN MENUS
   ========================================================================== */

.dropdown-menu {
    background: var(--claude-surface);
    border: 1px solid var(--claude-border);
    border-radius: var(--tblr-border-radius-lg);
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.08),
        0 2px 8px rgba(0, 0, 0, 0.04);
    padding: 0.375rem;
}

.dropdown-item {
    border-radius: var(--tblr-border-radius-sm);
    color: var(--claude-text);
    font-size: 0.8125rem;
    padding: 0.5rem 0.625rem;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--claude-bg-secondary);
    color: var(--claude-text);
}

.dropdown-divider {
    border-color: var(--claude-border-light);
}

[data-bs-theme='dark'] .dropdown-menu {
    background: var(--claude-surface);
    border-color: var(--claude-border);
}

[data-bs-theme='dark'] .dropdown-item {
    color: var(--claude-text);
}

[data-bs-theme='dark'] .dropdown-item:hover {
    background: var(--claude-bg-secondary);
}

/* ==========================================================================
   11. TABS — Clean underline, Claude style
   ========================================================================== */

.nav-tabs {
    border-bottom: 1px solid var(--claude-border);
}

.nav-tabs .nav-link {
    color: var(--claude-text-tertiary);
    font-weight: 500;
    font-size: 0.8125rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 2px solid transparent;
    transition: all 0.15s ease;
}

.nav-tabs .nav-link:hover {
    color: var(--claude-text);
    border-bottom-color: var(--claude-border);
}

.nav-tabs .nav-link.active {
    color: var(--claude-primary);
    border-bottom-color: var(--claude-primary);
    background: transparent;
}

.card-header-tabs .nav-link.active {
    border-bottom-color: var(--claude-primary);
    color: var(--claude-primary);
}

.card-header-tabs .nav-link:hover {
    border-bottom-color: var(--claude-border);
}

/* Keep card-header tabs clean, but do not force padding so utility classes can control it. */
.card-header > .nav-tabs,
.card-header > .card-header-tabs {
    margin: 0;
    border-bottom: 0;
}

.card-header > .nav-tabs .nav-item,
.card-header > .card-header-tabs .nav-item {
    margin-bottom: 0;
}

.card-header > .nav-tabs .nav-link,
.card-header > .card-header-tabs .nav-link {
    margin-bottom: 0;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 2px solid transparent;
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
    background: transparent;
}

.card-header > .nav-tabs .nav-link:hover,
.card-header > .card-header-tabs .nav-link:hover {
    border-bottom-color: var(--claude-border);
}

.card-header > .nav-tabs .nav-link.active,
.card-header > .card-header-tabs .nav-link.active {
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-bottom-color: var(--claude-primary);
    background: transparent;
}

[data-bs-theme='dark'] .nav-tabs {
    border-bottom-color: var(--claude-border);
}

[data-bs-theme='dark'] .nav-tabs .nav-link {
    color: var(--claude-text-tertiary);
}

[data-bs-theme='dark'] .nav-tabs .nav-link.active {
    color: var(--claude-primary);
    border-bottom-color: var(--claude-primary);
}

/* ==========================================================================
   12. BADGES — Soft, warm
   ========================================================================== */

.badge {
    font-weight: 500;
    font-size: 0.6875rem;
    border-radius: 9999px;
    letter-spacing: 0;
}

.badge.bg-primary-lt,
.badge.bg-blue-lt {
    background-color: rgba(91, 141, 239, 0.1);
    color: var(--claude-accent-blue);
}

.badge.bg-success-lt,
.badge.bg-green-lt {
    background-color: rgba(76, 175, 125, 0.1);
    color: var(--claude-accent-green);
}

.badge.bg-warning-lt,
.badge.bg-orange-lt,
.badge.bg-yellow-lt {
    background-color: rgba(212, 168, 83, 0.12);
    color: #a07d30;
}

.badge.bg-danger-lt,
.badge.bg-red-lt {
    background-color: rgba(212, 98, 122, 0.1);
    color: var(--claude-accent-rose);
}

.badge.bg-purple-lt {
    background-color: rgba(139, 108, 193, 0.1);
    color: var(--claude-accent-purple);
}

/* Outline badge */
.badge.badge-outline {
    border: 1px solid var(--claude-border);
    background: transparent;
    color: var(--claude-text-secondary);
}

/* ==========================================================================
   13. ALERTS — Warm tones with left border
   ========================================================================== */

.alert {
    border-radius: var(--tblr-border-radius-lg);
    border: 1px solid var(--claude-border);
    padding: 0.75rem 1rem;
    font-size: 0.8125rem;
    border-left: 3px solid #ce40aa;
    border-image: var(--claude-gradient-border) 1;
    border-image-width: 0 0 0 3px;
}

.alert-success {
    background: rgba(76, 175, 125, 0.06);
    color: #2d6a4f;
}

.alert-danger,
.alert-warning {
    background: rgba(212, 98, 122, 0.06);
    color: #9b2c3f;
}

.alert-info {
    background: rgba(91, 141, 239, 0.06);
    border-left-color: var(--claude-accent-blue);
    color: #2d5199;
}

/* ==========================================================================
   14. PROGRESS BARS
   ========================================================================== */

.progress {
    background-color: var(--claude-bg-secondary);
    border-radius: 9999px;
}

.progress-bar {
    background-color: var(--claude-primary);
    border-radius: 9999px;
}

/* ==========================================================================
   15. AVATARS — Warm
   ========================================================================== */

.avatar {
    border-radius: var(--tblr-border-radius);
}

/* ==========================================================================
   16. PAGINATION
   ========================================================================== */

.page-link {
    border-color: var(--claude-border);
    color: var(--claude-text);
}

.page-link:hover {
    background: var(--claude-bg-secondary);
    color: var(--claude-text);
}

.page-link.active,
.active > .page-link,
.page-item.active .page-link {
    background-color: var(--claude-primary);
    border-color: var(--claude-primary);
    color: #ffffff;
}

[data-bs-theme='dark'] .page-link {
    border-color: var(--claude-border);
    color: var(--claude-text);
}

[data-bs-theme='dark'] .page-item.active .page-link {
    background-color: var(--claude-primary);
    border-color: var(--claude-primary);
}

/* ==========================================================================
   17. TOASTS / NOTIFICATIONS
   ========================================================================== */

#toast-container .toast {
    border-radius: var(--tblr-border-radius-lg);
    border: 1px solid var(--claude-border);
    background: var(--claude-surface);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

#toast-container > div {
    background-image: none !important;
    background-repeat: no-repeat !important;
    padding-left: 15px !important;
}

/* ==========================================================================
   18. SCROLLBAR — Subtle
   ========================================================================== */

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

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

::-webkit-scrollbar-thumb {
    background: var(--claude-border);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--claude-text-tertiary);
}

/* ==========================================================================
   19. BADGE BUTTONS (used across modules)
   ========================================================================== */

.badge-button {
    color: var(--claude-text-secondary);
    border-radius: var(--tblr-border-radius);
    font-size: 0.8125rem;
    transition: all 0.15s ease;
    border-color: var(--claude-border);
}

.badge-button:hover {
    background: var(--claude-primary-light);
    border-color: var(--claude-primary);
    color: var(--claude-primary);
}

.badge-button.active {
    background: var(--claude-primary-light);
    border-color: var(--claude-primary);
    color: var(--claude-primary);
    font-weight: 500;
}

[data-bs-theme='dark'] .badge-button {
    color: var(--claude-text-secondary);
}

[data-bs-theme='dark'] .badge-button:hover {
    background: var(--claude-primary-light);
    color: var(--claude-primary);
}

[data-bs-theme='dark'] .badge-button.active {
    background: var(--claude-primary-light);
    color: var(--claude-primary);
}

/* ==========================================================================
   20. DROPZONE / FILE UPLOADS
   ========================================================================== */

.dropzone {
    border-color: var(--claude-border);
    background: var(--claude-bg-secondary);
    border-radius: var(--tblr-border-radius-lg);
}

.dropzone:hover {
    border-color: var(--claude-primary);
    background: var(--claude-primary-lighter);
}

/* ==========================================================================
   21. CHAT BUBBLES (Onboarding & AI Coach)
   ========================================================================== */

.chat-bubble {
    background: var(--claude-bg-secondary);
    border: 1px solid var(--claude-border-light);
    border-radius: 0.75rem;
    font-size: 0.8125rem;
    line-height: 1.6;
}

.chat-bubble.ai {
    border-left: 3px solid #ce40aa;
    border-image: var(--claude-gradient-border) 1;
    border-image-width: 0 0 0 3px;
    background: var(--claude-surface);
}

.chat-bubble.user {
    background: var(--claude-primary);
    color: #ffffff;
    border: none;
}

[data-bs-theme='dark'] .chat-bubble {
    background: var(--claude-bg-secondary);
    border-color: var(--claude-border-light);
}

[data-bs-theme='dark'] .chat-bubble.ai {
    background: var(--claude-surface);
}

/* ==========================================================================
   22. ONBOARDING PANEL — Warm gradient
   ========================================================================== */

.onboarding-doc-panel {
    background: linear-gradient(170deg, #2a1f1a 0%, #3d2b20 50%, #4a3328 100%);
}

.onboarding-doc-panel::before {
    background: rgba(206, 64, 170, 0.12);
}

.onboarding-doc-panel::after {
    background: rgba(206, 64, 170, 0.08);
}

.doc-section-item.active {
    background: rgba(206, 64, 170, 0.2);
}

.doc-section-item.active .doc-section-num {
    border-color: var(--claude-primary);
    background: rgba(206, 64, 170, 0.3);
}

.doc-section-item.completed .doc-section-num {
    background: var(--claude-accent-green);
    border-color: var(--claude-accent-green);
}

.onboarding-overlay {
    background: var(--claude-bg);
}

.onboarding-topbar {
    background: var(--claude-surface);
    border-bottom-color: var(--claude-border);
}

#onboarding-progress {
    background: var(--claude-primary);
}

.bg-indigo-lt {
    background: var(--claude-primary-light);
    color: var(--claude-primary);
}

/* ==========================================================================
   23. CONVERSATIONS PANEL (AI Coach)
   ========================================================================== */

.conversations-panel {
    background: var(--claude-surface);
    border-right: 1px solid var(--claude-border);
}

.conversations-header {
    border-bottom-color: var(--claude-border);
}

.coach-topbar {
    background: var(--claude-surface);
    border-bottom: 1px solid var(--claude-border);
}

/* ==========================================================================
   24. TOM SELECT — Warm styling
   ========================================================================== */

.ts-wrapper .ts-control {
    background: var(--claude-surface) !important;
    border-color: var(--claude-border) !important;
    border-radius: var(--tblr-border-radius);
}

.ts-wrapper.focus .ts-control {
    border-color: var(--claude-primary) !important;
    box-shadow: 0 0 0 3px rgba(206, 64, 170, 0.1) !important;
}

.ts-dropdown {
    background: var(--claude-surface);
    border: 1px solid var(--claude-border);
    border-radius: var(--tblr-border-radius-lg);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.ts-dropdown .option:hover,
.ts-dropdown .active {
    background: var(--claude-bg-secondary);
}

/* ==========================================================================
   25. FLATPICKR — Warm date picker
   ========================================================================== */

.flatpickr-calendar {
    border: 1px solid var(--claude-border);
    border-radius: var(--tblr-border-radius-lg);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    background: var(--claude-surface);
}

.flatpickr-day.selected {
    background: var(--claude-primary);
    border-color: var(--claude-primary);
}

.flatpickr-day:hover {
    background: var(--claude-bg-secondary);
}

/* ==========================================================================
   26. DATATABLES overrides
   ========================================================================== */

.dataTables_wrapper .dataTables_filter input {
    border: 1px solid var(--claude-border);
    border-radius: var(--tblr-border-radius);
}

.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--claude-primary);
    box-shadow: 0 0 0 3px rgba(206, 64, 170, 0.1);
}

/* ==========================================================================
   27. LEFT-BORDER ACCENT UTILITY CLASSES
       Claude-signature pattern: colored left border on sections/panels
   ========================================================================== */

.border-l-orange,
.border-l-blue,
.border-l-green,
.border-l-purple,
.border-l-amber,
.border-l-rose,
.border-l-teal,
.border-l-indigo,
.border-l-primary {
    border-left: 3px solid #ce40aa;
    border-image: var(--claude-gradient-border) 1;
    border-image-width: 0 0 0 3px;
}

/* Subtle background tints (pair with left borders) */
.bg-orange-tint {
    background: rgba(217, 119, 87, 0.04);
}
.bg-blue-tint {
    background: rgba(91, 141, 239, 0.04);
}
.bg-green-tint {
    background: rgba(76, 175, 125, 0.04);
}
.bg-purple-tint {
    background: rgba(139, 108, 193, 0.04);
}
.bg-amber-tint {
    background: rgba(212, 168, 83, 0.04);
}
.bg-rose-tint {
    background: rgba(212, 98, 122, 0.04);
}
.bg-teal-tint {
    background: rgba(59, 163, 161, 0.04);
}
.bg-indigo-tint {
    background: rgba(99, 102, 241, 0.04);
}

/* ==========================================================================
   28. SECTION HEADERS — Claude-style with left accent
   ========================================================================== */

.section-header {
    padding: 0.75rem 1rem;
    border-left: 3px solid #ce40aa;
    border-image: var(--claude-gradient-border) 1;
    border-image-width: 0 0 0 3px;
    background: var(--claude-primary-lighter);
    border-radius: 0 var(--tblr-border-radius) var(--tblr-border-radius) 0;
    margin-bottom: 1rem;
}

.section-header h2,
.section-header h3 {
    margin-bottom: 0;
}

.section-header p {
    margin-bottom: 0;
    font-size: 0.8125rem;
}

/* ==========================================================================
   29. STATUS DOT — Warm
   ========================================================================== */

.status-dot.status-green {
    background-color: var(--claude-accent-green);
}

/* ==========================================================================
   30. ACCORDION — Warm
   ========================================================================== */

.accordion-item {
    border-color: var(--claude-border);
}

.accordion-button:not(.collapsed) {
    color: var(--claude-text);
    background: var(--claude-bg-secondary);
}

[data-bs-theme='dark'] .accordion-item {
    border-color: var(--claude-border);
}

[data-bs-theme='dark'] .accordion-button {
    color: var(--claude-text);
}

/* ==========================================================================
   31. LIST GROUPS
   ========================================================================== */

.list-group-item {
    border-color: var(--claude-border-light);
    color: var(--claude-text);
}

.list-group-item:hover {
    background: var(--claude-bg-secondary);
}

[data-bs-theme='dark'] .list-group-item {
    border-color: var(--claude-border-light);
    color: var(--claude-text);
}

/* ==========================================================================
   32. HOME PAGE — Progress hero, phase cards warm redesign
   ========================================================================== */

/* Override the dark gradient hero on home page */
.card[style*='linear-gradient(135deg, #1a1a2e'] {
    background: linear-gradient(135deg, #3d2b20 0%, #4a3328 50%, #2a1f1a 100%) !important;
}

/* ==========================================================================
   33. GLOBAL OVERRIDES — Dark mode forced to light
   ========================================================================== */

[data-bs-theme='dark'] body {
    background-color: var(--claude-bg);
    color: var(--claude-text);
}

[data-bs-theme='dark'] .card {
    background: var(--claude-surface);
    border-color: var(--claude-border);
}

[data-bs-theme='dark'] .border {
    border-color: var(--claude-border);
}

[data-bs-theme='dark'] .border-top,
[data-bs-theme='dark'] .border-bottom,
[data-bs-theme='dark'] .border-start,
[data-bs-theme='dark'] .border-end {
    border-color: var(--claude-border);
}

[data-bs-theme='dark'] .text-body {
    color: var(--claude-text);
}

[data-bs-theme='dark'] .bg-surface {
    background: var(--claude-surface);
}

/* Notification hover */
.sys-notification:hover {
    background-color: var(--claude-bg-secondary);
}

/* ==========================================================================
   34. UTILITY: Claude-style info panels
   ========================================================================== */

.claude-panel {
    background: var(--claude-surface);
    border: 1px solid var(--claude-border);
    border-left: 3px solid #ce40aa;
    border-image: var(--claude-gradient-border) 1;
    border-image-width: 0 0 0 3px;
    border-radius: 0 var(--tblr-border-radius-lg) var(--tblr-border-radius-lg) 0;
    padding: 1rem 1.25rem;
}

.claude-panel-blue {
    background: rgba(91, 141, 239, 0.03);
}

.claude-panel-green {
    background: rgba(76, 175, 125, 0.03);
}

.claude-panel-amber {
    background: rgba(212, 168, 83, 0.03);
}

.claude-panel-rose {
    background: rgba(212, 98, 122, 0.03);
}

.claude-panel-purple {
    background: rgba(139, 108, 193, 0.03);
}