/* Modern admin theme — loaded after the base admin styles. */
:root {
  --ink: #152033;
  --muted: #728197;
  --line: #e4eaf2;
  --surface: #ffffff;
  --surface-soft: #f8fafc;
  --canvas: #f4f7fb;
  --brand: #0f8f80;
  --brand-dark: #087267;
  --brand-soft: #e8f7f3;
  --sidebar: #101b2f;
  --sidebar-2: #172944;
  --sidebar-muted: #a9b8cc;
  --danger: #d84e5e;
  --warning: #b77815;
  --shadow-sm: 0 4px 16px rgba(27, 42, 70, .045);
  --shadow-md: 0 16px 36px rgba(27, 42, 70, .08);
  --radius: 14px;
}

html { min-width: 320px; }
body.admin-page {
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 90% -10%, rgba(61, 171, 156, .13), transparent 26rem),
    radial-gradient(circle at 35% -18%, rgba(96, 132, 255, .1), transparent 25rem),
    var(--canvas);
  font-family: Inter, "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

body.admin-page::selection { color: #fff; background: var(--brand); }
.admin-layout { align-items: stretch; }

/* Sidebar */
.sidebar {
  width: 272px;
  padding: 22px 14px 18px;
  border-right: 1px solid rgba(255,255,255,.07);
  background:
    radial-gradient(circle at 13% 0, rgba(47, 187, 164, .18), transparent 17rem),
    linear-gradient(180deg, var(--sidebar-2) 0%, var(--sidebar) 62%, #0d1627 100%);
  box-shadow: 12px 0 28px rgba(11, 20, 36, .07);
}
.brand { min-height: 54px; padding: 0 10px; letter-spacing: .01em; }
.brand .brand-mark {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, #35c4ad 0%, #0a766c 100%);
  box-shadow: 0 10px 24px rgba(8, 151, 132, .34);
}
.sidebar-nav { gap: 5px; margin-top: 23px; }
.sidebar-nav .nav-section {
  margin: 20px 10px 7px;
  color: #71839f;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.sidebar-nav .nav-section:first-child { margin-top: 0; }
.sidebar-nav a {
  direction: ltr;
  justify-content: flex-start !important;
  text-align: left !important;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 11px;
  color: var(--sidebar-muted);
  font-size: 13px;
  font-weight: 600;
  transition: transform .18s ease, color .18s ease, background .18s ease, border-color .18s ease;
}
.sidebar-nav a > .ico { order: 0; flex: 0 0 17px; }
.sidebar-nav a > .ico + * { order: 1; }
.sidebar-nav a:hover {
  border-color: rgba(255,255,255,.08);
  color: #f7fbff;
  background: rgba(255,255,255,.065);
  transform: translateX(2px);
}
.sidebar-nav a.active {
  border-color: rgba(113, 231, 211, .2);
  color: #effffc;
  background: linear-gradient(90deg, rgba(23, 164, 145, .38), rgba(16, 133, 119, .19));
  box-shadow: inset 0 1px rgba(255,255,255,.06), 0 6px 18px rgba(0,0,0,.09);
}
.sidebar-nav a.active::before { left: -14px; width: 3px; background: #5be1cc; box-shadow: 0 0 13px rgba(91,225,204,.7); }
.sidebar-nav a .ico { width: 17px; height: 17px; opacity: .82; }
/* The legacy stylesheet gives the last span margin-left:auto. Icons are the
   first child and must stay on the left; only optional trailing badges may
   consume the remaining space. */
.sidebar-nav a > .ico { margin-left: 0 !important; }
.sidebar-nav a > span:last-child:not(.ico) { margin-left: auto; }
.sidebar-bottom {
  margin: 22px 7px 0;
  padding: 13px 11px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px;
  color: #71819b;
  background: rgba(255,255,255,.035);
  font-size: 11px;
}

/* Page frame */
.main-content { width: calc(100% - 272px); margin-left: 272px; padding: 30px clamp(22px, 4.2vw, 72px) 56px; }
.topbar {
  position: relative;
  min-height: 68px;
  margin-bottom: 28px;
  padding: 7px 0;
}
.topbar > div:first-child { padding-left: 16px; }
.topbar > div:first-child::before {
  width: 5px;
  min-height: 39px;
  border-radius: 999px;
  background: linear-gradient(180deg, #35c4ad, var(--brand-dark));
  box-shadow: 0 4px 13px rgba(15,143,128,.24);
}
.topbar h1 { font-size: clamp(23px, 2vw, 28px); letter-spacing: -.025em; }
.eyebrow { color: #8290a4; font-size: 10px; letter-spacing: .13em; }
.topbar-actions { gap: 10px; }
.date-label { color: #7f8da1; font-size: 12px; }
.admin-user {
  min-height: 34px;
  padding: 0 12px;
  border-color: #e3e9f1;
  border-radius: 999px;
  color: #3d4e67;
  background: rgba(255,255,255,.78);
  box-shadow: var(--shadow-sm);
}

/* Buttons, panels and data surfaces */
.btn {
  min-height: 36px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 700;
}
.btn-sm { min-height: 31px; border-radius: 8px; font-size: 12px; }
.btn-primary {
  border-color: var(--brand);
  background: linear-gradient(135deg, #149d8d, #087a70);
  box-shadow: 0 8px 18px rgba(8,122,112,.18);
}
.btn-primary:hover, .btn-primary:focus {
  border-color: var(--brand-dark);
  background: linear-gradient(135deg, #0b8c7d, #06665e);
  box-shadow: 0 10px 22px rgba(8,122,112,.25);
}
.btn-outline-primary { border-color: #b9ddd6; color: #08786d; background: #fff; }
.btn-outline-primary:hover { border-color: #08786d; background: var(--brand); }
.btn-light { border-color: #e4eaf1; background: #f8fafc; color: #53637a; }
.btn-light:hover { border-color: #cbd7e4; background: #eff4f8; color: #273d58; }
.btn-outline-secondary { border-color: #dce4ec; color: #627187; background: #fff; }
.btn-outline-danger { border-color: #f3c8ce; color: #c43f4e; }
.btn-outline-danger:hover { border-color: var(--danger); background: var(--danger); }

.content-panel {
  overflow: hidden;
  border-color: rgba(218, 227, 238, .92);
  border-radius: var(--radius);
  background: rgba(255,255,255,.94);
  box-shadow: var(--shadow-sm);
}
.content-panel:hover { box-shadow: 0 8px 24px rgba(27,42,70,.06); }
.panel-heading {
  min-height: 78px;
  padding: 21px 25px 18px;
  border-bottom-color: #edf1f5;
  background: linear-gradient(180deg, rgba(251,253,255,.92), rgba(255,255,255,.96));
}
.panel-heading h2 { font-size: 17px; letter-spacing: -.01em; }
.panel-heading h2::before { width: 4px; height: 18px; border-radius: 999px; background: var(--brand); }
.metric-card, .action-card {
  overflow: hidden;
  border-color: rgba(222,230,240,.98);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.metric-card { min-height: 142px; padding: 22px; background: linear-gradient(145deg, #fff, #fafeff); }
.metric-card strong { font-size: 26px; letter-spacing: -.025em; }
.metric-card small { color: #148e7f; font-weight: 600; }

.table > :not(caption) > * > * { padding: 14px 22px; border-bottom-color: #edf1f5; }
.table thead th { color: #7a899e; background: #f8fafc; font-size: 10.5px; letter-spacing: .075em; }
.table tbody tr { transition: background .16s ease, box-shadow .16s ease; }
.table tbody tr:hover { background: #f5fbfa; box-shadow: inset 3px 0 var(--brand); }
.table tbody td { color: #42526a; font-size: 13px; }
.table tbody td strong { color: #263750; }
.table-actions { gap: 6px; }
.status-pill { min-height: 25px; padding: 3px 9px; border: 1px solid transparent; font-size: 11px; }
.status-pill.success { border-color: #cdeade; color: #087765; background: #edf9f4; }
.status-pill.pending { border-color: #f2dcaa; color: #98630d; background: #fff8e9; }
.status-pill.muted { border-color: #e3e8ef; color: #647287; background: #f5f7f9; }
.empty-state { padding: 46px 24px !important; color: #8997a9; }

/* Unified filters and forms */
.filters-row {
  margin: 18px 24px 20px !important;
  padding: 12px;
  border: 1px solid #e7edf3;
  border-radius: 11px;
  background: #fafcfd;
}
.form-control, .form-select {
  min-height: 42px;
  border-color: #d9e2ec;
  border-radius: 9px;
  color: #293b55;
  background-color: #fff;
  font-size: 13px;
}
.form-control:hover, .form-select:hover { border-color: #c1d0dd; }
.form-control:focus, .form-select:focus {
  border-color: #41aa9d;
  box-shadow: 0 0 0 4px rgba(15,143,128,.12);
}
.form-stack, .settings-form { padding: 25px; }
.form-stack label, .settings-form label, .gateway-grid label { color: #4b5e77; font-size: 12px; }
.form-help, .gateway-field-help { color: #8a98aa; }
.modal-form-actions { margin-top: 5px; padding-top: 18px; border-top: 1px solid #edf1f5; }

/* Price, payment, and recurring-charge pages */
.price-hero {
  border-color: #d9e9e7;
  border-radius: var(--radius);
  background: linear-gradient(118deg, #f8fffe 0%, #eefaf8 57%, #f5f8ff 100%);
  box-shadow: var(--shadow-sm);
}
.price-hero-copy h2, .price-group-head h3 { color: #19314e; }
.price-hero-stats strong { color: #0b8275; }
.price-catalog-wrap, .price-table { border-color: #e1e9f0; border-radius: 11px; }
.price-catalog-table thead th { color: #64768e; background: #f4f8fb; }
.price-catalog-table tbody tr.is-editing { background: #f0fbf8; box-shadow: inset 4px 0 #21a391; }
.gateway-alert {
  margin: 18px 24px 0;
  border-color: #c9eadd;
  border-radius: 10px;
  background: #f0fbf7;
}
.gateway-status { border-radius: 999px; }
.gateway-overview { margin: 20px 24px; gap: 12px; }
.gateway-overview-item {
  min-height: 70px;
  border-color: #e3eaf2;
  border-radius: 11px;
  background: linear-gradient(145deg, #fff, #f7fafc);
}
.gateway-block { padding: 25px 24px; border-top-color: #edf1f5; }
.gateway-block h3 { color: #233953; }
.gateway-grid .form-control, .gateway-grid .form-select { border-color: #d9e3ec; }
.payment-flow { border-color: #e2e9f0; border-radius: 11px; }
.payment-flow li { background: linear-gradient(180deg, #fff, #fbfcfe); }
.formula-strip { border-color: #d6e7e6; border-radius: 10px; background: #f4fbfa; }
.example-strip { border-radius: 0 10px 10px 0; }

.auto-charge-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 20px 24px 2px;
}
.auto-charge-summary-item {
  min-height: 86px;
  padding: 15px 16px;
  border: 1px solid #e2eaf1;
  border-radius: 11px;
  background: linear-gradient(145deg, #fff, #f8fbfd);
}
.auto-charge-summary-item span { display: block; color: #7c8ca1; font-size: 11px; }
.auto-charge-summary-item strong { display: block; margin-top: 6px; color: #1d3554; font-size: 24px; line-height: 1; }
.auto-charge-summary-item.is-brand { border-color: #c8e9e1; background: linear-gradient(145deg, #f2fcf9, #ecf9f7); }
.auto-charge-summary-item.is-brand strong { color: #0b8477; }
.auto-charge-summary-item.is-accent { border-color: #dbe3fa; background: linear-gradient(145deg, #f7f9ff, #eff3ff); }
.auto-charge-summary-item.is-accent strong { color: #4967bf; }

.admin-modal { background: rgba(9, 20, 37, .56); backdrop-filter: blur(4px); }
.admin-modal-dialog { border-radius: 16px; box-shadow: 0 30px 90px rgba(6,16,30,.3); }
.admin-modal-head { padding: 23px 25px 18px; }
.auto-charge-modal .admin-modal-dialog { width: min(780px, 100%); }
.auto-charge-form { padding: 22px 25px 25px; }
.auto-charge-form .gateway-grid { gap: 16px; }
.auto-charge-form .modal-form-actions { align-items: center; }
.auto-charge-form .modal-form-actions > span { margin-right: auto; color: #8290a3; font-size: 11px; }
body.modal-open { overflow: hidden; }

@media (max-width: 900px) {
  .sidebar { width: 100%; padding: 14px; }
  .sidebar-nav { margin-top: 14px; }
  .sidebar-nav .nav-section { display: none; }
  .sidebar-nav a.active::before { display: none; }
  .main-content { width: 100%; margin-left: 0; padding: 24px 18px 42px; }
  .auto-charge-summary { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .topbar { gap: 13px; margin-bottom: 20px; }
  .topbar-actions { flex-direction: row; align-items: center; width: 100%; }
  .topbar-actions .date-label, .topbar-actions .admin-user { display: none; }
  .topbar-actions .btn { width: 100%; }
  .panel-heading { min-height: auto; padding: 18px; }
  .content-panel { border-radius: 12px; }
  .filters-row { grid-template-columns: 1fr !important; margin: 14px 14px 16px !important; }
  .filters-row .form-control, .filters-row .form-select { grid-column: auto !important; }
  .filters-row .btn { width: 100%; }
  .gateway-overview, .auto-charge-summary { margin-left: 16px; margin-right: 16px; padding-left: 0; padding-right: 0; }
  .gateway-block { padding: 22px 18px; }
  .form-stack, .settings-form { padding: 18px; }
  .auto-charge-form { padding: 18px; }
  .auto-charge-form .modal-form-actions { align-items: stretch; flex-direction: column-reverse; }
  .auto-charge-form .modal-form-actions > span { margin: 0; }
  .table > :not(caption) > * > * { padding: 12px 15px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}