/* CSS styles for the settings modal dialog */
/* ===== SETTINGS MODAL ===== */
.settings-modal {
  position: fixed;
  min-width: 320px;
  z-index: 11000;
  /* Last resort for a single expanded section taller than the window:
     settings.js collapses the other sections to make room, but never the only
     one left open. 32px is that module's MODAL_VIEWPORT_MARGIN; the 4em is the
     padding of .modal-content, which max-height does not cover (the dialog is
     content-box — there is no global border-box reset) and which therefore has
     to be handed back so the outer height matches the budget settings.js
     measures against. Keeping the margin in px and the padding in em is what
     makes the two agree at any root font size. */
  max-height: calc(var(--visible-viewport-height, 100vh) - 32px - 4em);
  overflow-y: auto;
}

/* The dialog is centred in this overlay, so a budget that only limits its
   height is not enough: centred in a layout viewport taller than the visible
   one, a dialog of exactly the allowed height still hangs off the bottom of
   the screen by half the difference, and a fixed overlay does not scroll.
   Centring within the visible height instead is what makes the height budget
   in settings.js mean what it says. Unset (every desktop browser, and iPad
   when it behaves) this is just 100vh, the .modal-overlay default. */
#settingsOverlay {
  height: var(--visible-viewport-height, 100vh);
}

.settings-header {
  width: 100%;
  display: flex;
  justify-content: center;
}

#slideshowSettingsLabel {
  color: #f3ef0a;
  margin-bottom: 1em;
  font-size: 1.5em !important;
  text-align: center;
}

#slideshowIcon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 4px;
}

.settings-main {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
}

.delay-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  margin-right: 2em;
}

.delay-control-buttons {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}

#slowerBtn,
#fasterBtn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.2s ease;
}

#slowerBtn:hover,
#fasterBtn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
}

#modeControls {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
  justify-content: flex-start;
}

#modeControls > span {
  margin-bottom: 0.5em;
}

#modeRadioGroup {
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: center;
  justify-content: center;
}

#modeLabel {
  margin-bottom: 1.2em;
}

#modeRadioGroup label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  white-space: nowrap;
}

#modeRadioGroup input[type="radio"] {
  margin: 0;
}

#deleteMethodRadioGroup {
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: center;
}

#deleteMethodRadioGroup label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  white-space: nowrap;
}

#deleteMethodRadioGroup input[type="radio"] {
  margin: 0;
}

.setting-row {
  display: flex;
  align-items: flex-start;
  gap: 1em;
  margin-top: 1em;
}

.setting-row label,
#delayLabel,
#modeLabel {
  font-size: 16px;
  color: #faea0e;
  align-self: flex-start;
  text-align: right;
}

.setting-input-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch; /* <-- changed from flex-start */
}

.setting-input-container input[type="checkbox"] {
  align-self: flex-start;
  margin-top: 0.3em;
}

#locationiqApiKeyForm {
  width: 100%;
  margin: 0;
}

#locationiqApiKeyInput {
  width: 100%;
  box-sizing: border-box; /* ensures padding/border don't shrink the input */
  border-radius: 4px;
  border: 1px solid #888;
  padding: 0.2em;
}

#highWaterMarkInput {
  width: 4em;
  border-radius: 4px;
  border: 1px solid #888;
  padding: 0.2em;
}


#invokeaiUrlInput,
#invokeaiUsernameInput,
#invokeaiPasswordInput {
  width: 100%;
  box-sizing: border-box;
}

#albumSelect {
  padding: 0.5em;
  border-radius: 4px;
  border: 1px solid #888;
  background: #333;
  color: #fff;
}

#albumSelect:focus {
  outline: none;
  border-color: #00ff99;
  box-shadow: 0 0 4px rgba(0, 255, 153, 0.3);
}

.album-selector-group {
  display: flex;
  gap: 0.5em;
  align-items: center;
  flex: 1;
}

.album-selector-group #albumSelect {
  flex: 1;
  min-width: 120px;
}

.album-selector-group #manageAlbumsBtn {
  flex-shrink: 1;
  white-space: nowrap;
  padding: 0.4em 0.8em;
  max-width: fit-content;
}

#delayValue {
  color: #fff;
  font-weight: bold;
  min-width: 30px;
  text-align: center;
  font-size: 16px;
}

#delayLabel,
#modeLabel {
  color: #fff;
  white-space: nowrap;
  margin-bottom: 0.5em;
}

/* ===== ACCORDION SECTIONS ===== */
.settings-accordion {
  margin-top: 1em;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  overflow: hidden;
}

.accordion-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.6em 0.8em;
  background: rgba(255, 255, 255, 0.05);
  border: none;
  color: #faea0e;
  font-size: 1em;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease;
}

.accordion-header:hover {
  background: rgba(255, 255, 255, 0.1);
}

.accordion-chevron {
  display: inline-block;
  font-size: 0.7em;
  transition: transform 0.2s ease;
}

.accordion-header[aria-expanded="true"] .accordion-chevron {
  transform: rotate(90deg);
}

.accordion-body {
  display: none;
  padding: 0 0.8em 0.8em;
}

.accordion-body.open {
  display: block;
}

/* Reset-to-defaults link sits below all accordions, visually separated
   from the API Integration block above. Rendered as a bold red text link
   rather than a filled button — the action is destructive but rare, and a
   heavy red button reads as a primary call-to-action. */
.reset-all-section {
  display: flex;
  justify-content: center;
  margin-top: 1em;
  padding-top: 0.8em;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.reset-defaults-link {
  background: none;
  border: none;
  padding: 0.2em 0.4em;
  color: #ef5350;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.reset-defaults-link:hover {
  color: #ff7961;
}

.reset-defaults-link:focus-visible {
  outline: 2px solid #ef5350;
  outline-offset: 2px;
}