/**
 * Athlos Modern Theme
 * Inspired by clean, modern UI design principles
 * Similar aesthetic to DigitalOcean's interface
 */

/* ========== Color Variables ========== */
:root {
  /* Legacy light-theme tokens (used by non-dark components) */
  --primary-blue: #0069FF;
  --primary-blue-dark: #0052CC;
  --success-green: #00B359;
  --success-green-hover: #00984C; /* color-mix(in srgb, var(--success-green) 85%, #000) precomputed: html2canvas (PDF export) can't parse color-mix() */
  --danger-red: #DC3545;
  --danger-red-hover: #BB2D3B; /* color-mix(in srgb, var(--danger-red) 85%, #000) precomputed: html2canvas (PDF export) can't parse color-mix() */
  --warning-orange: #FFA500;
  --text-dark: #1F2933;
  --text-medium: #52606D;
  --text-light: #7C8B9A;
  --border-light: #E4E7EB;
  --bg-light: #F5F7FA;
  --bg-white: #FFFFFF;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.12);
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* Type (#862). Classic keeps the system stack it always had; Pitch swaps in
     Barlow / Barlow Condensed below. */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", sans-serif;
  --font-display: var(--font-sans);

  /* ── Athlos dark design system tokens (global) ──
     Used by sidebar, topbar, and all dark-mode screens.
     Individual pages may override on body.page-class for page-scoped overrides. */
  --bg-base:     #0B1220;
  --bg-surface:  #131A2B;
  --bg-elevated: #1B2438;
  --bg-sidebar:  #0B1220;   /* matches bg-base — sidebar blends with page */

  --text-primary:   rgba(255, 255, 255, 0.92);
  --text-secondary: rgba(255, 255, 255, 0.70);
  --text-tertiary:  rgba(255, 255, 255, 0.50);
  --text-disabled:  rgba(255, 255, 255, 0.32);
  --text-primary-rgb: 255, 255, 255;   /* base for rgba() / Bootstrap --bs-body-color-rgb */

  --border-subtle:  rgba(255, 255, 255, 0.08);
  --border-default: rgba(255, 255, 255, 0.12);
  --border-strong:  rgba(255, 255, 255, 0.20);

  --accent:          #3B82F6;
  --accent-rgb:      59, 130, 246;   /* base for rgba() — html2canvas (PDF export) can't parse color-mix() */
  --accent-hover:    #2563EB;
  --accent-soft-bg:  rgba(59, 130, 246, 0.12);
  --on-accent:       #FFFFFF;   /* text/icons ON an --accent fill (#862) */
  --logo-backing:    #FFFFFF;   /* behind a club logo drawn for white paper (#868) */
  --backdrop:        rgba(0, 0, 0, 0.60);   /* behind a modal or overlay panel (#868) */
  --success:         #22C55E;
  --warning:         #F59E0B;
  --danger:          #EF4444;
  --info:            #3B82F6;

  /* Soft status variants — for alert backgrounds, row highlights, badge fills */
  --info-soft-bg:        rgba(59, 130, 246, 0.15);
  --info-soft-border:    rgba(59, 130, 246, 0.40);
  --info-text:           #93C5FD;
  --success-soft-bg:     rgba(34, 197, 94, 0.15);
  --success-soft-border: rgba(34, 197, 94, 0.40);
  --success-text:        #86EFAC;
  --warning-soft-bg:     rgba(245, 158, 11, 0.15);
  --warning-soft-border: rgba(245, 158, 11, 0.40);
  --warning-text:        #FCD34D;
  --danger-soft-bg:      rgba(239, 68, 68, 0.15);
  --danger-soft-border:  rgba(239, 68, 68, 0.40);
  --danger-text:         #FCA5A5;

  --hover-overlay:  rgba(255, 255, 255, 0.06);
  --active-overlay: rgba(255, 255, 255, 0.10);
  --focus-ring:     rgba(59, 130, 246, 0.50);

  /* Chart categorical palette */
  --chart-1: #60A5FA;
  --chart-2: #34D399;
  --chart-3: #FBBF24;
  --chart-4: #F87171;
  --chart-5: #A78BFA;
  --chart-6: #22D3EE;
  --chart-6-rgb: 34, 211, 238;   /* base for rgba() — html2canvas (PDF export) can't parse color-mix() */
  --chart-7: #FB923C;
  --chart-8: #F472B6;

  /* Outline drawn around every segment of a stacked bar, so the parts of a
     column can be counted without hovering. Weak against the *fill*, which is
     what it has to separate: black would sink into the dark canvas here, and
     white would eat the saturation of the light theme's fills, so each theme
     outlines with its own foreground at low alpha — the --border-* idiom. */
  --chart-segment-border: rgba(255, 255, 255, 0.45);

  /* Ink for text painted ON a saturated chart fill (inside a bar or segment).
     The backdrop there is the data colour, not a theme surface, so these two do
     NOT flip with the theme — the renderer picks whichever contrasts better
     with the fill it is drawing on. */
  --chart-ink-dark:  #0B1220;
  --chart-ink-light: #FFFFFF;

  /* Scrollbar thumb — tokenized so it adapts per theme */
  --scrollbar-thumb:        rgba(255, 255, 255, 0.12);
  --scrollbar-thumb-hover:  rgba(255, 255, 255, 0.22);
  --scrollbar-thumb-active: rgba(255, 255, 255, 0.32);
}

/* ── Light theme override ──
   Default (:root) is the dark design system. Setting data-theme="light"
   on <html> flips the design-system tokens to a light palette. Legacy
   light-theme tokens (--text-dark, --bg-white, …) are already light by
   default, so they need no override here. */
:root[data-theme="light"] {
  --bg-base:     #F5F7FA;   /* page background, sidebar, topbar — the canvas */
  --bg-surface:  #FFFFFF;   /* cards, panels, table containers */
  --bg-elevated: #FFFFFF;   /* modals, popovers, dropdowns — lifted by shadow */
  --bg-sidebar:  #FFFFFF;

  /* Text — warmer legacy slate (#1F2933) to match the older UI */
  --text-primary:   rgba(31, 41, 51, 0.95);
  --text-secondary: rgba(31, 41, 51, 0.68);
  --text-tertiary:  rgba(31, 41, 51, 0.50);
  --text-disabled:  rgba(31, 41, 51, 0.32);
  --text-primary-rgb: 31, 41, 51;

  --border-subtle:  rgba(31, 41, 51, 0.08);
  --border-default: rgba(31, 41, 51, 0.14);
  --border-strong:  rgba(31, 41, 51, 0.24);

  /* Accent — legacy bright blue (#0069FF), the signature color of the older UI */
  --accent:          #0069FF;
  --accent-rgb:      0, 105, 255;   /* base for rgba() — html2canvas (PDF export) can't parse color-mix() */
  --accent-hover:    #0052CC;
  --accent-soft-bg:  rgba(0, 105, 255, 0.10);
  --on-accent:       #FFFFFF;
  --success:         #00B359;
  --warning:         #FFA500;
  --danger:          #DC3545;
  --info:            #0069FF;

  /* Soft status variants — readable text needs darker hues on white */
  --info-soft-bg:        rgba(0, 105, 255, 0.10);
  --info-soft-border:    rgba(0, 105, 255, 0.35);
  --info-text:           #0052CC;
  --success-soft-bg:     rgba(0, 179, 89, 0.12);
  --success-soft-border: rgba(0, 179, 89, 0.35);
  --success-text:        #00814A;
  --warning-soft-bg:     rgba(255, 165, 0, 0.14);
  --warning-soft-border: rgba(255, 165, 0, 0.40);
  --warning-text:        #B45309;
  --danger-soft-bg:      rgba(220, 53, 69, 0.10);
  --danger-soft-border:  rgba(220, 53, 69, 0.35);
  --danger-text:         #C42B39;

  --hover-overlay:  rgba(31, 41, 51, 0.04);
  --active-overlay: rgba(31, 41, 51, 0.08);
  --focus-ring:     rgba(0, 105, 255, 0.30);

  /* Chart palette — legacy blue leads, rest darkened for contrast on white */
  --chart-1: #0069FF;
  --chart-2: #00B359;
  --chart-3: #D97706;
  --chart-4: #DC3545;
  --chart-5: #7C3AED;
  --chart-6: #0891B2;
  --chart-6-rgb: 8, 145, 178;   /* base for rgba() — html2canvas (PDF export) can't parse color-mix() */
  --chart-7: #EA580C;
  --chart-8: #DB2777;
  --chart-segment-border: rgba(31, 41, 51, 0.30);

  --scrollbar-thumb:        rgba(31, 41, 51, 0.18);
  --scrollbar-thumb-hover:  rgba(31, 41, 51, 0.30);
  --scrollbar-thumb-active: rgba(31, 41, 51, 0.40);

  /* Stronger shadows — light surfaces need real elevation cues */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.08);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.10);
  --shadow-lg: 0 12px 28px rgba(15, 23, 42, 0.14);
}

/* ══════════ Pitch design (#862, epic #861) ══════════
   Behind the switch data-design="pitch" on <html> (apps/ui_design.py). Same
   token names, new values: a page already on tokens is recoloured by these two
   blocks alone. Both blocks must set the same themed tokens —
   :root[data-design="pitch"] and :root[data-theme="light"] have equal
   specificity, so a token missing from the light block leaks its *dark* Pitch
   value into the light theme (tests/test_pitch_tokens.py holds this).
   Design: https://claude.ai/artifact/JTysbtneALbNTrUAaAaBf3 */
:root[data-design="pitch"] {
  /* Theme-independent: type, radii, aliases */
  --font-sans: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", sans-serif;
  --font-display: "Barlow Condensed", "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --primary-blue: var(--accent);             /* legacy alias until #892 */
  --primary-blue-dark: var(--accent-hover);  /* legacy alias until #892 */
  /* Legacy names classic components still paint with (.card, .modal, .table,
     .form-control, .text-muted …) — aliases until #892, so they follow the
     Pitch theme instead of keeping classic's values (#897 review). */
  --text-dark: var(--text-primary);
  --text-medium: var(--text-secondary);
  --text-light: var(--text-tertiary);
  --bg-white: var(--bg-surface);
  --bg-light: var(--bg-base);
  --border-light: var(--border-default);
  --chart-ink-dark: #071419;                 /* does not flip with the theme */

  --bg-base:     #071419;
  --bg-surface:  #0D1F26;
  --bg-elevated: #132A33;
  --bg-sidebar:  #071419;

  --text-primary:   #ECF6F7;
  --text-secondary: #A7BEC3;
  --text-tertiary:  #7C969C;
  --text-disabled:  rgba(236, 246, 247, 0.32);
  --text-primary-rgb: 236, 246, 247;

  --border-subtle:  rgba(180, 230, 235, 0.08);
  --border-default: rgba(180, 230, 235, 0.12);
  --border-strong:  rgba(180, 230, 235, 0.20);

  --accent:          #2EE6C5;
  --accent-rgb:      46, 230, 197;
  --accent-hover:    #5CEDD3;
  --accent-soft-bg:  rgba(46, 230, 197, 0.12);
  --on-accent:       #04221E;   /* the dark accent is light — white text fails on it */
  --success:         #5BE37D;
  --warning:         #FFA24C;
  --danger:          #FF6B6B;
  --info:            #3AB8F5;

  --info-soft-bg:        rgba(58, 184, 245, 0.15);
  --info-soft-border:    rgba(58, 184, 245, 0.40);
  --info-text:           #7DCFF8;
  --success-soft-bg:     rgba(91, 227, 125, 0.15);
  --success-soft-border: rgba(91, 227, 125, 0.40);
  --success-text:        #7BEA97;
  --warning-soft-bg:     rgba(255, 162, 76, 0.15);
  --warning-soft-border: rgba(255, 162, 76, 0.40);
  --warning-text:        #FFB46E;
  --danger-soft-bg:      rgba(255, 107, 107, 0.15);
  --danger-soft-border:  rgba(255, 107, 107, 0.40);
  --danger-text:         #FF8A8A;

  --hover-overlay:  rgba(236, 246, 247, 0.06);
  --active-overlay: rgba(236, 246, 247, 0.10);
  --focus-ring:     rgba(46, 230, 197, 0.50);

  /* Charts (#867): teal and blue lead, the rest keeps apart in hue. Deep,
     saturated fills so a label on a bar is always white (owner's call after
     #893): every one is at least 4.5:1 under white text and 3:1 on the surface */
  --chart-1: #10846F;
  --chart-2: #0978AD;
  --chart-3: #9F6B00;
  --chart-4: #B94E48;
  --chart-5: #7952FF;
  --chart-6: #178733;
  --chart-6-rgb: 23, 135, 51;
  --chart-7: #B65700;
  --chart-8: #E20071;
  --chart-segment-border: rgba(236, 246, 247, 0.45);

  --scrollbar-thumb:        rgba(180, 230, 235, 0.12);
  --scrollbar-thumb-hover:  rgba(180, 230, 235, 0.22);
  --scrollbar-thumb-active: rgba(180, 230, 235, 0.32);

  --backdrop: rgba(3, 10, 12, 0.72);

  /* Sidebar (#868): dark petrol in both themes, so it carries its own text */
  --sidebar-text:        #A7BEC3;
  --sidebar-text-strong: #ECF6F7;
  --sidebar-label:       #7C969C;
  --sidebar-accent:      #2EE6C5;
  --sidebar-active-bg:   rgba(46, 230, 197, 0.10);
  --sidebar-hover-bg:    rgba(236, 246, 247, 0.06);
  --sidebar-border:      rgba(180, 230, 235, 0.08);
  --sidebar-raised:      #0D1F26;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.30);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.45);
}

:root[data-design="pitch"][data-theme="light"] {
  --bg-base:     #F2F7F7;
  --bg-surface:  #FFFFFF;
  --bg-elevated: #FFFFFF;   /* lifted by --shadow-lg */
  --bg-sidebar:  #0B2228;   /* the sidebar stays dark in both themes */

  --text-primary:   #0B2228;
  --text-secondary: #3F5A60;
  --text-tertiary:  #5B7378;
  --text-disabled:  rgba(11, 34, 40, 0.32);
  --text-primary-rgb: 11, 34, 40;

  --border-subtle:  rgba(11, 34, 40, 0.08);
  --border-default: rgba(11, 34, 40, 0.14);
  --border-strong:  rgba(11, 34, 40, 0.24);

  --accent:          #007A6D;
  --accent-rgb:      0, 122, 109;
  --accent-hover:    #00665B;
  --accent-soft-bg:  rgba(0, 122, 109, 0.10);
  --on-accent:       #FFFFFF;
  --success:         #1FA75E;
  --warning:         #F08A24;
  --danger:          #D92D20;
  --info:            #0B6FB8;

  --info-soft-bg:        rgba(11, 111, 184, 0.10);
  --info-soft-border:    rgba(11, 111, 184, 0.35);
  --info-text:           #095C99;
  --success-soft-bg:     rgba(31, 167, 94, 0.12);
  --success-soft-border: rgba(31, 167, 94, 0.35);
  --success-text:        #12733F;
  --warning-soft-bg:     rgba(240, 138, 36, 0.14);
  --warning-soft-border: rgba(240, 138, 36, 0.40);
  --warning-text:        #A34A06;
  --danger-soft-bg:      rgba(217, 45, 32, 0.10);
  --danger-soft-border:  rgba(217, 45, 32, 0.35);
  --danger-text:         #B42318;

  --hover-overlay:  rgba(11, 34, 40, 0.04);
  --active-overlay: rgba(11, 34, 40, 0.08);
  --focus-ring:     rgba(0, 122, 109, 0.35);

  /* Same rule as dark: white text on every fill at 4.5:1 or more */
  --chart-1: #0D7A6E;
  --chart-2: #0C77C5;
  --chart-3: #966600;
  --chart-4: #B94E48;
  --chart-5: #704DFF;
  --chart-6: #177C45;
  --chart-6-rgb: 23, 124, 69;
  --chart-7: #B35909;
  --chart-8: #C03D88;
  --chart-segment-border: rgba(11, 34, 40, 0.30);

  --scrollbar-thumb:        rgba(11, 34, 40, 0.18);
  --scrollbar-thumb-hover:  rgba(11, 34, 40, 0.30);
  --scrollbar-thumb-active: rgba(11, 34, 40, 0.40);

  --backdrop: rgba(11, 34, 40, 0.45);

  /* Sidebar: still dark petrol (--bg-sidebar #0B2228), so the dark text set */
  --sidebar-text:        #A7BEC3;
  --sidebar-text-strong: #FFFFFF;
  --sidebar-label:       #8FAAB0;
  --sidebar-accent:      #2EE6C5;
  --sidebar-active-bg:   rgba(46, 230, 197, 0.14);
  --sidebar-hover-bg:    rgba(236, 246, 247, 0.06);
  --sidebar-border:      rgba(180, 230, 235, 0.10);
  --sidebar-raised:      #132F36;

  --shadow-sm: 0 1px 2px rgba(11, 34, 40, 0.08);
  --shadow-md: 0 4px 12px rgba(11, 34, 40, 0.10);
  --shadow-lg: 0 12px 28px rgba(11, 34, 40, 0.14);
}

/* ── Light mode: navy sidebar to match the older app (dev branch) ──
   In light mode the content is bright but the sidebar stays dark navy
   (#032F5C) with white text — the look shipped on the `dev` branch.
   Scoped to data-theme="light" so dark mode is unaffected, and to classic:
   under Pitch the sidebar is --bg-sidebar in both themes (#868). */
:root[data-theme="light"]:not([data-design="pitch"]) .pcoded-navbar,
:root[data-theme="light"]:not([data-design="pitch"]) .pcoded-navbar .navbar-content {
  background: #032F5C !important;
  border-right: none !important;
  box-shadow: var(--shadow-sm) !important;
}
:root[data-theme="light"]:not([data-design="pitch"]) .navbar-brand,
:root[data-theme="light"]:not([data-design="pitch"]) .pcoded-navbar .navbar-brand,
:root[data-theme="light"]:not([data-design="pitch"]) .pcoded-navbar .header-logo {
  background: #021E3F !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
}
:root[data-theme="light"]:not([data-design="pitch"]) .navbar-brand .b-brand,
:root[data-theme="light"]:not([data-design="pitch"]) .pcoded-navbar .b-brand {
  color: #ffffff !important;
}
/* The sidebar brand title is hard-set to var(--text-primary) inline, which
   turns dark in light mode — invisible against the navy brand block. The
   sidebar stays navy in light mode, so keep the title white to match. */
:root[data-theme="light"]:not([data-design="pitch"]) .navbar-brand .b-brand .b-title,
:root[data-theme="light"]:not([data-design="pitch"]) .pcoded-navbar .b-brand .b-title {
  color: #ffffff !important;
}
:root[data-theme="light"]:not([data-design="pitch"]) .pcoded-navbar .pcoded-inner-navbar .nav-item .nav-link {
  color: rgba(255, 255, 255, 0.85) !important;
  border-left: 3px solid transparent !important;
}
:root[data-theme="light"]:not([data-design="pitch"]) .pcoded-navbar .pcoded-inner-navbar .nav-item .nav-link:hover {
  background: rgba(255, 255, 255, 0.10) !important;
  color: #ffffff !important;
  border-left-color: transparent !important;
}
:root[data-theme="light"]:not([data-design="pitch"]) .pcoded-navbar .pcoded-inner-navbar .nav-item.active .nav-link,
:root[data-theme="light"]:not([data-design="pitch"]) .pcoded-navbar .pcoded-inner-navbar .nav-item .nav-link.active {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  border-left: 3px solid #0069FF !important;
}
:root[data-theme="light"]:not([data-design="pitch"]) .pcoded-navbar .pcoded-inner-navbar .nav-item .nav-link .pcoded-micon,
:root[data-theme="light"]:not([data-design="pitch"]) .pcoded-navbar .pcoded-inner-navbar .nav-item .nav-link .pcoded-mtext {
  color: inherit !important;
}
:root[data-theme="light"]:not([data-design="pitch"]) .pcoded-navbar .pcoded-submenu > li > a {
  color: rgba(255, 255, 255, 0.75) !important;
}
:root[data-theme="light"]:not([data-design="pitch"]) .pcoded-navbar .pcoded-submenu > li.active > a,
:root[data-theme="light"]:not([data-design="pitch"]) .pcoded-navbar .pcoded-submenu > li > a:hover {
  color: #ffffff !important;
}
:root[data-theme="light"]:not([data-design="pitch"]) .pcoded-navbar .pcoded-inner-navbar .nav-item.pcoded-menu-caption,
:root[data-theme="light"]:not([data-design="pitch"]) .pcoded-navbar .pcoded-menu-caption {
  color: #B8C5D6 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
}
/* The caption text lives in a <label> child whose color is set to
   var(--text-tertiary) — dark slate in light mode, invisible on the navy
   sidebar. Override it to the same light caption color as the container. */
:root[data-theme="light"]:not([data-design="pitch"]) .pcoded-navbar .pcoded-inner-navbar .nav-item.pcoded-menu-caption label,
:root[data-theme="light"]:not([data-design="pitch"]) .pcoded-navbar .pcoded-menu-caption label {
  color: #B8C5D6 !important;
}

/* ========== Typography ========== */
html {
  background-color: var(--bg-base);
}

body {
  font-family: var(--font-sans);
  background-color: var(--bg-base);
  color: var(--text-dark);
  font-size: 14px;
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 0.75rem;
}

:root[data-design="pitch"] :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-display);
  letter-spacing: 0.01em;
}

h5 {
  font-size: 1.25rem;
  font-weight: 600;
}

/* ========== Cards ========== */
.card {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  background: var(--bg-white);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.card:hover {
  box-shadow: var(--shadow-md);
}

.card-header {
  background: var(--bg-white);
  border-bottom: 1px solid var(--border-light);
  padding: 1.25rem 1.5rem;
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
}

.card-header h5 {
  margin-bottom: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-dark);
}

.card-block,
.card-body {
  padding: 1.5rem;
}

/* ========== Buttons ========== */
.btn {
  font-weight: 500;
  font-size: 14px;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-sm);
  border: 1.5px solid transparent;
  transition: all 0.2s ease;
  box-shadow: var(--shadow-sm);
}

.btn-primary {
  background: var(--primary-blue);
  color: var(--on-accent);
  border-color: var(--primary-blue);
}

.btn-primary:hover {
  background: var(--primary-blue-dark);
  border-color: var(--primary-blue-dark);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-outline-primary {
  border: 1.5px solid var(--primary-blue);
  color: var(--primary-blue);
  background: transparent;
  box-shadow: none;
}

.btn-outline-primary:hover {
  background: var(--primary-blue);
  color: var(--on-accent);
  border-color: var(--primary-blue);
}

.btn-success {
  background: var(--success-green);
  color: white;
  border-color: var(--success-green);
}

.btn-success:hover {
  background: var(--success-green-hover);
  border-color: var(--success-green-hover);
}

.btn-danger {
  background: var(--danger-red);
  color: white;
  border-color: var(--danger-red);
}

.btn-danger:hover {
  background: var(--danger-red-hover);
  border-color: var(--danger-red-hover);
}

.btn-outline-success {
  border: 1.5px solid var(--success-green);
  color: var(--success-green);
  background: transparent;
  box-shadow: none;
}

.btn-outline-success:hover {
  background: var(--success-green);
  color: white;
  border-color: var(--success-green);
}

.btn-outline-danger {
  border: 1.5px solid var(--danger-red);
  color: var(--danger-red);
  background: transparent;
  box-shadow: none;
}

.btn-outline-danger:hover {
  background: var(--danger-red);
  color: white;
  border-color: var(--danger-red);
}

.btn i {
  margin-right: 0.375rem;
}

/* ========== Tables ========== */
/* A rounded corner must not cost the scrollbar. `overflow: hidden` here used to
   clip every wide table at the card edge: the columns past it were unreachable
   — no scrollbar, no wheel, no swipe — and a coach on a phone or tablet simply
   lost the right-hand half of the roster, the activities list and the session
   metrics. `overflow-x: auto` rounds the corners just the same (a scroll
   container clips to its border radius) while keeping the content reachable.
   The desktop rule further down (min-width: 992px) used to be the only thing
   restoring the scroll, which is why the loss only showed below that. */
.table-responsive {
  border-radius: var(--radius-lg);
  overflow-x: auto;
}

table.dataTable,
.table {
  border-collapse: separate;
  border-spacing: 0;
}

table.dataTable thead th,
.table thead th {
  background: var(--bg-light);
  color: var(--text-medium);
  font-weight: 600;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 2px solid var(--border-light);
  padding: 1rem 0.75rem;
}

table.dataTable tbody td,
.table tbody td {
  padding: 0.875rem 0.75rem;
  border-bottom: 1px solid var(--border-light);
  color: var(--text-dark);
}

table.dataTable tbody tr:hover,
.table tbody tr:hover {
  background: var(--hover-overlay);   /* rgba(255,255,255,0.06) — dark-safe */
}

/* DataTables specific */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 0.5rem 0.75rem;
  font-size: 14px;
}

.dataTables_wrapper .dataTables_length select:focus,
.dataTables_wrapper .dataTables_filter input:focus {
  outline: none;
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 3px rgba(0, 105, 255, 0.1);
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: var(--radius-sm);
  padding: 0.375rem 0.75rem;
  margin: 0 2px;
  border: 1px solid var(--border-light);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--primary-blue);
  color: var(--on-accent) !important;
  border-color: var(--primary-blue);
}

/* ========== Forms ========== */
.form-control,
.form-select {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 0.625rem 0.875rem;
  font-size: 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 3px rgba(0, 105, 255, 0.1);
  outline: none;
}

.form-label {
  font-weight: 500;
  color: var(--text-medium);
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
}

/* ========== Modals ========== */
.modal-content {
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.modal-header {
  border-bottom: 1px solid var(--border-light);
  padding: 1.5rem;
  background: var(--bg-white);
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
}

.modal-title {
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--text-dark);
}

.modal-body {
  padding: 1.5rem;
}

.modal-footer {
  border-top: 1px solid var(--border-light);
  padding: 1rem 1.5rem;
  background: var(--bg-light);
}

/* ========== Badges & Labels ========== */
.badge {
  font-weight: 500;
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-md);
  font-size: 0.75rem;
}

/* ========== Alerts ========== */
.alert {
  border: none;
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  box-shadow: var(--shadow-sm);
}

.alert-success {
  background: #E6F7ED;
  color: #00732F;
}

.alert-danger {
  background: #FFEBEE;
  color: #C62828;
}

.alert-info {
  background: #E3F2FD;
  color: #01579B;
}

.alert-warning {
  background: #FFF3E0;
  color: #E65100;
}

/* ========== Navigation & Header ========== */
.navbar-brand {
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--text-dark);
}

.pcoded-header {
  background: var(--bg-base) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  box-shadow: none !important;
  min-height: 70px !important;
  height: 70px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.pcoded-header .m-header .b-brand .b-title {
  color: var(--text-primary) !important;
}

.pcoded-header .dropdown-toggle,
.pcoded-header .nav-link,
.pcoded-header a,
.pcoded-header .input-group-text,
.pcoded-header .header-item {
  color: var(--text-secondary) !important;
}

.pcoded-header .collapse.navbar-collapse {
  height: 70px !important;
  min-height: 70px !important;
  align-items: center !important;
}

/* Vendor theme paints the header's collapse block white with a light shadow
   when it is :not(.show) (desktop) — produces a light separator band at the
   sidebar/header junction. Keep it flush with the dark header. */
.pcoded-header > .collapse:not(.show),
.pcoded-header .collapse.navbar-collapse {
  background: transparent !important;
  box-shadow: none !important;
}

.pcoded-header .navbar-nav {
  height: 70px !important;
  align-items: center !important;
}

.pcoded-header .navbar-nav > li {
  line-height: normal !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  height: 70px !important;
  display: inline-flex !important;
  align-items: center !important;
}

.pcoded-header .top-context-wrap {
  height: 70px !important;
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;
}

.pcoded-header .team-selector-dropdown,
.pcoded-header .context-switcher-btn {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  align-self: center !important;
}

.pcoded-header .team-selector-dropdown {
  display: inline-flex !important;
  align-items: center !important;
}

.pcoded-header .top-context-label {
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
}

/* vendor override — keep dark text in legacy dropdowns, but exclude our own ath-user-menu */
.pcoded-header .dropdown-menu:not(.ath-user-menu) a {
  color: var(--text-dark) !important;
}

/* ========== Sidebar ========== */
/* Sidebar blends into the page — same bg-base, separated only by a subtle right border */
.pcoded-navbar {
  background: var(--bg-base) !important;
  border-right: 1px solid var(--border-subtle) !important;
  box-shadow: none !important;
}

.pcoded-navbar .navbar-content {
  background: var(--bg-base) !important;
}

/* Nav items — inactive */
.pcoded-navbar .pcoded-inner-navbar .nav-item .nav-link {
  color: var(--text-secondary) !important;
  background: transparent !important;
  border-left: 2px solid transparent !important;
  border-radius: 8px !important;
  margin: 2px 8px !important;
  padding: 10px 16px !important;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease !important;
}

/* Nav items — hover */
.pcoded-navbar .pcoded-inner-navbar .nav-item .nav-link:hover {
  background: var(--hover-overlay) !important;
  color: var(--text-primary) !important;
  border-left-color: transparent !important;
}

/* Nav items — active: soft accent fill + left accent border */
.pcoded-navbar .pcoded-inner-navbar .nav-item.active .nav-link,
.pcoded-navbar .pcoded-inner-navbar .nav-item .nav-link.active {
  background: var(--accent-soft-bg) !important;   /* rgba(59,130,246,.12) in classic dark */
  color: var(--accent) !important;
  border-left-color: var(--accent) !important;
  font-weight: 600 !important;
}

/* Icons inherit text color */
.pcoded-navbar .pcoded-inner-navbar .nav-item .nav-link .pcoded-micon,
.pcoded-navbar .pcoded-inner-navbar .nav-item .nav-link .pcoded-mtext {
  color: inherit !important;
}

/* Logo / brand area — same bg as sidebar, no separator below */
.navbar-brand,
.pcoded-navbar .navbar-brand {
  background: var(--bg-base) !important;
  border-bottom: none !important;
  height: 70px !important;
  min-height: 70px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: inline-flex;
  align-items: center;
}

.navbar-brand .b-brand,
.pcoded-navbar .b-brand {
  color: var(--text-primary) !important;
  height: 70px;
  display: inline-flex;
  align-items: center;
}

.pcoded-navbar .header-logo {
  background: var(--bg-base) !important;
  height: 70px !important;
  min-height: 70px !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}

/* Submenu styling */
.pcoded-navbar .pcoded-submenu > li > a {
  color: var(--text-secondary) !important;
}

.pcoded-navbar .pcoded-submenu > li.active > a,
.pcoded-navbar .pcoded-submenu > li > a:hover {
  color: var(--text-primary) !important;
}

/* Section labels (ANALÝZY, POROVNÁNÍ TÝMŮ, OSTATNÍ) — compact, tertiary, no border */
.pcoded-navbar .pcoded-inner-navbar .nav-item.pcoded-menu-caption,
.pcoded-navbar .pcoded-menu-caption {
  color: var(--text-tertiary) !important;
  background: transparent !important;
  border-top: none !important;
  border-bottom: none !important;
  padding: 20px 24px 6px !important;
  margin-top: 0 !important;
}

.pcoded-navbar .pcoded-inner-navbar .nav-item.pcoded-menu-caption label,
.pcoded-navbar .pcoded-menu-caption label {
  color: var(--text-tertiary) !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin: 0 !important;
}

.pcoded-navbar .pcoded-inner-navbar .nav-item.pcoded-menu-caption:first-child {
  padding-top: 12px !important;
}

/* Menu item text — size and weight from .pcoded-mtext */
.pcoded-navbar .pcoded-inner-navbar .nav-item .nav-link .pcoded-mtext {
  font-size: 0.875rem !important;
  font-weight: 500 !important;
}

/* ========== Status Indicators ========== */
.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 0.5rem;
}

.status-dot.success {
  background: var(--success-green);
}

.status-dot.danger {
  background: var(--danger-red);
}

.status-dot.warning {
  background: var(--warning-orange);
}

/* ========== Utilities ========== */
.text-muted {
  color: var(--text-light) !important;
}

.border-light {
  border-color: var(--border-light) !important;
}

.bg-light-custom {
  background: var(--bg-light) !important;
}

/* ========== Loading States ========== */
.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  z-index: 1000;
}

/* ========== Icon Improvements ========== */
.fas, .far, .fab {
  margin-right: 0.5rem;
}

/* ========== Spacing Improvements ========== */
.mb-3 {
  margin-bottom: 1rem !important;
}

.mb-4 {
  margin-bottom: 1.5rem !important;
}

.mt-3 {
  margin-top: 1rem !important;
}

.mt-4 {
  margin-top: 1.5rem !important;
}

/* ========== Responsive Adjustments ========== */
@media (max-width: 768px) {
  .card-header {
    padding: 1rem;
  }
  
  .card-block,
  .card-body {
    padding: 1rem;
  }
  
  .btn {
    padding: 0.5rem 0.875rem;
    font-size: 13px;
  }
}

/* ========== Dark Mode Adjustments ========== */
[data-theme="dark"] {
  --text-dark: #E4E7EB;
  --text-medium: #CBD2D9;
  --text-light: #9AA5B1;
  --border-light: #3E4C59;
  --bg-light: #1F2933;
  --bg-white: #323F4B;
}

/* ========== Custom Scrollbars — Global ==========
   Applies to every scrollable container in the product.
   Keeps scrollbars visually subtle and consistent with
   the dark design system. Dark track = transparent so
   the container background shows through; thumb uses
   white at low opacity with a border-gap trick for polish.
   ================================================= */

/* Chrome, Edge, Safari (WebKit) */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 8px;
  /* 2px transparent border creates optical gap around thumb */
  border: 2px solid transparent;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:active {
  background: var(--scrollbar-thumb-active);
  background-clip: padding-box;
}

::-webkit-scrollbar-corner {
  background: transparent;
}

/* Firefox — only supports width category + color pair */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}

/* ==========================================================================
   Responsive layout — desktop resolutions (laptops → ultrawide monitors)
   ==========================================================================
   Problem: the base template gives the content area a fixed 30px padding and
   NO max-width, so the same page looks cramped on a 1366px laptop yet stretches
   edge-to-edge on a 27"/ultrawide monitor — long line lengths, sparse cards and
   wide tables become hard to scan ("neprehledne").

   Fix (desktop only — phones/tablets <= 991px keep the template's own behaviour):
   1. Fluid outer padding that scales with the viewport instead of a fixed 30px.
   2. A centred, capped content column so big monitors stay readable while small
      laptops use the full width they have.
   Design system reference: "Page max-width: 1440px or fluid. Don't go wider."
   We allow a little extra (1600px) because this is a data/table-heavy product.
   These are layout-only rules (padding/width) — no colours, tokens untouched.
   ========================================================================== */

@media (min-width: 992px) {
  /* Breathing room scales with the screen: ~22px on a small laptop,
     up to 48px on large desktops. */
  .pcoded-content {
    padding: clamp(20px, 2.2vw, 48px);
  }

  /* Keep the content column centred and capped so wide monitors don't stretch
     rows/cards into an unreadable layout. Small/medium laptops are narrower
     than the cap, so they keep using their full available width. */
  .page-wrapper {
    width: 100%;
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Tables are the widest content — let them scroll inside their card on
     narrower laptops instead of breaking the page layout. (`.table-responsive`
     now scrolls at every width; this keeps the DataTables wrapper in step.) */
  .page-wrapper .table-responsive,
  .page-wrapper .dataTables_wrapper {
    width: 100%;
    overflow-x: auto;
  }
}

/* Mid-size laptops (~1280–1440): trim the column cap slightly so the centred
   content isn't dwarfed by empty side margins. */
@media (min-width: 1280px) and (max-width: 1599px) {
  .page-wrapper {
    max-width: 100%;
  }
}

/* Large / 4K monitors: hold the readable column; extra space becomes margin
   rather than ever-wider rows. */
@media (min-width: 2200px) {
  .page-wrapper {
    max-width: 1680px;
  }
}

/* --------------------------------------------------------------------------
   Analytics chart sections (Analýzy: load / weekly / mesocycle / players and
   their comparison variants). Those pages lay charts out in a single full-width
   column (`.chart-sections { display:flex; flex-direction:column }`). On a wide
   monitor each chart becomes a sparse, over-stretched strip ("neprehledne").
   Render them 2-up on desktop so every chart keeps a dense, readable shape.
   The report pages emit their <style> in {% block extrastyle %}, which loads
   BEFORE this file, so this same-specificity rule wins — no !important needed.
   -------------------------------------------------------------------------- */
@media (min-width: 1200px) {
  .chart-sections {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: start;
  }
}