/* =====================================================================
   DURA THEME — override layer for the Spruko Bootstrap 5.3.2 admin template
   =====================================================================
   HOW THIS WORKS
   The template is themed entirely through CSS custom properties defined in
   `wwwroot/assets/css/RootStyle.css` (light) and overridden under
   `[data-theme-mode=dark]` in `wwwroot/assets/css/styles.css` (dark).

   We DO NOT edit those files. We load THIS file LAST (after styles.css and
   RootStyle.css) so our variable values win the cascade. Rebranding is then
   almost entirely a matter of re-pointing `--primary-rgb` / `--secondary-rgb`
   and the semantic RGB triplets, plus swapping the font families.

   LOAD ORDER (in _Layout.cshtml, just before </head>):
     <link href="~/assets/libs/bootstrap/css/bootstrap.min.css" ... />
     <link href="~/assets/css/styles.css" ... />
     <link href="~/assets/css/icons.css" ... />
     <link href="~/assets/css/RootStyle.css" ... />
     <link href="~/assets/css/dura-theme.css" ... />   <-- ADD THIS LAST
   ===================================================================== */

/* Fonts — brand faces. Roboto (template default) is fully replaced. */
@import url('https://fonts.googleapis.com/css2?family=Saira+Condensed:wght@500;600;700;800;900&family=Saira+Semi+Condensed:wght@500;600;700&family=Inter:wght@400;450;500;600;700&display=swap');

/* ---------------------------------------------------------------------
   1. BRAND TOKEN MAP  (LIGHT — the :root default)
   Only the values that change from the stock template are listed; every
   other template variable inherits automatically.

   PRIMARY   = DURA Navy   #0B3A5A  -> structure, nav, primary buttons
   SECONDARY = DURA Orange #F7941E  -> the one sacred accent / key CTA
   --------------------------------------------------------------------- */
:root {
  /* --- the two brand slots --- */
  --primary-rgb: 11, 58, 90;      /* #0B3A5A navy  (was 98,89,202 purple) */
  --secondary-rgb: 247, 148, 30;  /* #F7941E orange (was 241,56,139 pink) */

  /* --- semantic status (tuned to DURA, close to stock) --- */
  --success-rgb: 30, 158, 100;    /* #1E9E64  In / good        */
  --warning-rgb: 204, 122, 6;     /* #CC7A06  Modified / warn   */
  --danger-rgb:  214, 70, 58;     /* #D6463A  Out / bad         */
  --info-rgb:    31, 143, 196;    /* #1F8FC4  Training / info   */
  --orange-rgb:  247, 148, 30;    /* keep .text-orange on-brand */

  /* --- app surfaces (cool navy-tinted neutrals) --- */
  --body-bg-rgb: 234, 238, 242;   /* #EAEEF2 page background    */
  --default-text-color: #0B1F2E;  /* near-navy ink              */
  --default-border: #DCE4EB;
  --bootstrap-card-border: #E4EAF0;
  --input-border: #DCE4EB;
  --form-control-bg: #FFFFFF;
  --text-muted: #5B6B78;
  --sidemenu-active-bgcolor: #E9EEF3; /* MUST stay opaque: also fills the .shape1/.shape2 curve on the active menu item */
  --list-hover-focus-bg: #F4F7FA;

  /* --- typography --- */
  --default-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --default-font-weight: 400;
  --dura-font-display: 'Saira Condensed', 'Arial Narrow', system-ui, sans-serif;
  --dura-font-semi: 'Saira Semi Condensed', system-ui, sans-serif;

  /* --- radii (template uses assorted; DURA scale) --- */
  --dura-r-sm: 10px;
  --dura-r-md: 16px;
  --dura-r-lg: 22px;
}

/* ---------------------------------------------------------------------
   2. DARK OVERRIDES
   The template already inverts surfaces under [data-theme-mode=dark];
   we only nudge the body ink-navy and re-point the accent softening so
   orange still reads on near-black. Brand hues stay identical (by design).
   --------------------------------------------------------------------- */
[data-theme-mode=dark] {
  --body-bg-rgb: 6, 9, 14;        /* #06090E OLED-friendly near-black */
  --default-text-color: #ECF2F8;
  --default-border: rgba(255,255,255,0.08);
  --bootstrap-card-border: rgba(255,255,255,0.07);
  --input-border: rgba(255,255,255,0.12);
  --form-control-bg: #0E151E;
  --text-muted: rgba(236,242,248,0.56);
  --sidemenu-active-bgcolor: #141E29; /* opaque (fills active-item curve shapes) */
  --list-hover-focus-bg: rgba(255,255,255,0.05);
  /* In dark, primary reads better one step lighter for large fills: */
  --primary-rgb: 27, 85, 119;     /* #1B5577 */
}

/* ---------------------------------------------------------------------
   3. TYPOGRAPHY — brand voice
   Body copy = Inter. Display/headings = Saira Condensed italic (athletic).
   Eyebrows / labels / table headers = Saira Semi Condensed, tracked caps.
   --------------------------------------------------------------------- */
body { font-family: var(--default-font-family); }

h1,h2,h3,h4,h5,.h1,.h2,.h3,.h4,.h5,
.card-title,.main-card-title,.page-title {
  font-family: var(--dura-font-display);
  font-style: italic;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .01em;
}
/* Eyebrows & table headers */
.text-eyebrow,
.table > thead th {
  font-family: var(--dura-font-semi);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------------
   4. BUTTONS
   Bootstrap's .btn-primary/.btn-secondary already recolour from the RGB
   vars above (navy / orange). We add the DURA shape + display type.
   Primary  = navy (default action)   Secondary/accent = orange (key CTA)
   --------------------------------------------------------------------- */
.btn {
  font-family: var(--dura-font-display);
  font-style: italic;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-radius: var(--dura-r-sm);
  --bs-btn-padding-y: .68rem;
  --bs-btn-padding-x: 1.4rem;
}
.btn-sm { --bs-btn-padding-y: .45rem; --bs-btn-padding-x: .9rem; }

.btn-primary {
  --bs-btn-bg: rgb(var(--primary-rgb));
  --bs-btn-border-color: rgb(var(--primary-rgb));
  --bs-btn-hover-bg: #12496F;
  --bs-btn-hover-border-color: #12496F;
  --bs-btn-active-bg: #0A3350;
  --bs-btn-color: #fff; --bs-btn-hover-color: #fff;
  box-shadow: 0 6px 16px rgba(11,58,90,.18);
}
.btn-secondary {         /* == the orange accent button */
  --bs-btn-bg: rgb(var(--secondary-rgb));
  --bs-btn-border-color: rgb(var(--secondary-rgb));
  --bs-btn-hover-bg: #FFA92E;
  --bs-btn-hover-border-color: #FFA92E;
  --bs-btn-color: #20120A; --bs-btn-hover-color: #20120A;
  box-shadow: 0 6px 16px rgba(247,148,30,.25);
}
.btn-outline-primary {
  --bs-btn-color: rgb(var(--primary-rgb));
  --bs-btn-border-color: rgba(var(--primary-rgb),.4);
  --bs-btn-hover-bg: rgb(var(--primary-rgb));
  --bs-btn-hover-border-color: rgb(var(--primary-rgb));
}

/* ---------------------------------------------------------------------
   5. CARDS  (template's .card.custom-card is the widget shell)
   --------------------------------------------------------------------- */
.card.custom-card {
  border: 1px solid var(--bootstrap-card-border);
  border-radius: var(--dura-r-md);
  box-shadow: 0 1px 2px rgba(11,58,90,.06), 0 10px 26px rgba(11,58,90,.08);
}
[data-theme-mode=dark] .card.custom-card {
  box-shadow: 0 1px 0 rgba(255,255,255,.03), 0 8px 24px rgba(0,0,0,.45);
}
.card.custom-card .card-header {
  border-bottom: none;
  background: transparent;
}
.card.custom-card .card-title {
  color: rgb(var(--primary-rgb));
  font-size: 1.05rem;
  margin: 0;
}
[data-theme-mode=dark] .card.custom-card .card-title { color: var(--default-text-color); }

/* ---------------------------------------------------------------------
   6. FORM FIELDS  (soft-filled, lift + orange ring on focus)
   --------------------------------------------------------------------- */
.form-control, .form-select {
  background-color: var(--form-control-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--dura-r-sm);
  padding: .72rem .9rem;
  color: var(--default-text-color);
}
/* Compact (-sm) controls — DataTables search box + length dropdown.
   Height is PINNED to the dura btn-sm height (~34px) so they sit level with
   the btn-sm PRINT/CSV buttons. Padding alone is not enough: Bootstrap's
   .form-control-sm / .form-select-sm carry a min-height (and the select a
   fixed height) of calc(1.5em + .5rem + 2px), which our base .form-control
   padding does not override. An explicit height with border-box caps it. */
.form-control-sm, .form-select-sm {
  height: 34px;
  min-height: 0;
  padding: .2rem .7rem;
  font-size: .8rem;
  line-height: 1.4;
  border-radius: 8px;
}
.form-select-sm { padding-inline-end: 1.9rem; } /* room for the caret */
.form-control::placeholder { color: var(--text-muted); }
.form-control:focus, .form-select:focus {
  border-color: rgb(var(--secondary-rgb));
  box-shadow: 0 0 0 3px rgba(var(--secondary-rgb),.18);
  background-color: var(--custom-white);
}
.form-label { font-weight: 600; color: var(--default-text-color); }
/* invalid */
.was-validated .form-control:invalid, .form-control.is-invalid {
  border-color: rgb(var(--danger-rgb));
  background-color: rgba(var(--danger-rgb),.06);
}

/* ---------------------------------------------------------------------
   7. BADGES / STATUS PILLS
   Session type = solid; counts = soft; "no log" = outline.
   Use .bg-* / .text-bg-* (auto from the RGB vars) or these helpers.
   --------------------------------------------------------------------- */
.badge { font-weight: 600; border-radius: 7px; padding: .38em .62em; }
.badge.dura-soft-success { background: rgba(var(--success-rgb),.14); color: rgb(var(--success-rgb)); }
.badge.dura-soft-danger  { background: rgba(var(--danger-rgb),.14);  color: rgb(var(--danger-rgb)); }
.badge.dura-outline-warn { background: transparent; color: rgb(var(--warning-rgb)); border: 1.5px solid rgb(var(--warning-rgb)); }

/* ---------------------------------------------------------------------
   8. SIDEBAR / HEADER accent
   The template drives menu bg with --menu-bg / --primary-color.
   NOTE: the template owns .side-menu__item.active::before / ::after and the
   .shape1/.shape2 elements to draw the curved active "pocket" — do NOT set a
   background on ::before here (it fights the curve). Orange accent is applied
   via hover colour only; the active pocket comes from --sidemenu-active-bgcolor.
   --------------------------------------------------------------------- */
.app-sidebar .side-menu__item:hover {
  color: rgb(var(--secondary-rgb));
}

/* Dura nav icons are inline <svg>, not glyph fonts. The template's active state
   inflates .side-menu__icon into a ~35px disc (background + 50% radius); a font
   glyph stays small inside it, but an SVG scales to fill the whole box. Pad the
   active svg so the drawing shrinks back to glyph size and sits centred in the disc. */
.app-sidebar .slide.active svg.side-menu__icon { padding: 9px; }

/* ---------------------------------------------------------------------
   9. DURA BRAND ICONS
   Line glyphs carry one orange node. Drop an <svg><use> from the sprite,
   colour the stroke with currentColor; the node stays orange.
   --------------------------------------------------------------------- */
.dura-icon { width: 1.5rem; height: 1.5rem; color: currentColor; vertical-align: -.28em; pointer-events: none; }
.dura-icon--sm { width: 1.125rem; height: 1.125rem; }

/* ---------------------------------------------------------------------
   10. TABS  (.nav-pills — used across the app as button-style tabs)
   Adopt the button language: Saira display italic caps, sm radius. Active
   tab = navy fill + soft navy shadow (like .btn-primary); the rest read as
   navy ghost buttons that lift on hover. Bootstrap already fills the active
   pill from the primary token, so we mostly add type + shape + shadow.
   --------------------------------------------------------------------- */
.nav-pills {
  gap: .4rem;
  --bs-nav-pills-border-radius: var(--dura-r-sm);
}
.nav-pills .nav-link {
  font-family: var(--dura-font-display);
  font-style: italic;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-radius: var(--dura-r-sm);
  padding: .55rem 1.15rem;
  color: rgb(var(--primary-rgb));
  border: 1px solid transparent;
  transition: color .15s cubic-bezier(.22,.61,.36,1),
              background-color .15s cubic-bezier(.22,.61,.36,1),
              border-color .15s cubic-bezier(.22,.61,.36,1);
}
.nav-pills .nav-link:hover:not(.active),
.nav-pills .nav-link:focus:not(.active) {
  background: var(--list-hover-focus-bg);
  border-color: var(--default-border);
  color: rgb(var(--primary-rgb));
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background: rgb(var(--primary-rgb));
  color: #fff;
  box-shadow: 0 6px 16px rgba(11,58,90,.18);
}
[data-theme-mode=dark] .nav-pills .nav-link { color: var(--default-text-color); }
[data-theme-mode=dark] .nav-pills .nav-link.active,
[data-theme-mode=dark] .nav-pills .show > .nav-link { color: #fff; }

/* nav-tabs — same button language, for consistency. The template's
   .tab-style-6 (used on the Search page) is a filled-pill style at (0,3,0)
   specificity, so we match it with .nav-tabs .nav-item .nav-link (also 0,3,0)
   and let load order win. Plain .nav-tabs .nav-link covers any other case. */
.nav-tabs { border-bottom: 0; --bs-nav-tabs-border-width: 0; }
.nav-tabs .nav-link,
.nav-tabs .nav-item .nav-link {
  font-family: var(--dura-font-display);
  font-style: italic;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  border: 1px solid transparent;
  border-radius: var(--dura-r-sm);
  color: rgb(var(--primary-rgb));
}
.nav-tabs .nav-link:hover:not(.active),
.nav-tabs .nav-item .nav-link:hover:not(.active) {
  background: var(--list-hover-focus-bg);
  border-color: var(--default-border);
  color: rgb(var(--primary-rgb));
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item .nav-link.active {
  background: rgb(var(--primary-rgb));
  color: #fff;
  border-radius: var(--dura-r-sm);
  box-shadow: 0 6px 16px rgba(11,58,90,.18);
}
[data-theme-mode=dark] .nav-tabs .nav-link,
[data-theme-mode=dark] .nav-tabs .nav-item .nav-link { color: var(--default-text-color); }
[data-theme-mode=dark] .nav-tabs .nav-link.active,
[data-theme-mode=dark] .nav-tabs .nav-item .nav-link.active { color: #fff; }

/* ---------------------------------------------------------------------
   11. SELECTED LIST ROW  (athlete list on the profile page)
   AthletesIndex.js marks the current athlete with .active on .athlete-item
   (setSelectedListItem), on click AND on initial load. Give that row a clear,
   on-brand selected state: soft navy fill + an orange accent bar. The bar is
   an inset box-shadow so it doesn't shift the row content (no reflow).
   --------------------------------------------------------------------- */
.athlete-item.active,
.athlete-item.active:hover,
.athlete-item.active:focus {
  background-color: rgba(var(--primary-rgb), .07);
  box-shadow: inset 3px 0 0 rgb(var(--secondary-rgb));
}
.athlete-item.active .main-contact-body h6 { color: rgb(var(--primary-rgb)); }
[data-theme-mode=dark] .athlete-item.active,
[data-theme-mode=dark] .athlete-item.active:hover,
[data-theme-mode=dark] .athlete-item.active:focus {
  background-color: rgba(var(--secondary-rgb), .12);
}
[data-theme-mode=dark] .athlete-item.active .main-contact-body h6 { color: var(--default-text-color); }

/* ---------------------------------------------------------------------
   6. DURA WIDGET TOKEN ALIASES
   Design prototypes are authored with Dura names (--primary, --accent,
   --font-display, --surface-2 …). Rather than rewrite every prototype,
   this aliases those names onto the tokens already defined above, SCOPED
   to a .dura-widget root. No literal colours, no font import — one source
   of truth, and dark mode tracks the app via [data-theme-mode=dark].
   Wrap any ported Dura widget in <div class="dura-widget">.
   --------------------------------------------------------------------- */
.dura-widget {
  /* type */
  --font-display: var(--dura-font-display);
  --font-semi:    var(--dura-font-semi);
  --font-ui:      var(--default-font-family);
  --ease: cubic-bezier(.22,.61,.36,1);

  /* radii */
  --r-sm: var(--dura-r-sm);
  --r-md: var(--dura-r-md);
  --r-lg: var(--dura-r-lg);

  /* brand */
  --primary:     rgb(var(--primary-rgb));    /* navy stroke */
  --primary-ink: #FFFFFF;
  --primary-hi:  #12496F;                    /* navy hover (one step lighter) */
  --accent:      rgb(var(--secondary-rgb));  /* orange node */
  --accent-soft: rgba(var(--secondary-rgb), .14);
  --accent-line: rgba(var(--secondary-rgb), .42);

  /* semantic status */
  --good: rgb(var(--success-rgb));
  --warn: rgb(var(--warning-rgb));
  --bad:  rgb(var(--danger-rgb));
  --info: rgb(var(--info-rgb));

  /* ink + surfaces + lines */
  --ink:         var(--default-text-color);
  --ink-dim:     var(--text-muted);
  --ink-faint:   color-mix(in srgb, var(--default-text-color) 40%, transparent);
  --bg:          rgb(var(--body-bg-rgb));    /* page background behind full-page widgets */
  --surface:     var(--form-control-bg);
  --surface-2:   var(--list-hover-focus-bg);
  --surface-3:   var(--sidemenu-active-bgcolor);
  --line:        var(--default-border);
  --line-strong: var(--bootstrap-card-border);

  --shadow-card: 0 1px 2px rgba(11,58,90,.06), 0 10px 26px rgba(11,58,90,.08);
}
[data-theme-mode=dark] .dura-widget {
  --primary-ink: #EAF4FB;
  --primary-hi:  #246C96;  /* one step lighter than the dark --primary (#1B5577) */
  --shadow-card: 0 1px 0 rgba(255,255,255,.03), 0 8px 24px rgba(0,0,0,.45);
}

/* ---------------------------------------------------------------------
   7. DURA WIDGET PRIMITIVES (reusable kit)
   Shared scaffolding for ported Dura home widgets so each widget file
   only carries its own unique bits. All scoped under .dura-widget and
   built on the aliased tokens above. Class map:
     .dura-card        card shell (was DailyData .dd-card)
     .dura-w-head/-title/-ctl/-gear   header row + navy square control(s)
     .dura-legend + -title/-item/-note/-sep/-swatch
     .dura-grid + -scroll   sticky-header / sticky-first-column table
     .dura-ic .dura-check .dura-miss .dura-icwrap .dura-swatch  icons/cells
   Icons come from ExtendedClasses/DuraIcons.cs (emit .dura-ic / .dura-check).
   --------------------------------------------------------------------- */
.dura-widget .dura-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-card); overflow: hidden; display: flex; flex-direction: column; height: 100%; }

.dura-widget .dura-w-head { display: flex; align-items: flex-start; gap: 12px; padding: 18px 22px 0; }
.dura-widget .dura-w-title { font-family: var(--font-display); font-weight: 700; font-style: italic; text-transform: uppercase; letter-spacing: .02em; font-size: 18px; margin: 0; color: var(--primary); flex: 1; line-height: 1.12; }
[data-theme-mode=dark] .dura-widget .dura-w-title { color: var(--ink); }
.dura-widget .dura-w-title small { display: block; font-family: var(--font-ui); font-style: normal; font-weight: 600; text-transform: none; letter-spacing: 0; font-size: 12.5px; color: var(--ink-dim); margin-top: 3px; }
.dura-widget .dura-w-ctl { display: flex; gap: 8px; flex-shrink: 0; }
.dura-widget .dura-w-gear { width: 36px; height: 36px; border-radius: 9px; border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; background: var(--primary); color: var(--primary-ink); transition: filter .15s; text-decoration: none; }
.dura-widget .dura-w-gear:hover { filter: brightness(1.1); color: var(--primary-ink); }
.dura-widget .dura-w-gear i { font-size: 17px; line-height: 0; }
.dura-widget .dura-w-gear svg { width: 17px; height: 17px; }
.dura-widget .dura-w-gear.dura-w-remove { background: transparent; color: var(--ink-dim); }
.dura-widget .dura-w-gear.dura-w-remove:hover { color: var(--bad); }

.dura-widget .dura-w-meta { padding: 2px 22px 0; font-family: var(--font-semi); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; font-size: 11px; color: var(--ink-faint); }
.dura-widget .dura-w-body { padding: 14px 22px 20px; flex: 1; min-height: 0; }
.dura-widget .dura-w-foot { padding: 14px 22px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; }
.dura-widget .dura-btn { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 16px; border-radius: 9px; background: var(--primary); color: var(--primary-ink); font-family: var(--font-semi); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: 12px; text-decoration: none; border: none; cursor: pointer; box-shadow: 0 6px 16px rgba(11, 58, 90, .18); transition: filter .15s, box-shadow .15s, transform .15s; }
.dura-widget .dura-btn:hover { filter: brightness(1.1); color: var(--primary-ink); box-shadow: 0 8px 20px rgba(11, 58, 90, .24); transform: translateY(-1px); }
.dura-widget .dura-btn svg { width: 14px; height: 14px; }

.dura-widget .dura-legend { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 0 20px 16px; color: var(--ink-dim); font-size: 13.5px; font-weight: 500; font-family: var(--font-ui); }
.dura-widget .dura-legend-title { font-family: var(--font-semi); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: 12px; color: var(--ink); }
.dura-widget .dura-legend-item { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.dura-widget .dura-legend-item svg.dura-ic { color: var(--primary); }
[data-theme-mode=dark] .dura-widget .dura-legend-item svg.dura-ic { color: var(--ink); }
.dura-widget .dura-legend-note { color: var(--ink-faint); }
.dura-widget .dura-legend-sep { width: 1px; height: 18px; background: var(--line-strong); }
.dura-widget .dura-swatch { width: 13px; height: 13px; border-radius: 4px; display: inline-block; }

.dura-widget .dura-grid-scroll { overflow-x: auto; border-top: 1px solid var(--line-strong); -webkit-overflow-scrolling: touch; }
.dura-widget .dura-grid-empty { padding: 18px 20px; }
.dura-widget .dura-grid { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 640px; font-family: var(--font-ui); }
.dura-widget .dura-grid th, .dura-widget .dura-grid td { padding: 0; }
.dura-widget .dura-grid thead th { position: sticky; top: 0; z-index: 3; background: var(--surface-3); font-family: var(--font-semi); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; font-size: 12px; color: var(--ink-dim); border-bottom: 1px solid var(--line-strong); }
.dura-widget .dura-grid .dura-rowhead-h { text-align: left; padding: 12px 18px !important; left: 0; z-index: 4; border-right: 1px solid var(--line-strong); min-width: 170px; }
.dura-widget .dura-grid .dura-col { text-align: center; padding: 9px 14px !important; border-left: 1px solid var(--line); min-width: 104px; white-space: nowrap; }
.dura-widget .dura-grid .dura-col-sub { display: block; font-size: 10.5px; letter-spacing: .08em; color: var(--ink-faint); }
.dura-widget .dura-grid .dura-col-main { display: block; color: var(--ink); font-weight: 600; letter-spacing: .02em; }
.dura-widget .dura-grid .dura-rowhead { position: sticky; left: 0; z-index: 2; background: var(--surface); text-align: left; padding: 0 18px !important; font-family: var(--font-ui); font-weight: 600; font-size: 14.5px; color: var(--ink); border-right: 1px solid var(--line-strong); border-bottom: 1px solid var(--line); white-space: nowrap; height: 46px; }
.dura-widget .dura-grid .dura-cell { text-align: center; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); vertical-align: middle; height: 46px; }
.dura-widget .dura-grid tbody tr:hover .dura-cell { background: var(--surface-2); }
.dura-widget .dura-grid tbody tr:hover .dura-rowhead { background: var(--surface-2); }

.dura-widget .dura-check { display: inline-block; vertical-align: middle; }
.dura-widget .dura-miss { display: inline-flex; align-items: center; justify-content: center; gap: 9px; }
.dura-widget .dura-icwrap { display: inline-flex; line-height: 0; cursor: default; color: var(--primary); }
[data-theme-mode=dark] .dura-widget .dura-icwrap { color: var(--ink); }
.dura-widget .dura-icwrap svg { transition: transform .12s var(--ease); }
.dura-widget .dura-icwrap:hover svg { transform: scale(1.14); }
.dura-widget .dura-block { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }

@media (max-width: 560px) {
  .dura-widget .dura-grid .dura-rowhead-h, .dura-widget .dura-grid .dura-rowhead { min-width: 132px; padding-left: 14px !important; padding-right: 12px !important; }
  .dura-widget .dura-w-title { font-size: 16px; }
  .dura-widget .dura-legend { font-size: 12.5px; gap: 11px; }
}

/* ---------------------------------------------------------------------
   8. DURA EMPTY / ERROR STATE  (reference §08 "Empty States")
   Branded spot card: illustration + a clear line + the next action.
   Self-contained (uses raw app tokens + a few local vars for the inline
   illustration SVGs) so it works anywhere — no .dura-widget wrapper needed.
   Used for a failed-to-load widget (Views/Shared/_WidgetLoadError.cshtml),
   and reusable for any "no data / all caught up / nothing here yet" state.
   --------------------------------------------------------------------- */
.dura-empty {
  /* local vars the illustration SVGs reference */
  --line-strong: var(--bootstrap-card-border);
  --ink-faint: color-mix(in srgb, var(--default-text-color) 40%, transparent);
  --surface-3: var(--sidemenu-active-bgcolor);

  background: var(--form-control-bg);
  border: 1px solid var(--default-border);
  border-radius: var(--dura-r-md);
  box-shadow: 0 1px 2px rgba(11,58,90,.06), 0 10px 26px rgba(11,58,90,.08);
  padding: 36px 28px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  height: 100%;
}
[data-theme-mode=dark] .dura-empty { box-shadow: 0 1px 0 rgba(255,255,255,.03), 0 8px 24px rgba(0,0,0,.45); }
.dura-empty .dura-empty-ill { width: 148px; height: 120px; margin-bottom: 10px; }
.dura-empty h5 { font-family: var(--dura-font-display); font-weight: 700; font-style: italic; text-transform: uppercase; font-size: 20px; margin: 0; letter-spacing: .02em; color: rgb(var(--primary-rgb)); }
[data-theme-mode=dark] .dura-empty h5 { color: var(--default-text-color); }
.dura-empty p { color: var(--text-muted); font-size: 13.5px; line-height: 1.55; margin: 0; max-width: 240px; }
.dura-empty .btn { margin-top: 12px; }

/* ---------------------------------------------------------------------
   9. SKELETON LOADERS — shimmer placeholders shown while async data loads.
   Global (works inside or outside .dura-widget); uses the theme greys so it
   tracks light/dark. .dura-skeleton = the shimmer; the -chart / -line helpers
   shape it into a bar chart or table rows.
   --------------------------------------------------------------------- */
@keyframes dura-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.dura-skeleton { background: linear-gradient(90deg, var(--list-hover-focus-bg) 25%, var(--sidemenu-active-bgcolor) 37%, var(--list-hover-focus-bg) 63%); background-size: 200% 100%; animation: dura-shimmer 1.4s ease-in-out infinite; border-radius: 8px; }
@media (prefers-reduced-motion: reduce) { .dura-skeleton { animation: none; } }
.dura-skeleton-chart { display: flex; align-items: flex-end; justify-content: space-around; gap: 14px; height: 340px; padding: 24px 8px 0; }
.dura-skeleton-chart .dura-skeleton { flex: 1; min-width: 0; border-radius: 8px 8px 0 0; }
.dura-skeleton-line { display: block; height: 14px; border-radius: 6px; }

/* ---------------------------------------------------------------------
   §10  Squad filter — horizontal collapse
   toggleFilters() (site.js) adds .is-collapsed to the .sqf sidebar to
   shrink it to a thin rail, handing the freed width to the main .col.
   Complements the .sqf base styles in _SquadFilter.cshtml.
   --------------------------------------------------------------------- */
.sqf { transition: width .2s ease; }
.sqf.sqf-no-anim { transition: none !important; }
.sqf.is-collapsed { width: 44px; }
.sqf.is-collapsed .sqf-title,
.sqf.is-collapsed .sqf-body { display: none; }
/* Drop the card chrome when collapsed — leave just the navy toggle at the top-left,
   so it reads as a re-open control, not an empty floating card. */
.sqf.is-collapsed .dura-card { height: auto; background: transparent; border: none; box-shadow: none; overflow: visible; }
.sqf.is-collapsed .sqf-head { justify-content: flex-start; padding: 0; border-bottom: none; }
.sqf.is-collapsed .sqf-collapse svg { transform: rotate(180deg); }

/* ---------------------------------------------------------------------
   §11  Player status charts — fixed height (NOT tied to the filter)
   The filter sidebar grows when a scope group is expanded, so the chart
   cards must NOT stretch to it — pin them to their own content height.
   --------------------------------------------------------------------- */
.ps-charts-grid { height: auto !important; align-items: start; }
.ps-charts-grid .dura-card { height: auto; }
/* Italic count labels on the status charts (ApexCharts can't set font-style inline). */
.dura-widget .PlayerStatusChart .apexcharts-datalabel { font-family: 'Saira Condensed', sans-serif !important; font-style: italic !important; }

/* ---------------------------------------------------------------------
   §12  Brand logo — left-align to the nav icons (was centred by the vendor's
        .app-sidebar .main-sidebar-header { justify-content:center }).
        Icon inset = .slide (0.75rem) + .side-menu__item (0.75rem) = 1.5rem,
        so start the header content there. Shared .header-logo also covers the
        top-header (.horizontal-logo) instance.
   --------------------------------------------------------------------- */
.app-sidebar .main-sidebar-header { justify-content: flex-start !important; padding-inline-start: 1.5rem !important; }
.header-logo { display: inline-flex !important; align-items: center; justify-content: flex-start !important; margin-inline: 0 !important; }
.header-logo img { margin-inline: 0 !important; }

/* ---------------------------------------------------------------------
   §13  Dura primary button — global (works outside .dura-widget, e.g. in
        body-appended modals). Navy fill, Saira Semi Condensed, uppercase.
   --------------------------------------------------------------------- */
.dura-btn-primary, .dura-btn-secondary, .dura-btn-danger { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 22px; border-radius: var(--dura-r-sm); font-family: var(--dura-font-semi); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; font-size: 12.5px; line-height: 1; cursor: pointer; transition: filter .15s, background .15s, box-shadow .15s, transform .15s; }
.dura-btn-primary { border: none; background: rgb(var(--primary-rgb)); color: #fff; box-shadow: 0 6px 16px rgba(var(--primary-rgb), .22); }
.dura-btn-primary:hover { filter: brightness(1.12); color: #fff; transform: translateY(-1px); box-shadow: 0 9px 22px rgba(var(--primary-rgb), .30); }
.dura-btn-primary:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .28); color: #fff; }
.dura-btn-secondary { border: 1px solid var(--default-border); background: var(--form-control-bg, #fff); color: var(--default-text-color); box-shadow: 0 2px 6px rgba(0, 0, 0, .07); }
.dura-btn-secondary:hover { background: rgba(0, 0, 0, .04); color: var(--default-text-color); transform: translateY(-1px); box-shadow: 0 5px 12px rgba(0, 0, 0, .11); }
.dura-btn-danger { border: none; background: rgb(var(--danger-rgb)); color: #fff; box-shadow: 0 6px 16px rgba(var(--danger-rgb), .22); }
.dura-btn-danger:hover { filter: brightness(1.1); color: #fff; transform: translateY(-1px); box-shadow: 0 9px 22px rgba(var(--danger-rgb), .30); }
.dura-btn-primary:active, .dura-btn-secondary:active, .dura-btn-danger:active { transform: translateY(0); }

/* ---------------------------------------------------------------------
   §14  Scrollbars — the template's 0.25rem (4px) bars are near-impossible
        to grab, especially the horizontal one on wide tables. Make them
        a usable size with a clear thumb. Global (loads last), by request.
   --------------------------------------------------------------------- */
::-webkit-scrollbar { width: 14px; height: 14px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(var(--dark-rgb), .32); border-radius: 8px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(var(--dark-rgb), .48); background-clip: padding-box; }
html { scrollbar-width: auto; scrollbar-color: rgba(var(--dark-rgb), .32) transparent; }