/* ==========================================================================
   Neste avgang - Styles
   BEM methodology with CSS custom properties
   ========================================================================== */

/* --------------------------------------------------------------------------
   Custom properties
   -------------------------------------------------------------------------- */
:root {
  /* Colors */
  --color-primary: #0066cc;
  --color-primary-hover: #0052a3;
  --color-secondary: #6b7280;
  --color-danger: #dc2626;
  --color-danger-hover: #b91c1c;
  --color-success: #0a5a28;
  --color-warning: #bc7700;

  --color-text: #1f2937;
  --color-text-muted: #6b7280;
  --color-background: #FDF6ED;
  --color-surface: #FDF6ED;
  --color-border: #e5e7eb;
  --color-sidebar: #2e4842;
  --color-sidebar-text: #FDF6ED;
  --color-sidebar-muted: #a8b8b4;
  --color-sidebar-hover: #3d5a52;
  --color-sidebar-active: #0066cc;

  /* Transport mode colors */
  --color-bus: #b85c38;
  --color-rail: #17618C;
  --color-metro: #c17f3e;
  --color-tram: #3d7a6e;
  --color-water: #4a8fa8;
  --color-air: #7a6b8a;

  /* Spacing scale (multiples of 0.25rem) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  /* Typography */
  --font-family: 'Nunito Sans', sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.4rem;
  --font-size-2xl: 1.65rem;

  /* Border radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

  /* Focus ring */
  --focus-ring: 0 0 0 3px rgba(0, 102, 204, 0.4);

  /* Layout */
  --sidebar-width: 16rem;
}

/* --------------------------------------------------------------------------
   Base styles
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 100%;
}

body {
  margin: 0;
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: 1.5;
  color: var(--color-text);
  background-color: var(--color-background);
}

.visually-hidden,
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.layout {
  display: flex;
  min-height: 100dvh;

  &.is-fullscreen .sidebar,
  &.is-empty .sidebar {
    display: none;
  }

  &.is-fullscreen .main,
  &.is-empty .main {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   Sidebar
   -------------------------------------------------------------------------- */
.sidebar {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  width: 50%;
  height: 100dvh;
  background-color: var(--color-sidebar);
  color: var(--color-sidebar-text);
  transition: width 0.2s ease-out;

  &.is-collapsed {
    width: 3.5rem;
  }

  &.is-collapsed .sidebar__link {
    align-items: center;
    padding: var(--space-3) var(--space-2);
  }

  &.is-collapsed .sidebar__link-name,
  &.is-collapsed .sidebar__link-direction {
    opacity: 0;
    position: absolute;
    pointer-events: none;
  }

  &.is-collapsed .sidebar__link-initials {
    display: flex;
    opacity: 1;
  }

  &.is-collapsed .sidebar__add {
    padding: var(--space-3);
  }

  &.is-collapsed .sidebar__add span {
    display: none;
  }

  &.is-collapsed .sidebar__add svg {
    flex-shrink: 0;
  }

  &.is-collapsed .sidebar__footer {
    padding: var(--space-4) var(--space-2);
  }
}

.sidebar__nav {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-2) 0;
}

.sidebar__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar__item {
  margin: 0;
}

.sidebar__link {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: inherit;
  font-size: inherit;
  text-align: left;
  color: var(--color-sidebar-muted);
  text-decoration: none;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, padding 0.2s ease-out;
  overflow: hidden;

  &:hover {
    color: var(--color-sidebar-text);
    background-color: var(--color-sidebar-hover);
  }

  &:focus-visible {
    outline: none;
    box-shadow: inset var(--focus-ring);
  }

  &.is-active {
    color: var(--color-sidebar-text);
    background-color: var(--color-sidebar-hover);

    &::after {
      content: '';
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 1.5rem;
      height: 1.5rem;
      border-radius: 5px;
      background-color: var(--color-background);
      transform: translate(65%, -50%) rotate(45deg);
    }
  }
}

.sidebar__link-name {
  display: block;
  font-weight: 500;
  transition: opacity 0.15s ease-out;
}

.sidebar__link-direction {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--color-sidebar-muted);
  transition: opacity 0.15s ease-out;
}

.sidebar__link-initials {
  display: none;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: 2rem;
  height: 2rem;
  font-size: var(--font-size-sm);
  font-weight: 600;
  background-color: var(--color-sidebar-hover);
  border-radius: var(--radius-sm);
  transition: opacity 0.15s ease-out;
}

.sidebar__footer {
  padding: var(--space-4);
  transition: padding 0.2s ease-out;
}

.sidebar__add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-3);
  font-family: inherit;
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--color-sidebar-text);
  background-color: var(--color-sidebar-hover);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color 0.15s;

  &:hover {
    background-color: var(--color-primary);
  }

  &:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
  }
}


/* --------------------------------------------------------------------------
   Main content
   -------------------------------------------------------------------------- */
.main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* --------------------------------------------------------------------------
   Search
   -------------------------------------------------------------------------- */
.search {
  padding: var(--space-6);

  &[hidden] {
    display: none;
  }
}

.search__container {
  max-width: 32rem;
  margin: 0 auto;
}

.search__title {
  margin: 0 0 var(--space-4);
  font-size: var(--font-size-xl);
  font-weight: 600;
}

.search__form-wrapper {
  display: block;
  margin-block-end: var(--space-4);
}

.search__form {
  position: relative;
}

.search__label {
  display: block;
  margin-block-end: var(--space-2);
  font-weight: 500;
}

.search__input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-base);
  font-family: inherit;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: white;
  transition: border-color 0.15s, box-shadow 0.15s;

  &:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--focus-ring);
  }
}

.search__help {
  display: block;
  margin-block-start: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.search__results {
  position: absolute;
  z-index: 10;
  top: 100%;
  left: 0;
  right: 0;
  margin: var(--space-1) 0 0;
  padding: var(--space-2) 0;
  list-style: none;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  max-height: 20rem;
  overflow-y: auto;

  &[hidden] {
    display: none;
  }
}

.search__result {
  padding: var(--space-3) var(--space-4);
  cursor: pointer;

  &:hover,
  &:focus,
  &[aria-selected="true"] {
    background-color: var(--color-sidebar);
    color: var(--color-sidebar-text);
    outline: none;
  }

  &:focus-visible {
    box-shadow: inset var(--focus-ring);
  }
}

.search__result-name {
  font-weight: 500;
}

.search__result-locality {
  font-size: var(--font-size-sm);
}

/* --------------------------------------------------------------------------
   Stop details
   -------------------------------------------------------------------------- */
.stop-details {
  max-width: 32rem;
  margin: 0 auto;
  padding: var(--space-6);

  &[hidden] {
    display: none;
  }
}

.stop-details__title {
  margin: 0 0 var(--space-4);
  font-size: var(--font-size-xl);
  font-weight: 600;
}

.stop-details__direction,
.stop-details__lines {
  margin: 0 0 var(--space-4);
  padding: 0;
  border: 0;
}

.stop-details__legend {
  display: block;
  font-weight: 500;
  color: var(--color-text);
}

.stop-details__lines-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-block-end: var(--space-3);
}

.stop-details__toggle {
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-sm);
  font-family: inherit;
  color: var(--color-text-muted);
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;

  &:hover {
    color: var(--color-text);
    border-color: var(--color-text-muted);
  }
}

.stop-details__direction-options {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.stop-details__lines-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.stop-details__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   Radio option
   -------------------------------------------------------------------------- */
.radio-option {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  min-height: 2.75rem;
}

.radio-option__input {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  accent-color: var(--color-primary);
}

.radio-option__label {
  font-size: var(--font-size-base);
}

/* --------------------------------------------------------------------------
   Line checkbox
   -------------------------------------------------------------------------- */
.line-checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
  min-height: 2.75rem;

  &:hover {
    border-color: var(--color-primary);
  }

  &:has(input:checked) {
    border-color: var(--color-primary);
    background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
  }

  &:has(input:focus-visible) {
    box-shadow: var(--focus-ring);
  }
}

.line-checkbox__input {
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
  accent-color: var(--color-primary);
}

.line-checkbox__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: white;
  border-radius: var(--radius-sm);
  background-color: var(--color-secondary);
}

.line-checkbox__badge--bus { background-color: var(--color-bus); }
.line-checkbox__badge--rail { background-color: var(--color-rail); }
.line-checkbox__badge--metro { background-color: var(--color-metro); }
.line-checkbox__badge--tram { background-color: var(--color-tram); }
.line-checkbox__badge--water { background-color: var(--color-water); }
.line-checkbox__badge--air { background-color: var(--color-air); }

.line-checkbox__name {
}

.line-checkbox__destination {
  font-size: var(--font-size-sm);
}

/* --------------------------------------------------------------------------
   Line group (grouped by line with destinations)
   -------------------------------------------------------------------------- */
.line-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  background-color: white;
  border-radius: var(--radius-md);
}

.line-group__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.line-group__name {
  font-weight: 500;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.line-group__destinations {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-inline-start: var(--space-2);
}

/* --------------------------------------------------------------------------
   Button
   -------------------------------------------------------------------------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  font-family: inherit;
  font-size: var(--font-size-base);
  font-weight: 500;
  text-decoration: none;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color 0.15s, transform 0.1s;
  min-height: 2.75rem;

  &:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
  }

  &:active {
    transform: scale(0.98);
  }
}

.button--primary {
  color: var(--color-sidebar-text);
  background-color: var(--color-sidebar);

  &:hover {
    background-color: var(--color-sidebar-hover);
  }
}

.button--secondary {
  color: var(--color-sidebar-text);
  background-color: var(--color-sidebar);

  &:hover {
    background-color: var(--color-sidebar-hover);
  }
}

.button--danger {
  color: white;
  background-color: var(--color-danger);

  &:hover {
    background-color: var(--color-danger-hover);
  }
}

/* --------------------------------------------------------------------------
   Favorite view
   -------------------------------------------------------------------------- */
.favorite-view {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: var(--space-4);

  &[hidden] {
    display: none;
  }
}

.favorite-view__delete {
  position: absolute;
  bottom: var(--space-4);
  right: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
  color: var(--color-danger);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;

  &:hover {
    background-color: color-mix(in srgb, var(--color-danger) 10%, transparent);
    border-color: var(--color-danger);
  }

  &:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
  }
}

.favorite-view__departures {
  flex: 1;
}

.favorite-view__loading {
  text-align: center;
  color: var(--color-text-muted);
  padding: var(--space-8);
}

.favorite-view__error {
  color: var(--color-danger);
  padding: var(--space-4);
}

/* --------------------------------------------------------------------------
   Empty state
   -------------------------------------------------------------------------- */
.empty-state {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);

  &[hidden] {
    display: none;
  }
}

.empty-state__content {
  text-align: center;
  max-width: 20rem;
}

.empty-state__icon {
  color: var(--color-text-muted);
  margin-block-end: var(--space-4);
}

.empty-state__title {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-xl);
  font-weight: 600;
}

.empty-state__description {
  margin: 0 0 var(--space-6);
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   Departure list
   -------------------------------------------------------------------------- */
.departure-list {
  display: flex;
  flex-direction: column;
}

.departure {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-block-end: 1px solid var(--color-border);

  &:last-child {
    border-block-end: none;
  }
}

.departure__info {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.departure__line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: white;
  border-radius: var(--radius-sm);
  background-color: var(--color-secondary);
}

.departure__line--bus { background-color: var(--color-bus); }
.departure__line--rail { background-color: var(--color-rail); }
.departure__line--metro { background-color: var(--color-metro); }
.departure__line--tram { background-color: var(--color-tram); }
.departure__line--water { background-color: var(--color-water); }
.departure__line--air { background-color: var(--color-air); }

.departure__direction {
  color: var(--color-text-muted);
  cursor: help;
}

.departure__destination {
  font-size: var(--font-size-base);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.departure__time {
  display: flex;
  gap: var(--space-2);
  white-space: nowrap;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.departure__relative {
  font-weight: 500;
}

.departure__clock {
  color: var(--color-text-muted);
}

.departure__time--realtime .departure__relative {
  color: var(--color-success);
}

.departure__time--soon .departure__relative {
  background-color: var(--color-warning);
  color: var(--color-background);
  font-weight: bold;
  padding: 0 var(--space-3);
  border-radius: var(--radius-full);

}

/* --------------------------------------------------------------------------
   Dialog
   -------------------------------------------------------------------------- */
.dialog {
  max-width: 24rem;
  width: calc(100% - var(--space-8));
  margin: auto;
  padding: var(--space-6);
  border: none;
  border-radius: var(--radius-lg);
  background-color: var(--color-background);
  box-shadow: var(--shadow-lg);

  &::backdrop {
    background-color: rgba(0, 0, 0, 0.5);
  }
}

.dialog__title {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-lg);
  font-weight: 600;
}

.dialog__message {
  margin: 0 0 var(--space-6);
  color: var(--color-text-muted);
}

.dialog__actions {
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
}