/*
 * Stylesheet for the Flodoro web application
 *
 * The design focuses on simplicity and minimal distraction, with
 * clean typography and generous spacing. A full‑screen background
 * image is overlaid with a subtle colour tint to improve contrast
 * for the timer and controls. All colours and sizes are defined
 * with CSS variables to make future theme customisation easy.
 */

/* Root variables for colours, sizes and fonts */
:root {
  --font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --color-primary: #fff;
  --color-secondary: #d1d5db;
  --color-accent: #3b82f6;
  --color-danger: #ef4444;
  --color-bg-overlay: rgba(0, 0, 0, 0.35);
  --panel-bg: rgba(17, 24, 39, 0.75);
  --font-size-title: 2.5rem;
  --font-size-timer: 6rem;
  --font-size-label: 2.5rem;
  --border-radius: 12px;
  --input-bg: #374151;
  --input-color: #ffffff;
  --input-border: transparent;

  /* Background used for quote displays; modified by JS for dark/light mode */
  --quote-bg: rgba(0, 0, 0, 0.4);

  /* Translucent surfaces for chips, items, pills, hovers. Flipped by JS for light mode. */
  --surface-soft: rgba(255, 255, 255, 0.1);
  --surface-soft-border: rgba(255, 255, 255, 0.12);
  --surface-strong: rgba(255, 255, 255, 0.22);
  --panel-border: rgba(255, 255, 255, 0.15);
  --panel-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  --panel-top: 4.25rem;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: var(--font-family);
  color: var(--color-primary);
}

#app {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  /* The background image will be updated by JavaScript via inline style */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* A dark overlay to enhance readability over the background image */
#app::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-bg-overlay);
  z-index: 0;
}

/* Ensure the main content sits above the overlay */
.app-navbar,
.main-content,
.settings-panel {
  position: relative;
  z-index: 1;
}

/* Top row: brand title left, icon tray right (no full-width bar chrome) */
.app-navbar {
  width: 100%;
  padding: 0.75rem 1.25rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  box-sizing: border-box;
}

/* Brand tray: same fixed dark chrome as the options pill */
.navbar-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  padding: 0.35rem 0.75rem 0.35rem 0.5rem;
  background: rgba(17, 24, 39, 0.82);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 20px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  flex-shrink: 0;
}

.navbar-logo {
  width: 2.25rem;
  height: 2.25rem;
  object-fit: contain;
  flex-shrink: 0;
}

.navbar-title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #ffffff;
  white-space: nowrap;
}

/* Header buttons container groups tasks, history and settings icons */
.header-buttons {
  display: flex;
  gap: 0.5rem;
}

/* ---------- header pill tray (always dark chrome, regardless of colour mode) ---------- */
.header-tray {
  display: flex;
  gap: .5rem;
  padding: .35rem .6rem;
  background: rgba(17, 24, 39, 0.82);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 20px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  flex-shrink: 0;
}

.header-tray .icon-button {
  color: #ffffff;
}

.header-tray .icon-button:hover {
  color: var(--color-accent);
  background: rgba(255, 255, 255, 0.12);
}

.icon-button {
  background: transparent;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  color: var(--color-primary);
  padding: 0.25rem 0.5rem;
  line-height: 1;
  border-radius: var(--border-radius);
  transition: background 0.2s ease, color 0.2s ease;
}

.icon-button:hover {
  color: var(--color-accent);
  background: var(--surface-soft);
}

/* Mode toggle styling: displays current and next session types */
.mode-toggle {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 0.5rem;
  cursor: pointer;
  /* include transform-style and backface visibility for smoother 3D flips */
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: transform 0.6s ease, background 0.2s ease, border 0.2s ease;
  padding: 0.25rem 0.5rem;
  border-radius: var(--border-radius);
  perspective: 800px;
  /* allow 3D flip */
}

/* Highlight on hover */
.mode-toggle:hover {
  background: var(--surface-soft);
  border: 1px solid var(--color-accent);
}

/* Rotation animation when toggled; JS adds/removes this class */
.mode-toggle.rotated {
  transform: rotateX(360deg);
}

.mode-main {
  font-size: var(--font-size-label);
  font-weight: bolder;
  text-transform: uppercase;
  letter-spacing: 1.2px;
}

.mode-sub {
  font-size: 1.25rem;
  color: var(--color-secondary);
}

/* Main content area containing timer and controls */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
}

.noscript-notice {
  position: relative;
  z-index: 2;
  margin: 0.75rem auto;
  padding: 0.75rem 1rem;
  max-width: 28rem;
  text-align: center;
  background: rgba(17, 24, 39, 0.92);
  border-radius: var(--border-radius);
}

.noscript-notice a {
  color: inherit;
  text-decoration: underline;
}

.session-label {
  /* Hide the redundant session label since mode toggle displays it */
  display: none;
}

.timer-display {
  font-size: var(--font-size-timer);
  font-weight: bold;
  margin-bottom: 0.75rem;
  letter-spacing: 2px;
}

/* Timer wrapper that positions plus/minus above and below the timer */
.timer-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

/* Buttons used for adjusting time */
.time-adjust-btn {
  font-size: 1.5rem;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--surface-soft);
  color: var(--color-primary);
  border: none;
  cursor: pointer;
  transition: background 0.2s ease;
}

.time-adjust-btn:hover {
  background: var(--surface-strong);
}

/* Controls */
.controls {
  display: flex;
  gap: 1rem;
}

/*
 * Buttons used across the app (start/pause, reset, save, close, etc.).
 * Use the accent colour for the background and dynamically computed
 * accent‑text colour for the icon/text so that contrast remains high
 * regardless of the chosen accent colour. Hover state darkens the
 * background slightly using the darker accent colour generated in
 * JavaScript (via applyThemeColor). Disabled state appears faded.
 */
.control-button {
  background: var(--color-accent);
  color: var(--accent-text);
  border: none;
  border-radius: var(--border-radius);
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  cursor: pointer;
  min-width: 100px;
  transition: background 0.2s ease, color 0.2s ease;
}

/* Hover state uses the darker accent colour for a subtle lift */
.control-button:hover {
  background: var(--color-accent-dark);
  color: var(--accent-text);
}

.control-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.hidden {
  display: none !important;
}

/* Settings panel styles */
/* Panel styling with frosted glass effect for settings, tasks, history, audio and stats */
.settings-panel,
.tasks-panel,
.history-panel,
.audio-panel,
.stats-panel,
.notification-panel,
.playlist-panel {
  position: absolute;
  top: var(--panel-top);
  /* below navbar */
  /* horizontal offsets are set individually in specific definitions */
  width: 22rem;
  max-width: 90vw;
  background: var(--panel-bg);
  backdrop-filter: blur(20px);
  border-radius: var(--border-radius);
  box-shadow: var(--panel-shadow);
  border: 1px solid var(--panel-border);
  padding: 1rem;
  color: var(--color-primary);
  z-index: 2;
  overflow-y: auto;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Position individual panels relative to their respective icons */
.settings-panel,
.tasks-panel,
.history-panel,
.audio-panel,
.stats-panel,
.notification-panel,
.playlist-panel {
  right: 1.5rem;
}

.audio-panel.slideout,
.stats-panel.slideout {
  transform-origin: top right;
  transition: opacity 0.25s ease, transform 0.25s ease;
  opacity: 0;
  transform: scale(0.95);
}

.audio-panel.slideout:not(.hidden),
.stats-panel.slideout:not(.hidden) {
  opacity: 1;
  transform: scale(1);
}

/* Volume slider row inside audio panel */
.volume-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.volume-row input[type="range"] {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 2px;
  background: var(--color-secondary);
  outline: none;
}

.volume-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-accent);
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
}

.volume-row input[type="range"]:active::-webkit-slider-thumb {
  transform: scale(1.5);
  background: var(--color-accent-light);
}

/* ---------- pill buttons (audio controls) ---------- */
.pill-btn {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-soft);
  border: none;
  color: var(--color-primary);
  font-size: 1rem;
  cursor: pointer;
  transition: background .2s;
}

.pill-btn:hover {
  background: var(--surface-strong);
}

.pill-btn.main {
  /* Main pill buttons (audio play/pause) use accent colour and dynamic text colour */
  background: var(--color-accent);
  color: var(--accent-text);
}

.local-audio-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.local-audio-actions .control-button {
  flex: 1 1 8rem;
  margin: 0;
}

.local-audio-status {
  color: var(--color-secondary);
  font-size: 0.82rem;
  line-height: 1.35;
  margin-top: 0.4rem;
}

.local-audio-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-top: 0.55rem;
  max-height: 8.5rem;
  overflow-y: auto;
  padding-right: 0.2rem;
}

.local-audio-item {
  display: flex;
  gap: 0.45rem;
  align-items: center;
  padding: 0.55rem;
  border-radius: 0.5rem;
  background: var(--surface-soft);
  border: 1px solid var(--surface-soft-border);
}

.local-audio-item-details {
  min-width: 0;
  flex: 1 1 auto;
}

.local-audio-item-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.88rem;
  font-weight: 650;
}

.local-audio-item-meta {
  color: var(--color-secondary);
  font-size: 0.74rem;
  line-height: 1.25;
  margin-top: 0.15rem;
}

.local-audio-link-button,
.local-audio-delete-button {
  border: none;
  border-radius: 0.45rem;
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.35rem 0.5rem;
}

.local-audio-link-button {
  background: var(--surface-soft);
  color: var(--color-primary);
}

.local-audio-delete-button {
  background: var(--surface-soft);
  color: var(--color-secondary);
}

.audio-panel .panel-title {
  margin-bottom: 0.75rem;
}

.audio-panel .settings-group label {
  margin-bottom: 0.35rem;
}

.audio-panel .settings-group select {
  margin-bottom: 0.45rem;
}

.audio-panel .audio-playback-row {
  margin: 0.65rem 0;
}

.audio-panel .audio-actions {
  margin-top: 0.65rem;
}

/* Playback controls row in audio panel */
.audio-playback-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 1.2rem;
}

/* Stats summary styling */
.stats-summary {
  font-size: 0.9rem;
  line-height: 1.4;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* Quote display styling */
.quote-display {
  margin: 1.5rem;
  padding: 0.75rem 1rem;
  background: var(--quote-bg);
  border-radius: var(--border-radius);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--color-secondary);
  max-width: 80%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

/* The user’s quote of the day displayed above the timer */
.theme-quote {
  margin: 0.5rem 1rem;
  padding: 0.75rem 1rem;
  background: var(--quote-bg);
  border-radius: var(--border-radius);
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  color: var(--color-primary);
  max-width: 90%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

/* Star button within quote display for selecting the quote of the day */
.star-quote-btn {
  background: transparent;
  border: none;
  color: var(--color-accent);
  font-size: 1.3rem;
  cursor: pointer;
  margin-left: 0.5rem;
  transition: color 0.2s ease;
}

.star-quote-btn:hover {
  color: var(--color-accent-light);
}

/* Remove button for theme quote */
.remove-theme-btn {
  background: transparent;
  border: none;
  color: var(--color-accent);
  font-size: 1.2rem;
  cursor: pointer;
  margin-left: 0.5rem;
  transition: color 0.2s ease;
}

.remove-theme-btn:hover {
  color: var(--color-accent-light);
}

/* Notification settings: launch row, focused panel controls and reminder chips */
.notification-launch-row,
.playlist-launch-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.settings-summary {
  color: var(--color-secondary);
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  gap: 0.35rem;
  line-height: 1.35;
}

.settings-summary-chip {
  background: var(--surface-soft);
  border: 1px solid var(--surface-soft-border);
  border-radius: 0.5rem;
  color: var(--color-primary);
  font-size: 0.78rem;
  padding: 0.25rem 0.45rem;
  white-space: nowrap;
}

.compact-panel-button {
  width: 2.25rem;
  height: 2.25rem;
  min-width: 2.25rem;
  padding: 0;
  flex: 0 0 auto;
}

.notification-content,
.notification-settings-stack,
.playlist-content {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.notification-section {
  gap: 0.5rem;
}

.notification-toggle-row,
.notify-timing-option {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--color-primary);
  font-size: 0.9rem;
  margin-bottom: 0;
}

.notification-toggle-row {
  justify-content: space-between;
}

.notification-toggle-row-primary {
  font-weight: 600;
}

.notification-output-row {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.notification-sub-toggle,
.notify-timing-option {
  background: var(--surface-soft);
  border: 1px solid var(--surface-soft-border);
  border-radius: 0.5rem;
  padding: 0.55rem 0.65rem;
}

.notification-toggle-row input,
.notify-timing-option input {
  accent-color: var(--color-accent);
}

.notification-toggle-row:has(input:disabled),
.notify-timing-option:has(input:disabled),
.custom-notify-row input:disabled,
.custom-notify-row button:disabled,
.custom-notify-chip button:disabled {
  opacity: 0.55;
}

.notify-options {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  font-size: 0.9rem;
}

.custom-notify-row {
  display: flex;
  gap: 0.5rem;
}

.custom-notify-row input[type="number"] {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
}

.custom-notify-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.custom-notify-chip {
  background: var(--surface-soft);
  color: var(--color-primary);
  padding: 0.35rem 0.6rem;
  border-radius: 0.5rem;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.notification-actions,
.playlist-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

@media (max-width: 480px) {
  .notification-output-row,
  .notify-options {
    grid-template-columns: 1fr;
  }
}
/* Hide the current task display since flagged tasks are shown instead */
.current-task {
  display: none !important;
}

/* Custom range styling for the audio progress bar */
#audio-progress {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 0.35rem;
  border-radius: 0.5rem;
  background: var(--color-secondary);
  background-image: linear-gradient(to right,
      var(--color-accent) 0%,
      var(--color-accent) var(--audio-progress-value, 0%),
      var(--color-secondary) var(--audio-progress-value, 0%),
      var(--color-secondary) 100%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  outline: none;
  cursor: pointer;
  transition: height 0.2s ease;
}

#audio-progress:hover {
  height: 0.5rem;
}

#audio-progress::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

#audio-progress:hover::-webkit-slider-thumb {
  opacity: 1;
}

#audio-progress:active::-webkit-slider-thumb {
  transform: scale(1.3);
}

/* Ensure slideout animations for tasks/history panels */
.tasks-panel.slideout,
.history-panel.slideout {
  transform-origin: top right;
  transition: opacity 0.25s ease, transform 0.25s ease;
  opacity: 0;
  transform: scale(0.95);
}

.tasks-panel.slideout:not(.hidden),
.history-panel.slideout:not(.hidden) {
  opacity: 1;
  transform: scale(1);
}

/* Panel title for tasks and history */
.panel-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  text-align: center;
  margin-bottom: 0.5rem;
}

/* Content layout for tasks panel */
.tasks-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.task-input-row {
  display: flex;
  gap: 0.5rem;
}

.task-input-row input[type="text"] {
  flex: 1;
  padding: 0.5rem;
  border-radius: var(--border-radius);
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: var(--input-color);
  font-size: 1rem;
}

.tasks-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 200px;
  overflow-y: auto;
}

.tasks-list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0;
  font-size: 0.9rem;
}

/* Delete button for tasks */
.tasks-list li .delete-button {
  margin-left: auto;
  background: transparent;
  border: none;
  color: var(--color-secondary);
  cursor: pointer;
  font-size: 1rem;
  transition: color 0.2s ease;
}

.tasks-list li .delete-button:hover {
  color: var(--color-danger);
}

.tasks-list li input[type="checkbox"] {
  accent-color: var(--color-accent);
  cursor: pointer;
}

.tasks-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

/* Content layout for history panel */
.history-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.history-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 200px;
  overflow-y: auto;
}

.history-list li {
  margin-bottom: 0.25rem;
  font-size: 0.875rem;
  display: flex;
  justify-content: space-between;
  gap: 0.25rem;
}

.history-actions {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
}

/* Slideout animation: hidden panels slide up slightly and fade */
.slideout {
  transform-origin: top right;
  transition: opacity 0.25s ease, transform 0.25s ease;
  opacity: 0;
  transform: scale(0.95);
}

.slideout:not(.hidden) {
  opacity: 1;
  transform: scale(1);
}

.settings-content {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.volume-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.volume-group input[type="range"] {
  flex: 1;
}

.audio-progress-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.audio-progress-group input[type="range"] {
  width: 100%;
}

/* Secondary controls row beneath main controls */
.secondary-controls {
  margin-top: 1rem;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

.secondary-controls .icon-button {
  background: var(--surface-soft);
  border: none;
  font-size: 0.875rem;
  padding: 0.4rem 0.6rem;
  min-width: auto;
}

.secondary-controls .icon-button:hover {
  background: var(--surface-strong);
}

/* Current task display */
.current-task {
  margin-top: 1rem;
  font-size: 0.875rem;
  background: var(--quote-bg);
  padding: 0.5rem 0.75rem;
  border-radius: var(--border-radius);
  max-width: 90%;
  color: var(--color-primary);
  text-align: center;
}

.settings-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  text-align: center;
}

.settings-group {
  display: flex;
  flex-direction: column;
}

.settings-group label {
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
  color: var(--color-secondary);
}

.settings-group input[type="number"],
.settings-group select {
  padding: 0.5rem;
  border-radius: var(--border-radius);
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: var(--input-color);
  font-size: 1rem;
  margin-bottom: 0.65rem;
}

/* Apply input background variables to number, color and text inputs within settings groups */
.settings-group input[type="number"],
.settings-group input[type="color"] {
  padding: 0.5rem;
  border-radius: var(--border-radius);
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: var(--input-color);
  font-size: 1rem;
}

.settings-group input[type="range"] {
  width: 100%;
}

.settings-actions {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.settings-actions .control-button {
  flex: 1;
}

/* Responsive adjustments */
@media (max-width: 480px) {
  .timer-display {
    font-size: 4rem;
  }

  .navbar-title {
    font-size: 1.15rem;
  }

  .navbar-logo {
    width: 1.85rem;
    height: 1.85rem;
  }

  .control-button {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
  }

  .settings-panel {
    padding: 1rem;
  }
}

/* ===================================================================== */
/* Additional customisations added for improved UI (July 2025) */

/* Rows within settings panel for grouping related inputs */
.settings-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
}

.settings-row .settings-group {
  flex: 1 1 0;
  min-width: 4rem;
}

/* Colour input row for gradient pickers */
.color-input-row {
  display: flex;
  gap: 0.5rem;
}

/* Toggle button styling for dark/light mode */
.toggle-button {
  display: inline-block;
  padding: 0.4rem 0.8rem;
  border-radius: 0.5rem;
  border: none;
  cursor: pointer;
  font-weight: 600;
  background: var(--color-accent);
  color: var(--accent-text, #fff);
  transition: background 0.3s ease, color 0.3s ease;
}

.toggle-button:hover {
  filter: brightness(1.1);
}

/* Broader time adjust buttons spanning timer width */
.time-adjust-btn {
  width: 12rem !important;
  height: 2.5rem !important;
  border-radius: 0.75rem !important;
  background: var(--surface-soft) !important;
  color: var(--color-primary) !important;
}

.time-adjust-btn:hover {
  background: var(--surface-strong) !important;
}

/* Add vertical spacing around timer wrapper */
.timer-wrapper {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

/* Refined control buttons (start/pause/reset etc.) */
.control-button {
  padding: 0.6rem 1.3rem;
  margin: 0.25rem;
  border-radius: 0.6rem;
  font-weight: 600;
  background: var(--color-accent);
  color: var(--accent-text, #fff);
  transition: background 0.3s ease, color 0.3s ease, transform 0.2s ease;
}

.control-button:hover {
  transform: translateY(-1px);
}

/* Actions sections aligned to right with margin */
.tasks-actions,
.history-actions,
.audio-actions,
.stats-actions,
.settings-actions {
  margin-top: 1rem;
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

/* Panel titles more prominent */
.panel-title,
.settings-title {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

/* Audio playback pill buttons unified styling */
.pill-btn {
  padding: 2rem;
  border-radius: 1rem;
  background: var(--surface-soft);
  color: var(--color-primary);
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  transition: background 0.2s ease;
}

.pill-btn.main {
  background: var(--color-accent);
  color: var(--accent-text, #fff);
}

.pill-btn:hover {
  background: var(--surface-strong);
}

/* Volume row spacing */
.volume-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Scrollbars and padding for task/history lists */
.tasks-list,
.history-list {
  max-height: 250px;
  overflow-y: auto;
  padding-right: 0.5rem;
}

.tasks-list::-webkit-scrollbar,
.history-list::-webkit-scrollbar {
  width: 0.4rem;
}

.tasks-list::-webkit-scrollbar-track,
.history-list::-webkit-scrollbar-track {
  background: var(--surface-soft);
  border-radius: 1rem;
}

.tasks-list::-webkit-scrollbar-thumb,
.history-list::-webkit-scrollbar-thumb {
  background: var(--color-accent);
  border-radius: 1rem;
}

/* Flagged tasks display chips */
.flagged-tasks-display {
  margin-top: 1rem;
  margin-left: 12rem;
  margin-right: 12rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}

.flagged-tasks-display .flag-chip {
  padding: 0.4rem 0.8rem;
  border-radius: 0.8rem;
  background: var(--surface-soft);
  color: var(--color-primary);
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

/* Star buttons inside task items */
.star-button {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 1.25rem;
  margin: 0 0.4rem;
  color: var(--color-accent);
  transition: color 0.2s ease;
}

.star-button:hover {
  color: var(--color-accent-light);
}