/* ═════════════════════════════════════════════════════════════════
   ART N SPEED — Backoffice Theme Override
   Master theme file untuk menyamakan tampilan backoffice dengan
   artnspeed.id (frontend).
   ── Load file ini SETELAH css/style.css ──
   ═════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap');

/* ── ANS Design Tokens (light default) ── */
:root, [data-theme=light] {
  /* ANS brand tokens */
  --ans-brand:        #F8C537;
  --ans-brand-hover:  #E5B024;
  --ans-brand-soft:   rgba(248, 197, 55, 0.12);
  --ans-brand-line:   rgba(248, 197, 55, 0.4);
  --ans-dark:         #131313;
  --ans-onpanel:      #131313;
  --ans-muted:        #64748B;
  --ans-panel:        #FFFFFF;
  --ans-panel-lo:     #F5F5F7;
  --ans-panel-mid:    #F0F0F4;
  --ans-panel-xhi:    #FAFAFC;
  --ans-edge:         #E5E7EB;
  --ans-edge-soft:    #CBD5E1;

  /* Override template tokens supaya seluruh komponen ikut berubah */
  --primary:          #F8C537;
  --primary-hover:    #E5B024;
  --primary-dark:     #A87F17;
  --secondary:        #131313;
  --secondary-dark:   #000000;
  --rgba-primary-1:   rgba(248, 197, 55, 0.10);
  --rgba-primary-2:   rgba(248, 197, 55, 0.20);
  --rgba-primary-3:   rgba(248, 197, 55, 0.30);
  --rgba-primary-4:   rgba(248, 197, 55, 0.40);
  --rgba-primary-5:   rgba(248, 197, 55, 0.50);
  --rgba-primary-6:   rgba(248, 197, 55, 0.60);
  --rgba-primary-7:   rgba(248, 197, 55, 0.70);
  --rgba-primary-8:   rgba(248, 197, 55, 0.80);
  --rgba-primary-9:   rgba(248, 197, 55, 0.90);
  --rgba-secondary-1: rgba(19, 19, 19, 0.10);
  --rgba-secondary-2: rgba(19, 19, 19, 0.20);
  --rgba-secondary-3: rgba(19, 19, 19, 0.30);
  --rgba-secondary-4: rgba(19, 19, 19, 0.40);
  --rgba-secondary-5: rgba(19, 19, 19, 0.50);

  --font-family-base:  'Inter', 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-family-title: 'Space Grotesk', 'Inter', system-ui, sans-serif;

  --title:      #131313;
  --card:       #FFFFFF;
  --text-dark:  #131313;
  --text-gray:  #64748B;
  --text:       #4B5563;
  --body-bg:    #F5F5F7;
  --light:      #F5F5F7;
  --border:     #E5E7EB;
  --bs-border-color: #E5E7EB;

  --bs-primary:        #F8C537;
  --bs-primary-rgb:    248, 197, 55;
  --bs-secondary:      #131313;
  --bs-secondary-rgb:  19, 19, 19;
  --bs-body-bg:        #F5F5F7;
  --bs-body-color:     #131313;
  --bs-body-font-family: 'Inter', 'Space Grotesk', system-ui, sans-serif;
}

/* ── Dark mode override (mengikuti pattern artnspeed.id) ── */
[data-theme=dark], body.dark-mode {
  --ans-panel:        #162238;
  --ans-panel-lo:     #0F172A;
  --ans-panel-mid:    #1E2D46;
  --ans-panel-xhi:    #243450;
  --ans-onpanel:      #F8FAFC;
  --ans-muted:        #94A3B8;
  --ans-edge:         #334155;
  --ans-edge-soft:    #334155;

  --title:      #F8FAFC;
  --card:       #162238;
  --text-dark:  #F8FAFC;
  --text-gray:  #94A3B8;
  --text:       #CBD5E1;
  --body-bg:    #0F172A;
  --light:      #1E2D46;
  --border:     #334155;
  --bs-border-color: #334155;
}

/* ═══════════════════════════════════════════════════════════════
   BASE TYPOGRAPHY
   ═══════════════════════════════════════════════════════════════ */
body {
  font-family: 'Inter', 'Space Grotesk', system-ui, -apple-system, sans-serif !important;
  background-color: var(--body-bg) !important;
  color: var(--text-dark) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.form-title,
.heading {
  font-family: 'Space Grotesk', 'Inter', sans-serif !important;
  color: var(--title) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
}

::selection { background: var(--ans-brand); color: #131313; }

/* ═══════════════════════════════════════════════════════════════
   BUTTON: brand yellow (matches artnspeed.id CTA)
   ═══════════════════════════════════════════════════════════════ */
.btn-primary,
.btn.btn-primary,
button.btn-primary {
  background-color: var(--ans-brand) !important;
  border-color: var(--ans-brand) !important;
  color: #131313 !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
  box-shadow: 0 4px 14px rgba(248, 197, 55, 0.28);
  transition: all 0.18s ease;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active {
  background-color: var(--ans-brand-hover) !important;
  border-color: var(--ans-brand-hover) !important;
  color: #131313 !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(248, 197, 55, 0.38);
}
.btn-primary:disabled { opacity: 0.6; }

.btn-secondary,
button.btn-secondary {
  background-color: #131313 !important;
  border-color: #131313 !important;
  color: #ffffff !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 600 !important;
}
.btn-secondary:hover { background-color: #000 !important; border-color: #000 !important; }

.btn-warning {
  background-color: var(--ans-brand) !important;
  border-color: var(--ans-brand) !important;
  color: #131313 !important;
}
.btn-warning:hover { background-color: var(--ans-brand-hover) !important; border-color: var(--ans-brand-hover) !important; color: #131313 !important; }

.btn-outline-primary {
  color: #131313 !important;
  border-color: var(--ans-brand) !important;
  background: transparent !important;
}
.btn-outline-primary:hover {
  background: var(--ans-brand) !important;
  color: #131313 !important;
  border-color: var(--ans-brand) !important;
}

/* ═══════════════════════════════════════════════════════════════
   TEXT / BG COLOR UTILITIES (fix contrast on brand color)
   ═══════════════════════════════════════════════════════════════ */
.text-primary { color: #131313 !important; }
.bg-primary { background-color: var(--ans-brand) !important; color: #131313 !important; }
.bg-primary-light { background-color: var(--ans-brand-soft) !important; color: #131313 !important; }
.text-warning { color: #A87F17 !important; }
.bg-warning-light { background-color: var(--ans-brand-soft) !important; }

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR ("deznav") — dark bar with yellow accent
   ═══════════════════════════════════════════════════════════════ */
.deznav {
  background: #131313 !important;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}
.deznav .menu-title {
  color: rgba(248, 197, 55, 0.7) !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
}
.deznav .metismenu > li > a {
  color: rgba(255, 255, 255, 0.72) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  transition: color 0.18s ease, background 0.18s ease;
}
.deznav .metismenu > li > a:hover,
.deznav .metismenu > li > a:focus {
  color: #F8C537 !important;
  background: rgba(248, 197, 55, 0.06) !important;
}
.deznav .metismenu > li.mm-active > a,
.deznav .metismenu > li.active > a {
  color: #F8C537 !important;
  background: rgba(248, 197, 55, 0.10) !important;
  border-left: 3px solid #F8C537;
}
.deznav .metismenu > li > a svg path,
.deznav .metismenu > li > a svg polygon { transition: fill 0.18s ease; }
.deznav .metismenu > li:hover > a svg path[fill]:not([fill="none"]) { fill: #F8C537 !important; }
.deznav .metismenu ul a {
  color: rgba(255, 255, 255, 0.55) !important;
  font-family: 'Inter', sans-serif !important;
}
.deznav .metismenu ul a:hover,
.deznav .metismenu ul a.mm-active { color: #F8C537 !important; }
.deznav .nav-text { font-size: 14px !important; }
.deznav .copyright { color: rgba(255,255,255,0.4) !important; }

/* ═══════════════════════════════════════════════════════════════
   HEADER / TOP NAV
   ═══════════════════════════════════════════════════════════════ */
.nav-header {
  background: #131313 !important;
  border-bottom: 2px solid #F8C537 !important;
}
.nav-header .brand-logo,
.nav-header .brand-title { color: #F8C537 !important; }
.nav-control .hamburger .line svg path { fill: #F8C537 !important; }

.header {
  background: var(--card) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}
.header .header-content { padding: 0 1.5rem; }

/* Notif icon */
.header .nav-item svg path[fill="#222B40"],
.header .nav-item svg path[fill="#000000"] { fill: #131313 !important; }
.badge-notify {
  background: var(--ans-brand) !important;
  color: #131313 !important;
  font-weight: 700 !important;
}

/* ═══════════════════════════════════════════════════════════════
   CARD
   ═══════════════════════════════════════════════════════════════ */
.card {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.03) !important;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.card.box-hover:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
}
.card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--border) !important;
}
.card-header h4,
.card-header .card-title { font-family: 'Space Grotesk', sans-serif !important; }

/* Icon boxes (dashboard stat cards) */
.icon-box { border-radius: 12px !important; }
.icon-box.bg-primary-light { background-color: var(--ans-brand-soft) !important; color: #A87F17 !important; }
.icon-box.bg-primary-light i,
.icon-box.bg-primary-light svg path { color: #A87F17 !important; fill: #A87F17 !important; }
.icon-box.bg-warning-light { background-color: var(--ans-brand-soft) !important; }
.icon-box.bg-warning-light i { color: #A87F17 !important; }
.icon-box.bg-success-light { background-color: rgba(58, 155, 148, 0.14) !important; }
.icon-box.bg-danger-light  { background-color: rgba(255, 94, 94, 0.14) !important; }

.total-projects h3 {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
  color: var(--text-dark) !important;
}
.total-projects span {
  color: var(--text-gray) !important;
  font-size: 13px !important;
  letter-spacing: 0.02em;
}

/* ═══════════════════════════════════════════════════════════════
   FORM (inputs, labels)
   ═══════════════════════════════════════════════════════════════ */
.form-control {
  border-radius: 10px !important;
  border: 1.5px solid var(--border) !important;
  background: var(--card) !important;
  color: var(--text-dark) !important;
  font-family: 'Inter', sans-serif !important;
  padding: 0.7rem 1rem !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.form-control:focus {
  border-color: var(--ans-brand) !important;
  box-shadow: 0 0 0 4px var(--ans-brand-soft) !important;
  background: var(--card) !important;
  color: var(--text-dark) !important;
}
.form-check-input:checked {
  background-color: var(--ans-brand) !important;
  border-color: var(--ans-brand) !important;
}
.form-label, label { color: var(--text-dark) !important; font-weight: 500 !important; font-family: 'Inter', sans-serif !important; }

/* ═══════════════════════════════════════════════════════════════
   LOGIN PAGE (browse-job / login-style3)
   Layout: [ HERO DARK (kiri, wide) | FORM PUTIH (kanan) ]
   ═══════════════════════════════════════════════════════════════ */
.browse-job.login-style3 { background: #0b0b0b !important; }
.browse-job.login-style3 .bg-img-fix {
  background: transparent !important;
  position: relative;
  padding: 0 !important;
}
.browse-job.login-style3 .row { position: relative; z-index: 1; margin: 0; }

/* ── HERO KIRI (hanya tampil di ≥768px, di mobile Bootstrap d-none menghide) ── */
.browse-job.login-style3 .ans-login-hero {
  position: relative;
  background:
    radial-gradient(circle at 22% 28%, rgba(248,197,55,0.22) 0%, transparent 42%),
    radial-gradient(circle at 78% 78%, rgba(248,197,55,0.10) 0%, transparent 55%),
    linear-gradient(135deg, #131313 0%, #1a1a1a 55%, #0b0b0b 100%) !important;
  color: #ffffff !important;
  overflow: hidden;
  min-height: 100vh;
  padding: 3rem 2rem;
  align-items: center;
  justify-content: center;
}
/* Di mobile: paksa hilang biar tidak numpuk di atas form */
@media (max-width: 767.98px) {
  .browse-job.login-style3 .ans-login-hero { display: none !important; }
}
.ans-login-hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(circle at center, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(circle at center, #000 30%, transparent 75%);
  pointer-events: none;
}
.ans-login-hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, #F8C537 30%, #F8C537 70%, transparent);
  opacity: 0.6;
}
.ans-login-hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 520px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ans-login-hero-logo {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 118px; height: 118px;
  border-radius: 26px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(248,197,55,0.25);
  margin-bottom: 2rem;
  box-shadow: 0 12px 40px rgba(0,0,0,0.4), 0 0 0 6px rgba(248,197,55,0.05);
}
.ans-login-hero-logo img {
  width: 74px;
  height: auto;
  filter: drop-shadow(0 6px 18px rgba(248,197,55,0.28));
}
/* selector diperspesifik supaya menang lawan base h1/p rule di theme */
.browse-job.login-style3 .ans-login-hero-eyebrow {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.32em !important;
  color: #F8C537 !important;
  margin-bottom: 1.25rem !important;
  text-transform: uppercase;
}
.browse-job.login-style3 h1.ans-login-hero-title {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: clamp(2.2rem, 3.6vw, 3.2rem) !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
  color: #ffffff !important;
  margin: 0 0 1.5rem 0 !important;
}
.browse-job.login-style3 h1.ans-login-hero-title .ans-highlight {
  background: #F8C537 !important;
  color: #131313 !important;
  padding: 0 0.5rem !important;
  display: inline-block;
  transform: rotate(-1deg);
  border-radius: 3px;
}
.browse-job.login-style3 p.ans-login-hero-sub {
  font-family: 'Inter', sans-serif !important;
  font-size: 1rem !important;
  color: rgba(255,255,255,0.72) !important;
  line-height: 1.7 !important;
  max-width: 460px;
  margin: 0 auto 2.5rem auto !important;
}
.browse-job.login-style3 .ans-login-hero-foot {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.5) !important;
}
.browse-job.login-style3 .ans-login-hero-foot span { color: rgba(255,255,255,0.5) !important; }
.browse-job.login-style3 .ans-login-hero-foot .ans-dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: #F8C537;
  display: inline-block;
}

/* ── PANEL KANAN (form) ── */
.browse-job.login-style3 .bg-white,
.ans-login-panel {
  background: #ffffff !important;
  box-shadow: -30px 0 80px rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem !important;
  min-height: 100vh;
}
.ans-login-panel .login-form {
  width: 100%;
  max-width: 440px;
}
.login-form.style-2 { padding: 1.5rem 2rem; }
.login-form .card-body { padding: 0.5rem 0; }
.ans-login-brand { border-bottom: 1px solid var(--border); margin-bottom: 1.25rem; }
.ans-login-tag {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.28em;
  color: #64748B;
}
.login-form .form-title {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 2rem !important;
  font-weight: 700 !important;
  color: #131313 !important;
  margin-bottom: 0.5rem !important;
  letter-spacing: -0.02em;
}
.login-form .dz-separator.bg-primary,
.login-form .dz-separator {
  background: var(--ans-brand) !important;
  height: 3px !important;
  width: 60px !important;
  border-radius: 3px;
}
.login-form p { color: #64748B !important; font-family: 'Inter', sans-serif; margin-bottom: 1.75rem !important; }
.login-form .form-control-lg {
  padding: 0.9rem 1.1rem !important;
  font-size: 15px !important;
  border-radius: 12px !important;
}
.login-form .btn-primary.btn-lg {
  padding: 0.95rem 2rem !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.login-form .form-check-label { color: #64748B !important; font-size: 13px; }
.card-footer .bottom-footer span { color: #64748B !important; font-family: 'Inter', sans-serif; font-size: 13px; }

/* ── RESPONSIVE ── */
@media (max-width: 991.98px) {
  .ans-login-hero-inner { padding: 2.5rem 2rem; }
  .ans-login-hero-logo img { width: 140px; margin-bottom: 1.75rem; }
}
@media (max-width: 767.98px) {
  .ans-login-panel { padding: 1rem !important; min-height: 100vh; box-shadow: none; }
  .ans-login-panel .login-form { max-width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════
   TABLE
   ═══════════════════════════════════════════════════════════════ */
.table thead th {
  font-family: 'Space Grotesk', sans-serif !important;
  color: var(--text-dark) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--border) !important;
}
.table td { color: var(--text-dark) !important; font-family: 'Inter', sans-serif !important; }

/* ═══════════════════════════════════════════════════════════════
   BADGE / PILL
   ═══════════════════════════════════════════════════════════════ */
.badge.bg-primary,
.badge-primary { background-color: var(--ans-brand) !important; color: #131313 !important; }

/* ═══════════════════════════════════════════════════════════════
   ANY-CARD (welcome banner on dashboard)
   ═══════════════════════════════════════════════════════════════ */
.any-card .heading {
  font-family: 'Space Grotesk', sans-serif !important;
  color: var(--text-dark) !important;
}
.any-card .c-con span { color: var(--text-gray) !important; }

.ans-welcome-card {
  background: linear-gradient(135deg, #131313 0%, #1f1f1f 100%) !important;
  border: none !important;
  color: #fff !important;
  position: relative;
  overflow: hidden !important;
}
.ans-welcome-card::before {
  content: '';
  position: absolute;
  right: -60px; top: -60px;
  width: 260px; height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(248,197,55,0.22) 0%, transparent 70%);
  pointer-events: none;
}
.ans-welcome-card::after {
  content: '';
  position: absolute;
  left: -40px; bottom: -80px;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(248,197,55,0.10) 0%, transparent 70%);
  pointer-events: none;
}
.ans-welcome-card .card-body { position: relative; z-index: 1; padding: 2rem 2.25rem; }
.ans-welcome-card .heading,
.ans-welcome-card .any-card .heading { color: #fff !important; font-size: 1.6rem !important; }
.ans-welcome-card .heading strong { color: var(--ans-brand) !important; }
.ans-welcome-card .c-con span { color: rgba(255,255,255,0.65) !important; font-family: 'Inter', sans-serif; }

.ans-eyebrow {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.28em;
  color: var(--ans-brand);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════ */
.footer.out-footer {
  background: transparent !important;
}
.footer .copyright p {
  color: var(--text-gray) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
}
.footer .copyright p::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ans-brand);
  margin-right: 8px;
  vertical-align: middle;
}

/* ═══════════════════════════════════════════════════════════════
   SCROLLBAR (subtle)
   ═══════════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(19,19,19,0.18); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--ans-brand); }

/* ═══════════════════════════════════════════════════════════════
   DROPDOWN
   ═══════════════════════════════════════════════════════════════ */
.dropdown-menu {
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 40px rgba(0,0,0,0.08) !important;
  padding: 0.5rem !important;
}
.dropdown-item:hover, .dropdown-item:focus {
  background: var(--ans-brand-soft) !important;
  color: #131313 !important;
  border-radius: 8px;
}

/* ═══════════════════════════════════════════════════════════════
   MISC — restore contrast on legacy SVG icon fills
   ═══════════════════════════════════════════════════════════════ */
svg path[fill="#452B90"] { fill: #131313 !important; }
svg path[fill="#F8B940"] { fill: #F8C537 !important; }