/**
 * GawangPinas Admin Portal — 2026 SaaS Enterprise Design Tokens
 * Standardized design system for layout, typography, elevation, and multi-theme contrast.
 */

/* ── Global design system: single source of truth for the --gp-* token ladder.
      Loaded through this file so every admin entry point (includes/header.php,
      login.php, login_2fa.php, rbac_migration.php) inherits it automatically. ── */
@import './gawangpinas-design-system.css';

:root, [data-theme="light"] {
  /* ── Core Surface Palette (Light Theme) ── */
  --bg-app:               var(--gp-background);
  --bg-surface-1:         var(--gp-surface);
  --bg-surface-2:         var(--gp-surface-2);
  --bg-surface-3:         var(--gp-surface-3);
  --bg-surface-elevated:  var(--gp-surface-elevated);

  /* ── 2026 Modern SaaS Sidebar Palette (admin role chrome) ── */
  --sidebar-bg:           #070a13;
  --sidebar-border:       rgba(255, 255, 255, 0.07);
  --sidebar-hover:        rgba(255, 255, 255, 0.05);
  --sidebar-hover-text:   #f8fafc;
  --sidebar-text:         #94a3b8;
  --sidebar-active-bg:    linear-gradient(90deg, rgba(99, 102, 241, 0.16) 0%, rgba(99, 102, 241, 0.03) 100%);
  --sidebar-active-border: rgba(129, 140, 248, 0.28);
  --sidebar-active:       #ffffff;
  --sidebar-group-label:  #64748b;

  /* ── Brand Accent: Unified Royal Blue (role identity lives in --subsite-*) ── */
  --primary:              var(--gp-primary);
  --primary-dark:         var(--gp-primary-hover);
  --primary-light:        var(--gp-primary-light);
  --primary-bg:           var(--gp-primary-light);
  --primary-glow:         var(--gp-primary-glow);
  --color-brand-primary:  var(--gp-primary);
  --color-brand-hover:    var(--gp-primary-hover);
  --color-brand-light:    var(--gp-primary-light);
  --color-brand-glow:     var(--gp-primary-glow);

  /* ── Subsite Identifier Tokens (admin role accent from the global token) ── */
  --subsite-accent:       var(--gp-subsite-admin);
  --subsite-badge-bg:     #eef2ff;
  --subsite-badge-text:   var(--gp-subsite-admin);
  --subsite-badge-border: #c7d2fe;

  /* ── Semantic Colors ── */
  --info:                 var(--gp-info);
  --info-bg:              var(--gp-info-bg);
  --info-text:            var(--gp-info-text);
  --info-border:          var(--gp-info-border);

  --success:              var(--gp-success);
  --success-bg:           var(--gp-success-bg);
  --success-text:         var(--gp-success-text);
  --success-border:       var(--gp-success-border);
  --color-success:        var(--gp-success);
  --color-success-bg:     var(--gp-success-bg);

  --warning:              var(--gp-warning);
  --warning-bg:           var(--gp-warning-bg);
  --warning-text:         var(--gp-warning-text);
  --warning-border:       var(--gp-warning-border);
  --color-warning:        var(--gp-warning);
  --color-warning-bg:     var(--gp-warning-bg);

  --danger:               var(--gp-danger);
  --danger-bg:            var(--gp-danger-bg);
  --danger-text:          var(--gp-danger-text);
  --danger-border:        var(--gp-danger-border);
  --color-danger:         var(--gp-danger);
  --color-danger-bg:      var(--gp-danger-bg);

  /* ── Text Hierarchy (Light Mode) ── */
  --text-main:            var(--gp-text-main);
  --text-heading:         var(--gp-text-heading);
  --text-primary:         var(--gp-text-main);
  --text-secondary:       var(--gp-text-secondary);
  --text-body:            var(--gp-text-secondary);
  --text-muted:           var(--gp-text-muted);
  --text-sub:             var(--gp-text-muted);

  /* ── Borders & Outlines ── */
  --border-light:         var(--gp-border);
  --border-strong:        var(--gp-border-strong);
  --border-color:         var(--gp-border);
  --border-brand:         var(--gp-primary-border);

  /* ── Cards & Containers ── */
  --card-bg:              var(--gp-surface);
  --bg-card:              var(--gp-surface);
  --card-border:          var(--gp-border);
  --card-hover-border:    var(--gp-border-strong);

  /* ── Form Inputs ── */
  --input-bg:             var(--gp-surface);
  --input-border:         var(--gp-border-strong);
  --input-text:           var(--gp-text-main);
  --input-placeholder:    var(--gp-text-faint);
  --input-focus-border:   var(--gp-border-focus);
  --input-focus-ring:     var(--gp-focus-ring);

  /* ── Data Tables ── */
  --table-header-bg:      var(--gp-surface-2);
  --bg-th:                var(--gp-surface-2);
  --table-header-text:    var(--gp-text-secondary);
  --table-row-bg:         var(--gp-surface);
  --table-row-alt-bg:     var(--gp-surface-2);
  --table-row-hover-bg:   var(--gp-surface-3);
  --table-border:         var(--gp-border);

  /* ── Modals & Dropdowns ── */
  --modal-bg:             var(--gp-surface-elevated);
  --modal-border:         var(--gp-border);
  --dropdown-bg:          var(--gp-surface-elevated);
  --dropdown-border:      var(--gp-border);
  --dropdown-hover:       var(--gp-surface-2);

  /* ── Typography Scale ── */
  --font-body:    var(--gp-font-family);
  --font-heading: var(--gp-font-family);
  --font-mono:    var(--gp-font-mono);

  /* ── Radii (global ladder: 4 / 6 / 8 / 12 / 16 / pill) ── */
  --radius-xs:   var(--gp-radius-xs);
  --radius-sm:   var(--gp-radius-sm);
  --radius-md:   var(--gp-radius-md);
  --radius-lg:   var(--gp-radius-lg);
  --radius-xl:   var(--gp-radius-xl);
  --radius-full: var(--gp-radius-full);

  /* ── 2026 Micro-Layered Shadows ── */
  --shadow-xs:    var(--gp-shadow-xs);
  --shadow-sm:    var(--gp-shadow-sm);
  --shadow-card:  var(--gp-shadow-card);
  --shadow-card-hover: var(--gp-shadow-card-hover);
  --shadow-dropdown: var(--gp-shadow-dropdown);
  --shadow-modal: var(--gp-shadow-modal);
  --shadow-toast: var(--gp-shadow-toast);
  --shadow-glow:  var(--gp-shadow-card-hover);

  /* ── Transitions ── */
  --transition-fast:   all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Spacing Scale ── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ── Touch & Accessibility Targets ── */
  --touch-min:       44px;
  --touch-preferred: 48px;

  /* ── Modal / Layout Dimensions ── */
  --modal-max-w:          600px;
  --modal-radius-desktop: var(--gp-radius-xl);
  --modal-radius-mobile:  var(--gp-radius-xl) var(--gp-radius-xl) 0 0;

  --topbar-h:       64px;
  --sidebar-w:      280px;
  --sidebar-w-sm:   68px;
  --sidebar-w-mob:  280px;

  /* ── Z-index Scale ── */
  --z-sidebar:   60;
  --z-overlay:   1040;
  --z-drawer:    1050;
  --z-modal:     1060;
  --z-toast:     9990;
  --z-ai-chat:   9999;
}

/* ═══════════════════════════════════════════════════════════════
   DARK THEME DESIGN TOKENS (2026 SaaS Dark Standard)
   ═══════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  --bg-app:               var(--gp-background);
  --bg-surface-1:         var(--gp-surface);
  --bg-surface-2:         var(--gp-surface-2);
  --bg-surface-3:         var(--gp-surface-3);
  --bg-surface-elevated:  var(--gp-surface-elevated);

  --sidebar-bg:           #060910;
  --sidebar-border:       #141d30;
  --sidebar-hover:        #121a2c;
  --sidebar-hover-text:   #ffffff;
  --sidebar-text:         #94a3b8;
  --sidebar-active-bg:    #4f46e5;
  --sidebar-active:       #ffffff;
  --sidebar-group-label:  #64748b;

  --primary:              var(--gp-primary);
  --primary-dark:         var(--gp-primary-hover);
  --primary-light:        var(--gp-primary-light);
  --primary-bg:           var(--gp-primary-light);
  --primary-glow:         var(--gp-primary-glow);
  --color-brand-primary:  var(--gp-primary);
  --color-brand-hover:    var(--gp-primary-hover);
  --color-brand-light:    var(--gp-primary-light);
  --color-brand-glow:     var(--gp-primary-glow);

  --subsite-accent:       var(--gp-subsite-admin);
  --subsite-badge-bg:     rgba(99, 102, 241, 0.2);
  --subsite-badge-text:   var(--gp-subsite-admin);
  --subsite-badge-border: rgba(129, 140, 248, 0.35);

  --info:                 var(--gp-info);
  --info-bg:              var(--gp-info-bg);
  --info-text:            var(--gp-info-text);
  --info-border:          var(--gp-info-border);

  --success:              var(--gp-success);
  --success-bg:           var(--gp-success-bg);
  --success-text:         var(--gp-success-text);
  --success-border:       var(--gp-success-border);
  --color-success:        var(--gp-success);
  --color-success-bg:     var(--gp-success-bg);

  --warning:              var(--gp-warning);
  --warning-bg:           var(--gp-warning-bg);
  --warning-text:         var(--gp-warning-text);
  --warning-border:       var(--gp-warning-border);
  --color-warning:        var(--gp-warning);
  --color-warning-bg:     var(--gp-warning-bg);

  --danger:               var(--gp-danger);
  --danger-bg:            var(--gp-danger-bg);
  --danger-text:          var(--gp-danger-text);
  --danger-border:        var(--gp-danger-border);
  --color-danger:         var(--gp-danger);
  --color-danger-bg:      var(--gp-danger-bg);

  --text-main:            var(--gp-text-main);
  --text-heading:         var(--gp-text-heading);
  --text-primary:         var(--gp-text-main);
  --text-secondary:       var(--gp-text-secondary);
  --text-body:            var(--gp-text-secondary);
  --text-muted:           var(--gp-text-muted);
  --text-sub:             var(--gp-text-muted);

  --border-light:         var(--gp-border);
  --border-strong:        var(--gp-border-strong);
  --border-color:         var(--gp-border);
  --border-brand:         var(--gp-primary-border);

  --card-bg:              var(--gp-surface);
  --bg-card:              var(--gp-surface);
  --card-border:          var(--gp-border);
  --card-hover-border:    var(--gp-border-strong);

  --input-bg:             var(--gp-surface-2);
  --input-border:         var(--gp-border-strong);
  --input-text:           var(--gp-text-main);
  --input-placeholder:    var(--gp-text-faint);
  --input-focus-border:   var(--gp-border-focus);
  --input-focus-ring:     var(--gp-focus-ring);

  --table-header-bg:      var(--gp-surface-2);
  --bg-th:                var(--gp-surface-2);
  --table-header-text:    var(--gp-text-secondary);
  --table-row-bg:         var(--gp-surface);
  --table-row-alt-bg:     var(--gp-surface-2);
  --table-row-hover-bg:   var(--gp-surface-3);
  --table-border:         var(--gp-border);

  --modal-bg:             var(--gp-surface-elevated);
  --modal-border:         var(--gp-border);

  --dropdown-bg:          var(--gp-surface-elevated);
  --dropdown-border:      var(--gp-border);
  --dropdown-hover:       var(--gp-surface-2);

  --shadow-card:          var(--gp-shadow-card);
  --shadow-card-hover:    var(--gp-shadow-card-hover);
  --shadow-dropdown:      var(--gp-shadow-dropdown);
  --shadow-modal:         var(--gp-shadow-modal);
}

/* ── Responsive Layout Token Overrides ── */
@media (max-width: 1024px) {
  :root {
    --sidebar-w: 0px;
    --sidebar-w-sm: 0px;
    --topbar-h: 56px;
  }
}

/* ── Accessibility: Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-smooth: none;
    --transition-fast:   none;
    --transition-spring: none;
  }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Subsite Identifier Badges ── */
.subsite-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--subsite-badge-bg);
  color: var(--subsite-badge-text);
  border: 1px solid var(--subsite-badge-border);
  white-space: nowrap;
  vertical-align: middle;
  transition: var(--transition-fast);
}

.subsite-badge--corporate {
  background: #eff6ff;
  color: #2563eb;
  border-color: #bfdbfe;
}
[data-theme="dark"] .subsite-badge--corporate {
  background: rgba(37, 99, 235, 0.2);
  color: #60a5fa;
  border-color: rgba(96, 165, 250, 0.3);
}

.subsite-badge--marketplace {
  background: #f0f9ff;
  color: #0284c7;
  border-color: #bae6fd;
}
[data-theme="dark"] .subsite-badge--marketplace {
  background: rgba(2, 132, 199, 0.2);
  color: #38bdf8;
  border-color: rgba(56, 189, 248, 0.3);
}

.subsite-badge--admin {
  background: #eef2ff;
  color: #4f46e5;
  border-color: #c7d2fe;
}
[data-theme="dark"] .subsite-badge--admin {
  background: rgba(99, 102, 241, 0.22);
  color: #a5b4fc;
  border-color: rgba(129, 140, 248, 0.35);
}

/* ── Admin Role Badges (Light & Dark Mode) ── */
.gwp-role-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 2.5px 8px !important;
  border-radius: 9999px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  line-height: 1.3 !important;
}

/* Light Mode: Deep High-Contrast Colors */
.gwp-role-badge--super_admin {
  background: #ede9fe !important;
  color: #4338ca !important;
  border: 1px solid #c4b5fd !important;
}
.gwp-role-badge--super_admin .material-icons-round {
  color: #6366f1 !important;
}

.gwp-role-badge--dti_admin {
  background: #d1fae5 !important;
  color: #065f46 !important;
  border: 1px solid #6ee7b7 !important;
}
.gwp-role-badge--dti_admin .material-icons-round {
  color: #059669 !important;
}

.gwp-role-badge--platform_admin {
  background: #fef3c7 !important;
  color: #92400e !important;
  border: 1px solid #fcd34d !important;
}
.gwp-role-badge--platform_admin .material-icons-round {
  color: #d97706 !important;
}

/* Dark Mode: Restrained Subdued Badges */
[data-theme="dark"] .gwp-role-badge--super_admin,
.sb-profile .gwp-role-badge--super_admin {
  background: rgba(99, 102, 241, 0.18) !important;
  color: #c7d2fe !important;
  border: 1px solid rgba(129, 140, 248, 0.25) !important;
}
[data-theme="dark"] .gwp-role-badge--super_admin .material-icons-round,
.sb-profile .gwp-role-badge--super_admin .material-icons-round {
  color: #a5b4fc !important;
}

[data-theme="dark"] .gwp-role-badge--dti_admin,
.sb-profile .gwp-role-badge--dti_admin {
  background: rgba(16, 185, 129, 0.18) !important;
  color: #a7f3d0 !important;
  border: 1px solid rgba(52, 211, 153, 0.25) !important;
}
[data-theme="dark"] .gwp-role-badge--dti_admin .material-icons-round,
.sb-profile .gwp-role-badge--dti_admin .material-icons-round {
  color: #6ee7b7 !important;
}

[data-theme="dark"] .gwp-role-badge--platform_admin,
.sb-profile .gwp-role-badge--platform_admin {
  background: rgba(245, 158, 11, 0.18) !important;
  color: #fef08a !important;
  border: 1px solid rgba(251, 191, 36, 0.25) !important;
}
[data-theme="dark"] .gwp-role-badge--platform_admin .material-icons-round,
.sb-profile .gwp-role-badge--platform_admin .material-icons-round {
  color: #fde68a !important;
}

/* ── Priority Level Badges ── */
.gwp-priority-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 2px 8px !important;
  border-radius: 9999px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  line-height: 1.3 !important;
}
.gwp-priority-badge--urgent {
  background: #ffe4e6 !important;
  color: #be123c !important;
  border: 1px solid #fecdd3 !important;
}
[data-theme="dark"] .gwp-priority-badge--urgent {
  background: rgba(225, 29, 72, 0.18) !important;
  color: #fda4af !important;
  border-color: rgba(244, 63, 94, 0.25) !important;
}
.gwp-priority-badge--high {
  background: #fef3c7 !important;
  color: #b45309 !important;
  border: 1px solid #fde68a !important;
}
[data-theme="dark"] .gwp-priority-badge--high {
  background: rgba(245, 158, 11, 0.18) !important;
  color: #fde047 !important;
  border-color: rgba(251, 191, 36, 0.25) !important;
}
.gwp-priority-badge--medium {
  background: #eff6ff !important;
  color: #1d4ed8 !important;
  border: 1px solid #bfdbfe !important;
}
[data-theme="dark"] .gwp-priority-badge--medium {
  background: rgba(37, 99, 235, 0.18) !important;
  color: #93c5fd !important;
  border-color: rgba(96, 165, 250, 0.25) !important;
}
.gwp-priority-badge--low {
  background: #f1f5f9 !important;
  color: #475569 !important;
  border: 1px solid #cbd5e1 !important;
}
[data-theme="dark"] .gwp-priority-badge--low {
  background: rgba(148, 163, 184, 0.14) !important;
  color: #cbd5e1 !important;
  border-color: rgba(148, 163, 184, 0.22) !important;
}