/* PayKita · Digikita family visual system
   UI-only override layer. Business/payment logic is intentionally untouched. */
:root {
  --dk-primary:#0D4694;
  --dk-primary-strong:#083A7B;
  --dk-primary-deep:#072B6A;
  --dk-primary-soft:#EEF5FF;
  --dk-ink:#101828;
  --dk-text:#344054;
  --dk-muted:#667085;
  --dk-subtle:#98A2B3;
  --dk-bg:#F7F9FC;
  --dk-white:#FFFFFF;
  --dk-border:#E4E7EC;
  --dk-border-strong:#D0D5DD;
  --dk-success:#079455;
  --dk-success-bg:#ECFDF3;
  --dk-warning:#DC6803;
  --dk-warning-bg:#FFFAEB;
  --dk-danger:#D92D20;
  --dk-danger-bg:#FEF3F2;
  --dk-sidebar:252px;
  --dk-radius-card:14px;
  --dk-radius-control:10px;
  --dk-shadow:0 1px 2px rgba(16,24,40,.04);
  --dk-shadow-pop:0 14px 34px rgba(16,24,40,.12);
}

html { background:var(--dk-bg); }
body,
body *,
button,input,select,textarea {
  font-family:"Plus Jakarta Sans",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
}
body {
  background:var(--dk-bg) !important;
  color:var(--dk-ink) !important;
  -webkit-font-smoothing:antialiased;
}
body::selection { background:#DCEAFF; color:var(--dk-primary-deep); }
a { transition:color .16s ease,background-color .16s ease,border-color .16s ease,transform .16s ease,box-shadow .16s ease; }

/* APP SHELL */
.app-shell {
  min-height:100vh !important;
  background:var(--dk-bg) !important;
  grid-template-columns:var(--dk-sidebar) minmax(0,1fr) !important;
}
.content {
  width:100% !important;
  max-width:none !important;
  padding:32px 36px 48px !important;
  background:var(--dk-bg) !important;
}
.content > * { max-width:1280px; margin-left:auto; margin-right:auto; }
.page-head {
  align-items:flex-start !important;
  margin:0 auto 24px !important;
  padding:0 0 20px !important;
  border-bottom:1px solid var(--dk-border) !important;
}
.page-head h1,
.content h1 {
  color:var(--dk-ink) !important;
  font-size:30px !important;
  line-height:1.2 !important;
  font-weight:750 !important;
  letter-spacing:-.035em !important;
}
.page-head p,.content .muted { color:var(--dk-muted) !important; }

/* SIDEBAR */
.retro-sidebar,
.sidebar.retro-sidebar {
  width:var(--dk-sidebar) !important;
  min-width:var(--dk-sidebar) !important;
  min-height:100vh !important;
  position:sticky !important;
  top:0 !important;
  align-self:start !important;
  padding:22px 14px 18px !important;
  background:#fff !important;
  border-right:1px solid var(--dk-border) !important;
  box-shadow:none !important;
  color:var(--dk-text) !important;
}
.retro-sidebar-top { padding:0 8px 18px !important; border-bottom:1px solid var(--dk-border) !important; }
.retro-sidebar .sidebar-brand,
.sidebar-brand { min-height:48px !important; align-items:center !important; }
.sidebar-logo-wordmark { width:auto !important; max-width:155px !important; height:38px !important; object-fit:contain !important; object-position:left center !important; }
.retro-sidebar .sidebar-brand small,
.sidebar-brand small {
  display:block !important;
  margin-top:0 !important;
  color:var(--dk-muted) !important;
  font-size:10px !important;
  font-weight:700 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
}
.retro-sidebar-label {
  margin:18px 10px 8px !important;
  color:var(--dk-subtle) !important;
  font-size:10px !important;
  line-height:16px !important;
  font-weight:750 !important;
  letter-spacing:.1em !important;
}
.retro-nav { display:grid !important; gap:4px !important; margin:0 !important; }
.retro-nav a,
.retro-logout {
  min-height:42px !important;
  padding:0 12px !important;
  border:1px solid transparent !important;
  border-radius:10px !important;
  color:#475467 !important;
  background:transparent !important;
  font-size:13px !important;
  font-weight:600 !important;
}
.retro-nav a:hover,
.retro-logout:hover {
  background:#F8FAFC !important;
  color:var(--dk-primary) !important;
}
.retro-nav a.active {
  background:var(--dk-primary-soft) !important;
  color:var(--dk-primary) !important;
  border-color:#D8E7FC !important;
  box-shadow:none !important;
  font-weight:700 !important;
}
.nav-icon {
  width:19px !important;
  height:19px !important;
  color:currentColor !important;
  opacity:.95 !important;
}
.nav-icon svg { width:19px !important; height:19px !important; fill:none !important; stroke:currentColor !important; stroke-width:1.9 !important; stroke-linecap:round !important; stroke-linejoin:round !important; }
.retro-sidebar-footer {
  margin-top:auto !important;
  padding:16px 8px 0 !important;
  border-top:1px solid var(--dk-border) !important;
  background:transparent !important;
}
.retro-sidebar-footer .footer-label { margin:0 2px 10px !important; color:var(--dk-subtle) !important; }
.retro-sidebar-footer .user-mini { padding:10px !important; border-radius:10px !important; background:#F9FAFB !important; border:1px solid var(--dk-border) !important; }
.retro-sidebar-footer .user-mini strong { color:var(--dk-ink) !important; font-size:12px !important; }
.retro-sidebar-footer .user-mini small { color:var(--dk-muted) !important; font-size:10px !important; }
.retro-logout { width:100% !important; margin-top:8px !important; justify-content:flex-start !important; cursor:pointer !important; }

/* CARDS / PANELS */
.card,
.content .card,
.panel,
.provider-dashboard-card,
.qris-builder-panel,
.project-stat,
.profile-card,
.dbs-card,
.dbs-metric,
.ads-card {
  background:#fff !important;
  border:1px solid var(--dk-border) !important;
  border-radius:var(--dk-radius-card) !important;
  box-shadow:var(--dk-shadow) !important;
}
.content .card { padding:22px !important; }
.content .card > h2:first-child,
.content .card > .card-head:first-child,
.content .card.api-section > .endpoint-title:first-child {
  background:transparent !important;
  color:var(--dk-ink) !important;
  border-color:var(--dk-border) !important;
}
.content .card > h2:first-child,
.content .card > .card-head:first-child h2,
.content .card.api-section > .endpoint-title:first-child h2,
.panel-badge {
  color:var(--dk-ink) !important;
  font-weight:700 !important;
  letter-spacing:-.02em !important;
}
.content .card.api-section > .endpoint-title:first-child .endpoint-path,
.content .card.api-section > .endpoint-title:first-child .mode-tag,
.content .card > .card-head:first-child .text-link { color:var(--dk-primary) !important; }

/* METRICS */
.cards { gap:16px !important; }
.content .card.metric,
.dbs-metric { min-height:136px !important; padding:20px !important; }
.content .card.metric > span:first-child,
.metric span,
.dbs-metric-top span:first-child { color:var(--dk-muted) !important; font-size:13px !important; font-weight:600 !important; }
.content .card.metric > strong,
.metric strong,
.dbs-metric strong { color:var(--dk-ink) !important; font-size:28px !important; line-height:1.15 !important; letter-spacing:-.035em !important; font-weight:750 !important; }

/* FORMS */
label { color:var(--dk-text) !important; font-size:13px !important; font-weight:600 !important; }
input,textarea,select,
.content input,.content textarea,.content select,
.login-card input,.login-card textarea,.login-card select {
  border:1px solid var(--dk-border-strong) !important;
  border-radius:9px !important;
  background:#fff !important;
  color:var(--dk-ink) !important;
  box-shadow:none !important;
  min-height:44px !important;
  font-size:13px !important;
}
input::placeholder,textarea::placeholder { color:var(--dk-subtle) !important; }
input:focus,textarea:focus,select:focus,
.content input:focus,.content textarea:focus,.content select:focus,
.login-card input:focus,.login-card textarea:focus,.login-card select:focus {
  border-color:var(--dk-primary) !important;
  box-shadow:0 0 0 3px rgba(13,70,148,.10) !important;
  outline:none !important;
}

/* BUTTONS */
.btn,
.content .btn,
button.btn,
a.btn {
  min-height:42px !important;
  border-radius:10px !important;
  padding:0 15px !important;
  font-size:13px !important;
  line-height:1 !important;
  font-weight:650 !important;
  box-shadow:none !important;
  transition:.17s ease !important;
}
.btn:hover,.content .btn:hover { transform:translateY(-1px) !important; }
.btn-primary,.content .btn-primary,.login-card .btn-primary {
  background:var(--dk-primary) !important;
  border-color:var(--dk-primary) !important;
  color:#fff !important;
}
.btn-primary:hover,.content .btn-primary:hover,.login-card .btn-primary:hover {
  background:var(--dk-primary-strong) !important;
  border-color:var(--dk-primary-strong) !important;
}
.btn:not(.btn-primary):not(.btn-danger),
.content .btn:not(.btn-primary):not(.btn-danger) {
  background:#fff !important;
  border-color:var(--dk-border-strong) !important;
  color:var(--dk-text) !important;
}
.btn:not(.btn-primary):not(.btn-danger):hover { background:#F9FAFB !important; border-color:#98A2B3 !important; }
.btn-danger { background:var(--dk-danger-bg) !important; border-color:#FECDCA !important; color:var(--dk-danger) !important; }
.btn-small { min-height:34px !important; padding:0 11px !important; font-size:12px !important; }
.text-link,.auth-link { color:var(--dk-primary) !important; font-weight:650 !important; }

/* TABLES */
.table-wrap,.content .table-wrap,.dbs-table-wrap,.ads-table-wrap {
  border:1px solid var(--dk-border) !important;
  border-radius:12px !important;
  overflow:auto !important;
  background:#fff !important;
}
table { border-collapse:collapse !important; }
.content table th,.dbs-table th,.ads-table th {
  background:#F9FAFB !important;
  color:#475467 !important;
  border-color:var(--dk-border) !important;
  font-size:11px !important;
  font-weight:700 !important;
  letter-spacing:.02em !important;
  text-transform:none !important;
}
.content table td,.dbs-table td,.ads-table td { border-color:var(--dk-border) !important; color:var(--dk-text) !important; font-size:12px !important; }
.content table tbody tr:hover,.dbs-table tbody tr:hover,.ads-table tbody tr:hover { background:#FCFCFD !important; }
.mono,code,pre,.endpoint-path,.mode-tag,.code-title { font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace !important; }
pre { border-radius:10px !important; }

/* STATUS / NOTES */
.badge,.status-chip,.panel-badge,.dbs-chip,.dbs-badge,.ads-pill {
  border-radius:999px !important;
  font-size:11px !important;
  font-weight:700 !important;
}
.badge.success,.status-chip.success,.dbs-badge.paid,.ads-pill.ok { background:var(--dk-success-bg) !important; color:var(--dk-success) !important; }
.badge.warning,.dbs-badge.pending { background:var(--dk-warning-bg) !important; color:var(--dk-warning) !important; }
.badge.danger,.dbs-badge.expired,.dbs-badge.cancelled,.ads-pill.off { background:var(--dk-danger-bg) !important; color:var(--dk-danger) !important; }
.api-note,.status-box,.key-help > div,.sandbox-box,.empty,
.provider-info-note,.provider-standby-note,.qris-inline-empty {
  border-color:#D6E4F7 !important;
  border-radius:10px !important;
  background:#F6FAFF !important;
  color:#475467 !important;
}
.flash { border-radius:10px !important; box-shadow:none !important; }

/* DASHBOARD PAGE */
.dbs-page { max-width:1280px !important; color:var(--dk-ink) !important; }
.dbs-head {
  margin-bottom:22px !important;
  padding:0 0 20px !important;
  border-bottom:1px solid var(--dk-border) !important;
}
.dbs-head h1 { color:var(--dk-ink) !important; font-size:30px !important; font-weight:750 !important; letter-spacing:-.035em !important; }
.dbs-head p { color:var(--dk-muted) !important; }
.dbs-statuses { gap:7px !important; }
.dbs-chip { border:0 !important; background:#F2F4F7 !important; color:#475467 !important; padding:7px 10px !important; }
.dbs-chip.ok { color:var(--dk-success) !important; background:var(--dk-success-bg) !important; }
.dbs-chip.bad { color:#B42318 !important; background:var(--dk-danger-bg) !important; }
.dbs-chip::before { background:currentColor !important; }
.dbs-metrics { gap:16px !important; margin-bottom:20px !important; }
.dbs-metric-top { color:var(--dk-muted) !important; }
.dbs-metric-icon {
  width:36px !important;height:36px !important;display:grid !important;place-items:center !important;
  border-radius:9px !important;background:var(--dk-primary-soft) !important;color:var(--dk-primary) !important;font-size:16px !important;
}
.dbs-trend { color:var(--dk-success) !important; font-size:11px !important; }
.dbs-trend.neutral { color:var(--dk-muted) !important; }
.dbs-card { padding:20px !important; margin-bottom:20px !important; }
.dbs-card-head h2,.dbs-orders-top h2 { color:var(--dk-ink) !important; font-size:17px !important; letter-spacing:-.02em !important; }
.dbs-summary { color:var(--dk-muted) !important; }
.dbs-summary strong { color:var(--dk-text) !important; }
.dbs-export summary { border-color:var(--dk-border-strong) !important; border-radius:9px !important; color:var(--dk-primary) !important; background:#fff !important; font-size:12px !important; }
.dbs-export-menu { border-color:var(--dk-border) !important; box-shadow:var(--dk-shadow-pop) !important; }
.dbs-chart-box { border-color:var(--dk-border) !important; border-radius:10px !important; background:#FBFCFE !important; }
.dbs-bar { background:#D6E4F7 !important; border-radius:4px 4px 0 0 !important; }
.dbs-bar.paid { background:var(--dk-primary) !important; }
.dbs-legend i { background:#D6E4F7 !important; }.dbs-legend.paid i { background:var(--dk-primary) !important; }
.dbs-orders-card { padding:0 !important; }
.dbs-orders-top { border-color:var(--dk-border) !important; }
.dbs-filters { padding:3px !important; border-color:var(--dk-border) !important; background:#F2F4F7 !important; }
.dbs-filters a { color:var(--dk-muted) !important; font-size:11px !important; border-radius:7px !important; }
.dbs-filters a.active { background:#fff !important; color:var(--dk-primary) !important; box-shadow:0 1px 2px rgba(16,24,40,.08) !important; font-weight:700 !important; }
.dbs-order-link,.dbs-action { color:var(--dk-primary) !important; }
.dbs-pagination { border-color:var(--dk-border) !important; color:var(--dk-muted) !important; }
.dbs-pagebtns a,.dbs-pagebtns span { border-color:var(--dk-border) !important; border-radius:8px !important; background:#fff !important; }

/* AUTH */
.login-wrap,.checkout-wrap,.login-stitch {
  min-height:100svh !important;
  padding:28px 16px !important;
  background:
    radial-gradient(circle at 14% 14%,rgba(13,70,148,.08),transparent 28%),
    radial-gradient(circle at 90% 85%,rgba(13,70,148,.06),transparent 26%),
    var(--dk-bg) !important;
}
.login-card,.checkout-card,.login-stitch-card {
  width:min(470px,100%) !important;
  border:1px solid var(--dk-border) !important;
  border-radius:16px !important;
  background:#fff !important;
  box-shadow:0 18px 55px rgba(16,24,40,.08) !important;
}
.login-card { padding:30px !important; }
.login-card h1,.login-stitch-title h2 { color:var(--dk-ink) !important; letter-spacing:-.03em !important; }
.login-brand { justify-content:center !important; margin-bottom:24px !important; }
.auth-logo-wordmark { max-width:180px !important; max-height:52px !important; object-fit:contain !important; }
.auth-brand-copy { text-align:center !important; }
.auth-brand-copy small { color:var(--dk-muted) !important; }
.auth-divider { color:var(--dk-muted) !important; }
.btn-google-auth,.login-stitch-google { border-color:var(--dk-border-strong) !important; border-radius:10px !important; color:var(--dk-text) !important; background:#fff !important; }

/* PROVIDER / PROJECT / PROFILE pages */
.provider-page-title,.profile-page-title { color:var(--dk-ink) !important; }
.provider-panel-body,.provider-setting-row,.profile-info-item { border-color:var(--dk-border) !important; }
.provider-section-icon,.profile-section-icon { color:var(--dk-primary) !important; background:var(--dk-primary-soft) !important; border-radius:9px !important; }
.gopay-switch.on,.ads-toggle.on { background:var(--dk-primary) !important; }
.project-counter,.project-stat { border-color:var(--dk-border) !important; }

/* MOBILE */
.mobile-sidebar-burger {
  display:none;
  border:1px solid var(--dk-border) !important;
  border-radius:10px !important;
  background:#fff !important;
  color:var(--dk-primary) !important;
  box-shadow:0 8px 24px rgba(16,24,40,.10) !important;
}
.mobile-sidebar-clickout { background:rgba(16,24,40,.28) !important; backdrop-filter:blur(2px); }

/* Soft page entrance */
@media (prefers-reduced-motion:no-preference) {
  .content > * { animation:dkPageIn .34s cubic-bezier(.2,.75,.3,1) both; }
  @keyframes dkPageIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
}

@media (max-width:980px) {
  .content { padding:28px 24px 42px !important; }
  .cards.four { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}
@media (max-width:760px) {
  .app-shell { display:block !important; }
  .content { padding:76px 16px 34px !important; }
  .mobile-sidebar-burger {
    display:grid !important;place-items:center !important;position:fixed !important;top:14px !important;left:14px !important;z-index:1301 !important;
    width:44px !important;height:44px !important;font-size:0 !important;
  }
  .mobile-sidebar-burger::before { content:""; width:20px;height:14px; background:linear-gradient(currentColor,currentColor) top/100% 2px no-repeat,linear-gradient(currentColor,currentColor) center/100% 2px no-repeat,linear-gradient(currentColor,currentColor) bottom/100% 2px no-repeat; }
  .retro-sidebar,.sidebar.retro-sidebar {
    position:fixed !important; inset:0 auto 0 0 !important; z-index:1300 !important; width:min(286px,86vw) !important; min-width:0 !important;
    transform:translateX(-102%) !important; transition:transform .23s ease !important; box-shadow:0 18px 50px rgba(16,24,40,.16) !important;
  }
  body.paykita-mobile-sidebar-open .retro-sidebar { transform:translateX(0) !important; }
  .dbs-metrics,.cards.four { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .dbs-head { flex-direction:column !important; }
  .dbs-statuses { justify-content:flex-start !important; }
  .page-head h1,.content h1,.dbs-head h1 { font-size:25px !important; }
  .content .card { padding:18px !important; }
  .login-card { padding:24px 20px !important; }
}
@media (max-width:420px) {
  .dbs-metrics,.cards.four { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:10px !important; }
  .dbs-metric,.content .card.metric { min-height:124px !important; padding:14px !important; }
  .dbs-metric strong,.content .card.metric > strong { font-size:22px !important; }
}