/**
 * ==============================================================================
 * SOF-XI ENTERPRISE UNIFIED DESIGN SYSTEM (v58.0)
 * Precision Enterprise Theme: 1 Single Calm Identity across all 10 Sites
 *
 * Primary Accent: Deep Teal Spruce (#0F766E, hover #0D9488)
 * Standardized Functional Status Tokens:
 *   Success: #16A34A
 *   Warning: #D97706
 *   Danger:  #DC2626
 *   Info:    #2563EB
 *
 * Typography: Manrope (headings) + Inter (body)
 * Strict WCAG AA Minimum 4.5:1 Contrast Enforced Everywhere
 * ==============================================================================
 */

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

/* ==============================================================================
 * 1. DESIGN TOKENS (LIGHT & DARK MODES)
 * ============================================================================== */

:root,
[data-theme="white"],
[data-theme="light"],
[data-admin-theme="white"] {
  /* Brand Accent */
  --sof-primary: #0F766E;
  --sof-primary-hover: #0D9488;
  --sof-primary-subtle: #F0FDFA;
  --sof-primary-border: #99F6E4;

  /* Status Tokens */
  --sof-success: #16A34A;
  --sof-success-bg: #F0FDF4;
  --sof-success-border: #BBF7D0;

  --sof-warning: #D97706;
  --sof-warning-bg: #FFFBEB;
  --sof-warning-border: #FDE68A;

  --sof-danger: #DC2626;
  --sof-danger-bg: #FEF2F2;
  --sof-danger-border: #FECACA;

  --sof-info: #2563EB;
  --sof-info-bg: #EFF6FF;
  --sof-info-border: #BFDBFE;

  /* Surfaces & Hierarchy */
  --sof-bg: #F8FAFC;
  --sof-card: #FFFFFF;
  --sof-border: #E2E8F0;
  --sof-border-subtle: #F1F5F9;

  /* Text & Contrast (WCAG AA compliant) */
  --sof-text: #0F172A;
  --sof-text-secondary: #475569;
  --sof-text-muted: #64748B;
  --sof-text-inverse: #FFFFFF;

  /* Typography */
  --sof-font-heading: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --sof-font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Component Dimensions */
  --sof-radius-sm: 6px;
  --sof-radius-md: 10px;
  --sof-radius-lg: 16px;
  --sof-radius-full: 9999px;
}

[data-theme="dark"],
[data-admin-theme="dark"],
.dark {
  /* Brand Accent */
  --sof-primary: #14B8A6;
  --sof-primary-hover: #2DD4BF;
  --sof-primary-subtle: rgba(20, 184, 166, 0.12);
  --sof-primary-border: rgba(45, 212, 191, 0.35);

  /* Status Tokens */
  --sof-success: #22C55E;
  --sof-success-bg: rgba(34, 197, 94, 0.12);
  --sof-success-border: rgba(34, 197, 94, 0.3);

  --sof-warning: #F59E0B;
  --sof-warning-bg: rgba(245, 158, 11, 0.12);
  --sof-warning-border: rgba(245, 158, 11, 0.3);

  --sof-danger: #EF4444;
  --sof-danger-bg: rgba(239, 68, 68, 0.12);
  --sof-danger-border: rgba(239, 68, 68, 0.3);

  --sof-info: #3B82F6;
  --sof-info-bg: rgba(59, 130, 246, 0.12);
  --sof-info-border: rgba(59, 130, 246, 0.3);

  /* Surfaces & Hierarchy */
  --sof-bg: #0B1120;
  --sof-card: #111827;
  --sof-border: #1F2937;
  --sof-border-subtle: #1E293B;

  /* Text & Contrast */
  --sof-text: #F1F5F9;
  --sof-text-secondary: #94A3B8;
  --sof-text-muted: #64748B;
  --sof-text-inverse: #0B1120;
}

/* ==============================================================================
 * 2. GLOBAL RESET & BASE STYLES
 * ============================================================================== */

body {
  font-family: var(--sof-font-body);
  background-color: var(--sof-bg);
  color: var(--sof-text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.font-display,
.sof-heading {
  font-family: var(--sof-font-heading);
  letter-spacing: -0.02em;
}

/* Tabular numeric alignment */
.tabular-nums,
table td,
.font-mono {
  font-variant-numeric: tabular-nums;
}

/* ==============================================================================
 * 3. BUTTONS & CONTROLS (UNIFIED TEAL ACCENT)
 * ============================================================================== */

.sof-btn-primary,
.qbo-btn-main {
  background-color: var(--sof-primary) !important;
  color: #FFFFFF !important;
  font-family: var(--sof-font-body);
  font-weight: 700;
  font-size: 13px;
  border-radius: var(--sof-radius-md);
  padding: 8px 16px;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

.sof-btn-primary:hover,
.qbo-btn-main:hover {
  background-color: var(--sof-primary-hover) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 6px -1px rgba(15, 118, 110, 0.25);
}

.sof-btn-secondary,
.qbo-btn-secondary {
  background-color: var(--sof-card) !important;
  color: var(--sof-text) !important;
  font-family: var(--sof-font-body);
  font-weight: 600;
  font-size: 13px;
  border-radius: var(--sof-radius-md);
  padding: 8px 16px;
  border: 1px solid var(--sof-border);
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
}

.sof-btn-secondary:hover,
.qbo-btn-secondary:hover {
  background-color: var(--sof-border-subtle) !important;
  border-color: var(--sof-text-secondary);
}

/* ==============================================================================
 * 4. NAVIGATION & ACTIVE STATES (UNIFIED ACCENT)
 * ============================================================================== */

.qbo-rail-btn.active,
.mx-sidebar-item.active,
.sof-rail-item.active {
  background-color: var(--sof-primary-subtle) !important;
  color: var(--sof-primary) !important;
  border-color: var(--sof-primary-border) !important;
  font-weight: 700 !important;
}

.qbo-rail-btn.active svg,
.mx-sidebar-item.active svg {
  stroke: var(--sof-primary) !important;
}

/* ==============================================================================
 * 5. STATUS BADGES
 * ============================================================================== */

.sof-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: var(--sof-radius-sm);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.sof-badge-success { background: var(--sof-success-bg); color: var(--sof-success); border: 1px solid var(--sof-success-border); }
.sof-badge-warning { background: var(--sof-warning-bg); color: var(--sof-warning); border: 1px solid var(--sof-warning-border); }
.sof-badge-danger  { background: var(--sof-danger-bg);  color: var(--sof-danger);  border: 1px solid var(--sof-danger-border); }
.sof-badge-info    { background: var(--sof-info-bg);    color: var(--sof-info);    border: 1px solid var(--sof-info-border); }

/* ==============================================================================
 * 6. MODAL & OVERLAY DEFENSE (ZERO CLICK BLOCKING)
 * ============================================================================== */

.sof-modal-hidden,
.hidden {
  display: none !important;
  pointer-events: none !important;
}

[style*="display: none"],
[style*="display:none"] {
  pointer-events: none !important;
}

/* ==============================================================================
 * 7. THEME CONTROLLER JS INITIALIZATION
 * ============================================================================== */