/* ═══════════════════════════════════════════════════════════════════════════
   Hazmat Core — Product Design System (SINGLE TOKEN CONTRACT)
   ───────────────────────────────────────────────────────────────────────────
   Toggle: html[data-theme="dark"|"light"]  (set by product-theme.js)
   Persist: localStorage hazmat_theme = 'dark' | 'light'
   Default: dark (:root matches [data-theme="dark"])
   Load first on every page: <link rel="stylesheet" href="/product-theme.css">
   ═══════════════════════════════════════════════════════════════════════════ */

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

/* ─── Dark (default) ─────────────────────────────────────────────────────── */
:root,
[data-theme="dark"] {
  color-scheme: dark;

  --pt-font: "Manrope", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  --pt-radius-sm: 8px;
  --pt-radius: 12px;
  --pt-radius-lg: 16px;
  --pt-radius-xl: 20px;
  --pt-focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.35);
  --pt-space-1: 4px;
  --pt-space-2: 8px;
  --pt-space-3: 12px;
  --pt-space-4: 16px;
  --pt-space-5: 24px;
  --pt-space-6: 32px;

  /* Core surfaces / text (mandatory contract) */
  --pt-bg: #020617;
  --pt-surface: #0f172a;
  --pt-surface-2: #1e293b;
  --pt-text: #f1f5f9;
  --pt-text-secondary: #e2e8f0;
  --pt-text-muted: #94a3b8;
  --pt-border: rgba(255, 255, 255, 0.09);
  --pt-accent: #ff9500;
  --pt-accent-contrast: #0b1220;
  --pt-on-primary: #ffffff;
  --pt-success: #4ade80;
  --pt-warning: #fbbf24;
  --pt-danger: #f87171;
  --pt-info: #60a5fa;

  /* Tables */
  --pt-table-header-bg: #020617;
  --pt-table-row: #0f172a;
  --pt-table-text: #e2e8f0;

  /* Nav */
  --pt-nav-bg: rgba(2, 6, 23, 0.92);
  --pt-nav-text: #e2e8f0;

  /* Extended (compat + components) */
  --pt-bg-elevated: #0f172a;
  --pt-muted: var(--pt-text-muted);
  --pt-muted-2: #64748b;
  --pt-border-strong: rgba(255, 255, 255, 0.16);
  --pt-accent-dim: rgba(255, 149, 0, 0.12);
  --pt-accent-border: rgba(255, 149, 0, 0.38);
  --pt-accent-glow: 0 0 18px rgba(255, 149, 0, 0.22);
  --pt-primary: #3b82f6;
  --pt-primary-dim: rgba(59, 130, 246, 0.15);
  --pt-primary-border: rgba(59, 130, 246, 0.4);
  --pt-hero-glow: radial-gradient(900px 500px at 20% 0%, rgba(59, 130, 246, 0.16), transparent 60%),
                  radial-gradient(640px 360px at 85% 8%, rgba(255, 149, 0, 0.08), transparent 55%);
  --pt-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  --pt-shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.22);
  --pt-input-bg: #020617;
  --pt-card-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015));

  /* Status badges */
  --pt-st-pending-bg: rgba(234, 179, 8, 0.2);
  --pt-st-pending-fg: #fde68a;
  --pt-st-pending-bd: rgba(234, 179, 8, 0.45);
  --pt-st-active-bg: rgba(34, 197, 94, 0.2);
  --pt-st-active-fg: #86efac;
  --pt-st-active-bd: rgba(34, 197, 94, 0.45);
  --pt-st-suspended-bg: rgba(239, 68, 68, 0.2);
  --pt-st-suspended-fg: #fca5a5;
  --pt-st-suspended-bd: rgba(239, 68, 68, 0.45);
  --pt-st-rejected-bg: #1e293b;
  --pt-st-rejected-fg: #94a3b8;
  --pt-st-rejected-bd: #334155;
  --pt-st-info-bg: rgba(59, 130, 246, 0.2);
  --pt-st-info-fg: #93c5fd;
  --pt-st-info-bd: rgba(59, 130, 246, 0.45);
  --pt-st-expired-bg: rgba(239, 68, 68, 0.2);
  --pt-st-expired-fg: #fca5a5;
  --pt-st-expired-bd: rgba(239, 68, 68, 0.45);
  --pt-st-neutral-bg: #1e293b;
  --pt-st-neutral-fg: #94a3b8;
  --pt-st-neutral-bd: #334155;

  /* Org type badges */
  --pt-tp-default-bg: #1e293b;
  --pt-tp-default-fg: #cbd5e1;
  --pt-tp-default-bd: #334155;
  --pt-tp-tmgdk-bg: rgba(6, 182, 212, 0.22);
  --pt-tp-tmgdk-fg: #67e8f9;
  --pt-tp-tmgdk-bd: rgba(6, 182, 212, 0.45);
  --pt-tp-tmgd-bg: rgba(139, 92, 246, 0.22);
  --pt-tp-tmgd-fg: #c4b5fd;
  --pt-tp-tmgd-bd: rgba(139, 92, 246, 0.45);
  --pt-tp-hizmet-bg: rgba(16, 185, 129, 0.22);
  --pt-tp-hizmet-fg: #6ee7b7;
  --pt-tp-hizmet-bd: rgba(16, 185, 129, 0.45);
}

/* ─── Light ──────────────────────────────────────────────────────────────── */
[data-theme="light"] {
  color-scheme: light;

  --pt-bg: #f4f6fa;
  --pt-surface: #ffffff;
  --pt-surface-2: #eef2f7;
  --pt-text: #0b1220;
  --pt-text-secondary: #172033;
  --pt-text-muted: #334155;
  --pt-border: rgba(15, 23, 42, 0.12);
  --pt-accent: #ea580c;
  --pt-accent-contrast: #ffffff;
  --pt-on-primary: #ffffff;
  --pt-success: #15803d;
  --pt-warning: #b45309;
  --pt-danger: #b91c1c;
  --pt-info: #1d4ed8;

  --pt-table-header-bg: #eef2f7;
  --pt-table-row: #ffffff;
  --pt-table-text: #172033;

  --pt-nav-bg: rgba(255, 255, 255, 0.94);
  --pt-nav-text: #172033;

  --pt-bg-elevated: #ffffff;
  --pt-muted: var(--pt-text-muted);
  --pt-muted-2: #475569;
  --pt-border-strong: rgba(15, 23, 42, 0.22);
  --pt-accent-dim: rgba(234, 88, 12, 0.1);
  --pt-accent-border: rgba(234, 88, 12, 0.4);
  --pt-accent-glow: 0 0 14px rgba(234, 88, 12, 0.12);
  --pt-primary: #1d4ed8;
  --pt-primary-dim: rgba(29, 78, 216, 0.1);
  --pt-primary-border: rgba(29, 78, 216, 0.4);
  --pt-hero-glow: radial-gradient(900px 500px at 20% 0%, rgba(29, 78, 216, 0.08), transparent 60%),
                  radial-gradient(640px 360px at 85% 8%, rgba(234, 88, 12, 0.05), transparent 55%);
  --pt-shadow: 0 10px 32px rgba(15, 23, 42, 0.1);
  --pt-shadow-sm: 0 2px 10px rgba(15, 23, 42, 0.06);
  --pt-input-bg: #ffffff;
  --pt-card-gradient: linear-gradient(180deg, #ffffff, #f8fafc);
  --pt-focus-ring: 0 0 0 3px rgba(29, 78, 216, 0.28);

  --pt-st-pending-bg: #fef3c7;
  --pt-st-pending-fg: #92400e;
  --pt-st-pending-bd: #f59e0b;
  --pt-st-active-bg: #dcfce7;
  --pt-st-active-fg: #166534;
  --pt-st-active-bd: #22c55e;
  --pt-st-suspended-bg: #fee2e2;
  --pt-st-suspended-fg: #991b1b;
  --pt-st-suspended-bd: #ef4444;
  --pt-st-rejected-bg: #e2e8f0;
  --pt-st-rejected-fg: #1e293b;
  --pt-st-rejected-bd: #94a3b8;
  --pt-st-info-bg: #dbeafe;
  --pt-st-info-fg: #1e40af;
  --pt-st-info-bd: #3b82f6;
  --pt-st-expired-bg: #fee2e2;
  --pt-st-expired-fg: #991b1b;
  --pt-st-expired-bd: #ef4444;
  --pt-st-neutral-bg: #e2e8f0;
  --pt-st-neutral-fg: #1e293b;
  --pt-st-neutral-bd: #94a3b8;

  --pt-tp-default-bg: #e2e8f0;
  --pt-tp-default-fg: #1e293b;
  --pt-tp-default-bd: #94a3b8;
  --pt-tp-tmgdk-bg: #cffafe;
  --pt-tp-tmgdk-fg: #0e7490;
  --pt-tp-tmgdk-bd: #06b6d4;
  --pt-tp-tmgd-bg: #ede9fe;
  --pt-tp-tmgd-fg: #5b21b6;
  --pt-tp-tmgd-bd: #8b5cf6;
  --pt-tp-hizmet-bg: #d1fae5;
  --pt-tp-hizmet-fg: #065f46;
  --pt-tp-hizmet-bd: #10b981;
}

/* Legacy bridge for styles.css / older pages */
:root,
[data-theme="dark"] {
  --bg: var(--pt-bg);
  --card: var(--pt-surface);
  --muted: var(--pt-text-muted);
  --text: var(--pt-text);
  --accent: var(--pt-accent);
  --accent2: var(--pt-info);
  --danger: var(--pt-danger);
  --border: var(--pt-border);
}

[data-theme="light"] {
  --bg: var(--pt-bg);
  --card: var(--pt-surface);
  --muted: var(--pt-text-muted);
  --text: var(--pt-text);
  --accent: var(--pt-accent);
  --accent2: var(--pt-primary);
  --danger: var(--pt-danger);
  --border: var(--pt-border);
}

/* Base canvas */
html {
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}
@media screen {
  html[data-theme] body {
    font-family: var(--pt-font);
    background: var(--pt-bg);
    color: var(--pt-text);
    line-height: 1.5;
    letter-spacing: -0.011em;
  }
  html[data-theme] body.pt-ops,
  html[data-theme] body.pt-page {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  html[data-theme] ::selection {
    background: var(--pt-primary-dim);
    color: var(--pt-text);
  }
  html[data-theme] :focus-visible {
    outline: none;
    box-shadow: var(--pt-focus-ring);
  }
}

/* ─── Utility classes for JS renderers (no hardcoded hex in templates) ─── */
.pt-panel {
  background: var(--pt-surface);
  border: 1px solid var(--pt-border);
  color: var(--pt-text-secondary);
  border-radius: var(--pt-radius-sm);
}
.pt-panel-inset {
  background: var(--pt-input-bg);
  border: 1px solid var(--pt-border);
  color: var(--pt-text-secondary);
  border-radius: var(--pt-radius-sm);
}
.pt-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-family: monospace;
  font-weight: 600;
  margin-right: 6px;
}
.pt-chip-primary {
  background: var(--pt-primary-dim);
  color: var(--pt-primary);
  border: 1px solid var(--pt-primary-border);
}
.pt-chip-info {
  background: var(--pt-st-info-bg);
  color: var(--pt-st-info-fg);
  border: 1px solid var(--pt-st-info-bd);
}
.pt-chip-warning {
  background: var(--pt-st-pending-bg);
  color: var(--pt-st-pending-fg);
  border: 1px solid var(--pt-st-pending-bd);
}
.pt-chip-success {
  background: var(--pt-st-active-bg);
  color: var(--pt-st-active-fg);
  border: 1px solid var(--pt-st-active-bd);
}
.pt-chip-danger {
  background: var(--pt-st-suspended-bg);
  color: var(--pt-st-suspended-fg);
  border: 1px solid var(--pt-st-suspended-bd);
}
.pt-chip-violet {
  background: var(--pt-tp-tmgd-bg);
  color: var(--pt-tp-tmgd-fg);
  border: 1px solid var(--pt-tp-tmgd-bd);
}
.pt-text-primary { color: var(--pt-primary); }
.pt-text-info { color: var(--pt-info); }
.pt-text-muted { color: var(--pt-text-muted); }
.pt-text-muted-2 { color: var(--pt-muted-2); }
.pt-text-secondary { color: var(--pt-text-secondary); }
.pt-text-ok { color: var(--pt-success); }
.pt-text-warn { color: var(--pt-warning); }
.pt-text-danger { color: var(--pt-danger); }
.pt-text-accent { color: var(--pt-accent); }
.pt-border-t { border-top: 1px solid var(--pt-border); }
.pt-alert {
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.75rem;
  border: 1px solid transparent;
}
.pt-alert-warn {
  background: var(--pt-st-pending-bg);
  border-color: var(--pt-st-pending-bd);
  color: var(--pt-st-pending-fg);
}
.pt-alert-ok {
  background: var(--pt-st-active-bg);
  border-color: var(--pt-st-active-bd);
  color: var(--pt-st-active-fg);
}
.pt-alert-danger {
  background: var(--pt-st-suspended-bg);
  border-color: var(--pt-st-suspended-bd);
  color: var(--pt-st-suspended-fg);
}
.pt-alert-info {
  background: var(--pt-st-info-bg);
  border-color: var(--pt-st-info-bd);
  color: var(--pt-st-info-fg);
}
.pt-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.75);
}
.pt-modal {
  background: var(--pt-surface);
  color: var(--pt-text);
  border: 1px solid var(--pt-border);
  border-radius: var(--pt-radius);
  padding: 24px;
  max-width: 600px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: var(--pt-shadow);
}
.pt-modal h3 { color: var(--pt-text); margin: 0; font-size: 1.1rem; }
.pt-modal-close {
  background: none;
  border: none;
  color: var(--pt-text-muted);
  font-size: 1.5rem;
  cursor: pointer;
}
.pt-badge-ok {
  background: var(--pt-st-active-bg);
  color: var(--pt-st-active-fg);
  font-size: 0.7em;
  padding: 1px 5px;
  border-radius: 3px;
  margin-right: 4px;
}
.pt-badge-off {
  background: var(--pt-st-suspended-bg);
  color: var(--pt-st-suspended-fg);
  font-size: 0.7em;
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 4px;
}
.pt-btn-danger-text { color: var(--pt-danger); }

/* Document / print paper — always light, independent of app theme */
#docPreview,
.pt-doc-paper {
  color-scheme: light;
  background: #ffffff;
  color: #111111;
  font-family: "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  letter-spacing: normal;
}