/* ============================================================
   controls.css — Sidebar UI — 2026 redesign
   ============================================================ */

/* ── Section accordion ────────────────────────────────────── */
details.sec {
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

details.sec > summary {
  padding: 14px 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
  user-select: none;
  transition: background 0.15s;
  position: relative;
}
details.sec > summary::-webkit-details-marker { display: none; }
details.sec > summary:hover { background: rgba(255,255,255,0.03); }

details.sec > summary::after {
  content: '›';
  font-size: 1.1rem;
  font-weight: 300;
  color: var(--text-muted);
  margin-left: auto;
  transition: transform 0.2s;
}
details.sec[open] > summary::after { transform: rotate(90deg); }

.sec-icon {
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
}
.sec-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-main);
  letter-spacing: 0.01em;
}
details.sec > summary:hover .sec-title { color: #fff; }

.sec-body {
  padding: 4px 20px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}

/* ── Section dividers & sub-labels ───────────────────────── */
.sec-divider {
  height: 1px;
  background: rgba(255,255,255,0.06);
  margin: 2px 0;
}
.sec-sub-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
}
.hint-text {
  font-size: 0.58rem;
  color: var(--text-muted);
  opacity: 0.7;
  line-height: 1.3;
  margin: -2px 0 0;
  letter-spacing: 0.01em;
}

/* ── Control wrappers ─────────────────────────────────────── */
.ctrl { display: flex; flex-direction: column; gap: 6px; }
.ctrl-row { display: flex; gap: 8px; }
.ctrl-row .ctrl { flex: 1; }

.lbl {
  font-size: 0.67rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

/* ── Inputs & Selects ─────────────────────────────────────── */
input[type=text],
input[type=number],
select {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid transparent;
  color: var(--text-main);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: 0.82rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  -webkit-appearance: none;
  appearance: none;
}

select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238e8ea6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}

input:focus, select:focus {
  border-color: var(--neon-blue);
  box-shadow: var(--shadow-glow-blue);
}

/* ── Range sliders ────────────────────────────────────────── */
input[type=range] {
  width: 100%;
  accent-color: var(--neon-blue);
  cursor: pointer;
  height: 4px;
}

.range-row { display: flex; align-items: center; gap: 10px; }
.range-row input[type=range] { flex: 1; }
.rval {
  font-size: 0.75rem;
  color: var(--neon-blue);
  font-weight: 700;
  min-width: 38px;
  text-align: right;
}

/* ── Toggles ──────────────────────────────────────────────── */
.tog-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.tog-lbl { font-size: 0.82rem; color: var(--text-main); line-height: 1.3; }

.tog {
  position: relative;
  width: 40px; height: 22px;
  background: var(--bg-hover);
  border-radius: 11px;
  cursor: pointer;
  transition: background 0.2s;
  flex-shrink: 0;
}
.tog.on { background: var(--neon-blue); }
.tog::after {
  content: '';
  position: absolute;
  width: 16px; height: 16px;
  background: white;
  border-radius: 50%;
  top: 3px; left: 3px;
  transition: transform 0.2s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.tog.on::after { transform: translateX(18px); }

/* ── Button groups ────────────────────────────────────────── */
.btn-grp { display: flex; gap: 4px; flex-wrap: wrap; }

.bopt {
  flex: 1;
  padding: 7px 6px;
  font-size: 0.74rem;
  font-weight: 600;
  font-family: inherit;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,0.08);
  background: var(--bg-input);
  color: var(--text-muted);
  cursor: pointer;
  text-align: center;
  transition: all 0.12s;
  white-space: nowrap;
}
.bopt:hover { background: var(--bg-hover); color: var(--text-main); }
.bopt.on {
  background: var(--neon-blue);
  border-color: var(--neon-blue);
  color: #fff;
  box-shadow: var(--shadow-glow-blue);
}

/* ── Toggle animation bounce ──────────────────────────────── */
@keyframes togBounceOn  { 0%{transform:scale(1)} 50%{transform:scale(1.08)} 100%{transform:scale(1)} }
@keyframes togBounceOff { 0%{transform:scale(1)} 50%{transform:scale(0.94)} 100%{transform:scale(1)} }
.tog-anim-on  { animation: togBounceOn  0.28s ease; }
.tog-anim-off { animation: togBounceOff 0.28s ease; }

/* ── Photo layout picker ──────────────────────────────────── */
.pl-picker {
  display: flex; gap: 8px;
}
.pl-opt {
  flex: 1;
  border: 2px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  background: var(--bg-input);
  cursor: pointer;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  aspect-ratio: 3/4;
  transition: border-color 0.15s;
  padding: 3px;
  gap: 2px;
}
.pl-opt.on { border-color: var(--neon-blue); }
.pl-opt:hover { border-color: rgba(29,140,248,0.5); }
.pl-ph-row {
  display: flex; gap: 2px;
}
.pl-ph {
  flex: 1;
  background: rgba(29,140,248,0.35);
  border-radius: 3px;
  flex-shrink: 0;
  min-height: 22px;
}
.pl-cal {
  flex: 1;
  background: rgba(255,255,255,0.1);
  border-radius: 3px;
}

/* ── Secondary buttons ────────────────────────────────────── */
.btn-sec {
  background: var(--bg-input);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 0.72rem;
  padding: 7px 10px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.btn-sec:hover { background: var(--bg-hover); color: var(--text-main); }

/* ── Reset colors button (visible, not shy) ───────────────── */
.btn-reset {
  width: 100%;
  background: rgba(253,93,147,0.08);
  border: 1px solid rgba(253,93,147,0.3);
  border-radius: var(--radius-sm);
  color: var(--neon-pink);
  font-size: 0.74rem;
  font-weight: 600;
  padding: 9px 12px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
  text-align: center;
}
.btn-reset:hover {
  background: rgba(253,93,147,0.16);
  border-color: rgba(253,93,147,0.6);
}

/* ── Print button ─────────────────────────────────────────── */
.btn-print-full {
  width: 100%;
  padding: 13px;
  font-size: 0.9rem;
  font-weight: 700;
  font-family: inherit;
  border-radius: var(--radius-md);
  border: none;
  background: var(--grad-pink);
  color: #fff;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s, box-shadow 0.15s;
  box-shadow: var(--shadow-glow-pink);
  letter-spacing: 0.02em;
}
.btn-print-full:hover {
  opacity: 0.9;
  transform: translateY(-1px);
  box-shadow: 0 8px 25px rgba(253,93,147,0.45);
}
.btn-print-full:active { transform: translateY(0); }

/* ── Multi-photo upload button ────────────────────────────── */
.btn-upload-multi {
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px dashed rgba(255,255,255,0.2);
  background: var(--bg-input);
  color: var(--text-main);
  font-size: 0.78rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s;
  text-align: left;
}
.btn-upload-multi:hover {
  border-color: var(--neon-blue);
  color: var(--neon-blue);
  background: rgba(29,140,248,0.06);
}
.btn-upload-multi:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Auto-fill button ─────────────────────────────────────── */
.btn-autofill {
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: none;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
  letter-spacing: 0.01em;
}
.btn-autofill:hover:not(:disabled) { opacity: 0.9; transform: translateY(-1px); }
.btn-autofill:disabled { opacity: 0.3; cursor: not-allowed; transform: none; }

/* ── Source rows (country / religion / sport) ─────────────── */
.source-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.source-row select { flex: 1; }

.source-rm {
  width: 26px; height: 26px;
  border-radius: 6px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.9rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s;
}
.source-rm:hover { background: rgba(253,93,147,0.15); color: var(--neon-pink); }

.feed-color-dot {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.15);
  cursor: pointer;
  padding: 0;
  background: none;
  flex-shrink: 0;
}

.add-source-btn {
  background: none;
  border: 1px dashed rgba(255,255,255,0.15);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 0.72rem;
  padding: 6px 10px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
  text-align: left;
}
.add-source-btn:hover {
  border-color: var(--neon-blue);
  color: var(--neon-blue);
}

/* ── Theme grid (color swatches) ──────────────────────────── */
.themes-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.tsw {
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.15s, transform 0.1s;
}
.tsw:hover { transform: scale(1.04); }
.tsw.on { border-color: var(--neon-blue); }
.tsw-ph { height: 8px; }
.tsw-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1px;
  padding: 3px;
}
.tsw-cell { height: 7px; border-radius: 1px; }
.tsw-name {
  padding: 3px 4px;
  font-size: 0.52rem;
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Typography pairings ──────────────────────────────────── */
.type-pairings-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 6px;
}
.type-sw {
  border-radius: 8px;
  padding: 8px 8px 5px;
  background: var(--bg-input);
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  overflow: hidden;
}
.type-sw:hover { background: var(--bg-hover); }
.type-sw.on { border-color: var(--neon-blue); background: rgba(29,140,248,0.06); }
.type-sw-month { font-size: 0.75rem; font-weight: 700; color: var(--text-main); line-height: 1; }
.type-sw-num   { font-size: 1.1rem; font-weight: 700; color: var(--text-main); line-height: 1.1; }
.type-sw-ev    { font-size: 0.55rem; color: var(--text-muted); margin-top: 1px; }
.type-sw-name  { font-size: 0.55rem; font-weight: 700; color: var(--neon-blue); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 4px; }

/* ── Style preset cards (4 quick-style buttons) ──────────── */
.style-presets-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.style-preset-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  border-radius: 8px;
  padding: 4px;
  border: 2px solid transparent;
  transition: border-color 0.15s, background 0.15s;
}
.style-preset-card:hover { background: rgba(255,255,255,0.04); }
.style-preset-card.on { border-color: var(--neon-blue); background: rgba(29,140,248,0.06); }
.spc-preview {
  width: 100%;
  aspect-ratio: 3/4;
  border-radius: 5px;
  border: 1px solid;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 4px 2px;
  overflow: hidden;
}
.spc-month { font-size: .45rem; letter-spacing: .04em; font-weight: 700; }
.spc-num   { font-size: .9rem; line-height: 1; }
.spc-dots  { display: flex; gap: 2px; margin-top: 2px; }
.spc-dots span { width: 4px; height: 4px; border-radius: 50%; }
.spc-name  { font-size: 0.6rem; text-align: center; color: var(--text-muted); }

/* ── Custom event list ─────────────────────────────────────── */
.ev-item {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-input);
  border-radius: 6px;
  padding: 5px 8px;
}
.ev-dot { width:8px;height:8px;border-radius:50%;flex-shrink:0; }
.ev-date { font-size:.62rem;color:var(--text-muted);white-space:nowrap; }
.ev-label { flex:1;font-size:.72rem;color:var(--text-main);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.ev-rm { background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:.8rem;padding:0 2px; }
.ev-rm:hover { color:var(--neon-pink); }

/* ── DPI warnings ─────────────────────────────────────────── */
.dpi-warn {
  font-size: 0.65rem;
  background: rgba(251,191,36,0.1);
  border: 1px solid rgba(251,191,36,0.25);
  border-radius: 6px;
  padding: 5px 8px;
  color: #fbbf24;
  line-height: 1.4;
}

/* ── Advanced disclosure accordions ──────────────────────── */
.adv-details {
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 4px;
}
.adv-summary {
  font-size: 0.62rem;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
  padding: 5px 7px;
  margin: 0 -7px;
  border-radius: 6px;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.02em;
  opacity: 0.75;
  transition: color 0.15s, background 0.15s, opacity 0.15s;
}
.adv-summary:hover { opacity: 1; }
.adv-summary::-webkit-details-marker { display: none; }
/* CSS chevron — cleaner than a character */
.adv-summary::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg); /* → pointing right when closed */
  margin-left: auto;
  flex-shrink: 0;
  transition: transform 0.2s cubic-bezier(0.4,0,0.2,1), border-color 0.15s;
  border-radius: 1px;
}
.adv-summary:hover {
  color: var(--text-main);
  background: rgba(255,255,255,0.04);
}
/* Open state — blue chevron pointing down, tinted background */
.adv-details[open] > .adv-summary {
  color: var(--neon-blue);
  background: rgba(29,140,248,0.07);
}
.adv-details[open] > .adv-summary::after {
  transform: rotate(45deg); /* ↓ pointing down when open */
}
/* Left accent line on open body for visual nesting */
.adv-details[open] > .adv-body {
  border-left: 2px solid rgba(29,140,248,0.3);
  padding-left: 10px;
  margin-left: 1px;
}
.adv-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 10px;
}

/* ── UI language selector ─────────────────────────────────── */
.ui-lang-sel {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  color: var(--text-main);
  font-size: 0.72rem;
  padding: 4px 6px;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s;
  max-width: 80px;
}
.ui-lang-sel:hover { background: rgba(255,255,255,0.1); }

/* ── Cell layers panel ────────────────────────────────────── */
.cell-layers-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.layer-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 7px;
  background: var(--bg-input);
  border: 1px solid rgba(255,255,255,0.06);
  cursor: grab;
  transition: background 0.12s, border-color 0.12s, opacity 0.15s;
  user-select: none;
}
.layer-item:hover { background: var(--bg-hover); }
.layer-item.layer-fixed { cursor: default; opacity: 0.5; }
.layer-item.dragging { opacity: 0.35; }
.layer-item.drag-over {
  border-color: var(--neon-blue);
  background: rgba(29,140,248,0.08);
}

.layer-drag {
  font-size: 0.9rem;
  color: var(--text-muted);
  cursor: grab;
  flex-shrink: 0;
}
.layer-icon { font-size: 0.85rem; flex-shrink: 0; }
.layer-label {
  flex: 1;
  font-size: 0.76rem;
  color: var(--text-main);
  font-weight: 500;
}

/* ── Buy Me a Coffee ──────────────────────────────────────── */
.bmc-link {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  color: var(--text-muted);
  text-decoration: none;
  padding: 5px 0;
  transition: color 0.15s;
}
.bmc-link:hover { color: var(--neon-pink); }