/* Kajplan — plan, avvägd och saklig.
 * Principer: platta ytor (ingen skugga, ingen gradient), 1 px linjer, 4 px hörn, en enda accentfärg,
 * ikoner i stället för emojis, färg bara där den betyder något (status). Systemets teckensnitt.
 * Accentfärgen (--primary) kan bytas per kund via inställningen "profilfärg".
 */
:root {
  --primary:      #0d6e7a;
  --primary-dark: #095560;
  --primary-bg:   #e9f3f5;

  --bg:           #f6f7f9;
  --surface:      #ffffff;
  --card-bg:      #ffffff;
  --border:       #e1e5ea;
  --border-strong:#c9d0d9;
  --text:         #1b2430;
  --text-muted:   #5a6675;
  --hover:        #f3f5f8;

  --success:      #17703f;  --success-bg: #e7f4ec;
  --danger:       #b42318;  --danger-bg:  #fdeceb;
  --warning:      #8a5300;  --warning-bg: #fdf3dc;
  --info:         #1d4f91;  --info-bg:    #e8f0fb;

  /* Kartans och platsernas statusfärger (används av JS och tabeller). */
  --free:         #2f9e5f;
  --occupied:     #c8483d;
  --highlighted:  #d98a1c;
  --inactive:     #8b96a4;

  --radius:       4px;
  --sidebar-w:    248px;

  /* Lagerordning. Ett nytt lager väljer ett namn härifrån, inte ett eget tal — det är så
     hjälppanelen hamnade bakom kartan. Kartorna ligger utanför skalan: de är egna
     stacking-kontexter (``isolation: isolate``), så Leaflets 100–1000 når aldrig hit. */
  --z-sticky:     100;   /* mobilraden och hjälpknappens remsa */
  --z-scrim:      140;   /* skuggan bakom mobilmenyn */
  --z-drawer:     150;   /* mobilmenyn */
  --z-panel:      200;   /* hjälppanelen */
  --z-lightbox:   300;   /* bildvisaren */
  --z-cookie:     900;   /* cookie-rutan */
  --z-skip:       999;   /* hoppa till innehållet — alltid överst när den får fokus */
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-dark); text-decoration: underline; }
h1, h2, h3 { font-weight: 600; line-height: 1.3; }

/* ── Ikoner ───────────────────────────────────────────────── */
.icon {
  width: 1.15em; height: 1.15em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
  vertical-align: -.2em;
}
.icon-lg { width: 1.5em; height: 1.5em; }
.icon-muted { color: var(--text-muted); }

/* ── Applikationsskal: sidomeny + innehåll ────────────────── */
.app { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100vh; }
.app-main { min-width: 0; display: flex; flex-direction: column; }

.side {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column;
  background: var(--surface); border-right: 1px solid var(--border);
  padding: .9rem .65rem;
}
.side-brand { display: flex; align-items: center; gap: .65rem; padding: .15rem .45rem .7rem; color: var(--text); text-decoration: none; }
.side-brand:hover { text-decoration: none; color: var(--text); }
.side-brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.side-brand-text strong { font-size: .95rem; }
.side-brand-text small { color: var(--text-muted); font-size: .75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.brand-mark {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 30px; height: 30px; border-radius: var(--radius);
  background: var(--primary); color: #fff;
}
.brand-mark .icon { width: 18px; height: 18px; }

.side-nav { display: flex; flex-direction: column; gap: 1px; flex: 1; }
.side-label { margin: .8rem .55rem .25rem; font-size: .72rem; font-weight: 600; color: var(--text-muted); letter-spacing: .02em; }
.side-link {
  display: flex; align-items: center; gap: .65rem; width: 100%;
  padding: .38rem .55rem; border: 0; border-radius: var(--radius);
  background: none; color: var(--text); font: inherit; font-size: .875rem; text-align: left; text-decoration: none; cursor: pointer;
}
.side-link .icon { width: 18px; height: 18px; color: var(--text-muted); }
.side-link:hover { background: var(--hover); color: var(--text); text-decoration: none; }
.side-link.active { background: var(--primary-bg); color: var(--primary-dark); font-weight: 600; }
.side-link.active .icon { color: var(--primary); }

.side-foot { border-top: 1px solid var(--border); margin-top: 1rem; padding-top: .6rem; display: flex; flex-direction: column; gap: 1px; }
.side-form { margin: 0; }
.side-user { display: flex; align-items: center; gap: .6rem; padding: .4rem .55rem; border-radius: var(--radius); color: var(--text); text-decoration: none; }
.side-user:hover { background: var(--hover); text-decoration: none; color: var(--text); }
.side-user.active { background: var(--primary-bg); }
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--hover); color: var(--text-muted); border: 1px solid var(--border); flex: none; }
.avatar .icon { width: 16px; height: 16px; }
.side-user-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.side-user-text strong { font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-user-text small { color: var(--text-muted); font-size: .74rem; }

.mobile-bar { display: none; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); cursor: pointer; }
.icon-btn:hover { background: var(--hover); }

/* Hjälpknappen: en ikon i sidans övre högra hörn, som följer med vid rullning.
   Remsan är noll pixlar hög och klistrad, så knappen varken flyttar innehållet eller lägger sig över bannrarna.
   Sidhuvuden med knappar till höger (.page-header-split) håller undan så att de aldrig hamnar under den. */
.page-tools { position: sticky; top: 0; z-index: var(--z-sticky); height: 0; display: flex; justify-content: flex-end; padding-right: 1.1rem; }
.help-button { position: relative; top: .8rem; border-radius: 999px; color: var(--text-muted); }
.help-button:hover { color: var(--text); }
.help-button[aria-expanded="true"] { background: var(--primary-bg); border-color: var(--primary); color: var(--primary-dark); }
.page-header-split { padding-right: 3rem; }
@media (max-width: 700px) { .page-tools { padding-right: .7rem; } .help-button { top: .55rem; width: 36px; height: 36px; } }
.side-scrim { position: fixed; inset: 0; background: rgba(20, 28, 38, .4); z-index: var(--z-scrim); }

@media (max-width: 960px) {
  .app { display: block; }
  .mobile-bar { display: flex; align-items: center; gap: .75rem; position: sticky; top: 0; z-index: var(--z-sticky); padding: .55rem 1rem; background: var(--surface); border-bottom: 1px solid var(--border); }
  .mobile-bar .brand { display: flex; align-items: center; gap: .55rem; font-weight: 600; color: var(--text); }
  .mobile-bar .brand:hover { text-decoration: none; }
  .side { position: fixed; left: 0; top: 0; bottom: 0; width: min(300px, 86vw); z-index: var(--z-drawer); transform: translateX(-100%); transition: transform .18s ease; }
  .side.open { transform: none; }
}

/* ── Sidinnehåll ──────────────────────────────────────────── */
.container { max-width: 1320px; width: 100%; margin: 0 auto; padding: 1.75rem 2rem 3rem; }
@media (max-width: 700px) { .container { padding: 1.1rem 1rem 2.5rem; } }

.page-header { margin-bottom: 1.35rem; }
.page-header h1 { font-size: 1.35rem; display: flex; align-items: center; gap: .55rem; }
.page-header h1 .icon { width: 1.2em; height: 1.2em; }
h1 .icon, h2 .icon { color: var(--text-muted); }
h1 .icon { margin-right: .15em; }
.page-header p  { color: var(--text-muted); font-size: .875rem; margin-top: .25rem; max-width: 70ch; }

.two-col   { display: grid; grid-template-columns: 1fr 1fr;     gap: 1.25rem; }
.three-col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.25rem; }
.four-col  { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
@media (max-width: 900px) { .two-col, .three-col, .four-col { grid-template-columns: 1fr; } }
@media (min-width: 901px) and (max-width: 1200px) { .four-col { grid-template-columns: repeat(2, 1fr); } }

/* ── Ytor ─────────────────────────────────────────────────── */
.card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; }
.card h2 { font-size: 1rem; margin-bottom: .75rem; display: flex; align-items: center; gap: .5rem; }
.card h3 { font-size: .9rem; margin-bottom: .6rem; }

.metric-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: .3rem; }
.metric-card .label { font-size: .8rem; color: var(--text-muted); font-weight: 500; display: flex; align-items: center; gap: .4rem; }
.metric-card .label .icon { width: 16px; height: 16px; }
.metric-card .value { font-size: 1.75rem; font-weight: 600; line-height: 1.1; color: var(--text); font-variant-numeric: tabular-nums; }
.metric-card .sub   { font-size: .78rem; color: var(--text-muted); }

/* ── Tabeller ─────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .85rem; }
thead th { border-bottom: 1px solid var(--border-strong); padding: .5rem .75rem; text-align: left; font-weight: 600; font-size: .78rem; color: var(--text-muted); white-space: nowrap; }
tbody td { padding: .6rem .75rem; border-bottom: 1px solid var(--border); vertical-align: middle; font-variant-numeric: tabular-nums; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--hover); }
.table-caption { font-size: .78rem; color: var(--text-muted); margin-top: .5rem; }

/* ── Statusmärken ─────────────────────────────────────────── */
.badge { display: inline-flex; align-items: center; gap: .3rem; padding: .1rem .5rem; border-radius: 3px; font-size: .75rem; font-weight: 500; line-height: 1.5; white-space: nowrap; background: var(--hover); color: var(--text-muted); }
.badge .icon { width: 13px; height: 13px; }
.badge-free     { background: var(--success-bg); color: var(--success); }
.badge-occupied { background: var(--danger-bg);  color: var(--danger); }
.badge-inactive { background: var(--hover);      color: var(--text-muted); }
.badge-role     { background: var(--primary-bg); color: var(--primary-dark); }
.badge-area     { background: #efedf9; color: #4a3aa0; }
.badge-ok       { background: var(--success-bg); color: var(--success); }
.badge-warn     { background: var(--warning-bg); color: var(--warning); }
.badge-pending  { background: var(--info-bg);    color: var(--info); }

/* ── Formulär ─────────────────────────────────────────────── */
.form-group       { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .8rem; }
.form-group label { font-size: .82rem; font-weight: 500; color: var(--text); }

/* Lösenordets checklista (ui.js). Färgen är aldrig ensam bärare: markören byter tecken också. */
.pw-rules { list-style: none; margin: .1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .15rem .9rem; }
.pw-rules li { display: flex; align-items: center; gap: .3rem; font-size: .78rem; color: var(--text-muted); }
.pw-rules .pw-mark { width: .9em; text-align: center; }
.pw-rules .pw-mark::before { content: "\2022"; }
.pw-rules li.ok { color: var(--success); }
.pw-rules li.ok .pw-mark::before { content: "\2713"; }
.pw-rules li.missing { color: var(--danger); }
.pw-rules li.missing .pw-mark::before { content: "\00d7"; }

input[type="text"], input:not([type]), input[type="email"], input[type="number"], input[type="search"], input[type="date"],
input[type="tel"], input[type="url"], input[type="time"], input[type="password"], select, textarea {
  width: 100%; min-height: 36px; padding: .4rem .65rem;
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  font: inherit; font-size: .875rem; color: var(--text); background: #fff;
  transition: border-color .12s, box-shadow .12s;
}
select { appearance: none; -webkit-appearance: none; padding-right: 2rem;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235a6675' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right .6rem center; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); }
input::placeholder, textarea::placeholder { color: #8b96a4; }
input[type="checkbox"], input[type="radio"] { width: 1rem; height: 1rem; accent-color: var(--primary); vertical-align: -.15em; margin-right: .3rem; }
input[type="color"] { width: 2.5rem; height: 2.2rem; padding: .1rem; cursor: pointer; border: 1px solid var(--border-strong); border-radius: var(--radius); }
input:disabled, select:disabled, textarea:disabled { background: var(--hover); color: var(--text-muted); }
textarea { resize: vertical; min-height: 72px; }
fieldset { border: 1px solid var(--border); border-radius: var(--radius); padding: .6rem .8rem; }
legend { font-size: .8rem; color: var(--text-muted); padding: 0 .3rem; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }

/* ── Knappar ──────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 34px; padding: .35rem .9rem;
  border: 1px solid transparent; border-radius: var(--radius);
  font: inherit; font-size: .875rem; font-weight: 500; line-height: 1.2;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color .12s, border-color .12s, color .12s;
}
.btn:hover { text-decoration: none; }
.btn .icon { width: 1.05em; height: 1.05em; }
.btn-primary   { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; }
.btn-secondary { background: #fff; border-color: var(--border-strong); color: var(--text); }
.btn-secondary:hover { background: var(--hover); color: var(--text); }
.btn-danger    { background: #fff; border-color: #e3aaa5; color: var(--danger); }
.btn-danger:hover { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.btn-sm { min-height: 28px; padding: .2rem .6rem; font-size: .78rem; }
.btn-lg { min-height: 48px; padding: .6rem 1.1rem; font-size: 1rem; }
.btn-full, .btn-block { width: 100%; }
.btn-block { margin-top: .5rem; }

/* ── Sökfält, flikar ──────────────────────────────────────── */
.search-bar { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; flex-wrap: wrap; }
.search-bar input { max-width: 320px; }

.tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--border); margin-bottom: 1.25rem; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab-btn { padding: .55rem 1rem; background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; font: inherit; font-size: .875rem; font-weight: 500; color: var(--text-muted); cursor: pointer; white-space: nowrap; }
.tab-btn:hover { color: var(--text); }
.tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); }
.tab-content { display: none; }
.tab-content.active { display: block; }

/* ── Kartor ───────────────────────────────────────────────── */
/* ── Kartan och lagerordningen ────────────────────────────────
   Leaflet numrerar sina egna lager 100–1000, och kontrollhörnen (.leaflet-top/.leaflet-bottom)
   ligger överst på 1000. De siffrorna äger vi inte — de står i leaflet.css och följer med vid
   en uppgradering. Utan motåtgärd tävlar de med sidans egna lager, och eftersom sidans högsta
   ligger på 999 hamnade hjälppanelen, mobilmenyn och bildvisaren bakom kartan.

   ``isolation: isolate`` gör kartan till en egen stacking-kontext. Hela Leaflets skala stannar
   då inne i rutan och kan aldrig nå ut, oavsett vilka tal biblioteket väljer i framtiden. Det
   klipper ingenting — klippningen sköter ``overflow`` nedan. */
.map-container { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); isolation: isolate; }
#harbour-map { height: 720px; }
#harbour-map.is-picking { cursor: crosshair; }
#harbour-map.is-moving .leaflet-interactive { cursor: move; }

/* ── Kartans arbetsyta: lista | karta | panel ──────────────────
   Tre spalter som svarar på var sin fråga, i läsordning: vad finns i hamnen, var ligger det, och vad
   kan jag göra med det jag markerat. Listan och kartan markerar samma objekt — panelen är det enda
   stället där åtgärder bor, så samma sak aldrig går att göra på två ställen. */
.map-workspace { display: grid; grid-template-columns: 240px minmax(0, 1fr) 320px; gap: 1rem; align-items: start; }
.map-tree, .map-inspector { display: flex; flex-direction: column; gap: .75rem; min-width: 0; }
.map-tree-card, .map-inspector-card { max-height: 760px; overflow-y: auto; }
.map-stage { position: relative; min-width: 0; }

/* Listraderna är knappar: markeringen ska gå att nå med tangentbordet, inte bara med musen. */
.tree-row { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; width: 100%;
  text-align: left; background: none; border: none; border-bottom: 1px solid var(--border);
  padding: .4rem .3rem; font-size: .85rem; font-family: inherit; color: var(--text); cursor: pointer; }
.tree-row:last-child { border-bottom: none; }
.tree-row:hover { background: var(--hover); }
.tree-row.is-child { padding-left: 1rem; font-size: .8rem; }
.tree-row.is-selected { background: var(--primary-bg); box-shadow: inset 3px 0 0 var(--primary); font-weight: 600; }
.tree-row .text-muted { flex: none; }
.map-add { border-top: 1px solid var(--border); margin-top: .5rem; padding-top: .6rem; }

/* Lägesfältet: allt som är ett tillfälligt läge syns här, med en väg ut. Det ligger över kartan så att
   blicken hittar det utan att lämna det man håller på med. */
.map-modebar { position: absolute; z-index: 500; top: .5rem; left: .5rem; right: .5rem;
  display: flex; gap: .75rem; align-items: center; justify-content: space-between;
  background: #111827; color: #fff; border-radius: var(--radius); padding: .5rem .75rem; font-size: .85rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.map-modebar .btn { flex: none; }

/* Högerklicksmenyn på en plats. Ligger utanför .map-container, som isolerar Leaflets egen z-skala,
   och över lägesfältet (500) så att den aldrig hamnar bakom något. */
.map-menu { position: absolute; z-index: 600; min-width: 200px; background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: 0 4px 14px rgba(0,0,0,.18); padding: .25rem; overflow: hidden; }
.map-menu-item { display: block; width: 100%; text-align: left; background: none; border: none;
  padding: .45rem .6rem; font-size: .85rem; font-family: inherit; color: var(--text); cursor: pointer; border-radius: 3px; }
.map-menu-item:hover, .map-menu-item:focus { background: var(--hover); outline: none; }
.map-menu-item:focus-visible { box-shadow: inset 0 0 0 2px var(--primary); }

.map-view-card summary { cursor: pointer; font-size: .85rem; }
.map-view-card label { display: flex; align-items: center; gap: .4rem; font-size: .85rem; margin-bottom: .25rem; cursor: pointer; }
.map-view-card .legend { margin-bottom: .5rem; }

/* Stegen i panelen: ett i taget, aldrig en hög. */
.inspector-step { border-top: 1px solid var(--border); margin-top: .75rem; padding-top: .75rem; }
.step-count { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-bottom: .5rem; }

@media (max-width: 1200px) {
  .map-workspace { grid-template-columns: 220px minmax(0, 1fr); }
  .map-inspector { grid-column: 1 / -1; }
  .map-inspector-card { max-height: none; }
}
@media (max-width: 900px) {
  .map-workspace { grid-template-columns: 1fr; }
  .map-tree-card { max-height: 320px; }
  #harbour-map { height: 440px; }
}

#berth-detail { margin-top: 1rem; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem .75rem; font-size: .875rem; }
.detail-grid dt { color: var(--text-muted); font-weight: 500; }
.detail-grid dd { font-weight: 500; }
tr.highlighted { background: var(--warning-bg) !important; }

.legend { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .8rem; color: var(--text-muted); margin-bottom: .75rem; }
/* Ringen gör punkten urskiljbar också för de statusfärger som inte själva når 3:1 mot kortet (WCAG 1.4.11). */
.legend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: .3rem; vertical-align: middle; box-shadow: 0 0 0 1px #1a252f; }
/* Samma märke som kartan ger den släppta platsen: streckad kant, eftersom färgen inte räcker (se harbour-map.js). */
.legend-dot.is-dashed { box-shadow: none; border: 2px dashed #1a252f; width: 12px; height: 12px; }

/* Ramen runt platsen bär två oberoende kanaler: färgen är platstypen, bredden är storleksklassen.
   Båda sätts inline från app/services/map_palette.py, så teckenförklaringen och kartan aldrig glider isär. */
.legend-ring { width: 12px; height: 12px; border-radius: 3px; display: inline-block; margin-right: .3rem; vertical-align: middle; border: 1px solid #1a252f; background: transparent; }
/* Den ljusa fyllnaden behöver en mörkare ring för att synas mot kortet (WCAG 1.4.11). */
.legend-dot.is-light { box-shadow: 0 0 0 1px #1a252f; }
.legend-title { font-weight: 600; margin-right: .2rem; }
.legend + .legend { margin-top: .3rem; }

.season-selector { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.season-selector label { font-size: .78rem; color: var(--text-muted); }
.season-selector input { width: 80px; }

/* ── Hjälpklasser ─────────────────────────────────────────── */
.mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: .5rem; } .mb-2 { margin-bottom: 1rem; }
.divider { border: none; border-top: 1px solid var(--border); margin: 1rem 0; }
.text-muted { color: var(--text-muted); font-size: .82rem; }
.hidden { display: none !important; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.htmx-indicator { opacity: 0; transition: opacity .2s; }
.htmx-request .htmx-indicator { opacity: 1; }
.inline-form { display: inline-flex; align-items: center; gap: .3rem; margin: 0; }
.actions-cell { display: flex; gap: .3rem; flex-wrap: wrap; }
.filter-row { display: flex; gap: .75rem; align-items: flex-end; flex-wrap: wrap; }

/* ── Tillgänglighet ───────────────────────────────────────── */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: var(--z-skip); background: var(--primary); color: #fff; padding: .6rem 1rem; border-radius: 0 0 var(--radius) 0; }
.skip-link:focus { left: 0; color: #fff; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ── Bannrar och meddelanden ──────────────────────────────── */
.env-banner { display: flex; align-items: center; justify-content: center; gap: .5rem; flex-wrap: wrap; background: var(--warning-bg); color: var(--warning); border-bottom: 1px solid #ecd9a4; font-size: .8rem; padding: .35rem 1rem; text-align: center; }
.env-banner .icon { width: 15px; height: 15px; }
.env-banner a { color: inherit; text-decoration: underline; }
.banner-danger { background: var(--danger-bg); color: var(--danger); border-bottom-color: #efc3bf; }
.banner-warn   { background: var(--warning-bg); color: var(--warning); }
.banner-info   { background: var(--info-bg); color: var(--info); border-bottom-color: #c9dbf5; }

.alert { display: flex; gap: .6rem; align-items: flex-start; border-radius: var(--radius); padding: .65rem .9rem; font-size: .875rem; margin-bottom: 1rem; border: 1px solid transparent; }
.alert::before { content: ""; flex: none; width: 1.1rem; height: 1.1rem; margin-top: .1rem; background: currentColor; -webkit-mask: var(--alert-icon) center / contain no-repeat; mask: var(--alert-icon) center / contain no-repeat; }
.alert-success { --alert-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); background: var(--success-bg); border-color: #bfe0cd; color: var(--success); }
.alert-error   { --alert-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' x2='12' y1='8' y2='12'/%3E%3Cline x1='12' x2='12.01' y1='16' y2='16'/%3E%3C/svg%3E"); background: var(--danger-bg); border-color: #f0c4c0; color: var(--danger); }
.alert-info    { --alert-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E"); background: var(--info-bg); border-color: #c9dbf5; color: var(--info); }

/* ── Inloggning ───────────────────────────────────────────── */
.auth-body { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg); padding: 1.5rem; }
.auth-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 2rem; width: 100%; max-width: 400px; }
.auth-brand { display: flex; align-items: center; gap: .6rem; font-size: 1.2rem; color: var(--text); }
.auth-org   { color: var(--text-muted); font-size: .85rem; margin: .35rem 0 1.4rem; }
.auth-form  { margin-top: .5rem; }
.auth-foot  { margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--border); font-size: .78rem; color: var(--text-muted); }

/* ── Topplist (plattformskonsol, publik och portal) ───────── */
.navbar, .public-head { display: flex; align-items: center; gap: 1rem 1.75rem; background: var(--surface); border-bottom: 1px solid var(--border); padding: 0 1.5rem; min-height: 56px; flex-wrap: wrap; }
.public-head { padding-top: .55rem; padding-bottom: .55rem; }
.navbar .brand, .public-head .brand { display: inline-flex; align-items: center; gap: .55rem; font-weight: 600; color: var(--text); white-space: nowrap; }
.navbar .brand:hover, .public-head .brand:hover { text-decoration: none; color: var(--text); }
.navbar .brand small { color: var(--text-muted); font-weight: 400; }
.public-org { color: var(--text-muted); font-size: .85rem; padding-left: 1rem; border-left: 1px solid var(--border); }
.nav-links { display: flex; gap: .15rem; flex-wrap: wrap; }
.nav-links a { display: inline-flex; align-items: center; gap: .45rem; color: var(--text); padding: .4rem .7rem; border-radius: var(--radius); font-size: .875rem; }
.nav-links a .icon { color: var(--text-muted); }
.nav-links a:hover { background: var(--hover); text-decoration: none; }
.nav-links a.active { background: var(--primary-bg); color: var(--primary-dark); font-weight: 600; }
.nav-links a.active .icon { color: var(--primary); }
.nav-right { display: flex; align-items: center; gap: .6rem; margin-left: auto; }
.nav-btn { display: inline-flex; align-items: center; gap: .4rem; min-height: 32px; background: #fff; color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--radius); padding: .25rem .7rem; font: inherit; font-size: .82rem; cursor: pointer; text-decoration: none; white-space: nowrap; }
.nav-btn:hover { background: var(--hover); color: var(--text); text-decoration: none; }
.nav-btn.active { border-color: var(--primary); color: var(--primary-dark); }
.nav-user-name { color: var(--text-muted); font-size: .82rem; }

.public-body { background: var(--bg); min-height: 100vh; display: flex; flex-direction: column; }
.public-main { flex: 1; width: 100%; max-width: 1000px; margin: 0 auto; padding: 1.75rem 1.5rem; }
.public-main h1 { margin-bottom: .5rem; font-size: 1.35rem; }
.public-main h2 { font-size: 1.05rem; margin: 1.1rem 0 .5rem; }
.public-foot { text-align: center; padding: 1.25rem; color: var(--text-muted); font-size: .8rem; border-top: 1px solid var(--border); background: var(--surface); }
.public-form { max-width: 640px; margin-top: 1rem; }
.public-form fieldset label { display: block; margin: .3rem 0; font-weight: 400; }
.results-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 1rem; }
#guest-map { height: 420px; border-radius: var(--radius); border: 1px solid var(--border); isolation: isolate; }
@media (max-width: 900px) { .results-layout { grid-template-columns: 1fr; } }
.public-main .card + .card { margin-top: 1rem; }
.public-main .host-kpis { margin-top: 1rem; }
.portal-nav { max-width: 1000px; margin: 0 auto; padding: 1rem 1.5rem 0; }

/* ── Tvåfaktor ────────────────────────────────────────────── */
.qr-wrap { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: .75rem; max-width: 220px; }
.qr-wrap svg { width: 100%; height: auto; display: block; }
.secret-code { display: inline-block; background: var(--hover); border: 1px solid var(--border); border-radius: var(--radius); padding: .4rem .6rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem; letter-spacing: .06em; user-select: all; }

/* ── Hjälppanel ───────────────────────────────────────────── */
.help-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100%); background: var(--surface); border-left: 1px solid var(--border-strong); z-index: var(--z-panel); display: flex; flex-direction: column; box-shadow: -12px 0 24px -16px rgba(20, 28, 38, .35); }
.help-panel[hidden] { display: none; }
.help-panel-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .7rem 1rem; border-bottom: 1px solid var(--border); }
.help-title { display: inline-flex; align-items: center; gap: .45rem; }
.help-panel-actions { display: flex; gap: .35rem; }
.help-panel-body { padding: 1rem 1.25rem 2rem; overflow-y: auto; }

/* ── Wiki ─────────────────────────────────────────────────── */
.wiki-article h2 { font-size: 1.05rem; margin-bottom: .4rem; }
.wiki-summary { color: var(--text-muted); font-size: .85rem; margin-bottom: .75rem; }
.wiki-meta { font-size: .78rem; color: var(--text-muted); margin-top: .6rem; display: flex; gap: .3rem; flex-wrap: wrap; align-items: center; }
.wiki-body { font-size: .875rem; line-height: 1.65; }
.wiki-body h2 { font-size: .95rem; margin: 1rem 0 .4rem; }
.wiki-body h3 { font-size: .88rem; margin: .9rem 0 .35rem; }
.wiki-body p { margin-bottom: .7rem; }
.wiki-body ul, .wiki-body ol { margin: 0 0 .7rem 1.2rem; }
.wiki-body li { margin-bottom: .25rem; }
.wiki-body a { text-decoration: underline; }
.wiki-body code, .changelog-technical code { background: var(--hover); border: 1px solid var(--border); border-radius: 3px; padding: .05rem .3rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82em; }
.wiki-body pre { background: var(--hover); border: 1px solid var(--border); border-radius: var(--radius); padding: .7rem; overflow-x: auto; margin-bottom: .7rem; }
.wiki-body pre code { background: none; border: 0; padding: 0; }
.wiki-body table { font-size: .82rem; margin-bottom: .7rem; }
.wiki-body blockquote { border-left: 2px solid var(--border-strong); padding-left: .75rem; color: var(--text-muted); margin-bottom: .7rem; }
.wiki-page { max-width: 760px; }
.wiki-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.wiki-card { color: inherit; transition: border-color .12s; }
.wiki-card:hover { border-color: var(--primary); text-decoration: none; color: inherit; }
.wiki-card h2 { font-size: .95rem; margin-bottom: .3rem; }

/* ── Nyheter och ändringslogg ─────────────────────────────── */
.news-page { max-width: 820px; }
.news-release { margin-bottom: 1.25rem; }
.news-release-head { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; border-bottom: 1px solid var(--border); padding-bottom: .5rem; margin-bottom: .9rem; }
.news-release-head time { color: var(--text-muted); font-size: .8rem; }
.news-entry { padding: .6rem 0; border-bottom: 1px solid var(--border); }
.news-entry:last-child { border-bottom: none; }
.news-entry h3 { font-size: .95rem; margin-bottom: .25rem; }
.news-entry p { font-size: .875rem; }
.news-tags { margin-top: .4rem; display: flex; gap: .3rem; flex-wrap: wrap; }
.changelog-entry { padding: .75rem 0; border-bottom: 1px solid var(--border); }
.changelog-entry:last-child { border-bottom: none; }
.changelog-entry h3 { font-size: .95rem; display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.changelog-technical { font-size: .85rem; margin-top: .5rem; }
.changelog-technical ul { margin: 0 0 .5rem 1.2rem; }

/* ── Hamnvärdens arbetsyta ────────────────────────────────── */
.host-nav { display: flex; gap: .3rem; margin-bottom: 1rem; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.host-nav::-webkit-scrollbar { display: none; }
.host-nav a { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: .55rem .9rem; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--text-muted); font-weight: 500; white-space: nowrap; }
.host-nav a:hover { color: var(--text); text-decoration: none; }
.host-nav a.active { color: var(--primary); border-bottom-color: var(--primary); }
.host-toolbar { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
.host-toolbar input[type="date"], .host-toolbar select { min-height: 44px; }
.host-toolbar select { flex: 1 1 100%; }
.host-toolbar input[type="date"] { width: auto; flex: 1 1 9rem; }
.host-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.host-kpi { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: .75rem .95rem; }
.host-kpi strong { display: block; font-size: 1.6rem; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.host-kpi span { color: var(--text-muted); font-size: .8rem; }
.host-kpi-warn { border-color: #e2c27a; background: var(--warning-bg); }
.host-list { list-style: none; margin: 0; padding: 0; }
.host-row { display: flex; gap: .75rem; justify-content: space-between; align-items: center; padding: .7rem 0; border-bottom: 1px solid var(--border); }
.host-row:last-child { border-bottom: none; }
.host-row-main { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.host-badges { display: flex; gap: .3rem; flex-wrap: wrap; }
.host-row-actions form { margin: 0; }
.host-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.host-notes { white-space: pre-wrap; font-family: inherit; background: var(--hover); border-radius: var(--radius); padding: .6rem; margin: 0 0 .75rem; }
.host-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: .4rem; margin-bottom: .75rem; }
.host-legend { display: flex; gap: .4rem; flex-wrap: wrap; font-size: .75rem; margin-bottom: .75rem; }
.tile { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: .2rem .4rem; border-radius: var(--radius); border: 1px solid transparent; font-size: .8rem; font-weight: 600; color: #14202c; text-decoration: none; }
.tile:hover { text-decoration: none; color: #14202c; filter: brightness(.97); }
.host-legend .tile { min-height: 0; padding: .1rem .5rem; }
.tile-free      { background: #e3f4ea; border-color: #86c9a2; }
.tile-arriving  { background: #e4eefb; border-color: #8fb3e6; }
.tile-occupied  { background: #fbe6e4; border-color: #e0a19b; }
.tile-departing { background: #fbf0d6; border-color: #dcbb72; }
.tile-blocked   { background: #eceff3; border-color: #aab3bf; }
.tile-closed    { background: #2b3542; border-color: #2b3542; color: #fff; }
.tile-closed:hover { color: #fff; }
.tile-contract  { background: #eeebf9; border-color: #b7abe6; }
@media (max-width: 700px) { .host-row { flex-direction: column; align-items: stretch; } .host-row-actions .btn { width: 100%; } }

/* ── Mätare (beläggning) och delad sidhuvud-rad ───────────── */
.page-header-split { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1rem; }
.meter-row { display: flex; align-items: center; gap: .6rem; min-width: 120px; }
.meter { flex: 1; height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; }
.meter-fill { height: 100%; background: var(--primary); }
.meter-value { width: 2.6rem; text-align: right; font-size: .78rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* ── Tomtillstånd ─────────────────────────────────────────── */
.empty { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 2.25rem 1rem; text-align: center; color: var(--text-muted); }
.empty .icon { width: 28px; height: 28px; color: var(--border-strong); }

/* ── Vertikal rytm: direkta barn i sidan får luft mellan sig ── */
.container > * + *, .public-main > .card + *, .public-main > * + .card { margin-top: 1rem; }
.container > .page-header + *, .container > .tabs + *, .container > .host-nav + * { margin-top: 0; }
.container > .page-header, .container > .tabs { margin-bottom: 1.25rem; }
.container ul:not([class]) , .card ul:not([class]) { margin-left: 1.1rem; }

td select, td input:not([type="checkbox"]):not([type="radio"]) { width: auto; min-width: 8rem; }
td .btn + .btn, td form + form { margin-left: .25rem; }
.brand-mark .icon, h1 .brand-mark .icon { color: #fff; margin: 0; }
@media (max-width: 900px) { .four-col { grid-template-columns: 1fr 1fr; } }

/* ── Torrsättning och sjösättning ─────────────────────────── */
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .6rem; }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.cal-dow { background: var(--hover); padding: .3rem .4rem; font-size: .72rem; font-weight: 600; color: var(--text-muted); text-align: center; }
.cal-cell { background: var(--surface); min-height: 4.4rem; padding: .3rem .4rem; display: flex; flex-direction: column; gap: .15rem; font-size: .75rem; }
.cal-out { background: var(--bg); color: var(--text-muted); }
.cal-past { color: var(--text-muted); }
.cal-today .cal-num { background: var(--primary); color: #fff; border-radius: 50%; width: 1.4rem; height: 1.4rem; display: inline-flex; align-items: center; justify-content: center; }
.cal-has { background: var(--primary-bg); }
.cal-num { font-weight: 600; font-variant-numeric: tabular-nums; }
.cal-pick { display: flex; align-items: flex-start; gap: .3rem; cursor: pointer; height: 100%; }
.cal-pick input { margin: .15rem 0 0; }
.cal-pick:has(input:checked) .cal-num { color: var(--primary-dark); text-decoration: underline; }
.cal-chip { display: inline-block; padding: .05rem .35rem; border-radius: 3px; background: var(--primary); color: #fff; font-size: .72rem; }
.cal-chip:hover { color: #fff; text-decoration: none; background: var(--primary-dark); }
.cal-chip-off { background: var(--danger); }
.cal-meta { color: var(--text-muted); font-size: .7rem; line-height: 1.2; }
.fill-order { margin-left: 1.2rem; columns: 3; font-size: .82rem; }
.lift-res .form-row { margin-bottom: .4rem; }
@media (max-width: 700px) { .cal-cell { min-height: 3.2rem; padding: .2rem; } .cal-meta { display: none; } .fill-order { columns: 2; } }
@media print {
  .side, .mobile-bar, .no-print, .env-banner, .host-row-actions, .page-header .btn, .host-nav, .page-tools { display: none !important; }
  .app { display: block; } body { background: #fff; } .container { max-width: none; padding: 0; }
  .card { border: 1px solid #999; break-inside: avoid; }
}
.slot-opt { display: flex; align-items: center; gap: .5rem; padding: .35rem .5rem; border: 1px solid var(--border); border-radius: var(--radius); margin: .2rem 0; cursor: pointer; background: #fff; }
.slot-opt:hover { border-color: var(--primary); }
.slot-opt:has(input:checked) { border-color: var(--primary); background: var(--primary-bg); }

/* ── Kartan: visa och redigera (steg 15) ─────────────────── */
.alert-warning { background: var(--warning-bg); border-color: #ecd9a4; color: var(--warning); }
.h3 { font-size: 1rem; margin-bottom: .5rem; }
.h4 { font-size: .9rem; margin: .75rem 0 .35rem; }
.btn-row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
label.check { display: flex; align-items: center; gap: .4rem; cursor: pointer; font-size: .85rem; }
table.compact { font-size: .8rem; }
table.compact td, table.compact th { padding: .2rem .35rem; }
.map-filters { display: flex; gap: .75rem; align-items: flex-end; flex-wrap: wrap; }
.map-filters .form-group { margin: 0; }
.map-modes { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.map-status:empty { display: none; }
.map-status { margin-bottom: .75rem; }
.rank-label { background: rgba(255,255,255,.85); border: 1px solid #1a252f; border-radius: 3px; font-size: 10px; line-height: 14px; text-align: center; font-weight: 600; color: #1a252f; }
.entry-marker { background: #111827; color: #fff; border-radius: 50%; width: 22px !important; height: 22px !important; line-height: 22px; text-align: center; font-weight: 700; font-size: 12px; border: 2px solid #fff; box-shadow: 0 0 0 1px #111827; }
.lift-marker { background: #0d6e7a; color: #fff; border-radius: 4px; padding: 0 4px; font-size: 11px; line-height: 18px; white-space: nowrap; font-weight: 600; border: 1px solid #fff; }
.occ-list { list-style: none; padding: 0; margin: 0; font-size: .85rem; }
.occ-list li { padding: .35rem 0; border-bottom: 1px solid var(--border); }
.occ-list li.is-now { background: var(--primary-bg); padding-left: .4rem; }
/* ── Plattformskonsolens kunddetalj ───────────────────────── */
/* Sidan hade elva kort staplade i en spalt. Nu: sektioner med rubrik, och kort bredvid varandra. */
.console-section { margin-bottom: 1.75rem; }
.console-section > .section-head { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-bottom: .6rem; }
.console-section .three-col, .console-section .two-col { align-items: stretch; }
/* Tre kolumner behöver bredd för att formulärfälten ska vara användbara; däremellan två. */
@media (max-width: 1240px) { .console-section .three-col { grid-template-columns: repeat(2, 1fr); } }
.console-section .card { display: flex; flex-direction: column; }
/* Korten i en rad blir lika höga, men innehållet börjar upptill — ett kort med tre fält ska inte
   få en tom lucka över sig bara för att grannen är längre. */
.console-section .card > :last-child { margin-bottom: 0; }

/* Nyckeltal som etikett till vänster och siffra till höger, i stället för en mening att läsa igenom. */
.key-figures { list-style: none; padding: 0; margin: 0 0 .75rem; font-size: .875rem; }
.key-figures li { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; padding: .3rem 0; border-bottom: 1px solid var(--border); }
.key-figures li:last-child { border-bottom: none; }
.key-figures span { color: var(--text-muted); }
.key-figures strong { font-variant-numeric: tabular-nums; }

.check-list { display: flex; flex-direction: column; gap: .35rem; margin-bottom: .75rem; font-size: .875rem; }
.field-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .75rem 1rem; margin-bottom: 1rem; }
.lock-check { font-size: .78rem; color: var(--text-muted); display: block; margin-top: .2rem; }
.event-list { list-style: none; padding: 0; margin: 0 0 .75rem; font-size: .82rem; }
.event-list li { padding: .3rem 0; border-bottom: 1px solid var(--border); }
.event-list li:last-child { border-bottom: none; }

.settings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.settings-grid .card h2 { font-size: 1rem; display: flex; align-items: center; gap: .4rem; }
.settings-grid .card p { font-size: .85rem; color: var(--text-muted); }
.settings-grid .card .where { font-size: .75rem; }
/* Varning på ett inställningskort är en mening, inte en etikett: den måste radbrytas
   innanför kortet. .badge kan inte användas — den har white-space: nowrap. */
.card-warn { display: flex; align-items: flex-start; gap: .3rem; margin-top: .5rem; padding: .25rem .5rem;
  border-radius: 3px; font-size: .75rem; line-height: 1.45; background: var(--warning-bg); color: var(--warning); }
.card-warn .icon { width: 13px; height: 13px; flex: 0 0 auto; margin-top: .15rem; }
.setting-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .25rem 1rem; align-items: center; padding: .4rem 0; border-bottom: 1px solid var(--border); }
.setting-row .default { font-size: .75rem; color: var(--text-muted); }
@media (max-width: 700px) { .setting-row { grid-template-columns: 1fr; } }
a.card-link { display: block; color: inherit; text-decoration: none; transition: border-color .15s; }
a.card-link:hover, a.card-link:focus-visible { border-color: var(--primary); }

/* ── Gästens landningssida (/book) ────────────────────────────
 * Gästen kommer hit från en QR-kod på bryggan eller en länk i kommunens sökresultat och
 * ska vilja stanna. Därför får den här sidan — och bara den — stora bilder och luft.
 * Undantagen från "platta ytor": bildens mörkningstoning (annars går vit text inte att läsa
 * mot ett foto, WCAG 1.4.3) och lightboxens skugga. Allt annat följer systemets linjer och
 * fyra pixlar runt hörnen.
 */
.public-main-wide { flex: 1; width: 100%; min-width: 0; }
.landing { max-width: 1120px; margin: 0 auto; padding: 0 1.5rem 2.5rem; }
.no-scroll { overflow: hidden; }

.hero { position: relative; min-height: 420px; display: flex; align-items: flex-end; background: var(--primary-dark); overflow: hidden; }
.hero-short { min-height: 260px; }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Toningen finns för kontrastens skull, inte för dekorationens: den håller texten läsbar mot vilket foto som helst. */
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 24, 30, .15) 0%, rgba(10, 24, 30, .55) 55%, rgba(10, 24, 30, .82) 100%); }
/* Utan foto finns ingen bild att ge plats åt: hjälten kortas till sitt innehåll i stället för att
   lämna ett tomt färgfält. Hamnar som inte lagt in bilder ska se avsiktliga ut, inte ofärdiga. */
.hero-plain { min-height: 0; }
.hero-plain::after { background: linear-gradient(180deg, rgba(9, 85, 96, .35), rgba(10, 24, 30, .75)); }
.hero-inner { position: relative; z-index: 1; width: 100%; max-width: 1120px; margin: 0 auto; padding: 2.5rem 1.5rem 2.25rem; color: #fff; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .88); margin-bottom: .5rem; }
.hero-inner h1 { font-size: clamp(1.9rem, 4.5vw, 2.9rem); line-height: 1.1; letter-spacing: -.01em; color: #fff; }
.hero-tagline { margin-top: .6rem; max-width: 46rem; font-size: clamp(1rem, 1.6vw, 1.15rem); color: rgba(255, 255, 255, .94); }
.hero-facts { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.1rem; padding: 0; }
.hero-facts li { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem; border: 1px solid rgba(255, 255, 255, .45); border-radius: 999px; font-size: .82rem; color: #fff; background: rgba(10, 24, 30, .3); }
.hero-facts .hero-price { background: #fff; color: var(--primary-dark); border-color: #fff; font-weight: 600; }

/* Bokningsrutan lyfts upp över bildens nederkant: det första gästen ser efter fotot är "boka". */
.book-form { position: relative; margin: -2.5rem 0 1.75rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem 1.25rem 1rem; scroll-margin-top: 1rem; }
.book-form-head h2 { display: flex; align-items: center; gap: .45rem; font-size: 1.05rem; }
.book-form-head p { margin: .2rem 0 .9rem; }
.book-fields { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .5rem .75rem; align-items: end; }
.book-fields .form-group { margin-bottom: 0; }
.book-field-wide { grid-column: span 2; }
.book-field-submit { grid-column: span 2; }
.book-form-foot { display: flex; align-items: center; gap: .4rem; margin-top: .8rem; }
@media (max-width: 900px) { .book-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } .book-field-wide, .book-field-submit { grid-column: span 2; } }
@media (max-width: 700px) { .book-form { margin-top: -1.25rem; } }

.landing-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.75rem; align-items: start; }
@media (max-width: 900px) { .landing-grid { grid-template-columns: 1fr; } }
.landing-main > .landing-section + .landing-section { margin-top: 1.75rem; }
.landing-section h2 { display: flex; align-items: center; gap: .5rem; font-size: 1.15rem; margin-bottom: .75rem; }
.landing-section .lead-text { font-size: .95rem; line-height: 1.65; margin-bottom: .7rem; max-width: 42rem; }
.landing-aside { display: flex; flex-direction: column; gap: 1rem; position: sticky; top: 1rem; }
@media (max-width: 900px) { .landing-aside { position: static; } }

.highlight-list { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .4rem; }
.highlight-list li { display: flex; align-items: flex-start; gap: .5rem; font-size: .9rem; }
.highlight-list .icon { color: var(--success); margin-top: .15rem; }

.amenities { list-style: none; padding: 0; margin: 0 0 .75rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .5rem; }
.amenities li { display: flex; align-items: center; gap: .55rem; padding: .55rem .7rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); font-size: .875rem; }
.amenities .icon { color: var(--primary); }

.gallery { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; }
.gallery-item { display: block; width: 100%; padding: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); cursor: pointer; overflow: hidden; text-align: left; }
.gallery-item img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .25s ease; }
.gallery-item:hover img, .gallery-item:focus-visible img { transform: scale(1.04); }
.gallery-item:hover { border-color: var(--primary); }
.gallery-caption { display: block; padding: .4rem .6rem; font-size: .78rem; color: var(--text-muted); }

.landing-map { height: 340px; border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: .75rem; isolation: isolate; }
.coords { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; font-size: .9rem; }
.coords strong { font-variant-numeric: tabular-nums; }
.coord-flash { font-size: .82rem; color: var(--success); margin-top: .35rem; }

.fact-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .6rem; margin-top: .75rem; }
.fact-list div { border: 1px solid var(--border); border-radius: var(--radius); padding: .55rem .7rem; background: var(--surface); }
.fact-list dt { display: flex; align-items: center; gap: .4rem; font-size: .78rem; color: var(--text-muted); }
.fact-list dd { font-size: .95rem; font-weight: 600; margin-top: .15rem; }

.contact-card .contact-name { font-weight: 600; margin-bottom: .5rem; }
.contact-list, .other-harbours { list-style: none; padding: 0; margin: 0; font-size: .875rem; }
.contact-list li, .other-harbours li { display: flex; align-items: center; gap: .5rem; padding: .35rem 0; border-bottom: 1px solid var(--border); }
.contact-list li:last-child, .other-harbours li:last-child { border-bottom: none; }
.contact-list .icon, .other-harbours .icon { color: var(--text-muted); flex: none; }
.other-harbours a { display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%; }
.steps { margin: 0 0 .75rem 1.1rem; font-size: .875rem; display: grid; gap: .35rem; }

.harbour-cards { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.harbour-card a { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); color: var(--text); text-decoration: none; height: 100%; transition: border-color .15s; }
.harbour-card a:hover, .harbour-card a:focus-visible { border-color: var(--primary); text-decoration: none; }
.harbour-card-img img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.harbour-card-blank { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; background: var(--primary-bg); color: var(--primary); }
.harbour-card-body { display: block; padding: .8rem .9rem 1rem; }
.harbour-card-body strong { display: block; font-size: 1rem; }
.harbour-card-tagline { display: block; margin-top: .25rem; font-size: .85rem; color: var(--text); }
.harbour-card-facts { display: block; margin-top: .5rem; font-size: .78rem; color: var(--text-muted); }

.lightbox { position: fixed; inset: 0; z-index: var(--z-lightbox); display: flex; align-items: center; justify-content: center; background: rgba(10, 24, 30, .88); padding: 1.5rem; }
.lightbox[hidden] { display: none; }
.lightbox-inner { position: relative; max-width: 1000px; width: 100%; background: var(--surface); border-radius: var(--radius); padding: .75rem; box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .6); }
.lightbox-inner img { display: block; width: 100%; max-height: 72vh; object-fit: contain; background: #0a181e; border-radius: var(--radius); }
.lightbox-caption { font-size: .85rem; color: var(--text-muted); margin: .5rem .25rem 0; min-height: 1.2em; }
.lightbox-controls { display: flex; align-items: center; justify-content: center; gap: .75rem; margin-top: .5rem; }
.lightbox-close { position: absolute; top: .75rem; right: .75rem; }

/* Bildgalleriets svepning stängs av för den som bett om mindre rörelse. */
@media (prefers-reduced-motion: reduce) { .gallery-item img { transition: none; } .gallery-item:hover img { transform: none; } }

@media (max-width: 560px) { .public-head .public-org { display: none; } }

/* ── Redigering av gästsidan (/settings/harbours/{id}/page) ─── */
.amenity-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .35rem .75rem; }
.amenity-choice { display: flex; align-items: center; gap: .4rem; font-size: .875rem; font-weight: 400; padding: .3rem 0; }
.amenity-choice .icon { color: var(--text-muted); }
.photo-admin { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.photo-admin-item { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 1rem; align-items: start; padding: .75rem; border: 1px solid var(--border); border-radius: var(--radius); }
.photo-admin-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--border); }
.photo-admin-body { display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }
.photo-caption-form { display: flex; gap: .4rem; width: 100%; }
@media (max-width: 700px) { .photo-admin-item { grid-template-columns: 1fr; } }

/* Personalens rad på publika sidor, och personalingången i sidfoten. */
.staff-strip { display: flex; align-items: center; gap: .4rem; justify-content: center; padding: .4rem 1rem;
  background: var(--surface-2, #eef2f7); border-bottom: 1px solid var(--border); font-size: .8125rem; }
.staff-strip .icon { width: 1em; height: 1em; }

/* ── Cookie-rutan ─────────────────────────────────────────────
   Ligger längst ned och täcker aldrig sidan: hamnens telefonnummer ska gå att läsa utan att
   först svara på en fråga. Knapparna har samma storlek och vikt — ett samtycke där "ja" är
   lättare att trycka på än "nej" är inte frivilligt. */
.cookie-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-cookie); background: var(--surface);
  border-top: 2px solid var(--primary); box-shadow: 0 -6px 24px rgba(10, 24, 30, .16);
  padding: .9rem 1rem; max-height: 80vh; overflow-y: auto; }
.cookie-bar-inner { max-width: 1120px; margin: 0 auto; display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; }
.cookie-bar-text { flex: 1 1 24rem; }
.cookie-bar-text h2 { display: flex; align-items: center; gap: .4rem; font-size: 1rem; margin-bottom: .25rem; }
.cookie-bar-text p { font-size: .875rem; color: var(--text-muted); margin: 0; }
.cookie-bar-actions { display: flex; gap: .5rem; flex: 0 0 auto; }
.cookie-bar-actions .btn { min-width: 10.5rem; justify-content: center; }
/* Båda valen är lika mycket val: samma yta, samma kontrast, samma vikt. Inget är förvalt. */
.cookie-btn { background: var(--surface); color: var(--primary-dark); border: 2px solid var(--primary); font-weight: 600; }
.cookie-btn:hover { background: var(--primary); color: #fff; }
.cookie-bar-details { max-width: 1120px; margin: .5rem auto 0; }
.cookie-bar-details summary { cursor: pointer; font-size: .875rem; color: var(--primary); padding: .35rem 0; }
.cookie-choices { display: grid; gap: .85rem; padding: .75rem 0 .25rem; border-top: 1px solid var(--border); margin-top: .4rem; }
.cookie-choice p { font-size: .8125rem; margin: .15rem 0 0 1.6rem; }
.cookie-choice .check.is-locked { opacity: .75; cursor: not-allowed; }
@media (max-width: 720px) {
  .cookie-bar-actions { width: 100%; }
  .cookie-bar-actions .btn { flex: 1 1 0; min-width: 0; }
}

/* Platsen där kartan skulle ha legat, när besökaren inte släppt fram den. */
.map-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .4rem; text-align: center; padding: 2rem 1.25rem; border: 1px dashed var(--border);
  border-radius: var(--radius); background: var(--surface-2, #f4f6f8); }
.map-placeholder p { margin: 0; max-width: 34rem; font-size: .875rem; }
.map-placeholder-icon .icon { width: 1.75rem; height: 1.75rem; color: var(--text-muted); }
.map-placeholder form { margin: .35rem 0 .15rem; }

.cookie-policy { max-width: 60rem; margin: 0 auto; }
.cookie-policy h1 { display: flex; align-items: center; gap: .5rem; }
.public-foot .foot-links { display: block; margin-top: .5rem; font-size: .8125rem; opacity: .7; }
.side-link-quiet { opacity: .7; font-size: .8125rem; }
.pill { display: inline-block; padding: .1rem .55rem; border-radius: 999px; border: 1px solid var(--border);
  font-size: .78rem; white-space: nowrap; }
.pill-ok { background: var(--primary); border-color: var(--primary); color: #fff; }

/* ── Fakturamotorn: planredigeraren ──────────────────────────────────────── */
.num { text-align: right; font-variant-numeric: tabular-nums; }
.badge-muted { background: var(--surface-2, #f4f6f8); color: var(--text-muted); }
.text-up   { color: var(--danger); }
.text-down { color: var(--success); }
.form-actions { display: flex; gap: .5rem; align-items: center; margin-top: .25rem; }

/* Fälten till vänster, förhandsvisningen till höger. Förhandsvisningen följer med
   vid rullning: kurvan ska synas medan man drar i ett reglage längre ner. */
.plan-editor > .two-col { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; }
@media (max-width: 1100px) { .plan-editor > .two-col { grid-template-columns: 1fr; } }
.plan-editor-fields > .card { margin-bottom: 1rem; }
.plan-editor-preview { position: sticky; top: 1rem; }
.plan-editor-preview .card { margin-bottom: 1rem; }

/* Reglaget för känsla, sifferfältet för exakthet. Båda skriver samma värde. */
.slider-pair { display: flex; align-items: center; gap: .6rem; }
.slider-pair input[type="range"] { flex: 1 1 auto; min-width: 5rem; accent-color: var(--primary); }
.slider-pair input[type="number"] { flex: 0 0 6.5rem; text-align: right; font-variant-numeric: tabular-nums; }
.slider-pair .unit { flex: 0 0 auto; color: var(--text-muted); font-size: .8125rem; }
.slider-row { margin-bottom: 1rem; }

.tier-list { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .6rem; }
.tier-head { display: grid; grid-template-columns: 7rem 1fr 2.2rem; gap: .6rem; margin: 0;
  font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.tier-row { display: grid; grid-template-columns: 7rem 1fr 2.2rem; gap: .6rem; align-items: center; }
.tier-row input[type="number"][name="tier_up_to"] { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 720px) {
  .tier-head { display: none; }
  .tier-row { grid-template-columns: 1fr; }
}

/* ── Fakturamotorn: abonnemang och avvikelser ────────────────────────────── */
.nav-badge { display: inline-block; min-width: 1.15rem; padding: 0 .3rem; border-radius: 999px;
  background: var(--danger); color: #fff; font-size: .7rem; font-weight: 700; text-align: center;
  line-height: 1.15rem; vertical-align: text-top; }

/* Avvikelsebandet ligger överst på kundkortet: det ska synas utan att man letar. */
.flag-band { display: block; }
.flag-band .flag-actions { margin-top: .6rem; }
.flag-card { border-left: 3px solid var(--border); margin-bottom: .75rem; }
.flag-card.flag-warn { border-left-color: var(--danger); }
.flag-card.flag-info { border-left-color: var(--info); }
.flag-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.flag-head h3 { margin: 0; }

/* Tre utvägar, alla lika nåbara. Skälfältet får ta plats — det är det som gör
   en avskriven flagga läsbar ett år senare. */
.flag-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .75rem; }
.flag-actions input[name="note"] { flex: 1 1 14rem; min-width: 10rem; }

.subscription-form { margin-top: .75rem; }
.subscription-form .price-preview { margin: .75rem 0; }
.price-preview .eyebrow { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-muted); margin-bottom: .4rem; }
.card.tint { background: var(--primary-bg, #e9f3f5); border-color: #cfe4e8; }
details > summary { cursor: pointer; font-weight: 600; padding: .35rem 0; }
.tabs { display: flex; gap: .25rem; margin-bottom: 1rem; border-bottom: 1px solid var(--border); }
.tabs a { padding: .45rem .9rem; border-bottom: 2px solid transparent; color: var(--text-muted); text-decoration: none; }
.tabs a.active { border-bottom-color: var(--primary); color: var(--text); font-weight: 600; }
.inline-actions { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }

/* Sidhuvudet i plattformskonsolen: namn (med supportikonen) till vänster, kundens adress till höger. */
.page-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1rem; margin-bottom: 1.25rem; }
.page-head h1 { display: flex; align-items: center; gap: .55rem; margin: 0; }
/* Supportläget startas där man är: en ikon bredvid kundnamnet, inte ett kort långt ned på sidan. */
.support-btn { width: 32px; height: 32px; color: var(--text-muted); }
.support-btn:hover { color: var(--primary-dark); border-color: var(--primary); }

/* Modal: en <dialog>, så att fokus, Esc och bakgrundsspärr sköts av webbläsaren. */
dialog.modal { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); padding: 1.25rem; width: min(32rem, calc(100vw - 2rem)); box-shadow: 0 10px 30px rgba(20, 28, 38, .25); }
dialog.modal::backdrop { background: rgba(20, 28, 38, .45); }
dialog.modal h2 { font-size: 1.05rem; margin: 0 0 .35rem; }
dialog.modal p { margin-bottom: .9rem; }
.modal-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1rem; }

/* ── Flikar ──────────────────────────────────────────────────────────────── */
/* .tabs används både för länkar (faktureringens undernavigering) och för
   knappar med role="tab" (kundkortet). Samma utseende, olika markup. */
.tabs button {
  appearance: none; background: none; border: 0; border-bottom: 2px solid transparent;
  padding: .45rem .9rem; color: var(--text-muted); font: inherit; cursor: pointer;
  display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap;
}
.tabs button:hover { color: var(--text); }
.tabs button[aria-selected="true"] { border-bottom-color: var(--primary); color: var(--text); font-weight: 600; }
.tabs button:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; border-radius: 4px 4px 0 0; }
.tabs .icon { width: 1rem; height: 1rem; }
/* Flikraden får rulla i sidled på smal skärm hellre än att radbrytas till två rader. */
.tabs-lg { overflow-x: auto; scrollbar-width: thin; margin-bottom: 1.25rem; }
.tabs-lg button { padding: .6rem 1rem; }

.tab-badge { display: inline-block; min-width: 1.15rem; padding: 0 .3rem; border-radius: 999px;
  background: var(--danger); color: #fff; font-size: .7rem; font-weight: 700; line-height: 1.15rem;
  text-align: center; }

/* Panelen ska inte få en egen fokusram när den tar emot fokus efter ett flikbyte. */
[role="tabpanel"]:focus { outline: none; }
[role="tabpanel"] > .two-col, [role="tabpanel"] > .three-col { margin-bottom: 1rem; }
[role="tabpanel"] > .card { margin-bottom: 1rem; }

/* Tom ruta inne i ett kort: samma språk som .empty men utan sidans höjd. */
.empty-inline { padding: 1rem .25rem; text-align: left; flex-direction: row; gap: .6rem; align-items: flex-start; }
.empty-inline .icon { flex: 0 0 auto; }

.flag-list { list-style: none; margin: 0; padding: 0; }
.flag-list > li { padding: .7rem 0 .7rem .7rem; border-left: 3px solid var(--border); margin-bottom: .6rem; }
.flag-list > li.flag-warn { border-left-color: var(--danger); }
.flag-list > li.flag-info { border-left-color: var(--info); }

/* Ett tal som ska läsas på håll: översiktens nyckeltal. */
.big-figure { font-size: 1.9rem; font-weight: 700; letter-spacing: -.02em; margin: .2rem 0 .8rem;
  font-variant-numeric: tabular-nums; line-height: 1.1; }
.big-figure small { display: block; font-size: .78rem; font-weight: 400; letter-spacing: 0;
  color: var(--text-muted); margin-top: .15rem; }
.sub-head { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-muted); margin: 1rem 0 .4rem; }