/* ============================================================
   SYSTEM ADMIN — THEME LAYER
   Applies the ConnectLocal Claude Design System on top of the
   existing token + app stylesheets:
     1. Category-accent tokens (blue/green/amber/purple + tints)
     2. A complete [data-bs-theme="dark"] token layer
     3. Dark-mode fix-ups for colors hardcoded in app.css
   Load LAST (after app.css). Light mode is unchanged.
   Source: DesignSystem/ClaudeDesignSystemManager/tokens/*
   ============================================================ */

:root {
  /* Category accents — admin charts, role/status tags */
  --cl-blue:    #1a6fc4;  --cl-blue-lt:   rgba(26, 111, 196, 0.10);
  --cl-green:   #1b8a5a;  --cl-green-lt:  rgba(27, 138, 90, 0.10);
  --cl-amber-t: #e08800;  --cl-amber-lt:  rgba(224, 136, 0, 0.10);
  --cl-purple:  #6f42c1;  --cl-purple-lt: rgba(111, 66, 193, 0.10);
  --cl-focus-ring: rgba(34, 34, 102, 0.25);
}

/* ════════════════════════════════════════════════════════════════
   DARK MODE — token re-points
   The navy sidebar is intentionally preserved as the brand anchor.
   ════════════════════════════════════════════════════════════════ */
[data-bs-theme="dark"] {
  /* base ramp re-points (consumed by --color-* and app.css --cl-* usage) */
  --cl-heading: #f3f3f8;
  --cl-fg1:     #e6e6f0;
  --cl-fg2:     #a8a8c0;
  --cl-fg3:     #7b7b97;
  --cl-border:  #2a2a3d;
  --cl-bg:            #14141f;
  --cl-bg-secondary:  #181826;
  --cl-surface:       #1c1c2b;
  --cl-gray-600:      #a8a8c0;

  /* semantic aliases (tokens.css) */
  --color-bg:             #14141f;
  --color-surface:        #1c1c2b;
  --color-border:         #2a2a3d;
  --color-border-focus:   #8a8aff;
  --color-text-primary:   #f3f3f8;
  --color-text-secondary: #a8a8c0;
  --color-primary:        #8a8aff;

  /* brighter status hues read better on dark surfaces */
  --color-success: #5fd07a;  --color-success-soft: rgba(95, 208, 122, 0.16);
  --color-danger:  #ff6b7a;  --color-danger-soft:  rgba(255, 107, 122, 0.16);
  --color-warning: #ffb55c;  --color-warning-soft: rgba(255, 181, 92, 0.16);
  --color-info:    #4fd6f5;  --color-info-soft:    rgba(79, 214, 245, 0.16);
  --color-secondary-soft: rgba(255, 153, 51, 0.18);

  /* category accents — slightly brighter on dark */
  --cl-blue:   #5aa7ec;  --cl-green: #4fc28a;  --cl-amber-t: #ffb55c;  --cl-purple: #b08bff;

  /* app.css refresh-block vars */
  --admin-card-border: #2a2a3d;
  --admin-panel-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  --cl-focus-ring: rgba(138, 138, 255, 0.35);
}

/* ════════════════════════════════════════════════════════════════
   DARK MODE — fix-ups for values hardcoded in app.css
   ════════════════════════════════════════════════════════════════ */
[data-bs-theme="dark"] html,
[data-bs-theme="dark"] body,
[data-bs-theme="dark"] .app-layout { background: #14141f; color: var(--cl-fg1); }

/* topbar */
[data-bs-theme="dark"] .topbar-search { background: #181826; border-color: #2a2a3d; }
[data-bs-theme="dark"] .topbar-icon-button:hover { background: #24243a; }
[data-bs-theme="dark"] .notification-dot { border-color: #1c1c2b; }

/* tables */
[data-bs-theme="dark"] .table thead th { background: #181826; color: var(--cl-fg2); }
[data-bs-theme="dark"] .table tbody td { border-color: #2a2a3d; color: var(--cl-fg2); }
[data-bs-theme="dark"] .table tbody td:first-child { color: var(--cl-fg1); }
[data-bs-theme="dark"] .table-hover tbody tr:hover td { background: #24243a; }

/* cards / panels / surfaces */
[data-bs-theme="dark"] .stat-card,
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .category-list-item,
[data-bs-theme="dark"] .feature-definition-group,
[data-bs-theme="dark"] .tenant-setting-group,
[data-bs-theme="dark"] .tenant-sms-policy-panel,
[data-bs-theme="dark"] .plan-entitlement-group,
[data-bs-theme="dark"] .subcategory-list,
[data-bs-theme="dark"] .subcategory-row,
[data-bs-theme="dark"] .modal-content { background: #1c1c2b; }

[data-bs-theme="dark"] .feature-definition-help,
[data-bs-theme="dark"] .feature-definition-group-header,
[data-bs-theme="dark"] .feature-definition-guidance div,
[data-bs-theme="dark"] .tenant-setting-group-header,
[data-bs-theme="dark"] .plan-entitlement-group-header,
[data-bs-theme="dark"] .tenant-sms-policy-summary span,
[data-bs-theme="dark"] .empty-subcategory-state,
[data-bs-theme="dark"] .bg-light,
[data-bs-theme="dark"] .border.rounded { background: #181826 !important; }

[data-bs-theme="dark"] .feature-definition-guidance { background: #2a2a3d; }

/* workspace sub-nav chips */
[data-bs-theme="dark"] .system-admin-workspace-nav-link,
[data-bs-theme="dark"] .system-admin-workspace-subnav-link { background: #1c1c2b; color: var(--cl-fg2); }

/* form controls + native selects (app.css forces light with !important) */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] select.form-control,
[data-bs-theme="dark"] select.form-select,
[data-bs-theme="dark"] .page-content select,
[data-bs-theme="dark"] .modal select,
[data-bs-theme="dark"] textarea.form-control {
  background: #14141f !important;
  color: var(--cl-fg1) !important;
  border-color: #2a2a3d !important;
}
[data-bs-theme="dark"] .form-select option,
[data-bs-theme="dark"] select option { background: #1c1c2b; color: var(--cl-fg1); }
[data-bs-theme="dark"] .form-select option:checked,
[data-bs-theme="dark"] select option:checked { background: #2a2a3d !important; color: var(--cl-fg1) !important; }

/* outline buttons read off the dark border */
[data-bs-theme="dark"] .btn-outline-primary,
[data-bs-theme="dark"] .btn-outline-secondary { border-color: #34344a !important; color: #c9c9ff !important; }
[data-bs-theme="dark"] .btn-outline-secondary:hover { background: #24243a !important; color: var(--cl-fg1) !important; }

/* category chevron / icon chips */
[data-bs-theme="dark"] .category-chevron,
[data-bs-theme="dark"] .category-icon-preview,
[data-bs-theme="dark"] .modal-close-button { background: #1c1c2b; border-color: #2a2a3d; }

/* list-group + alerts inherit tokenized colors; nudge surface */
[data-bs-theme="dark"] .list-group-item { background: #1c1c2b; border-color: #2a2a3d; color: var(--cl-fg1); }