/*
 * OptiWake Brand Theme v1
 * Palette:
 *   Blue      #0057B8
 *   Navy      #0B1D3A
 *   Turquoise #00D4C6
 *   White     #FFFFFF
 */

:root {
  --ow-blue: #0057B8;
  --ow-blue-dark: #004695;
  --ow-navy: #0B1D3A;
  --ow-navy-soft: #173756;
  --ow-turquoise: #00D4C6;
  --ow-turquoise-dark: #00AFA5;
  --ow-white: #FFFFFF;

  --ow-surface: #FFFFFF;
  --ow-surface-soft: #F3F8FB;
  --ow-surface-blue: #EAF4FC;
  --ow-border: #C7D9E5;
  --ow-border-strong: #9EBACB;
  --ow-text: #0B1D3A;
  --ow-text-muted: #5C7486;
  --ow-success: #00A885;
  --ow-warning: #EAA21A;
  --ow-danger: #D94B55;

  --ow-radius-xs: 7px;
  --ow-radius-sm: 10px;
  --ow-radius-md: 14px;
  --ow-radius-lg: 18px;
  --ow-radius-xl: 24px;

  --ow-shadow-sm: 0 2px 8px rgba(11, 29, 58, 0.10);
  --ow-shadow-md: 0 8px 24px rgba(11, 29, 58, 0.14);
  --ow-shadow-lg: 0 16px 42px rgba(11, 29, 58, 0.18);

  --ow-focus-ring: 0 0 0 3px rgba(0, 212, 198, 0.28);
  --ow-transition: 160ms ease;
}

html {
  color-scheme: light;
}

body {
  color: var(--ow-text);
  background: linear-gradient(180deg, #F8FCFE 0%, #EDF7FA 100%);
  font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: rgba(0, 212, 198, 0.28);
  color: var(--ow-navy);
}

a {
  color: var(--ow-blue);
  text-decoration-color: rgba(0, 87, 184, 0.36);
  text-underline-offset: 2px;
}

a:hover {
  color: var(--ow-blue-dark);
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
[role="button"] {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
  outline: none;
  box-shadow: var(--ow-focus-ring);
}

.coach-analysis-panel,
.leg-analysis-panel,
[class*="leg-runs"][class*="panel"],
[class*="simulator-status"][class*="panel"] {
  color: var(--ow-text) !important;
  background: var(--ow-surface) !important;
  border: 1px solid var(--ow-border) !important;
  border-radius: var(--ow-radius-lg) !important;
  box-shadow: var(--ow-shadow-lg) !important;
  overflow: hidden;
}

.coach-analysis-panel > header,
.leg-analysis-panel > header,
.coach-analysis-panel [class*="header"],
.leg-analysis-panel [class*="header"] {
  background: linear-gradient(135deg, #FFFFFF 0%, #F0F8FD 100%) !important;
  border-bottom: 1px solid var(--ow-border) !important;
  color: var(--ow-navy) !important;
}

.coach-analysis-panel h1,
.coach-analysis-panel h2,
.coach-analysis-panel h3,
.leg-analysis-panel h1,
.leg-analysis-panel h2,
.leg-analysis-panel h3 {
  color: var(--ow-navy);
  letter-spacing: -0.015em;
}

.coach-analysis-panel [class*="metric"],
.coach-analysis-panel [class*="stat"],
.leg-analysis-panel [class*="metric"],
.leg-analysis-panel [class*="stat"] {
  background: linear-gradient(180deg, #FFFFFF 0%, var(--ow-surface-soft) 100%) !important;
  border: 1px solid #D7E5ED !important;
  border-radius: var(--ow-radius-md) !important;
  box-shadow: 0 1px 2px rgba(11, 29, 58, 0.04);
}

.coach-analysis-panel [class*="label"],
.leg-analysis-panel [class*="label"],
.coach-analysis-panel small,
.leg-analysis-panel small {
  color: var(--ow-text-muted);
}

.coach-analysis-panel [class*="badge"],
.coach-analysis-panel [class*="chip"],
.leg-analysis-panel [class*="badge"],
.leg-analysis-panel [class*="chip"] {
  background: var(--ow-surface-blue) !important;
  border: 1px solid #BBD6E8 !important;
  color: var(--ow-navy) !important;
  border-radius: 999px !important;
  font-weight: 800;
}

.coach-analysis-panel button,
.leg-analysis-panel button,
[class*="leg-runs"][class*="panel"] button {
  min-height: 34px;
  border: 1px solid var(--ow-border-strong) !important;
  border-radius: var(--ow-radius-sm) !important;
  background: #F7FBFD !important;
  color: var(--ow-navy) !important;
  font-weight: 750;
  transition:
    background-color var(--ow-transition),
    border-color var(--ow-transition),
    color var(--ow-transition),
    box-shadow var(--ow-transition),
    transform var(--ow-transition);
}

.coach-analysis-panel button:hover,
.leg-analysis-panel button:hover,
[class*="leg-runs"][class*="panel"] button:hover {
  background: var(--ow-surface-blue) !important;
  border-color: var(--ow-blue) !important;
}

.coach-analysis-panel button:active,
.leg-analysis-panel button:active,
[class*="leg-runs"][class*="panel"] button:active {
  transform: translateY(1px);
}

.coach-analysis-panel button.active,
.leg-analysis-panel button.active,
.coach-analysis-panel button[aria-pressed="true"],
.leg-analysis-panel button[aria-pressed="true"] {
  background: linear-gradient(135deg, var(--ow-blue) 0%, var(--ow-blue-dark) 100%) !important;
  border-color: var(--ow-blue) !important;
  color: var(--ow-white) !important;
  box-shadow: 0 5px 14px rgba(0, 87, 184, 0.24);
}

.coach-analysis-panel button[aria-label*="zamknij" i],
.leg-analysis-panel button[aria-label*="zamknij" i],
.coach-analysis-panel button[title*="zamknij" i],
.leg-analysis-panel button[title*="zamknij" i],
.coach-analysis-panel .close,
.leg-analysis-panel .close {
  background: var(--ow-navy) !important;
  border-color: var(--ow-navy) !important;
  color: var(--ow-white) !important;
}

.coach-analysis-panel button[aria-label*="odśwież" i],
.leg-analysis-panel button[aria-label*="odśwież" i],
.coach-analysis-panel button[title*="odśwież" i],
.leg-analysis-panel button[title*="odśwież" i] {
  background: var(--ow-surface-blue) !important;
  border-color: #AFCEDF !important;
  color: var(--ow-blue) !important;
}

.coach-analysis-launcher,
.leg-analysis-launcher,
.racelab-control-button,
.opti-mobile-tracker-button {
  border: 1px solid var(--ow-border-strong) !important;
  border-radius: var(--ow-radius-sm) !important;
  background: var(--ow-white) !important;
  color: var(--ow-navy) !important;
  font-weight: 850 !important;
  letter-spacing: 0.01em;
  box-shadow: var(--ow-shadow-sm);
  transition:
    background-color var(--ow-transition),
    border-color var(--ow-transition),
    color var(--ow-transition),
    box-shadow var(--ow-transition),
    transform var(--ow-transition);
}

.coach-analysis-launcher:hover,
.leg-analysis-launcher:hover,
.racelab-control-button:hover,
.opti-mobile-tracker-button:hover {
  background: var(--ow-surface-blue) !important;
  border-color: var(--ow-blue) !important;
}

.racelab-control-button.active,
.racelab-control-button[aria-pressed="true"] {
  background: linear-gradient(135deg, var(--ow-blue) 0%, var(--ow-blue-dark) 100%) !important;
  border-color: var(--ow-blue) !important;
  color: var(--ow-white) !important;
  box-shadow: 0 4px 13px rgba(0, 87, 184, 0.28);
}

#racelab-run-toggle {
  background: var(--ow-navy) !important;
  border-color: var(--ow-navy) !important;
  color: var(--ow-white) !important;
}

#racelab-run-toggle:hover {
  background: var(--ow-navy-soft) !important;
}

#opti-mobile-tools-drawer {
  --drawer-blue-soft: #EAF4FC;
}

.opti-mobile-tools-panel {
  color: var(--ow-text) !important;
  background: linear-gradient(180deg, #FFFFFF 0%, #F3F9FC 100%) !important;
  border-right: 1px solid var(--ow-border) !important;
  box-shadow: 10px 0 32px rgba(11, 29, 58, 0.22) !important;
}

.opti-mobile-tools-header {
  border-bottom: 1px solid var(--ow-border) !important;
}

.opti-mobile-tools-title {
  color: var(--ow-navy) !important;
  font-weight: 900 !important;
  letter-spacing: 0.055em !important;
}

.opti-mobile-tools-section-title {
  color: var(--ow-blue) !important;
  font-weight: 900 !important;
  letter-spacing: 0.09em !important;
}

.opti-mobile-tools-toggle {
  background: linear-gradient(180deg, #FFFFFF 0%, #EAF5FB 100%) !important;
  border-color: #AFC8D8 !important;
  color: var(--ow-blue) !important;
  box-shadow: 4px 3px 14px rgba(11, 29, 58, 0.18) !important;
}

#opti-mobile-tools-drawer.open .opti-mobile-tools-toggle {
  background: var(--ow-navy) !important;
  border-color: var(--ow-navy) !important;
  color: var(--ow-white) !important;
}

.opti-mobile-tools-close {
  background: var(--ow-navy) !important;
  border-color: var(--ow-navy) !important;
  color: var(--ow-white) !important;
}

.opti-mobile-tools-backdrop {
  background: rgba(11, 29, 58, 0.28) !important;
  backdrop-filter: blur(1.5px);
}

.opti-mobile-header-wind {
  width: clamp(128px, 26vw, 152px) !important;
  min-width: 128px !important;
  max-width: 152px !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  padding: 4px 7px !important;
  gap: 6px !important;
  background: linear-gradient(135deg, #FFFFFF 0%, #EFF8FD 100%) !important;
  border: 1px solid #BBD2E1 !important;
  border-radius: 13px !important;
  box-shadow: 0 2px 8px rgba(11, 29, 58, 0.08) !important;
}

.opti-mobile-header-wind svg,
.opti-mobile-header-wind img,
.opti-mobile-header-wind canvas,
.opti-mobile-header-wind [class*="compass"],
.opti-mobile-header-wind [class*="wind-icon"] {
  width: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
}

.opti-mobile-header-wind strong,
.opti-mobile-header-wind [class*="direction"],
.opti-mobile-header-wind [class*="degree"] {
  color: var(--ow-navy) !important;
  font-size: 19px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.opti-mobile-header-wind small,
.opti-mobile-header-wind [class*="speed"] {
  color: var(--ow-blue) !important;
  font-size: 10px !important;
  font-weight: 900 !important;
}

:is(.mobile-bottom-nav, .mobile-shell-nav, .app-mobile-nav, nav.mobile-nav) {
  background: rgba(255, 255, 255, 0.98) !important;
  border-top: 1px solid var(--ow-border) !important;
  border-radius: 20px 20px 0 0 !important;
  box-shadow: 0 -8px 24px rgba(11, 29, 58, 0.10) !important;
}

:is(.mobile-bottom-nav, .mobile-shell-nav, .app-mobile-nav, nav.mobile-nav) button {
  color: var(--ow-text-muted) !important;
  border: 1px solid transparent !important;
  border-radius: 14px !important;
  background: transparent !important;
  transition:
    color var(--ow-transition),
    background-color var(--ow-transition),
    border-color var(--ow-transition);
}

:is(.mobile-bottom-nav, .mobile-shell-nav, .app-mobile-nav, nav.mobile-nav) button.active,
:is(.mobile-bottom-nav, .mobile-shell-nav, .app-mobile-nav, nav.mobile-nav) button[aria-selected="true"] {
  color: var(--ow-blue) !important;
  background: linear-gradient(180deg, #EEF8FD 0%, #E4F2FA 100%) !important;
  border-color: #A9CBE0 !important;
}

:is(.layout-sidebar, .app-sidebar, .desktop-sidebar, .left-sidebar) {
  color: var(--ow-text);
  background: linear-gradient(180deg, #FFFFFF 0%, #F2F8FB 100%);
  border-right: 1px solid var(--ow-border);
  box-shadow: 7px 0 24px rgba(11, 29, 58, 0.08);
}

:is(.layout-sidebar, .app-sidebar, .desktop-sidebar, .left-sidebar) h1,
:is(.layout-sidebar, .app-sidebar, .desktop-sidebar, .left-sidebar) h2,
:is(.layout-sidebar, .app-sidebar, .desktop-sidebar, .left-sidebar) h3 {
  color: var(--ow-navy);
}

.leaflet-control-zoom a {
  color: var(--ow-navy) !important;
  background: rgba(255, 255, 255, 0.96) !important;
  border-color: var(--ow-border) !important;
}

.leaflet-control-zoom a:hover {
  color: var(--ow-blue) !important;
  background: var(--ow-surface-blue) !important;
}

.leaflet-popup-content-wrapper {
  color: var(--ow-text) !important;
  background: var(--ow-white) !important;
  border: 1px solid var(--ow-border) !important;
  border-radius: var(--ow-radius-md) !important;
  box-shadow: var(--ow-shadow-md) !important;
}

.leaflet-popup-tip {
  background: var(--ow-white) !important;
  box-shadow: 2px 2px 4px rgba(11, 29, 58, 0.10) !important;
}

.leaflet-tooltip {
  color: var(--ow-white) !important;
  background: var(--ow-navy) !important;
  border: 1px solid rgba(255, 255, 255, 0.24) !important;
  border-radius: 999px !important;
  box-shadow: 0 3px 10px rgba(11, 29, 58, 0.22) !important;
  font-weight: 850;
}

.leaflet-control-attribution {
  color: var(--ow-text-muted) !important;
  background: rgba(255, 255, 255, 0.78) !important;
  border-radius: 5px !important;
}

input,
select,
textarea {
  color: var(--ow-text);
  background: var(--ow-white);
  border: 1px solid var(--ow-border-strong);
  border-radius: var(--ow-radius-sm);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--ow-turquoise);
}

table {
  border-color: var(--ow-border);
}

thead th {
  color: var(--ow-navy);
  background: var(--ow-surface-blue);
  border-bottom: 1px solid var(--ow-border-strong);
}

tbody tr:hover {
  background: #F5FAFD;
}

* {
  scrollbar-width: thin;
  scrollbar-color: #7F9AAE #EAF2F7;
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: #EAF2F7;
}

*::-webkit-scrollbar-thumb {
  background: #7F9AAE;
  border: 2px solid #EAF2F7;
  border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--ow-blue);
}

@media (max-width: 760px) {
  .coach-analysis-panel,
  .leg-analysis-panel {
    border-radius: 16px !important;
    box-shadow: 0 12px 32px rgba(11, 29, 58, 0.20) !important;
  }

  .coach-analysis-panel button,
  .leg-analysis-panel button {
    min-height: 34px;
  }

  .opti-mobile-tools-panel {
    padding: 12px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}