/* =============================================================
   THEME-DEFAULT.CSS — Professional Light/Dark Theme
   Override brand variables in a product theme file to customize.
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* =============================================================
   LIGHT MODE (default)
   ============================================================= */
:root {
  --topbar-height: 52px;
  --sidebar-width: 220px;
  --sidebar-width-collapsed: 52px;
  --page-padding: 1.5rem;
  --content-max-width: 1200px;

  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;

  --shadow-dropdown: 0 4px 16px rgba(0,0,0,0.10), 0 1px 4px rgba(0,0,0,0.06);
  --shadow-modal:    0 8px 32px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.08);

  --font-base: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  --c-brand:              #1a6ef5;
  --c-brand-hover:        #155dd4;
  --c-brand-subtle:       #e8f0fe;
  --c-brand-text:         #ffffff;
  --c-brand-text-on-subtle: #1a6ef5;
  --c-focus:              #1a6ef5;
  --c-focus-ring:         rgba(26,110,245,0.18);
  --c-nav-active-bg:      #e8f0fe;
  --c-nav-active-text:    #1249a8;

  --c-topbar-bg:          #ffffff;
  --c-topbar-border:      #e5e7eb;
  --c-topbar-text:        #111827;

  --c-sidebar-bg:         #f9fafb;
  --c-sidebar-border:     #e5e7eb;
  --c-sidebar-text:       #374151;
  --c-nav-hover:          rgba(0,0,0,0.05);

  --c-body-bg:            #f3f4f6;
  --c-text:               #111827;
  --c-text-muted:         #6b7280;
  --c-text-placeholder:   #9ca3af;

  --c-card-bg:            #ffffff;
  --c-hover:              rgba(0,0,0,0.04);
  --c-backdrop:           rgba(0,0,0,0.40);

  --c-border:             #e5e7eb;
  --c-border-subtle:      #f0f1f3;
  --c-border-hover:       #d1d5db;

  --c-input-bg:           #ffffff;

  --c-btn-secondary-bg:   #ffffff;
  --c-btn-secondary-text: #374151;
  --c-btn-secondary-hover:#f9fafb;

  --c-table-head-bg:      #f9fafb;
  --c-table-head-hover:   #f3f4f6;
  --c-table-row-hover:    #f9fafb;
  --c-table-selected:     #eff6ff;

  --c-toast-bg:           #1f2937;
  --c-toast-text:         #f9fafb;

  --c-skeleton:           #e5e7eb;

  --c-success:            #059669;
  --c-success-hover:      #047857;
  --c-success-subtle:     #ecfdf5;
  --c-success-border:     #a7f3d0;
  --c-success-text:       #065f46;

  --c-warning:            #d97706;
  --c-warning-hover:      #b45309;
  --c-warning-subtle:     #fffbeb;
  --c-warning-border:     #fcd34d;
  --c-warning-text:       #92400e;

  --c-danger:             #dc2626;
  --c-danger-hover:       #b91c1c;
  --c-danger-subtle:      #fef2f2;
  --c-danger-border:      #fca5a5;
  --c-danger-text:        #991b1b;
  --c-danger-ring:        rgba(220,38,38,0.18);

  --c-info:               #2563eb;
  --c-info-subtle:        #eff6ff;
  --c-info-border:        #bfdbfe;
  --c-info-text:          #1e40af;

  --c-neutral-subtle:     #f3f4f6;
  --c-neutral-text:       #374151;
}

/* =============================================================
   DARK MODE
   ============================================================= */
@media (prefers-color-scheme: dark) {
  :root {
    --c-brand:              #4f8ef7;
    --c-brand-hover:        #6ba3f9;
    --c-brand-subtle:       rgba(79,142,247,0.15);
    --c-brand-text:         #ffffff;
    --c-brand-text-on-subtle: #93bbfc;
    --c-focus:              #4f8ef7;
    --c-focus-ring:         rgba(79,142,247,0.22);
    --c-nav-active-bg:      rgba(79,142,247,0.15);
    --c-nav-active-text:    #93bbfc;

    --c-topbar-bg:          #111827;
    --c-topbar-border:      #1f2937;
    --c-topbar-text:        #f9fafb;

    --c-sidebar-bg:         #0f172a;
    --c-sidebar-border:     #1e293b;
    --c-sidebar-text:       #cbd5e1;
    --c-nav-hover:          rgba(255,255,255,0.06);

    --c-body-bg:            #0f172a;
    --c-text:               #f1f5f9;
    --c-text-muted:         #94a3b8;
    --c-text-placeholder:   #64748b;

    --c-card-bg:            #1e293b;
    --c-hover:              rgba(255,255,255,0.05);
    --c-backdrop:           rgba(0,0,0,0.60);

    --c-border:             #334155;
    --c-border-subtle:      #1e293b;
    --c-border-hover:       #475569;

    --c-input-bg:           #0f172a;

    --c-btn-secondary-bg:   #1e293b;
    --c-btn-secondary-text: #e2e8f0;
    --c-btn-secondary-hover:#263348;

    --c-table-head-bg:      #162032;
    --c-table-head-hover:   #1a2740;
    --c-table-row-hover:    rgba(255,255,255,0.03);
    --c-table-selected:     rgba(79,142,247,0.10);

    --c-toast-bg:           #1e293b;
    --c-toast-text:         #f1f5f9;

    --c-skeleton:           #1e293b;

    --c-success:            #34d399;
    --c-success-hover:      #6ee7b7;
    --c-success-subtle:     rgba(52,211,153,0.12);
    --c-success-border:     rgba(52,211,153,0.25);
    --c-success-text:       #6ee7b7;

    --c-warning:            #fbbf24;
    --c-warning-hover:      #fcd34d;
    --c-warning-subtle:     rgba(251,191,36,0.12);
    --c-warning-border:     rgba(251,191,36,0.25);
    --c-warning-text:       #fcd34d;

    --c-danger:             #f87171;
    --c-danger-hover:       #fca5a5;
    --c-danger-subtle:      rgba(248,113,113,0.12);
    --c-danger-border:      rgba(248,113,113,0.25);
    --c-danger-text:        #fca5a5;
    --c-danger-ring:        rgba(248,113,113,0.22);

    --c-info:               #60a5fa;
    --c-info-subtle:        rgba(96,165,250,0.12);
    --c-info-border:        rgba(96,165,250,0.25);
    --c-info-text:          #93c5fd;

    --c-neutral-subtle:     rgba(255,255,255,0.07);
    --c-neutral-text:       #94a3b8;
  }
}

/* =============================================================
   BASE STYLES
   ============================================================= */

html { background: var(--c-body-bg); }

body {
  font-family: var(--font-base);
  background: var(--c-body-bg);
  color: var(--c-text);
}

.shell-topbar {
  background: var(--c-topbar-bg);
  border-bottom: 1px solid var(--c-topbar-border);
  color: var(--c-topbar-text);
}

.shell-sidebar {
  background: var(--c-sidebar-bg);
  border-right: 1px solid var(--c-sidebar-border);
  color: var(--c-sidebar-text);
}

.nav-section-label { color: var(--c-text-muted); }
.topbar-user-name { color: var(--c-text); }
.topbar-user-email { color: var(--c-text-muted); }
.nav-item { color: var(--c-sidebar-text); }

.nav-section a {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.4375rem 0.625rem;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--c-sidebar-text);
  width: 100%;
  transition: background 0.1s ease;
}
.nav-section a:hover { background: var(--c-nav-hover); }
.nav-section a.active,
.nav-section a.jb-active {
  background: var(--c-nav-active-bg);
  color: var(--c-nav-active-text);
  font-weight: 600;
}

.topbar-dropdown-trigger { color: var(--c-topbar-text); }
.topbar-dropdown-menu { background: var(--c-card-bg); }
.topbar-dropdown-menu-header { color: var(--c-text-muted); }
.topbar-dropdown-item { color: var(--c-text); }

.user-avatar {
  background: var(--c-brand-subtle);
  color: var(--c-brand-text-on-subtle);
}

.org-badge {
  background: var(--c-neutral-subtle);
  color: var(--c-text-muted);
}

.page-subtitle { color: var(--c-text-muted); }
.breadcrumb { color: var(--c-text-muted); }
.breadcrumb-item:hover { color: var(--c-brand); }
.breadcrumb-item:last-child { color: var(--c-text); }

.tab-count {
  background: var(--c-neutral-subtle);
  color: var(--c-text-muted);
}
.tab.active .tab-count {
  background: var(--c-brand-subtle);
  color: var(--c-brand);
}

.detail-field-label { color: var(--c-text-muted); }
.detail-field-value.empty { color: var(--c-text-muted); }
.card-stat-label { color: var(--c-text-muted); }

.nav-item .nav-badge {
  background: var(--c-danger-subtle);
  color: var(--c-danger-text);
}

.form-label { color: var(--c-text); }
.form-hint { color: var(--c-text-muted); }
.empty-title { color: var(--c-text); }
.empty-body { color: var(--c-text-muted); }