/* Admin panel layout */

.admin-shell {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: calc(100vh - var(--header-height));
}

.admin-sidebar {
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  padding: 20px 12px;
}
.admin-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 14px;
  color: var(--color-text-muted);
  cursor: pointer;
  margin-bottom: 4px;
  transition: background var(--transition), color var(--transition);
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}
.admin-nav-item:hover { background: var(--color-primary-light); color: var(--color-primary-dark); }
.admin-nav-item.active { background: var(--color-primary); color: #fff; }

.admin-main { padding: 26px 30px 60px; overflow-x: auto; }

.admin-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}

.stat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}
.stat-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 16px 18px;
}
.stat-card .stat-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-soft); }
.stat-card .stat-value { font-size: 26px; font-weight: 800; margin-top: 6px; }

/* ---- Table ---------------------------------------------------------------*/
.data-table-wrap {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
table.data-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 640px; }
table.data-table th {
  text-align: left;
  padding: 12px 16px;
  background: var(--color-bg);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-soft);
  border-bottom: 1px solid var(--color-border);
}
table.data-table td { padding: 12px 16px; border-bottom: 1px solid var(--color-border); vertical-align: middle; }
table.data-table tr:last-child td { border-bottom: none; }
table.data-table tr:hover td { background: #fafbfa; }

.row-actions { display: flex; gap: 6px; }
.history-payment-cell { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.history-row-actions { display:flex; gap:4px; opacity:0; transform:translateX(4px); transition:opacity 140ms cubic-bezier(0.25,1,0.5,1), transform 140ms cubic-bezier(0.25,1,0.5,1); }
table.data-table tr:hover .history-row-actions, table.data-table tr:focus-within .history-row-actions { opacity:1; transform:translateX(0); }
.history-icon-btn { width:36px; height:36px; border:1px solid var(--color-border); border-radius:9px; background:var(--color-surface); cursor:pointer; }
.history-icon-btn:hover { background:var(--color-accent-light); }
.history-icon-btn:focus-visible { outline:3px solid oklch(73% .12 150 / .45); outline-offset:2px; }
.history-icon-btn:disabled { opacity:.5; cursor:wait; }
@media (hover:none) { .history-row-actions { opacity:1; transform:none; } }


/* ---- Login screen ----------------------------------------------------------*/
.login-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at top, #eef5f0, var(--color-bg));
  padding: 20px;
}
.login-card {
  width: 100%;
  max-width: 380px;
  padding: 36px 32px;
  text-align: center;
}
.login-card .brand-mark { margin: 0 auto 16px; width: 52px; height: 52px; font-size: 22px; border-radius: 14px; }
.login-card h2 { margin-bottom: 4px; }
.login-hint { font-size: 12.5px; background: var(--color-accent-light); color: var(--color-accent); border-radius: var(--radius-sm); padding: 10px 12px; margin-top: 16px; text-align: left; }

/* ---- Responsive ------------------------------------------------------------*/
@media (max-width: 900px) {
  .admin-shell { grid-template-columns: 1fr; }
  .admin-sidebar {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 12px;
    border-right: none;
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: var(--header-height);
    z-index: 30;
  }
  .admin-nav-item { white-space: nowrap; margin-bottom: 0; }
  .admin-main { padding: 20px 16px 50px; }
  #an-grid-layout { grid-template-columns: 1fr !important; }
}

/* ---- Category revenue breakdown bars ----------------------------------- */
.cat-bar-row { margin-bottom: 14px; }
.cat-bar-row:last-child { margin-bottom: 0; }
.cat-bar-label { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; margin-bottom: 5px; }
.cat-bar-track { height: 8px; border-radius: 999px; background: var(--color-bg); overflow: hidden; }
.cat-bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--color-primary), var(--color-primary-dark)); }


/* Admin workspace enhancements */
.admin-main { background: oklch(97% .012 151); }
.admin-sidebar { background: oklch(99% .006 151); }
.admin-nav-item { min-height:44px; }
.admin-nav-item.active { box-shadow:0 6px 14px oklch(46% .105 151 / .16); }
.stat-card { box-shadow:var(--shadow-sm); transition:transform var(--transition), box-shadow var(--transition); }
.stat-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }
.data-table-wrap { box-shadow:var(--shadow-sm); }
table.data-table { font-variant-numeric:tabular-nums; }
table.data-table th { position:sticky; top:0; z-index:1; }
@media (max-width:900px) { .admin-sidebar { scrollbar-width:none; } .admin-sidebar::-webkit-scrollbar { display:none; } }


/* Color refresh: warm citrus accents with botanical green, not another flat SaaS screen. */
:root {
  --color-primary: oklch(48% .13 154);
  --color-primary-dark: oklch(35% .105 154);
  --color-primary-light: oklch(93% .055 154);
  --color-accent: oklch(69% .16 74);
  --color-accent-light: oklch(95% .055 82);
  --color-bg: oklch(96% .018 88);
  --color-surface: oklch(99% .008 90);
  --color-border: oklch(87% .035 100);
  --color-text: oklch(24% .035 150);
  --color-text-muted: oklch(46% .04 150);
  --color-text-soft: oklch(60% .035 100);
}
body { background: radial-gradient(circle at 12% 0%, oklch(98% .035 80), transparent 28rem), var(--color-bg); }
.topbar { background: oklch(99% .01 90 / .92); border-bottom-color: oklch(83% .05 100); }
.brand-mark { background: linear-gradient(135deg, oklch(58% .17 74), oklch(45% .13 154)); box-shadow: 0 6px 14px oklch(48% .13 154 / .18); }
.nav-links a:hover, .nav-links a.active { background: var(--color-accent-light); color: oklch(39% .10 72); }
.btn-primary { background: linear-gradient(135deg, oklch(53% .15 154), oklch(43% .12 154)); }
.btn-primary:hover:not(:disabled) { background: linear-gradient(135deg, oklch(58% .16 154), oklch(48% .13 154)); }
.btn-outline:hover:not(:disabled), .btn-ghost:hover:not(:disabled) { background: var(--color-accent-light); }

.admin-main { background: radial-gradient(circle at 95% 0%, oklch(97% .045 78), transparent 25rem), var(--color-bg); }
.admin-sidebar { background: oklch(99% .01 90); }
.admin-nav-item.active { background: linear-gradient(135deg, oklch(53% .15 154), oklch(44% .12 154)); }
.stat-card { background: linear-gradient(150deg, oklch(99% .01 90), oklch(96% .035 82)); }
.stat-card:nth-child(2) { background: linear-gradient(150deg, oklch(99% .01 90), oklch(96% .04 154)); }
.stat-card:nth-child(3) { background: linear-gradient(150deg, oklch(99% .01 90), oklch(96% .045 20)); }

.history-whatsapp-btn { font-size:10px; font-weight:800; color:oklch(42% .13 150); }
.backup-workspace { max-width:820px; border-top:1px solid var(--color-border); }
.backup-block { display:grid; grid-template-columns:52px 1fr auto; align-items:center; gap:20px; padding:28px 4px; border-bottom:1px solid var(--color-border); }
.backup-block h3 { margin:0 0 6px; font-size:18px; }
.backup-block p { margin:0; max-width:58ch; color:var(--color-text-muted); line-height:1.5; }
.backup-icon { display:grid; place-items:center; width:48px; height:48px; border-radius:50%; background:oklch(94% .045 82); color:oklch(48% .12 82); font-size:26px; font-weight:700; }
.backup-restore-block { grid-template-columns:52px 1fr auto; }
.restore-file-status { grid-column:2 / -1; padding:12px 14px; border:1px dashed var(--color-border); border-radius:10px; color:var(--color-text-muted); font-size:13px; overflow-wrap:anywhere; }
.btn-danger { background:oklch(55% .18 28); color:oklch(98% .006 28); }
.btn-danger:hover:not(:disabled) { background:oklch(49% .17 28); }
@media (max-width:700px) {
  .backup-block,.backup-restore-block { grid-template-columns:48px 1fr; }
  .backup-block > .btn,.backup-file-label,.restore-file-status { grid-column:1 / -1; }
}

/* Keep backup actions readable at every width. */
.backup-restore-block > .btn, .backup-file-label { min-width: 168px; width: auto; white-space: normal; line-height: 1.25; text-align: center; }
#backup-restore-btn { padding-inline: 18px; overflow-wrap: normal; }
@media (max-width:700px) {
  .backup-restore-block > .btn, .backup-file-label { width: 100%; min-width: 0; }
  #backup-restore-btn { grid-column: 1 / -1; }
}