/*
 * sPMS Platform Admin — Visual Redesign Layer
 * ─────────────────────────────────────────────────────────────────────
 * Philosophy:
 *   • Visual-only overrides (color, radius, shadow, typography).
 *   • Layout model is owned by the inline <style> block — we do NOT
 *     change display model, margin-left, or sidebar width here.
 *   • Global `button` rule is intentionally ABSENT — too destructive.
 *     We scope button overrides to named action containers only.
 *   • Mobile ≤640px is handled by the inline CSS (horizontal strip).
 *     We only add ≤720px for the login page and minor grid collapses.
 * ─────────────────────────────────────────────────────────────────────
 */

/* ════════════════════════════════════════════════════════════
   1. DESIGN TOKENS
   ════════════════════════════════════════════════════════════ */
:root {
  /* Brand — teal */
  --d-brand:         #0f766e;
  --d-brand-dark:    #0a5e58;
  --d-brand-soft:    rgba(15,118,110,.10);
  --d-brand-ring:    rgba(15,118,110,.22);

  /* Neutrals */
  --d-ink:           #0d1a27;
  --d-ink-soft:      #3d5470;
  --d-ink-muted:     #6b84a0;
  --d-ink-faint:     #9eb3c7;

  /* Surfaces */
  --d-bg:            #f2f5f8;
  --d-surface:       #ffffff;
  --d-surface-soft:  #f8fafc;

  /* Borders */
  --d-line:          #e0e8f0;
  --d-line-soft:     #edf2f7;
  --d-line-strong:   #c8d5e2;

  /* Semantic colours */
  --d-green:         #0f7246;
  --d-green-bg:      rgba(15,114,70,.09);
  --d-amber:         #b45309;
  --d-amber-bg:      rgba(180,83,9,.09);
  --d-red:           #b42318;
  --d-red-bg:        rgba(180,35,24,.09);
  --d-blue:          #1d4ed8;
  --d-blue-bg:       rgba(29,78,216,.09);
  --d-purple:        #7c3aed;
  --d-purple-bg:     rgba(124,58,237,.08);

  /* Sidebar */
  --d-sidebar-bg:    #0d1520;

  /* Radius */
  --d-r-xs:          6px;
  --d-r-sm:          8px;
  --d-r:             12px;
  --d-r-lg:          14px;

  /* Shadows */
  --d-shadow-xs:     0 1px 3px rgba(13,26,39,.05), 0 1px 2px rgba(13,26,39,.06);
  --d-shadow-sm:     0 2px 8px rgba(13,26,39,.07);
  --d-shadow:        0 4px 16px rgba(13,26,39,.09);
  --d-shadow-lg:     0 8px 32px rgba(13,26,39,.11);
  --d-shadow-xl:     0 20px 48px rgba(13,26,39,.14);

  /* Motion */
  --d-ease:          0.18s ease;
  --d-ease-spring:   0.22s cubic-bezier(.34,1.56,.64,1);
}

/* ════════════════════════════════════════════════════════════
   2. BASE TYPOGRAPHY & BACKGROUND
   ════════════════════════════════════════════════════════════ */
body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system,
               BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  background: var(--d-bg) !important;
  -webkit-font-smoothing: antialiased !important;
}

/* Custom scrollbar — subtle */
::-webkit-scrollbar               { width: 5px; height: 5px; }
::-webkit-scrollbar-track         { background: transparent; }
::-webkit-scrollbar-thumb         { background: rgba(13,26,39,.13); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover   { background: rgba(13,26,39,.24); }

/* ════════════════════════════════════════════════════════════
   3. LOGIN PAGE — full 2-column redesign
      Scoped entirely inside #po-login so nothing bleeds.
   ════════════════════════════════════════════════════════════ */

/* Page background */
#po-login {
  background:
    radial-gradient(ellipse 80% 50% at 20% 20%, rgba(15,118,110,.14), transparent),
    radial-gradient(ellipse 60% 40% at 80% 80%, rgba(29,78,216,.10), transparent),
    linear-gradient(180deg, #f0f5fa 0%, #e8f0f8 100%) !important;
  padding: 0 !important;
  align-items: stretch !important;
}

/* Remove the "sPMS" fixed text painted by inline CSS */
#po-login::before { display: none !important; }

/* Shell: 2-column split, full-height */
#po-login .wa-login-shell {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  min-height: 100vh !important;
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  gap: 0 !important;
  margin: 0 !important;
  place-items: stretch !important;
  background: #fff !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* ── Brand panel (left side) ── */
.wa-login-brand {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  padding: clamp(32px, 5vw, 56px) !important;
  background:
    radial-gradient(ellipse at 0%   0%, rgba(15,118,110,.35), transparent 50%),
    radial-gradient(ellipse at 100% 100%, rgba(29,78,216,.25), transparent 50%),
    linear-gradient(145deg, #0a1929 0%, #0d2236 55%, #091e34 100%) !important;
  color: #fff !important;
  position: relative !important;
  overflow: hidden !important;
}

.wa-login-brand::after {
  content: '' !important;
  position: absolute !important;
  inset: 20px !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 16px !important;
  pointer-events: none !important;
}

.wa-login-brand-panel {
  position: relative;
  z-index: 1;
}

/* Kicker chip inside brand panel */
.wa-login-brand-panel .wa-login-kicker {
  display: inline-flex !important;
  background: rgba(15,118,110,.22) !important;
  border: 1px solid rgba(15,118,110,.38) !important;
  color: rgba(255,255,255,.9) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  padding: 5px 12px !important;
  border-radius: 999px !important;
  margin-bottom: 20px !important;
  min-height: auto !important;
  background-color: transparent !important; /* reset inline */
}

.wa-login-brand-panel h1 {
  font-size: clamp(26px, 3.5vw, 40px) !important;
  font-weight: 800 !important;
  letter-spacing: -.04em !important;
  color: #fff !important;
  margin: 0 0 14px !important;
  line-height: 1.08 !important;
}

.wa-login-brand-panel p {
  color: rgba(255,255,255,.65) !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
  margin: 0 !important;
}

.wa-login-points {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 24px !important;
}

.wa-login-points span {
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: rgba(255,255,255,.88) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 7px 14px !important;
  border-radius: 999px !important;
  min-height: auto !important;
}

/* ── Form panel (right side) ── */
#po-login .wa-login-panel {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: clamp(32px, 5vw, 56px) !important;
  background: #fff !important;
  width: auto !important;
  max-width: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Owner "O" mark */
.po-owner-mark {
  background: linear-gradient(135deg, var(--d-brand), var(--d-blue)) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(15,118,110,.30) !important;
  border-radius: 12px !important;
}

/* Heading inside form */
#po-login .wa-login-panel-head h2 {
  font-size: clamp(22px, 2.5vw, 28px) !important;
  font-weight: 800 !important;
  letter-spacing: -.03em !important;
  color: var(--d-ink) !important;
  margin: 0 0 6px !important;
}

#po-login .wa-login-panel-head p {
  color: var(--d-ink-muted) !important;
  font-size: 13.5px !important;
  margin: 0 !important;
}

/* Kicker chip inside form */
#po-login .wa-login-kicker {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: var(--d-brand) !important;
  background: var(--d-brand-soft) !important;
  border: 1px solid var(--d-brand-ring) !important;
  border-radius: 999px !important;
  padding: 4px 10px !important;
  display: inline-block !important;
  min-height: auto !important;
  margin-bottom: 6px !important;
}

/* Fields inside login */
#po-login .wa-field input {
  min-height: 44px !important;
  border-radius: var(--d-r-sm) !important;
  border: 1.5px solid var(--d-line) !important;
  background: #fff !important;
  font-size: 14px !important;
}

#po-login .wa-field input:focus {
  border-color: var(--d-brand) !important;
  box-shadow: 0 0 0 3px var(--d-brand-soft) !important;
  outline: none !important;
}

/* Submit button */
#po-login .wa-login-actions .primary {
  background: linear-gradient(135deg, var(--d-brand), var(--d-brand-dark)) !important;
  border-color: var(--d-brand) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(15,118,110,.30) !important;
  min-height: 46px !important;
  width: 100% !important;
  border-radius: var(--d-r-sm) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

#po-login .wa-login-actions .primary:hover {
  filter: brightness(1.07) !important;
  transform: translateY(-1px) !important;
}

#po-login .wa-status {
  color: var(--d-ink-muted) !important;
  font-size: 13px !important;
  text-align: center !important;
  margin-top: 14px !important;
}

#po-login .wa-status a {
  color: var(--d-brand) !important;
  font-weight: 600 !important;
}

/* Mobile login: drop to single column */
@media (max-width: 720px) {
  #po-login .wa-login-shell {
    grid-template-columns: 1fr !important;
  }
  .wa-login-brand { display: none !important; }
  #po-login .wa-login-panel {
    min-height: 100vh !important;
    justify-content: flex-start !important;
    padding-top: 60px !important;
  }
}

/* ════════════════════════════════════════════════════════════
   4. SIDEBAR — dark theme upgrade
      Width and position intentionally NOT overridden here.
      The inline CSS owns the layout; we own the colour/style.
   ════════════════════════════════════════════════════════════ */
.wa-sidebar {
  background: var(--d-sidebar-bg) !important;
  border-right: 1px solid rgba(255,255,255,.05) !important;
  box-shadow: 2px 0 20px rgba(0,0,0,.20) !important;
}

/* Sidebar header block */
.wa-sidebar > div:first-child {
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
}

.wa-sidebar > div:first-child h1 {
  color: #fff !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  letter-spacing: -.03em !important;
}

.wa-sidebar > div:first-child p {
  color: rgba(255,255,255,.42) !important;
  font-size: 11.5px !important;
}

/* Brand kicker inside sidebar */
.wa-sidebar .wa-kicker {
  background: rgba(15,118,110,.20) !important;
  border-color: rgba(15,118,110,.30) !important;
  color: rgba(255,255,255,.88) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .12em !important;
}

/* Nav section labels */
.po-nav-section {
  color: rgba(255,255,255,.30) !important;
  font-size: 9.5px !important;
  font-weight: 800 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  margin: 12px 6px 3px !important;
  display: block !important;
}

/* Nav buttons */
.wa-nav button,
.wa-nav a {
  color: rgba(255,255,255,.68) !important;
  border: 1px solid transparent !important;
  border-radius: var(--d-r-sm) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  background: transparent !important;
  transition:
    background-color var(--d-ease),
    border-color var(--d-ease),
    color var(--d-ease) !important;
}

.wa-nav button:hover,
.wa-nav a:hover {
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(255,255,255,.10) !important;
  color: #fff !important;
  transform: none !important; /* cancel translateX(1px) from inline */
}

/* Active nav item */
.wa-nav button.is-active,
.wa-nav a.is-active {
  background: linear-gradient(135deg,
    rgba(15,118,110,.44),
    rgba(15,118,110,.27)) !important;
  border-color: rgba(15,118,110,.50) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07) !important;
}

/* Active icon chip inside nav button */
.wa-nav button.is-active::before,
.wa-nav a.is-active::before {
  background: rgba(255,255,255,.18) !important;
  border-color: rgba(255,255,255,.22) !important;
}

/* Active left accent bar — appended via ::after */
.wa-nav button.is-active::after {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 22% !important;
  bottom: 22% !important;
  width: 3px !important;
  border-radius: 0 3px 3px 0 !important;
  background: var(--d-brand) !important;
}

/* ════════════════════════════════════════════════════════════
   5. SIDEBAR EDGE TOGGLE BUTTON
      Visual polish only; position/size kept by inline CSS.
   ════════════════════════════════════════════════════════════ */
.wa-sidebar-edge {
  background: var(--d-surface) !important;
  border: 1px solid var(--d-line) !important;
  border-left: none !important;
  color: var(--d-ink-muted) !important;
  box-shadow: 4px 0 14px rgba(0,0,0,.08) !important;
  transition: background-color var(--d-ease), color var(--d-ease) !important;
}

.wa-sidebar-edge:hover {
  background: var(--d-brand-soft) !important;
  color: var(--d-brand) !important;
  transform: none !important;
}

/* ════════════════════════════════════════════════════════════
   6. TOPBAR (wa-shell-head)
   ════════════════════════════════════════════════════════════ */
.wa-shell-head {
  background: rgba(255,255,255,.97) !important;
  border: none !important;
  border-bottom: 1px solid var(--d-line) !important;
  border-radius: 0 !important;
  box-shadow:
    0 1px 0 var(--d-line),
    0 4px 16px rgba(13,26,39,.04) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  margin-bottom: 0 !important;
}

/* Page title area */
.wa-shell-title-group .wa-kicker {
  background: var(--d-brand-soft) !important;
  border: 1px solid var(--d-brand-ring) !important;
  color: var(--d-brand) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
}

.wa-shell-head h2 {
  font-size: 18px !important;
  font-weight: 800 !important;
  letter-spacing: -.03em !important;
  color: var(--d-ink) !important;
  margin: 0 !important;
  line-height: 1.15 !important;
}

/* Search box */
.po-global-search input {
  border-radius: var(--d-r-sm) !important;
  border: 1.5px solid var(--d-line) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b84a0' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6'/%3E%3Cpath d='m16 16 4 4'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: 10px center !important;
  padding-left: 32px !important;
  transition: border-color var(--d-ease), box-shadow var(--d-ease) !important;
}

.po-global-search input:focus {
  border-color: var(--d-brand) !important;
  box-shadow: 0 0 0 3px var(--d-brand-soft) !important;
  outline: none !important;
}

/* User meta text */
.po-topbar-meta strong { color: var(--d-ink) !important; }
.po-topbar-meta span   { color: var(--d-ink-muted) !important; }

/* Topbar action buttons — scoped, safe */
.po-topbar-actions button {
  border-radius: var(--d-r-xs) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  transition:
    background-color var(--d-ease),
    border-color var(--d-ease),
    color var(--d-ease) !important;
}

#po-refresh {
  background: linear-gradient(135deg, var(--d-brand), var(--d-brand-dark)) !important;
  border-color: var(--d-brand) !important;
  color: #fff !important;
  box-shadow: 0 3px 10px rgba(15,118,110,.26) !important;
}

#po-refresh:hover { filter: brightness(1.07) !important; transform: none !important; }

#po-logout {
  background: var(--d-red-bg) !important;
  border-color: rgba(180,35,24,.20) !important;
  color: var(--d-red) !important;
}

/* ════════════════════════════════════════════════════════════
   7. PAGES
      We only add padding and tighten gap.
      display model stays grid (set by website-admin.css).
   ════════════════════════════════════════════════════════════ */
.wa-page {
  padding: 18px 20px 32px !important;
}

.wa-page.is-active {
  gap: 14px !important;
  animation: d-page-enter .22s ease both !important;
}

@keyframes d-page-enter {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ════════════════════════════════════════════════════════════
   8. CARDS & PANELS
   ════════════════════════════════════════════════════════════ */
.wa-card,
.po-manage-card,
.po-settings-card,
.po-section,
.po-page-intro,
.po-start-card {
  border-radius: var(--d-r-lg) !important;
  border-color: var(--d-line) !important;
  box-shadow: var(--d-shadow-xs) !important;
  background: var(--d-surface) !important;
}

.wa-card h3,
.po-manage-card-head h3,
.po-settings-card h3,
.po-settings-card h4 {
  color: var(--d-ink) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
}

/* Page intro — left accent border */
.po-page-intro {
  border-left: 3px solid var(--d-brand) !important;
  padding: 16px 20px !important;
  background: linear-gradient(90deg,
    rgba(15,118,110,.04) 0%,
    var(--d-surface) 100%) !important;
}

.po-page-intro h3 { color: var(--d-ink) !important; }

/* Diagnostic accordions */
.po-diagnostic-section {
  border-radius: var(--d-r-lg) !important;
  overflow: hidden !important;
}

.po-diagnostic-section > summary {
  transition: background-color var(--d-ease) !important;
}

.po-diagnostic-section[open] > summary {
  background: var(--d-surface-soft) !important;
  border-bottom-color: var(--d-line) !important;
}

/* ════════════════════════════════════════════════════════════
   9. BUTTONS — SCOPED (never global `button`)
      Each context is named explicitly so we can't accidentally
      affect table row action buttons, nav buttons, etc.
   ════════════════════════════════════════════════════════════ */

/* All scoped action areas get consistent radius + transition */
.wa-actions button,
.wa-actions a,
.po-section-actions button,
.po-billing-actions button,
.po-manage-actions button,
.po-danger-actions button,
.po-settings-actions button,
.po-website-actions button,
.po-validation-grid button,
.po-notes-form .wa-actions button,
.po-toolbar .wa-actions button {
  border-radius: var(--d-r-sm) !important;
  font-weight: 600 !important;
  transition:
    background-color var(--d-ease),
    border-color var(--d-ease),
    box-shadow var(--d-ease),
    transform var(--d-ease) !important;
}

.wa-actions button:hover,
.wa-actions a:hover {
  transform: translateY(-1px) !important;
}

/* Primary / CTA */
.wa-actions button.primary,
.wa-actions a.primary,
.po-billing-actions button.primary,
.po-manage-actions button.primary,
.po-settings-actions button.primary,
.po-toolbar .wa-actions button.primary {
  background: linear-gradient(135deg, var(--d-brand), var(--d-brand-dark)) !important;
  border-color: var(--d-brand-dark) !important;
  color: #fff !important;
  box-shadow: 0 3px 10px rgba(15,118,110,.26) !important;
}

.wa-actions button.primary:hover,
.po-billing-actions button.primary:hover {
  filter: brightness(1.07) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 16px rgba(15,118,110,.34) !important;
}

/* Danger */
button.is-danger,
.po-danger-actions button.is-danger {
  background: var(--d-red-bg) !important;
  border-color: rgba(180,35,24,.25) !important;
  color: var(--d-red) !important;
}

/* ════════════════════════════════════════════════════════════
   10. BADGES
   ════════════════════════════════════════════════════════════ */
.po-badge {
  background: var(--d-brand-soft) !important;
  border: 1px solid var(--d-brand-ring) !important;
  color: var(--d-brand) !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

.po-badge.is-warn {
  background: var(--d-amber-bg) !important;
  border-color: rgba(180,83,9,.18) !important;
  color: var(--d-amber) !important;
}

.po-badge.is-danger {
  background: var(--d-red-bg) !important;
  border-color: rgba(180,35,24,.18) !important;
  color: var(--d-red) !important;
}

/* ════════════════════════════════════════════════════════════
   11. FORMS
   ════════════════════════════════════════════════════════════ */
.wa-field span {
  color: var(--d-ink-muted) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
}

.wa-field input,
.wa-field select,
.wa-field textarea {
  border-radius: var(--d-r-sm) !important;
  border: 1.5px solid var(--d-line) !important;
  background: #fff !important;
  color: var(--d-ink) !important;
  transition:
    border-color var(--d-ease),
    box-shadow var(--d-ease) !important;
}

.wa-field input:focus,
.wa-field select:focus,
.wa-field textarea:focus {
  border-color: var(--d-brand) !important;
  box-shadow: 0 0 0 3px var(--d-brand-soft) !important;
  outline: none !important;
  background: #fff !important;
}

/* Secret note box */
.po-secret-note {
  background: var(--d-brand-soft) !important;
  border-color: var(--d-brand-ring) !important;
  color: var(--d-ink-soft) !important;
  border-radius: var(--d-r-sm) !important;
}

/* ════════════════════════════════════════════════════════════
   12. TABLES
   ════════════════════════════════════════════════════════════ */
.wa-table-wrap {
  border-radius: var(--d-r-lg) !important;
  border: 1px solid var(--d-line) !important;
  background: var(--d-surface) !important;
  box-shadow: var(--d-shadow-xs) !important;
  overflow: auto !important;
}

.wa-table th {
  background: var(--d-surface-soft) !important;
  color: var(--d-ink-muted) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .10em !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid var(--d-line) !important;
}

.wa-table td {
  border-bottom-color: var(--d-line-soft) !important;
  color: var(--d-ink-soft) !important;
  font-size: 13px !important;
}

.wa-table tbody tr:hover td {
  background: var(--d-brand-soft) !important;
}

/* ════════════════════════════════════════════════════════════
   13. MINI LIST ITEMS
   ════════════════════════════════════════════════════════════ */
.po-mini-item {
  border-radius: 10px !important;
  border: 1px solid var(--d-line-soft) !important;
  background: var(--d-surface) !important;
  transition: border-color var(--d-ease), box-shadow var(--d-ease) !important;
}

.po-mini-item:hover {
  border-color: var(--d-line) !important;
  box-shadow: var(--d-shadow-xs) !important;
}

.po-mini-item strong { color: var(--d-ink) !important; }
.po-mini-item span   { color: var(--d-ink-muted) !important; }

/* ════════════════════════════════════════════════════════════
   14. KPI CARDS
   ════════════════════════════════════════════════════════════ */
.po-kpi-card {
  border-radius: var(--d-r-lg) !important;
  border: 1px solid var(--d-line) !important;
  background: var(--d-surface) !important;
  box-shadow: var(--d-shadow-xs) !important;
  transition: box-shadow var(--d-ease), transform var(--d-ease) !important;
}

.po-kpi-card:hover {
  box-shadow: var(--d-shadow) !important;
  transform: translateY(-2px) !important;
}

.po-kpi-card-label {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: var(--d-ink-muted) !important;
}

.po-kpi-card-value {
  font-size: 24px !important;
  font-weight: 800 !important;
  letter-spacing: -.04em !important;
  color: var(--d-ink) !important;
  line-height: 1.1 !important;
}

.po-kpi-card-sub {
  font-size: 12px !important;
  color: var(--d-ink-muted) !important;
}

/* Colour variants */
.po-kpi-card.is-green::before  { background: var(--d-brand) !important; }
.po-kpi-card.is-blue::before   { background: var(--d-blue) !important; }
.po-kpi-card.is-amber::before  { background: var(--d-amber) !important; }
.po-kpi-card.is-red::before    { background: var(--d-red) !important; }
.po-kpi-card.is-purple::before { background: var(--d-purple) !important; }

.po-kpi-card.is-green  .po-kpi-card-icon { background: var(--d-brand-soft) !important; color: var(--d-brand) !important; }
.po-kpi-card.is-blue   .po-kpi-card-icon { background: var(--d-blue-bg) !important;   color: var(--d-blue) !important; }
.po-kpi-card.is-amber  .po-kpi-card-icon { background: var(--d-amber-bg) !important;  color: var(--d-amber) !important; }
.po-kpi-card.is-red    .po-kpi-card-icon { background: var(--d-red-bg) !important;    color: var(--d-red) !important; }
.po-kpi-card.is-purple .po-kpi-card-icon { background: var(--d-purple-bg) !important; color: var(--d-purple) !important; }

/* ════════════════════════════════════════════════════════════
   15. SUMMARY & COMMAND CARDS
   ════════════════════════════════════════════════════════════ */
.po-summary-card,
.po-report-card {
  border-radius: var(--d-r-lg) !important;
  border: 1px solid var(--d-line) !important;
  background: var(--d-surface) !important;
  box-shadow: var(--d-shadow-xs) !important;
  border-top: 3px solid var(--d-brand) !important;
}

.po-summary-card strong,
.po-report-card strong {
  color: var(--d-ink) !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: -.04em !important;
}

.po-summary-card span,
.po-report-card span {
  color: var(--d-ink-muted) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
}

.po-command-card {
  border-radius: var(--d-r-lg) !important;
  border: 1px solid var(--d-line) !important;
  background: var(--d-surface) !important;
  box-shadow: var(--d-shadow-xs) !important;
  border-top: 3px solid rgba(15,118,110,.38) !important;
  transition: box-shadow var(--d-ease) !important;
}

.po-command-card:hover { box-shadow: var(--d-shadow) !important; }

.po-command-card h3 {
  color: var(--d-ink) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

.po-command-card p {
  color: var(--d-ink-muted) !important;
  font-size: 12.5px !important;
}

/* ════════════════════════════════════════════════════════════
   16. WORKSPACE MANAGE PAGE
   ════════════════════════════════════════════════════════════ */
.po-manage-header {
  border-radius: var(--d-r-lg) !important;
  border-color: var(--d-line) !important;
  box-shadow: var(--d-shadow-xs) !important;
  background: var(--d-surface) !important;
}

.po-manage-header-copy h2 {
  color: var(--d-ink) !important;
  font-size: 1.28rem !important;
  font-weight: 800 !important;
  letter-spacing: -.04em !important;
}

.po-manage-card {
  border-radius: var(--d-r-lg) !important;
  border-color: var(--d-line) !important;
  box-shadow: var(--d-shadow-xs) !important;
}

/* ════════════════════════════════════════════════════════════
   17. CONTROL HEAD & STATUS CHIP
   ════════════════════════════════════════════════════════════ */
.po-control-status {
  background: var(--d-brand-soft) !important;
  border-color: var(--d-brand-ring) !important;
  color: var(--d-brand) !important;
  border-radius: 999px !important;
}

.po-control-status::before {
  background: var(--d-brand) !important;
}

/* ════════════════════════════════════════════════════════════
   18. STATUS TOAST (#po-status)
   ════════════════════════════════════════════════════════════ */
#po-status {
  position: fixed !important;
  bottom: 20px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 9000 !important;
  min-width: 200px !important;
  max-width: min(480px, calc(100vw - 40px)) !important;
  padding: 12px 20px !important;
  border-radius: var(--d-r) !important;
  background: var(--d-ink) !important;
  color: #fff !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  text-align: center !important;
  box-shadow: var(--d-shadow-xl) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  animation: d-toast-in .22s ease both !important;
  margin: 0 !important;
}

#po-status:empty   { display: none !important; }
#po-status.is-success { background: rgba(15,114,70,.94) !important; }
#po-status.is-error   { background: rgba(180,35,24,.94) !important; }

@keyframes d-toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(10px) scale(.96); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0)    scale(1);   }
}

/* ════════════════════════════════════════════════════════════
   19. EMPTY STATES
   ════════════════════════════════════════════════════════════ */
.po-empty {
  border-radius: var(--d-r-sm) !important;
  border-color: var(--d-line) !important;
  background: var(--d-surface-soft) !important;
  color: var(--d-ink-muted) !important;
}

/* ════════════════════════════════════════════════════════════
   20. FOCUS RINGS — accessibility
   ════════════════════════════════════════════════════════════ */
*:focus-visible {
  outline: 2px solid var(--d-brand) !important;
  outline-offset: 2px !important;
  border-radius: var(--d-r-xs) !important;
}

/* ════════════════════════════════════════════════════════════
   21. SCROLLBAR — sidebar gets a thinner track
   ════════════════════════════════════════════════════════════ */
.wa-sidebar::-webkit-scrollbar         { width: 3px; }
.wa-sidebar::-webkit-scrollbar-track   { background: transparent; }
.wa-sidebar::-webkit-scrollbar-thumb   { background: rgba(255,255,255,.12); border-radius: 999px; }

/* ════════════════════════════════════════════════════════════
   22. RESPONSIVE GRID COLLAPSES (≤1080px)
       We only collapse multi-column grids — we do NOT touch
       the sidebar/shell/main layout model at all.
   ════════════════════════════════════════════════════════════ */
@media (max-width: 1080px) {
  .po-split,
  .po-manage-grid,
  .po-settings-grid {
    grid-template-columns: 1fr !important;
  }

  .po-toolbar.po-workspace-toolbar {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .po-overview-grid,
  .po-attention-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ════════════════════════════════════════════════════════════
   23. PRINT
   ════════════════════════════════════════════════════════════ */
@media print {
  .wa-sidebar, .wa-sidebar-edge { display: none !important; }
  .wa-main { margin-left: 0 !important; width: 100% !important; }
  .wa-page.is-active { animation: none !important; }
}