/*  Variables and Theme declarations */
:root,
[data-bs-theme="dark"] {
  /* Surfaces */
  --color-bg: #0a0712; /* page background */
  --color-bg-card: #15101f; /* panels */
  --color-bg-card-raised: #1e1730; /* mission list items, inputs */
  --color-border: #2a2140;

  /* Text  */
  --color-text-primary: #f5f3fa;
  --color-text-secondary: #a79fc2;

  /* Accent (tomato)  */
  --color-accent: #ff5a44;
  /* Button fill — white  */
  --color-accent-button: #c93a2a;
  --color-accent-button-hover: #db4530;

  --color-success: #34d399;
  --color-danger: #ff5a44;

  --font-display: "Sora", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  /* Map onto Bootstrap's own variables so its components inherit the palette */
  --bs-body-bg: var(--color-bg);
  --bs-body-color: var(--color-text-primary);
  --bs-secondary-color: var(--color-text-secondary);
  --bs-border-color: var(--color-border);
  --bs-tertiary-bg: var(--color-bg-card);
  --bs-tertiary-bg-rgb: 21, 16, 31;
  --bs-card-bg: var(--color-bg-card);

  --bs-danger: var(--color-danger);
  --bs-danger-rgb: 255, 90, 68;

  --bs-link-color: var(--color-accent);
}

/*  1a. Buttons —  Customisations and styling */

/*  1b. Buttons — Timer core: Start/Pause  */

.btn-primary {
  --bs-btn-color: #ffffff;
  --bs-btn-bg: var(--color-accent-button);
  --bs-btn-border-color: var(--color-accent-button);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: var(--color-accent-button-hover);
  --bs-btn-hover-border-color: var(--color-accent-button-hover);
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: var(--color-accent-button-hover);
  --bs-btn-active-border-color: var(--color-accent-button-hover);
  --bs-btn-disabled-color: #ffffff;
  --bs-btn-disabled-bg: var(--color-accent-button);
  --bs-btn-disabled-border-color: var(--color-accent-button);
  --bs-btn-focus-shadow-rgb: 201, 58, 42;
}

.btn-secondary {
  --bs-btn-color: var(--color-text-primary);
  --bs-btn-bg: var(--color-bg-card-raised);
  --bs-btn-border-color: var(--color-border);
  --bs-btn-hover-color: var(--color-text-primary);
  --bs-btn-hover-bg: #291f42;
  --bs-btn-hover-border-color: var(--color-border);
  --bs-btn-active-color: var(--color-text-primary);
  --bs-btn-active-bg: #291f42;
  --bs-btn-active-border-color: var(--color-border);
  --bs-btn-disabled-color: var(--color-text-secondary);
  --bs-btn-disabled-bg: var(--color-bg-card-raised);
  --bs-btn-disabled-border-color: var(--color-border);
}

/*  1c. Buttons — Task List: "Set current"  */

.btn-outline-secondary {
  --bs-btn-color: var(--color-text-secondary);
  --bs-btn-border-color: var(--color-border);
  --bs-btn-hover-color: var(--color-bg);
  --bs-btn-hover-bg: var(--color-text-secondary);
  --bs-btn-hover-border-color: var(--color-text-secondary);
  --bs-btn-active-color: var(--color-bg);
  --bs-btn-active-bg: var(--color-text-secondary);
  --bs-btn-active-border-color: var(--color-text-secondary);
}

/*  1d. Accessibility  — Davy  */
/* General Body style and typography */
.text-subtle {
  color: var(--color-text-secondary) !important;
}

body {
  font-family: var(--font-body);
}
h1,
h2,
.stat-card__value,
.timer-display {
  font-family: var(--font-display);
}

/* Visible keyboard focus everywhere */
:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

/*  2. Shell — Davy (general layout/responsive polish)  */
.app-shell {
  max-width: 1100px;
}
.app-title {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.app-title__icon {
  color: var(--color-accent);
  display: inline-flex;
}

.panel {
  box-shadow: none;
} /* flat, clean surfaces instead of drop shadows */

/*  3. Mode tabs — Sarah (Timer core)  */
.mode-tabs {
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  padding: 5px;
  border-radius: 999px;
  gap: 4px;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.mode-tabs::-webkit-scrollbar { display: none; }
.mode-tab {
  color: var(--color-text-secondary);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 8px 16px;
  border: none;
  background: transparent;
  white-space: nowrap;
  flex: 0 0 auto;
}
.mode-tab.is-active {
  background-color: var(--color-accent-button);
  color: #ffffff;
  border-radius: 50px;
}


/*  4. Timer ring — Sarah (Timer core)  */
.timer-ring-wrap {
  position: relative;
  width: 220px;
  height: 220px;
  margin-inline: auto;
}
.timer-ring {
  transform: rotate(-90deg);
}
.timer-ring__track {
  fill: none;
  stroke: var(--color-bg-card-raised);
  stroke-width: 8;
}
.timer-ring__progress {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 8;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.25s linear;
}
.timer-display {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-primary);
}

/*  5. Settings (mission durations) — you (Persistence + Settings)  */
.settings {
  max-width: 360px;
}
.settings summary {
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--color-text-secondary);
}
.settings summary::marker {
  color: var(--color-text-secondary);
}
.settings input.form-control {
  background-color: var(--color-bg);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}

/*  6. Mission form + list — Amir (Task List CRUD)  */
.mission-form input.form-control {
  background-color: var(--color-bg);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}
.mission-form input.form-control::placeholder {
  color: var(--color-text-secondary);
}

.mission-list .list-group-item {
  background-color: transparent;
  border-color: var(--color-border);
  padding-left: 0;
  padding-right: 0;
}

/* Scroll rather than grow once the list has more than ~5 missions */
.mission-list {
  max-height: 21rem;
  overflow-y: auto;
  padding-right: 0.5rem;
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: var(--color-accent-button) var(--color-bg-card-raised);
}
.mission-list::-webkit-scrollbar {
  width: 8px;
} /* Chrome/Safari/Edge */
.mission-list::-webkit-scrollbar-track {
  background-color: var(--color-bg-card-raised);
  border-radius: 999px;
}
.mission-list::-webkit-scrollbar-thumb {
  background-color: var(--color-accent-button);
  border-radius: 999px;
}
.mission-list::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-accent-button-hover);
}

.mission-item.is-current {
  border-radius: 8px;
  outline: 2px solid var(--color-accent);
  outline-offset: -1px;
}
.mission-item__label {
  flex: 1;
  cursor: pointer;
}
.mission-item.is-complete .mission-item__label {
  text-decoration: line-through;
  color: var(--color-text-secondary);
}
.mission-item__checkbox {
  accent-color: var(--color-success);
  width: 18px;
  height: 18px;
}
.mission-item__current-btn {
  --bs-btn-padding-y: 0.15rem;
  --bs-btn-padding-x: 0.6rem;
  --bs-btn-font-size: 0.7rem;
  color: var(--color-text-secondary);
  border-color: var(--color-border);
}
.mission-item.is-current .mission-item__current-btn {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

/*  7. Stat cards — Amir (Task List CRUD: mission counts)  */
.stat-card__value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-accent);
}

.stat-card {
  border: 1px solid var(--color-border);
}

/*  8. Instructions link + modal  (accessibility/usability)  */
.instructions-link {
  color: var(--color-accent);
  font-size: 0.85rem;
  text-decoration: underline;
}
.instructions-link:hover,
.instructions-link:focus-visible {
  color: var(--color-accent-button-hover);
}

.modal-content {
  background-color: var(--color-bg-card);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
}
.modal-header,
.modal-footer {
  border-color: var(--color-border);
}
.modal-body ol {
  color: var(--color-text-primary);
}
.modal-body li {
  margin-bottom: 0.4rem;
}

@media (max-width: 450px) {
  .mode-tabs {
    justify-content: flex-start;
    padding: 4px;
    gap: 3px;
  }

  .mode-tab {
    font-size: 0.75rem;
    padding: 7px 10px;
  }
}


@media (max-width: 450px) {
  .mode-tabs {
    justify-content: flex-start;
    padding: 4px;
    gap: 3px;
  }

  .mode-tab {
    font-size: 0.75rem;
    padding: 7px 10px;
  }
}

.error-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem 1rem;
  background-color: var(--color-bg);
  color: var(--color-text-primary);
}

.error-page__card {
  width: min(100%, 540px);
  border: 1px solid var(--color-border);
  background-color: var(--color-bg-card);
  border-radius: 24px;
  padding: 3rem 2rem;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

.error-page__eyebrow {
  font-family: var(--font-display);
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.8rem;
}

.error-page__illustration {
  font-size: clamp(3rem, 6vw, 6rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 6rem;
  height: 6rem;
  margin-inline: auto;
  border-radius: 50%;
  background-color: rgba(255, 90, 68, 0.16);
  color: var(--color-accent);
}

.error-page__title {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4vw, 3rem);
  margin-bottom: 0.75rem;
}

.error-page__description {
  color: var(--color-text-secondary);
  font-size: 1rem;
  line-height: 1.75;
  max-width: 38rem;
  margin-inline: auto;
}

@media (max-width: 575px) {
  .error-page__card {
    padding: 2.5rem 1.5rem;
  }
}

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

}

/*  9. Footer — Davy (accessibility/usability)  */
.app-footer {
  border-top: 1px solid var(--color-border);
}

.app-footer__built-by {
  line-height: 2;
}

.app-footer__link {
  color: var(--color-text-secondary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 4px;
}
.app-footer__link:hover,
.app-footer__link:focus-visible {
  color: var(--color-accent);
}
.app-footer__link--inline {
  text-decoration: underline;
}

.app-footer__gh-icon {
  flex-shrink: 0;
}
.app-footer__role {
  color: var(--color-text-secondary);
  font-size: 0.8em;
}