/* ==========================================================================
   SISTEM REKOMENDASI KARIER MAHASISWA - DARK & LIGHT THEME STYLES
   File: assets/css/theme.css
   ========================================================================== */

/* Smooth transitions for theme switching */
body,
.landing-navbar,
.landing-hero,
.gateway-section,
.gateway-card,
.workflow-section,
.workflow-card,
.profesi-section,
.profesi-card,
.formula-section,
.formula-card,
.stat-box,
.hero-preview-box,
.form-control,
.btn-theme-toggle {
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

/* ==========================================================================
   DARK MODE OVERRIDES [data-theme="dark"] or [data-bs-theme="dark"]
   ========================================================================== */
[data-theme="dark"],
[data-bs-theme="dark"] {
  --slate-50:  #0b1120;
  --slate-100: #0f172a;
  --slate-200: #334155;
  --slate-300: #475569;
  --slate-400: #94a3b8;
  --slate-500: #cbd5e1;
  --slate-600: #e2e8f0;
  --slate-700: #f1f5f9;
  --slate-800: #f8fafc;
  --slate-900: #ffffff;
  --white:     #1e293b;

  --primary-light: rgba(5, 150, 105, 0.2);
  --primary-subtle: rgba(5, 150, 105, 0.35);
  color-scheme: dark;
}

[data-theme="dark"] body,
[data-bs-theme="dark"] body {
  background-color: #0b1120;
  color: #cbd5e1;
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6,
[data-bs-theme="dark"] h1,
[data-bs-theme="dark"] h2,
[data-bs-theme="dark"] h3,
[data-bs-theme="dark"] h4,
[data-bs-theme="dark"] h5,
[data-bs-theme="dark"] h6 {
  color: #f8fafc;
}

[data-theme="dark"] .text-dark,
[data-bs-theme="dark"] .text-dark {
  color: #f8fafc !important;
}

[data-theme="dark"] .text-muted,
[data-bs-theme="dark"] .text-muted {
  color: #94a3b8 !important;
}

[data-theme="dark"] .text-secondary,
[data-bs-theme="dark"] .text-secondary {
  color: #cbd5e1 !important;
}

/* Navbar in Dark Mode */
[data-theme="dark"] .landing-navbar,
[data-bs-theme="dark"] .landing-navbar {
  background: rgba(11, 17, 32, 0.94);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] .landing-navbar .brand-title,
[data-bs-theme="dark"] .landing-navbar .brand-title {
  color: #f8fafc;
}

[data-theme="dark"] .landing-navbar .nav-link,
[data-bs-theme="dark"] .landing-navbar .nav-link {
  color: #94a3b8;
}

[data-theme="dark"] .landing-navbar .nav-link:hover,
[data-bs-theme="dark"] .landing-navbar .nav-link:hover {
  color: #34d399;
  background: rgba(16, 185, 129, 0.16);
}

[data-theme="dark"] .landing-navbar .nav-link.active,
[data-bs-theme="dark"] .landing-navbar .nav-link.active {
  color: #10b981;
  background: rgba(16, 185, 129, 0.22);
}

[data-theme="dark"] .landing-navbar .navbar-toggler,
[data-bs-theme="dark"] .landing-navbar .navbar-toggler {
  border-color: #334155;
}

[data-theme="dark"] .landing-navbar .navbar-toggler i,
[data-bs-theme="dark"] .landing-navbar .navbar-toggler i {
  color: #f8fafc !important;
}

[data-theme="dark"] .btn-theme-toggle,
[data-bs-theme="dark"] .btn-theme-toggle {
  background: #1e293b;
  border-color: #334155;
  color: #f59e0b;
}

[data-theme="dark"] .btn-theme-toggle:hover,
[data-bs-theme="dark"] .btn-theme-toggle:hover {
  background: #334155;
  color: #fbbf24;
}

/* Hero Section in Dark Mode */
[data-theme="dark"] .landing-hero,
[data-bs-theme="dark"] .landing-hero {
  background: radial-gradient(circle at 10% 15%, rgba(16, 185, 129, 0.12) 0%, transparent 45%),
              radial-gradient(circle at 90% 85%, rgba(245, 158, 11, 0.09) 0%, transparent 45%),
              linear-gradient(180deg, #0b1120 0%, #0f172a 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .hero-pill-badge,
[data-bs-theme="dark"] .hero-pill-badge {
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(16, 185, 129, 0.35);
  color: #34d399;
}

[data-theme="dark"] .hero-heading,
[data-bs-theme="dark"] .hero-heading {
  color: #ffffff;
}

[data-theme="dark"] .hero-subtext,
[data-bs-theme="dark"] .hero-subtext {
  color: #94a3b8;
}

[data-theme="dark"] .hero-preview-box,
[data-bs-theme="dark"] .hero-preview-box {
  background: #1e293b;
  border-color: #334155;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
}

[data-theme="dark"] .preview-radar-row,
[data-bs-theme="dark"] .preview-radar-row {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .preview-radar-label,
[data-bs-theme="dark"] .preview-radar-label {
  color: #cbd5e1;
}

[data-theme="dark"] .preview-footer,
[data-bs-theme="dark"] .preview-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .btn-outline-dark,
[data-bs-theme="dark"] .btn-outline-dark {
  color: #f8fafc;
  border-color: #475569;
  background: transparent;
}

[data-theme="dark"] .btn-outline-dark:hover,
[data-bs-theme="dark"] .btn-outline-dark:hover {
  background: #334155;
  border-color: #64748b;
  color: #ffffff;
}

/* Stats Strip in Dark Mode */
[data-theme="dark"] .stat-box,
[data-bs-theme="dark"] .stat-box {
  background: #1e293b;
  border-color: #334155;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] .stat-box:hover,
[data-bs-theme="dark"] .stat-box:hover {
  border-color: #10b981;
}

[data-theme="dark"] .stat-box .stat-number,
[data-bs-theme="dark"] .stat-box .stat-number {
  color: #f8fafc;
}

[data-theme="dark"] .stat-box .stat-label,
[data-bs-theme="dark"] .stat-box .stat-label {
  color: #94a3b8;
}

/* Gateway Section in Dark Mode */
[data-theme="dark"] .gateway-section,
[data-bs-theme="dark"] .gateway-section {
  background: #0f172a;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .gateway-card.student-card,
[data-bs-theme="dark"] .gateway-card.student-card {
  background: linear-gradient(180deg, #1e293b 0%, rgba(6, 78, 59, 0.35) 100%);
  border-color: rgba(16, 185, 129, 0.4);
}

[data-theme="dark"] .gateway-card.admin-card,
[data-bs-theme="dark"] .gateway-card.admin-card {
  background: linear-gradient(180deg, #1e293b 0%, rgba(120, 53, 15, 0.35) 100%);
  border-color: rgba(245, 158, 11, 0.4);
}

[data-theme="dark"] .gateway-title,
[data-bs-theme="dark"] .gateway-title {
  color: #f8fafc;
}

[data-theme="dark"] .gateway-desc,
[data-bs-theme="dark"] .gateway-desc {
  color: #94a3b8;
}

[data-theme="dark"] .input-with-icon .form-control,
[data-bs-theme="dark"] .input-with-icon .form-control {
  background-color: #0b1120;
  border-color: #334155;
  color: #f8fafc;
}

[data-theme="dark"] .input-with-icon .form-control:focus,
[data-bs-theme="dark"] .input-with-icon .form-control:focus {
  background-color: #0b1120;
  border-color: #10b981;
  color: #f8fafc;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25);
}

[data-theme="dark"] .toggle-password-btn,
[data-bs-theme="dark"] .toggle-password-btn {
  background-color: #0b1120;
  border-color: #334155;
  color: #94a3b8;
}

[data-theme="dark"] .toggle-password-btn:hover,
[data-bs-theme="dark"] .toggle-password-btn:hover {
  background-color: #1e293b;
  color: #f8fafc;
}

[data-theme="dark"] .gateway-footer-note,
[data-bs-theme="dark"] .gateway-footer-note {
  border-top-color: rgba(255, 255, 255, 0.08);
  color: #64748b;
}

/* Workflow Section in Dark Mode */
[data-theme="dark"] .workflow-section,
[data-bs-theme="dark"] .workflow-section {
  background: #0b1120;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .workflow-card,
[data-bs-theme="dark"] .workflow-card {
  background: #1e293b;
  border-color: #334155;
}

[data-theme="dark"] .workflow-title,
[data-bs-theme="dark"] .workflow-title {
  color: #f8fafc;
}

[data-theme="dark"] .workflow-desc,
[data-bs-theme="dark"] .workflow-desc {
  color: #94a3b8;
}

[data-theme="dark"] .workflow-card.featured,
[data-bs-theme="dark"] .workflow-card.featured {
  background: linear-gradient(180deg, #1e293b 0%, rgba(6, 78, 59, 0.45) 100%);
  border-color: rgba(16, 185, 129, 0.5);
}

[data-theme="dark"] .workflow-card.featured .workflow-title,
[data-bs-theme="dark"] .workflow-card.featured .workflow-title {
  color: #34d399;
}

/* 35 Profesi Directory in Dark Mode */
[data-theme="dark"] .profesi-section,
[data-bs-theme="dark"] .profesi-section {
  background: #0f172a;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .profesi-search-input-group,
[data-bs-theme="dark"] .profesi-search-input-group {
  background: #1e293b;
  border-color: #334155;
}

[data-theme="dark"] .profesi-search-input-group .input-group-text,
[data-bs-theme="dark"] .profesi-search-input-group .input-group-text {
  background: #1e293b;
  color: #94a3b8;
}

[data-theme="dark"] .profesi-search-input-group .form-control,
[data-bs-theme="dark"] .profesi-search-input-group .form-control {
  background: #1e293b;
  color: #f8fafc;
}

[data-theme="dark"] .profesi-filter-btn,
[data-bs-theme="dark"] .profesi-filter-btn {
  background: #1e293b;
  border-color: #334155;
  color: #cbd5e1;
}

[data-theme="dark"] .profesi-filter-btn:hover,
[data-bs-theme="dark"] .profesi-filter-btn:hover {
  background: #334155;
  color: #ffffff;
}

[data-theme="dark"] .profesi-filter-btn.active,
[data-bs-theme="dark"] .profesi-filter-btn.active {
  background: #059669;
  border-color: #059669;
  color: #ffffff;
}

[data-theme="dark"] .profesi-card,
[data-bs-theme="dark"] .profesi-card {
  background: #1e293b;
  border-color: #334155;
}

[data-theme="dark"] .profesi-card:hover,
[data-bs-theme="dark"] .profesi-card:hover {
  border-color: #10b981;
}

[data-theme="dark"] .profesi-code-badge,
[data-bs-theme="dark"] .profesi-code-badge {
  background: rgba(16, 185, 129, 0.18);
  color: #34d399;
  border-color: rgba(16, 185, 129, 0.35);
}

[data-theme="dark"] .profesi-card-title,
[data-bs-theme="dark"] .profesi-card-title {
  color: #f8fafc;
}

[data-theme="dark"] .profesi-card-desc,
[data-bs-theme="dark"] .profesi-card-desc {
  color: #94a3b8;
}

[data-theme="dark"] .profesi-card-footer,
[data-bs-theme="dark"] .profesi-card-footer {
  border-top-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .profesi-card-status,
[data-bs-theme="dark"] .profesi-card-status {
  color: #64748b;
}

[data-theme="dark"] .profesi-empty-state .profesi-empty-title,
[data-bs-theme="dark"] .profesi-empty-state .profesi-empty-title {
  color: #cbd5e1;
}

[data-theme="dark"] .profesi-empty-state .profesi-empty-desc,
[data-bs-theme="dark"] .profesi-empty-state .profesi-empty-desc {
  color: #64748b;
}

/* Formula Section in Dark Mode */
[data-theme="dark"] .formula-section,
[data-bs-theme="dark"] .formula-section {
  background: #0b1120;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .formula-lead,
[data-bs-theme="dark"] .formula-lead {
  color: #94a3b8;
}

[data-theme="dark"] .formula-card,
[data-bs-theme="dark"] .formula-card {
  background: #1e293b;
  border-color: #334155;
}

[data-theme="dark"] .formula-card-title,
[data-bs-theme="dark"] .formula-card-title {
  color: #f8fafc;
}

[data-theme="dark"] .formula-card-desc,
[data-bs-theme="dark"] .formula-card-desc {
  color: #94a3b8;
}

[data-theme="dark"] .formula-card-tag,
[data-bs-theme="dark"] .formula-card-tag {
  color: #34d399;
  background: rgba(16, 185, 129, 0.2);
}

[data-theme="dark"] .formula-card.card-accent-indigo .formula-card-tag,
[data-bs-theme="dark"] .formula-card.card-accent-indigo .formula-card-tag {
  color: #a5b4fc;
  background: rgba(99, 102, 241, 0.2);
}

[data-theme="dark"] .formula-card.card-accent-gold .formula-card-tag,
[data-bs-theme="dark"] .formula-card.card-accent-gold .formula-card-tag {
  color: #fde68a;
  background: rgba(245, 158, 11, 0.2);
}

/* Footer in Dark Mode */
[data-theme="dark"] .landing-footer,
[data-bs-theme="dark"] .landing-footer {
  background-color: #070c18;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* ==========================================================================
   AUTH & LOGIN PAGE DARK MODE
   ========================================================================== */
[data-theme="dark"] body.login-body,
[data-bs-theme="dark"] body.login-body {
  background: radial-gradient(circle at 10% 20%, rgba(5, 150, 105, 0.12) 0%, transparent 45%),
              radial-gradient(circle at 90% 80%, rgba(245, 158, 11, 0.08) 0%, transparent 45%),
              #070c18;
}

[data-theme="dark"] .login-split-card,
[data-bs-theme="dark"] .login-split-card {
  background: #1e293b;
  border-color: #334155;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.6);
}

[data-theme="dark"] .login-form-panel,
[data-bs-theme="dark"] .login-form-panel {
  background: #1e293b;
}

[data-theme="dark"] .login-segmented-tabs,
[data-bs-theme="dark"] .login-segmented-tabs {
  background: #0f172a;
  border-color: #334155;
}

[data-theme="dark"] .login-segmented-tabs .nav-link,
[data-bs-theme="dark"] .login-segmented-tabs .nav-link {
  color: #94a3b8;
}

[data-theme="dark"] .login-segmented-tabs .nav-link.active,
[data-bs-theme="dark"] .login-segmented-tabs .nav-link.active {
  background: #1e293b;
  color: #f8fafc;
}

[data-theme="dark"] .login-form-panel .form-control,
[data-bs-theme="dark"] .login-form-panel .form-control {
  background-color: #0f172a;
  border-color: #334155;
  color: #f8fafc;
}

[data-theme="dark"] .login-form-panel .form-control:focus,
[data-bs-theme="dark"] .login-form-panel .form-control:focus {
  background-color: #0f172a;
  border-color: #10b981;
  color: #f8fafc;
}

/* ==========================================================================
   ADMIN & STUDENT PANEL DASHBOARD DARK MODE
   ========================================================================== */
[data-theme="dark"] #content,
[data-bs-theme="dark"] #content {
  background-color: #0b1120;
}

[data-theme="dark"] .top-navbar,
[data-bs-theme="dark"] .top-navbar {
  background: rgba(15, 23, 42, 0.95);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .top-navbar .page-title,
[data-bs-theme="dark"] .top-navbar .page-title {
  color: #f8fafc;
}

[data-theme="dark"] .card-custom,
[data-bs-theme="dark"] .card-custom {
  background: #1e293b;
  border-color: #334155;
}

[data-theme="dark"] .card-welcome-banner,
[data-bs-theme="dark"] .card-welcome-banner {
  background: linear-gradient(135deg, #1e293b 0%, rgba(6, 78, 59, 0.35) 100%) !important;
}

[data-theme="dark"] .table,
[data-bs-theme="dark"] .table {
  color: #cbd5e1;
  border-color: #334155;
}

[data-theme="dark"] .table thead,
[data-bs-theme="dark"] .table thead,
[data-theme="dark"] .table-light,
[data-bs-theme="dark"] .table-light {
  background-color: #0f172a !important;
  color: #cbd5e1 !important;
}

[data-theme="dark"] .table-hover>tbody>tr:hover>*,
[data-bs-theme="dark"] .table-hover>tbody>tr:hover>* {
  background-color: rgba(255, 255, 255, 0.04);
  color: #ffffff;
}

[data-theme="dark"] footer.bg-white,
[data-bs-theme="dark"] footer.bg-white {
  background-color: #0b1120 !important;
  border-top-color: rgba(255, 255, 255, 0.08) !important;
  color: #64748b !important;
}