/* ===== TOKOPEDIA CLEAN THEME - COMPREHENSIVE OVERRIDES ===== */
/* Using highly specific selectors with !important to override inline CSS */

:root {
  --tkp-ink: #31353B !important;
  --tkp-muted: #8D9399 !important;
  --tkp-line: #E5E7E9 !important;
  --tkp-paper: #F8F9FA !important;
  --tkp-white: #FFFFFF !important;
  --tkp-green: #03AC0E !important;
  --tkp-green-dark: #028A0B !important;
  --tkp-mint: #E8F9E9 !important;
  --tkp-mint-2: #F3FDF4 !important;
  --tkp-coral: #D32F2F !important;
}

/* ========== FORCE GLOBAL ========== */
html body {
  background: #F8F9FA !important;
  color: #31353B !important;
}

/* ========== SIDEBAR - MOST AGGRESSIVE ========== */
.sidebar,
div.sidebar,
#sidebar,
aside.sidebar,
.app-shell .sidebar,
.app-shell > .sidebar,
body > .app-shell > .sidebar {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  background-image: none !important;
  border-right: 1px solid #E5E7E9 !important;
  color: #31353B !important;
}

/* Sidebar nav items */
.sidebar .nav-item,
#sidebar .nav-item,
.side-nav .nav-item,
.sidebar .side-nav .nav-item {
  color: #8D9399 !important;
  background: transparent !important;
  background-image: none !important;
}

.sidebar .nav-item:hover,
#sidebar .nav-item:hover,
.side-nav .nav-item:hover {
  color: #31353B !important;
  background: #F8F9FA !important;
  background-image: none !important;
}

.sidebar .nav-item.active,
#sidebar .nav-item.active,
.side-nav .nav-item.active,
.sidebar .side-nav .nav-item.active,
.nav-item.active {
  color: #03AC0E !important;
  background: #E8F9E9 !important;
  background-color: #E8F9E9 !important;
  background-image: none !important;
  box-shadow: none !important;
}

.sidebar .nav-item.active .nav-icon,
#sidebar .nav-item.active .nav-icon {
  background: #F3FDF4 !important;
  color: #03AC0E !important;
}

/* Sidebar brand */
.sidebar-brand strong,
.sidebar-brand-copy strong,
.sidebar .sidebar-brand strong,
#sidebar .sidebar-brand strong {
  color: #31353B !important;
}

.sidebar-brand small,
.sidebar-brand-copy small {
  color: #8D9399 !important;
}

/* Sidebar bottom elements */
.sidebar-note,
.sidebar .sidebar-note {
  background: #F8F9FA !important;
  border: 1px solid #E5E7E9 !important;
}

.note-icon,
.sidebar .note-icon,
.sidebar-note .note-icon {
  background: #03AC0E !important;
  color: #FFFFFF !important;
}

.sidebar-profile,
.sidebar .sidebar-profile {
  color: #31353B !important;
}

.sidebar-profile .avatar,
.sidebar .sidebar-profile .avatar {
  background: #03AC0E !important;
  color: #FFFFFF !important;
}

.sidebar-profile small,
.sidebar .sidebar-profile small {
  color: #8D9399 !important;
}

/* Mini sun in sidebar */
.mini-sun,
.sidebar .mini-sun,
.sidebar-mini-card .mini-sun {
  background: #03AC0E !important;
  color: #FFFFFF !important;
}

/* ========== HEADER ========== */
.app-header,
header.app-header,
.content-shell .app-header {
  background: rgba(255,255,255,0.95) !important;
  border-bottom: 1px solid #E5E7E9 !important;
  border-top: none !important;
}

/* ========== CARDS & SURFACES ========== */
.card-surface,
.stat,
.admin-stat,
.intro,
.table-card,
.admin-card {
  background: #FFFFFF !important;
  border: 1px solid #E5E7E9 !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
}

.intro {
  background: #FFFFFF !important;
  background-image: none !important;
}

/* Stat top borders */
.stat,
.admin-stat {
  border-top: 3px solid #03AC0E !important;
}

.stat:nth-child(2),
.admin-stat:nth-child(2) {
  border-top-color: #028A0B !important;
}

.stat:nth-child(3),
.admin-stat:nth-child(3) {
  border-top-color: #42b549 !important;
}

.stat:nth-child(4),
.admin-stat:nth-child(4) {
  border-top-color: #03AC0E !important;
}

.stat strong,
.admin-stat strong {
  color: #31353B !important;
}

.stat small,
.admin-stat small {
  color: #8D9399 !important;
}

/* ========== BUTTONS ========== */
.btn-primary,
.button-primary,
.btn.btn-primary,
button.btn-primary,
.admin-card .btn-primary,
.admin-card button.btn-primary {
  background: #03AC0E !important;
  background-color: #03AC0E !important;
  background-image: none !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
}

.btn-primary:hover,
.button-primary:hover {
  background: #028A0B !important;
  background-color: #028A0B !important;
}

.btn-outline,
.button-outline {
  background: #FFFFFF !important;
  border: 1px solid #E5E7E9 !important;
  color: #31353B !important;
}

/* ========== TYPOGRAPHY ========== */
h1, h2, h3, h4, h5, h6,
.section-title,
.intro h1,
.intro h2,
.admin-card h3,
.page h1,
.page h2 {
  color: #31353B !important;
}

.eyebrow,
.section-kicker,
.eyebrow i {
  color: #8D9399 !important;
}

.eyebrow i,
.eyebrow svg {
  color: #03AC0E !important;
}

/* ========== TABLES ========== */
.modern-table th,
table.modern-table th,
.table-card th {
  background: #F8F9FA !important;
  color: #8D9399 !important;
}

.modern-table td,
table.modern-table td {
  border-bottom: 1px solid #E5E7E9 !important;
}

/* ========== BADGES ========== */
.badge-green,
.badge.badge-green {
  background: #E8F9E9 !important;
  color: #028A0B !important;
}

.badge-yellow,
.badge.badge-yellow {
  background: #FFF3E0 !important;
  color: #E65100 !important;
}

.badge-blue,
.badge.badge-blue {
  background: #E8F9E9 !important;
  color: #028A0B !important;
}

.badge-red,
.badge.badge-red {
  background: #FFEBEE !important;
  color: #D32F2F !important;
}

/* ========== ADMIN REQUEST STATUS ========== */
.admin-request-status,
.admin-card .admin-request-status {
  background: #FFF3E0 !important;
  color: #E65100 !important;
}

.admin-request-status.assigned,
.admin-card .admin-request-status.assigned {
  background: #E8F9E9 !important;
  color: #028A0B !important;
}

/* ========== SEARCH BOX ========== */
.search-box input,
.search-box input[type="text"] {
  background: #FFFFFF !important;
  border: 1px solid #E5E7E9 !important;
  color: #31353B !important;
}

/* ========== LOGOUT BUTTON ========== */
.btn-logout,
header .btn-logout,
.header-actions .btn-logout {
  background: #E8F9E9 !important;
  background-color: #E8F9E9 !important;
  background-image: none !important;
  color: #028A0B !important;
}

.btn-logout:hover {
  background: #F3FDF4 !important;
}

/* ========== LOADING ========== */

/* ========== TOAST ========== */
.toast {
  background: #31353B !important;
}

.toast i {
  color: #03AC0E !important;
}

/* ========== BOTTOM NAV ========== */
.bottom-nav,
nav.bottom-nav {
  background: #FFFFFF !important;
  border-top: 1px solid #E5E7E9 !important;
}

.bottom-nav button.active,
nav.bottom-nav button.active {
  color: #03AC0E !important;
}

/* ========== HERO ========== */
.hero-panel {
  background: #E8F9E9 !important;
  color: #31353B !important;
}

/* ========== WALLET ========== */
.wallet-card {
  background: #03AC0E !important;
  color: #FFFFFF !important;
}

.wallet-card::after {
  border-color: rgba(255,255,255,0.3) !important;
}

/* ========== MODALS ========== */
.modal-card {
  background: #FFFFFF !important;
}

.modal-actions {
  background: #F8F9FA !important;
}

/* ========== STATUS CHIPS ========== */
.status-chip:not(.pending) {
  background: #E8F9E9 !important;
  color: #028A0B !important;
}

.status-chip.pending {
  background: #FFF3E0 !important;
  color: #E65100 !important;
}

/* ========== PROGRESS ========== */
.progress-bar span {
  background: #03AC0E !important;
}

/* ========== AUTH PAGE ========== */
.auth-page {
  background: #F8F9FA !important;
}

.auth-card {
  background: #FFFFFF !important;
  border: 1px solid #E5E7E9 !important;
}

/* ========== MOBILE BRAND ========== */
.mobile-brand {
  color: #31353B !important;
}

/* ========== HOME PRODUCTS ========== */
.home-product-card:hover,
.task-card:hover {
  border-color: #03AC0E !important;
}

/* ========== PROFILE ========== */
.profile-hero-card {
  background: linear-gradient(135deg, #03AC0E 0%, #028A0B 100%) !important;
}

.profile-hero-avatar {
  background: #FFFFFF !important;
  color: #03AC0E !important;
}

/* ========== REDUCED MOTION ========== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

/* ===== AGGRESSIVE LOGIN PAGE FIXES ===== */
.auth-intro h1 em,
.auth-intro > h1 em,
.auth-intro h1 > em {
  color: var(--lime-dark) !important;
}

.ambient-one,
.auth-ambient.ambient-one {
  background: rgba(3,172,14,0.08) !important;
}

.ambient-two,
.auth-ambient.ambient-two {
  background: rgba(3,172,14,0.05) !important;
}

.inline-link,
button.inline-link,
.inline-link strong {
  color: var(--lime-dark) !important;
}

.link-button.strong,
button.link-button.strong {
  color: var(--lime-dark) !important;
}

.auth-page .brand-copy strong {
  color: var(--ink) !important;
}

/* Override any remaining orange in auth */
.auth-page [style*="color: #e95400"],
.auth-page [style*="color: #ff6a00"],
.auth-page [style*="color: var(--orange-dark)"] {
  color: var(--lime-dark) !important;
}

/* Admin panel remaining fixes */
.sidebar-profile .avatar,
.sidebar .sidebar-profile .avatar {
  background: var(--lime) !important;
  color: #fff !important;
}

.btn-logout,
.header-actions .btn-logout {
  background: var(--mint) !important;
  color: var(--lime-dark) !important;
}

/* Ensure all nav items are visible on white sidebar */
.nav-item,
.side-nav .nav-item,
.sidebar .side-nav .nav-item {
  color: var(--muted) !important;
}

.nav-item:hover,
.side-nav .nav-item:hover {
  color: var(--ink) !important;
  background: var(--paper) !important;
}

/* Force hide loading overlay after 2s */
@keyframes fadeout {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* Fix brand logo alignment in sidebar */
.brand-sidebar {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.brand-sidebar img:first-child {
  width: auto !important;
  height: 38px !important;
  flex-shrink: 0 !important;
}

.brand-sidebar img:last-child {
  width: auto !important;
  height: 22px !important;
  flex-shrink: 0 !important;
}

/* Fix auth header logo alignment */
.auth-header .brand {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.auth-header .brand img:first-child {
  width: auto !important;
  height: 42px !important;
  flex-shrink: 0 !important;
}

.auth-header .brand img:last-child {
  width: auto !important;
  height: 28px !important;
  flex-shrink: 0 !important;
}

/* Mobile brand fix */
.mobile-brand {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.mobile-brand img:first-child {
  width: auto !important;
  height: 28px !important;
  flex-shrink: 0 !important;
}

/* Faster loading overlay hide */

}

/* ===== FIX LOGO BACKGROUND & SIZE ===== */
/* Remove white background from all logo images */
.brand img,
.auth-header .brand img,
.sidebar .brand img,
.mobile-brand img {
  background: transparent !important;
  background-color: transparent !important;
}

/* Auth header logo sizing */
.auth-header .brand {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  text-decoration: none !important;
}

.auth-header .brand img:first-child {
  width: auto !important;
  height: 48px !important;
  object-fit: contain !important;
  display: block !important;
  background: transparent !important;
}

.auth-header .brand img:last-child {
  width: auto !important;
  height: 34px !important;
  object-fit: contain !important;
  display: block !important;
  background: transparent !important;
  margin-left: 2px !important;
}

/* Sidebar logo sizing */
.brand-sidebar,
.sidebar .brand-sidebar {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  text-decoration: none !important;
}

.brand-sidebar img:first-child,
.sidebar .brand-sidebar img:first-child {
  width: auto !important;
  height: 40px !important;
  object-fit: contain !important;
  display: block !important;
  background: transparent !important;
}

.brand-sidebar img:last-child,
.sidebar .brand-sidebar img:last-child {
  width: auto !important;
  height: 28px !important;
  object-fit: contain !important;
  display: block !important;
  background: transparent !important;
  margin-left: 2px !important;
}

/* Mobile header logo */
.mobile-brand {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.mobile-brand img:first-child {
  width: auto !important;
  height: 32px !important;
  object-fit: contain !important;
  display: block !important;
  background: transparent !important;
}

.mobile-brand img:last-child {
  width: auto !important;
  height: 22px !important;
  object-fit: contain !important;
  display: block !important;
  background: transparent !important;
}

/* Login admin logo fix */
.login-card .brand img {
  background: transparent !important;
}

/* Loading overlay fade out */
}

/* Fix loading overlay - MUST fade out properly */


/* Ensure clickable after fade */


/* Clean loading overlay fix */
.loading-overlay.is-hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  display: none !important;
}
/* ===== HALAMAN TOPUP / ISI ULANG ===== */
.topup-hero {
  background: linear-gradient(135deg, #03AC0E 0%, #028a0b 100%);
  border-radius: 16px;
  padding: 32px;
  margin-bottom: 24px;
  color: white;
  position: relative;
  overflow: hidden;
}
.topup-hero::after {
  content: '';
  position: absolute;
  right: -5%;
  bottom: -30%;
  width: 250px;
  height: 250px;
  border: 2px solid rgba(255,255,255,0.15);
  border-radius: 50%;
}
.topup-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.15);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: 16px;
}
.topup-hero h1 {
  font-size: 28px;
  font-weight: 800;
  margin: 0 0 8px;
  letter-spacing: -0.5px;
}
.topup-hero p {
  margin: 0;
  opacity: 0.9;
  font-size: 13px;
  max-width: 400px;
  line-height: 1.5;
}

.topup-layout {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 20px;
}

/* Left column */
.topup-card {
  background: white;
  border-radius: 16px;
  padding: 24px;
  border: 1px solid #e8e8e8;
  margin-bottom: 16px;
}
.topup-card-header h3 {
  margin: 0 0 20px;
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}
.qris-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid #f0f0f0;
  margin-bottom: 20px;
}
.qris-tab {
  flex: 1;
  padding: 10px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  font-size: 12px;
  font-weight: 700;
  color: #999;
  cursor: pointer;
  transition: all 0.2s;
}
.qris-tab.active {
  color: #03AC0E;
  border-bottom-color: #03AC0E;
}
.qris-display {
  text-align: center;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 12px;
  margin-bottom: 16px;
}
.qris-display img {
  max-width: 220px;
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin-bottom: 12px;
}
.qris-label {
  font-weight: 700;
  font-size: 14px;
  margin: 0 0 4px;
  color: #333;
}
.qris-hint {
  font-size: 11px;
  color: #888;
  margin: 0;
  line-height: 1.4;
}
.topup-security {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 11px;
  color: #03AC0E;
  font-weight: 600;
  padding-top: 12px;
  border-top: 1px solid #f0f0f0;
}

/* Steps */
.topup-steps-card {
  background: white;
  border-radius: 16px;
  padding: 24px;
  border: 1px solid #e8e8e8;
}
.topup-steps-card h3 {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}
.steps-subtitle {
  margin: 0 0 20px;
  font-size: 12px;
  color: #888;
}
.topup-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px dashed #f0f0f0;
}
.topup-step:last-child {
  border-bottom: none;
}
.step-num {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  background: #e8f5e9;
  color: #03AC0E;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
}
.topup-step p {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: #555;
}

/* Right column - Form */
.topup-form-card {
  background: white;
  border-radius: 16px;
  padding: 28px;
  border: 1px solid #e8e8e8;
  height: fit-content;
}
.topup-form-header {
  margin-bottom: 24px;
}
.topup-form-header .section-kicker {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #03AC0E;
  margin-bottom: 8px;
}
.topup-form-header h2 {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.5px;
}
.topup-form-header p {
  margin: 0;
  font-size: 12px;
  color: #888;
}

.topup-form-stack {
  display: grid;
  gap: 20px;
}
.topup-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.topup-label {
  display: grid;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #333;
}
.topup-label span {
  display: flex;
  align-items: center;
  gap: 6px;
}
.required-badge {
  background: #fff3e0;
  color: #e65100;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 700;
}
.topup-input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  background: #fafafa;
  transition: border-color 0.2s;
}
.topup-input-wrap:focus-within {
  border-color: #03AC0E;
  background: white;
}
.topup-input-wrap i,
.topup-input-wrap .input-prefix {
  color: #03AC0E;
  font-size: 14px;
  font-weight: 700;
}
.topup-input-wrap input {
  border: none;
  background: transparent;
  flex: 1;
  font-size: 13px;
  outline: none;
  width: 100%;
}

.amount-presets {
  margin-top: -10px;
}
.presets-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #666;
  margin-bottom: 8px;
}
.presets-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.presets-grid button {
  padding: 10px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background: #f8f9fa;
  font-size: 12px;
  font-weight: 700;
  color: #333;
  cursor: pointer;
  transition: all 0.2s;
}
.presets-grid button:hover {
  border-color: #03AC0E;
  color: #03AC0E;
  background: #e8f5e9;
}

/* Upload area */
.upload-area {
  border: 2px dashed #ddd;
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
}
.upload-area:hover {
  border-color: #03AC0E;
  background: #f8fff8;
}
.upload-placeholder i {
  font-size: 32px;
  color: #03AC0E;
  margin-bottom: 8px;
  display: block;
}
.upload-placeholder strong {
  display: block;
  font-size: 13px;
  margin-bottom: 2px;
}
.upload-placeholder span {
  display: block;
  font-size: 11px;
  color: #888;
  margin-bottom: 4px;
}
.upload-placeholder small {
  font-size: 10px;
  color: #aaa;
}
.upload-preview {
  position: relative;
}
.upload-preview img {
  max-width: 200px;
  max-height: 200px;
  border-radius: 8px;
}
.remove-proof {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #ff4444;
  color: white;
  border: none;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.topup-submit {
  padding: 14px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}
.topup-form-note {
  text-align: center;
  font-size: 11px;
  color: #888;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.topup-form-note i {
  color: #03AC0E;
}

/* Responsive */
@media (max-width: 768px) {
  .topup-layout {
    grid-template-columns: 1fr;
  }
  .topup-form-row {
    grid-template-columns: 1fr;
  }
  .topup-hero h1 {
    font-size: 22px;
  }
}