/**
 * theme.css — WebReview Live Cyberpunk Theme
 * Muat file ini SETELAH CSS UI kit (AdminLTE 4 / Bootstrap 5).
 * WAJIB: Semua warna menggunakan var(--token), DILARANG hex langsung di view.
 * @see DESIGN.md
 */

/* ===================================================================
   1. TOKEN WARNA CYBERPUNK — Sumber Kebenaran Visual (DESIGN.md)
   =================================================================== */
:root {
  --nb-bg:       #080a0f;
  --nb-text:     #00ff66;
  --sb-bg:       #080a0f;
  --sb-text:     #ffffff;
  --sb-hover:    #111822;
  --card-bg:     #0c1017;
  --card-border: #00ff66;
  --card-head:   #00ff66;
  --btn-bg:      #00ff66;
  --btn-text:    #05070a;
  --body-bg:     #05070a;
  --surface:     #0c1017;
  --text:        #ffffff;
  --text-muted:  #94a3b8;
  --accent:      #00ff66;
  --link-hover:  #34d399;
  --th-bg:       #111822;
  --th-text:     #00ff66;
}

/* ===================================================================
   2. PEMETAAN KE VARIABEL BOOTSTRAP 5 / AdminLTE 4
   Mapping non-destruktif: komponen bawaan ikut tema tanpa merusak UI kit.
   =================================================================== */
:root {
  --bs-body-bg:         var(--body-bg);
  --bs-body-color:      var(--text);
  --bs-primary:         var(--accent);
  --bs-secondary-bg:    var(--surface);
  --bs-tertiary-bg:     var(--body-bg);
  --bs-border-color:    var(--card-border);
  --bs-link-color:      var(--nb-text);
  --bs-link-hover-color: var(--link-hover);
  --bs-card-bg:         var(--card-bg);
  --bs-table-bg:        var(--card-bg);
  --bs-table-striped-bg: var(--sb-hover);
}

/* ===================================================================
   3. BASE LAYOUT & BODY
   =================================================================== */
body {
  background-color: var(--body-bg);
  color: var(--text);
  font-family: 'Inter', 'Roboto', system-ui, -apple-system, sans-serif;
}

/* ===================================================================
   4. NAVBAR (AdminLTE Top Navigation)
   =================================================================== */
.app-header,
.navbar,
.main-header {
  background-color: var(--nb-bg) !important;
  border-bottom: 1px solid var(--card-border);
}

.app-header .navbar-brand,
.navbar-brand,
.brand-link {
  color: var(--nb-text) !important;
}

.app-header .nav-link,
.main-header .nav-link {
  color: var(--nb-text) !important;
}

/* ===================================================================
   5. SIDEBAR (AdminLTE Sidebar)
   =================================================================== */
.app-sidebar,
.main-sidebar,
.sidebar {
  background-color: var(--sb-bg) !important;
}

.sidebar-menu .nav-link,
.nav-sidebar .nav-link {
  color: var(--sb-text) !important;
}

.sidebar-menu .nav-link:hover,
.nav-sidebar .nav-link:hover,
.sidebar-menu .nav-link.active,
.nav-sidebar .nav-link.active {
  background-color: var(--sb-hover) !important;
  color: var(--nb-text) !important;
}

/* ===================================================================
   6. CARDS
   =================================================================== */
.card {
  background-color: var(--card-bg) !important;
  border-color: var(--card-border) !important;
  box-shadow: 0 0 15px rgba(0, 255, 102, 0.08);
}

.card-header {
  background-color: var(--card-bg) !important;
  border-bottom-color: var(--card-border) !important;
  color: var(--card-head) !important;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.card-body {
  color: var(--text);
}

/* ===================================================================
   7. TABLES
   =================================================================== */
.table {
  color: var(--text) !important;
  border-color: var(--card-border) !important;
}

.table thead th,
.table > thead > tr > th {
  background-color: var(--th-bg) !important;
  color: var(--th-text) !important;
  border-color: var(--card-border) !important;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.5px;
}

.table tbody tr {
  border-color: var(--sb-hover) !important;
}

.table tbody tr:hover {
  background-color: var(--sb-hover) !important;
}

/* ===================================================================
   8. BUTTONS
   =================================================================== */
.btn-primary,
.btn-cyber-primary {
  background-color: var(--btn-bg) !important;
  color: var(--btn-text) !important;
  border: 1px solid var(--btn-bg) !important;
  font-weight: 700 !important;
  border-radius: 8px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 0 12px rgba(0, 255, 102, 0.2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-cyber-primary:hover,
.btn-cyber-primary:focus {
  background-color: var(--nb-text) !important;
  color: var(--btn-text) !important;
  border-color: var(--nb-text) !important;
  box-shadow: 0 0 20px var(--accent), 0 4px 15px rgba(0, 255, 102, 0.4) !important;
  transform: translateY(-2px);
}

.btn-primary:active,
.btn-cyber-primary:active {
  transform: translateY(0);
  box-shadow: 0 0 8px var(--accent) !important;
}

.btn-cyber-outline {
  background-color: transparent !important;
  color: var(--accent) !important;
  border: 1px solid var(--accent) !important;
  font-weight: 700 !important;
  border-radius: 8px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-cyber-outline:hover,
.btn-cyber-outline:focus {
  background-color: var(--accent) !important;
  color: var(--btn-text) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 20px var(--accent), 0 4px 15px rgba(0, 255, 102, 0.3) !important;
  transform: translateY(-2px);
}

.btn-danger {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--btn-text) !important;
  transition: all 0.25s ease-in-out;
}

.btn-danger:hover {
  filter: brightness(1.15);
  box-shadow: 0 0 15px var(--accent);
  transform: translateY(-1px);
}

.btn-outline-primary {
  color: var(--nb-text) !important;
  border-color: var(--nb-text) !important;
  transition: all 0.25s ease-in-out;
}

.btn-outline-primary:hover {
  background-color: var(--nb-text) !important;
  color: var(--btn-text) !important;
  box-shadow: 0 0 15px var(--accent);
  transform: translateY(-2px);
}

.btn-outline-warning {
  color: hsl(30, 95%, 55%) !important;
  border-color: hsl(30, 95%, 55%) !important;
  transition: all 0.25s ease-in-out;
}

.btn-outline-warning:hover {
  background-color: hsl(30, 95%, 55%) !important;
  color: var(--btn-text) !important;
  box-shadow: 0 0 15px hsla(30, 95%, 55%, 0.5);
  transform: translateY(-2px);
}

.btn-outline-danger {
  color: hsl(0, 85%, 60%) !important;
  border-color: hsl(0, 85%, 60%) !important;
  transition: all 0.25s ease-in-out;
}

.btn-outline-danger:hover {
  background-color: hsl(0, 85%, 60%) !important;
  color: var(--text) !important;
  box-shadow: 0 0 15px hsla(0, 85%, 60%, 0.5);
  transform: translateY(-2px);
}

.btn-outline-info {
  color: var(--nb-text) !important;
  border-color: var(--nb-text) !important;
  transition: all 0.25s ease-in-out;
}

.btn-outline-info:hover {
  background-color: var(--nb-text) !important;
  color: var(--btn-text) !important;
  box-shadow: 0 0 15px var(--accent);
  transform: translateY(-2px);
}

.btn-outline-secondary {
  color: var(--text-muted) !important;
  border-color: var(--card-border) !important;
  transition: all 0.25s ease-in-out;
}

.btn-outline-secondary:hover {
  background-color: var(--surface) !important;
  color: var(--nb-text) !important;
  border-color: var(--nb-text) !important;
  box-shadow: 0 0 12px rgba(0, 255, 102, 0.25);
  transform: translateY(-2px);
}

.btn-secondary {
  background-color: var(--surface) !important;
  color: var(--text) !important;
  border: 1px solid var(--card-border) !important;
  transition: all 0.25s ease-in-out;
}

.btn-secondary:hover {
  background-color: var(--sb-hover) !important;
  color: var(--nb-text) !important;
  border-color: var(--nb-text) !important;
}

/* ===================================================================
   9. FORMS & INPUTS
   =================================================================== */
.form-control,
.form-select {
  background-color: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--card-border) !important;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--nb-text) !important;
  box-shadow: 0 0 0 0.2rem rgba(0, 255, 102, 0.2) !important;
}

.form-label {
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* ===================================================================
   10. BADGES & ALERTS
   =================================================================== */
.badge.bg-primary {
  background-color: var(--accent) !important;
}

.alert-info {
  background-color: var(--surface);
  border-color: var(--nb-text);
  color: var(--nb-text);
}

/* ===================================================================
   11. LINKS
   =================================================================== */
a {
  color: var(--nb-text);
  transition: color 0.2s ease;
}

a:hover {
  color: var(--link-hover);
}

/* ===================================================================
   12. TEXT UTILITIES
   =================================================================== */
.text-muted {
  color: var(--text-muted) !important;
}

.text-accent {
  color: var(--accent) !important;
}

.text-cyan {
  color: var(--nb-text) !important;
}

/* ===================================================================
   13. LAYOUT WRAPPER
   =================================================================== */
.app-wrapper,
.wrapper {
  background-color: var(--body-bg);
}

.content-wrapper {
  background-color: var(--body-bg) !important;
}

/* ===================================================================
   14. DROPDOWN MENUS
   =================================================================== */
.dropdown-menu {
  background-color: var(--surface) !important;
  border-color: var(--card-border) !important;
}

.dropdown-item {
  color: var(--text) !important;
}

.dropdown-item:hover {
  background-color: var(--sb-hover) !important;
  color: var(--nb-text) !important;
}

/* ===================================================================
   15. PAGINATION & DATATABLES
   =================================================================== */
.page-link {
  background-color: var(--surface) !important;
  border-color: var(--card-border) !important;
  color: var(--nb-text) !important;
}

.page-item.active .page-link {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--btn-text) !important;
}

.page-item.disabled .page-link {
  background-color: var(--body-bg) !important;
  border-color: var(--card-border) !important;
  color: var(--text-muted) !important;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing,
.dataTables_wrapper .dataTables_paginate {
  color: var(--text-muted) !important;
  padding: 0.75rem 1.25rem;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  background-color: var(--surface) !important;
  border: 1px solid var(--card-border) !important;
  color: var(--text) !important;
  border-radius: 6px;
  padding: 0.35rem 0.65rem;
}

.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
  border-color: var(--nb-text) !important;
  outline: none;
  box-shadow: 0 0 8px rgba(0, 255, 102, 0.25);
}

/* ===================================================================
   16. SCROLLBAR (Webkit)
   =================================================================== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--body-bg); }
::-webkit-scrollbar-thumb { background: var(--card-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ===================================================================
   17. UTILITY: GLOW EFFECT (Cyberpunk accent)
   =================================================================== */
.glow {
  text-shadow: 0 0 8px var(--nb-text), 0 0 20px var(--nb-text);
}

.glow-border {
  box-shadow: 0 0 8px var(--card-border), inset 0 0 8px rgba(0, 255, 102, 0.05);
}

/* ===================================================================
   18. UTILITY: DYNAMIC SCORE COLORS (Cyberpunk Palette)
   Merah (<50) -> Orange (50-69) -> Biru (70-84) -> Hijau (85-100)
   =================================================================== */
.score-red { color: hsl(0, 85%, 60%) !important; text-shadow: 0 0 12px hsla(0, 85%, 60%, 0.4); }
.score-orange { color: hsl(30, 95%, 55%) !important; text-shadow: 0 0 12px hsla(30, 95%, 55%, 0.4); }
.score-blue { color: hsl(195, 100%, 50%) !important; text-shadow: 0 0 12px hsla(195, 100%, 50%, 0.4); }
.score-green { color: var(--nb-text) !important; text-shadow: 0 0 12px var(--nb-text); }

.border-score-red { border-color: hsl(0, 85%, 60%) !important; box-shadow: 0 0 20px hsla(0, 85%, 60%, 0.25) !important; }
.border-score-orange { border-color: hsl(30, 95%, 55%) !important; box-shadow: 0 0 20px hsla(30, 95%, 55%, 0.25) !important; }
.border-score-blue { border-color: hsl(195, 100%, 50%) !important; box-shadow: 0 0 20px hsla(195, 100%, 50%, 0.25) !important; }
.border-score-green { border-color: var(--nb-text) !important; box-shadow: 0 0 20px var(--nb-text) !important; }

/* ===================================================================
   19. LIVE WORKSPACE QUEUE & HISTORY CARDS
   =================================================================== */
.queue-item,
.history-item {
  background-color: var(--surface);
  border: 1px solid var(--card-border);
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.queue-item:hover,
.history-item:hover {
  transform: translateY(-2px);
  border-color: hsl(30, 95%, 55%) !important;
  background-color: hsla(30, 95%, 55%, 0.09) !important;
  box-shadow: 0 4px 15px hsla(30, 95%, 55%, 0.22), inset 0 0 12px hsla(30, 95%, 55%, 0.06);
}

.queue-item.active,
.history-item.active {
  border-color: hsl(30, 95%, 55%) !important;
  background: linear-gradient(135deg, hsla(30, 95%, 55%, 0.22) 0%, hsla(30, 95%, 55%, 0.10) 100%) !important;
  box-shadow: 0 0 16px hsla(30, 95%, 55%, 0.35), inset 0 0 12px hsla(30, 95%, 55%, 0.12) !important;
}

.queue-item.active .badge-queue-num,
.history-item.active .badge-queue-num {
  background-color: hsl(30, 95%, 55%) !important;
  color: var(--btn-text) !important;
}

.btn-active-orange {
  background-color: hsl(30, 95%, 55%) !important;
  border-color: hsl(30, 95%, 55%) !important;
  color: var(--btn-text) !important;
  font-weight: 700 !important;
  box-shadow: 0 0 10px hsla(30, 95%, 55%, 0.45) !important;
}

/* ===================================================================
   20. LIVE WORKSPACE SMARTPHONE & DESKTOP SIMULATOR
   =================================================================== */
.mobile-phone-frame {
  background-color: var(--surface);
  border: 2px solid var(--card-border);
  border-radius: 26px;
  padding: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 16px rgba(0, 255, 102, 0.12);
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-phone-frame.is-desktop {
  border-radius: 12px;
  padding: 8px;
}

.mobile-phone-frame .phone-notch {
  width: 55px;
  height: 5px;
  background-color: hsla(0, 0%, 100%, 0.25);
  border-radius: 4px;
  margin: 4px auto 8px auto;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
  display: block;
}

.mobile-phone-frame.is-desktop .phone-notch {
  display: none !important;
}

.mobile-phone-frame .phone-screen {
  background-color: var(--body-bg);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  transition: height 0.3s ease;
  height: 500px;
}

.mobile-phone-frame.is-desktop .phone-screen {
  height: 240px;
  border-radius: 8px;
}

.mobile-phone-frame .phone-screen iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

.mobile-phone-frame .phone-home-indicator {
  width: 70px;
  height: 4px;
  background-color: hsla(0, 0%, 100%, 0.3);
  border-radius: 4px;
  margin: 8px auto 2px auto;
  display: block;
}

.mobile-phone-frame.is-desktop .phone-home-indicator {
  display: none !important;
}

.btn-viewport-mode {
  transition: all 0.2s ease;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
}

.btn-viewport-mode.active {
  background-color: var(--accent) !important;
  color: var(--btn-text) !important;
  border-color: var(--accent) !important;
}