/**
 * Stillwell Core — Global Theme
 * ─────────────────────────────────────────────────────────────────────────────
 * Edit the :root variables below to change brand colors, fonts, and spacing
 * across ALL pages at once. Templates reference these variables — never
 * hardcode colors or fonts in a template file.
 *
 * Last updated: 2026-04-29
 */

/* ── Design Tokens ─────────────────────────────────────────────────────────── */
:root {
  /* Brand — Primary */
  --sw-navy:          #1c2d47;   /* primary dark navy — headings, buttons, table headers */
  --sw-navy-deep:     #243a5e;   /* darker navy — hover states, highlighted columns */
  --sw-gold:          #c8991e;   /* accent gold — active tabs, highlights, period labels */
  --sw-gold-light:    #f5e6b8;   /* light gold tint — backgrounds */

  /* Text */
  --sw-text:          #333333;   /* body text */
  --sw-text-muted:    #8a9aaa;   /* labels, eyebrows, secondary info */
  --sw-text-hint:     #b0bac8;   /* hint text, placeholder-level info */
  --sw-text-link:     #1e5a94;   /* interactive / hover link color */

  /* Backgrounds */
  --sw-bg:            #ffffff;   /* card / panel background */
  --sw-bg-warm:       #f5f4f0;   /* section header rows, alternate backgrounds */
  --sw-bg-page:       #eeedea;   /* page-level warm tint (loader overlay base) */

  /* Borders */
  --sw-border:        #eeebe4;   /* row separators, fine borders */
  --sw-border-med:    #d5d0c8;   /* section dividers, input borders */

  /* Status — Green (ahead / on target / good) */
  --sw-green-bg:      #d5eddf;
  --sw-green-text:    #1a5c38;
  --sw-green-sub:     #2a7a52;   /* secondary green — change/delta text */

  /* Status — Amber (behind / warning) */
  --sw-amber-bg:      #fde8d3;
  --sw-amber-text:    #7a3010;
  --sw-amber-sub:     #9a4820;

  /* Status — Neutral / Info */
  --sw-neutral-bg:    #e8edf5;
  --sw-neutral-text:  #3a5a8a;

  /* Status — Red (warning / error) */
  --sw-red:           #c0392b;
  --sw-red-bg:        rgba(192,57,43,0.10);

  /* Revenue Dashboard — Production (green) */
  --sw-prod:          #007a55;
  --sw-prod-tint:     rgba(0,122,85,0.15);
  --sw-prod-mid:      rgba(0,122,85,0.40);

  /* Revenue Dashboard — Sales (blue) */
  --sw-sales:         #1a6bbf;
  --sw-sales-tint:    rgba(26,107,191,0.15);
  --sw-sales-mid:     rgba(26,107,191,0.40);

  /* Revenue Dashboard — Annual / Gold tints */
  --sw-gold-tint:     rgba(200,153,30,0.15);
  --sw-gold-mid:      rgba(200,153,30,0.40);

  /* Progress bars */
  --sw-track:         #eae8e2;   /* bar track background */

  /* Typography */
  --sw-font:          "Open Sans", Arial, sans-serif;
  --sw-font-mono:     "DM Mono", "Courier New", monospace;

  /* Radii */
  --sw-radius-sm:     4px;       /* buttons, tabs, inputs */
  --sw-radius-md:     8px;       /* cards, tables */
  --sw-radius-pill:   12px;      /* badges */

  /* Shadows */
  --sw-shadow-card:   0 2px 10px rgba(0,0,0,0.07);
  --sw-shadow-deep:   0 4px 16px rgba(0,0,0,0.13);
}


/* ── Page wrapper ──────────────────────────────────────────────────────────── */
.sw-page {
  font-family: var(--sw-font);
  color: var(--sw-text);
}


/* ── Page header (eyebrow + title) ─────────────────────────────────────────── */
.sw-page-header    { padding: 8px 0 18px; margin-top: -40px; }
.sw-eyebrow {
  font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--sw-text-muted);
  font-weight: 500; margin-bottom: 4px;
}
.sw-title {
  font-size: 36px; font-weight: 900;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--sw-navy); line-height: 1;
}


/* ── Buttons ───────────────────────────────────────────────────────────────── */
.sw-btn {
  display: inline-block;
  padding: 8px 18px;
  background: var(--sw-navy); color: #fff;
  border: none; border-radius: var(--sw-radius-sm);
  font-family: var(--sw-font);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  cursor: pointer; transition: background 0.15s;
  text-decoration: none; line-height: 1.4;
}
.sw-btn:hover              { background: var(--sw-navy-deep); color: #fff; }
.sw-btn-gold               { background: var(--sw-gold); }
.sw-btn-gold:hover         { background: #a87e18; }
.sw-btn-ghost {
  background: transparent; color: var(--sw-navy);
  border: 1px solid var(--sw-navy);
}
.sw-btn-ghost:hover        { background: var(--sw-navy); color: #fff; }


/* ── Cards ─────────────────────────────────────────────────────────────────── */
.sw-card {
  background: var(--sw-bg);
  border-radius: var(--sw-radius-md);
  box-shadow: var(--sw-shadow-card);
  padding: 20px 24px;
}
.sw-card-accent-navy  { border-top: 4px solid var(--sw-navy); }
.sw-card-accent-gold  { border-top: 4px solid var(--sw-gold); }
.sw-card-accent-green { border-top: 4px solid var(--sw-green-text); }


/* ── Status badges ─────────────────────────────────────────────────────────── */
.sw-badge {
  display: inline-block;
  padding: 3px 9px; border-radius: var(--sw-radius-pill);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  font-family: var(--sw-font);
}
.sw-badge-green   { background: var(--sw-green-bg);   color: var(--sw-green-text); }
.sw-badge-amber   { background: var(--sw-amber-bg);   color: var(--sw-amber-text); }
.sw-badge-neutral { background: var(--sw-neutral-bg); color: var(--sw-neutral-text); }


/* ── Progress bar ──────────────────────────────────────────────────────────── */
.sw-bar-track {
  height: 8px; background: var(--sw-track);
  border-radius: 5px; overflow: hidden; margin-bottom: 10px;
}
.sw-bar-fill { height: 100%; border-radius: 5px; transition: width 0.4s ease; }


/* ── Searchable select (custom — no wpDataTables dependency) ───────────────── */
.sw-select-group { display: inline-flex; flex-direction: column; }
.sw-select-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--sw-text-muted);
  margin-bottom: 5px;
}
.sw-select-wrap  { position: relative; display: inline-block; }
.sw-select-wrap select {
  appearance: none; -webkit-appearance: none;
  padding: 7px 30px 7px 10px;
  font-family: var(--sw-font); font-size: 13px; color: var(--sw-text);
  background: var(--sw-bg);
  border: 1px solid var(--sw-border-med);
  border-radius: var(--sw-radius-sm);
  cursor: pointer; outline: none;
  transition: border-color 0.15s;
  min-width: 140px;
}
.sw-select-wrap select:focus  { border-color: var(--sw-navy); }
.sw-select-wrap::after {
  content: "▾"; position: absolute;
  right: 10px; top: 50%; transform: translateY(-50%);
  color: var(--sw-text-muted); pointer-events: none; font-size: 12px;
}

/* Search-inside-select (used by sw_searchable_select JS helper) */
.sw-select-search {
  width: 100%; padding: 5px 8px; margin-bottom: 4px;
  font-family: var(--sw-font); font-size: 12px;
  border: 1px solid var(--sw-border-med);
  border-radius: var(--sw-radius-sm); outline: none;
  box-sizing: border-box;
}
.sw-select-search:focus { border-color: var(--sw-navy); }


/* ── Data tables ───────────────────────────────────────────────────────────── */
.sw-table-wrap  { overflow-x: auto; margin-bottom: 28px; }
.sw-table {
  width: 100%; border-collapse: collapse;
  background: var(--sw-bg); border-radius: var(--sw-radius-md);
  overflow: hidden; box-shadow: var(--sw-shadow-card);
}
.sw-table th {
  background: var(--sw-navy) !important; color: #fff !important;
  padding: 11px 14px;
  font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 700;
  text-align: center; white-space: nowrap; border: none !important;
}
.sw-table th.left { text-align: left !important; }
.sw-table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--sw-border) !important;
  font-size: 13px; vertical-align: middle; border-top: none !important;
}
.sw-table tr:last-child td { border-bottom: none !important; }
.sw-table tr:hover td      { background: #f9f8f5; }
.sw-table .sw-section-row td {
  padding: 8px 18px !important;
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.22em; text-transform: uppercase;
  background: var(--sw-bg-warm) !important;
  color: var(--sw-navy);
}


/* ── Filter bar (row of selects + controls) ────────────────────────────────── */
.sw-filter-bar {
  display: flex; flex-wrap: wrap; gap: 20px;
  align-items: flex-end; margin-bottom: 20px;
}


/* ── Loader overlay ────────────────────────────────────────────────────────── */
.sw-loader {
  position: fixed; inset: 0;
  background: rgba(238,237,233,0.82);
  z-index: 9999; display: flex;
  align-items: center; justify-content: center;
}
.sw-loader-spinner {
  width: 64px; height: 64px;
  border: 6px solid #ddd; border-top-color: var(--sw-navy);
  border-radius: 50%; animation: sw-spin 0.85s linear infinite;
}
@keyframes sw-spin { to { transform: rotate(360deg); } }


/* ── Utility ───────────────────────────────────────────────────────────────── */
.sw-text-navy    { color: var(--sw-navy); }
.sw-text-gold    { color: var(--sw-gold); }
.sw-text-muted   { color: var(--sw-text-muted); }
.sw-text-green   { color: var(--sw-green-text); }
.sw-text-amber   { color: var(--sw-amber-text); }
.sw-bold         { font-weight: 700; }
.sw-upper        { text-transform: uppercase; letter-spacing: 0.1em; }
.sw-mono         { font-family: var(--sw-font-mono); }
.sw-hidden       { display: none !important; }