/**
 * css/modals.css
 * Modal-bakgrund/-fönster, redigera-knappen på tips samt kategori-pills
 * i "lägg till tips"-modalen.
 * Bruten ur app.css (Steg 8 Del A punkt 16, 2026-07-12) — ren flytt.
 */

/* ── Modaler ── */
.modal-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 5000;
  align-items: center;
  justify-content: center;
}
.modal-backdrop.scroll {
  align-items: flex-start;
  padding-top: 40px;
  overflow-y: auto;
}
.modal-box {
  background: #fff;
  border-radius: 18px;
  padding: 24px;
  width: 92%;
  box-shadow: var(--shadow-float);
  position: relative;
}
.modal-box-sm  { max-width: 380px; padding: 28px 28px 24px; }
.modal-box-md  { max-width: 420px; }
.modal-box-lg  { max-width: 440px; margin-bottom: 40px; }
.modal-close {
  position: absolute; top: 14px; right: 14px;
  background: #F3F4F6; border: none; border-radius: 50%;
  width: 28px; height: 28px;
  cursor: pointer; color: #6B7280;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
}
.modal-title {
  font-size: 17px; font-weight: 800; color: var(--ink); margin-bottom: 16px;
}
.modal-label {
  font-size: 11px; font-weight: 700; color: var(--text-muted);
  letter-spacing: .08em; text-transform: uppercase;
  display: block; margin-bottom: 5px;
}
.modal-input {
  width: 100%; padding: 8px 12px;
  border: 2px solid #E5E7EB; border-radius: 8px;
  font-size: 14px; font-family: inherit;
  outline: none; transition: border-color .15s;
}
.modal-input:focus { border-color: var(--accent); }
.modal-textarea {
  width: 100%; padding: 8px 12px;
  border: 2px solid #E5E7EB; border-radius: 8px;
  font-size: 14px; font-family: inherit;
  outline: none; resize: vertical; transition: border-color .15s;
}
.modal-textarea:focus { border-color: var(--accent); }
.modal-input-readonly {
  flex: 1; padding: 8px 12px;
  border: 2px solid #E5E7EB; border-radius: 8px;
  font-size: 14px; font-family: inherit;
  background: #F9FAFB; color: #6B7280; cursor: default;
}
.modal-field { margin-bottom: 14px; }
.modal-btn-primary {
  width: 100%; padding: 11px;
  background: var(--accent); color: #fff;
  border: none; border-radius: 10px;
  font-size: 14px; font-weight: 700;
  cursor: pointer; transition: opacity .15s;
  margin-bottom: 8px; font-family: inherit;
}
.modal-btn-primary:hover { opacity: .92; }
.modal-btn-secondary {
  width: 100%; padding: 10px;
  border: 1.5px solid #E5E7EB; border-radius: 10px;
  background: #fff; font-size: 14px; font-weight: 600;
  cursor: pointer; color: #6B7280; font-family: inherit;
  margin-bottom: 8px;
}
.modal-btn-danger {
  width: 100%; padding: 9px;
  background: none; color: #DC2626;
  border: 1.5px solid #FCA5A5; border-radius: 10px;
  font-size: 14px; font-weight: 600;
  cursor: pointer; font-family: inherit;
}

/* ── "Lägg till rad"-knapp (fjärde knappkategori, generaliserad 2026-07-16) ──
   Öppnar ett nytt fält/rad, inte en spara-handling — därför varken primär
   (grön) eller vanlig sekundär (fylld vit), utan streckad kant + accent-text.
   Flyttad hit från group-settings.css (låg där som en isolerad engångsstil,
   ".gs-add-cat-btn") eftersom mönstret är generellt för alla "lägg till en
   till rad"-knappar i modaler, inte bara kategorier i Gruppinställningar. */
.modal-btn-add-row {
  display: block; width: 100%; margin-top: 10px;
  padding: 9px; border-radius: 8px;
  border: 1px dashed var(--border-strong); background: #fff;
  font-size: 14px; font-weight: 600; color: var(--accent-text);
  cursor: pointer; font-family: inherit;
}
.modal-btn-add-row:disabled {
  border-color: #E5E7EB; color: var(--text-muted);
  cursor: default;
}
.modal-error { display: none; color: #DC2626; font-size: 12px; margin-bottom: 10px; }
.modal-warning {
  display: none; background: var(--warning-bg);
  border: 1px solid var(--warning-border); border-radius: 8px;
  padding: 10px 12px; margin-top: 10px;
  font-size: 12px; color: var(--warning-text); line-height: 1.5;
}
.modal-locked-label {
  display: none; font-size: 11px; color: #6B7280;
  margin-top: 4px; align-items: center; gap: 4px;
}
.modal-coords-row { display: flex; gap: 8px; }
.modal-details-toggle {
  background: none; border: none; cursor: pointer;
  font-size: 12px; font-weight: 600; color: #6B7280;
  padding: 0; display: flex; align-items: center; gap: 4px;
  font-family: inherit;
}
.modal-details-section {
  display: none;
  padding: 12px 12px 4px;
}
.modal-btn-row { display: flex; gap: 8px; margin-top: 14px; }
.modal-btn-row.column { flex-direction: column; }
/* Knappar i en RAD (standardriktning) ska dela utrymmet enligt sin roll,
   inte krympa/växa efter textlängd. Sekundärknappen (Avbryt) tar en del,
   primärknappen (huvudåtgärden) tar dubbelt så mycket — samma fördelning
   som redan användes via utspridda inline style="flex:2", nu satt en gång
   här. Gäller bara rad-layout — .modal-btn-row.column (två staplade
   knappar, t.ex. "Lägg till tips"/"Bjud in medlemmar") ska inte påverkas,
   där behöver båda knapparna sin fulla width:100% från grundstilen. */
.modal-btn-row:not(.column) .modal-btn-secondary { width: auto; flex: 1; margin-bottom: 0; }
.modal-btn-row:not(.column) .modal-btn-primary   { width: auto; flex: 2; margin-bottom: 0; }
.modal-btn-row:not(.column) .modal-btn-danger    { width: auto; flex: 1; margin-bottom: 0; }

/* ── Redigera-knapp ── */
.edit-btn {
  background: none; border: none; cursor: pointer;
  font-size: 20px; padding: 4px 6px; border-radius: 5px;
  line-height: 1; flex-shrink: 0;
  transition: background .1s;
  display: flex; align-items: center;
}
.edit-btn:hover { background: #F3F4F6; }
.edit-btn.own { color: var(--text-muted); }
.edit-btn.admin { color: var(--text-muted); }

/* ── Disclosure-rad, FRISTÅENDE ("Finjustera position") ──
   Kort + ikon + etikett + valfri förhandsvisningstext + höger-chevron,
   i en egen inramad rad. Används bara av rader som INTE hör ihop med
   annat innehåll — "Fler detaljer" använder istället .modal-collapsible-*
   nedan, eftersom dess innehåll (Plats/adress, Maps-länk, Länkar) ska
   synas som EN sammanhängande låda, inte en knapp ovanför en till låda
   (rättat Steg 8 Del C, 2026-07-16, efter granskning mot skiss). Delar
   ikon/etikett/förhandsvisning/chevron-stilarna med .modal-collapsible-header
   nedan via samma klassnamn (mdr-icon osv). */
.modal-disclosure-row {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 11px 12px;
  border: 1.5px solid #E5E7EB; border-radius: 10px;
  background: #fff; cursor: pointer;
  font-size: 14px; font-weight: 600; color: var(--ink);
  font-family: inherit; text-align: left;
}
.modal-disclosure-row:hover { background: #F9FAFB; }

/* ── Sammanhängande låda med klickbar rubrikrad ("Fler detaljer") ──
   En (1) ram runt hela sektionen, med rubrikraden som en del av samma
   låda (delare under när öppen) istället för en fristående knapp ovanför
   en andra ram med egen kant. */
.modal-collapsible-box {
  border: 1.5px solid #E5E7EB; border-radius: 10px;
  background: #fff; overflow: hidden;
}
.modal-collapsible-header {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 11px 12px;
  border: none; background: none; cursor: pointer;
  font-size: 14px; font-weight: 600; color: var(--ink);
  font-family: inherit; text-align: left;
}
.modal-collapsible-header:hover { background: #F9FAFB; }
.modal-collapsible-header[aria-expanded="true"] { border-bottom: 1px solid #F3F4F6; }

.mdr-icon { font-size: 15px; color: #6B7280; flex-shrink: 0; }
.mdr-label { flex: 1; }
.mdr-preview { font-size: 12px; color: var(--text-muted); font-weight: 500; flex-shrink: 0; }
.mdr-chevron { font-size: 15px; color: var(--text-muted); flex-shrink: 0; transition: transform .15s; }
[aria-expanded="true"] .mdr-chevron { transform: rotate(90deg); }

/* ── Place ID-statusrad (Steg 8 Del C punkt 12, 2026-07-16) ──
   Ersätter det redigerbara Place ID-fältet. Status, inte inmatning —
   speglar bara vad som redan står i Google Maps-länk-fältet just nu.
   Grön: länk finns och place_id kunde extraheras. Amber: länk finns men
   inget place_id kunde hittas. Fältet tomt = ingen rad alls (renderas
   inte, se add-tip.js). Grön återanvänder samma accent som "i resplan"
   (--accent-light/--accent-text) — inget nytt värde behövs. Amber
   återanvänder samma variabler som "ej besökt"-varningen. */
.tip-placeid-status {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-radius: 10px;
  font-size: 14px; font-weight: 600;
}
.tip-placeid-status i { font-size: 15px; flex-shrink: 0; }
.tip-placeid-status.found {
  background: var(--accent-light); color: var(--accent-text);
}
.tip-placeid-status.missing {
  background: var(--warning-bg); color: var(--warning-text);
  border: 1px solid var(--warning-border);
}

/* ── Dynamisk länklista (Steg 8 Del C punkt 11, 2026-07-16) ──
   Ett synligt länkpar (URL + text) i taget, byggt av add-tip.js. Denna
   rad är "+ Lägg till länk"-knappen som visas under det sista synliga
   paret, med räknare för hur många fler som får plats (tak: 3 st totalt,
   se MAX_TIP_LINKS i add-tip.js). Görs osynlig av JS när taket är nått. */
.tip-link-add-row {
  display: flex; align-items: center; gap: 6px;
  background: none; border: none; cursor: pointer;
  font-size: 14px; font-weight: 600; color: var(--accent-text);
  padding: 6px 2px; font-family: inherit;
}
.tip-link-add-row .tip-link-remaining { color: var(--text-muted); font-weight: 500; }
.tip-link-pair { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; position: relative; }
.tip-link-pair .modal-input { width: 100%; }
.tip-link-remove {
  position: absolute; top: -2px; right: -2px;
  background: #fff; border: none; cursor: pointer;
  color: var(--text-muted); padding: 4px; flex-shrink: 0;
  display: flex; align-items: center;
}
.tip-link-remove:hover { color: #DC2626; }

/* ── Auto-bredd-knapp i en rad med ett fält (Steg 8 Del C punkt 15,
   2026-07-16) ── Ersätter upprepad inline style="width:auto;padding:8px
   14px" på tre knappar (gs-guide-name, gs-add-cat, gs-startview) — samma
   mönster hade annars levt vidare som en fjärde/femte kopia nästa gång
   en liknande rad byggs. Bredden/paddingen är layout, hör hemma här;
   knappens FÄRG/radie kommer fortfarande från .modal-btn-primary/-secondary. */
.modal-btn-inline { width: auto; padding: 8px 14px; margin-bottom: 0; }

/* ── Kategori-pills i modal ── */
.tip-cat-pill {
  padding: 5px 12px; border-radius: 999px;
  border: 2px solid #E5E7EB;
  background: #fff; color: #6B7280;
  font-size: 14px; font-weight: 600;
  cursor: pointer; transition: all .12s;
  white-space: nowrap;
}
.tip-cat-pill.selected { border-color: currentColor; }