/* =====================================================================
   GENWEB UI — Shared Design System
   ---------------------------------------------------------------------
   This file defines ONE canonical set of design tokens (colors, spacing,
   typography, radii, shadows) and a handful of opt-in component classes
   so the panel feels visually consistent.

   IMPORTANT: This file is purely ADDITIVE. Existing page-level <style>
   blocks keep working — they can also start consuming the variables
   below (e.g. background: var(--gw-card-bg)) to fall in line without
   being rewritten.

   Prefix: `gw-` for components/utilities, `--gw-*` for CSS variables.
   ===================================================================== */

/* =====================================================================
   1) DESIGN TOKENS
   ===================================================================== */
:root {
  /* ── Surface / background ──────────────────────────────── */
  --gw-bg:           #070b14;
  --gw-bg-soft:      #0b1220;
  --gw-surface-1:    rgba(255, 255, 255, 0.04);
  --gw-surface-2:    rgba(255, 255, 255, 0.06);
  --gw-surface-3:    rgba(255, 255, 255, 0.08);
  --gw-card-bg:      rgba(15, 23, 42, 0.55);
  --gw-card-bg-alt:  rgba(15, 23, 42, 0.92);
  --gw-modal-bg:     rgba(15, 23, 42, 0.96);

  /* ── Borders ───────────────────────────────────────────── */
  --gw-border:       rgba(255, 255, 255, 0.10);
  --gw-border-soft:  rgba(255, 255, 255, 0.06);
  --gw-border-strong:rgba(255, 255, 255, 0.18);
  --gw-divider:      rgba(255, 255, 255, 0.08);

  /* ── Text ──────────────────────────────────────────────── */
  --gw-text:         rgba(255, 255, 255, 0.92);
  --gw-text-soft:    rgba(255, 255, 255, 0.72);
  --gw-text-muted:   rgba(255, 255, 255, 0.50);
  --gw-text-faint:   rgba(255, 255, 255, 0.35);
  --gw-text-inverse: #0f172a;

  /* ── Brand accents ─────────────────────────────────────── */
  --gw-accent:        #6ee7ff;
  --gw-accent-strong: #38bdf8;
  --gw-accent-glow:   rgba(110, 231, 255, 0.35);
  --gw-accent-2:      #a78bfa;
  --gw-accent-2-glow: rgba(167, 139, 250, 0.30);

  /* ── Status colors ─────────────────────────────────────── */
  --gw-success:      #10b981;
  --gw-success-glow: rgba(16, 185, 129, 0.25);
  --gw-warning:      #f59e0b;
  --gw-warning-glow: rgba(245, 158, 11, 0.25);
  --gw-danger:       #ef4444;
  --gw-danger-glow:  rgba(239, 68, 68, 0.25);
  --gw-info:         #6ee7ff;

  /* ── Gradients ─────────────────────────────────────────── */
  --gw-grad-primary: linear-gradient(135deg, #6ee7ff 0%, #a78bfa 100%);
  --gw-grad-success: linear-gradient(135deg, #10b981 0%, #34d399 100%);
  --gw-grad-warning: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
  --gw-grad-danger:  linear-gradient(135deg, #ef4444 0%, #f87171 100%);
  --gw-grad-glass:   radial-gradient(900px 320px at 10% -10%, rgba(110,231,255,0.10), transparent 55%),
                     radial-gradient(700px 280px at 90% 110%, rgba(167,139,250,0.08), transparent 55%),
                     rgba(15, 23, 42, 0.86);

  /* ── Radii ─────────────────────────────────────────────── */
  --gw-radius-xs: 6px;
  --gw-radius-sm: 8px;
  --gw-radius:    12px;
  --gw-radius-lg: 16px;
  --gw-radius-xl: 20px;
  --gw-radius-2xl: 24px;
  --gw-radius-pill: 999px;

  /* ── Shadows ───────────────────────────────────────────── */
  --gw-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.18);
  --gw-shadow:    0 10px 28px rgba(0, 0, 0, 0.28);
  --gw-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.45);
  --gw-shadow-xl: 0 30px 80px rgba(0, 0, 0, 0.55);
  --gw-shadow-glow: 0 0 24px var(--gw-accent-glow);

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

  /* ── Typography ────────────────────────────────────────── */
  --gw-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --gw-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --gw-fz-xs: 0.72rem;
  --gw-fz-sm: 0.82rem;
  --gw-fz:    0.92rem;
  --gw-fz-md: 1rem;
  --gw-fz-lg: 1.12rem;
  --gw-fz-xl: 1.3rem;
  --gw-fz-2xl: 1.6rem;
  --gw-fz-3xl: 2rem;

  /* ── Motion ────────────────────────────────────────────── */
  --gw-tx-fast: .12s ease;
  --gw-tx:      .18s cubic-bezier(.4, 0, .2, 1);
  --gw-tx-slow: .28s cubic-bezier(.4, 0, .2, 1);

  /* ── Z-index scale ─────────────────────────────────────── */
  --gw-z-dropdown: 1000;
  --gw-z-sticky:   1020;
  --gw-z-overlay:  1040;
  --gw-z-modal:    1050;
  --gw-z-toast:    99999;
  --gw-z-palette:  100000;
}

/* =====================================================================
   2) COMPONENT PRIMITIVES (opt-in)
   ===================================================================== */

/* Card — gw-card · gw-card-flat · gw-card-glass */
.gw-card {
  background: var(--gw-card-bg);
  border: 1px solid var(--gw-border);
  border-radius: var(--gw-radius-lg);
  padding: var(--gw-space-4);
  box-shadow: var(--gw-shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--gw-text);
}
.gw-card-flat { background: var(--gw-surface-1); box-shadow: none; backdrop-filter: none; }
.gw-card-glass { background: var(--gw-grad-glass); }
.gw-card-title { font-size: var(--gw-fz-lg); font-weight: 700; color: var(--gw-text); margin: 0 0 var(--gw-space-3); }
.gw-card-subtitle { font-size: var(--gw-fz-sm); color: var(--gw-text-muted); }

/* Buttons — gw-btn (modifiers add color) */
.gw-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--gw-space-2);
  font-family: var(--gw-font);
  font-size: var(--gw-fz);
  font-weight: 600;
  padding: 9px 16px;
  border-radius: var(--gw-radius);
  border: 1px solid var(--gw-border);
  background: var(--gw-surface-2);
  color: var(--gw-text);
  cursor: pointer;
  transition: background var(--gw-tx-fast), border-color var(--gw-tx-fast), transform var(--gw-tx-fast), box-shadow var(--gw-tx-fast);
  text-decoration: none;
  user-select: none;
}
.gw-btn:hover { background: var(--gw-surface-3); border-color: var(--gw-border-strong); }
.gw-btn:active { transform: scale(.97); }
.gw-btn:disabled, .gw-btn.is-disabled { opacity: .5; cursor: not-allowed; }
.gw-btn-primary  { background: var(--gw-grad-primary); color: var(--gw-text-inverse); border: 0; }
.gw-btn-primary:hover { filter: brightness(1.08); box-shadow: var(--gw-shadow-glow); }
.gw-btn-success  { background: rgba(16,185,129,.12); border-color: rgba(16,185,129,.30); color: var(--gw-success); }
.gw-btn-success:hover { background: rgba(16,185,129,.20); }
.gw-btn-warning  { background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.30); color: var(--gw-warning); }
.gw-btn-warning:hover { background: rgba(245,158,11,.22); }
.gw-btn-danger   { background: rgba(239,68,68,.12);  border-color: rgba(239,68,68,.30);  color: var(--gw-danger); }
.gw-btn-danger:hover { background: rgba(239,68,68,.22); }
.gw-btn-ghost    { background: transparent; border-color: var(--gw-border-soft); }
.gw-btn-ghost:hover { background: var(--gw-surface-1); }
.gw-btn-sm { padding: 5px 11px; font-size: var(--gw-fz-sm); border-radius: var(--gw-radius-sm); }
.gw-btn-lg { padding: 12px 22px; font-size: var(--gw-fz-md); border-radius: var(--gw-radius-lg); }
.gw-btn-icon { padding: 8px; min-width: 38px; min-height: 38px; }

/* Inputs */
.gw-input,
.gw-textarea,
.gw-select {
  width: 100%;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--gw-border);
  border-radius: var(--gw-radius);
  padding: 10px 12px;
  color: var(--gw-text);
  font-family: var(--gw-font);
  font-size: var(--gw-fz);
  transition: border-color var(--gw-tx-fast), box-shadow var(--gw-tx-fast);
}
.gw-input:focus, .gw-textarea:focus, .gw-select:focus {
  outline: none;
  border-color: var(--gw-accent);
  box-shadow: 0 0 0 3px var(--gw-accent-glow);
}
.gw-input::placeholder, .gw-textarea::placeholder { color: var(--gw-text-faint); }
.gw-label { font-size: var(--gw-fz-sm); font-weight: 600; color: var(--gw-text-soft); display: block; margin-bottom: var(--gw-space-2); }
.gw-field { display: flex; flex-direction: column; gap: var(--gw-space-2); }
.gw-help { font-size: var(--gw-fz-xs); color: var(--gw-text-muted); }

/* Badges / pills */
.gw-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  border-radius: var(--gw-radius-pill);
  background: var(--gw-surface-2);
  color: var(--gw-text-soft);
  font-size: var(--gw-fz-xs);
  font-weight: 600;
  border: 1px solid var(--gw-border);
}
.gw-badge-success { background: rgba(16,185,129,.12); color: var(--gw-success); border-color: rgba(16,185,129,.25); }
.gw-badge-warning { background: rgba(245,158,11,.12); color: var(--gw-warning); border-color: rgba(245,158,11,.25); }
.gw-badge-danger  { background: rgba(239,68,68,.12); color: var(--gw-danger); border-color: rgba(239,68,68,.25); }
.gw-badge-info    { background: rgba(110,231,255,.12); color: var(--gw-accent); border-color: rgba(110,231,255,.25); }

/* Tables (additive — Bootstrap .table still works) */
.gw-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--gw-fz-sm);
  color: var(--gw-text);
}
.gw-table th {
  text-align: left;
  font-weight: 600;
  font-size: var(--gw-fz-xs);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--gw-text-muted);
  padding: var(--gw-space-3) var(--gw-space-4);
  border-bottom: 1px solid var(--gw-divider);
  background: var(--gw-surface-1);
}
.gw-table td { padding: var(--gw-space-3) var(--gw-space-4); border-bottom: 1px solid var(--gw-divider); }
.gw-table tbody tr:hover { background: var(--gw-surface-1); }
.gw-table tbody tr:last-child td { border-bottom: 0; }

/* Modal scaffolding */
.gw-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, .62);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  z-index: var(--gw-z-overlay);
  display: flex; align-items: center; justify-content: center;
  padding: var(--gw-space-4);
}
.gw-modal {
  width: min(560px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  background: var(--gw-modal-bg);
  border: 1px solid var(--gw-border);
  border-radius: var(--gw-radius-xl);
  box-shadow: var(--gw-shadow-xl);
  color: var(--gw-text);
  z-index: var(--gw-z-modal);
}
.gw-modal-header,
.gw-modal-footer { padding: var(--gw-space-4) var(--gw-space-5); }
.gw-modal-header { border-bottom: 1px solid var(--gw-divider); display: flex; justify-content: space-between; align-items: center; }
.gw-modal-body   { padding: var(--gw-space-5); }
.gw-modal-footer { border-top: 1px solid var(--gw-divider); display: flex; justify-content: flex-end; gap: var(--gw-space-3); }
.gw-modal-title  { font-size: var(--gw-fz-lg); font-weight: 700; margin: 0; }

/* Empty state */
.gw-empty {
  padding: var(--gw-space-10) var(--gw-space-4);
  text-align: center;
  color: var(--gw-text-muted);
}
.gw-empty i { font-size: 2.4rem; color: var(--gw-text-faint); margin-bottom: var(--gw-space-3); display: block; }

/* Section header (page top "title + actions" pattern) */
.gw-section-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--gw-space-4);
  margin-bottom: var(--gw-space-5);
  flex-wrap: wrap;
}
.gw-section-head h1, .gw-section-head h2 { margin: 0; font-size: var(--gw-fz-xl); font-weight: 700; }
.gw-section-head .gw-section-actions { display: flex; gap: var(--gw-space-2); flex-wrap: wrap; }

/* Stat tile (dashboard cards pattern) */
.gw-stat {
  background: var(--gw-card-bg);
  border: 1px solid var(--gw-border);
  border-radius: var(--gw-radius-lg);
  padding: var(--gw-space-4);
  display: flex; gap: var(--gw-space-3);
  align-items: center;
  min-height: 92px;
}
.gw-stat-icon {
  width: 48px; height: 48px; border-radius: var(--gw-radius);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--gw-surface-2);
  color: var(--gw-accent);
  font-size: 1.4rem;
  flex-shrink: 0;
}
.gw-stat-label { font-size: var(--gw-fz-xs); color: var(--gw-text-muted); text-transform: uppercase; letter-spacing: 1px; }
.gw-stat-value { font-size: var(--gw-fz-2xl); font-weight: 800; color: var(--gw-text); line-height: 1.1; margin-top: 2px; }

/* =====================================================================
   3) UTILITIES
   ===================================================================== */
.gw-flex { display: flex; }
.gw-flex-col { display: flex; flex-direction: column; }
.gw-flex-wrap { flex-wrap: wrap; }
.gw-items-center { align-items: center; }
.gw-items-start  { align-items: flex-start; }
.gw-justify-between { justify-content: space-between; }
.gw-justify-center  { justify-content: center; }
.gw-justify-end     { justify-content: flex-end; }

.gw-gap-1 { gap: var(--gw-space-1); }
.gw-gap-2 { gap: var(--gw-space-2); }
.gw-gap-3 { gap: var(--gw-space-3); }
.gw-gap-4 { gap: var(--gw-space-4); }
.gw-gap-5 { gap: var(--gw-space-5); }

.gw-mt-1 { margin-top: var(--gw-space-1); }
.gw-mt-2 { margin-top: var(--gw-space-2); }
.gw-mt-3 { margin-top: var(--gw-space-3); }
.gw-mt-4 { margin-top: var(--gw-space-4); }
.gw-mt-5 { margin-top: var(--gw-space-5); }
.gw-mb-1 { margin-bottom: var(--gw-space-1); }
.gw-mb-2 { margin-bottom: var(--gw-space-2); }
.gw-mb-3 { margin-bottom: var(--gw-space-3); }
.gw-mb-4 { margin-bottom: var(--gw-space-4); }
.gw-mb-5 { margin-bottom: var(--gw-space-5); }

.gw-text-sm   { font-size: var(--gw-fz-sm); }
.gw-text-xs   { font-size: var(--gw-fz-xs); }
.gw-text-lg   { font-size: var(--gw-fz-lg); }
.gw-text-muted { color: var(--gw-text-muted); }
.gw-text-soft  { color: var(--gw-text-soft); }
.gw-text-accent { color: var(--gw-accent); }
.gw-text-success { color: var(--gw-success); }
.gw-text-warning { color: var(--gw-warning); }
.gw-text-danger  { color: var(--gw-danger); }

.gw-w-full { width: 100%; }
.gw-truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gw-grid { display: grid; }
.gw-grid-2 { grid-template-columns: repeat(2, 1fr); }
.gw-grid-3 { grid-template-columns: repeat(3, 1fr); }
.gw-grid-4 { grid-template-columns: repeat(4, 1fr); }
.gw-grid-auto { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
@media (max-width: 575.98px) {
  .gw-grid-2, .gw-grid-3, .gw-grid-4, .gw-grid-auto { grid-template-columns: 1fr; }
}

/* =====================================================================
   4) BOOTSTRAP HARMONIZATION (light touches so .card / .btn pick up tokens)
   ===================================================================== */
:root {
  --bs-primary: var(--gw-accent-strong);
  --bs-primary-rgb: 56, 189, 248;
  --bs-success: var(--gw-success);
  --bs-success-rgb: 16, 185, 129;
  --bs-warning: var(--gw-warning);
  --bs-warning-rgb: 245, 158, 11;
  --bs-danger: var(--gw-danger);
  --bs-danger-rgb: 239, 68, 68;
  --bs-info: var(--gw-info);
  --bs-info-rgb: 110, 231, 255;
  --bs-body-bg: var(--gw-bg);
  --bs-body-color: var(--gw-text);
  --bs-secondary-color: var(--gw-text-muted);
  --bs-border-color: var(--gw-border);
  --bs-border-radius: var(--gw-radius);
  --bs-border-radius-sm: var(--gw-radius-sm);
  --bs-border-radius-lg: var(--gw-radius-lg);
}

/* =====================================================================
   5) GLOBAL BOOTSTRAP CLASS THEMING
   Applies token-based styling to common Bootstrap classes WITHOUT !important
   so any inline style="..." on a specific page still wins. This unifies the
   look of all 100+ .ejs pages with zero per-page edits.
   ===================================================================== */

/* ── Cards ─────────────────────────────────────────── */
.card {
  background: var(--gw-card-bg);
  border: 1px solid var(--gw-border);
  border-radius: var(--gw-radius-lg);
  color: var(--gw-text);
  box-shadow: var(--gw-shadow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.card-header {
  background: transparent;
  border-bottom: 1px solid var(--gw-divider);
  color: var(--gw-text);
  padding: var(--gw-space-3) var(--gw-space-4);
}
.card-footer {
  background: transparent;
  border-top: 1px solid var(--gw-divider);
  padding: var(--gw-space-3) var(--gw-space-4);
}
.card-body { color: var(--gw-text); }
.card-title { color: var(--gw-text); font-weight: 700; }
.card-subtitle, .card-text small { color: var(--gw-text-muted); }

/* ── Buttons ───────────────────────────────────────── */
.btn {
  border-radius: var(--gw-radius);
  font-weight: 600;
  transition: background var(--gw-tx-fast), border-color var(--gw-tx-fast), transform var(--gw-tx-fast), box-shadow var(--gw-tx-fast);
}
.btn:active { transform: scale(.97); }
.btn-primary {
  background: var(--gw-grad-primary);
  border-color: transparent;
  color: var(--gw-text-inverse);
}
.btn-primary:hover, .btn-primary:focus {
  filter: brightness(1.08);
  border-color: transparent;
  color: var(--gw-text-inverse);
  box-shadow: 0 0 16px var(--gw-accent-glow);
}
.btn-success {
  background: rgba(16,185,129,.14);
  border-color: rgba(16,185,129,.30);
  color: var(--gw-success);
}
.btn-success:hover { background: rgba(16,185,129,.24); color: var(--gw-success); border-color: rgba(16,185,129,.45); }
.btn-warning {
  background: rgba(245,158,11,.14);
  border-color: rgba(245,158,11,.30);
  color: var(--gw-warning);
}
.btn-warning:hover { background: rgba(245,158,11,.24); color: var(--gw-warning); border-color: rgba(245,158,11,.45); }
.btn-danger {
  background: rgba(239,68,68,.14);
  border-color: rgba(239,68,68,.30);
  color: var(--gw-danger);
}
.btn-danger:hover { background: rgba(239,68,68,.24); color: var(--gw-danger); border-color: rgba(239,68,68,.45); }
.btn-info {
  background: rgba(110,231,255,.14);
  border-color: rgba(110,231,255,.30);
  color: var(--gw-info);
}
.btn-info:hover { background: rgba(110,231,255,.24); color: var(--gw-info); }
.btn-secondary {
  background: var(--gw-surface-2);
  border-color: var(--gw-border);
  color: var(--gw-text);
}
.btn-secondary:hover { background: var(--gw-surface-3); border-color: var(--gw-border-strong); color: var(--gw-text); }
.btn-light, .btn-light-warning, .btn-light-danger, .btn-light-info, .btn-light-success {
  background: var(--gw-surface-2);
  border-color: var(--gw-border);
  color: var(--gw-text);
}
.btn-light-warning { color: var(--gw-warning); }
.btn-light-danger  { color: var(--gw-danger); }
.btn-light-info    { color: var(--gw-info); }
.btn-light-success { color: var(--gw-success); }
.btn-outline-primary { color: var(--gw-accent); border-color: var(--gw-accent); }
.btn-outline-primary:hover { background: rgba(110,231,255,.12); color: var(--gw-accent); }
.btn-outline-danger  { color: var(--gw-danger); border-color: var(--gw-danger); }
.btn-outline-danger:hover { background: rgba(239,68,68,.12); color: var(--gw-danger); }
.btn-outline-secondary { color: var(--gw-text-soft); border-color: var(--gw-border); }
.btn-outline-secondary:hover { background: var(--gw-surface-2); color: var(--gw-text); }

/* ── Forms ─────────────────────────────────────────── */
.form-control,
.form-select,
.form-control:focus,
.form-select:focus {
  background-color: rgba(0,0,0,.30);
  color: var(--gw-text);
  border: 1px solid var(--gw-border);
  border-radius: var(--gw-radius);
}
.form-control:focus, .form-select:focus {
  border-color: var(--gw-accent);
  box-shadow: 0 0 0 3px var(--gw-accent-glow);
}
.form-control::placeholder { color: var(--gw-text-faint); }
.form-control:disabled, .form-select:disabled { opacity: .55; }

/* Native <select> + <option> — Windows light theme açılır kutuyu beyaz/beyaz yapıp okunmaz hale getiriyor.
   color-scheme: dark browser'a dropdown panelini dark renderla diyor (Chrome/Edge/Firefox).
   !important — Swal/Bootstrap inline style'larını ezsin diye. */
select,
.form-select,
.swal2-select,
select.swal2-input,
.gw-select {
  color-scheme: dark;
}

.form-select option,
.swal2-select option,
select.swal2-input option,
.gw-select option,
select option {
  background-color: #0f172a !important;
  color: #e2e8f0 !important;
}
.form-select option:checked,
.swal2-select option:checked,
select.swal2-input option:checked,
.gw-select option:checked,
select option:checked {
  background-color: #1e293b !important;
  color: #ffffff !important;
}
.form-label { color: var(--gw-text-soft); font-weight: 600; font-size: var(--gw-fz-sm); }
.form-text  { color: var(--gw-text-muted); font-size: var(--gw-fz-xs); }
.form-check-input {
  background-color: rgba(0,0,0,.30);
  border-color: var(--gw-border-strong);
}
.form-check-input:checked {
  background-color: var(--gw-accent-strong);
  border-color: var(--gw-accent-strong);
}

/* ── Modal ─────────────────────────────────────────── */
.modal-content {
  background: var(--gw-modal-bg);
  border: 1px solid var(--gw-border);
  border-radius: var(--gw-radius-xl);
  color: var(--gw-text);
  box-shadow: var(--gw-shadow-xl);
}
.modal-header { border-bottom: 1px solid var(--gw-divider); }
.modal-footer { border-top: 1px solid var(--gw-divider); }
.modal-title  { color: var(--gw-text); font-weight: 700; }
.modal-backdrop.show { opacity: .65; backdrop-filter: blur(4px); }
.btn-close { filter: invert(1) opacity(.65); }
.btn-close:hover { filter: invert(1) opacity(1); }

/* ── Tables ────────────────────────────────────────── */
.table {
  color: var(--gw-text);
  border-color: var(--gw-divider);
}
.table > thead {
  background: var(--gw-surface-1);
}
.table > thead th {
  background: transparent;
  color: var(--gw-text-muted);
  font-size: var(--gw-fz-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-bottom: 1px solid var(--gw-divider);
  padding: var(--gw-space-3) var(--gw-space-4);
}
.table > tbody > tr > td {
  border-color: var(--gw-divider);
  padding: var(--gw-space-3) var(--gw-space-4);
  vertical-align: middle;
}
.table-hover > tbody > tr:hover > * {
  background: var(--gw-surface-1);
  color: var(--gw-text);
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
  background: rgba(255,255,255,.02);
  color: var(--gw-text);
}

/* ── Badges ────────────────────────────────────────── */
.badge {
  font-weight: 600;
  border-radius: var(--gw-radius-pill);
  padding: 3px 9px;
}
.bg-primary  { background: rgba(56,189,248,.18) !important; color: var(--gw-accent) !important; border: 1px solid rgba(56,189,248,.30); }
.bg-success  { background: rgba(16,185,129,.16) !important; color: var(--gw-success) !important; border: 1px solid rgba(16,185,129,.30); }
.bg-warning  { background: rgba(245,158,11,.16) !important; color: var(--gw-warning) !important; border: 1px solid rgba(245,158,11,.30); }
.bg-danger   { background: rgba(239,68,68,.16)  !important; color: var(--gw-danger)  !important; border: 1px solid rgba(239,68,68,.30); }
.bg-info     { background: rgba(110,231,255,.16) !important; color: var(--gw-info)    !important; border: 1px solid rgba(110,231,255,.30); }
.bg-secondary { background: var(--gw-surface-2) !important; color: var(--gw-text-soft) !important; border: 1px solid var(--gw-border); }

/* ── Alerts ────────────────────────────────────────── */
.alert {
  border-radius: var(--gw-radius);
  border-width: 1px;
  border-style: solid;
  background: var(--gw-surface-1);
  color: var(--gw-text);
}
.alert-success { background: rgba(16,185,129,.10); border-color: rgba(16,185,129,.30); color: var(--gw-success); }
.alert-warning { background: rgba(245,158,11,.10); border-color: rgba(245,158,11,.30); color: var(--gw-warning); }
.alert-danger  { background: rgba(239,68,68,.10);  border-color: rgba(239,68,68,.30);  color: var(--gw-danger); }
.alert-info    { background: rgba(110,231,255,.10); border-color: rgba(110,231,255,.30); color: var(--gw-info); }

/* ── Dropdowns ─────────────────────────────────────── */
.dropdown-menu {
  background: var(--gw-modal-bg);
  border: 1px solid var(--gw-border);
  border-radius: var(--gw-radius);
  box-shadow: var(--gw-shadow-lg);
  color: var(--gw-text);
}
.dropdown-item { color: var(--gw-text-soft); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--gw-surface-2); color: var(--gw-text); }
.dropdown-item.active, .dropdown-item:active { background: var(--gw-grad-primary); color: var(--gw-text-inverse); }
.dropdown-divider { border-color: var(--gw-divider); }

/* ── Nav tabs / pills ──────────────────────────────── */
.nav-tabs { border-bottom: 1px solid var(--gw-divider); }
.nav-tabs .nav-link {
  color: var(--gw-text-muted);
  border: 1px solid transparent;
  border-radius: var(--gw-radius) var(--gw-radius) 0 0;
  font-weight: 600;
}
.nav-tabs .nav-link:hover { color: var(--gw-text); border-color: transparent transparent var(--gw-divider); }
.nav-tabs .nav-link.active {
  background: var(--gw-surface-2);
  color: var(--gw-accent);
  border-color: var(--gw-divider) var(--gw-divider) var(--gw-surface-2);
}
.nav-pills .nav-link {
  color: var(--gw-text-muted);
  border-radius: var(--gw-radius);
  font-weight: 600;
}
.nav-pills .nav-link.active {
  background: var(--gw-grad-primary);
  color: var(--gw-text-inverse);
}

/* ── Pagination ────────────────────────────────────── */
.page-link {
  background: var(--gw-surface-1);
  border-color: var(--gw-border);
  color: var(--gw-text-soft);
}
.page-link:hover { background: var(--gw-surface-2); color: var(--gw-text); border-color: var(--gw-border-strong); }
.page-item.active .page-link {
  background: var(--gw-grad-primary);
  border-color: transparent;
  color: var(--gw-text-inverse);
}

/* ── List groups ───────────────────────────────────── */
.list-group-item {
  background: var(--gw-surface-1);
  border-color: var(--gw-border);
  color: var(--gw-text);
}
.list-group-item-action:hover { background: var(--gw-surface-2); color: var(--gw-text); }
.list-group-item.active { background: var(--gw-grad-primary); border-color: transparent; color: var(--gw-text-inverse); }

/* ── Tooltips & Popovers ───────────────────────────── */
.tooltip-inner {
  background: var(--gw-modal-bg);
  border: 1px solid var(--gw-border);
  color: var(--gw-text);
  border-radius: var(--gw-radius-sm);
  font-size: var(--gw-fz-xs);
  padding: 6px 10px;
}
.popover {
  background: var(--gw-modal-bg);
  border: 1px solid var(--gw-border);
  box-shadow: var(--gw-shadow);
}
.popover-header { background: var(--gw-surface-2); color: var(--gw-text); border-bottom-color: var(--gw-divider); }
.popover-body { color: var(--gw-text-soft); }

/* ── Progress bars ─────────────────────────────────── */
.progress {
  background: var(--gw-surface-2);
  border-radius: var(--gw-radius-pill);
  height: 8px;
}
.progress-bar { background: var(--gw-grad-primary); }

/* ── Spinners (loading) ────────────────────────────── */
.spinner-border, .spinner-grow { color: var(--gw-accent); }

/* ── Misc text ─────────────────────────────────────── */
.text-muted     { color: var(--gw-text-muted) !important; }
.text-secondary { color: var(--gw-text-soft)  !important; }
hr              { color: var(--gw-divider); }

/* ── SweetAlert2 harmonization (used heavily across pages) ─────────── */
.swal2-popup {
  background: var(--gw-modal-bg) !important;
  color: var(--gw-text) !important;
  border-radius: var(--gw-radius-xl) !important;
  border: 1px solid var(--gw-border);
}
.swal2-title { color: var(--gw-text) !important; }
.swal2-html-container { color: var(--gw-text-soft) !important; }
.swal2-input, .swal2-textarea, .swal2-select {
  background: rgba(0,0,0,.30) !important;
  color: var(--gw-text) !important;
  border: 1px solid var(--gw-border) !important;
  border-radius: var(--gw-radius) !important;
}
.swal2-input:focus, .swal2-textarea:focus, .swal2-select:focus {
  border-color: var(--gw-accent) !important;
  box-shadow: 0 0 0 3px var(--gw-accent-glow) !important;
}
.swal2-confirm {
  background: var(--gw-grad-primary) !important;
  color: var(--gw-text-inverse) !important;
  border-radius: var(--gw-radius) !important;
}
.swal2-cancel {
  background: var(--gw-surface-2) !important;
  color: var(--gw-text) !important;
  border-radius: var(--gw-radius) !important;
}
.swal2-deny {
  background: rgba(239,68,68,.16) !important;
  color: var(--gw-danger) !important;
  border-radius: var(--gw-radius) !important;
}

/* ============================================================
   GENWEB Mobile Sidebar — garantili mobil menü davranışı
   genweb-mobile.js ile birlikte çalışır.
   ============================================================ */
.genweb-mob-overlay {
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 16, 0.62);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 1035;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
.genweb-mob-overlay.active {
  opacity: 1;
  visibility: visible;
}
@media (min-width: 1025px) {
  .genweb-mob-overlay { display: none !important; }
}
@media (max-width: 1024.98px) {
  /* Mobilde sidebar varsayılan gizli — ekran dışında */
  .pc-sidebar {
    transform: translateX(-100%);
    transition: transform .28s cubic-bezier(.2, .9, .3, 1);
    z-index: 1040 !important;
  }
  /* Aktif (açık) durum */
  .pc-sidebar.mob-sidebar-active {
    transform: translateX(0) !important;
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.6);
  }
}