/* ============================================================
   ATHLETICS-IL — Design Tokens
   Jump Monk Studio
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap');

:root {
  --font-brand: 'Space Mono', monospace;
}

/* ============================================================
   DARK THEME (default)
   ============================================================ */
:root,
[data-theme="dark"] {

  /* Backgrounds */
  --color-bg:             #0c1320;
  --color-surface:        #15203a;
  --color-border:         #223150;

  /* Brand strokes — three weights matching the logo mark */
  --color-stroke-faint:   #5aa6e0;   /* 45% opacity in logo use */
  --color-stroke-mid:     #5aa6e0;   /* 70% opacity in logo use */
  --color-stroke-strong:  #5aa6e0;   /* 100% opacity, lead stroke */
  --color-glow:           rgba(90, 166, 224, 0.18);

  /* Text */
  --color-text-primary:   #eaf3fb;
  --color-text-muted:     #6f93b8;
  --color-text-disabled:  #2f4060;
  --color-text-link:      #5aa6e0;

  /* UI states */
  --color-focus:          #5aa6e0;
  --color-hover-bg:       #15203a;
  --color-hover-stroke:   #5aa6e0;
  --color-disabled-bg:    #0c1320;
  --color-disabled-stroke:#223150;

  /* Error / destructive */
  --color-error:          #e07070;
  --color-error-bg:       #1f0d0d;

  /* Logo wordmark */
  --color-logo-text:      #eaf3fb;
}

/* ============================================================
   LIGHT THEME
   ============================================================ */
[data-theme="light"] {

  /* Backgrounds */
  --color-bg:             #f4f8fc;
  --color-surface:        #e6eef7;
  --color-border:         #cfe2f2;

  /* Brand strokes */
  --color-stroke-faint:   #1f5fa8;
  --color-stroke-mid:     #1f5fa8;
  --color-stroke-strong:  #1f5fa8;
  --color-glow:           rgba(31, 95, 168, 0.15);

  /* Text */
  --color-text-primary:   #0e2a4a;
  --color-text-muted:     #3d6690;
  --color-text-disabled:  #aac3dc;
  --color-text-link:      #1f5fa8;

  /* UI states */
  --color-focus:          #1f5fa8;
  --color-hover-bg:       #e6eef7;
  --color-hover-stroke:   #1f5fa8;
  --color-disabled-bg:    #f4f8fc;
  --color-disabled-stroke:#cfe2f2;

  /* Error / destructive */
  --color-error:          #c04444;
  --color-error-bg:       #fff0f0;

  /* Logo wordmark */
  --color-logo-text:      #0e2a4a;
}

/* ============================================================
   TYPOGRAPHY SCALE
   ============================================================ */
:root {
  --text-xs:   0.625rem;   /*  10px */
  --text-sm:   0.75rem;    /*  12px */
  --text-base: 0.875rem;   /*  14px */
  --text-md:   1rem;       /*  16px */
  --text-lg:   1.25rem;    /*  20px */
  --text-xl:   1.5rem;     /*  24px */
  --text-2xl:  2rem;       /*  32px */
  --text-3xl:  2.375rem;   /*  38px */

  --font-regular: 400;
  --font-bold:    700;

  --tracking-wide:   0.14em;
  --tracking-wider:  0.3em;
  --tracking-widest: 0.2em;
}

/* ============================================================
   COMPONENT TOKENS
   ============================================================ */
:root {
  --radius-sm:  4px;
  --radius-md:  6px;
  --radius-lg:  8px;
  --radius-xl:  10px;

  --stroke-thin:   1px;
  --stroke-base:   1.6px;
  --stroke-thick:  2.4px;

  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;
}

/* ============================================================
   UTILITY CLASSES
   ============================================================ */

.ail-bg      { background-color: var(--color-bg); }
.ail-surface { background-color: var(--color-surface); }

.ail-text        { color: var(--color-text-primary); font-family: var(--font-brand); }
.ail-text-muted  { color: var(--color-text-muted);   font-family: var(--font-brand); }
.ail-text-link   { color: var(--color-text-link);    font-family: var(--font-brand); }

.ail-wordmark {
  font-family: var(--font-brand);
  font-weight: var(--font-bold);
  font-size: var(--text-3xl);
  letter-spacing: var(--tracking-wide);
  color: var(--color-logo-text);
}

.ail-card {
  background-color: var(--color-surface);
  border: var(--stroke-thin) solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.ail-input {
  background-color: var(--color-bg);
  border: var(--stroke-thin) solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  font-family: var(--font-brand);
  font-size: var(--text-base);
  padding: var(--space-2) var(--space-3);
  transition: border-color 150ms ease;
}
.ail-input:hover  { border-color: var(--color-hover-stroke); }
.ail-input:focus  { outline: none; border-color: var(--color-focus); box-shadow: 0 0 0 2px var(--color-glow); }
.ail-input:disabled {
  background-color: var(--color-disabled-bg);
  border-color: var(--color-disabled-stroke);
  color: var(--color-text-disabled);
  cursor: not-allowed;
}
.ail-input.error { border-color: var(--color-error); background-color: var(--color-error-bg); }

.ail-btn-primary {
  background-color: var(--color-stroke-strong);
  color: var(--color-bg);
  font-family: var(--font-brand);
  font-weight: var(--font-bold);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-6);
  cursor: pointer;
  transition: opacity 150ms ease;
}
.ail-btn-primary:hover { opacity: 0.85; }
.ail-btn-primary:focus { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.ail-btn-ghost {
  background-color: transparent;
  color: var(--color-stroke-strong);
  font-family: var(--font-brand);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  border: var(--stroke-thin) solid var(--color-stroke-strong);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-6);
  cursor: pointer;
  transition: opacity 150ms ease;
}
.ail-btn-ghost:hover { opacity: 0.8; }
.ail-btn-ghost:focus { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* ============================================================
   APP STYLES
   ============================================================ */

:root,
[data-theme="light"] {
  --bg-primary: var(--color-bg);
  --bg-secondary: var(--color-surface);
  --bg-hover: var(--color-hover-bg);
  --bg-stripe: var(--color-surface);
  --text-primary: var(--color-text-primary);
  --border-color: var(--color-border);
  --color-primary: var(--color-stroke-strong);
}

[data-theme="dark"] {
  --bg-primary: var(--color-bg);
  --bg-secondary: var(--color-surface);
  --bg-hover: var(--color-hover-bg);
  --bg-stripe: var(--color-surface);
  --text-primary: var(--color-text-primary);
  --border-color: var(--color-border);
  --color-primary: var(--color-stroke-strong);
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transition: background-color 0.3s, color 0.3s;
}

.navbar-item img {
  display: block;
}

/* Logo SVGs are drawn for a specific background (dark stroke on dark bg,
   deep blue stroke on light bg) — replace Bulma's teal is-primary so the
   navbar background always matches what the logo assumes. */
.navbar.is-primary {
  background-color: var(--bg-primary);
}

.navbar.is-primary .navbar-item,
.navbar.is-primary .navbar-link,
.navbar.is-primary .navbar-burger {
  color: var(--text-primary);
}

.navbar.is-primary .navbar-item:hover,
.navbar.is-primary .navbar-link:hover,
.navbar.is-primary a.navbar-item.is-active,
.navbar.is-primary .navbar-link.is-active {
  background-color: var(--bg-hover);
  color: var(--text-primary);
}

.navbar.is-primary .navbar-burger span {
  background-color: var(--text-primary);
}

[data-theme="dark"] .box,
[data-theme="dark"] .card,
[data-theme="dark"] .modal-card {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
}

[data-theme="dark"] .table {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
}

[data-theme="dark"] .table td,
[data-theme="dark"] .table th {
  border-color: var(--border-color);
  color: var(--text-primary);
}

[data-theme="dark"] .table.is-hoverable tbody tr:not(.is-selected):hover {
  background-color: var(--bg-hover);
}

[data-theme="dark"] .table.is-striped tbody tr:not(.is-selected):nth-child(even) {
  background-color: var(--bg-stripe);
}

[data-theme="dark"] .input,
[data-theme="dark"] .select select,
[data-theme="dark"] .textarea {
  background-color: var(--bg-secondary);
  border-color: var(--border-color);
  color: var(--text-primary);
}

[data-theme="dark"] .label {
  color: var(--text-primary);
}

[data-theme="dark"] .title,
[data-theme="dark"] .subtitle {
  color: var(--text-primary);
}

[data-theme="dark"] .modal-card-head,
[data-theme="dark"] .modal-card-foot {
  background-color: var(--bg-hover);
  border-color: var(--border-color);
}

[data-theme="dark"] .modal-card-title {
  color: var(--text-primary);
}

.clickable {
  cursor: pointer;
}

.clickable:hover {
  background-color: var(--bg-secondary);
}

.clickable:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

.clickable:focus:not(:focus-visible) {
  outline: none;
}

.navbar-item.is-active {
  font-weight: bold;
}

.performance {
  font-variant-numeric: tabular-nums;
}

[dir="rtl"] .table th,
[dir="rtl"] .table td {
  text-align: right !important;
}

/* Bulma's .navbar-dropdown.is-right anchors right:0/left:auto, growing the
   dropdown leftward — correct in LTR navbars, but our navbar-end items sit
   near the left edge of the screen in RTL, pushing the dropdown off-screen. */
[dir="rtl"] .navbar-dropdown.is-right {
  right: auto;
  left: 0;
}

.toggle-group {
  display: flex;
  gap: 0.25rem;
  align-items: center;
}

.toggle-icon {
  cursor: pointer;
  padding: 0.5rem;
  font-size: 1.25rem;
  background: none;
  border: none;
  border-radius: 4px;
}

.toggle-icon:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.toggle-icon:focus:not(:focus-visible) {
  outline: none;
}

/* Mobile menu dark mode */
[data-theme="dark"] .navbar-menu {
  background-color: var(--bg-secondary);
}

[data-theme="dark"] .navbar-menu .navbar-item,
[data-theme="dark"] .navbar-menu .navbar-link {
  color: var(--text-primary);
}

[data-theme="dark"] .navbar-menu .navbar-item:hover,
[data-theme="dark"] .navbar-menu .navbar-link:hover {
  background-color: var(--bg-hover);
}

[data-theme="dark"] .navbar-burger span {
  background-color: var(--text-primary);
}

[data-theme="dark"] .card-header {
  background-color: var(--bg-hover);
}

[data-theme="dark"] .card-header-title {
  color: var(--text-primary);
}

[data-theme="dark"] .card-header-icon {
  color: var(--text-primary);
}

[data-theme="dark"] .card-content {
  background-color: var(--bg-secondary);
}

[dir="rtl"] .card-header-title .mr-3 {
  margin-right: 0 !important;
  margin-left: 1rem;
}

/* Toggle switch */
.switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  gap: 0.5rem;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.switch-slider {
  position: relative;
  width: 2.5rem;
  height: 1.4rem;
  background-color: var(--border-color);
  border-radius: 1rem;
  transition: background-color 0.2s;
}

.switch-slider::before {
  content: "";
  position: absolute;
  height: 1rem;
  width: 1rem;
  left: 0.2rem;
  bottom: 0.2rem;
  background-color: white;
  border-radius: 50%;
  transition: transform 0.2s;
}

.switch input:checked + .switch-slider {
  background-color: var(--color-primary);
}

.switch input:checked + .switch-slider::before {
  transform: translateX(1.1rem);
}

[dir="rtl"] .switch input:checked + .switch-slider::before {
  transform: translateX(-1.1rem);
}

[dir="rtl"] .switch-slider::before {
  left: auto;
  right: 0.2rem;
}

/* Searchable Select */
.searchable-select .dropdown-menu {
  display: none;
}

.searchable-select.is-active .dropdown-menu {
  display: block;
}

.searchable-select .dropdown-trigger {
  width: 100%;
}

.searchable-select .dropdown-content {
  max-width: 100%;
}

[data-theme="dark"] .dropdown-content {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
}

[data-theme="dark"] .dropdown-item {
  color: var(--text-primary);
}

[data-theme="dark"] .dropdown-item:hover {
  background-color: var(--bg-hover);
}

[data-theme="dark"] .dropdown-item.is-active {
  background-color: var(--color-primary);
  color: white;
}

[data-theme="dark"] .dropdown-divider {
  background-color: var(--border-color);
}

[data-theme="dark"] .has-background-light {
  background-color: var(--bg-hover) !important;
  color: var(--text-primary) !important;
}

/* Expanded rows in tables */
.expanded-row {
  background-color: var(--bg-secondary);
}

/* Utility classes */
.is-fullwidth {
  width: 100%;
}

.ail-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.35rem;
  padding: var(--space-4) var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.ail-footer img {
  display: block;
  height: 12px;
  width: auto;
  opacity: 0.85;
}