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

/* ========================================================
   PORTAL BUJM - LINEAR & VERCEL INSPRIRED DESIGN SYSTEM
   - High-Density Compact Typography (Small, Sharp & Legible)
   - Pixel-Perfect Neutral Surface & Crisp Borders
   - Compact Micro-Spacing & Micro-Interactions
   ======================================================== */

:root {
  --bg-main: #f8fafc;
  --bg-card: #ffffff;
  --border-subtle: #e2e8f0;

  /* FONT STACK */
  --font-main: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-heading: var(--font-main);
  --font-body: var(--font-main);
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* COMPACT TYPE SCALE (PREFERENSI FONT KECIL & TAJAM) */
  --text-size-display: 13.5px; /* Brand Hero Title */
  --text-size-xl: 12.5px;    /* Page Header, Bab Title */
  --text-size-lg: 11.5px;    /* Card & Section Header, Modal Title */
  --text-size-md: 11px;      /* Body, Data Table, Button, Form Input */
  --text-size-sm: 10px;      /* Secondary Text, Form Label, Hint, Metadata */
  --text-size-xs: 9.5px;     /* Badges, Pills, Footnotes */
  --text-size-code: 10.5px;  /* Terminal Console & Code Block */

  /* FONT WEIGHTS */
  --weight-black: 800;
  --weight-bold: 700;
  --weight-semibold: 600;
  --weight-medium: 500;
  --weight-regular: 400;

  /* PALET WARNA TEKS WCAG 2.1 AA COMPLIANT */
  --text-primary: #0f172a;    /* Slate-900: Kontras 16.1:1 */
  --text-secondary: #475569;  /* Slate-600: Kontras 7.0:1 */
  --text-tertiary: #64748b;   /* Slate-500: Kontras 4.6:1 */
  --text-main: var(--text-primary);
  --text-muted: var(--text-secondary);

  /* PALET AKSEN SOFT & ACTION */
  --primary-accent: #4f46e5;
  --primary-hover: #4338ca;
  --sky-accent: #0284c7;
  --emerald-accent: #059669;
  --amber-accent: #d97706;
  --rose-accent: #dc2626;

  --pastel-lavender: #eef2ff;
  --pastel-lavender-dark: #4338ca;
  --pastel-mint: #ecfdf5;
  --pastel-mint-dark: #047857;
  --pastel-rose: #fff1f2;
  --pastel-rose-dark: #be123c;
  --pastel-amber: #fffbeb;
  --pastel-amber-dark: #b45309;
  --pastel-sky: #f0f9ff;
  --pastel-sky-dark: #0369a1;
  --pastel-purple: #f5f3ff;
  --pastel-purple-dark: #6d28d9;
  
  /* RADIUS BERTINGKAT (COMPACT ELEGANT) */
  --radius-xl: 12px;
  --radius-card: 10px;
  --radius-button: 7px;
  --radius-sm: 6px;
  --radius-pill: 9999px;

  /* SHADOW ELEVATION SYSTEM (LINEAR SUBTLE DEPTH) */
  --shadow-2xs: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
  --shadow-soft: 0 1px 3px 0 rgba(15, 23, 42, 0.05), 0 1px 2px -1px rgba(15, 23, 42, 0.03);
  --shadow-hover: 0 4px 8px -2px rgba(15, 23, 42, 0.06), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
  --shadow-focus: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

/* STANDAR ASET VISUAL: LUCIDE ICONS (PRECISION 1.65px) */
i[data-lucide], svg.lucide {
  stroke-width: 1.65px !important;
  vertical-align: middle;
  display: inline-block;
  transition: transform 0.12s ease, stroke 0.12s ease;
}

/* Global Ultra-Sharp Image Rendering (Pertahankan ketajaman asli foto di semua menu) */
img {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: high-quality;
}
img.object-cover, img.object-contain {
  backface-visibility: hidden;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

body {
  background-color: var(--bg-main);
  color: var(--text-main);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
  height: 100vh;
}

/* Watermark Overlay (Bab 2) */
#watermark-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 999;
  opacity: 0.045;
  background-repeat: repeat;
  background-size: 320px 180px;
  display: block;
}

/* Sidebar Collapse / Hide Animation */
#app-sidebar {
  transition: margin-left 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
}

#app-sidebar.sidebar-hidden {
  margin-left: -15rem !important; /* -240px for w-60 */
  opacity: 0;
  pointer-events: none;
}

/* Classic Samsung GSPN Splitter Toggle Tab Handle */
.gspn-splitter-btn {
  position: absolute;
  left: 0;
  top: 48%;
  transform: translateY(-50%);
  width: 11px;
  height: 52px;
  background: linear-gradient(90deg, #f8fafc 0%, #e2e8f0 100%);
  border: 1px solid #b5c2d1;
  border-left: none;
  border-radius: 0 4px 4px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
  transition: background 0.15s, border-color 0.15s;
  z-index: 40;
}

.gspn-splitter-btn:hover {
  background: linear-gradient(90deg, #ffffff 0%, #cbd5e1 100%);
  border-color: #94a3b8;
}

.gspn-splitter-btn:hover svg {
  fill: #002d70;
}

/* Right-sided Splitter Button (Handle for Bill Preview Drawer) */
.gspn-splitter-btn-right {
  position: absolute;
  right: 0;
  top: 48%;
  transform: translateY(-50%);
  width: 12px;
  height: 54px;
  background: linear-gradient(270deg, #f8fafc 0%, #e2e8f0 100%);
  border: 1px solid #b5c2d1;
  border-right: none;
  border-radius: 4px 0 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  box-shadow: -1px 1px 3px rgba(0, 0, 0, 0.1);
  transition: background 0.15s, border-color 0.15s;
  z-index: 40;
}

.gspn-splitter-btn-right:hover {
  background: linear-gradient(270deg, #ffffff 0%, #cbd5e1 100%);
  border-color: #94a3b8;
}

.gspn-splitter-btn-right:hover svg {
  fill: #002d70;
}

/* Matrix Active Selected Cell Highlight */
.biz-cell-selected {
  outline: 2px solid #002d70 !important;
  outline-offset: -2px !important;
  background-color: #fef08a !important; /* warm energetic highlight */
  color: #002d70 !important;
  font-weight: 800 !important;
  box-shadow: inset 0 0 4px rgba(0, 45, 112, 0.25) !important;
}

/* Business Matrix Interactive Cell (Perfect 4-sided Inset Outline on Hover) */
.biz-matrix-cell {
  cursor: pointer !important;
  transition: outline 0.08s ease, background-color 0.08s ease !important;
}

.biz-matrix-cell:hover:not(.biz-cell-selected) {
  outline: 2px solid #2563eb !important;
  outline-offset: -2px !important;
}

/* Soft Cards & Minimalist Components */
.pastel-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  transition: all 0.2s ease-in-out;
}

.pastel-card:hover {
  box-shadow: var(--shadow-hover);
}

/* Soft Pastel Chips & Badges */
.badge-lavender { background-color: var(--pastel-lavender); color: var(--pastel-lavender-dark); }
.badge-mint { background-color: var(--pastel-mint); color: var(--pastel-mint-dark); }
.badge-rose { background-color: var(--pastel-rose); color: var(--pastel-rose-dark); }
.badge-amber { background-color: var(--pastel-amber); color: var(--pastel-amber-dark); }
.badge-sky { background-color: var(--pastel-sky); color: var(--pastel-sky-dark); }
.badge-purple { background-color: var(--pastel-purple); color: var(--pastel-purple-dark); }

/* Minimalist Nav Icons */
.nav-icon-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  color: #64748b;
  font-size: 11px !important;
  font-weight: 500;
  transition: all 0.18s ease;
  cursor: pointer;
  border: 1px solid transparent;
}

.nav-icon-btn:hover {
  background-color: #f1f5f9;
  color: #1e293b;
}

.nav-icon-btn.active {
  background-color: #ede9fe;
  color: #6366f1;
  font-weight: 600;
  border-color: #ddd6fe;
}

/* WhatsApp Style Chat (Bab 13) */
.wa-container {
  background-color: #efeae2;
  background-image: radial-gradient(#d4cebf 0.75px, transparent 0.75px);
  background-size: 16px 16px;
}

.chat-bubble-user {
  background-color: #ffffff;
  color: #111827;
  border-radius: 14px 14px 14px 2px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

.chat-bubble-admin {
  background-color: #d9fdd3;
  color: #111827;
  border-radius: 14px 14px 2px 14px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

/* ==========================================================================
   WORLD-CLASS PROFESSIONAL SCROLLBAR ARCHITECTURE
   - Global standard: 8px sleek, rounded pill, smooth hover
   - Enterprise Data Tables: 10px high-contrast thumb with comfortable grab target
   - Left Navigation & Sidebar: 6px unobtrusive sleek scrollbar
   - Modals & Forms: 7px clean minimal scrollbar
   ========================================================================== */

* {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}

/* 1. Global Default Webkit Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background-color: #cbd5e1;
  border-radius: 9999px;
  border: 2px solid transparent;
  background-clip: content-box;
  transition: background-color 0.2s ease;
}
::-webkit-scrollbar-thumb:hover {
  background-color: #94a3b8;
}

/* Smooth modal transitions */
.modal-backdrop {
  backdrop-filter: blur(4px);
  background-color: rgba(15, 23, 42, 0.35);
}

/* Wide Data Table with Both Horizontal & Vertical Scroll (Bab 3 & Dashboard) */
.gspn-table-container,
#biz-matrix-table-container {
  overflow-x: auto !important;
  overflow-y: auto !important;
  flex: 1 1 0% !important;
  min-height: 0 !important;
  height: 100% !important;
  max-width: 100%;
  border-radius: 8px;
  background-color: #ffffff;
  position: relative;
  scrollbar-width: auto;
  scrollbar-color: #94a3b8 #f1f5f9;
}

#biz-matrix-table-container::-webkit-scrollbar,
.gspn-table-container::-webkit-scrollbar {
  width: 10px !important;
  height: 10px !important;
}

#biz-matrix-table-container::-webkit-scrollbar-track,
.gspn-table-container::-webkit-scrollbar-track {
  background: #f8fafc !important;
  border-radius: 6px;
  border: 1px solid #edf2f7;
}

#biz-matrix-table-container::-webkit-scrollbar-thumb,
.gspn-table-container::-webkit-scrollbar-thumb {
  background-color: #94a3b8 !important;
  border-radius: 6px !important;
  border: 2px solid #f8fafc !important;
  min-width: 40px !important;
  min-height: 40px !important;
}

#biz-matrix-table-container::-webkit-scrollbar-thumb:hover,
.gspn-table-container::-webkit-scrollbar-thumb:hover {
  background-color: #64748b !important;
}

.gspn-table-container table {
  border-collapse: separate;
  border-spacing: 0;
  width: max-content;
  font-family: var(--font-main) !important;
  font-size: var(--text-size-md) !important;
  font-variant-numeric: tabular-nums !important;
}

/* Sticky Header pinned at top without overlap glitch */
.gspn-table-container thead th {
  position: sticky !important;
  top: 0 !important;
  z-index: 20 !important;
  font-family: var(--font-main) !important;
  font-size: var(--text-size-md) !important;
  font-weight: var(--weight-medium) !important;
  color: var(--text-secondary) !important;
  letter-spacing: -0.01em !important;
  background-color: #f8fafc !important;
  border-bottom: 2px solid #e2e8f0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.gspn-table-container tbody td {
  font-family: var(--font-main) !important;
  font-size: var(--text-size-md) !important;
  font-weight: var(--weight-regular) !important;
  color: var(--text-primary) !important;
  line-height: 1.35 !important;
}

/* Universal Permitted Data Scroll Area (Tables, Chat, Grids) */
.data-scroll-area {
  overflow-x: auto !important;
  overflow-y: auto !important;
  flex: 1 1 0% !important;
  min-height: 0 !important;
  height: 100% !important;
  max-width: 100%;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}

.data-scroll-area::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
}

.data-scroll-area::-webkit-scrollbar-track {
  background: transparent;
}

.data-scroll-area::-webkit-scrollbar-thumb {
  background-color: #cbd5e1;
  border-radius: 9999px;
  border: 2px solid transparent;
  background-clip: content-box;
}

.data-scroll-area::-webkit-scrollbar-thumb:hover {
  background-color: #94a3b8;
}

/* Left Navigation & Sidebar Scrollbar (6px Sleek Minimal) */
#app-sidebar::-webkit-scrollbar,
#sidebar-default-nav::-webkit-scrollbar,
#sidebar-kpi-nav::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
}
#app-sidebar::-webkit-scrollbar-track,
#sidebar-default-nav::-webkit-scrollbar-track,
#sidebar-kpi-nav::-webkit-scrollbar-track {
  background: transparent;
}
#app-sidebar::-webkit-scrollbar-thumb,
#sidebar-default-nav::-webkit-scrollbar-thumb,
#sidebar-kpi-nav::-webkit-scrollbar-thumb {
  background-color: #cbd5e1;
  border-radius: 9999px;
}
#app-sidebar::-webkit-scrollbar-thumb:hover,
#sidebar-default-nav::-webkit-scrollbar-thumb:hover,
#sidebar-kpi-nav::-webkit-scrollbar-thumb:hover {
  background-color: #94a3b8;
}

.data-scroll-area thead th {
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
  background-color: #f1f5f9 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* ========================================================
   STANDAR SISTEM TIPOGRAFI, KOMPONEN & KONTROL LINEAR
   (Compact, High-Density, Small & Ultra-Legible)
   ======================================================== */

/* Tag Defaults (Font Kecil, Rapi, & Tajam Tanpa Terkecuali) */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--text-primary);
  letter-spacing: -0.015em;
}

h1 { font-size: 13px !important; line-height: 1.25 !important; font-weight: 700; }
h2 { font-size: 12.5px !important; line-height: 1.25 !important; font-weight: 700; }
h3 { font-size: 11.5px !important; line-height: 1.3 !important; font-weight: 600; }
h4 { font-size: 11px !important; line-height: 1.35 !important; font-weight: 600; }
h5 { font-size: 10.5px !important; line-height: 1.35 !important; font-weight: 600; }
h6 { font-size: 10px !important; line-height: 1.35 !important; font-weight: 600; }

p, span, div, a, li, dd, dt, small, th, td {
  font-family: var(--font-main);
  font-size: 11px;
}

/* Outlook Email Canvas Scoped Font Rules (Visual WYSIWYG Editor & Stage 4 Preview) */
#page-setting-body-editor,
#stage4-email-body-content {
  font-family: Arial, Helvetica, sans-serif !important;
}

#page-setting-body-editor p,
#page-setting-body-editor div,
#page-setting-body-editor b,
#page-setting-body-editor strong,
#page-setting-body-editor i,
#page-setting-body-editor em,
#page-setting-body-editor u,
#page-setting-body-editor a,
#page-setting-body-editor span:not([data-tag]),
#stage4-email-body-content p,
#stage4-email-body-content div,
#stage4-email-body-content b,
#stage4-email-body-content strong,
#stage4-email-body-content i,
#stage4-email-body-content em,
#stage4-email-body-content u,
#stage4-email-body-content a,
#stage4-email-body-content span:not([data-tag]) {
  font-size: inherit;
  font-family: inherit;
}

label {
  font-family: var(--font-main);
  font-size: 10.5px !important;
}

button {
  font-family: var(--font-main);
  font-size: 10.5px !important;
}

/* Kolom Isian Seragam (Arial - Sesuai Tema Create New ID GSPN) */
input,
select,
textarea,
.gspn-form-input,
.gspn-form-select,
.theme-form-input {
  font-family: Arial, 'Inter', sans-serif !important;
  font-size: 10.5px;
}

input::placeholder,
textarea::placeholder {
  font-family: Arial, 'Inter', sans-serif !important;
}

/* Monospace & Code Realization (Linear / JetBrains Mono) */
code, pre, kbd, samp, .font-mono {
  font-family: var(--font-mono) !important;
  font-variant-numeric: tabular-nums !important;
}

/* Pengecualian: Kolom isian harus tetap seragam Arial meskipun ada kelas font-mono */
input.font-mono,
select.font-mono,
textarea.font-mono:not(#robot-script-editor) {
  font-family: Arial, 'Inter', sans-serif !important;
}

#robot-script-editor {
  font-family: var(--font-mono) !important;
}

/* Helper Utilities */
.font-heading { font-family: var(--font-heading) !important; }
.font-body { font-family: var(--font-body) !important; }

/* 1. Brand & Header Bar Atas */
.theme-brand-title {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.theme-brand-sub {
  font-family: var(--font-main);
  font-size: 10.5px;
  font-weight: 400;
  color: var(--text-secondary);
  line-height: 1.2;
}

/* 2. Judul Bab & Subjudul Halaman (Semua Bab 1 - 16) */
.theme-page-header {
  margin-bottom: 0.5rem;
}

.theme-page-title {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.015em;
  line-height: 1.25;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.theme-page-desc {
  font-family: var(--font-main);
  font-size: 11px;
  font-weight: 400;
  color: var(--text-secondary);
  line-height: 1.35;
  margin-top: 1px;
}

/* 3. Menu Sidebar & Submenu */
.theme-nav-group-title {
  font-family: var(--font-main);
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
}

.nav-icon-btn, .theme-nav-item {
  font-family: var(--font-main);
  font-size: 11px;
  font-weight: 400;
  color: var(--text-secondary);
  border-radius: 6px;
  padding: 4px 8px;
  gap: 7px;
  min-height: 29px;
  height: 29px;
  display: flex;
  align-items: center;
  transition: all 0.12s ease;
}

.nav-icon-btn:hover, .theme-nav-item:hover {
  background-color: #f1f5f9;
  color: var(--text-primary);
}

.nav-icon-btn.active, .theme-nav-item.active {
  font-weight: 600;
  background-color: #ede9fe;
  color: #4338ca;
  border-color: #ddd6fe;
}

/* 4. Judul Kartu / Container / Panel */
.theme-card-title {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.theme-card-sub {
  font-family: var(--font-main);
  font-size: 10.5px;
  font-weight: 400;
  color: var(--text-secondary);
}

/* 5. Tabel Data (Header & Sel Data) */
.theme-table-th {
  font-family: var(--font-main);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 6px 10px;
  background-color: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.theme-table-td {
  font-family: var(--font-main);
  font-size: 11px;
  font-weight: 400;
  color: var(--text-primary);
  padding: 5.5px 10px;
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
}

.theme-table-code {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

/* 6. Formulir & Input Controls (Compact & Clean) */
.theme-form-label {
  font-family: var(--font-main);
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 3px;
}

.theme-form-input {
  font-family: Arial, 'Inter', sans-serif !important;
  font-size: 11px;
  font-weight: 400;
  color: var(--text-primary);
  background-color: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 0 9px;
  min-height: 30px;
  height: 30px;
  width: 100%;
  transition: all 0.12s ease;
}

.theme-form-input:focus {
  outline: none;
  background-color: #ffffff;
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
}

.theme-form-hint {
  font-family: var(--font-main);
  font-size: 10px;
  font-weight: 400;
  color: var(--text-tertiary);
  margin-top: 2px;
}

/* 7. Tombol / Button Controls (Compact High-Density) */
.theme-btn-primary {
  font-family: var(--font-main);
  font-size: 11px;
  font-weight: 600;
  background-color: #4f46e5;
  color: #ffffff;
  padding: 0 12px;
  min-height: 30px;
  height: 30px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  transition: all 0.12s ease;
  box-shadow: 0 1px 2px rgba(79, 70, 229, 0.2);
  border: 1px solid transparent;
}

.theme-btn-primary:hover {
  background-color: #4338ca;
  box-shadow: 0 2px 5px rgba(79, 70, 229, 0.3);
}

.theme-btn-primary:active {
  transform: scale(0.98);
}

.theme-btn-secondary {
  font-family: Arial, 'Inter', sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  background: linear-gradient(180deg, #ffffff 0%, #e2e8f0 100%);
  color: #1e293b;
  border: 1px solid #94a3b8;
  padding: 0 10px;
  min-height: 25px;
  height: 25px;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  transition: all 0.12s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.theme-btn-secondary:hover {
  background: #ffffff;
  border-color: #64748b;
  color: #002d70;
}

.theme-btn-secondary:active {
  background: #cbd5e1;
  transform: translateY(1px);
}

.theme-btn-secondary i,
.theme-btn-secondary svg,
.theme-btn-secondary [data-lucide] {
  color: #475569;
  transition: color 0.12s ease;
}

.theme-btn-secondary:hover i,
.theme-btn-secondary:hover svg,
.theme-btn-secondary:hover [data-lucide] {
  color: #002d70;
}

.theme-btn-crud {
  font-family: var(--font-main);
  font-size: 10.5px;
  font-weight: 500;
  padding: 0 8px;
  min-height: 25px;
  height: 25px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  gap: 3.5px;
  cursor: pointer;
  transition: all 0.12s ease;
}

/* 8. Badge & Micro Pill */
.theme-badge {
  font-family: var(--font-main);
  font-size: 10px;
  font-weight: 600;
  padding: 1.5px 7px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 3.5px;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

/* 9. Statistik / Metric Counter (Compact & Crisp) */
.theme-stat-number, .stat-value, [class*="stat-number"] {
  font-family: var(--font-heading);
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: var(--text-primary);
  line-height: 1.2 !important;
  letter-spacing: -0.015em !important;
  font-variant-numeric: tabular-nums;
}

.theme-stat-label, .stat-title, [class*="stat-label"] {
  font-family: var(--font-main);
  font-size: 9.5px !important;
  font-weight: 600 !important;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* 10. Sub-tab Pills Navigasi Khusus (Linear Segmented Control) */
.subtab-pill-btn {
  font-family: var(--font-main);
  font-size: 10.5px !important;
  font-weight: 500;
  padding: 0 10px;
  min-height: 27px;
  height: 27px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.12s ease;
  cursor: pointer;
  color: var(--text-secondary);
  border: 1px solid transparent;
}

.subtab-pill-btn:hover {
  color: var(--text-primary);
  background-color: rgba(255, 255, 255, 0.7);
}

.subtab-pill-btn.active {
  font-weight: 600;
  background-color: #ffffff;
  color: #0369a1;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  border-color: #e2e8f0;
}

/* 11. Obsidian Terminal Styling (Linear Engine Console) */
.obsidian-terminal {
  background-color: #090d16;
  border: 1px solid #1e293b;
  border-radius: 9px;
  box-shadow: 0 4px 16px -2px rgba(0, 0, 0, 0.3);
}

.obsidian-terminal-header {
  background-color: #0f172a;
  border-bottom: 1px solid #1e293b;
  padding: 6px 12px;
  height: 30px;
  font-size: 10px !important;
}

.obsidian-terminal-body {
  background-color: #090d16;
  font-family: var(--font-mono) !important;
  font-size: 10.5px !important;
  line-height: 1.45 !important;
  letter-spacing: -0.01em;
  color: #e2e8f0;
}

/* ========================================================
   ATURAN MUTLAK UKURAN FONT KECIL (UNIVERSAL SMALL TYPOGRAPHY)
   - Seluruh font di web wajib ukuran kecil tanpa terkecuali
   ======================================================== */
*, *::before, *::after {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body, main, section, aside, header, footer, article, nav {
  font-size: 11px;
}

/* Override utility kelas Tailwind jika ada teks besar di template */
.text-6xl, .text-5xl, .text-4xl, .text-3xl {
  font-size: 13px !important;
}

.text-2xl {
  font-size: 12.5px !important;
}

.text-xl {
  font-size: 12px !important;
}

.text-lg {
  font-size: 11.5px !important;
}

.text-base {
  font-size: 11px !important;
}

.text-sm {
  font-size: 10.5px !important;
}

.text-xs {
  font-size: 10px !important;
}

.text-2xs {
  font-size: 9px !important;
}

/* Komponen SweetAlert / Toast popup agar font juga tetap proporsional kecil */
.swal2-popup {
  font-size: 11px !important;
}

.swal2-title {
  font-size: 12.5px !important;
  font-weight: 700 !important;
}

.swal2-html-container {
  font-size: 10.5px !important;
}

.swal2-actions button {
  font-size: 10.5px !important;
  padding: 6px 14px !important;
}

/* ========================================================
   10. PANDUAN & ATURAN MUTLAK FIT-PAGE (ZERO WINDOW SCROLL)
   - Seluruh halaman web terkunci pada 100vh tanpa window scrollbar
   - Scrollbar HANYA diizinkan pada area data (.data-scroll-area, .gspn-table-container)
   ======================================================== */
html, body {
  height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important;
}

main {
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

/* Sembunyikan scrollbar di luar wadah resmi (hanya body dan main container induk) */
body::-webkit-scrollbar,
main::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Modal Permitted Scroll Area (Widescreen Dialogs & Modals) */
.modal-scroll-area {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  flex: 1 1 0% !important;
  min-height: 0 !important;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}

.modal-scroll-area::-webkit-scrollbar {
  width: 7px !important;
  height: 7px !important;
}

.modal-scroll-area::-webkit-scrollbar-track {
  background: transparent;
}

.modal-scroll-area::-webkit-scrollbar-thumb {
  background-color: #cbd5e1;
  border-radius: 9999px;
  border: 1px solid transparent;
}

.modal-scroll-area::-webkit-scrollbar-thumb:hover {
  background-color: #94a3b8;
}

/* ==========================================================================
   SAMSUNG GSPN2 (gspn2.samsungcsportal.com) DESIGN SYSTEM & ANIMATIONS
   - Authentic GNB (Global Navigation Bar) Deep Navy #002d70
   - Classic Left Navigation Frame with Gradient Header & Amber Accent
   - Search Toolbar, Pill Capsule Button, Bevel Enterprise Controls
   - Grid Table with Warm Yellow Row Highlight (#fffde7)
   - 1:1 Authentic GSPN2 Login Simulator & Animations
   ========================================================================== */

/* Top Navigation Bar: Samsung GSPN Gradient Blue Header */
.gspn-top-header {
  background: linear-gradient(180deg, #1d529a 0%, #103b75 100%) !important;
  border-bottom: 1px solid #0d2f5e;
  color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  height: 35px !important;
  min-height: 35px !important;
  max-height: 35px !important;
  box-sizing: border-box;
}

.gspn-logo-container {
  display: flex;
  align-items: center;
  gap: 8px;
}

.gspn-samsung-badge {
  font-family: 'Inter', Arial, sans-serif;
  font-size: 12.5px !important;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.gspn-tier1-white {
  background-color: #ffffff !important;
  border-bottom: 1px solid #e2e8f0;
  height: 35px !important;
  min-height: 35px !important;
  max-height: 35px !important;
  box-sizing: border-box;
}

.bujm-logo-text {
  font-family: 'Inter', Arial, sans-serif;
  font-size: 15px !important;
  font-weight: 800;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  user-select: none;
  line-height: 1;
}

.bujm-text-red {
  color: #e11d48 !important; /* Bold crimson red */
  font-family: inherit;
  font-size: inherit !important;
  font-weight: inherit;
  letter-spacing: inherit;
}

.bujm-text-blue {
  color: #002d70 !important; /* Authentic Samsung Deep Blue */
  font-family: inherit;
  font-size: inherit !important;
  font-weight: inherit;
  letter-spacing: inherit;
}

.gspn-portal-badge {
  font-family: 'Inter', Arial, sans-serif;
  font-size: 10px !important;
  font-weight: 700;
  color: #38bdf8; /* Cyan blue accent */
  letter-spacing: 0.05em;
  background: rgba(255, 255, 255, 0.12);
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid rgba(56, 189, 248, 0.4);
}

/* GNB (Global Navigation Bar) Top Tabs */
.gspn-gnb-container {
  display: flex;
  align-items: center;
  height: 100%;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}

.gspn-gnb-tab {
  font-family: Arial, 'Inter', sans-serif;
  font-size: 11px !important;
  font-weight: 700;
  color: #ffffff !important;
  white-space: nowrap !important;
  width: 96px;
  min-width: 96px;
  max-width: 96px;
  justify-content: center;
  padding: 0 5px;
  height: 100%;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
  text-decoration: none;
  cursor: pointer;
  outline: none;
  box-sizing: border-box;
  transition: background-color 0.15s ease;
  border-right: 1px solid rgba(255, 255, 255, 0.15);
}

.gspn-gnb-tab:first-child {
  border-left: 1px solid rgba(255, 255, 255, 0.15);
}

.gspn-gnb-tab:hover,
.gspn-gnb-tab.active {
  color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.18);
}

.gspn-gnb-tab:focus,
.gspn-gnb-tab:active {
  color: #ffffff !important;
  outline: none !important;
  box-shadow: none !important;
}

/* User Common Status & Logout */
.gspn-combar {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px !important;
  color: #e2e8f0;
}

.gspn-btn-logout {
  background: linear-gradient(180deg, #ffffff 0%, #e2e8f0 100%);
  color: #1e293b;
  border: 1px solid #94a3b8;
  border-radius: 3px;
  padding: 2px 7px;
  font-size: 10px !important;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  transition: all 0.12s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.gspn-btn-logout:hover {
  background: #ffffff;
  color: #dc2626;
  border-color: #cbd5e1;
}

/* Left Navigation Frame: b2BLeftMenuScroll */
.gspn-sidebar-wrap {
  background-color: #f9f9f9;
  border-right: 1px solid #d6d6d6;
}

.gspn-sidebar-titlebar {
  background: linear-gradient(180deg, #1d529a 0%, #103b75 100%);
  color: #ffffff;
  font-family: Arial, 'Inter', sans-serif;
  font-size: 11px !important;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 6px 10px;
  border-bottom: 1px solid #0d2f5e;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.gspn-nav-item {
  font-family: Arial, 'Inter', sans-serif;
  font-size: 10.5px !important;
  color: #475569;
  padding: 5px 8px 5px 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-left: 3px solid transparent;
  transition: all 0.12s ease;
  cursor: pointer;
  width: 100%;
  text-align: left;
  border-bottom: 1px solid #f1f5f9;
}

.gspn-nav-item:hover {
  background-color: #eef4fc;
  color: #0056b3;
}

.gspn-nav-item.active {
  background-color: #e0ecfb;
  color: #002d70;
  font-weight: 700 !important;
  border-left-color: #d97815 !important; /* GSPN Official Amber/Orange highlight */
}

.gspn-bullet-square {
  display: inline-block;
  width: 4px;
  height: 4px;
  background-color: #94a3b8;
  margin-right: 2px;
  flex-shrink: 0;
}

.gspn-nav-item.active .gspn-bullet-square,
.gspn-tree-item.active .gspn-bullet-square {
  background-color: #d97815;
}

/* Section Header & Subtitle (.3depth_subtitle) */
.gspn-section-title {
  font-family: Arial, 'Inter', sans-serif;
  font-size: 12px !important;
  font-weight: 700;
  color: #002d70;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.gspn-bullet-blue-box {
  display: inline-block;
  width: 9px;
  height: 9px;
  background: #0066cc;
  border: 1px solid #002d70;
  margin-right: 4px;
  flex-shrink: 0;
}

.gspn-subtitle-orange {
  font-family: Arial, 'Inter', sans-serif;
  font-size: 11px !important;
  font-weight: 700;
  color: #d97815 !important;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.gspn-wildcard-note {
  font-size: 10px !important;
  color: #ea580c !important;
  font-style: italic;
  font-weight: 500;
}

/* Toolbar & Filter Search Box GSPN */
.gspn-inquiry-box {
  background-color: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  padding: 8px 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.gspn-label {
  font-family: Arial, 'Inter', sans-serif;
  font-size: 10.5px !important;
  font-weight: 600;
  color: #334155;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

/* Pill Capsule Search Button (.btn_padT / Search Khas GSPN) */
.gspn-btn-search {
  background: linear-gradient(180deg, #334155 0%, #1e293b 100%);
  color: #ffffff;
  border: 1px solid #0f172a;
  border-radius: 9999px; /* Pill capsule */
  padding: 3px 16px;
  height: 25px;
  font-family: Arial, 'Inter', sans-serif;
  font-size: 10.5px !important;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: all 0.12s ease;
}

.gspn-btn-search:hover {
  background: linear-gradient(180deg, #475569 0%, #1e293b 100%);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  transform: translateY(-0.5px);
}

.gspn-btn-search:active {
  transform: translateY(1px);
}

/* ==========================================================================
   STANDAR BAKU TOMBOL ABU-ABU ENTERPRISE (GSPN BEVEL) - HARGA MATI
   Kombinasi Warna Baku (Identik dengan tombol "Reset Form" Create New ID GSPN):
   - Normal: Latar bevel abu (linear-gradient 180deg, #ffffff 0%, #e2e8f0 100%), border #94a3b8, font #1e293b (Slate-800), ikon #475569
   - Hover: Latar #ffffff, border #64748b, font & ikon berubah ke #002d70 (Samsung Blue)
   - Active: Latar #cbd5e1, translateY(1px)
   ========================================================================== */
.gspn-btn-bevel,
button.gspn-btn-bevel,
a.gspn-btn-bevel,
label.gspn-btn-bevel {
  background: linear-gradient(180deg, #ffffff 0%, #e2e8f0 100%) !important;
  color: #1e293b !important;
  border: 1px solid #94a3b8 !important;
  border-radius: 3px;
  padding: 3px 10px;
  height: 25px;
  font-family: Arial, 'Inter', sans-serif;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: all 0.12s ease;
}

.gspn-btn-bevel:hover,
button.gspn-btn-bevel:hover,
a.gspn-btn-bevel:hover,
label.gspn-btn-bevel:hover {
  background: #ffffff !important;
  border-color: #64748b !important;
  color: #002d70 !important;
}

.gspn-btn-bevel:active,
button.gspn-btn-bevel:active,
a.gspn-btn-bevel:active,
label.gspn-btn-bevel:active {
  background: #cbd5e1 !important;
  transform: translateY(1px);
}

.gspn-btn-bevel i,
.gspn-btn-bevel svg,
.gspn-btn-bevel [data-lucide] {
  color: #475569 !important;
  transition: color 0.12s ease;
}

.gspn-btn-bevel:hover i,
.gspn-btn-bevel:hover svg,
.gspn-btn-bevel:hover [data-lucide] {
  color: #002d70 !important;
}

/* Active Toggle State on Bevel (misal toggle guide foto aktif) */
.gspn-btn-bevel.is-active,
.gspn-btn-bevel.active {
  background: #eff6ff !important;
  border-color: #002d70 !important;
  color: #002d70 !important;
}
.gspn-btn-bevel.is-active i,
.gspn-btn-bevel.is-active svg,
.gspn-btn-bevel.is-active [data-lucide],
.gspn-btn-bevel.active i,
.gspn-btn-bevel.active svg,
.gspn-btn-bevel.active [data-lucide] {
  color: #002d70 !important;
}

/* GSPN Enterprise Primary Blue Button (Save, Submit, Action) */
.gspn-btn-blue {
  background: linear-gradient(180deg, #0056b3 0%, #002d70 100%) !important;
  color: #ffffff !important;
  border: 1px solid #001f4d !important;
  border-radius: 3px;
  padding: 3px 12px;
  height: 25px;
  font-family: Arial, 'Inter', sans-serif;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: all 0.12s ease;
  text-decoration: none;
}

.gspn-btn-blue:hover {
  background: linear-gradient(180deg, #0066cc 0%, #00388a 100%) !important;
  border-color: #002d70 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 4px rgba(0, 45, 112, 0.3);
}

.gspn-btn-blue:active {
  background: #001f4d !important;
  transform: translateY(1px);
}

/* ==========================================================================
   TOMBOL KHUSUS GENERATOR / EKSEKUSI SKRIP (SOLID ROYAL NAVY SAMSUNG - SARAN 1)
   Digunakan untuk aksi khusus otomatis seperti Create Eng Code & Create ID GSPN
   ========================================================================== */
.gspn-btn-navy,
button.gspn-btn-navy,
a.gspn-btn-navy {
  background: linear-gradient(180deg, #0e3b7d 0%, #002255 100%) !important;
  color: #ffffff !important;
  border: 1px solid #00173a !important;
  border-radius: 3px;
  padding: 3px 12px;
  height: 25px;
  font-family: Arial, 'Inter', sans-serif;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 34, 85, 0.35);
  transition: all 0.15s ease;
  text-decoration: none;
  letter-spacing: 0.01em;
}

.gspn-btn-navy:hover,
button.gspn-btn-navy:hover,
a.gspn-btn-navy:hover {
  background: linear-gradient(180deg, #164ea2 0%, #002d70 100%) !important;
  border-color: #002255 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(0, 45, 112, 0.45);
}

.gspn-btn-navy:active,
button.gspn-btn-navy:active,
a.gspn-btn-navy:active {
  background: #00173a !important;
  transform: translateY(1px);
}

.gspn-btn-navy:disabled,
button.gspn-btn-navy:disabled,
.gspn-btn-navy.btn-disabled {
  background: #e2e8f0 !important;
  color: #94a3b8 !important;
  border-color: #cbd5e1 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  box-shadow: none !important;
  opacity: 0.6 !important;
  transform: none !important;
}

/* GSPN Enterprise Primary Green Button (Download, Run) */
.gspn-btn-green {
  background: linear-gradient(180deg, #059669 0%, #047857 100%) !important;
  color: #ffffff !important;
  border: 1px solid #065f46 !important;
  border-radius: 3px;
  padding: 3px 12px;
  height: 25px;
  font-family: Arial, 'Inter', sans-serif;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  transition: all 0.12s ease;
  text-decoration: none;
}

.gspn-btn-green:hover {
  background: linear-gradient(180deg, #10b981 0%, #059669 100%) !important;
  color: #ffffff !important;
}

.gspn-btn-green:active {
  background: #064e3b !important;
  transform: translateY(1px);
}

/* GSPN Enterprise Primary Red Button (Reject, Delete, Cancel) */
.gspn-btn-red {
  background: linear-gradient(180deg, #dc2626 0%, #b91c1c 100%) !important;
  color: #ffffff !important;
  border: 1px solid #991b1b !important;
  border-radius: 3px;
  padding: 3px 12px;
  height: 25px;
  font-family: Arial, 'Inter', sans-serif;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(185, 28, 28, 0.2);
  transition: all 0.12s ease;
  text-decoration: none;
}

.gspn-btn-red:hover {
  background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%) !important;
  border-color: #7f1d1d !important;
  color: #ffffff !important;
  box-shadow: 0 2px 4px rgba(185, 28, 28, 0.3);
}

.gspn-btn-red:active {
  background: #7f1d1d !important;
  transform: translateY(1px);
}

/* GSPN Enterprise Merah Muda Button (Reject / Tolak Data) */
.gspn-btn-light-red {
  background: linear-gradient(180deg, #ffe4e6 0%, #fecdd3 100%) !important;
  color: #9f1239 !important;
  border: 1px solid #fda4af !important;
  border-radius: 3px !important;
  padding: 3px 12px !important;
  height: 25px !important;
  font-family: Arial, 'Inter', sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  cursor: pointer !important;
  box-shadow: 0 1px 2px rgba(225, 29, 72, 0.15) !important;
  transition: all 0.12s ease !important;
  text-decoration: none !important;
}

.gspn-btn-light-red:hover {
  background: linear-gradient(180deg, #fecdd3 0%, #fda4af 100%) !important;
  border-color: #fb7185 !important;
  color: #881337 !important;
  box-shadow: 0 2px 4px rgba(225, 29, 72, 0.25) !important;
}

.gspn-btn-light-red:active {
  background: #fda4af !important;
  transform: translateY(1px) !important;
}

/* Data Validation Row Save Action Button States */
.val-btn-save {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  width: 28px;
  padding: 0;
  border-radius: 3px;
  border: 1px solid #94a3b8 !important;
  background: linear-gradient(180deg, #ffffff 0%, #e2e8f0 100%) !important;
  color: #002d70 !important;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.val-btn-save:hover {
  background: #002d70 !important;
  color: #ffffff !important;
  border-color: #001f4d !important;
}

/* State when row has unsaved changes (dirty) */
.val-btn-save.is-dirty {
  background: linear-gradient(180deg, #f97316 0%, #ea580c 100%) !important;
  color: #ffffff !important;
  border: 1px solid #c2410c !important;
  box-shadow: 0 0 0 2px rgba(234, 88, 12, 0.4) !important;
  animation: valBtnPulse 1.2s infinite ease-in-out;
}

.val-btn-save.is-dirty:hover {
  background: linear-gradient(180deg, #fb923c 0%, #f97316 100%) !important;
  box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.6) !important;
}

/* State when currently saving */
.val-btn-save.is-saving {
  background: #002d70 !important;
  color: #ffffff !important;
  border: 1px solid #001f4d !important;
  cursor: wait !important;
  animation: none !important;
}

/* State when saved successfully */
.val-btn-save.is-saved {
  background: linear-gradient(180deg, #10b981 0%, #059669 100%) !important;
  color: #ffffff !important;
  border: 1px solid #047857 !important;
  animation: none !important;
}

@keyframes valBtnPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 2px rgba(234, 88, 12, 0.4);
  }
  50% {
    transform: scale(1.06);
    box-shadow: 0 0 0 4px rgba(234, 88, 12, 0.65);
  }
}

/* Data Table Grid Khas GSPN */
.gspn-grid-table {
  width: 100%;
  border-collapse: collapse;
  font-family: Arial, 'Inter', sans-serif;
  font-size: 10.5px !important;
}

.gspn-grid-table thead th {
  background-color: #eaf1f8 !important;
  color: #1e293b !important;
  font-weight: 700 !important;
  border: 1px solid #cbd5e1 !important;
  padding: 5px 8px !important;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}

.gspn-grid-table tbody td {
  border: 1px solid #cbd5e1 !important;
  padding: 5px 8px !important;
  color: #334155;
  background-color: #ffffff;
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}

.gspn-grid-table tbody tr:hover td {
  background-color: #fffde7 !important; /* GSPN Official Soft Yellow Row Hover */
}

.gspn-grid-table tbody tr.selected td {
  background-color: #e0ecfb !important;
}

/* Caution Notice Box Merah Khas GSPN */
.gspn-caution-box {
  background-color: #fef2f2;
  border: 1px solid #fecaca;
  border-left: 4px solid #dc2626;
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 10px !important;
  color: #991b1b;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* 1:1 Authentic GSPN2 Login Simulator Modal */
.gspn2-login-modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(3px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.gspn2-login-window {
  background: #f8f8f8;
  border: 2px solid #002d70;
  border-radius: 6px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  width: 900px;
  max-width: 96vw;
  overflow: hidden;
  position: relative;
  font-family: Arial, sans-serif;
}

.gspn2-window-header {
  background: linear-gradient(180deg, #093c87 0%, #002d70 100%);
  color: #ffffff;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px !important;
  font-weight: 700;
  border-bottom: 2px solid #0056b3;
}

.gspn2-login-body {
  padding: 20px;
  text-align: center;
}

.gspn2-form-box {
  background: linear-gradient(180deg, #1b325c 0%, #152344 100%);
  border: 1px solid #0d1b36;
  border-radius: 6px;
  padding: 16px 24px;
  color: #ffffff;
  width: 720px;
  max-width: 100%;
  margin: 12px auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.gspn2-login-btn-classic {
  background: linear-gradient(180deg, #ffcc00 0%, #d97815 100%);
  border: 1px solid #b45309;
  color: #000000;
  font-weight: 800;
  font-size: 12px !important;
  padding: 12px 24px;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  transition: all 0.12s ease;
}

.gspn2-login-btn-classic:hover {
  background: linear-gradient(180deg, #ffe066 0%, #f59e0b 100%);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
}

/* Animations */
@keyframes gspnFadeIn {
  from { opacity: 0; transform: translateY(2px); }
  to { opacity: 1; transform: translateY(0); }
}

.gspn-tab-fade {
  animation: gspnFadeIn 0.18s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ==========================================================================
   AUTHENTIC GSPN TREE-VIEW SIDEBAR & ACCORDION (biz2.samsungcsportal.com)
   ========================================================================== */
.gspn-tree-group {
  border-bottom: 1px solid #e2e8f0;
}

.gspn-tree-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4.5px 8px;
  font-family: Arial, 'Inter', sans-serif;
  font-size: 10.5px !important;
  font-weight: 700;
  color: #1e293b;
  cursor: pointer;
  background-color: #f1f5f9;
  border-top: 1px solid #e2e8f0;
  user-select: none;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.gspn-tree-header:hover {
  background-color: #e2e8f0;
  color: #002d70;
}

.gspn-tree-header.active {
  background-color: #e0ecfb !important;
  color: #002d70 !important;
  border-left: 2.5px solid #002d70 !important;
}

.gspn-tree-title {
  display: flex;
  align-items: center;
  gap: 5px;
}

.gspn-tree-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 11px;
  height: 11px;
  border: 1px solid #94a3b8;
  background-color: #ffffff;
  color: #334155;
  font-size: 8.5px !important;
  font-family: monospace;
  font-weight: bold;
  line-height: 1;
  border-radius: 1.5px;
  flex-shrink: 0;
}

.gspn-tree-sublist {
  background-color: #ffffff;
  padding: 1px 0;
}

.gspn-tree-item {
  display: flex;
  align-items: center;
  gap: 5.5px;
  padding: 3.5px 8px 3.5px 22px;
  font-family: Arial, 'Inter', sans-serif;
  font-size: 10px !important;
  font-weight: 400;
  color: #334155;
  cursor: pointer;
  border-left: 2.5px solid transparent;
  text-decoration: none;
  width: 100%;
  text-align: left;
  transition: all 0.12s ease;
}

.gspn-tree-item .truncate,
.gspn-tree-item > span:not([id*="count"]):not(.gspn-bullet-square) {
  font-family: Arial, 'Inter', sans-serif !important;
  font-size: 10px !important;
  font-weight: 400;
  color: inherit;
}

.gspn-tree-item:hover {
  background-color: #eef4fc;
  color: #0056b3;
}

.gspn-tree-item:hover .truncate,
.gspn-tree-item:hover > span:not([id*="count"]):not(.gspn-bullet-square) {
  color: #0056b3;
}

.gspn-tree-item.active {
  background-color: #e0ecfb;
  color: #002d70;
  font-weight: 700 !important;
  border-left-color: #d97815 !important; /* GSPN Amber */
}

.gspn-tree-item.active .truncate,
.gspn-tree-item.active > span:not([id*="count"]):not(.gspn-bullet-square) {
  color: #002d70 !important;
  font-weight: 700 !important;
}

.gspn-tree-item.active .gspn-bullet-square {
  background-color: #d97815 !important;
}

/* Sub-level expandable folder header (Level 2 expand/collapse, rata persis dengan sub menu lain) */
.gspn-tree-subfolder {
  display: flex;
  align-items: center;
  gap: 5.5px;
  padding: 3.5px 8px 3.5px 22px;
  font-family: Arial, 'Inter', sans-serif !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  color: #334155;
  cursor: pointer;
  border-left: 2.5px solid transparent;
  user-select: none;
  width: 100%;
  text-align: left;
  transition: all 0.12s ease;
}

.gspn-tree-subfolder .truncate,
.gspn-tree-subfolder > span:not(.gspn-tree-arrow-slot) {
  font-family: Arial, 'Inter', sans-serif !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  color: inherit;
}

.gspn-tree-subfolder:hover {
  background-color: #eef4fc;
  color: #002d70;
}

.gspn-tree-subfolder:hover .truncate,
.gspn-tree-subfolder:hover > span:not(.gspn-tree-arrow-slot) {
  color: #0056b3;
}

.gspn-tree-subfolder.active {
  background-color: #e0ecfb;
  color: #002d70;
  font-weight: 700 !important;
  border-left-color: #d97815 !important;
}

.gspn-tree-subfolder.active .truncate,
.gspn-tree-subfolder.active > span:not(.gspn-tree-arrow-slot) {
  font-family: Arial, 'Inter', sans-serif !important;
  color: #002d70 !important;
  font-weight: 700 !important;
}

/* Slot penampung panah (lebar 6px rata persis dengan slot tanda titik) */
.gspn-tree-arrow-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 6px;
  height: 12px;
  flex-shrink: 0;
}

.gspn-tree-arrow-icon {
  width: 9px;
  height: 9px;
  display: inline-block;
  flex-shrink: 0;
  color: #475569;
  transition: transform 0.15s ease;
}

/* Sub-sub item (Level 3 leaf item, indented) */
.gspn-tree-subitem {
  display: flex;
  align-items: center;
  gap: 5.5px;
  padding: 3.5px 8px 3.5px 34px;
  font-family: Arial, 'Inter', sans-serif !important;
  font-size: 10px !important;
  font-weight: 400;
  color: #334155;
  cursor: pointer;
  border-left: 2.5px solid transparent;
  text-decoration: none;
  width: 100%;
  text-align: left;
  transition: all 0.12s ease;
}

.gspn-tree-subitem .truncate,
.gspn-tree-subitem > span:not([id*="count"]):not(.gspn-bullet-square) {
  font-family: Arial, 'Inter', sans-serif !important;
  font-size: 10px !important;
  font-weight: 400;
  color: inherit;
}

.gspn-tree-subitem:hover {
  background-color: #eef4fc;
  color: #0056b3;
}

.gspn-tree-subitem:hover .truncate,
.gspn-tree-subitem:hover > span:not([id*="count"]):not(.gspn-bullet-square) {
  color: #0056b3;
}

.gspn-tree-subitem.active {
  background-color: #e0ecfb;
  color: #002d70;
  font-weight: 700 !important;
  border-left-color: #d97815 !important;
}

.gspn-tree-subitem.active .truncate,
.gspn-tree-subitem.active > span:not([id*="count"]):not(.gspn-bullet-square) {
  font-family: Arial, 'Inter', sans-serif !important;
  color: #002d70 !important;
  font-weight: 700 !important;
}

.gspn-tree-subitem.active .gspn-bullet-square {
  background-color: #d97815 !important;
}

/* Action sub-items (like Create New ID GSPN) */
.gspn-tree-item.gspn-action-subitem {
  color: #0369a1;
  font-weight: 600;
}

.gspn-tree-item.gspn-action-subitem:hover {
  color: #0284c7;
  background-color: #f0f9ff;
}

/* GSPN Form Section Bar (e.g. [▲] Main Information) */
.gspn-form-section-bar {
  background: linear-gradient(180deg, #d3e5f8 0%, #bad5f2 100%);
  border: 1px solid #90b8e2;
  color: #002d70;
  font-family: Arial, 'Inter', sans-serif;
  font-size: 11px !important;
  font-weight: 700;
  padding: 4px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 2px;
  user-select: none;
  cursor: pointer;
}

.gspn-form-section-bar:hover {
  background: linear-gradient(180deg, #c5dcf5 0%, #a9cbf0 100%);
}

.gspn-form-toggle-arrow {
  font-size: 9px;
  color: #002d70;
}

/* GSPN Authentic Enterprise Progress Bar */
.gspn-progress-track {
  width: 100%;
  height: 5px;
  background-color: #edf4fb;
  border: 1px solid #90b8e2;
  border-radius: 2px;
  box-shadow: inset 0 1px 2px rgba(0, 45, 112, 0.08);
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
}

.gspn-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #1d6fd8 0%, #0056b3 50%, #002d70 100%);
  border-radius: 1px;
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 6px rgba(0, 86, 179, 0.4);
}

.gspn-progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  background-size: 200% 100%;
  animation: gspnShimmer 2s infinite ease-in-out;
}

@keyframes gspnShimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.gspn-progress-fill.is-complete {
  background: linear-gradient(90deg, #10b981 0%, #059669 100%) !important;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.5) !important;
}

/* GSPN Authentic 2-Column & 4-Column Form Table */
.gspn-form-table {
  width: 100%;
  border-collapse: collapse;
  font-family: Arial, 'Inter', sans-serif;
  font-size: 10.5px !important;
  border: 1px solid #cbd5e1;
  background-color: #ffffff;
}

.gspn-form-table th,
.gspn-form-table td.gspn-label-cell {
  background-color: #f1f5f9;
  color: #002d70;
  font-weight: 700;
  border: 1px solid #cbd5e1;
  padding: 5px 10px;
  vertical-align: middle;
  font-size: 10.5px;
}

.gspn-form-table td {
  border: 1px solid #cbd5e1;
  padding: 4px 8px;
  vertical-align: middle;
  background-color: #ffffff;
  color: #334155;
}

.gspn-form-input,
.gspn-form-select {
  width: 100%;
  height: 25px;
  padding: 2px 7px;
  font-size: 10.5px;
  font-family: Arial, 'Inter', sans-serif !important;
  color: #1e293b;
  background-color: #ffffff;
  border: 1px solid #94a3b8;
  border-radius: 2px;
  outline: none;
  transition: all 0.15s ease;
}

.gspn-form-input:focus,
.gspn-form-select:focus {
  border-color: #0056b3;
  box-shadow: 0 0 0 1px #0056b3;
  background-color: #fffef8;
}

/* ========================================================
   GSPN READONLY / LOCKED INPUTS (CLEAR DISTINCT GRAY COLOR)
   ======================================================== */
.gspn-readonly-input,
.gspn-form-input.gspn-readonly-input,
.gspn-form-input[readonly]:not(#apply-gspn-nik):not(#search-input-global):not(#apply-gspn-joindate-display):not(#reset-search-input):not(#mfa-search-input):not(#inactivate-search-input):not([type="date"]),
.gspn-form-input:disabled {
  background-color: #e2e8f0 !important; /* Jelas abu-abu (Slate-200), kontras tinggi dari input putih */
  color: #334155 !important;           /* Teks tetap tajam & kontras saat ada isi */
  border-color: #94a3b8 !important;     /* Border abu-abu tegas */
  cursor: not-allowed !important;       /* Kursor larangan */
  user-select: none !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06) !important;
}

.gspn-readonly-input:focus,
.gspn-form-input.gspn-readonly-input:focus,
.gspn-form-input[readonly]:not(#apply-gspn-nik):not(#search-input-global):not(#apply-gspn-joindate-display):not(#reset-search-input):not(#mfa-search-input):not(#inactivate-search-input):not([type="date"]):focus,
.gspn-form-input:disabled:focus {
  background-color: #e2e8f0 !important;
  border-color: #94a3b8 !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06) !important;
  outline: none !important;
}

.gspn-readonly-input::placeholder,
.gspn-form-input.gspn-readonly-input::placeholder,
.gspn-form-input[readonly]::placeholder {
  color: #64748b !important;
  font-style: italic !important;
  font-size: 10px !important;
  font-weight: 500 !important;
}

/* Input interaktif Join Date (harus selalu berlatar putih & berkursor pointer) */
#apply-gspn-joindate-display {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-color: #94a3b8 !important;
  cursor: pointer !important;
  user-select: text !important;
}

#apply-gspn-joindate-display:hover,
#apply-gspn-joindate-display:focus {
  background-color: #fffef8 !important;
  border-color: #0056b3 !important;
  box-shadow: 0 0 0 1px #0056b3 !important;
  outline: none !important;
}

/* ========================================================
   GSPN MASTER DATA TABLE (MATCHING CREATE NEW ID GSPN THEME)
   ======================================================== */
.gspn-master-table {
  width: 100%;
  border-collapse: collapse !important;
  font-family: Arial, 'Inter', sans-serif !important;
  font-size: 10.5px !important;
  color: #334155 !important;
  background-color: #ffffff;
  border: 1px solid #cbd5e1 !important;
}

#status-pengajuan-master-table {
  width: 100% !important;
  min-width: 100% !important;
  border-collapse: collapse !important;
  table-layout: auto !important;
}

.gspn-master-table th,
.gspn-master-table thead th {
  font-family: Arial, 'Inter', sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  color: #002d70 !important;
  background: #f1f5f9 !important;
  background-color: #f1f5f9 !important;
  border-right: 1px solid #cbd5e1 !important;
  border-bottom: 1px solid #cbd5e1 !important;
  border-top: 1px solid #cbd5e1 !important;
  padding: 5px 8px !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}

.gspn-master-table td,
.gspn-master-table tbody td {
  font-family: Arial, 'Inter', sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 400 !important;
  color: #1e293b !important;
  border-right: 1px solid #cbd5e1 !important;
  border-bottom: 1px solid #cbd5e1 !important;
  padding: 4px 8px !important;
  vertical-align: middle !important;
  line-height: 1.35 !important;
  background-color: #ffffff;
}

.gspn-master-table tbody tr:hover td {
  background-color: #f1f7fe !important;
}

.gspn-master-table .font-mono {
  font-family: Arial, 'Inter', sans-serif !important;
  font-size: 10.5px !important;
}

/* ========================================================
   GSPN MASTER STATUS TABLE: FROZEN (STICKY) COLUMNS
   ======================================================== */
.gspn-frozen-status-th {
  position: sticky !important;
  top: 0 !important;
  right: 75px !important;
  width: 150px !important;
  min-width: 150px !important;
  max-width: 150px !important;
  z-index: 30 !important;
  background-color: #f1f5f9 !important;
  border-left: 1px solid #cbd5e1 !important;
  border-right: 1px solid #cbd5e1 !important;
  border-bottom: 1px solid #cbd5e1 !important;
  border-top: 1px solid #cbd5e1 !important;
  box-shadow: inset 1px 0 0 #cbd5e1, inset -1px 0 0 #cbd5e1, inset 0 -1px 0 #cbd5e1, inset 0 1px 0 #cbd5e1, -4px 0 6px -2px rgba(0, 0, 0, 0.12) !important;
  box-sizing: border-box !important;
}

.gspn-frozen-action-th {
  position: sticky !important;
  top: 0 !important;
  right: 0 !important;
  width: 75px !important;
  min-width: 75px !important;
  max-width: 75px !important;
  z-index: 30 !important;
  background-color: #f1f5f9 !important;
  border-left: 1px solid #cbd5e1 !important;
  border-right: 1px solid #cbd5e1 !important;
  border-bottom: 1px solid #cbd5e1 !important;
  border-top: 1px solid #cbd5e1 !important;
  box-shadow: inset 1px 0 0 #cbd5e1, inset -1px 0 0 #cbd5e1, inset 0 -1px 0 #cbd5e1, inset 0 1px 0 #cbd5e1 !important;
  box-sizing: border-box !important;
}

.gspn-frozen-status-td {
  position: sticky !important;
  right: 75px !important;
  width: 150px !important;
  min-width: 150px !important;
  max-width: 150px !important;
  z-index: 20 !important;
  background-color: #ffffff !important;
  border-left: 1px solid #cbd5e1 !important;
  border-right: 1px solid #cbd5e1 !important;
  border-bottom: 1px solid #cbd5e1 !important;
  box-shadow: inset 1px 0 0 #cbd5e1, inset -1px 0 0 #cbd5e1, inset 0 -1px 0 #cbd5e1, -4px 0 6px -2px rgba(0, 0, 0, 0.08) !important;
  box-sizing: border-box !important;
}

.gspn-frozen-action-td {
  position: sticky !important;
  right: 0 !important;
  width: 75px !important;
  min-width: 75px !important;
  max-width: 75px !important;
  z-index: 20 !important;
  background-color: #ffffff !important;
  border-left: 1px solid #cbd5e1 !important;
  border-right: 1px solid #cbd5e1 !important;
  border-bottom: 1px solid #cbd5e1 !important;
  box-shadow: inset 1px 0 0 #cbd5e1, inset -1px 0 0 #cbd5e1, inset 0 -1px 0 #cbd5e1 !important;
  box-sizing: border-box !important;
}

#status-pengajuan-master-table tbody tr:hover td.gspn-frozen-status-td,
#status-pengajuan-master-table tbody tr:hover td.gspn-frozen-action-td {
  background-color: #f1f7fe !important;
}

/* Frozen / Sticky Columns for Approval New ID GSPN Table */
.appr-frozen-status-th {
  position: sticky !important;
  top: 0 !important;
  right: 155px !important;
  width: 145px !important;
  min-width: 145px !important;
  max-width: 145px !important;
  z-index: 30 !important;
  background: linear-gradient(180deg, #d3e5f8 0%, #bad5f2 100%) !important;
  color: #002d70 !important;
  border-left: 1px solid #cbd5e1 !important;
  border-right: 1px solid #cbd5e1 !important;
  border-bottom: 1px solid #cbd5e1 !important;
  border-top: none !important;
  box-shadow: inset 1px 0 0 #cbd5e1, inset -1px 0 0 #cbd5e1, inset 0 -1px 0 #cbd5e1, -4px 0 6px -2px rgba(0, 0, 0, 0.12) !important;
  box-sizing: border-box !important;
}

.appr-frozen-action-th {
  position: sticky !important;
  top: 0 !important;
  right: 0 !important;
  width: 155px !important;
  min-width: 155px !important;
  max-width: 155px !important;
  z-index: 30 !important;
  background: linear-gradient(180deg, #d3e5f8 0%, #bad5f2 100%) !important;
  color: #002d70 !important;
  border-left: 1px solid #cbd5e1 !important;
  border-right: 1px solid #cbd5e1 !important;
  border-bottom: 1px solid #cbd5e1 !important;
  border-top: none !important;
  box-shadow: inset 1px 0 0 #cbd5e1, inset -1px 0 0 #cbd5e1, inset 0 -1px 0 #cbd5e1 !important;
  box-sizing: border-box !important;
}

.appr-frozen-status-td {
  position: sticky !important;
  right: 155px !important;
  width: 145px !important;
  min-width: 145px !important;
  max-width: 145px !important;
  z-index: 20 !important;
  background-color: #ffffff !important;
  border-left: 1px solid #cbd5e1 !important;
  border-right: 1px solid #cbd5e1 !important;
  border-bottom: 1px solid #cbd5e1 !important;
  box-shadow: inset 1px 0 0 #cbd5e1, inset -1px 0 0 #cbd5e1, inset 0 -1px 0 #cbd5e1, -4px 0 6px -2px rgba(0, 0, 0, 0.08) !important;
  box-sizing: border-box !important;
}

.appr-frozen-action-td {
  position: sticky !important;
  right: 0 !important;
  width: 155px !important;
  min-width: 155px !important;
  max-width: 155px !important;
  z-index: 20 !important;
  background-color: #ffffff !important;
  border-left: 1px solid #cbd5e1 !important;
  border-right: 1px solid #cbd5e1 !important;
  border-bottom: 1px solid #cbd5e1 !important;
  box-shadow: inset 1px 0 0 #cbd5e1, inset -1px 0 0 #cbd5e1, inset 0 -1px 0 #cbd5e1 !important;
  box-sizing: border-box !important;
}

#appr-new-gspn-master-table tbody tr:hover td.appr-frozen-status-td,
#appr-new-gspn-master-table tbody tr:hover td.appr-frozen-action-td {
  background-color: #f1f7fe !important;
}

/* ==========================================================================
   Setting ID GSPN: Segmented Toggle Tabs & Accordion
   ========================================================================== */
.setting-gspn-toggle-tab {
  display: inline-flex;
  align-items: center;
  gap: 4.5px;
  padding: 3px 10px;
  height: 25px;
  font-family: Arial, 'Inter', sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  border-radius: 3px;
  border: 1px solid #94a3b8;
  background: linear-gradient(180deg, #ffffff 0%, #e2e8f0 100%);
  color: #334155;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  transition: all 0.12s ease;
  white-space: nowrap;
  user-select: none;
}

.setting-gspn-toggle-tab:hover {
  background: #ffffff;
  border-color: #64748b;
  color: #002d70;
}

.setting-gspn-toggle-tab:active {
  background: #cbd5e1;
  transform: translateY(1px);
}

.setting-gspn-toggle-tab.active {
  background: #002d70 !important;
  color: #ffffff !important;
  border-color: #001f4d !important;
  box-shadow: 0 1px 3px rgba(0, 45, 112, 0.28) !important;
  font-weight: 700 !important;
  transform: none !important;
}

.setting-gspn-toggle-tab.active i,
.setting-gspn-toggle-tab.active svg {
  color: #ffffff !important;
}

.setting-gspn-toggle-tab.active span[id^="rrr-mx-tab-"],
.setting-gspn-toggle-tab.active #gspn-apply-tab-count-badge,
.setting-gspn-toggle-tab.active .bigdata-tab-badge {
  background-color: #ffffff !important;
  color: #002d70 !important;
  border-color: #ffffff !important;
}

/* Approval Stage Toggle Tabs: Status Selesai (Opsi B: Bevel Klasik Seragam dengan Tanda ✓) */
.setting-gspn-toggle-tab.stage-oke {
  background: linear-gradient(180deg, #ffffff 0%, #e2e8f0 100%) !important;
  color: #0f172a !important;
  border: 1px solid #94a3b8 !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

.setting-gspn-toggle-tab.stage-oke::before {
  content: "";
  display: inline-flex;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background-color: #16a34a;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23ffffff'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 8.5px 8.5px;
  margin-right: 4px;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(22, 163, 74, 0.25);
}

.setting-gspn-toggle-tab.stage-oke:hover {
  background: #ffffff !important;
  border-color: #64748b !important;
  color: #002d70 !important;
}

/* Jika tab yang sudah selesai sedang aktif/dibuka: Solid Biru Samsung #002d70 */
.setting-gspn-toggle-tab.stage-oke.active {
  background: #002d70 !important;
  color: #ffffff !important;
  border-color: #001f4d !important;
  box-shadow: 0 1px 3px rgba(0, 45, 112, 0.35) !important;
}

.setting-gspn-toggle-tab.stage-oke.active::before {
  background-color: #22c55e;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.setting-gspn-section {
  transition: all 0.2s ease-in-out;
}

.setting-gspn-body {
  transition: max-height 0.2s ease, opacity 0.2s ease;
}

/* ==========================================================================
   GSPN APPLY VIEW TOGGLE SWITCH (Enterprise Segmented Toggle Control)
   ========================================================================== */
.gspn-view-toggle-container {
  display: inline-flex;
  align-items: center;
  background: #e2e8f0;
  padding: 2.5px;
  border-radius: 9999px;
  border: 1px solid #cbd5e1;
  box-shadow: inset 0 1px 2.5px rgba(0, 0, 0, 0.1);
  user-select: none;
  position: relative;
}

.gspn-view-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  font-size: 10.5px;
  font-weight: 600;
  border-radius: 9999px;
  color: #475569;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  border: none;
  background: transparent;
  outline: none;
  white-space: nowrap;
  position: relative;
  z-index: 1;
}

.gspn-view-toggle-btn:hover:not(.active) {
  color: #0f172a;
  background: rgba(255, 255, 255, 0.45);
}

.gspn-view-toggle-btn.active {
  background: #002d70 !important;
  color: #ffffff !important;
  box-shadow: 0 1.5px 4px rgba(0, 45, 112, 0.35);
  font-weight: 700;
}

.gspn-view-toggle-btn.active i,
.gspn-view-toggle-btn.active svg {
  color: #ffffff !important;
}

/* Sliding Toggle Switch Track & Knob */
.gspn-view-toggle-switch {
  position: relative;
  width: 34px;
  height: 18px;
  background: #cbd5e1;
  border-radius: 9999px;
  cursor: pointer;
  transition: background-color 0.25s ease, border-color 0.25s ease;
  padding: 2px;
  display: inline-flex;
  align-items: center;
  margin: 0 2px;
  border: 1px solid #94a3b8;
  flex-shrink: 0;
}

.gspn-view-toggle-switch.is-status {
  background: #2563eb;
  border-color: #1d4ed8;
}

.gspn-view-toggle-knob {
  width: 12px;
  height: 12px;
  background: #ffffff;
  border-radius: 9999px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateX(0);
}

.gspn-view-toggle-switch.is-status .gspn-view-toggle-knob {
  transform: translateX(16px);
}

/* ==========================================================================
   EXCEL-LIKE COLUMN HEADER FILTERS (FILE MANAGER / BIG DATA)
   ========================================================================== */
.fm-col-filter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 3px;
  color: #64748b;
  background-color: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.fm-col-filter-btn:hover {
  background-color: #cbd5e1;
  color: #0f172a;
  border-color: #94a3b8;
}

.fm-col-filter-btn.is-active {
  background-color: #002d70 !important;
  color: #ffffff !important;
  border-color: #001a40 !important;
  box-shadow: 0 0 0 2px rgba(0, 45, 112, 0.25);
}

.fm-col-filter-btn.is-active svg {
  stroke: #ffffff;
}

#bigdata-excel-filter-popover {
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2), 0 8px 10px -6px rgba(0, 0, 0, 0.15);
  animation: fmFilterPopoverFadeIn 0.12s cubic-bezier(0, 0, 0.2, 1);
}

@keyframes fmFilterPopoverFadeIn {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(-4px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.fm-filter-item-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 6px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.1s ease;
}

.fm-filter-item-label:hover {
  background-color: #f1f5f9;
}

/* ========================================================
   DATA VALIDATION: STICKY FREEZE COLUMNS & EXCEL FILTER POPOVER
   ======================================================== */
.val-freeze-left {
  position: sticky !important;
  z-index: 10 !important;
}

.val-freeze-right {
  position: sticky !important;
  z-index: 10 !important;
}

thead th.val-freeze-left,
thead th.val-freeze-right {
  z-index: 25 !important;
}

.val-freeze-left-divider {
  border-right: 2px solid #94a3b8 !important;
  box-shadow: 4px 0 6px -2px rgba(0, 0, 0, 0.08);
}

.val-freeze-right-divider {
  border-left: 2px solid #94a3b8 !important;
  box-shadow: -4px 0 6px -2px rgba(0, 0, 0, 0.08);
}

/* Solid opaque backgrounds for frozen columns on normal & hover */
.gspn-master-table thead th.val-freeze-left,
.gspn-master-table thead th.val-freeze-right {
  background-color: #f1f5f9 !important;
}

.gspn-master-table tbody td.val-freeze-left,
.gspn-master-table tbody td.val-freeze-right {
  background-color: #ffffff;
}

.gspn-master-table tbody tr:hover td.val-freeze-left,
.gspn-master-table tbody tr:hover td.val-freeze-right {
  background-color: #f1f7fe !important;
}

.gspn-master-table tbody tr.val-row-dosa td.val-freeze-left,
.gspn-master-table tbody tr.val-row-dosa td.val-freeze-right {
  background-color: #fef2f2 !important;
}
.gspn-master-table tbody tr.val-row-dosa:hover td.val-freeze-left,
.gspn-master-table tbody tr.val-row-dosa:hover td.val-freeze-right {
  background-color: #fee2e2 !important;
}

.gspn-master-table tbody tr.val-row-pembilang td.val-freeze-left,
.gspn-master-table tbody tr.val-row-pembilang td.val-freeze-right {
  background-color: #eff6ff !important;
}
.gspn-master-table tbody tr.val-row-pembilang:hover td.val-freeze-left,
.gspn-master-table tbody tr.val-row-pembilang:hover td.val-freeze-right {
  background-color: #dbeafe !important;
}

.gspn-master-table tbody tr.val-row-gap td.val-freeze-left,
.gspn-master-table tbody tr.val-row-gap td.val-freeze-right {
  background-color: #fffbeb !important;
}
.gspn-master-table tbody tr.val-row-gap:hover td.val-freeze-left,
.gspn-master-table tbody tr.val-row-gap:hover td.val-freeze-right {
  background-color: #fef3c7 !important;
}

/* Header Filter Button */
.val-col-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}

.val-col-filter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border-radius: 3px;
  color: #94a3b8;
  cursor: pointer;
  transition: all 0.15s ease;
  background: transparent;
  border: none;
  padding: 0;
  flex-shrink: 0;
}

.val-col-filter-btn:hover {
  color: #002d70;
  background-color: #cbd5e1;
}

.val-col-filter-btn.active {
  color: #ffffff !important;
  background-color: #002d70 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

#val-excel-filter-popover {
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2), 0 8px 10px -6px rgba(0, 0, 0, 0.15);
  animation: fmFilterPopoverFadeIn 0.12s cubic-bezier(0, 0, 0.2, 1);
}

/* ==========================================================================
   DASHBOARD KPI MATRIX TABLE (GSPN MASTER TABLE THEME EXTENSION)
   ========================================================================== */
/* Table Header: Disamakan 100% dengan bar 1. Ringkasan Metrik Personel (.gspn-form-section-bar) */
.gspn-master-table thead,
.gspn-master-table thead tr,
.gspn-master-table thead th {
  background: linear-gradient(180deg, #d3e5f8 0%, #bad5f2 100%) !important;
  color: #002d70 !important;
  border-right: 1px solid #cbd5e1 !important;
  border-bottom: 1px solid #cbd5e1 !important;
  border-top: none !important;
  font-family: Arial, 'Inter', sans-serif !important;
  font-weight: 700 !important;
  font-size: 10.5px !important;
}

.gspn-master-table thead th div {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: inherit !important;
}

#biz-matrix-thead {
  background: linear-gradient(180deg, #d3e5f8 0%, #bad5f2 100%) !important;
  color: #002d70 !important;
  border-bottom: 1px solid #cbd5e1 !important;
  box-shadow: none !important;
}

.gspn-master-table thead th.val-freeze-left {
  background: linear-gradient(180deg, #d3e5f8 0%, #bad5f2 100%) !important;
  color: #002d70 !important;
  border-right: 1px solid #cbd5e1 !important;
  border-bottom: 1px solid #cbd5e1 !important;
  border-top: none !important;
  font-weight: 700 !important;
  z-index: 30 !important;
}

/* BUJM Benchmark Row: Crisp benchmark styling with all cells bold */
.gspn-master-table tbody tr.biz-row-bujm td,
.gspn-master-table tbody tr:first-child td {
  border-top: 1px solid #cbd5e1 !important;
}

.gspn-master-table tbody tr.biz-row-bujm td {
  background-color: #f8fafc;
  color: #002d70;
  border-bottom: 1px solid #cbd5e1 !important;
  border-right: 1px solid #cbd5e1 !important;
  font-weight: 700 !important;
}

.gspn-master-table tbody tr.biz-row-bujm td.val-freeze-left {
  background-color: #f8fafc;
  color: #002d70;
  font-weight: 700 !important;
  z-index: 15 !important;
}

.gspn-master-table tbody td.val-freeze-left {
  background-color: #ffffff;
  z-index: 12 !important;
}

/* Matriks 2-State Heatmap Cells */
.gspn-master-table tbody td.biz-cell-zero {
  background-color: #ffffff;
  color: #1e293b;
}

.gspn-master-table tbody td.biz-cell-dosa {
  background-color: #fee2e2;
  color: #1e293b;
}

.gspn-master-table tbody tr.biz-row-bujm td.biz-cell-zero {
  background-color: #f8fafc;
  color: #1e293b;
  font-weight: 700 !important;
}

.gspn-master-table tbody tr.biz-row-bujm td.biz-cell-dosa {
  background-color: #fee2e2;
  color: #1e293b;
  font-weight: 700 !important;
}

/* Full Row Hover: The entire row lights up across all 24 columns in unison */
.gspn-master-table tbody tr:hover td,
.gspn-master-table tbody tr:hover td.val-freeze-left,
.gspn-master-table tbody tr:hover td.val-freeze-first,
.gspn-master-table tbody tr:hover td.val-freeze-left-divider {
  background-color: #e2edfb !important;
}

/* For defect cells on row hover: slightly deeper rose/pink highlight so defect status remains clearly visible */
.gspn-master-table tbody tr:hover td.biz-cell-dosa {
  background-color: #fecdd3 !important;
}

.gspn-master-table tbody tr.biz-row-bujm:hover td,
.gspn-master-table tbody tr.biz-row-bujm:hover td.val-freeze-left,
.gspn-master-table tbody tr.biz-row-bujm:hover td.val-freeze-first,
.gspn-master-table tbody tr.biz-row-bujm:hover td.val-freeze-left-divider {
  background-color: #e2edfb !important;
}

.gspn-master-table tbody tr.biz-row-bujm:hover td.biz-cell-dosa {
  background-color: #fecdd3 !important;
}

/* Remove outer table left border so it cannot scroll off and leave a 1px gap */
#biz-matrix-table {
  border-left: none !important;
}

/* First frozen column (#): Single 1px border (#cbd5e1), perfectly matching all data cells */
.gspn-master-table th.val-freeze-first,
.gspn-master-table td.val-freeze-first {
  left: 0px !important;
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  z-index: 16 !important;
  border-left: 1px solid #cbd5e1 !important;
  border-right: none !important;
  border-bottom: 1px solid #cbd5e1 !important;
  box-shadow: inset -1px 0 0 #cbd5e1 !important;
}

.gspn-master-table thead th.val-freeze-first {
  background: linear-gradient(180deg, #d3e5f8 0%, #bad5f2 100%) !important;
  color: #002d70 !important;
  border-left: 1px solid #cbd5e1 !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: 1px solid #cbd5e1 !important;
  box-shadow: inset -1px 0 0 #cbd5e1, inset 0 -1px 0 #cbd5e1 !important;
  z-index: 35 !important;
}

.gspn-master-table tbody tr.biz-row-bujm td.val-freeze-first {
  border-left: 1px solid #cbd5e1 !important;
  border-right: none !important;
  border-top: 1px solid #cbd5e1 !important;
  border-bottom: 1px solid #cbd5e1 !important;
  background-color: #f8fafc;
  box-shadow: inset -1px 0 0 #cbd5e1 !important;
  z-index: 18 !important;
}

.gspn-master-table tbody td.val-freeze-first {
  background-color: #ffffff;
  border-left: 1px solid #cbd5e1 !important;
  border-right: none !important;
  border-bottom: 1px solid #cbd5e1 !important;
  box-shadow: inset -1px 0 0 #cbd5e1 !important;
  z-index: 16 !important;
}

.gspn-master-table tbody tr:hover td.val-freeze-first,
.gspn-master-table tbody tr.biz-row-bujm:hover td.val-freeze-first {
  background-color: #e2edfb !important;
  box-shadow: inset -1px 0 0 #cbd5e1 !important;
}

/* Col 2 Cabang ASC: Single 1px border matching all data cells, with inset right border so it never disappears on scroll */
.gspn-master-table th.val-freeze-left-divider,
.gspn-master-table td.val-freeze-left-divider {
  left: 44px !important;
  min-width: 220px !important;
  z-index: 14 !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: 1px solid #cbd5e1 !important;
  box-shadow: inset -1px 0 0 #cbd5e1 !important;
}

.gspn-master-table thead th.val-freeze-left-divider {
  background: linear-gradient(180deg, #d3e5f8 0%, #bad5f2 100%) !important;
  color: #002d70 !important;
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: 1px solid #cbd5e1 !important;
  box-shadow: inset -1px 0 0 #cbd5e1, inset 0 -1px 0 #cbd5e1 !important;
  z-index: 34 !important;
}

.gspn-master-table tbody tr.biz-row-bujm td.val-freeze-left-divider:not(.biz-cell-selected) {
  border-left: none !important;
  border-right: none !important;
  border-top: 1px solid #cbd5e1 !important;
  border-bottom: 1px solid #cbd5e1 !important;
  background-color: #f8fafc;
  box-shadow: inset -1px 0 0 #cbd5e1 !important;
  z-index: 17 !important;
}

.gspn-master-table tbody td.val-freeze-left-divider:not(.biz-cell-selected) {
  background-color: #ffffff;
  border-left: none !important;
  border-right: none !important;
  border-bottom: 1px solid #cbd5e1 !important;
  box-shadow: inset -1px 0 0 #cbd5e1 !important;
  z-index: 14 !important;
}

.gspn-master-table tbody tr:hover td.val-freeze-left-divider:not(.biz-cell-selected),
.gspn-master-table tbody tr.biz-row-bujm:hover td.val-freeze-left-divider:not(.biz-cell-selected) {
  background-color: #e2edfb !important;
  box-shadow: inset -1px 0 0 #cbd5e1 !important;
}

/* ==========================================================================
   PERFECT ROW GRID ALIGNMENT: MATRIX TABLE & BILL PREVIEW DRAWER (25px)
   ========================================================================== */
#biz-matrix-table,
#biz-drawer-table {
  border-collapse: collapse !important;
  background-color: #ffffff;
}

#biz-matrix-table thead,
#biz-drawer-table thead {
  height: 25px !important;
  box-sizing: border-box !important;
}

#biz-matrix-table thead tr,
#biz-drawer-table thead tr {
  height: 25px !important;
  min-height: 25px !important;
  max-height: 25px !important;
  box-sizing: border-box !important;
}

#biz-matrix-table thead th,
#biz-drawer-table thead th {
  position: sticky !important;
  top: 0 !important;
  z-index: 20 !important;
  height: 25px !important;
  min-height: 25px !important;
  max-height: 25px !important;
  padding: 0 8px !important;
  line-height: 24px !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
  background: linear-gradient(180deg, #d3e5f8 0%, #bad5f2 100%) !important;
  border-bottom: 1px solid #cbd5e1 !important;
  box-shadow: inset 0 -1px 0 #cbd5e1 !important;
}

#biz-matrix-table thead th.val-freeze-first {
  z-index: 35 !important;
  box-shadow: inset -1px 0 0 #cbd5e1, inset 0 -1px 0 #cbd5e1 !important;
}

#biz-matrix-table thead th.val-freeze-left-divider {
  z-index: 34 !important;
  box-shadow: inset -1px 0 0 #cbd5e1, inset 0 -1px 0 #cbd5e1 !important;
}

#biz-matrix-table tbody tr,
#biz-drawer-table tbody tr {
  height: 25px !important;
  min-height: 25px !important;
  max-height: 25px !important;
  box-sizing: border-box !important;
}

#biz-matrix-table tbody td,
#biz-drawer-table tbody td {
  height: 25px !important;
  min-height: 25px !important;
  max-height: 25px !important;
  padding: 0 8px !important;
  line-height: 24px !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
  border-bottom: 1px solid #cbd5e1 !important;
}

#biz-drawer-header-bar {
  height: 25px !important;
  min-height: 25px !important;
  max-height: 25px !important;
  box-sizing: border-box !important;
}

#biz-drawer-controls-bar {
  height: 25px !important;
  min-height: 25px !important;
  max-height: 25px !important;
  box-sizing: border-box !important;
}

/* KPI Group Header Row in Bill Preview Drawer */
.biz-group-header-row,
#biz-drawer-table tbody tr.biz-group-header-row {
  height: 25px !important;
  min-height: 25px !important;
  max-height: 25px !important;
  background: #eaf2fb !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  transition: background-color 0.15s ease !important;
}

.biz-group-header-row td,
#biz-drawer-table tbody tr.biz-group-header-row td {
  height: 25px !important;
  min-height: 25px !important;
  max-height: 25px !important;
  padding: 0 10px !important;
  line-height: 24px !important;
  background: #eaf2fb !important;
  color: #002d70 !important;
  font-weight: 700 !important;
  border-bottom: 1px solid #cbd5e1 !important;
  box-sizing: border-box !important;
  transition: background-color 0.15s ease !important;
}

.biz-group-header-row:hover,
#biz-drawer-table tbody tr.biz-group-header-row:hover,
.biz-group-header-row:hover td,
#biz-drawer-table tbody tr.biz-group-header-row:hover td {
  background-color: #dbeafe !important;
}

/* ==========================================================================
   AUTHENTICATION GATE: ALL-BLUE INVERTED SAMSUNG THEME
   ========================================================================== */
.auth-blue-card {
  background-color: #002d70 !important;
  border: 2px solid #001a40 !important;
  box-shadow: 0 25px 50px -12px rgba(0, 20, 60, 0.45) !important;
  color: #ffffff !important;
}

.auth-blue-card .auth-tab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  font-family: Arial, 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.15s ease;
  background: rgba(255, 255, 255, 0.12) !important;
  color: #bfdbfe !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
}

.auth-blue-card .auth-tab-btn:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
}

.auth-blue-card .auth-tab-btn.active {
  background: #ffffff !important;
  color: #002d70 !important;
  border-color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

.auth-blue-card .auth-btn-primary {
  background: #ffffff !important;
  color: #002d70 !important;
  border: 1px solid #cbd5e1 !important;
  font-weight: 700 !important;
  border-radius: 3px;
  transition: all 0.15s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.auth-blue-card .auth-btn-primary:hover {
  background: #f1f5f9 !important;
  color: #001f4d !important;
  border-color: #94a3b8 !important;
}

.auth-blue-card .auth-btn-secondary {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  font-weight: 600 !important;
  border-radius: 3px;
  transition: all 0.15s ease;
}

.auth-blue-card .auth-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.22) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
}