/* ==========================================================================
   BPUTTP Unified 5-Theme System (Dashboard, CTT, Tangki, Surat, Shortener)
   Themes:
     1. dark       — Dark (Dashboard Obsidian + Cyan)
     2. blue-black — Blue-Black (Penomoran Deep Navy + Sky Blue)
     3. blue-white — Blue-White (Penomoran Kemendag Royal Blue + White)
     4. light      — Light (Inventaris Slate + Indigo)
     5. pink       — Pink (Penomoran Rose Blush + Magenta)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DARK THEME (Obsidian + Cyan — Dashboard Default)
   -------------------------------------------------------------------------- */
:root[data-theme="dark"],
:root[data-theme="black"] {
  /* Portal Dashboard Variables */
  --bg-body: #030712;
  --bg-elevated: rgba(6, 13, 28, 0.88);
  --bg-card: rgba(8, 20, 42, 0.78);
  --bg-card-hover: rgba(12, 29, 58, 0.94);
  --bg-modal: #081226;
  --bg-input: rgba(6, 15, 32, 0.95);
  --border-subtle: rgba(56, 189, 248, 0.24);
  --border-strong: rgba(0, 240, 255, 0.58);
  --text-main: #f0f9ff;
  --text-secondary: #bae6fd;
  --text-muted: #7dd3fc;
  --text-dim: #64748b;
  --reactor-color: #00f0ff;
  --reactor-glow: rgba(0, 240, 255, 0.32);

  /* Inventaris (CTT & Tangki) Variables */
  --bg-primary: #030712;
  --bg-surface: #091326;
  --bg-surface-secondary: #0f1f3d;
  --border-color: rgba(56, 189, 248, 0.24);
  --border-focus: #00f0ff;
  --text-light: #64748b;
  --primary-50: rgba(0, 240, 255, 0.1);
  --primary-100: rgba(0, 240, 255, 0.18);
  --primary-500: #0ea5e9;
  --primary-600: #0284c7;
  --primary-700: #38bdf8;

  /* Penomoran Surat Variables */
  --bs-body-bg: #030712;
  --bs-body-color: #f0f9ff;
  --bg-app: #030712;
  --bg-surface-elevated: #0d1b36;
  --bg-surface-subtle: #060d1c;
  --bg-surface-hover: #13274d;
  --border-color-hover: #38bdf8;
  --border-color-focus: #00f0ff;
  --text-subtle: #64748b;
  --primary-navy: #0284c7;
  --primary-blue: #00f0ff;
  --primary-hover: #38bdf8;
  --primary-light: rgba(0, 240, 255, 0.16);
  --accent-blue: #00f0ff;
  --btn-primary-bg: #0284c7;
  --btn-primary-hover: #0369a1;
  --btn-primary-text: #ffffff;
  --table-bg: #091326;
  --table-header-bg: #0f1f3d;
  --table-header-color: #bae6fd;
  --table-row-hover: #112445;
  --table-row-striped: #0b172e;
  --table-border: rgba(56, 189, 248, 0.22);
  --table-text: #f0f9ff;
  --input-bg: #060d1c;
  --input-border: rgba(56, 189, 248, 0.3);
  --input-text: #f0f9ff;
  --input-placeholder: #64748b;
}

/* --------------------------------------------------------------------------
   2. BLUE-BLACK THEME (Deep Navy + Sky Blue — from Penomoran Surat)
   -------------------------------------------------------------------------- */
:root[data-theme="blue-black"] {
  /* Portal Dashboard Variables */
  --bg-body: #0b1120;
  --bg-elevated: rgba(19, 29, 49, 0.9);
  --bg-card: rgba(19, 29, 49, 0.86);
  --bg-card-hover: rgba(26, 39, 68, 0.96);
  --bg-modal: #131d31;
  --bg-input: #0f172a;
  --border-subtle: #2a3a58;
  --border-strong: #38bdf8;
  --text-main: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
  --text-dim: #64748b;
  --reactor-color: #38bdf8;
  --reactor-glow: rgba(56, 189, 248, 0.25);

  /* Inventaris (CTT & Tangki) Variables */
  --bg-primary: #0b1120;
  --bg-surface: #131d31;
  --bg-surface-secondary: #1a2744;
  --border-color: #2a3a58;
  --border-focus: #38bdf8;
  --text-light: #64748b;
  --primary-50: rgba(56, 189, 248, 0.12);
  --primary-100: rgba(56, 189, 248, 0.2);
  --primary-500: #0284c7;
  --primary-600: #0284c7;
  --primary-700: #38bdf8;

  /* Penomoran Surat Variables */
  --bs-body-bg: #0b1120;
  --bs-body-color: #f8fafc;
  --bg-app: #0b1120;
  --bg-surface-elevated: #1a2744;
  --bg-surface-subtle: #0f172a;
  --bg-surface-hover: #1e2e4f;
  --border-color-hover: #3b5078;
  --border-color-focus: #38bdf8;
  --text-subtle: #94a3b8;
  --primary-navy: #0284c7;
  --primary-blue: #38bdf8;
  --primary-hover: #0ea5e9;
  --primary-light: rgba(56, 189, 248, 0.18);
  --accent-blue: #38bdf8;
  --btn-primary-bg: #0284c7;
  --btn-primary-hover: #0369a1;
  --btn-primary-text: #ffffff;
  --table-bg: #131d31;
  --table-header-bg: #1a2744;
  --table-header-color: #f8fafc;
  --table-row-hover: #1c2b48;
  --table-row-striped: #16223b;
  --table-border: #2a3a58;
  --table-text: #f8fafc;
  --input-bg: #0f172a;
  --input-border: #334155;
  --input-text: #f8fafc;
  --input-placeholder: #64748b;
}

/* --------------------------------------------------------------------------
   3. BLUE-WHITE THEME (Kemendag Royal Blue + White — from Penomoran Surat)
   -------------------------------------------------------------------------- */
:root[data-theme="blue-white"] {
  /* Portal Dashboard Variables */
  --bg-body: #f4f6f9;
  --bg-elevated: rgba(255, 255, 255, 0.92);
  --bg-card: #ffffff;
  --bg-card-hover: #f8fafc;
  --bg-modal: #ffffff;
  --bg-input: #ffffff;
  --border-subtle: #cbd5e1;
  --border-strong: #005792;
  --text-main: #0f172a;
  --text-secondary: #1e293b;
  --text-muted: #475569;
  --text-dim: #64748b;
  --reactor-color: #005792;
  --reactor-glow: rgba(0, 87, 146, 0.18);

  /* Inventaris (CTT & Tangki) Variables */
  --bg-primary: #f4f6f9;
  --bg-surface: #ffffff;
  --bg-surface-secondary: #f1f5f9;
  --border-color: #e2e8f0;
  --border-focus: #005792;
  --text-light: #94a3b8;
  --primary-50: #e0f2fe;
  --primary-100: #bae6fd;
  --primary-500: #005792;
  --primary-600: #003865;
  --primary-700: #002447;

  /* Penomoran Surat Variables */
  --bs-body-bg: #f4f6f9;
  --bs-body-color: #0f172a;
  --bg-app: #f4f6f9;
  --bg-surface-elevated: #ffffff;
  --bg-surface-subtle: #f8fafc;
  --bg-surface-hover: #f1f5f9;
  --border-color-hover: #cbd5e1;
  --border-color-focus: #005792;
  --text-subtle: #94a3b8;
  --primary-navy: #002b5b;
  --primary-blue: #005792;
  --primary-hover: #001f3f;
  --primary-light: #e0f2fe;
  --accent-blue: #0284c7;
  --btn-primary-bg: #003865;
  --btn-primary-hover: #002447;
  --btn-primary-text: #ffffff;
  --table-bg: #ffffff;
  --table-header-bg: #f1f5f9;
  --table-header-color: #1e293b;
  --table-row-hover: #f8fafc;
  --table-row-striped: #fcfdfe;
  --table-border: #e2e8f0;
  --table-text: #0f172a;
  --input-bg: #ffffff;
  --input-border: #cbd5e1;
  --input-text: #0f172a;
  --input-placeholder: #94a3b8;
}

/* --------------------------------------------------------------------------
   4. LIGHT THEME (Slate + Indigo — Inventaris Light)
   -------------------------------------------------------------------------- */
:root[data-theme="light"],
:root[data-theme="inventory"] {
  /* Portal Dashboard Variables */
  --bg-body: #f8fafc;
  --bg-elevated: rgba(255, 255, 255, 0.94);
  --bg-card: #ffffff;
  --bg-card-hover: #f8fafc;
  --bg-modal: #ffffff;
  --bg-input: #f8fafc;
  --border-subtle: #e2e8f0;
  --border-strong: #6366f1;
  --text-main: #0f172a;
  --text-secondary: #334155;
  --text-muted: #64748b;
  --text-dim: #94a3b8;
  --reactor-color: #4f46e5;
  --reactor-glow: rgba(99, 102, 241, 0.2);

  /* Inventaris (CTT & Tangki) Native Variables */
  --bg-primary: #f8fafc;
  --bg-surface: #ffffff;
  --bg-surface-secondary: #f1f5f9;
  --border-color: #e2e8f0;
  --border-focus: #6366f1;
  --text-light: #94a3b8;
  --primary-50: #eef2ff;
  --primary-100: #e0e7ff;
  --primary-500: #6366f1;
  --primary-600: #4f46e5;
  --primary-700: #4338ca;

  /* Penomoran Surat Variables */
  --bs-body-bg: #f8fafc;
  --bs-body-color: #0f172a;
  --bg-app: #f8fafc;
  --bg-surface-elevated: #ffffff;
  --bg-surface-subtle: #f1f5f9;
  --bg-surface-hover: #eef2ff;
  --border-color-hover: #c7d2fe;
  --border-color-focus: #4f46e5;
  --text-subtle: #94a3b8;
  --primary-navy: #4338ca;
  --primary-blue: #4f46e5;
  --primary-hover: #3730a3;
  --primary-light: #e0e7ff;
  --accent-blue: #6366f1;
  --btn-primary-bg: #4f46e5;
  --btn-primary-hover: #4338ca;
  --btn-primary-text: #ffffff;
  --table-bg: #ffffff;
  --table-header-bg: #f8fafc;
  --table-header-color: #334155;
  --table-row-hover: #f1f5f9;
  --table-row-striped: #fcfdff;
  --table-border: #e2e8f0;
  --table-text: #0f172a;
  --input-bg: #ffffff;
  --input-border: #cbd5e1;
  --input-text: #0f172a;
  --input-placeholder: #94a3b8;
  --badge-naskah-bg: #eef2ff;
  --badge-naskah-text: #4338ca;
  --badge-naskah-border: #c7d2fe;
  --badge-no-surat-text: #4f46e5;
}

/* --------------------------------------------------------------------------
   5. PINK THEME (Rose Blush + Magenta — from Penomoran Surat)
   -------------------------------------------------------------------------- */
:root[data-theme="pink"] {
  /* Portal Dashboard Variables */
  --bg-body: #fce7f3;
  --bg-elevated: rgba(255, 245, 249, 0.92);
  --bg-card: #ffffff;
  --bg-card-hover: #fff5f9;
  --bg-modal: #ffffff;
  --bg-input: #ffffff;
  --border-subtle: #f472b6;
  --border-strong: #db2777;
  --text-main: #1f2937;
  --text-secondary: #831843;
  --text-muted: #9d174d;
  --text-dim: #be185d;
  --reactor-color: #db2777;
  --reactor-glow: rgba(219, 39, 119, 0.22);

  /* Inventaris (CTT & Tangki) Variables */
  --bg-primary: #fce7f3;
  --bg-surface: #ffffff;
  --bg-surface-secondary: #fdf2f8;
  --border-color: #f472b6;
  --border-focus: #db2777;
  --text-light: #f472b6;
  --primary-50: #fdf2f8;
  --primary-100: #fbcfe8;
  --primary-500: #ec4899;
  --primary-600: #db2777;
  --primary-700: #be185d;

  /* Penomoran Surat Variables */
  --bs-body-bg: #fce7f3;
  --bs-body-color: #1f2937;
  --bg-app: #fce7f3;
  --bg-surface-elevated: #fff5f9;
  --bg-surface-subtle: #fdf2f8;
  --bg-surface-hover: #fbcfe8;
  --border-color-hover: #ec4899;
  --border-color-focus: #db2777;
  --text-subtle: #9ca3af;
  --primary-navy: #db2777;
  --primary-blue: #ec4899;
  --primary-hover: #be185d;
  --primary-light: #fce7f3;
  --accent-blue: #f43f5e;
  --btn-primary-bg: #ec4899;
  --btn-primary-hover: #db2777;
  --btn-primary-text: #ffffff;
  --table-bg: #ffffff;
  --table-header-bg: #fbcfe8;
  --table-header-color: #831843;
  --table-row-hover: #fdf2f8;
  --table-row-striped: #fff5f9;
  --table-border: #f472b6;
  --table-text: #1f2937;
  --input-bg: #ffffff;
  --input-border: #f472b6;
  --input-text: #1f2937;
  --input-placeholder: #f472b6;
}

/* ==========================================================================
   Cross-App Element Adaptations
   ========================================================================== */
:root[data-theme="dark"] .card-header,
:root[data-theme="black"] .card-header,
:root[data-theme="blue-black"] .card-header,
:root[data-theme="dark"] .modal-header,
:root[data-theme="black"] .modal-header,
:root[data-theme="blue-black"] .modal-header,
:root[data-theme="dark"] .table th,
:root[data-theme="black"] .table th,
:root[data-theme="blue-black"] .table th {
  background: var(--bg-surface-secondary) !important;
  color: var(--text-main) !important;
}

:root[data-theme="pink"] .card-header,
:root[data-theme="pink"] .modal-header,
:root[data-theme="pink"] .table th {
  background: #fbcfe8 !important;
  color: #831843 !important;
}

:root[data-theme="dark"] .table tbody tr:hover,
:root[data-theme="black"] .table tbody tr:hover,
:root[data-theme="blue-black"] .table tbody tr:hover,
:root[data-theme="pink"] .table tbody tr:hover {
  background: var(--bg-surface-secondary) !important;
}

:root[data-theme="dark"] .signature-container,
:root[data-theme="black"] .signature-container,
:root[data-theme="blue-black"] .signature-container {
  background: var(--bg-surface-secondary) !important;
  border-color: var(--border-color) !important;
}

:root[data-theme="dark"] .form-control,
:root[data-theme="black"] .form-control,
:root[data-theme="blue-black"] .form-control,
:root[data-theme="dark"] .form-select,
:root[data-theme="black"] .form-select,
:root[data-theme="blue-black"] .form-select,
:root[data-theme="dark"] .search-input,
:root[data-theme="black"] .search-input,
:root[data-theme="blue-black"] .search-input {
  background: var(--input-bg) !important;
  color: var(--text-main) !important;
  border-color: var(--border-color) !important;
}

:root[data-theme="dark"] .theme-icon-dark,
:root[data-theme="black"] .theme-icon-dark,
:root[data-theme="blue-black"] .theme-icon-dark {
  display: block !important;
}

:root[data-theme="light"] .theme-icon-light,
:root[data-theme="inventory"] .theme-icon-light,
:root[data-theme="blue-white"] .theme-icon-light {
  display: block !important;
}

:root[data-theme="light"] .surat-nav-icon,
:root[data-theme="inventory"] .surat-nav-icon,
:root[data-theme="light"] .surat-icon-badge,
:root[data-theme="inventory"] .surat-icon-badge,
:root[data-theme="light"] .modal-icon-badge,
:root[data-theme="inventory"] .modal-icon-badge {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
}

:root[data-theme="dark"] .surat-nav-icon,
:root[data-theme="black"] .surat-nav-icon,
:root[data-theme="dark"] .surat-icon-badge,
:root[data-theme="black"] .surat-icon-badge,
:root[data-theme="dark"] .modal-icon-badge,
:root[data-theme="black"] .modal-icon-badge {
  background: linear-gradient(135deg, #0284c7 0%, #00f0ff 100%) !important;
}

:root[data-theme="blue-black"] .surat-nav-icon,
:root[data-theme="blue-black"] .surat-icon-badge,
:root[data-theme="blue-black"] .modal-icon-badge {
  background: linear-gradient(135deg, #0284c7 0%, #38bdf8 100%) !important;
}

/* ==========================================================================
   Global 5-Theme Floating Selector Menu
   ========================================================================== */
.bputtp-theme-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.bputtp-theme-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 185px;
  background: var(--bg-surface, #0f172a);
  border: 1px solid var(--border-color, rgba(148, 163, 184, 0.3));
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.bputtp-theme-menu[hidden] {
  display: none !important;
}

.bputtp-theme-opt {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 7px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-main, #f8fafc);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}
.bputtp-theme-opt:hover {
  background: var(--bg-surface-secondary, rgba(148, 163, 184, 0.15));
}
.bputtp-theme-opt.active {
  background: var(--primary-100, rgba(56, 189, 248, 0.2));
  color: var(--primary-600, #38bdf8);
}

.bputtp-swatch {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.swatch-dark, .swatch-black { background: linear-gradient(135deg, #030712 45%, #00f0ff 100%); }
.swatch-blue-black { background: linear-gradient(135deg, #0b1120 45%, #0284c7 100%); }
.swatch-blue-white { background: linear-gradient(135deg, #f4f6f9 45%, #003865 100%); border-color: #94a3b8; }
.swatch-light, .swatch-inventory { background: linear-gradient(135deg, #f8fafc 45%, #6366f1 100%); border-color: #94a3b8; }
.swatch-pink { background: linear-gradient(135deg, #fce7f3 45%, #ec4899 100%); border-color: #f472b6; }