/* ==========================================================================
   DYSHORT UNIFIED THEME LAYER (ANTI-CLASH & PERFECT CONTRAST)
   Menggantikan penuh file theme.css lama untuk akurasi Dark & Light mode.
   ========================================================================== */

:root {
  /* 🌑 CONFIGURATION DARK MODE (DEFAULT) */
  --bg: #050505;
  --surface: #111111;
  --surface-nested: #1a1a1a;
  --border: #222222;
  --border-2: #2d2d2d;
  --text: #ffffff;
  --text-muted: #aaaaaa;
  
  /* Hijau adaptif untuk mode gelap */
  --primary: #00ff99;
  --primary-hover: #00e68a;
  --primary-glow: rgba(0, 255, 153, 0.15);
  --primary-text: #000000; /* Teks hitam di dalam tombol hijau neon */
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.5);

  /* === PREMIUM DESIGN TOKENS (v2) === */
  --accent: #3fa9ff;                 /* Aksen sekunder biru untuk gradasi premium */
  --accent-glow: rgba(63, 169, 255, 0.16);
  --surface-3: #191919;              /* Elevasi ke-3 (hover states, modals) */
  --border-soft: rgba(255,255,255,0.06);
  --success: #00e676;
  --warning: #ffb020;
  --danger: #ff4d4d;
  --danger-glow: rgba(255, 77, 77, 0.15);

  --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 10px rgba(0,0,0,0.25);
  --shadow-lg: 0 25px 60px -15px rgba(0,0,0,0.55);
  --shadow-glow: 0 8px 30px -6px var(--primary-glow);

  --ease: cubic-bezier(.16,.8,.24,1);
  --dur: .28s;
}

html.light-theme,
html.light-theme body {
  /* ☀️ CONFIGURATION LIGHT MODE */
  --bg: #f5f7fb;            /* Latar belakang terang yang lembut di mata */
  --surface: #ffffff;       /* Card & Nav bar putih bersih */
  --surface-nested: #f0f2f5;/* Input & baris list abu-abu tipis */
  --border: #e2e8f0;        /* Border modern super bersih */
  --border-2: #cbd5e1;
  --text: #0f172a;          /* Teks utama gelap pekat (Sangat Jelas) */
  --text-muted: #64748b;    /* Teks deskripsi/sub-gaya */
  
  /* Hijau adaptif untuk mode terang (Tidak silau, kontras tinggi) */
  --primary: #00aa66;       /* Deep Emerald Green profesional */
  --primary-hover: #008855;
  --primary-glow: rgba(0, 170, 102, 0.1);
  --primary-text: #ffffff; /* Teks putih di dalam tombol hijau emerald */
  --shadow: 0 10px 30px rgba(15, 23, 42, 0.06);

  --accent: #0d6efd;
  --accent-glow: rgba(13, 110, 253, 0.1);
  --surface-3: #e9edf3;
  --border-soft: rgba(15,23,42,0.06);
  --success: #00aa66;
  --warning: #b5720a;
  --danger: #e0334d;
  --danger-glow: rgba(224, 51, 77, 0.1);

  --shadow-sm: 0 2px 10px rgba(15,23,42,0.05);
  --shadow-lg: 0 25px 60px -15px rgba(15,23,42,0.12);
  --shadow-glow: 0 8px 30px -6px var(--primary-glow);
}

/* ==========================================================================
   1. GLOBAL & BACKGROUND RESET
   ========================================================================== */
html, body {
  background: var(--bg) !important;
  color: var(--text) !important;
  transition: background 0.25s ease, color 0.25s ease;
}

/* Memperbaiki efek radial glow di latar belakang agar selaras di kedua mode */
.bg {
  background: var(--bg) !important;
}
html.light-theme .bg {
  background: radial-gradient(circle at top left, var(--primary-glow), transparent 40%),
              radial-gradient(circle at bottom right, rgba(0,153,255,0.05), transparent 40%), 
              var(--bg) !important;
}

/* ==========================================================================
   2. TEXT & HEADINGS TYPOGRAPHY
   ========================================================================== */
h1, h2, h3, h4, h5, h6, 
.boxTitle, .title, .name, .brand, .tableBox h2, .modalBox h2, .bioCardTitle {
  color: var(--text) !important;
}

p, span, label, li, small, 
.subtitle, .smallText, .footerCopy, .description, .meta, .bioCardUrl, .previewStat p, .loading, .empty-state {
  color: var(--text-muted) !important;
}

/* ==========================================================================
   3. SURFACES & CONTAINERS (NAV, CARDS, BOXES)
   ========================================================================== */
.nav,
.card,
.feature,
.stat,
.statCard,
.box,
.result,
.userbox,
.footer,
.mobileMenu,
.container,
.tableBox,
.contactBox,
.profileBox,
.sidebar,
.main,
.modalBox,
.previewShell,
.previewStat,
.bioCard,
.mediaCard,
.grid .card,
.landingPromo,
.header,
.hero,
.wrapper {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow);
}

/* Koreksi khusus transparansi Navbar bawaan style.css di mode terang */
html.light-theme .nav {
  background: rgba(255, 255, 255, 0.82) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid var(--border) !important;
}

/* ==========================================================================
   4. NESTED ROWS, TAGS, & PILLS
   ========================================================================== */
.link-row, 
.searchBox, 
.previewLink, 
.previewSocials a, 
.tags span, 
.pill, 
.previewMini,
.menu button {
  background: var(--surface-nested) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

/* ==========================================================================
   5. ADAPTIVE BRANDING & ACCENTS (WARNA HIJAU DINAMIS)
   ========================================================================== */
.logo, 
.promoBadge, 
.badge, 
.result a, 
.stat h2, 
.card h2, 
.cardContent h2, 
.contactBox span, 
.articleBody a, 
.shortlink, 
.verified {
  color: var(--primary) !important;
  -webkit-text-fill-color: var(--primary) !important;
  text-shadow: none !important;
}

/* Hover link navbar global */
.navLinks a:hover {
  color: var(--primary) !important;
}

/* ==========================================================================
   6. FORM INPUTS & SELECTS
   ========================================================================== */
input, textarea, select {
  background: var(--surface-nested) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}
input::placeholder, textarea::placeholder {
  color: var(--text-muted) !important;
  opacity: 0.7;
}
select option {
  background: var(--surface) !important;
  color: var(--text) !important;
}

/* ==========================================================================
   7. BUTTONS SYSTEM (PENGENDALI UTAMA BENTROK TEKS)
   ========================================================================== */

/* A. TOMBOL UTAMA (PRIMARY ACCENT BUTTONS) 
   Menggunakan latar belakang hijau adaptif, teks otomatis menyesuaikan tingkat keterbacaan */
.create-btn, 
.copyBtn, 
.uploadBtn, 
.saveBtn, 
.btn-primary, 
.orderBtn, 
.readBtn, 
.previewBtn,
.pagination button.active,
#navAuth button:not(.btnGhost) {
  background: var(--primary) !important;
  color: var(--primary-text) !important;
  -webkit-text-fill-color: var(--primary-text) !important;
  font-weight: 700 !important;
  border: none !important;
}

.create-btn:hover, 
.copyBtn:hover, 
.uploadBtn:hover, 
.saveBtn:hover, 
.btn-primary:hover, 
.orderBtn:hover, 
.readBtn:hover, 
.previewBtn:hover {
  background: var(--primary-hover) !important;
  opacity: 0.95;
}

/* B. TOMBOL KEDUA / GHOST / DARK BUTTONS
   Menggunakan latar permukaan bersarang, teks mengikuti mode warna aktif */
.btnGhost, 
.btnDark, 
.closeBtn, 
.delBtn, 
.backBtn, 
.iconBtn, 
.pagination button,
.menuBtn {
  background: var(--surface-nested) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}

.btnGhost:hover, 
.btnDark:hover, 
.closeBtn:hover, 
.delBtn:hover, 
.pagination button:not(.active):hover {
  background: var(--border) !important;
}

/* ==========================================================================
   8. SPECIFIC LAYOUT FIXES (BIO-DASHBOARD & WIDGET COMPONENT)
   ========================================================================== */
body.bio-dashboard-page .previewShell {
  background: var(--surface) !important;
}
body.bio-dashboard-page .previewLink {
  background: var(--surface-nested) !important;
  color: var(--text) !important;
}
#toast {
  background: var(--surface-nested) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}
#toast.error {
  border-color: #ff4d4d !important;
  color: #ff4d4d !important;
}

/* ==========================================================================
   9. REVISI KHUSUS .authBtn (LOGIN/LOGOUT) - KECIL, INDAH & CENTER
   ========================================================================== */

/* --- TAMPILAN DI MENU MOBILE (YANG MEMANJANG DI SCREENSHOT) --- */
#mobileMenuLinks .authBtn {
  /* KUNCI 1: Mengubah dari link panjang menjadi kotak ringkas seukuran teks */
  display: block !important;
  width: fit-content !important;
  min-width: 130px !important; /* Batas minimal lebar biar pas di jempol */
  text-align: center !important;

  /* KUNCI 2: Memaksa tombol lepas dari efek melar dan duduk manis di TENGAH */
  /* Jarak: 20px dari menu Contact di atas, otomatis tengah kiri-kanan, 10px bawah */
  margin: 20px auto 10px auto !important;

  /* Pengaturan ruang dalam tombol */
  padding: 10px 24px !important;
  border-radius: 6px !important; /* Sudut kotak rounded yang rapi */
  font-weight: 700 !important;
  line-height: 1.2 !important;

  /* Warna Tombol Mengikuti Aturan Hijau Adaptif */
  background: var(--primary) !important;
  color: var(--primary-text) !important;
  -webkit-text-fill-color: var(--primary-text) !important;
  box-shadow: 0 4px 12px var(--primary-glow) !important;
}

/* --- TAMPILAN DI NAVBAR DESKTOP (BIAR TETAP RAPI & TIDAK MERENGGANG KELUAR NAV) --- */
.navLinks .authBtn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important; /* Mencegah tombol ketarik tinggi penuh navbar desktop */
  
  height: fit-content !important;
  padding: 6px 16px !important;
  margin-left: 15px !important; /* Jarak dari menu Contact di desktop */
  border-radius: 6px !important;
  font-weight: 700 !important;

  background: var(--primary) !important;
  color: var(--primary-text) !important;
  -webkit-text-fill-color: var(--primary-text) !important;
}

/* --- EFEK KLIK/REAKSI SAAT DITEKAN (MOBILE & DESKTOP) --- */
.authBtn:active {
  transform: scale(0.95) !important;
  transition: transform 0.1s ease !important;
}

/* ==========================================================================
   FIX: WARNA TEKS TABEL / LIST DASHBOARD (AGAR TERLIHAT DI MODE TERANG)
   ========================================================================== */
.col-data {
  color: var(--text) !important;
}

/* Memperbaiki warna judul kolom (kalau ada) */
.link-header {
  color: var(--text-muted) !important;
}

/* Memperbaiki warna label "Slug:", "Shortlink:" saat dibuka di HP */
.col-data::before {
  color: var(--text-muted) !important;
}