/* ===========================================================================
   RunWith Admin Portal — Modernisation Layer
   ---------------------------------------------------------------------------
   Loaded AFTER css/style.css, so this file only overrides. Nothing in the
   original stylesheet is deleted, and every page keeps its existing markup.
   That means rollback is a single line in header.php, and no PHP page needs
   to change (95 pages include header.php).

   Deliberately conservative choices, given there is no dev environment and no
   test coverage:
     - `box-sizing` is applied ONLY to form controls and components restyled
       here, never globally. A global reset would re-compute widths across a
       float-based layout on 95 pages.
     - The float layout, `.clear` divs and markup structure are left alone.
     - Base font goes 13px -> 14px, not 16px. Bigger is better typography but
       a larger jump risks wrapping in tight fixed-width cells.

   Palette is anchored to the RunWith brand orange used on the marketing
   landing pages (docs/01-Landing-Pages), so the portal and the brand agree.
   =========================================================================== */

:root {
  /* Brand ------------------------------------------------------------------ */
  --rw-accent:          #ff5a1f;
  --rw-accent-hover:    #e8480f;
  --rw-accent-soft:     #fff1eb;
  --rw-accent-ring:     rgba(255, 90, 31, .28);

  /* Neutrals (cool grey ramp) --------------------------------------------- */
  --rw-ink:             #0f172a;
  --rw-text:           #1f2937;
  --rw-text-muted:      #5b6675;
  --rw-text-subtle:     #7b8595;
  --rw-line:            #e6e9ef;
  --rw-line-strong:     #d3d8e2;
  --rw-surface:         #ffffff;
  --rw-canvas:          #f4f6fa;
  --rw-canvas-alt:      #fafbfd;

  /* Semantic (modernised versions of the originals) ----------------------- */
  --rw-success:         #12996b;
  --rw-success-soft:    #e6f6ef;
  --rw-info:            #2563eb;
  --rw-info-soft:       #e8effe;
  --rw-warning:         #b7791f;
  --rw-warning-soft:    #fdf3e2;
  --rw-danger:          #d92d20;
  --rw-danger-soft:     #fdeceb;

  /* Shape & depth --------------------------------------------------------- */
  --rw-r-sm:  6px;
  --rw-r-md:  10px;
  --rw-r-lg:  14px;
  --rw-r-pill: 999px;

  --rw-shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
  --rw-shadow-md: 0 1px 3px rgba(16, 24, 40, .06), 0 6px 16px -4px rgba(16, 24, 40, .10);
  --rw-shadow-lg: 0 2px 6px rgba(16, 24, 40, .06), 0 16px 32px -8px rgba(16, 24, 40, .14);

  --rw-font: 'Poppins Regular', 'Poppins', -apple-system, BlinkMacSystemFont,
             'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* ===========================================================================
   1. Typography & base
   =========================================================================== */

body {
  font-family: var(--rw-font);
  font-size: 14px;                 /* was 13px */
  line-height: 1.6;                /* was 1.5 */
  color: var(--rw-text);
  background-color: var(--rw-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  color: var(--rw-ink);
  letter-spacing: -0.011em;        /* tightens large text, a modern signal */
  line-height: 1.28;
}

a { color: var(--rw-accent); }
a:hover { color: var(--rw-accent-hover); }

/* Accessible focus ring. The original stylesheet sets `outline:none` on
   inputs with no replacement, which makes keyboard navigation invisible.
   :focus-visible keeps mouse clicks clean while restoring keyboard focus. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.simpleButton:focus-visible {
  outline: 2px solid var(--rw-accent);
  outline-offset: 2px;
  border-radius: var(--rw-r-sm);
}

/* ===========================================================================
   2. Retire the gradients
   ---------------------------------------------------------------------------
   The originals are orange->pink, cyan->purple and magenta->red, built with
   -moz-/-webkit-/-o- prefixes and `progid:DXImageTransform` IE filters. These
   are the single strongest "dated" signal in the UI.

   They are still used to colour-code status dots and icon tiles, so they need
   to stay visually DISTINCT — replaced with a flat, harmonious, and
   deliberately still-distinguishable set rather than removed.
   =========================================================================== */

.gradient-1-v, .gradient-1-h { background: var(--rw-accent)  !important; }
.gradient-2-v, .gradient-2-h { background: #4f46e5           !important; }
.gradient-3-v, .gradient-3-h { background: #0d9488           !important; }
.gradient-4-v, .gradient-4-h { background: var(--rw-success) !important; }
.gradient-5-v, .gradient-5-h { background: #64748b           !important; }
.gradient-6-v, .gradient-6-h { background: #7c3aed           !important; }
.gradient-7-v, .gradient-7-h { background: var(--rw-info)    !important; }

/* ⚠️ .gradient-button-1 is NOT a button — it is on <div id="sidebar">.
   Styling it as an accent turned the entire sidebar solid orange. Scope the
   accent treatment to real buttons only, and let the sidebar rule below win. */
a.gradient-button-1,
button.gradient-button-1,
input.gradient-button-1 {
  background: var(--rw-accent) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: var(--rw-shadow-sm) !important;
}

/* ===========================================================================
   3. Layout shell
   =========================================================================== */

#wrapper  { background: var(--rw-canvas); }

/* ---- Sidebar -------------------------------------------------------------
   Deliberately kept DARK rather than switched to white. The sidebar was built
   for a coloured gradient, so its text and icons are light — a white surface
   would render them invisible. A deep slate keeps every existing foreground
   colour working while looking current, and makes the orange accent read as
   deliberate rather than shouty. */
#sidebar,
#sidebar.gradient-button-1 {
  /* ⚠️ box-sizing is REQUIRED here, and any border on this element is only safe
     because of it. #sidebar is width:230px, float:left, with no box-sizing;
     #wrapper is width:calc(100% - 230px). Adding a 1px border made the sidebar
     231px, so the two no longer fitted side by side and the wrapper dropped
     BELOW the full-height sidebar — the page looked empty until you scrolled.
     Never add border or padding to this element without box-sizing. */
  box-sizing: border-box;
  background: #16202e !important;
  background-image: none !important;
  border-right: 1px solid #0e1620;
  color: #aab4c2;
}
/* Same trap: #wrapper's calc() width leaves no room for extra box. */
#wrapper { box-sizing: border-box; }

/* Header block. `.animatedBG` is a 15s animated four-colour gradient
   (#ee7752 → #e73c7e → #23a6d5 → #23d5ab) that ran behind the profile area —
   killed here, not just recoloured, so it stops animating too. */
#sidebar .sidebar_logo,
#sidebar .sidebar_logo.animatedBG,
.sidebar_logo.animatedBG {
  background: #111a26 !important;
  background-image: none !important;
  animation: none !important;
  border-bottom: 1px solid #0e1620;
  color: #f1f5f9;
  height: auto !important;
  padding: 18px 10px 16px;
  box-shadow: none !important;
}
/* Was color:#444 — dark grey icons on a dark panel */
#sidebar .sidebar_logo .fa-div { color: #9fb0c4 !important; }
#sidebar .profilepic {
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.14);
}
#sidebar .double-val-label { color: #8e9bad; font-size: .78rem; }
#sidebar .double-val-label .info { color: #6f7d90; }

/* ---------------------------------------------------------------------------
   SPECIFICITY NOTE — read before editing anything below.
   style.css scopes these as `#sidebar ul .sidebar_title`, `#sidebar ul a`,
   `#sidebar #first_level:hover` and so on. A rule written as
   `#sidebar .sidebar_title` LOSES to that and silently does nothing, which is
   what happened on the first pass: the headings stayed #222222 on a dark
   panel. Every selector here deliberately matches or exceeds the original's
   specificity, or uses !important where the original does.
   --------------------------------------------------------------------------- */

/* Section headings between menu groups — was #222222 (near-black) */
#sidebar ul .sidebar_title,
#sidebar .sidebar_title {
  color: #6b7a8d;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  padding: 18px 18px 6px;
}

#sidebar ul.sidebar_menu { padding: 0 8px 24px; }
#sidebar ul.sidebar_menu li { list-style: none; }

/* Link and label colour — was #999999, too low-contrast on the dark panel */
#sidebar ul a,
#sidebar a {
  color: #c3ccd8;
  text-decoration: none;
  border-radius: var(--rw-r-md);
  transition: background-color .15s ease, color .15s ease;
}
#sidebar ul .text { color: #c3ccd8; font-size: .875rem; }

/* Selected item — was .active { background:#F3F1FA }, a light lavender */
#sidebar ul .active { background: rgba(255,255,255,.07) !important; }

/* Top-level hover. Covers BOTH shapes in the markup: plain links
   (<a><div id="first_level">) and collapsible headers
   (<div id="first_level" onclick>), which sit outside any <a>. The first pass
   only handled the former, so submenu headers kept the light hover. */
#sidebar #first_level:hover,
#sidebar ul #first_level:hover {
  background: rgba(255,255,255,.07) !important;
  cursor: pointer;
}

/* ⚠️ The original paints a magenta→red gradient onto the label using
   background-clip:text + -webkit-text-fill-color:transparent. On a dark panel
   that renders the text INVISIBLE rather than colourful. Same trap as the
   submenu fix; this is the top-level twin of it. */
#sidebar #first_level:hover .text,
#sidebar #first_level .text_active {
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
  background: none !important;
  color: #ffffff !important;
}

/* Hover icon was #ff0000, the arrow #bb33aa */
#sidebar #first_level:hover .fa-div,
#sidebar #first_level .fa-div_active { color: var(--rw-accent) !important; }
#sidebar #first_level:hover .show,
#sidebar #first_level .show_active { color: #ffffff !important; }
#sidebar ul #first_level .show { color: #6b7a8d; }

/* Collapsed ("small") sidebar — logo strip was #F5F5F5 with #666 text */
.small_sidebar .small_sidebar_logo {
  background: #111a26 !important;
  box-shadow: none !important;
}
.small_sidebar .small_sidebar_logo a { color: #e2e8f0 !important; }
#sidebar ul.sidebar_menu a > #first_level {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  border-radius: var(--rw-r-md);
  transition: background-color .15s ease, color .15s ease;
}
#sidebar ul.sidebar_menu a:hover > #first_level {
  background: rgba(255,255,255,.07);
  color: #ffffff;
}
#sidebar ul.sidebar_menu a .fa-div { width: 18px; text-align: center; opacity: .85; }
#sidebar ul.sidebar_menu a .text { font-size: .875rem; }

/* Active item — the brand accent, used once, where it carries meaning */
#sidebar a.active > #first_level,
#sidebar li.active > a > #first_level {
  background: var(--rw-accent);
  color: #fff;
  font-weight: 600;
}
#sidebar a.active .fa-div,
#sidebar li.active > a .fa-div { opacity: 1; }

/* Expanding submenus.
   The original .children panel is `background:#FFFFFF` with an inset shadow —
   fine against the old white sidebar, but it flashed up as a white overlay
   once the sidebar went dark. Repainted to match, shadow dropped. */
.children,
#sidebar .children {
  background: #111a26 !important;
  box-shadow: none !important;
  border-radius: 0 var(--rw-r-md) var(--rw-r-md) 0;
  padding: 4px 0;
  overflow: hidden;
}
#sidebar .children a { color: #97a3b3; font-size: .84rem; text-decoration: none; }
#sidebar .children a:hover { color: #fff; }

#second_level {
  padding: 9px 16px 9px 22px;
  border-radius: var(--rw-r-sm);
  margin: 0 6px;
  transition: background-color .15s ease, color .15s ease;
}
#second_level:hover {
  background: rgba(255,255,255,.08) !important;
  color: #fff;
}

/* The original hover used background-clip:text with
   -webkit-text-fill-color:transparent to paint a magenta→red gradient onto the
   label. On a dark panel that renders the text invisible, so it is reverted to
   a plain fill. */
#second_level:hover a,
#second_level:hover .text {
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
  background: none !important;
  color: #fff !important;
}

/* The header icon row (home / settings / logout) */
#sidebar .sidebar_logo .fa-div { display: flex; justify-content: center; gap: 14px; margin-top: 10px; }
#sidebar .sidebar_logo .fa-div a { color: #9fb0c4; }
#sidebar .sidebar_logo .fa-div a:hover { color: var(--rw-accent); }

/* Top bar */
.navBar {
  background: var(--rw-surface);
  border-bottom: 1px solid var(--rw-line);
  box-shadow: none;
}

/* ===========================================================================
   4. Cards / panels
   =========================================================================== */

.boxShaow {
  background: var(--rw-surface);
  border: 1px solid var(--rw-line);
  border-radius: var(--rw-r-lg);        /* was 2px */
  box-shadow: var(--rw-shadow-md);
  transition: box-shadow .18s ease, transform .18s ease;  /* was all .5s */
}

.widget {
  background: var(--rw-surface);
  border: 1px solid var(--rw-line);
  border-radius: var(--rw-r-lg);
  padding: 24px 26px;
  margin: 14px;
  box-shadow: var(--rw-shadow-md);
}

/* Page headings and banners */
#PageTitleBanner h1 {
  font-size: 1.4rem;
  font-weight: 650;
  color: var(--rw-ink);
  margin: 0 0 4px;
}

#pageHeading h2 {
  font-size: 1.25rem;
  font-weight: 650;
}
#pageHeading .right {
  color: var(--rw-text-muted);
  font-size: .875rem;
}

/* Breadcrumb — quieter, so it stops competing with the page title */
#breadcrumb {
  background: transparent;
  border-bottom: 1px solid var(--rw-line);
}
#breadcrumb .breadcrumb,
#breadcrumb a {
  font-size: .8125rem;
  color: var(--rw-text-subtle);
  text-decoration: none;
}
#breadcrumb a:hover { color: var(--rw-accent); }

/* ===========================================================================
   4b. Dashboard — grid and summary tiles
   ---------------------------------------------------------------------------
   This is the screen people actually land on, and the first version of this
   stylesheet did not touch it at all: the KPI tiles kept their original
   #3576ff blue, #aa0055 magenta and #662323 brown, which is most of why the
   dashboard still looked dated.

   The tiles are re-coloured rather than turned into white cards, because their
   contents (headings, numbers, icons) are all light-on-dark. Converting them to
   light surfaces would need every foreground colour audited across six tile
   variants, which is a bigger and riskier change than it looks.
   =========================================================================== */

/* ⚠️ DO NOT convert .exe_row to CSS grid.
   It was tried and reverted on 11 Aug 2026 because it broke the layout on
   every page: these rows contain float-clearing <div class="clear"> elements,
   and as grid children those become grid ITEMS. They consumed cells and forced
   extra rows, pushing content far down the page.
   Fixing it properly means removing the .clear divs from the markup across ~95
   pages, which is a markup change, not a stylesheet one. The float layout is
   left exactly as the app authored it. */

/* Tiles */
.summaryTiles, .summaryTiles8, .summaryTiles9, .summaryTiles10 {
  margin: 0;
  padding: 22px 24px;
  border-radius: var(--rw-r-lg);
  box-shadow: var(--rw-shadow-md);
  position: relative;
  overflow: hidden;
}
.summaryTiles8, .summaryTiles10 {
  background: var(--rw-surface);
  border: 1px solid var(--rw-line);
}

/* A harmonised set replacing blue / magenta / brown. Still three visually
   distinct tiles, but from one family rather than three unrelated hues. */
.solidBGcolor1, .solidBGcolor6 { background: #4f46e5 !important; }  /* indigo */
.solidBGcolor2, .solidBGcolor7 { background: #0d9488 !important; }  /* teal   */
.solidBGcolor3, .solidBGcolor8 { background: #ea580c !important; }  /* brand  */
.solidBGcolor4, .solidBGcolor9 { background: #7c3aed !important; }  /* violet */
.solidBGcolor5, .solidBGcolor10{ background: #0369a1 !important; }  /* blue   */

.summaryTiles9 { background: #4f46e5; }

/* KPI tile internals. The real markup is:
     <h2><b>766</b> Runners</h2>
     <p>Active Till Now In Server</p>
     <a class="button_1">View All</a>
   So the number is the <b>, and it should be the hero. */
.summaryTiles9 h2 {
  clear: none;
  display: block;
  color: #fff;
  font-size: .9375rem;
  font-weight: 500;
  letter-spacing: .01em;
  margin: 0;
  opacity: .95;
}
.summaryTiles9 h2 b {
  display: block;
  font-size: 2.6rem;
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  margin-bottom: 2px;
}
.summaryTiles9 p {
  color: rgba(255,255,255,.78);
  font-size: .8125rem;
  margin: 6px 0 0;
}
.summaryTiles9 .button_1 {
  margin-top: 16px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.26);
  backdrop-filter: blur(2px);
}
.summaryTiles9 .button_1:hover { background: rgba(255,255,255,.26); }

/* The decorative watermark glyph is .fontawesome_N::before — NOT .icon.
   .icon is real content inside summaryTiles10 (see below).
   Scoped to .summaryTiles9 deliberately: an unscoped [class*="fontawesome_"]
   would position:absolute against whatever positioned ancestor happened to be
   nearest, dropping a 6.5rem glyph in unpredictable places. */
.summaryTiles9[class*="fontawesome_"]::before {
  position: absolute;
  right: -6px;
  bottom: -18px;
  font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free";
  font-size: 6.5rem;
  line-height: 1;
  color: #fff;
  opacity: .13;
  pointer-events: none;
}

/* summaryTiles10 — a grid of small stat blocks. Each .icon is a real unit:
   coloured glyph chip, count, label. */
.summaryTiles10 .bottom {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 4px;
}
/* Same trap as .exe_row: float-clearing divs become grid ITEMS and eat cells.
   This container is small and fully inspected, so neutralise them here rather
   than abandoning the grid. */
.summaryTiles10 .bottom > .clear { display: none; }
.summaryTiles10 .icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 8px;
  border-radius: var(--rw-r-md);
  text-align: center;
  transition: background-color .15s ease;
}
.summaryTiles10 .icon:hover { background: var(--rw-canvas-alt); }
.summaryTiles10 .icon .fa-div {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--rw-r-md);
  color: #fff;
  font-size: 1rem;
  box-shadow: none !important;
}
.summaryTiles10 .icon b {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--rw-ink);
  font-variant-numeric: tabular-nums;
}
.summaryTiles10 .icon i {
  font-style: normal;
  font-size: .72rem;
  color: var(--rw-text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ---- Mockup banner (mockup-notice.php) ----------------------------------
   These pages sit in the live admin portal and look native, so the marker has
   to be impossible to miss or someone will reasonably assume their input was
   saved. Deliberately loud. */
.mockup-banner {
  display: flex; align-items: flex-start; gap: 12px;
  margin: 0 14px 16px; padding: 13px 16px;
  background: repeating-linear-gradient(
    135deg, #fff8e6, #fff8e6 12px, #fdf3d6 12px, #fdf3d6 24px);
  border: 1px solid #e8cf94;
  border-left: 4px solid #b7791f;
  border-radius: var(--rw-r-md);
}
.mockup-badge {
  flex: 0 0 auto;
  background: #b7791f; color: #fff;
  font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--rw-r-pill);
}
.mockup-text { font-size: .8125rem; line-height: 1.55; color: #7a5410; }
.mockup-text b { color: #5c3f0c; }
.mockup-text code {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: .75rem; background: rgba(0,0,0,.05);
  padding: 1px 5px; border-radius: 3px;
}

/* ---- Business dashboard (business-dashboard.php) ------------------------ */
.bd-chart {
  display: flex; align-items: flex-end; gap: 6px;
  height: 180px; padding: 8px 0 0; margin-bottom: 14px;
}
.bd-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; }
.bd-bars {
  flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 3px;
  border-bottom: 1px solid var(--rw-line);
}
.bd-bar { width: 44%; max-width: 16px; border-radius: 3px 3px 0 0; transition: height .3s ease; min-height: 0; }
.bd-bar-signups { background: #4f46e5; }
.bd-bar-runs    { background: #0d9488; }
.bd-col em { font-style: normal; font-size: .68rem; color: var(--rw-text-subtle); padding-top: 6px; }
.bd-col:hover .bd-bar { filter: brightness(1.15); }

.bd-legend { display: flex; gap: 18px; align-items: center; font-size: .78rem; color: var(--rw-text-muted); }
.bd-key { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.bd-key-signups { background: #4f46e5; }
.bd-key-runs    { background: #0d9488; }
.bd-legend-note { margin-left: auto; color: var(--rw-text-subtle); }

.bd-funnel-row { margin-bottom: 14px; }
.bd-funnel-label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: .8125rem; color: var(--rw-text-muted); margin-bottom: 5px;
}
.bd-funnel-label b { color: var(--rw-ink); font-size: 1rem; font-variant-numeric: tabular-nums; }
.bd-funnel-track { height: 8px; background: var(--rw-canvas); border-radius: var(--rw-r-pill); overflow: hidden; }
.bd-funnel-track span { display: block; height: 100%; border-radius: var(--rw-r-pill); transition: width .4s ease; }
.bd-funnel-pct { font-size: .72rem; color: var(--rw-text-subtle); text-align: right; margin-top: 3px; font-variant-numeric: tabular-nums; }

.bd-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.bd-stat {
  padding: 14px 12px; border: 1px solid var(--rw-line); border-radius: var(--rw-r-md);
  background: var(--rw-canvas-alt); text-align: center;
}
.bd-stat b { display: block; font-size: 1.35rem; font-weight: 700; color: var(--rw-ink); font-variant-numeric: tabular-nums; }
.bd-stat i { font-style: normal; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--rw-text-muted); }

.bd-health-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 11px 0; border-bottom: 1px solid var(--rw-line); font-size: .875rem;
}
.bd-health-row:last-child { border-bottom: 0; }
.bd-health-label { color: var(--rw-text-muted); }
.bd-health-val { font-weight: 650; color: var(--rw-ink); font-variant-numeric: tabular-nums; }
.bd-health-row.is-bad .bd-health-val { color: var(--rw-danger); }

.bd-note, .bd-alert {
  margin: 14px 0 0; font-size: .8125rem; line-height: 1.55;
  padding: 11px 13px; border-radius: var(--rw-r-md);
}
.bd-note  { background: var(--rw-canvas-alt); color: var(--rw-text-muted); border: 1px solid var(--rw-line); }
.bd-alert { background: var(--rw-warning-soft); color: #8a5a12; border: 1px solid #f2ddb4; }

@media (max-width: 760px) {
  .bd-chart { height: 130px; }
  .bd-col em { font-size: .6rem; }
}

.summaryTiles8 h2 { font-size: 1.15rem; font-weight: 650; color: var(--rw-ink); margin: 0 0 6px; }
.summaryTiles8 p  { color: var(--rw-text-muted); font-size: .9rem; }

.summaryTiles_footer {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.18);
  font-size: .8125rem;
  opacity: .9;
}
.summaryTiles8 .summaryTiles_footer,
.summaryTiles10 .summaryTiles_footer { border-top-color: var(--rw-line); }

/* List widgets — "Latest Notifications", "Latest Runners" */
.widget h2.heading {
  font-size: .8125rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--rw-text-muted);
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rw-line);
}
.widget .desc { color: var(--rw-text-muted); font-size: .85rem; }
.widget .data {
  display: block;
  padding: 9px 0;
  border-bottom: 1px solid var(--rw-line-soft, var(--rw-line));
  font-size: .875rem;
  color: var(--rw-text);
}
.widget .data:last-child { border-bottom: 0; }

.welcomeGreetings h2 { font-size: 1.35rem; font-weight: 650; color: var(--rw-ink); }
.welcomeGreetings .right h2 { font-size: .9rem; font-weight: 500; color: var(--rw-text-muted); }

.widgetDualList { background: var(--rw-surface); border-radius: var(--rw-r-lg); }
.widgetDualList .data { font-variant-numeric: tabular-nums; }

.button_1 {
  display: inline-block;
  padding: 8px 15px;
  border-radius: var(--rw-r-md);
  background: var(--rw-accent);
  color: #fff !important;
  font-size: .8125rem;
  font-weight: 600;
  text-decoration: none;
}
.button_1:hover { background: var(--rw-accent-hover); }

/* The dashboard flashes alerts with a flicker animation. Keep the colour, drop
   the flicker — it is distracting on a screen people sit on all day. */
.animate-flicker { animation: none !important; }

/* ===========================================================================
   5. Tables
   ---------------------------------------------------------------------------
   The original centres every cell, which is the wrong default for scanning
   admin data. Left-align text, right-align nothing automatically (the markup
   doesn't distinguish numeric columns), add a real header treatment, row
   hover, and tabular figures so digits line up in columns.
   =========================================================================== */

table.widgetTable {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-variant-numeric: tabular-nums;
  font-size: .875rem;
}

table.widgetTable th {
  text-align: left;
  padding: 11px 14px;
  background: var(--rw-canvas-alt);
  color: var(--rw-text-muted);
  font-size: .75rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 1px solid var(--rw-line-strong);
  white-space: nowrap;
  position: sticky;                 /* header stays put on long tables */
  top: 0;
  z-index: 2;
}

table.widgetTable td {
  text-align: left;
  padding: 12px 14px;
  color: var(--rw-text);
  border-bottom: 1px solid var(--rw-line);
  vertical-align: middle;
}

/* Replace the odd-row zebra with a subtler hover-led treatment */
table.widgetTable tr:nth-child(odd)  { background: transparent; }
table.widgetTable tbody tr:hover td,
table.widgetTable tr:hover td        { background: var(--rw-canvas-alt); }

table.widgetTable td a {
  color: var(--rw-accent);
  font-size: inherit;               /* was a hardcoded 15px */
  margin-left: 0;
  text-decoration: none;
  font-weight: 500;
}
table.widgetTable td a:hover { text-decoration: underline; }

/* Status dots */
table.widgetTable span.circle {
  width: 9px;
  height: 9px;
  padding: 0;
  border-radius: var(--rw-r-pill);
  box-shadow: 0 0 0 3px rgba(16, 24, 40, .05);
}

/* Long tables shouldn't force the page to scroll sideways */
.widget { overflow-x: auto; }

/* ===========================================================================
   5b. List pages — the div-based data table
   ---------------------------------------------------------------------------
   The list screens (viewrunners, viewclubs, viewruns, …) do NOT use
   <table class="widgetTable">. They use an AJAX-loaded div table:
     .divTable > .divTableHead/.divTableBody > .tableRowHead/.tableRow > .tableCell
   which is why the table styling above never affected them at all.
   =========================================================================== */

.divTable {
  display: block;
  width: 100%;
  margin: 0;
  border: 1px solid var(--rw-line);
  border-radius: var(--rw-r-lg);
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}

.divTable .tableRowHead .tableCell {
  background: var(--rw-canvas-alt);
  color: var(--rw-text-muted);
  font-size: .75rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 1px solid var(--rw-line-strong);
  border-right: 0;
  padding: 12px 14px;
}

/* The second header row is the per-column filter strip */
.divTable .tableRowHead:nth-child(2) .tableCell {
  background: var(--rw-surface);
  border-bottom: 1px solid var(--rw-line);
  padding: 8px 10px;
  text-transform: none;
  letter-spacing: 0;
}
.divTable .tableRowHead select,
.divTable .tableRowHead input[type="text"],
.divTable .tableRowHead input[type="date"],
.divTable .tableRowHead input[type="number"] {
  padding: 6px 9px;
  font-size: .8125rem;
  border-radius: var(--rw-r-sm);
  border: 1px solid var(--rw-line-strong);
}

.divTable .tableRow,
.divTable .tableRowHead { border-top: 0; border-bottom: 0; }

.divTable .tableRow .tableCell {
  padding: 12px 14px;
  color: var(--rw-text);
  border-bottom: 1px solid var(--rw-line);
  font-size: .875rem;
  vertical-align: middle;
}

/* Hover-led rather than zebra — easier to track a row across wide tables */
.divTable .tableRow:nth-child(odd) { background: transparent; }
.divTable .tableRow:hover .tableCell,
.divTable .tableRow:nth-child(odd):hover { background: var(--rw-canvas-alt); }
.divTable .tableRow:hover .tableCell a { color: var(--rw-accent-hover); }

.divTable .link { color: var(--rw-accent); font-weight: 500 !important; }
.divTable a span.fa-solid { color: var(--rw-accent); font-size: .95rem; }

/* Row action buttons were 10px, full-width and squeezed */
.divTable a.simpleButton {
  padding: 6px 12px !important;
  width: auto !important;
  font-size: .75rem !important;
  border-radius: var(--rw-r-sm) !important;
  box-shadow: none !important;
  white-space: nowrap;
}
.divTable a.simpleButton:hover { transform: none; }

.divTable .tableRow .tableCell img { border-radius: var(--rw-r-sm); width: 56px; }
.divTable span.circle { width: 9px; height: 9px; padding: 0; }

/* Pagination — the original used a 4px double bottom border */
.showPaginationData { margin: 0 0 16px; text-align: left; }
.showPaginationData p {
  float: none;
  display: inline-block;
  border-bottom: 0;
  margin: 0 6px 0 0;
  padding: 5px 11px;
  border-radius: var(--rw-r-sm);
  font-size: .8125rem;
  color: var(--rw-text-muted);
  background: var(--rw-canvas-alt);
  border: 1px solid var(--rw-line);
  cursor: pointer;
}
.showPaginationData p:hover { border-color: var(--rw-accent); color: var(--rw-accent-hover); }
.showTableDataFooter { margin-top: 14px; font-size: .8125rem; color: var(--rw-text-muted); }

.reloadingDIV { background: rgba(255,255,255,.72); backdrop-filter: blur(1px); }

/* Modal */
#popupDIVcontentInner {
  border: 1px solid var(--rw-line) !important;
  border-radius: var(--rw-r-lg);
  box-shadow: var(--rw-shadow-lg) !important;
  overflow: hidden;
}
.popupClose { cursor: pointer; }

/* ===========================================================================
   5c. Page title banner
   ---------------------------------------------------------------------------
   Was a 100px dark block (#1E283D + a repeating background image) with a 40px
   UPPERCASE white heading, on every single page. It dominated each screen and
   is the loudest remaining dated element outside the dashboard.
   =========================================================================== */
#PageTitleBanner {
  background: transparent !important;
  height: auto !important;
  border-radius: 0;
  border-bottom: 1px solid var(--rw-line);
  margin-bottom: 18px;
}
#PageTitleBanner h1 {
  text-transform: none;
  display: block;
  padding: 2px 0 14px;
  font-size: 1.5rem;
  font-weight: 650;
  letter-spacing: -.015em;
  color: var(--rw-ink);
}

/* ===========================================================================
   5d. Form pages
   ---------------------------------------------------------------------------
   ~95 add/edit screens share one pattern: .exe_row / .exe_colN grid with
   <p class="form_field"><label>…</label><input …></p>. The original styling was
   `display:block; margin:10px` and nothing else.
   =========================================================================== */
.form_field { display: block; margin: 0 0 16px; }
.form_field > label {
  display: block;
  margin-bottom: 6px;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--rw-text);
  letter-spacing: .005em;
}
.form_field_error {
  display: block;
  margin-top: 5px;
  color: var(--rw-danger);
  font-style: normal;
  font-weight: 500;
  font-size: .8125rem;
  letter-spacing: 0;
}
/* Give the grid breathing room inside form cards */
.widget .exe_row { gap: 0 18px; margin-bottom: 0; }

#footer {
  color: var(--rw-text-subtle);
  font-size: .8125rem;
  border-top: 1px solid var(--rw-line);
  margin-top: 10px;
}
#footer a { color: var(--rw-accent); text-decoration: none; }

/* ===========================================================================
   6. Buttons
   ---------------------------------------------------------------------------
   Drops the uppercase + letter-spacing + triple box-shadow Material look and
   the grey default with a 1px border.
   =========================================================================== */

.simpleButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  box-sizing: border-box;
  padding: 9px 16px;
  margin: 0 0 0 8px;
  border: 1px solid transparent;
  border-radius: var(--rw-r-md);
  background: var(--rw-surface);
  color: var(--rw-text);
  border-color: var(--rw-line-strong);
  font-family: var(--rw-font);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: 0;                /* was .0892857143em */
  text-transform: none;             /* was uppercase */
  text-decoration: none;
  box-shadow: var(--rw-shadow-sm);  /* was a 3-layer Material stack */
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease,
              transform .12s ease, box-shadow .15s ease;
}

.simpleButton:hover {
  transform: translateY(-1px);
  box-shadow: var(--rw-shadow-md);
}
.simpleButton:active { transform: translateY(0); }

.simpleButton-success { background: var(--rw-success); border-color: var(--rw-success); }
.simpleButton-info    { background: var(--rw-info);    border-color: var(--rw-info); }
.simpleButton-warning { background: var(--rw-warning); border-color: var(--rw-warning); }
.simpleButton-danger  { background: var(--rw-danger);  border-color: var(--rw-danger); }

.simpleButton-success:hover { background: #0f8259; border-color: #0f8259; }
.simpleButton-info:hover    { background: #1d4ed8; border-color: #1d4ed8; }
.simpleButton-warning:hover { background: #a06817; border-color: #a06817; }
.simpleButton-danger:hover  { background: #b42318; border-color: #b42318; }

/* The original file sets `#wrapper table.widgetTable td a {color:#FFFFFF}` on
   some pages to make button text white. Keep coloured buttons readable. */
.simpleButton-success,
.simpleButton-info,
.simpleButton-warning,
.simpleButton-danger { color: #fff !important; }

/* ===========================================================================
   7. Forms
   =========================================================================== */

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="search"],
input[type="tel"],
input[type="url"],
form input[type="text"],
form input[type="password"],
form input[type="email"],
form textarea,
form select,
textarea,
select {
  box-sizing: border-box;           /* fixes the calc(100% - 30px) workaround */
  width: 100%;
  padding: 10px 13px;
  font-family: var(--rw-font);
  font-size: .875rem;
  color: var(--rw-text);
  background: var(--rw-surface);
  border: 1px solid var(--rw-line-strong);
  border-radius: var(--rw-r-md);
  transition: border-color .15s ease, box-shadow .15s ease;
}

input[type="text"]:hover,
form select:hover,
form textarea:hover { border-color: #b9c0cd; }

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
form input[type="text"]:focus,
form input[type="password"]:focus,
form input[type="email"]:focus,
form textarea:focus,
form select:focus,
textarea:focus,
select:focus {
  border-color: var(--rw-accent);
  box-shadow: 0 0 0 3px var(--rw-accent-ring);
  outline: none;
}

input:disabled, textarea:disabled, select:disabled {
  background: var(--rw-canvas);
  border-color: var(--rw-line);
  color: var(--rw-text-subtle);
  cursor: not-allowed;
}

label { color: var(--rw-text); font-weight: 500; }

/* ===========================================================================
   8. Alerts
   =========================================================================== */

.alert {
  box-sizing: border-box;
  padding: 12px 16px;
  border: 1px solid transparent;
  border-radius: var(--rw-r-md);
  font-size: .875rem;
  box-shadow: none;
}
.alert-success { background: var(--rw-success-soft); border-color: #bfe6d5; color: #0b6b4a; }
.alert-info    { background: var(--rw-info-soft);    border-color: #c7d9fc; color: #1c4ed8; }
.alert-warning { background: var(--rw-warning-soft); border-color: #f2ddb4; color: #8a5a12; }
.alert-danger  { background: var(--rw-danger-soft);  border-color: #f8cfcc; color: #a92016; }

/* ===========================================================================
   9. Notifications dropdown
   =========================================================================== */

.notificationDIV {
  border: 1px solid var(--rw-line);
  border-radius: var(--rw-r-lg);
  box-shadow: var(--rw-shadow-lg);
  overflow: hidden;
}
.notiTitle    { font-weight: 600; font-size: .875rem; }
.notiSubTitle { color: var(--rw-text-muted); font-size: .8125rem; }

/* ===========================================================================
   10. Accessibility & output
   =========================================================================== */

/* Respect a user's reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .simpleButton:hover { transform: none; }
}

/* Admin portals get printed. Drop the chrome and ink-heavy backgrounds. */
@media print {
  #sidebar, .navBar, #breadcrumb, .simpleButton, .notificationDIV { display: none !important; }
  #wrapper { width: 100% !important; }
  .widget, .boxShaow {
    box-shadow: none !important;
    border: 1px solid #ccc !important;
    break-inside: avoid;
  }
  body { background: #fff; font-size: 11pt; }
}

/* Narrow screens: let the shell reflow rather than clip. The layout is
   float-based, so this is intentionally minimal — a genuine responsive pass
   needs markup changes, which are deliberately out of scope here. */
@media (max-width: 900px) {
  .widget { padding: 18px 16px; margin: 10px; }
  table.widgetTable { font-size: .8125rem; }
  table.widgetTable th, table.widgetTable td { padding: 10px; }
}

/* ===========================================================================
   11. Interaction layer (js/runwith-interactions.js)
   ---------------------------------------------------------------------------
   Everything here animates opacity or transform ONLY. This app's layout is
   float-based with hand-computed widths and no box-sizing — two separate
   layout breakages on this codebase were caused by adding box where there was
   none spare. Composited properties cannot do that.
   =========================================================================== */

.rw-reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .45s cubic-bezier(.22,.61,.36,1),
              transform .45s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.rw-reveal.rw-in { opacity: 1; transform: none; }

/* Card lift. transform only — never margin or box-shadow spread that reflows. */
.widget, .summaryTiles8, .summaryTiles9, .summaryTiles10 {
  transition: transform .22s cubic-bezier(.22,.61,.36,1),
              box-shadow .22s ease, opacity .45s ease;
}
.widget:hover, .summaryTiles8:hover, .summaryTiles10:hover {
  transform: translateY(-2px);
  box-shadow: var(--rw-shadow-lg);
}
.summaryTiles9:hover { transform: translateY(-3px) scale(1.006); box-shadow: var(--rw-shadow-lg); }

/* KPI numbers get a subtle tabular lock so counting up doesn't jitter width */
.summaryTiles9 h2 b, .bd-stat b, .bd-funnel-label b, .bd-health-val {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Chart bars grow in */
.bd-bar { transition: height .55s cubic-bezier(.22,.61,.36,1), filter .15s ease; }
.bd-funnel-track > span { transition: width .7s cubic-bezier(.22,.61,.36,1); }

.bd-col { cursor: default; transition: transform .15s ease; }
.bd-col:hover { transform: translateY(-2px); }
.bd-col:hover .bd-bar { filter: brightness(1.18) saturate(1.1); }

/* Instant tooltip, replacing the browser's delayed native one */
.rw-tip {
  position: fixed; top: 0; left: 0; z-index: 99999;
  pointer-events: none; opacity: 0;
  padding: 7px 11px; border-radius: var(--rw-r-sm);
  background: var(--rw-ink); color: #fff;
  font-size: .75rem; font-weight: 500; white-space: nowrap;
  box-shadow: var(--rw-shadow-lg);
  transition: opacity .12s ease;
}
.rw-tip.is-on { opacity: 1; }

/* Row hover on the div-tables gets a touch more feedback */
.divTable .tableRow { transition: background-color .12s ease; }
.divTable .tableRow:hover .tableCell { box-shadow: inset 3px 0 0 var(--rw-accent); }

/* Buttons get a press response */
.simpleButton:active { transform: translateY(1px) scale(.985); }

/* Theme toggle in the top bar */
.rw-theme-btn { cursor: pointer; }
.rw-theme-btn:hover { color: var(--rw-accent); }

/* ---------------------------------------------------------------------------
   Dark mode. Opt-in via the toggle — <html data-rw-theme="dark">.
   Deliberately NOT tied to prefers-color-scheme: this portal has inline
   styles and hardcoded colours across 95 pages, so it must be a decision the
   operator makes, not something that flips on them because of an OS setting.
   Only the tokens are redefined; every component reads through them.
   --------------------------------------------------------------------------- */
html[data-rw-theme="dark"] {
  --rw-ink:          #f1f5f9;
  --rw-text:         #d7dee8;
  --rw-text-muted:   #98a4b4;
  --rw-text-subtle:  #7c8898;
  --rw-line:         #26303d;
  --rw-line-strong:  #35414f;
  --rw-surface:      #171e28;
  --rw-canvas:       #0f151d;
  --rw-canvas-alt:   #1b232e;
  --rw-accent-soft:  #2a1a12;
  --rw-shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --rw-shadow-md: 0 1px 3px rgba(0,0,0,.45), 0 6px 16px -4px rgba(0,0,0,.5);
  --rw-shadow-lg: 0 2px 6px rgba(0,0,0,.5), 0 16px 32px -8px rgba(0,0,0,.6);
}
html[data-rw-theme="dark"] body { background: var(--rw-canvas); color: var(--rw-text); }
html[data-rw-theme="dark"] #wrapper { background: var(--rw-canvas); }
html[data-rw-theme="dark"] .navBar,
html[data-rw-theme="dark"] #navBar { background: var(--rw-surface); border-bottom-color: var(--rw-line); }
html[data-rw-theme="dark"] .widget,
html[data-rw-theme="dark"] .boxShaow,
html[data-rw-theme="dark"] .summaryTiles8,
html[data-rw-theme="dark"] .summaryTiles10 { background: var(--rw-surface); border-color: var(--rw-line); }
html[data-rw-theme="dark"] .divTable { border-color: var(--rw-line); }
html[data-rw-theme="dark"] .divTable .tableRowHead .tableCell { background: var(--rw-canvas-alt); color: var(--rw-text-muted); }
html[data-rw-theme="dark"] .divTable .tableRow .tableCell { color: var(--rw-text); border-bottom-color: var(--rw-line); }
html[data-rw-theme="dark"] .divTable .tableRow:hover .tableCell { background: var(--rw-canvas-alt); }
html[data-rw-theme="dark"] input[type="text"],
html[data-rw-theme="dark"] input[type="number"],
html[data-rw-theme="dark"] input[type="date"],
html[data-rw-theme="dark"] textarea,
html[data-rw-theme="dark"] select {
  background: var(--rw-canvas-alt); color: var(--rw-text); border-color: var(--rw-line-strong);
}
html[data-rw-theme="dark"] .bd-stat { background: var(--rw-canvas-alt); border-color: var(--rw-line); }
html[data-rw-theme="dark"] .bd-note { background: var(--rw-canvas-alt); border-color: var(--rw-line); color: var(--rw-text-muted); }
html[data-rw-theme="dark"] #PageTitleBanner { border-bottom-color: var(--rw-line); }
html[data-rw-theme="dark"] #breadcrumb { border-bottom-color: var(--rw-line); }
html[data-rw-theme="dark"] #footer { border-top-color: var(--rw-line); }

@media (prefers-reduced-motion: reduce) {
  .rw-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .widget:hover, .summaryTiles8:hover, .summaryTiles9:hover, .summaryTiles10:hover,
  .bd-col:hover, .simpleButton:active { transform: none !important; }
  .bd-bar, .bd-funnel-track > span { transition: none !important; }
}

/* ===========================================================================
   12. Mobile screen previews (viewmobilescreens.php)
   ---------------------------------------------------------------------------
   Phone-framed previews of the runner-facing app. Every rule is scoped under
   .rw-phones or .rw-phone so nothing here can affect the portal itself.
   =========================================================================== */
.rw-phones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 26px;
  margin: 0 14px 20px;
}
.rw-phone { margin: 0; }
.rw-phone-frame {
  width: 100%; max-width: 320px; margin: 0 auto;
  background: #0b0f14; border-radius: 38px; padding: 10px;
  box-shadow: 0 2px 6px rgba(16,24,40,.14), 0 20px 44px -12px rgba(16,24,40,.34);
  position: relative;
}
.rw-notch {
  position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
  width: 96px; height: 20px; background: #0b0f14; border-radius: 12px; z-index: 3;
}
.rw-screen {
  background: #f4f6fa; border-radius: 30px; overflow: hidden;
  height: 560px; display: flex; flex-direction: column;
  font-size: 13px; color: #1f2937;
}
.rw-status {
  display: flex; justify-content: space-between; align-items: flex-end;
  padding: 12px 20px 4px; font-size: 10.5px; font-weight: 600; color: #0f172a;
}
.rw-appbar {
  padding: 8px 18px 12px; font-weight: 650; font-size: 15px; color: #0f172a;
  background: #fff; border-bottom: 1px solid #e6e9ef;
}
.rw-body { padding: 14px; overflow-y: auto; flex: 1; }
.rw-body::-webkit-scrollbar { width: 0; }

.rw-hero {
  background: linear-gradient(135deg, #ea580c, #ff7a45);
  color: #fff; border-radius: 16px; padding: 16px; margin-bottom: 12px;
}
.rw-hero-eyebrow { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; opacity: .85; }
.rw-hero-title { font-size: 19px; font-weight: 700; line-height: 1.25; margin: 5px 0 7px; }
.rw-hero-sub { font-size: 12px; opacity: .92; }

.rw-avatars { display: flex; margin: 0 0 14px; align-items: center; }
.rw-avatars span {
  width: 30px; height: 30px; border-radius: 50%; margin-right: -7px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 10.5px; font-weight: 700; border: 2px solid #f4f6fa;
}
.rw-avatars .rw-more { background: #cbd3de; color: #46536a; margin-left: 14px; }

.rw-btn {
  display: block; width: 100%; box-sizing: border-box; border: 0; cursor: default;
  padding: 13px; border-radius: 12px; font-size: 14px; font-weight: 650;
  margin-bottom: 9px; font-family: inherit;
}
.rw-btn-primary { background: #ea580c; color: #fff; }
.rw-btn-ghost { background: #fff; color: #46536a; border: 1px solid #d3d8e2; }
.rw-hint { font-size: 11px; color: #7b8595; text-align: center; margin-top: 4px; line-height: 1.5; }

.rw-card { border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; }
.rw-card b { display: block; font-size: 13.5px; margin-bottom: 3px; }
.rw-card span { font-size: 12px; }
.rw-card-warn { background: #fdf3e2; border: 1px solid #f2ddb4; color: #8a5a12; }

.rw-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 11px; }
.rw-chips span {
  padding: 7px 12px; border-radius: 999px; font-size: 11.5px;
  background: #fff; border: 1px solid #d3d8e2; color: #46536a;
}
.rw-chips span.on { background: #fff1eb; border-color: #ea580c; color: #c2410c; font-weight: 650; }

.rw-input {
  background: #fff; border: 1px solid #d3d8e2; border-radius: 10px;
  padding: 11px 13px; font-size: 12px; color: #98a4b4; margin-bottom: 12px;
}

.rw-coach { display: flex; gap: 9px; margin-bottom: 13px; }
.rw-coach-av {
  flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%;
  background: #ea580c; color: #fff; display: flex; align-items: center;
  justify-content: center; font-weight: 700; font-size: 12px;
}
.rw-coach-av.big { flex: 0 0 40px; width: 40px; height: 40px; font-size: 14px; }
.rw-coach-msg {
  background: #fff; border: 1px solid #e6e9ef; border-radius: 4px 13px 13px 13px;
  padding: 11px 13px; font-size: 12.5px; line-height: 1.55;
}

.rw-adjusted {
  background: #e8effe; color: #1c4ed8; border-radius: 9px;
  padding: 8px 11px; font-size: 11.5px; font-weight: 600; margin-bottom: 11px;
}
.rw-day {
  display: flex; align-items: flex-start; gap: 10px;
  background: #fff; border: 1px solid #e6e9ef; border-radius: 11px;
  padding: 10px 12px; margin-bottom: 7px;
}
.rw-day-key { border-color: #ea580c; background: #fff8f4; }
.rw-day .rw-d { flex: 0 0 30px; font-weight: 700; font-size: 11.5px; color: #5b6675; padding-top: 1px; }
.rw-day .rw-s { flex: 1; font-size: 12.5px; font-weight: 600; }
.rw-day .rw-s em { display: block; font-style: normal; font-weight: 400; font-size: 11px; color: #7b8595; margin-top: 2px; }
.rw-day .rw-k { flex: 0 0 34px; text-align: right; font-size: 12px; font-weight: 700; color: #0f172a; font-variant-numeric: tabular-nums; }

.rw-tabs { display: flex; gap: 6px; margin-bottom: 11px; }
.rw-tabs span { padding: 6px 13px; border-radius: 999px; font-size: 11.5px; background: #fff; border: 1px solid #d3d8e2; color: #46536a; }
.rw-tabs span.on { background: #0f172a; color: #fff; border-color: #0f172a; font-weight: 650; }

.rw-sess {
  display: flex; align-items: center; gap: 10px; background: #fff;
  border: 1px solid #e6e9ef; border-radius: 12px; padding: 11px 12px; margin-bottom: 8px;
}
.rw-sess-full { opacity: .72; }
.rw-sess-l { flex: 1; min-width: 0; }
.rw-sess-l b { display: block; font-size: 12.5px; }
.rw-sess-l span { font-size: 11px; color: #7b8595; }
.rw-sess-r { text-align: right; flex: 0 0 auto; }
.rw-sess-r em { display: block; font-style: normal; font-size: 10.5px; font-weight: 700; margin-bottom: 4px; color: #5b6675; }
.rw-sess-r em.ok { color: #12996b; }
.rw-sess-r em.warn { color: #b7791f; }
.rw-sess-r em.bad { color: #d92d20; }
.rw-mini { border: 0; background: #ea580c; color: #fff; font-size: 11px; font-weight: 650; padding: 6px 12px; border-radius: 8px; font-family: inherit; }
.rw-mini.ghost { background: #fff; color: #46536a; border: 1px solid #d3d8e2; }

.rw-coachcard {
  display: flex; gap: 11px; align-items: flex-start; background: #fff;
  border: 1px solid #e6e9ef; border-radius: 13px; padding: 12px; margin-bottom: 8px;
}
.rw-coachcard.on { border-color: #ea580c; background: #fff8f4; }
.rw-coachcard b { display: block; font-size: 13px; }
.rw-coachcard span { display: block; font-size: 11px; color: #7b8595; margin-bottom: 4px; }
.rw-coachcard em { font-size: 11.5px; color: #46536a; }
.rw-voice {
  display: flex; align-items: center; gap: 9px; background: #eef1f6;
  border-radius: 10px; padding: 10px 12px; font-size: 12px; color: #46536a; margin: 11px 0;
}
.rw-play { width: 24px; height: 24px; border-radius: 50%; background: #ea580c; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 9px; }

.rw-clubhead { display: flex; gap: 8px; margin-bottom: 13px; }
.rw-clubstat { flex: 1; background: #fff; border: 1px solid #e6e9ef; border-radius: 11px; padding: 11px 6px; text-align: center; }
.rw-clubstat b { display: block; font-size: 17px; font-weight: 700; color: #0f172a; }
.rw-clubstat i { font-style: normal; font-size: 9.5px; text-transform: uppercase; letter-spacing: .04em; color: #7b8595; }

.rw-feed .rw-feeditem { display: flex; gap: 10px; background: #fff; border: 1px solid #e6e9ef; border-radius: 11px; padding: 11px 12px; margin-bottom: 7px; }
.rw-dot { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; }
.rw-feeditem b { display: block; font-size: 12.5px; }
.rw-feeditem span { font-size: 11px; color: #7b8595; }

.rw-phone figcaption {
  margin: 15px auto 0; max-width: 320px; font-size: .8125rem;
  line-height: 1.55; color: var(--rw-text-muted);
}
.rw-phone figcaption b { display: block; color: var(--rw-ink); margin-bottom: 3px; font-size: .875rem; }

/* The phone screens are a fixed light design on purpose — they preview a
   mobile app, not the portal, so they must not flip with the portal's theme. */
html[data-rw-theme="dark"] .rw-screen { background: #f4f6fa; color: #1f2937; }
html[data-rw-theme="dark"] .rw-appbar { background: #fff; }