/* ==========================================================================
   Städschema Studio – visningssidan i studion (js/share.js)
   Dialogen "Visningssida", knappen i verktygsfältet, etiketten "Live" i listan,
   avsnittet Visningssida i Dokument-fliken och rutan före automatisk utloggning.
   Bygger på app.css (.modal, .btn, .input, variabler).
   ========================================================================== */

/* Knappen i verktygsfältet (#btn-viewpage): "Visningssida · Höst 2026" eller "Visningssida · av" */
.btn-viewpage {
  all: unset; box-sizing: border-box; cursor: pointer; flex: none;
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px 0 9px;
  border-radius: 999px; border: 1px solid var(--ui-border-strong); background: #fff;
  font-size: 12px; font-weight: 600; color: var(--ui-muted); white-space: nowrap;
  transition: border-color .12s, color .12s, background .12s;
}
.btn-viewpage[hidden] { display: none; }
.btn-viewpage:hover { border-color: var(--ui-accent); color: var(--ui-accent); }
.btn-viewpage:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
.btn-viewpage svg { width: 14px; height: 14px; flex: none; }
.btn-viewpage .vp-state { padding-left: 7px; margin-left: 1px; border-left: 1px solid var(--ui-border-strong); max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.btn-viewpage .vp-state[hidden] { display: none; }
/* Ett långt schemanamn kortas med … hellre än att verktygsfältet flödar över */
#topbar > .btn-viewpage { flex: 0 1 auto; }   /* krymper aldrig under ikonen, etiketten och början av namnet */
.btn-viewpage .vp-label { flex: none; }
.btn-viewpage .vp-state { flex: 0 1 auto; min-width: 0; white-space: nowrap; }
.btn-viewpage.is-live .vp-state { min-width: 64px; }   /* "Höst 2026" får alltid plats – längre namn kortas */
@media (max-width: 1400px) { .btn-viewpage .vp-state { max-width: 90px; } }
@media (max-width: 1100px) { #topbar > .btn-viewpage { flex: none; } }   /* bara ikonen */
.btn-viewpage.is-live { color: var(--ui-ok-fg); border-color: #BFE0C9; background: var(--ui-ok-bg); }
.btn-viewpage.is-live .vp-state { border-left-color: #BFE0C9; color: var(--ui-text); }
.btn-viewpage.is-live:hover { border-color: var(--ui-ok-fg); }
.btn-viewpage.is-off .vp-state { font-weight: 500; color: #7A8794; }

/* Etiketten "Live" i listan över sparade scheman (öppnar dialogen) */
.ss-live {
  all: unset; box-sizing: border-box; cursor: pointer; flex: none;
  font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ui-ok-fg); background: var(--ui-ok-bg); border: 1px solid #BFE0C9; border-radius: 999px; padding: 0 6px; line-height: 16px;
}
.ss-live:hover { border-color: var(--ui-ok-fg); }
.ss-live:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
/* Med både "Öppet" och "Live" och ett långt namn bryts etiketterna hellre än att namnet kortas */
.ss-name:has(.ss-live) { flex-wrap: wrap; row-gap: 3px; }
.ss-name:has(.ss-live) > span:first-child { max-width: 100%; }

/* Dokument-fliken: avsnittet Visningssida */
.live-section .vp-label { font-size: 12px; font-weight: 600; color: #3b4754; }
.live-section .vp-url { font-size: 12px; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; background: #F7F9FB; color: #3b4754; }
.live-section .vp-btns { margin-top: 3px; }

/* ---------- Dialogen ---------- */
.modal.share-modal { width: min(480px, 94vw); max-height: calc(100vh - 32px); overflow: auto; padding: 22px 24px 20px; }
.share-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.share-head h3 { margin: 0; font-size: 16.5px; line-height: 1.3; overflow-wrap: anywhere; }
.share-ico { flex: none; width: 30px; height: 30px; border-radius: 9px; background: var(--ui-accent-soft); color: var(--ui-accent); display: inline-flex; align-items: center; justify-content: center; }
.share-ico svg { width: 17px; height: 17px; }
.modal p.share-lead { margin: 0 0 16px; }

/* Väljaren "Visas nu": en rad per sparat schema + "Inget schema (dold)" */
.share-choose-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.share-busy { font-size: 12px; color: var(--ui-accent); font-weight: 600; }
.share-choose { display: flex; flex-direction: column; border: 1px solid var(--ui-border); border-radius: 12px; overflow: hidden; }
.share-opt { display: flex; align-items: center; gap: 11px; padding: 9px 13px; cursor: pointer; border-top: 1px solid var(--ui-border); background: #fff; transition: background .12s; }
.share-opt:first-child { border-top: 0; }
.share-opt:hover { background: #F7F9FB; }
.share-opt.on { background: var(--ui-ok-bg); }
.share-opt input { flex: none; margin: 0; width: 16px; height: 16px; accent-color: #2E7D4F; cursor: pointer; }
.share-opt-text { flex: 1; min-width: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.share-opt-name { font-weight: 600; font-size: 13.5px; color: var(--ui-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-opt.on .share-opt-name { color: var(--ui-ok-fg); }
.share-opt-sub { flex: none; font-size: 12px; color: var(--ui-muted); white-space: nowrap; }
.share-opt.none .share-opt-name { font-weight: 500; }
.share-opt.none .share-opt-sub { display: none; }
.share-opt.none.on { background: #F5F8FB; }
.share-opt.none.on .share-opt-name { color: var(--ui-text); font-weight: 600; }
.share-empty { padding: 12px 13px; border: 1px dashed var(--ui-border-strong); border-radius: 12px; background: #F5F8FB; }
.modal .share-empty p { margin: 0 0 10px; font-size: 12.5px; color: var(--ui-text); }

.share-link { margin-top: 16px; }
.share-label { display: block; font-size: 12px; font-weight: 600; color: #3b4754; margin-bottom: 5px; }
.share-url { width: 100%; font-size: 12.5px; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; background: #F7F9FB; }
.share-link-btns { display: flex; gap: 6px; margin-top: 8px; }

.share-qr { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 12px; border: 1px solid var(--ui-border); border-radius: 12px; }
.share-qr-code { flex: none; width: 124px; height: 124px; background: #fff; }
.share-qr-code svg { width: 100%; height: 100%; display: block; }
.share-qr-code.empty { display: flex; align-items: center; justify-content: center; text-align: center; padding: 8px; font-size: 11.5px; color: var(--ui-muted); background: #F7F9FB; border-radius: 8px; }
.modal p.share-qr-text { margin: 0; font-size: 12.5px; line-height: 1.45; }

.share-warn { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 11px 13px; border-radius: 12px; background: #FFFBF0; border: 1px solid #EFD08C; }
.modal .share-warn p { margin: 0; flex: 1; font-size: 12.5px; color: var(--ui-warn-fg); line-height: 1.45; }
.share-warn.local { margin-top: 0; background: #F5F8FB; border-color: var(--ui-border); }
.modal .share-warn.local p { color: var(--ui-text); }
.modal p.share-note { margin: 14px 0 0; font-size: 12.5px; line-height: 1.5; }
.share-modal .modal-actions { margin-top: 18px; }

/* ---------- Automatisk utloggning (js/app.js, Idle) ---------- */
.modal-back.idle-back { z-index: 900; }   /* över andra dialoger, under låsskärmen */
.modal.idle-modal { width: min(420px, 92vw); }
.idle-count { font-weight: 700; color: var(--ui-text); font-variant-numeric: tabular-nums; }
.gate-note { margin: -6px 0 12px; padding: 9px 12px; border-radius: 10px; background: #F2F6FA; color: #3b4754; font-size: 12.5px; line-height: 1.45; align-self: stretch; }
.gate-note[hidden] { display: none; }