/* ============================================================================
   admin-theme.css — Slam Dunk Software · Dashboard / Workspace Admin theme
   ----------------------------------------------------------------------------
   Loaded AFTER each page's own <style> so it re-skins the platform to match the
   slamdunksoftware.com brand (dark green + gold/cream), shifted a little lighter
   and gold-forward so the admin/workspace area reads as distinct from the public
   marketing site. Also adds mobile responsiveness (stacking + scrollable nav).

   Palette (from the live marketing site): bg #060d09, green #3f8159,
   gold/cream #e7d8b8, ink #f4f3ec, muted #a4b3a6.
   ============================================================================ */

:root, [data-theme] {
  /* Backgrounds — darker base so lifted card panels clearly pop off it. */
  --bg:        #07100c !important;
  --surface:   #16261d !important;   /* cards/modules: noticeably lighter than bg */
  --surface2:  #1f3428 !important;   /* inputs/inner: lighter again for contrast */
  --panel:     #16261d !important;
  --panel2:    #1f3428 !important;
  --border:    #315240 !important;   /* stronger, more visible edges */
  --line:      #315240 !important;

  /* Text */
  --text:      #f4f3ec !important;
  --ink:       #f4f3ec !important;
  --muted:     #9fb4a4 !important;

  /* Brand accents — green primary, gold secondary (the admin signature) */
  --accent:    #3f8159 !important;
  --accent2:   #e7d8b8 !important;
  --brand:     #3f8159 !important;
  --brand2:    #57a074 !important;

  /* Semantic */
  --green:     #4caf7a !important;
  --success:   #4caf7a !important;
  --blue:      #6fae9a !important;   /* re-tinted to a teal-green to stay on brand */
  --warn:      #d8a53a !important;
  --amber:     #d8a53a !important;
  --danger:    #d9614f !important;
  --red:       #d9614f !important;
}

/* Body background wash — subtle green radial, brand-consistent */
body {
  background:
    radial-gradient(1100px 520px at 78% -10%, rgba(63,129,89,.10), transparent 60%),
    var(--bg) !important;
  color: var(--text) !important;
}

/* Common branded blocks that use hardcoded indigo inline — re-skin them */
.logo, .logo-mark, .brand-icon, .ws-logo, #ws-logo {
  background: linear-gradient(135deg, #3f8159, #2b5d40) !important;
  color: #f4f3ec !important;
}
.super-badge, .role-badge[data-role-badge] {
  background: linear-gradient(135deg, #e7d8b8, #cbb37e) !important;
  color: #1a2b20 !important;
}
.nav-item.active {
  background: rgba(231,216,184,.12) !important;
  color: #e7d8b8 !important;
}
.kpi::before { background: var(--kpi-color, #3f8159) !important; }

/* Buttons: primary = green, keep gold for emphasis where useful */
.btn-primary, .ws-btn-primary { background: var(--accent) !important; color: #f4f3ec !important; }
.btn-primary:hover, .ws-btn-primary:hover { background: #4d9268 !important; }
.btn-accent { background: var(--accent2) !important; color:#1a2b20 !important; }

/* ============================================================================
   CARDS / MODULES POP — lift the "bubbles" off the dark bg so they're easy to
   see and read. Lighter panel + defined border + shadow; a gold accent edge on
   content cards adds contrast so the UI isn't monotone green.
   ============================================================================ */
.card, .table-card, .ws-card, .kpi, .modal, .sds-modal, .deliv-block {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.5) !important;
}
/* Gold left edge on the main content cards/modules — clear visual separation. */
.content .card { border-left: 3px solid var(--accent2) !important; }
.content .card h2, .card > h2, .table-card-header h2 { color: #ffffff !important; }
/* Subtle hover lift for clickable cards. */
.ws-card:hover, .card:hover { border-color: #46714f !important; }
/* Inputs/selects: lighter fill + clearer border so fields read as interactive. */
.form-input, .form-select, .fld input, .fld select, .fld textarea, .search, input, select, textarea {
  background: var(--surface2) !important;
  border: 1px solid var(--border) !important;
}
.form-input:focus, .form-select:focus, .fld input:focus, .fld select:focus, input:focus, select:focus {
  border-color: var(--accent2) !important;
}

/* ============================================================================
   MOBILE — stack everything so nothing is cut off on a phone
   ============================================================================ */
@media (max-width: 860px) {
  /* Single-column app layout; the fixed sidebar becomes a scrollable top bar */
  .layout { grid-template-columns: 1fr !important; display: block !important; }
  .sidebar {
    display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important;
    align-items: center !important; gap: 6px !important;
    overflow-x: auto !important; -webkit-overflow-scrolling: touch !important;
    position: sticky !important; top: 0 !important; z-index: 50 !important;
    border-right: none !important; border-bottom: 1px solid var(--border) !important;
    padding: 10px 12px !important; height: auto !important; width: 100% !important;
  }
  .sidebar .brand, .sidebar-logo { margin: 0 8px 0 0 !important; flex: 0 0 auto !important; }
  .sidebar .nav-section { display: none !important; }
  .sidebar .nav-item { flex: 0 0 auto !important; white-space: nowrap !important; padding: 8px 10px !important; }
  .sidebar > div[style*="margin-top:auto"], .sidebar > div[style*="margin-top: auto"] { margin: 0 !important; display:flex; }

  /* Stack every multi-column grid */
  .kpi-strip, .ws-grid, .stats, .cat-grid, .prod-grid, .cards, .grid,
  .info-grid, .form-grid, .tst-grid, .two, .foot-grid, .kpi-strip > *, .split {
    grid-template-columns: 1fr !important; display: grid !important; gap: 12px !important;
  }
  .split { display: block !important; }

  /* Content + headers breathe less, wrap freely */
  .content, .main, main { padding: 18px 14px !important; }
  .topbar, .header { flex-wrap: wrap !important; gap: 10px !important; padding: 14px 16px !important; }
  .topbar-right, .header-right { flex-wrap: wrap !important; }

  /* Tables scroll horizontally instead of overflowing the screen */
  .table-card, #table-container { overflow-x: auto !important; }
  table { min-width: 560px !important; }

  /* Modals fit the screen */
  .modal, .sds-modal { max-width: 94vw !important; }

  /* Reduce huge KPI numbers so they fit */
  .kpi-value, .stat-value { font-size: 26px !important; }
}

/* Small phones */
@media (max-width: 480px) {
  .kpi-value, .stat-value { font-size: 22px !important; }
  h1 { font-size: 20px !important; }
}