/* ordlista.css – Ordlista för VA. Allt ligger under .ord-sida med färgerna i egna variabler, så att inget påverkar headern.
   Utseendet (hero, inforuta, kort, sökfält, filterknappar) följer verktyg/autocad_kommandon/autocad-kommandon.php. */
.ord-sida {
    --ord-bla: var(--primary, #008cc2);
    --ord-mork: var(--secondary, #003366);
    --ord-text: #334155;
    --ord-svag: #64748b;
    --ord-kant: #e2e8f0;
    --ord-kant2: #cbd5e1;
    --ord-bakgrund: #f8fafc;
    --ord-topp: 80px;   /* headerns höjd, skriptet mäter den */
    --ord-verktyg: 120px; /* verktygsradens höjd, skriptet mäter den */
}
.ord-sida *, .ord-sida *::before, .ord-sida *::after { box-sizing: border-box; }

.ord-hero { background: linear-gradient(135deg, var(--ord-mork), var(--ord-bla)); color: #fff; padding: 2.5rem 5%; text-align: center; }
.ord-hero h1 { font-size: 2rem; margin: 0 0 .5rem; }
.ord-hero p { font-size: 1.05rem; opacity: .95; max-width: 650px; margin: 0 auto; }

.ord-behallare { max-width: 1320px; margin: 2rem auto; padding: 0 24px; }
.ord-info { background: var(--ord-bakgrund); border: 1px solid var(--ord-kant); border-radius: 8px; padding: 1.5rem; margin-bottom: 2rem; }
.ord-info h2 { margin: 0 0 .5rem; color: var(--ord-mork); font-size: 1.2rem; }
.ord-info p { color: #475569; font-size: .95rem; line-height: 1.6; margin: 0; }
.ord-kort { background: #fff; border-radius: 8px; padding: 2rem; box-shadow: 0 4px 10px rgba(0,0,0,.08); border: 1px solid var(--ord-kant); border-top: 5px solid var(--ord-bla); }

/* Utan JavaScript visas bara listorna: knapparna och filtren behöver skriptet. */
html:not(.ord-js) .ord-bara-js { display: none !important; }

.ord-knappar { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.5rem; }
.ord-knapp { background: #f1f5f9; border: 1px solid var(--ord-kant2); color: var(--ord-mork); padding: .6rem 1.1rem; border-radius: 4px; font-weight: 600; font-size: .9rem; font-family: inherit; line-height: 1.3; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; text-decoration: none; transition: filter .15s, background .15s; }
.ord-knapp:hover { background: #e2e8f0; }
.ord-knapp-skriv, .ord-knapp-lank, .ord-knapp-export { color: #fff; border-color: transparent; }
.ord-knapp-skriv { background: #059669; }
.ord-knapp-lank { background: var(--ord-bla); }
.ord-knapp-export { background: #475569; }
.ord-knapp-skriv:hover, .ord-knapp-lank:hover, .ord-knapp-export:hover { background: var(--ord-bla); filter: brightness(.92); }
.ord-knapp-skriv:hover { background: #059669; }
.ord-knapp-export:hover { background: #475569; }
.ord-marke { background: #e03131; color: #fff; border-radius: 999px; padding: 0 .45rem; font-size: .78rem; line-height: 1.35rem; min-width: 1.35rem; text-align: center; }
.ord-sida :is(a, button, input, textarea, summary):focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }

.ord-filter { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-bottom: 1.25rem; }
.ord-chip { background: #fff; color: var(--ord-mork); border: 1px solid var(--ord-kant2); padding: 6px 14px; border-radius: 20px; font-size: .86rem; font-weight: 600; font-family: inherit; cursor: pointer; transition: all .2s; }
.ord-chip small { color: var(--ord-svag); font-weight: 500; margin-left: .15rem; }
.ord-chip:hover { border-color: var(--ord-bla); color: var(--ord-bla); }
.ord-chip[aria-pressed="true"] { background: var(--ord-bla); border-color: var(--ord-bla); color: #fff; }
.ord-chip[aria-pressed="true"] small { color: #e0f2fe; }

.ord-verktyg { position: sticky; top: var(--ord-topp); z-index: 20; background: #fff; padding: .6rem 0; margin-bottom: .5rem; border-bottom: 1px solid var(--ord-kant); }
.ord-sokrad { position: relative; }
.ord-sokrad input { width: 100%; padding: .75rem 2.6rem .75rem .75rem; border: 1px solid var(--ord-kant2); border-radius: 4px; font-size: 1rem; font-family: inherit; }
.ord-sokrad input::-webkit-search-cancel-button { display: none; }
.ord-sokrad button { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--ord-svag); font-size: 1.3rem; line-height: 1; padding: .3rem .55rem; cursor: pointer; border-radius: 4px; }
.ord-bokstaver { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px; margin-top: .55rem; }
.ord-bokstav { min-width: 30px; height: 30px; border: 0; background: transparent; color: var(--ord-bla); font-weight: 700; font-family: inherit; border-radius: 4px; cursor: pointer; padding: 0 .3rem; }
.ord-bokstav:hover:not(:disabled) { background: #e0f2fe; }
.ord-bokstav:disabled { color: var(--ord-kant2); cursor: default; }
.ord-bokstav[aria-pressed="true"] { background: var(--ord-bla); color: #fff; }

.ord-flikar { display: flex; gap: 1.25rem; border-bottom: 2px solid var(--ord-kant); margin: 1rem 0 .4rem; }
.ord-flik { padding: .45rem .15rem; margin-bottom: -2px; border-bottom: 3px solid transparent; color: var(--ord-svag); font-weight: 700; text-decoration: none; }
.ord-flik:hover { color: var(--ord-bla); }
.ord-flik.aktiv { color: var(--ord-mork); border-bottom-color: var(--ord-bla); }

.ord-status { margin: .6rem 0 .25rem; color: #475569; font-size: .92rem; }
.ord-meddelande { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; border-radius: 6px; padding: .7rem 1rem; }
.ord-tomt { text-align: center; padding: 2.5rem 1rem; color: #475569; border: 1px dashed var(--ord-kant2); border-radius: 8px; margin: 1rem 0; }
.ord-tomt p { margin: 0 0 .6rem; }
.ord-tomt[hidden], .ord-grupp[hidden], .ord-post[hidden] { display: none; }

.ord-grupprubrik { font-size: 1.5rem; font-weight: 700; color: var(--ord-bla); margin: 1.6rem 0 .3rem; padding-bottom: .2rem; border-bottom: 2px solid var(--ord-kant); }
.ord-post { scroll-margin-top: calc(var(--ord-topp) + var(--ord-verktyg) + 12px); border-bottom: 1px solid #eef2f7; padding: .85rem .6rem; border-radius: 6px; }
.ord-post.ord-med-bild { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 1.5rem; }
.ord-post.ord-markerad { background: #fef9c3; transition: background .6s; }
.ord-namn { color: var(--ord-bla); }
.ord-radtopp { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.ord-namn { font-size: 1.1rem; font-weight: 700; color: var(--ord-mork); margin: 0 0 .2rem; }
.ord-fork { font-weight: 500; color: var(--ord-svag); font-size: .95rem; }
.ord-besk { margin: .3rem 0 .5rem; padding: .55rem .8rem; line-height: 1.55; color: #1e293b; font-size: 1rem; background: #f1f7fb; border-left: 3px solid var(--ord-bla); border-radius: 0 6px 6px 0; }
.ord-ford { margin: 0 0 .5rem; }
.ord-ford summary { display: inline-block; cursor: pointer; color: var(--ord-bla); font-size: .88rem; font-weight: 600; list-style: none; }
.ord-ford summary::-webkit-details-marker { display: none; }
.ord-ford summary::before { content: "▸ "; }
.ord-ford[open] summary::before { content: "▾ "; }
.ord-ford .ord-dolj, .ord-ford[open] .ord-visa { display: none; }
.ord-ford[open] .ord-dolj { display: inline; }
.ord-ford p { margin: .35rem 0 0; padding: .55rem .8rem; line-height: 1.55; color: #1e293b; font-size: .96rem; background: #fffbeb; border-left: 3px solid #fbbf24; border-radius: 0 6px 6px 0; }
.ord-taggar { display: flex; flex-wrap: wrap; gap: .3rem; }
.ord-tagg { background: #f1f5f9; color: #475569; border-radius: 999px; padding: .08rem .6rem; font-size: .75rem; }

.ord-uppgift { margin: 0 0 .15rem; color: #475569; font-size: .88rem; line-height: 1.5; }
.ord-uppgift > span:first-child { font-weight: 600; color: var(--ord-mork); }
.ord-uppgift a { color: var(--ord-bla); }
.ord-fot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .3rem 1rem; margin-top: .45rem; }
.ord-radknappar { display: inline-flex; gap: .9rem; }
.ord-radknappar button { background: none; border: 0; padding: 0; color: var(--ord-svag); font: inherit; font-size: .8rem; text-decoration: underline; cursor: pointer; }
.ord-radknappar button:hover { color: var(--ord-bla); }
.ord-radknappar a { color: var(--ord-bla); font-size: .8rem; font-weight: 700; }
.ord-enskilt .ord-filter, .ord-enskilt .ord-verktyg, .ord-enskilt .ord-status, .ord-enskilt #ord-csv { display: none; }

/* Bilderna till höger. Ett klick förstorar. Utan JavaScript öppnas bilden som en egen sida. */
.ord-bilder { display: flex; flex-direction: column; gap: .6rem; }
.ord-bilder figure { margin: 0; }
.ord-bilder a { position: relative; display: block; cursor: zoom-in; }
.ord-bilder img { display: block; width: 100%; height: auto; max-height: 160px; object-fit: cover; border-radius: 6px; border: 1px solid var(--ord-kant); }
.ord-bilder a::after { content: "🔍"; position: absolute; right: 6px; bottom: 6px; background: rgba(255,255,255,.9); border-radius: 50%; width: 28px; height: 28px; line-height: 28px; text-align: center; font-size: .8rem; }
.ord-bildram { position: relative; }
.ord-bilder a.ord-bildlank { cursor: pointer; }
.ord-bilder a.ord-bildlank::after { content: "↗"; color: var(--ord-bla); font-weight: 700; right: auto; left: 6px; }
.ord-bilder a.ord-bildzoom { position: absolute; z-index: 1; right: 6px; bottom: 6px; width: 28px; height: 28px; line-height: 28px; text-align: center; font-size: .8rem; text-decoration: none; background: rgba(255,255,255,.9); border-radius: 50%; }
.ord-bilder a.ord-bildzoom::after { content: none; }
.ord-bilder figcaption { font-size: .8rem; color: #475569; margin-top: .25rem; }
.ord-bilder .ord-kalla { color: var(--ord-svag); }
.ord-bildruta { position: fixed; width: auto; max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); padding: .6rem; overflow: auto; }
.ord-bildruta img { display: block; min-width: min(420px, calc(100vw - 60px)); max-width: 100%; max-height: calc(100vh - 110px); margin: 0 auto; cursor: zoom-out; }
.ord-bildruta p { margin: .5rem .3rem .2rem; font-size: .9rem; }
.ord-bildruta p:empty { display: none; }
.ord-bildruta .ord-panel-stang { position: absolute; top: 12px; right: 12px; z-index: 1; }

.ord-disclaimer { font-size: .85rem; color: var(--ord-svag); border-top: 1px solid var(--ord-kant); padding-top: .9rem; margin: 1.5rem 0 2.5rem; }
.ord-utskrift { display: none; }

/* Rutorna: förslagsformuläret, inloggningen, Mina förslag och den förstorade bilden. */
.ord-ruta { width: min(680px, calc(100vw - 24px)); max-height: calc(100vh - 40px); border: 0; border-radius: 10px; padding: 0; box-shadow: 0 20px 50px rgba(0,0,0,.35); color: var(--ord-text); }
.ord-ruta-liten { width: min(440px, calc(100vw - 24px)); }
.ord-ruta::backdrop { background: rgba(15, 23, 42, .55); }
.ord-panel-in { padding: 1.4rem 1.6rem 1.5rem; }
.ord-panel-topp { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: .4rem; }
.ord-panel-topp h2 { margin: 0; font-size: 1.45rem; color: var(--ord-mork); outline: none; }
.ord-panel-stang { flex: none; border: 0; background: #f1f5f9; color: #475569; width: 36px; height: 36px; border-radius: 50%; font-size: 1.4rem; line-height: 34px; text-align: center; cursor: pointer; text-decoration: none; padding: 0; }
.ord-panel-stang:hover { background: var(--ord-kant); }
.ord-ruta a:not(.ord-knapp):not(.ord-panel-stang) { color: var(--ord-bla); }
.ord-panel-knappar { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--ord-kant); }

.ord-falt { display: block; margin: 0 0 .8rem; font-weight: 600; font-size: .92rem; color: var(--ord-mork); border: 0; padding: 0; min-width: 0; }
.ord-falt input:not([type="checkbox"]), .ord-falt textarea { display: block; width: 100%; margin-top: .25rem; padding: .55rem .65rem; border: 1px solid var(--ord-kant2); border-radius: 4px; font: inherit; font-weight: 400; color: var(--ord-text); }
.ord-falt legend { font-size: inherit; font-weight: 600; margin-bottom: .25rem; float: none; }
.ord-tvafalt { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .8rem; }
.ord-kryss { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .15rem .8rem; font-weight: 400; }
.ord-krav { color: #b91c1c; }
.ord-liten { font-size: .85rem; font-weight: 400; color: var(--ord-svag); }
.ord-fel { color: #991b1b; background: #fef2f2; border-radius: 4px; padding: .5rem .7rem; font-size: .9rem; }
.ord-fel[hidden] { display: none; }

.ord-mina-rad { padding: .6rem 0; border-bottom: 1px solid var(--ord-kant); }
.ord-mina-rad p { margin: .15rem 0 0; font-size: .9rem; }
.ord-mina-topp { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; align-items: baseline; }
.ord-status-vantar { color: #92400e; font-weight: 600; font-size: .85rem; }
.ord-status-godkand { color: #047857; font-weight: 600; font-size: .85rem; }
.ord-status-avvisad { color: #991b1b; font-weight: 600; font-size: .85rem; }

@media (max-width: 1100px) {
    .ord-bokstaver { justify-content: flex-start; } /* annars sprids en halv rad med bokstäver över hela bredden */
}
@media (max-width: 900px) {
    .ord-verktyg { position: static; }
    .ord-post { scroll-margin-top: calc(var(--ord-topp) + 12px); }
    .ord-post.ord-med-bild { grid-template-columns: minmax(0, 1fr) 130px; gap: 1rem; }
}
@media (max-width: 600px) {
    .ord-kort { padding: 1.1rem; }
    .ord-behallare { padding: 0 16px; }
    .ord-post.ord-med-bild { display: block; }
    .ord-bilder { margin-top: .6rem; max-width: 260px; }
    .ord-hero h1 { font-size: 1.7rem; }
    .ord-knapp, .ord-chip { min-height: 44px; }
    .ord-bokstav { min-width: 36px; height: 40px; }
    .ord-tvafalt { grid-template-columns: 1fr; }
    .ord-panel-in { padding: 1.1rem; }
}

@media print {
    header, nav, footer, .ord-hero, .ord-info, .ord-knappar, .ord-filter, .ord-verktyg, .ord-status, .ord-tomt, .ord-ruta, .ord-disclaimer, .ord-fot { display: none !important; }
    body { background: #fff; color: #000; font-size: 11pt; }
    .ord-behallare { max-width: none; margin: 0; padding: 0; }
    .ord-kort { border: 0; box-shadow: none; padding: 0; }
    .ord-utskrift { display: block; margin: 0 0 .6rem; color: #475569; font-size: .85rem; }
    .ord-utskrift::before { content: "Ordlista för VA. "; font-weight: 700; color: #000; }
    .ord-post { break-inside: avoid; }
    .ord-post { border-bottom: 1px solid #ddd; padding: .35rem 0; }
    .ord-post.ord-med-bild { grid-template-columns: minmax(0, 1fr) 120px; gap: .8rem; }
    .ord-uppgift a { color: inherit; text-decoration: none; }
    .ord-besk { background: none; border-left: 0; padding: 0; font-size: inherit; margin: .1rem 0 .3rem; }
    .ord-bilder a::after { display: none; }
    .ord-ford summary { display: none; }
    .ord-ford p { background: none; border-left: 0; padding: 0; font-size: inherit; margin: 0; }
    .ord-grupprubrik { break-after: avoid; color: #000; }
    .ord-post.ord-markerad { background: none; }
}