/* ============================================================================
   Admin Panel — Styles
   ============================================================================ */

body.admin{
  background: var(--a-bg);
  color: var(--a-ink);
  min-height: 100vh;
}

.a-shell{ display:grid; grid-template-columns: 244px 1fr; min-height:100vh; }

/* ---------- Sidebar ---------- */
.a-sidebar{
  background: var(--a-surface);
  border-right: 1px solid var(--a-border);
  display:flex; flex-direction:column;
  position: sticky; top:0; height:100vh;
}
.a-sidebar__brand{ display:flex; align-items:center; gap:10px; padding: 20px 20px 18px; }
.a-sidebar__mark{
  width:34px; height:34px; border-radius:10px; background: var(--a-gradient-primary); color:#fff;
  display:flex; align-items:center; justify-content:center; font-family: var(--font-display); font-weight:600; font-size:16px;
  box-shadow: var(--a-glow-accent);
}
.a-sidebar__name{ font-weight:700; font-size:14.5px; letter-spacing:-0.01em; }
.a-sidebar__sub{ font-size:11px; color: var(--a-ink-faint); margin-top:1px; }

.a-nav{ flex:1; padding: 6px 12px; overflow-y:auto; }
.a-nav__group-label{ font-size:11px; font-weight:600; color: var(--a-ink-faint); text-transform:none; padding: 16px 10px 6px; }
.a-nav__item{
  display:flex; align-items:center; gap:11px; width:100%;
  padding: 9px 10px; border-radius: 9px; margin-bottom:2px;
  color: var(--a-ink-soft); background:transparent; border:none; border-left:2px solid transparent;
  font-size:13.5px; font-weight:500; text-align:left;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.a-nav__item:hover{ background: var(--a-surface-raised); color: var(--a-ink); }
.a-nav__item.active{ background: var(--a-accent-soft); color: var(--a-accent); font-weight:600; border-left-color: var(--a-accent); }
.a-nav__badge{
  margin-left:auto; font-size:10.5px; font-weight:700; padding: 1px 6px; border-radius: 999px;
  background: var(--a-danger-soft); color: var(--a-danger);
}

.a-sidebar__footer{ padding: 14px 20px; border-top: 1px solid var(--a-border); }
.a-admin-chip{ display:flex; align-items:center; gap:10px; }
.a-admin-chip__avatar{
  width:32px; height:32px; border-radius:9px; background: var(--a-surface-raised); border:1px solid var(--a-border);
  display:flex; align-items:center; justify-content:center; font-weight:600; font-size:13px; color: var(--a-ink-soft);
}
.a-admin-chip__name{ font-size:13px; font-weight:600; }
.a-admin-chip__role{ font-size:11px; color: var(--a-ink-faint); }
.a-logout{
  margin-left:auto; width:30px; height:30px; border-radius:8px; border:none; background:transparent; color: var(--a-ink-faint);
  display:flex; align-items:center; justify-content:center;
}
.a-logout:hover{ background: var(--a-surface-raised); color: var(--a-ink); }

/* ---------- Content ---------- */
.a-content{ padding: 26px 32px 60px; max-width: 1320px; }
.a-header{ display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:24px; gap:20px; flex-wrap:wrap; }
.a-header__title{ font-family: var(--font-display); font-size: 24px; font-weight:600; letter-spacing:-0.01em; }
.a-header__sub{ font-size:13px; color: var(--a-ink-soft); margin-top:4px; }
.a-header__actions{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

/* ---------- Buttons ---------- */
.a-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  height:38px; padding:0 16px; border-radius: 9px;
  font-size:13.5px; font-weight:600; border:1px solid transparent; white-space:nowrap;
  transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}
.a-btn--primary{ background: var(--a-gradient-primary); color:#fff; box-shadow: var(--a-glow-accent); }
.a-btn--primary:hover{ filter: brightness(1.08); }
.a-btn--ghost{ background: var(--a-surface-raised); color: var(--a-ink); border-color: var(--a-border-strong); }
.a-btn--ghost:hover{ border-color: var(--a-accent); color: var(--a-accent); }
.a-btn--danger{ background: var(--a-danger-soft); color: var(--a-danger); }
.a-btn--danger:hover{ background: var(--a-danger); color:#fff; }
.a-btn--gold{ background: var(--a-gradient-gold); color:#3A2A06; box-shadow: var(--a-glow-gold); }
.a-btn--gold:hover{ filter: brightness(1.05); }
.a-btn--sm{ height:32px; padding:0 12px; font-size:12.5px; }
.a-btn[disabled]{ opacity:0.4; pointer-events:none; }

/* ---------- Stat cards ---------- */
.a-stats{ display:grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap:14px; margin-bottom:26px; }
.a-stat{
  background: var(--a-surface); border:1px solid var(--a-border); border-radius: var(--radius-lg);
  padding:18px 18px 16px; position:relative; overflow:hidden;
  transition: transform 0.15s, border-color 0.15s;
}
.a-stat::before{ content:''; position:absolute; left:0; top:0; right:0; height:3px; background: var(--a-border-strong); }
.a-stat:hover{ border-color: var(--a-border-strong); }
.a-stat__top{ display:flex; align-items:center; justify-content:space-between; }
.a-stat__label{ font-size:12.5px; color: var(--a-ink-soft); font-weight:500; }
.a-stat__icon{ width:30px; height:30px; border-radius:8px; background: var(--a-accent-soft); color: var(--a-accent); display:flex; align-items:center; justify-content:center; }
.a-stat__value{ font-family: var(--font-display); font-size:28px; font-weight:600; margin-top:10px; letter-spacing:-0.01em; }
.a-stat__delta{ font-size:12px; margin-top:6px; color: var(--a-ink-faint); }
.a-stat--gold::before{ background: var(--a-gradient-gold); }
.a-stat--gold .a-stat__icon{ background: var(--a-gold-soft); color: var(--a-gold); }
.a-stat--danger::before{ background: var(--a-danger); }
.a-stat--danger .a-stat__icon{ background: var(--a-danger-soft); color: var(--a-danger); }
.a-stat--accent::before{ background: var(--a-gradient-primary); }
.a-stat--accent .a-stat__icon{ background: var(--a-accent-soft); color: var(--a-accent); }
.a-stat--teal::before{ background: var(--a-accent-2); }
.a-stat--teal .a-stat__icon{ background: var(--a-accent-2-soft); color: var(--a-accent-2); }
.a-stat--pink::before{ background: var(--a-accent-3); }
.a-stat--pink .a-stat__icon{ background: var(--a-accent-3-soft); color: var(--a-accent-3); }

/* ---------- Revenue hero (estimasi pendapatan kotor & bersih) ---------- */
.a-revenue-hero{
  background: var(--a-gradient-primary); border-radius: var(--radius-lg);
  padding: 22px 24px; color:#fff; position:relative; overflow:hidden;
  box-shadow: var(--a-glow-accent); margin-bottom:22px;
}
.a-revenue-hero::after{
  content:''; position:absolute; right:-40px; top:-50px; width:180px; height:180px; border-radius:50%;
  background: radial-gradient(circle, rgba(234,186,85,0.4), transparent 70%);
}
.a-revenue-hero::before{
  content:''; position:absolute; left:-20px; bottom:-60px; width:160px; height:160px; border-radius:50%;
  background: radial-gradient(circle, rgba(255,255,255,0.14), transparent 70%);
}
.a-revenue-hero__row{ display:flex; gap:28px; flex-wrap:wrap; position:relative; }
.a-revenue-hero__item{ flex:1; min-width:180px; }
.a-revenue-hero__label{ display:flex; align-items:center; gap:6px; font-size:12.5px; color: rgba(255,255,255,0.8); font-weight:600; }
.a-revenue-hero__value{ font-family: var(--font-display); font-size:30px; font-weight:600; margin-top:6px; letter-spacing:-0.01em; }
.a-revenue-hero__value.gold{ color:#FFE7AE; }
.a-revenue-hero__divider{ width:1px; background: rgba(255,255,255,0.22); align-self:stretch; }
.a-revenue-hero__meta{ font-size:12px; color: rgba(255,255,255,0.72); margin-top:16px; position:relative; }

/* ---------- Panels / cards ---------- */
.a-panel{ background: var(--a-surface); border:1px solid var(--a-border); border-radius: var(--radius-lg); }
.a-panel__head{ display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--a-border); gap:12px; flex-wrap:wrap; }
.a-panel__title{ font-size:14.5px; font-weight:600; }
.a-panel__body{ padding: 18px 20px; }
.a-panel + .a-panel{ margin-top:18px; }
.a-panel--gold{ border-color: rgba(234,186,85,0.35); background: linear-gradient(180deg, rgba(234,186,85,0.08), var(--a-surface) 60%); }

/* ---------- Alerts ---------- */
.a-alert{
  display:flex; align-items:flex-start; gap:10px; padding:13px 16px; border-radius: var(--radius-md);
  font-size:13px; line-height:1.55; margin-bottom:18px;
}
.a-alert .icon{ flex-shrink:0; margin-top:1px; }
.a-alert--warn{ background: var(--a-warn-soft); color: var(--a-warn); border:1px solid rgba(234,186,85,0.3); }

/* ---------- Main Control ---------- */
.a-mc-intro{
  display:flex; align-items:flex-start; gap:12px; padding:16px 18px; border-radius: var(--radius-lg);
  background: var(--a-accent-soft); border:1px solid rgba(129,114,248,0.3); margin-bottom:18px; color: var(--a-accent);
}
.a-mc-intro .icon{ flex-shrink:0; margin-top:2px; }
.a-mc-intro__title{ font-weight:700; font-size:13.5px; margin-bottom:4px; }
.a-mc-intro__body{ font-size:12.5px; line-height:1.6; color: var(--a-ink-soft); }
.a-mc-intro__body b{ color: var(--a-ink); }
.a-mc-summary-strip{ display:flex; gap:10px; flex-wrap:wrap; }
.a-mc-chip{
  display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:10px;
  background: var(--a-surface-raised); border:1px solid var(--a-border);
}
.a-mc-chip b{ font-size:13px; font-family: var(--font-mono); }

/* ---------- Invoice — daftar siap tagih per job ---------- */
.a-invjob-row{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:13px 14px; border-radius: var(--radius-md); background: var(--a-surface-raised);
  border:1px solid var(--a-border);
}
.a-invjob-row + .a-invjob-row{ margin-top:8px; }
.a-invjob-row__name{ font-weight:600; font-size:13.5px; }
.a-invjob-row__meta{ font-size:12px; color: var(--a-ink-soft); margin-top:2px; }

/* ---------- Realtime indicator ---------- */
.a-realtime-dot{
  display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600;
  color: var(--a-gold); flex-shrink:0; padding:4px 10px; border-radius:999px; background: var(--a-gold-soft);
  animation: a-pulse 2s ease-in-out infinite;
}
@keyframes a-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:0.55; } }

/* ---------- Tables ---------- */
.a-table-wrap{ overflow-x:auto; }
table.a-table{ width:100%; border-collapse:collapse; font-size:13px; }
table.a-table th{
  text-align:left; padding: 11px 16px; font-weight:600; color: var(--a-ink-faint);
  font-size:11.5px; border-bottom:1px solid var(--a-border); white-space:nowrap;
}
table.a-table td{ padding: 12px 16px; border-bottom:1px solid var(--a-border); vertical-align:middle; }
table.a-table tr:last-child td{ border-bottom:none; }
table.a-table tbody tr{ transition: background 0.12s; }
table.a-table tbody tr.row-clickable:hover{ background: var(--a-surface-raised); }
.row-clickable{ cursor:pointer; transition: opacity 0.12s; }
.row-clickable:hover{ opacity:0.88; }
.a-table__mono{ font-family: var(--font-mono); font-size:12px; color: var(--a-ink-soft); }
.a-table__primary{ font-weight:600; }
.a-table__check{ width:36px; }
.a-cell-actions{ display:flex; gap:6px; justify-content:flex-end; }

/* ---------- Filters bar ---------- */
.a-filters{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.a-search{
  position:relative; min-width:220px;
}
.a-search input{
  width:100%; height:36px; padding: 0 12px 0 36px; border-radius:9px;
  border:1px solid var(--a-border-strong); background: var(--a-surface-raised); color: var(--a-ink);
  font-size:13px;
}
.a-search input:focus{ outline:none; border-color: var(--a-accent); }
.a-search .icon{ position:absolute; left:11px; top:50%; transform:translateY(-50%); color: var(--a-ink-faint); }
.a-select{
  height:36px; padding:0 30px 0 12px; border-radius:9px; border:1px solid var(--a-border-strong);
  background: var(--a-surface-raised); color: var(--a-ink); font-size:13px; appearance:none;
  background-image: none;
}
.a-select:focus{ outline:none; border-color: var(--a-accent); }
.a-chip-toggle{
  display:flex; gap:4px; background: var(--a-surface-raised); padding:3px; border-radius:9px; border:1px solid var(--a-border);
}
.a-chip-toggle button{
  padding: 6px 12px; border-radius:7px; border:none; background:transparent; color: var(--a-ink-soft);
  font-size:12.5px; font-weight:600;
}
.a-chip-toggle button.active{ background: var(--a-surface); color: var(--a-ink); box-shadow: var(--shadow-dark-1); }

/* ---------- Status pills (admin/dark) ---------- */
.a-pill{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px 4px 8px; border-radius:999px; font-size:12px; font-weight:600; }
.a-pill .icon{ width:13px; height:13px; }
.a-pill--success{ background: var(--a-gold-soft); color: var(--a-gold); }
.a-pill--pending{ background: var(--a-accent-soft); color: var(--a-accent); }
.a-pill--error{ background: var(--a-danger-soft); color: var(--a-danger); }
.a-pill--verification{ background: var(--a-warn-soft); color: var(--a-warn); }
.a-pill--duplicate{ background: #242640; color: var(--a-ink-soft); }
.a-pill--rejected{ background: var(--a-danger-soft); color: var(--a-danger); }
.a-pill--neutral{ background: #242640; color: var(--a-ink-soft); }

/* ---------- Forms ---------- */
.a-field{ margin-bottom:16px; }
.a-label{ display:block; font-size:12.5px; font-weight:600; color: var(--a-ink); margin-bottom:6px; }
.a-hint{ font-size:11.5px; color: var(--a-ink-faint); margin-top:5px; }
.a-thumb-upload{
  width:100%; height:120px; border-radius: var(--radius-md);
  border:1.5px dashed var(--a-border-strong); background: var(--a-bg);
  overflow:hidden; display:flex; align-items:center; justify-content:center;
}
.a-thumb-upload img{ width:100%; height:100%; object-fit:cover; }
.a-thumb-upload #thumbPlaceholder{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  color: var(--a-ink-faint); font-size:12px;
}
.a-input, .a-select-full, .a-textarea{
  width:100%; height:38px; padding:0 12px; border-radius:9px;
  border:1px solid var(--a-border-strong); background: var(--a-bg); color: var(--a-ink);
  font-size:13.5px;
}
.a-textarea{ height:auto; padding:10px 12px; min-height:120px; resize:vertical; line-height:1.55; font-family: var(--font-mono); font-size:12.5px; }
.a-input:focus, .a-select-full:focus, .a-textarea:focus{ outline:none; border-color: var(--a-accent); box-shadow: 0 0 0 3px var(--a-accent-soft); }
.a-select-full{ appearance:none; background-image:none; }
.a-checkbox{ width:16px; height:16px; accent-color: var(--a-accent); }
.a-form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }

/* ---------- Empty state ---------- */
.a-empty{ text-align:center; padding: 48px 20px; display:flex; flex-direction:column; align-items:center; gap:12px; }
.a-empty__icon{ width:52px; height:52px; border-radius:14px; background: var(--a-surface-raised); border:1px solid var(--a-border); display:flex; align-items:center; justify-content:center; color: var(--a-ink-faint); }
.a-empty__title{ font-weight:600; font-size:14.5px; }
.a-empty__body{ font-size:13px; color: var(--a-ink-soft); max-width:320px; line-height:1.5; }

/* ---------- Tabs ---------- */
.a-tabs{ display:flex; gap:4px; border-bottom:1px solid var(--a-border); margin-bottom:20px; }
.a-tab{ padding:10px 4px; margin-right:20px; font-size:13.5px; font-weight:600; color: var(--a-ink-faint); background:none; border:none; border-bottom:2px solid transparent; }
.a-tab.active{ color: var(--a-ink); border-color: var(--a-accent); }

/* ---------- Modal ---------- */
.a-modal-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,0.55); z-index:300; opacity:0; transition:opacity 0.18s; display:flex; align-items:center; justify-content:center; padding:24px; }
.a-modal-backdrop.show{ opacity:1; }
.a-modal{
  background: var(--a-surface); border:1px solid var(--a-border); border-radius: var(--radius-lg);
  width: min(520px, 100%); max-height:86vh; overflow-y:auto;
  transform: translateY(10px) scale(0.98); opacity:0; transition: transform 0.18s, opacity 0.18s;
  box-shadow: var(--shadow-dark-2);
}
.a-modal-backdrop.show .a-modal{ transform: translateY(0) scale(1); opacity:1; }
.a-modal__head{ display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--a-border); }
.a-modal__title{ font-size:16px; font-weight:600; font-family: var(--font-display); }
.a-modal__body{ padding:20px; }
.a-modal__foot{ padding:16px 20px; border-top:1px solid var(--a-border); display:flex; justify-content:flex-end; gap:10px; }
.a-modal-close{ width:30px; height:30px; border-radius:8px; border:none; background:transparent; color: var(--a-ink-faint); display:flex; align-items:center; justify-content:center; }
.a-modal-close:hover{ background: var(--a-surface-raised); }

/* ---------- KV rows ---------- */
.a-kv{ display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid var(--a-border); gap:12px; }
.a-kv:last-child{ border-bottom:none; }
.a-kv__label{ font-size:12.5px; color: var(--a-ink-soft); }
.a-kv__value{ font-size:13px; font-weight:600; text-align:right; }
.a-kv__value.mono{ font-family: var(--font-mono); font-weight:500; }

/* ---------- Bar chart (native, no lib) ---------- */
.a-bars{ display:flex; align-items:flex-end; gap:14px; height:180px; padding-top:10px; }
.a-bars__col{ flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; height:100%; justify-content:flex-end; }
.a-bars__bar{ width:100%; max-width:38px; border-radius:6px 6px 3px 3px; background: var(--a-gradient-primary); position:relative; transition: opacity 0.15s; }
.a-bars__bar:hover{ opacity:0.8; }
.a-bars__val{ font-size:11px; font-weight:600; color: var(--a-ink-soft); font-family: var(--font-mono); }
.a-bars__label{ font-size:11px; color: var(--a-ink-faint); font-weight:600; }

/* ---------- Toast (admin dark) ---------- */
.admin .toast{ background: var(--a-surface-raised); border:1px solid var(--a-border-strong); color: var(--a-ink); }
.admin .toast.err{ border-color: var(--a-danger); color: var(--a-danger); }
.admin .toast.ok{ border-color: var(--a-gold); color: var(--a-gold); }

/* ---------- Loading ---------- */
.a-loading-screen{ min-height:100vh; display:flex; align-items:center; justify-content:center; background: var(--a-bg); color: var(--a-ink-soft); }

/* ---------- Pagination ---------- */
.a-pagination{ display:flex; align-items:center; justify-content:space-between; padding:14px 20px; }
.a-pagination__info{ font-size:12px; color: var(--a-ink-faint); }
.a-pagination__btns{ display:flex; gap:6px; }
.a-pagebtn{ width:30px; height:30px; border-radius:8px; border:1px solid var(--a-border); background:transparent; color: var(--a-ink-soft); display:flex; align-items:center; justify-content:center; }
.a-pagebtn:hover{ background: var(--a-surface-raised); }
.a-pagebtn[disabled]{ opacity:0.35; pointer-events:none; }

/* ---------- Mobile menu toggle & backdrop ---------- */
.a-menu-toggle{
  display:none;
  width:38px; height:38px; border-radius:10px; border:1px solid var(--a-border-strong);
  background: var(--a-surface-raised); color: var(--a-ink);
  align-items:center; justify-content:center; flex-shrink:0;
}
.a-menu-toggle:hover{ border-color: var(--a-accent); color: var(--a-accent); }
.a-sidebar-backdrop{
  display:none; position:fixed; inset:0; z-index:99;
  background: rgba(4,4,10,0.6); backdrop-filter: blur(2px);
  opacity:0; transition: opacity 0.2s;
}
.a-sidebar-backdrop.show{ display:block; opacity:1; }

/* ---------- Responsive ---------- */
@media (max-width: 900px){
  .a-shell{ grid-template-columns: 1fr; max-width:100vw; overflow-x:hidden; }
  .a-menu-toggle{ display:flex; }
  .a-sidebar{
    position:fixed; left:0; top:0; bottom:0; width:min(280px, 84vw); z-index:100;
    transform:translateX(-100%); transition:transform 0.22s cubic-bezier(.32,.72,0,1);
    box-shadow: var(--shadow-dark-2);
  }
  .a-sidebar.open{ transform:translateX(0); }
  .a-content{ padding:16px 16px 50px; max-width:100vw; overflow-x:hidden; }
  .a-header{ align-items:center; }
  .a-header__title{ font-size:20px; }
  .a-form-grid{ grid-template-columns:1fr; }
  .a-revenue-hero__row{ flex-direction:column; gap:16px; }
  .a-revenue-hero__divider{ display:none; }
}
body.no-scroll{ overflow:hidden; }

/* ---------- Auth (admin login) ---------- */
.a-auth{ min-height:100vh; display:flex; align-items:center; justify-content:center; background: var(--a-bg); }
.a-auth__box{ width:min(380px, 92vw); background: var(--a-surface); border:1px solid var(--a-border); border-radius: var(--radius-lg); padding:32px; }
.a-auth__mark{ width:44px; height:44px; border-radius:12px; background: var(--a-gradient-primary); color:#fff; display:flex; align-items:center; justify-content:center; font-family: var(--font-display); font-weight:600; font-size:20px; margin-bottom:20px; box-shadow: var(--a-glow-accent); }
.a-auth__title{ font-family: var(--font-display); font-size:21px; font-weight:600; }
.a-auth__sub{ font-size:13px; color: var(--a-ink-soft); margin-top:6px; }
.a-auth__form{ margin-top:24px; }