/* ═══════════════════════════════════════════════════════════════════════════
   GilGamez Platform — Command Center Universal Theme Bridge (v5.0.0)
   Maps core --theme-* variables to functional --cc-* enterprise tokens.
   Enforces Rule #1 (Separation), Rule #2 (Centralized Engine), Rule #13 (Zero Hardcoding).
   ═══════════════════════════════════════════════════════════════════════════ */

@import url("../../engine/Theme/css/theme-default.css");

:root {
  /* ── Command Center Functional Token System (--cc-*) ─────────────────────── */
  /* Surfaces & Backgrounds */
  --cc-bg-app:              var(--theme-bg-base);
  --cc-bg-subtle:           var(--theme-bg-surface);
  --cc-bg-component:        var(--theme-bg-card);
  --cc-bg-component-hover:  var(--theme-bg-card-hover);
  --cc-bg-component-active: var(--theme-border-strong);
  --cc-bg-drawer:           var(--theme-bg-surface);
  --cc-bg-dialog:           var(--theme-bg-card);
  --cc-bg-input:            var(--theme-bg-input);

  /* Borders & Focus Rings */
  --cc-border-subtle:       var(--theme-border-subtle);
  --cc-border:              var(--theme-border);
  --cc-border-hover:        var(--theme-border-hover);
  --cc-border-focus:        var(--theme-primary);
  --cc-focus-ring:          0 0 0 2px var(--theme-accent-glow);

  /* Typography */
  --cc-text:                var(--theme-text-primary);
  --cc-text-muted:          var(--theme-text-secondary);
  --cc-text-subtle:         var(--theme-text-muted);
  --cc-text-inverse:        var(--theme-bg-base);

  /* Solids & Interactive Accents */
  --cc-solid-accent:        var(--theme-primary);
  --cc-solid-accent-hover:  var(--theme-primary-hover);
  --cc-solid-accent-active: var(--theme-primary-hover);

  /* Semantic Status Indicators */
  --cc-status-success-bg:     rgba(16, 185, 129, 0.12);
  --cc-status-success-border: rgba(16, 185, 129, 0.35);
  --cc-status-success-text:   #34d399;

  --cc-status-warning-bg:     rgba(245, 158, 11, 0.12);
  --cc-status-warning-border: rgba(245, 158, 11, 0.35);
  --cc-status-warning-text:   #fbbf24;

  --cc-status-danger-bg:      rgba(239, 68, 68, 0.12);
  --cc-status-danger-border:  rgba(239, 68, 68, 0.35);
  --cc-status-danger-text:    #f87171;

  --cc-status-info-bg:        rgba(59, 130, 246, 0.12);
  --cc-status-info-border:    rgba(59, 130, 246, 0.35);
  --cc-status-info-text:      #60a5fa;

  /* Density & Geometry */
  --cc-radius-sm:           4px;
  --cc-radius-md:           6px;
  --cc-radius-lg:           8px;
  --cc-transition:          all 150ms cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Legacy Variable Bridge for Existing Pages ───────────────────────────── */
  --bg-base:          var(--cc-bg-app);
  --bg-surface:       var(--cc-bg-component);
  --bg-hover:         var(--cc-bg-component-hover);
  --primary:          var(--cc-solid-accent);
  --primary-hover:    var(--cc-solid-accent-hover);
  --primary-light:    var(--theme-primary-light);
  --primary-glow:     var(--theme-accent-glow);
  --text-primary:     var(--cc-text);
  --text-secondary:   var(--cc-text-muted);
  --text-muted:       var(--cc-text-subtle);
  --border:           var(--cc-border);
  --border-subtle:    var(--cc-border-subtle);
  --border-strong:    var(--theme-border-strong);
}

/* ── Vector Icon Standard Styling ─────────────────────────────────────────── */
.cc-icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  stroke: currentColor;
}

.cc-icon--invalid {
  display: inline-block;
  vertical-align: middle;
  width: 18px;
  height: 18px;
  border: 1px dashed var(--cc-status-danger-text);
  background: var(--cc-status-danger-bg);
  border-radius: var(--cc-radius-sm);
  position: relative;
}

.cc-icon--invalid::after {
  content: "!";
  display: block;
  text-align: center;
  font-size: 11px;
  font-weight: bold;
  color: var(--cc-status-danger-text);
  line-height: 16px;
}

/* ── Universal Semantic Card Surfaces ──────────────────────────────────────── */
.card,
.stat-card,
.dash-card,
.module-card,
.settings-section-card,
.profile-info-card,
.profile-avatar-card,
.table-container {
  background: var(--cc-bg-component);
  border: 1px solid var(--cc-border);
  color: var(--cc-text);
}

/* ── Universal Headings & Text ─────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6,
.page-title,
.topbar-title,
.card-title,
.section-title,
.dash-card-title,
.profile-card-title {
  color: var(--cc-text);
}

p,
.page-subtitle,
.card-subtitle,
.dash-welcome p,
.profile-avatar-meta {
  color: var(--cc-text-muted);
}

/* ── Universal Form Inputs ─────────────────────────────────────────────────── */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="url"],
select,
textarea,
.form-control,
.form-input,
.form-select {
  background: var(--cc-bg-input);
  border: 1px solid var(--cc-border);
  color: var(--cc-text);
  border-radius: var(--cc-radius-sm);
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
select:focus,
textarea:focus,
.form-control:focus,
.form-input:focus,
.form-select:focus {
  border-color: var(--cc-border-focus);
  box-shadow: var(--cc-focus-ring);
  outline: none;
}

/* ── Universal Tables ──────────────────────────────────────────────────────── */
table th {
  background: var(--cc-bg-subtle);
  color: var(--cc-text-muted);
  border-bottom: 1px solid var(--cc-border);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

table td {
  color: var(--cc-text);
  border-bottom: 1px solid var(--cc-border-subtle);
}

table tbody tr:hover td {
  background: var(--cc-bg-component-hover);
  color: var(--cc-text);
}