/*--------------------------------------------------------------------*/
/* Theme variables and general resets                                 */
/*--------------------------------------------------------------------*/

/* Define default (light) theme variables on the :root. These values
   will be overridden by specific theme classes (theme-dark,
   theme-blue, theme-cute) applied to the body element. */
:root {
  --bg-color: #fafafa;
  --card-bg-color: #ffffff;
  --text-color: #333333;
  --primary-bg: #2196f3;
  --primary-hover-bg: #1976d2;
  --secondary-bg: #9e9e9e;
  --secondary-hover-bg: #757575;
  --tertiary-bg: #e0e0e0;
  --tertiary-hover-bg: #d5d5d5;
  --btn-text-color: #ffffff;
  --note-bg: #ffffff;
  --note-border-color: #e0e0e0;
  --note-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  --timer-green-bg: #e8f5e9;
  --timer-green-text: #2e7d32;
  --timer-orange-bg: #fff3e0;
  --timer-orange-text: #ef6c00;
  --timer-red-bg: #ffebee;
  --timer-red-text: #c62828;
}

/* Dark theme overrides */
.theme-dark {
  --bg-color: #121212;
  --card-bg-color: #1f1f1f;
  --text-color: #e0e0e0;
  --primary-bg: #90caf9;
  --primary-hover-bg: #64b5f6;
  --secondary-bg: #616161;
  --secondary-hover-bg: #424242;
  --tertiary-bg: #333333;
  --tertiary-hover-bg: #444444;
  --btn-text-color: #ffffff;
  --note-bg: #1f1f1f;
  --note-border-color: #333333;
  --note-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  --timer-green-bg: #1b5e20;
  --timer-green-text: #c8e6c9;
  --timer-orange-bg: #bf360c;
  --timer-orange-text: #ffe0b2;
  --timer-red-bg: #b71c1c;
  --timer-red-text: #ffccbc;
}

/* Blue theme overrides */
.theme-blue {
  --bg-color: #e3f2fd;
  --card-bg-color: #ffffff;
  --text-color: #0d47a1;
  --primary-bg: #1976d2;
  --primary-hover-bg: #1565c0;
  --secondary-bg: #90caf9;
  --secondary-hover-bg: #64b5f6;
  --tertiary-bg: #bbdefb;
  --tertiary-hover-bg: #90caf9;
  --btn-text-color: #ffffff;
  --note-bg: #ffffff;
  --note-border-color: #90caf9;
  --note-shadow: 0 1px 3px rgba(13, 71, 161, 0.1);
  --timer-green-bg: #dcedc8;
  --timer-green-text: #33691e;
  --timer-orange-bg: #ffe0b2;
  --timer-orange-text: #e65100;
  --timer-red-bg: #ffcdd2;
  --timer-red-text: #b71c1c;
}

/* Cute theme overrides */
.theme-cute {
  --bg-color: #fff0f6;
  --card-bg-color: #ffffff;
  --text-color: #880e4f;
  --primary-bg: #ff80ab;
  --primary-hover-bg: #ff4081;
  --secondary-bg: #ce93d8;
  --secondary-hover-bg: #ba68c8;
  --tertiary-bg: #f8bbd0;
  --tertiary-hover-bg: #f48fb1;
  --btn-text-color: #ffffff;
  --note-bg: #ffffff;
  --note-border-color: #f8bbd0;
  --note-shadow: 0 1px 3px rgba(136, 14, 79, 0.1);
  --timer-green-bg: #e0f7fa;
  --timer-green-text: #00695c;
  --timer-orange-bg: #fff3e0;
  --timer-orange-text: #e65100;
  --timer-red-bg: #ffebee;
  --timer-red-text: #b71c1c;
}

/* Base styles using CSS variables */
body {
  margin: 0;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background: var(--bg-color);
  color: var(--text-color);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
}

/* Splash screen styles */
.splash-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--bg-color);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.splash-content {
  text-align: center;
  padding: 20px;
  background: var(--card-bg-color);
  border-radius: 12px;
  box-shadow: var(--note-shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.splash-logo {
  width: 100px;
  height: 100px;
  object-fit: contain;
  margin-bottom: 10px;
}

.splash-title {
  font-size: 1.5rem;
  margin: 0 0 15px;
}

.splash-loading {
  width: 120px;
  height: 8px;
  background: var(--tertiary-bg);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.splash-loading .loading-bar {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: var(--primary-bg);
  animation: loadingAnim 2.5s linear forwards;
}

@keyframes loadingAnim {
  from { width: 0%; }
  to { width: 100%; }
}

/* Header with logo */
.logo-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
.header-logo {
  width: 40px;
  height: 40px;
  object-fit: contain;
}
.header-title {
  font-size: 1.5rem;
  font-weight: 600;
}

main {
  width: 100%;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Configuration section */
/* Config panel has a max width to keep form readable */
#config {
  background: var(--card-bg-color);
  padding: 20px;
  border-radius: 8px;
  box-shadow: var(--note-shadow);
  width: 100%;
  max-width: 800px;
}

#config h1,
#config h2 {
  margin-top: 0;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.form-group input[type="text"],
.phase-entry input[type="text"],
.phase-entry input[type="number"] {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* Notes configuration area */
.notes-config {
  margin-top: 20px;
}

.notes-config .notes-textarea {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
  font-family: inherit;
}

/* Phase entry container */
.phase-entry {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.phase-entry input[type="text"] {
  flex: 2;
}

.phase-entry input[type="number"] {
  flex: 1;
}

.phase-entry .remove-phase-btn {
  flex: 0 0 auto;
  background: #e53935;
  color: #fff;
  border: none;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
}

.phase-entry .remove-phase-btn:hover {
  background: #c62828;
}

/* Buttons */
.btn {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  display: inline-block;
  text-align: center;
  transition: background 0.2s ease;
}

.btn-primary {
  background: var(--primary-bg);
  color: var(--btn-text-color);
}

.btn-primary:hover {
  background: var(--primary-hover-bg);
}

/* Tertiary buttons for quick-add */
.btn-tertiary {
  background: var(--tertiary-bg);
  color: var(--text-color);
}

.btn-tertiary:hover {
  background: var(--tertiary-hover-bg);
}

.quick-add-buttons {
  margin-top: 10px;
  margin-bottom: 30px; /* increased bottom margin to separate from notes title */
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.btn-secondary {
  background: var(--secondary-bg);
  color: var(--btn-text-color);
}

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

/* Language selection styling */
/* Top selects container styles */
.top-selects {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 10px;
  font-size: 16px;
}

/* Individual select groups within top selects */
.language-select,
.theme-select,
.mode-select {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 0; /* remove bottom margin since parent has margin */
}
.language-select-dropdown,
.theme-select-dropdown,
.mode-select-dropdown {
  padding: 4px 6px;
  border-radius: 4px;
  border: 1px solid #ccc;
  font-size: 14px;
}

/* Small buttons for notes area */
.small-btn {
  padding: 5px 10px;
  font-size: 14px;
}

.form-actions {
  margin-top: 20px;
}

/* Timer section */
#timer-section {
  text-align: center;
  width: 100%;
  /* Occupy the full viewport height and centre the timer vertically */
  padding: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}

Nrem;
  font-weight: 600;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  /* Make the timer container span the full available width */
  width: 100%;
  max-width: none;
  /* Set a minimum height so the timer area remains large even when the content is small */
  min-height: 60vh;
  box-sizing: border-box;
  color: var(--text-color);
}

#timer-display.green {
  /* Restore the coloured background and text for green state */
  background: var(--timer-green-bg);
  color: var(--timer-green-text);
}

#timer-display.orange {
  /* Restore the coloured background and text for orange state */
  background: var(--timer-orange-bg);
  color: var(--timer-orange-text);
}

#timer-display.red {
  /* Restore the coloured background and text for red state */
  background: var(--timer-red-bg);
  color: var(--timer-red-text);
}

/* Exam title */
.exam-title {
  font-size: 1.8rem;
  margin-bottom: 20px;
  font-weight: 500;
}

/* Hidden class */
.hidden {
  display: none !important;
}

/* Controls */
.controls {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 10px;
}

@media (max-width: 600px) {
  Nrem;
    /* Provide additional padding around the timer on small screens */
    padding: 40px;
    /* Maintain the same minimum height as on larger screens for consistency */
    min-height: 60vh;
  }
  #config {
    padding: 10px;
  }
  .phase-entry {
    flex-direction: column;
    gap: 5px;
  }
  .controls {
    flex-wrap: wrap;
    gap: 10px;
  }

  /* Increase interactive element sizes on small screens */
  .btn {
    font-size: 16px;
    padding: 12px 16px;
  }
  input[type="text"], input[type="number"], textarea {
    font-size: 16px;
    padding: 10px;
  }
  .logo-header .header-title {
    font-size: 1.2rem;
  }
}

@media (max-width: 768px) {
  #config {
    padding: 15px;
  }
}

/* Notes area styling */
.notes-area {
  margin-top: 30px;
  width: 90%;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.note-section {
  background: var(--note-bg);
  border: 1px solid var(--note-border-color);
  border-radius: 8px;
  padding: 15px;
  width: 100%;
  max-width: 400px;
  box-shadow: var(--note-shadow);
  transition: max-height 0.2s ease;
}

/* When collapsed, hide the list of notes */
.note-section.collapsed .note-list {
  display: none;
}

.note-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.note-header h3 {
  margin: 0;
  font-size: 1.2rem;
}

.note-list {
  list-style-type: disc;
  padding-left: 20px;
  margin: 0;
}

.note-list li {
  margin-bottom: 5px;
  text-align: left;
  word-wrap: break-word;
}

/* Overlay timer styling for concurrent timers (e.g., Dudas during Resolución)
   Positioned above the main timer display, centered horizontally. */
.overlay-timer {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--note-bg);
  border: 1px solid var(--note-border-color);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 1.2rem;
  box-shadow: var(--note-shadow);
  display: flex;
  gap: 8px;
  align-items: center;
  z-index: 10;
}

.overlay-timer.hidden {
  display: none;
}


/* ---------------- RESPONSIVE / MOBILE OPTIMIZATIONS ---------------- */
:root{
  --timer-font-min: 12vw;
  --timer-font-ideal: 16vw;
  --timer-font-max: 160px;
}

#app{
  padding-left: max(12px, env(safe-area-inset-left));
  padding-right: max(12px, env(safe-area-inset-right));
}

/* Make timer digits scale to viewport width and never overflow */
.timer-display {
  font-size: clamp(var(--timer-font-min), var(--timer-font-ideal), var(--timer-font-max));
  line-height: 1.05;
  word-break: keep-all;
  letter-spacing: 0.03em;
}

/* Ensure grids stack on narrow screens */
@media (max-width: 720px) {
  .top-controls{
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .language-select, .theme-select, .mode-select{
    min-width: 0;
  }
  #config .form-grid{
    grid-template-columns: 1fr;
  }
  .form-actions{
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .notes-grid{
    grid-template-columns: 1fr;
  }
  .splash-title{
    font-size: clamp(20px, 6vw, 42px);
  }
}

/* Handle landscape phones */
@media (max-height: 480px) and (orientation: landscape){
  main#app{
    padding-top: 6px;
  }
  .timer-card{
    margin-top: 4px;
  }
  .timer-display{
    font-size: clamp(10vw, 12vw, 100px);
  }
}

/* Improve touch targets on mobile */
button, .btn, select, input {
  min-height: 44px;
}

/* Avoid horizontal scroll */
html, body {
  overflow-x: hidden;
}

/* Accessibility: focus styles */
:focus-visible {
  outline: 3px solid var(--primary-bg);
  outline-offset: 2px;
}



/* -------------------- iPhone/Mobile Fixes v2 -------------------- */

/* Improve text sizing behavior on iOS */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html, body {
  height: 100%;
}

/* Avoid horizontal scroll and layout shifts */
body {
  overflow-x: hidden;
}

/* Use safe areas when available (requires viewport-fit=cover) */
#app {
  padding-left: max(12px, env(safe-area-inset-left));
  padding-right: max(12px, env(safe-area-inset-right));
  padding-bottom: max(16px, env(safe-area-inset-bottom));
}

/* Timer digits scale with the smaller viewport dimension to work in landscape */
.timer-display, Nrem;
  line-height: 1.05;
  letter-spacing: 0.035em;
  word-break: keep-all;
}

/* Ensure timer card/content never overflows */
.timer-card, .timer-section, #timer-section {
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* Top controls become auto-fit grid to prevent overflow */
.top-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}

/* No fixed widths on selects/inputs; make them shrink nicely */
select, input[type="number"], input[type="text"] {
  width: 100%;
  max-width: 100%;
  font-size: 16px; /* prevents iOS zoom on focus */
}

/* Buttons also larger for touch */
button, .btn {
  min-height: 44px;
}

/* Stack all grids on very narrow screens */
@media (max-width: 420px) {
  .notes-grid, .form-grid {
    grid-template-columns: 1fr !important;
  }
  .form-actions {
    grid-template-columns: 1fr !important;
  }
  .splash-title{
    font-size: clamp(18px, 7vw, 36px);
  }
}

/* Landscape phones with tiny heights */
@media (max-height: 420px) and (orientation: landscape) {
  main#app { padding-top: 6px; }
  .timer-card { margin-top: 4px; }
  .timer-display, Nrem; }
}


/* Utility: hide text label but keep accessibility */
.visually-hidden {
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}


/* Dominant digits: extra large for practicality in class */
#time-left{ font-size: clamp(16vmin, 28vmin, 40rem); line-height:0.95; letter-spacing:0.01em; font-weight:900; -webkit-text-stroke:0.035em currentColor; text-shadow:0 0 0.02em currentColor, 0.02em 0.02em 0.04em rgba(0,0,0,0.08); }


/* Hide phase label inside the colored box to give all space to the digits */
#phase-name{ 
  display: none !important;
}


/* Improve font rendering on WebKit */
#timer-display, #time-left{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Make the timer card allow the digits to occupy more space */
#timer-display{
  padding-top: 32px;
  padding-bottom: 32px;
}

/* ===== iPhone scroll 'sticky' fix for the config form ===== */
main{ align-items: stretch; } /* avoid vertical centering that interferes with scroll */

#config{
  position: relative;
  /* Use dynamic viewport height to account for iOS browser UI */
  min-height: 100dvh;
  /* Allow inner content to scroll if it overflows */
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  /* Safe area breathing room */
  padding-bottom: max(24px, env(safe-area-inset-bottom));
}

/* Give the last form actions extra margin so the button never hugs the bottom bar */
#config .form-actions{ margin-bottom: 24px; }

/* Prevent accidental sticky spacing with the splash screen in rare cases */
.splash-screen.hidden{ display:none !important; visibility:hidden !important; }

@media (max-height: 680px){
  .top-selects{ flex-wrap: wrap; gap: 10px; }
}


/* Recenter config panel horizontally, but keep scroll behaviour */
main{ 
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
#config{
  margin: 0 auto;
}


/* Digital scoreboard style for timer */
#time-left{
  font-family: 'Orbitron', monospace;
  font-weight: 700;
  -webkit-text-stroke: 0.015em currentColor; /* thinner stroke */
  text-shadow: 0 0 0.015em currentColor;
}