/**
 * Knapper - .ds1_knapp med varianter, og filter-reset.
 */

.ds1_knapp {
    font-size: var(--ui-font-sm, 14px);
    padding: var(--ui-control-pad-y, 9px) var(--ui-control-pad-x, 15px);
    min-height: var(--ds1-kontrollhoeyde, 42px);
    cursor: pointer;
    border: 1px solid var(--border);
    background: var(--input-bg);
    border-radius: var(--radius);
    color: var(--text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
}
.ds1_knapp:hover { background: var(--hover-bg); border-color: var(--primary); }
.ds1_knapp--primaer {
    background: var(--primary);
    color: rgb(var(--primary-fg-rgb));
    border-color: var(--primary);
}
.ds1_knapp--primaer:hover {
    opacity: 0.92;
    background: var(--primary);
}
/* Valgt knapp i en knappegruppe (`valgknapper`, `aria-pressed`). Tonet, ikke
   fylt: den ene fylte knappen på sida er hovedhandlingen, og et valg skal
   ikke se ut som en handling. */
.ds1_knapp[aria-pressed="true"] {
    background: color-mix(in srgb, var(--primary) 14%, var(--input-bg));
    border-color: var(--primary);
    color: var(--primary);
    font-weight: 400;  /* Jaktleder: valgt vises med farge og flate, ikke fet; ttas 600 */
}
.ds1_knapp[aria-pressed="true"]:hover {
    background: color-mix(in srgb, var(--primary) 20%, var(--input-bg));
}
.ds1_knapp--fare {
    border-color: rgb(var(--destructive-rgb));
    color: rgb(var(--destructive-rgb));
    background: transparent;
}
.ds1_knapp--fare:hover {
    background: rgb(var(--destructive-rgb));
    color: rgb(var(--primary-fg-rgb));
    border-color: rgb(var(--destructive-rgb));
}
.ds1_knapp--spok {
    background: transparent;
    border-color: transparent;
}
.ds1_knapp--spok:hover {
    background: var(--hover-bg);
    border-color: var(--border);
}

/* Deaktivert knapp: dempet, sperret peker, og hover-effekten er borte -
   knappen skal ikke svare på musa når den ikke kan brukes. Hver variant
   får hvilefargen sin tilbake på hover, slik at det er samme knapp uansett
   hvor musa står. Profilkortets «Lagre» står slik til noe er endret. */
.ds1_knapp:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.ds1_knapp:disabled:hover {
    background: var(--input-bg);
    border-color: var(--border);
}
.ds1_knapp--primaer:disabled:hover {
    opacity: 0.55;
    background: var(--primary);
    border-color: var(--primary);
}
.ds1_knapp--fare:disabled:hover {
    background: transparent;
    color: rgb(var(--destructive-rgb));
    border-color: rgb(var(--destructive-rgb));
}
.ds1_knapp--spok:disabled:hover {
    background: transparent;
    border-color: transparent;
}

/* Ikonknapp: bare et ikon, ingen tekst. Kvadratisk, 44 px berøringsflate
   (WCAG 2.5.5), teksten ligger i `aria-label`. Trykt tilstand via
   `aria-pressed="true"` (regelen over) når knappen slår noe av og på,
   som blyanten som åpner redigering i et kort. */
.ds1_knapp--ikon {
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    flex: 0 0 auto;
    gap: 0;
}
.ds1_knapp--ikon .fas,
.ds1_knapp--ikon .fa-solid {
    font-size: 16px;
    line-height: 1;
}

/* Liten ikonknapp i ei rad: 24 px synlig, uten ramme og bakgrunn, dempet
   farge; rød på hover og fokus (fjern). Beroeringsflata er fortsatt
   44 px: et usynlig pseudo-element rundt knappen tar trykket. Legges
   SAMMEN med .ds1_knapp--ikon. */
.ds1_knapp--ikon-liten {
    position: relative;
    width: 24px;
    height: 24px;
    min-height: 24px;
    border-color: transparent;
    background: transparent;
    color: var(--text-muted);
}
/* Jaktleder: 44 × 44 px trykkflate rundt 24 px knapp (inset -11px fra innsiden av 1 px ramme); ttas har
   32 px som bare vokser opp og mot venstre. */
.ds1_knapp--ikon-liten::before {
    content: "";
    position: absolute;
    inset: -11px;
}
.ds1_knapp--ikon-liten:hover,
.ds1_knapp--ikon-liten:focus-visible {
    background: transparent;
    border-color: transparent;
    color: rgb(var(--destructive-rgb));
}
/* Tekstikon (kart 29.09): ikonknapp i tekstens størrelse inne i en linje med tekst, f.eks. oppdater
   i en forklaringsrad. Ingen ramme eller flate, dempet farge; trykkflata er minst 24 px via ::before. */
.ds1_knapp--tekstikon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;
    padding: 0;
    margin: 0 0 0 .25em;
    border: 0;
    background: none;
    color: var(--text-muted);
    font-size: inherit;
    line-height: 1;
    vertical-align: baseline;
    cursor: pointer;
}
/* display:inline-flex over skal ikke overstyre [hidden] (Kart). */
.ds1_knapp--tekstikon[hidden] { display: none; }
.ds1_knapp.ds1_knapp--tekstikon,
html[data-ui-size] .ds1_knapp.ds1_knapp--tekstikon { font-size: inherit; }
.ds1_knapp--tekstikon i,
.ds1_knapp--tekstikon .fas,
.ds1_knapp--tekstikon .fa-solid { font-size: 1em; }
/* Minst 24 × 24 px, festet i knappens nedre høyre hjørne: vokser opp og
   mot venstre, så den ikke gir rulling når knappen står ytterst i en rad med
   overflow. */
.ds1_knapp--tekstikon::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: max(100%, 24px);
    height: max(100%, 24px);
}
.ds1_knapp--tekstikon:hover,
.ds1_knapp--tekstikon:focus-visible {
    background: none;
    color: var(--text);
}
.ds1_knapp--tekstikon:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Veksleknapp med tekst: liten av/på-knapp i tekstlinjehøyde, f.eks.
   «Ref» i en listerad. Hvile: dempet tekst uten ramme. aria-pressed="true":
   primærfarge på svak flate, samme tone som valgt knapp over. Lik vekt i
   begge tilstander, så bredden ikke hopper. Trykkflata er 24 px høy via
   ::before: knappens egen bredde, vokser bare opp. */
.ds1_knapp.ds1_knapp--veksle {
    position: relative;
    width: auto;
    min-width: 0;
    min-height: 0;
    padding: 1px 6px;
    gap: 4px;
    border-color: transparent;
    background: transparent;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 400;  /* Jaktleder; ttas 600 */
    line-height: 1.4;
    vertical-align: baseline;
}
html[data-ui-size] .ds1_knapp.ds1_knapp--veksle { font-size: 12px; }
.ds1_knapp--veksle::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: max(100%, 24px);
}
.ds1_knapp.ds1_knapp--veksle:hover {
    background: var(--hover-bg);
    border-color: transparent;
    color: var(--text);
}
.ds1_knapp.ds1_knapp--veksle[aria-pressed="true"] {
    background: color-mix(in srgb, var(--primary) 14%, transparent);
    border-color: transparent;
    color: var(--primary);
}
.ds1_knapp.ds1_knapp--veksle[aria-pressed="true"]:hover {
    background: color-mix(in srgb, var(--primary) 20%, transparent);
}
.ds1_knapp--veksle:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}
/* Jaktleder: 44 px trykkflate ved berøring, også for tekstikon og veksleknapp. */
@media (pointer: coarse) {
    .ds1_knapp--tekstikon::before { width: max(100%, 44px); height: max(100%, 44px); }
    .ds1_knapp--veksle::before { height: max(100%, 44px); }
}

/* Nøytral liten ikonknapp (oppdater, vis, kopier): legges sammen med
   .ds1_knapp--ikon-liten og gir vanlig tekstfarge på hover og fokus. */
.ds1_knapp--ikon-liten.ds1_knapp--noytral:hover,
.ds1_knapp--ikon-liten.ds1_knapp--noytral:focus-visible {
    color: var(--text);
}

/* Sidehandlingen: hovedknappen øverst på en listeside («Ny jaktdag»,
   «Ny registrering»), eventuelt med en ufarget knapp ved siden av («Last
   ned PDF»). Under 640 px dekker hver knapp hele bredden. Sida legger klassen paa en <div> rundt knappene;
   ingen egen side-CSS. */
.ds1_sidehandling {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}
@media (max-width: 640px) {
    .ds1_sidehandling .ds1_knapp {
        display: flex;
        width: 100%;
        box-sizing: border-box;
        justify-content: center;
    }
}

/* Filter-reset */
.ds1_filternull {
    position: relative;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--input-bg);
    color: var(--primary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ds1_filternull:hover { background: color-mix(in srgb, var(--primary) 12%, transparent); }
.ds1_filternull .ds1_filternull__kryss {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 14px;
    height: 14px;
    background: rgb(var(--destructive-rgb));
    color: rgb(var(--primary-fg-rgb));
    border-radius: 50%;
    font-size: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}


/* Kartknapp (.ds1_kartknapp): knapp inne i kartet. Kvadratisk med samme høyde som feltene
   (--tt-ui-control: 40 px med mus, 48 px ved berøring) og litt gjennomsiktig kortflate, lesbar på satellitt og
   topo. .ds1_kartflate gir samme flate til et felt på kartet (søk). Aktiv/åpen: aria-pressed eller aria-expanded. */
.ds1_kartknapp {
    --_h: var(--tt-ui-control, var(--ds1-kontrollhoeyde, 42px));
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--_h);
    min-width: var(--_h);
    height: var(--_h);
    min-height: var(--_h);
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius, 6px);
    background: color-mix(in srgb, var(--card-bg) 82%, transparent);
    color: var(--text);
    font: inherit;
    font-size: var(--tt-ui-text, 13px);
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.ds1_kartknapp i { font-size: 1.15em; }
.ds1_kartknapp:hover { background: var(--card-bg); }
.ds1_kartknapp[aria-pressed="true"],
.ds1_kartknapp[aria-expanded="true"] { background: var(--card-bg); color: rgb(var(--primary-rgb)); border-color: rgb(var(--primary-rgb)); }
.ds1_kartknapp:focus-visible { outline: 2px solid rgb(var(--primary-rgb)); outline-offset: 1px; }
.ds1_kartknapp[hidden] { display: none; }
/* .input.ds1_kartflate: høyere spesifisitet, fordi felt.css (.input) lastes etter denne fila. */
.ds1_kartflate,
.input.ds1_kartflate { background: color-mix(in srgb, var(--card-bg) 82%, transparent); border-color: var(--border); }
.ds1_kartflate:focus-within,
.input.ds1_kartflate:focus { background: var(--card-bg); }