/* VP Energy gas admin — dedicated management UI */
:root {
  --vp-navy: #0d2f64;
  --vp-blue: #174e9f;
  --vp-blue-2: #2866bc;
  --vp-orange: #f39a22;
  --vp-green: #1f9d63;
  --vp-red: #b64040;
  --vp-ink: #142033;
  --vp-muted: #68758a;
  --vp-bg: #f3f6fa;
  --vp-card: #ffffff;
  --vp-line: #dfe5ed;
  --vp-soft-blue: #eef4fc;
  --vp-soft-orange: #fff6e9;
  --vp-shadow: 0 10px 30px rgba(23, 45, 77, .08);
}

html { color-scheme: light; scroll-behavior: smooth; }
body.vp-admin-body {
  margin: 0;
  min-height: 100vh;
  color: var(--vp-ink);
  background: var(--vp-bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.vp-admin-body *, .vp-admin-body *::before, .vp-admin-body *::after { box-sizing: border-box; }
.admin-shell { width: min(1280px, calc(100% - 40px)); margin: 0 auto; padding: 22px 0 48px; }
.admin-main { display: grid; gap: 18px; }

.admin-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 82px;
  padding: 14px 16px 14px 18px;
  margin-bottom: 22px;
  background: #fff;
  border: 1px solid var(--vp-line);
  border-radius: 18px;
  box-shadow: var(--vp-shadow);
}
.admin-brand { display: inline-flex; align-items: center; gap: 13px; min-width: 0; color: inherit; text-decoration: none; }
.admin-brand-logo { width: 52px; height: 52px; flex: 0 0 52px; border-radius: 12px; overflow: hidden; background: #fff; border: 1px solid #e1e6ed; box-shadow: 0 4px 12px rgba(24,52,88,.10); }
.admin-brand-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.admin-brand-copy { display: grid; gap: 2px; }
.admin-brand-copy strong { font-size: 1.08rem; color: var(--vp-navy); letter-spacing: -.01em; }
.admin-brand-copy span { color: var(--vp-muted); font-size: .84rem; }
.admin-top-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.admin-signout-form { margin: 0; }

.admin-action {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 9px 14px;
  border: 1px solid #d8e0ea;
  border-radius: 10px;
  background: #fff;
  color: #23344c;
  text-decoration: none;
  font: inherit;
  font-size: .86rem;
  font-weight: 720;
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease, background .16s ease;
}
.admin-action:hover { border-color: #b9c8db; background: #f8fafc; box-shadow: 0 5px 14px rgba(24,52,88,.08); transform: translateY(-1px); }
.admin-action-primary { color: #fff; border-color: var(--vp-blue); background: var(--vp-blue); }
.admin-action-primary:hover { color: #fff; border-color: var(--vp-navy); background: var(--vp-navy); }
.admin-action-danger { color: #8f3030; background: #fffafa; border-color: #ebcccc; }
.admin-action-danger:hover { background: #fff4f4; border-color: #dbaaaa; }

.admin-page-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding: 10px 4px 2px; }
.admin-page-heading h1 { margin: 4px 0 5px; font-size: clamp(1.7rem, 3vw, 2.35rem); line-height: 1.12; color: #172238; letter-spacing: -.035em; }
.admin-page-heading p { margin: 0; color: var(--vp-muted); }
.eyebrow, .section-kicker { display: block; color: var(--vp-blue); font-size: .72rem; line-height: 1; font-weight: 820; letter-spacing: .13em; text-transform: uppercase; }
.session-pill { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; padding: 8px 11px; border: 1px solid #cfe7da; border-radius: 999px; color: #186d47; background: #f1fbf6; font-size: .78rem; font-weight: 760; }
.session-pill span { width: 8px; height: 8px; border-radius: 50%; background: var(--vp-green); box-shadow: 0 0 0 4px rgba(31,157,99,.11); }

.admin-card {
  background: var(--vp-card);
  border: 1px solid var(--vp-line);
  border-radius: 18px;
  box-shadow: 0 3px 13px rgba(23,45,77,.035);
  padding: 24px;
  scroll-margin-top: 20px;
}
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; margin-bottom: 20px; }
.section-heading h2 { margin: 5px 0 5px; color: #1b2940; font-size: 1.18rem; line-height: 1.25; letter-spacing: -.015em; }
.section-heading p { margin: 0; color: var(--vp-muted); font-size: .88rem; line-height: 1.5; }
.split-heading { align-items: center; }

.admin-tools-card { padding: 26px; border-top: 4px solid var(--vp-blue); }
.branch-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.branch-card { padding: 18px; border: 1px solid #dfe5ed; border-radius: 15px; background: #fbfcfe; }
.branch-card-head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid #e8ecf2; }
.branch-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 10px; background: var(--vp-navy); color: #fff; font-size: .88rem; font-weight: 850; box-shadow: inset 0 -2px 0 rgba(255,255,255,.08); }
.branch-card h3 { margin: 0 0 2px; font-size: 1rem; color: #1b2940; }
.branch-card p { margin: 0; color: var(--vp-muted); font-size: .8rem; }
.tool-links { display: flex; flex-wrap: wrap; gap: 8px; }
.tool-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 18px; min-width: 118px; padding: 10px 11px; border: 1px solid #dce3ec; border-radius: 9px; color: #2f4058; background: #fff; text-decoration: none; font-size: .82rem; font-weight: 700; transition: .16s ease; }
.tool-link b { color: #8b99ab; font-size: .78rem; }
.tool-link:hover { border-color: #9eb5d2; color: var(--vp-blue); box-shadow: 0 4px 12px rgba(19,56,101,.08); transform: translateY(-1px); }
.tool-link-accent { border-color: #f0cf9d; background: var(--vp-soft-orange); color: #8c5515; }
.tool-link-accent b { color: #b87324; }

.admin-section-nav { position: sticky; top: 8px; z-index: 20; display: flex; gap: 4px; overflow-x: auto; padding: 6px; border: 1px solid var(--vp-line); border-radius: 13px; background: rgba(255,255,255,.96); box-shadow: 0 5px 18px rgba(23,45,77,.07); backdrop-filter: blur(10px); scrollbar-width: none; }
.admin-section-nav::-webkit-scrollbar { display: none; }
.admin-section-nav a { flex: 0 0 auto; padding: 8px 12px; border-radius: 8px; color: #536177; text-decoration: none; font-size: .79rem; font-weight: 730; }
.admin-section-nav a:hover { color: var(--vp-blue); background: var(--vp-soft-blue); }

.security-alert { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 15px 16px; border: 1px solid #ebc98c; border-radius: 13px; background: #fff9ed; color: #604619; }
.security-alert-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #c98217; font-weight: 900; }
.security-alert strong { display: block; font-size: .9rem; }
.security-alert p { margin: 2px 0 0; color: #7a6641; font-size: .82rem; }
.security-alert a { color: #805310; font-size: .8rem; font-weight: 800; white-space: nowrap; }

.status-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; }
.status-tile { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 15px; border: 1px solid #e1e6ed; border-radius: 12px; background: #fafbfd; }
.status-label { color: #5b687a; font-size: .84rem; font-weight: 650; }
.status-tile strong { font-size: .78rem; }
.status-tile strong.ready { color: #177348; }
.status-tile strong.not-ready { color: #a66a0f; }
.secure-storage { display: grid; justify-items: end; gap: 4px; min-width: 260px; }
.secure-storage span { color: var(--vp-muted); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; }
.secure-storage code { max-width: 420px; padding: 5px 8px; border: 1px solid #dce4ed; border-radius: 7px; background: #f5f7fa; color: #45556b; font-size: .75rem; word-break: break-all; }

.vp-admin-body .manager-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.vp-admin-body .manager-span-2 { grid-column: 1 / -1; }
.vp-admin-body .compact-grid { display: grid; grid-template-columns: minmax(90px,.7fr) 1fr; gap: 10px; }
.vp-admin-body .field label { display: block; margin: 0 0 7px; color: #46566d; font-size: .8rem; font-weight: 730; }
.vp-admin-body .input, .vp-admin-body .select {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #ccd6e3;
  border-radius: 10px;
  outline: none;
  color: #172238;
  background: #fff;
  box-shadow: 0 1px 2px rgba(20,32,51,.02);
}
.vp-admin-body textarea.input { min-height: 92px; resize: vertical; }
.vp-admin-body .input:focus, .vp-admin-body .select:focus { border-color: #7199cd; box-shadow: 0 0 0 3px rgba(39,97,175,.10); }
.vp-admin-body .input::placeholder { color: #a1aab7; }
.vp-admin-body .field-help { margin: 6px 0 0; color: #7b8798; font-size: .75rem; line-height: 1.35; }
.vp-admin-body .muted, .vp-admin-body .note { color: var(--vp-muted); }

.settings-toggle-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; padding-top: 4px; }
.settings-toggle-grid.two-col { grid-template-columns: 1fr 1fr; }
.settings-toggle-stack { display: grid; gap: 9px; align-content: start; }
.vp-admin-body .switch-row { display: flex; align-items: center; gap: 9px; min-height: 42px; padding: 9px 11px; border: 1px solid #dfe5ed; border-radius: 10px; color: #4d5d73; background: #fafbfd; font-size: .8rem; font-weight: 690; cursor: pointer; }
.vp-admin-body .switch-row input { width: 17px; height: 17px; accent-color: var(--vp-blue); }
.switch-feature { min-width: 145px; background: var(--vp-soft-blue) !important; border-color: #c9dbef !important; color: var(--vp-navy) !important; }

.vp-admin-body .provider-panel { margin-top: 14px; padding: 18px; border: 1px solid #dfe5ed; border-radius: 12px; background: #fafbfd; }
.vp-admin-body .provider-panel h3 { margin: 0 0 14px; color: #25344b; font-size: .92rem; }
.vp-admin-body .payfast-panel { border-top: 3px solid #e6a03b; }

.vp-admin-body .manager-price-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.vp-admin-body .manager-price-panel { padding: 18px; border: 1px solid #dfe5ed; border-radius: 13px; background: #fafbfd; }
.vp-admin-body .manager-price-panel h3 { margin: 0 0 14px; color: #25344b; font-size: .92rem; }
.vp-admin-body .manager-price-panel .field + .field { margin-top: 11px; }
.vat-badge { display: inline-flex; padding: 7px 9px; border: 1px solid #d7e1ec; border-radius: 8px; color: #65748a; background: #f8fafc; font-size: .72rem; font-weight: 700; white-space: nowrap; }

.save-panel { display: grid; grid-template-columns: 1fr minmax(280px, 380px); align-items: center; gap: 22px; padding: 22px 24px; border-radius: 16px; color: #fff; background: var(--vp-navy); box-shadow: 0 8px 22px rgba(13,47,100,.16); }
.save-panel h2 { margin: 5px 0 4px; font-size: 1.1rem; color: #fff; }
.save-panel p { margin: 0; color: #c9d7e8; font-size: .82rem; }
.save-panel .section-kicker { color: #f0ad4d; }
.save-panel-action { display: grid; gap: 6px; }
.vp-admin-body .btn.primary { width: 100%; min-height: 46px; border: 0; border-radius: 10px; color: #fff; background: var(--vp-blue); box-shadow: none; font-weight: 800; }
.save-panel .btn.primary { background: #fff; color: var(--vp-navy); }
.vp-admin-body .btn.primary:hover { transform: translateY(-1px); filter: brightness(.98); }
.vp-admin-body .status { min-height: 20px; color: #6d798b; font-size: .8rem; }
.save-panel .status { color: #dbe5f1; }
.vp-admin-body .status.error { color: #b93e3e; }
.vp-admin-body .status.warning { color: #a96d12; }
.vp-admin-body .status.success { color: #187649; }
.save-panel .status.error { color: #ffd4d4; }
.save-panel .status.success { color: #c9f1db; }

.vp-admin-body .table-scroll { overflow-x: auto; border: 1px solid #e0e6ee; border-radius: 12px; background: #fff; }
.vp-admin-body .orders-table { width: 100%; min-width: 850px; border-collapse: collapse; }
.vp-admin-body .orders-table th { padding: 11px 12px; text-align: left; border-bottom: 1px solid #dfe5ed; color: #69778b; background: #f7f9fc; font-size: .7rem; letter-spacing: .07em; text-transform: uppercase; }
.vp-admin-body .orders-table td { padding: 12px; border-bottom: 1px solid #edf0f4; color: #324157; font-size: .82rem; vertical-align: top; }
.vp-admin-body .orders-table tr:last-child td { border-bottom: 0; }
.vp-admin-body .orders-table small { color: #7d8999; }
.security-card { border-left: 4px solid var(--vp-blue); }
.security-save { display: grid; grid-template-columns: 1fr minmax(220px, 300px); gap: 14px; align-items: center; }

.login-panel { width: min(520px, 100%); margin: 54px auto 0; padding: 30px; border: 1px solid var(--vp-line); border-radius: 18px; background: #fff; box-shadow: 0 14px 38px rgba(23,45,77,.10); }
.login-panel-head h1 { margin: 6px 0 7px; color: #172238; font-size: 1.65rem; letter-spacing: -.025em; }
.login-panel-head p { margin: 0 0 22px; color: var(--vp-muted); line-height: 1.5; font-size: .88rem; }
.login-form { display: grid; gap: 15px; }
.login-error { margin-bottom: 14px; padding: 10px 12px; border: 1px solid #efcccc; border-radius: 9px; background: #fff4f4; }
.login-security-note { margin: 16px 0 0; color: #7b8797; font-size: .75rem; line-height: 1.45; text-align: center; }

[hidden] { display: none !important; }

@media (max-width: 980px) {
  .admin-shell { width: min(100% - 24px, 1280px); }
  .status-grid { grid-template-columns: 1fr 1fr; }
  .branch-grid { grid-template-columns: 1fr; }
  .save-panel { grid-template-columns: 1fr; }
  .secure-storage { justify-items: start; min-width: 0; }
  .split-heading { align-items: flex-start; }
}
@media (max-width: 760px) {
  .admin-topbar { align-items: flex-start; flex-direction: column; }
  .admin-top-actions { width: 100%; justify-content: flex-start; }
  .admin-page-heading { align-items: flex-start; flex-direction: column; }
  .vp-admin-body .manager-form-grid,
  .vp-admin-body .manager-price-grid { grid-template-columns: 1fr; }
  .vp-admin-body .manager-span-2 { grid-column: auto; }
  .settings-toggle-grid, .settings-toggle-grid.two-col { grid-template-columns: 1fr; }
  .security-alert { grid-template-columns: auto 1fr; }
  .security-alert a { grid-column: 2; }
  .security-save { grid-template-columns: 1fr; }
  .section-heading { flex-direction: column; }
}
@media (max-width: 520px) {
  .admin-shell { width: min(100% - 16px, 1280px); padding-top: 8px; }
  .admin-topbar, .admin-card, .login-panel { border-radius: 14px; }
  .admin-topbar { padding: 12px; }
  .admin-brand-logo { width: 46px; height: 46px; flex-basis: 46px; }
  .admin-brand-copy strong { font-size: .98rem; }
  .admin-brand-copy span { font-size: .74rem; }
  .admin-top-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .admin-top-actions .admin-action, .admin-signout-form, .admin-signout-form .admin-action { width: 100%; }
  .admin-card { padding: 18px; }
  .admin-tools-card { padding: 18px; }
  .status-grid { grid-template-columns: 1fr; }
  .tool-link { flex: 1 1 132px; }
  .vp-admin-body .compact-grid { grid-template-columns: 1fr; }
  .login-panel { margin-top: 24px; padding: 22px; }
}