/*
 * app-tilpasning.css — HÅNDSKREVET. Ret her, ikke i app.css.
 *
 * Dette er de rettelser, der KUN er nødvendige, fordi appen er gået fra at eje
 * hele dokumentet til at være en shortcode på en side sammen med et tema.
 * Hver regel står med sin begrundelse, så den ikke bliver "ryddet op" senere.
 *
 * Byggescriptet føjer denne fil til den skolerede app.css. Rækkefølgen er vigtig:
 * denne fil skal komme SIDST for at kunne rette op.
 */

/* Indpakningen skal være udgangspunkt for absolut placering, se ::before nedenfor.
   isolation: isolate giver appen sin egen z-index-kontekst, så dens lag ikke kan
   lægge sig hen over temaets header eller menuer. */
#ziggo-regn {
    position: relative;
    isolation: isolate;
}

/* Accentstriben øverst var position:fixed, dengang appen ejede hele vinduet.
   Som shortcode ville den lægge sig tværs over browservinduets top, hen over
   temaets header. Den hører til i appens egen kasse. */
#ziggo-regn::before {
    position: absolute;
}

/* background-attachment: fixed på indpakningen giver en baggrund, der står stille,
   mens siden ruller - det ser forkert ud, når appen kun fylder en del af siden. */
#ziggo-regn {
    background-attachment: scroll;
}

/* Temaer sætter ofte max-width og typografi på indholdsområdet. Appen har sin egen
   .container med max-width: 1200px og skal have lov at fylde det, den får. */
#ziggo-regn {
    width: 100%;
    max-width: none;
    float: none;
}

/* Divi og mange temaer sætter margin-bottom på afsnit, lister og tabeller inde i
   indholdsområdet. Appens egen nulstilling rammer allerede alt inde i #ziggo-regn,
   men temaet kan vinde på specificitet ved ID-selektorer som #et-boc. De her
   elementer er dem, appen faktisk bruger, hvor et arvet mellemrum er synligt. */
#ziggo-regn p,
#ziggo-regn ul,
#ziggo-regn ol,
#ziggo-regn li,
#ziggo-regn table,
#ziggo-regn h1,
#ziggo-regn h2,
#ziggo-regn h3 {
    margin-bottom: 0;
}

/* Temaer sætter tit list-style og indrykning på lister i indholdet. */
#ziggo-regn ul,
#ziggo-regn ol {
    list-style: none;
}

/* iOS zoomer ind, når man klikker i et felt med skrift under 16px (erfaringsregel
   6b.2). To grunde til at reglen står her og ikke kun i app-raw.css:
   
   1. Den kan tabe til temaets egen inputstyling. Her kommer den sidst.
   2. VIGTIGERE: skriftstørrelsen kan skaleres ned til 0,90. Byggescriptet har
      ganget alle font-size med --skrift-faktor, så mobilens 16px ville blive
      14,4px — og så zoomer iOS ved hvert klik i et felt. max() sætter et gulv,
      der ikke kan skaleres væk. Vælger man en STØRRE skrift, følger felterne
      stadig med. */
/*
 * !important STÅR HER MED VILJE — læs begrundelsen før du fjerner det.
 *
 * Appen har klasse-afgrænsede feltregler som `.stamdata-group input` og
 * `.bulk-betaling-bar input`, der sætter 13px. Efter skoleringen vejer de
 * (0,1,1,1) tungere end en almindelig `#ziggo-regn input` (0,1,0,1). Mobilens
 * 16px-regel har derfor ALDRIG ramt de felter — heller ikke dengang appen var
 * en enkeltstående HTML-fil. iOS har zoomet ind ved klik i firmanavn, CVR og
 * datofelterne, uden at nogen opdagede det.
 *
 * At hæve specificiteten i stedet ville kræve, at hver enkelt af de ti-tolv
 * klasseregler blev gentaget her — en liste, der ville falde ud af trit med
 * app-raw.css ved næste tilføjelse. Erfaringsregel 6b.10 tillader netop
 * !important her, når begrundelsen er skrevet ned.
 *
 * max() sikrer desuden gulvet mod --skrift-faktor: en nedskalering til 0,90 må
 * ikke kunne bringe et felt under 16px igen.
 */
@media (max-width: 768px) {
    #ziggo-regn input,
    #ziggo-regn select,
    #ziggo-regn textarea {
        font-size: max(16px, calc(16px * var(--skrift-faktor, 1))) !important;
    }
}

/* ---------- Gemmestatus ---------- */
/*
 * NY i WordPress-udgaven. localStorage kunne ikke fejle - en netværksgemning kan.
 * Uden en synlig status ville en tabt postering se ud som om den blev gemt.
 * Ligger fast øverst, så den også ses under en fuldskærmstilstand (regel 6b.14).
 */
#ziggo-regn-gemmestatus {
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 99999;
    display: none;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 8px;
    font-family: var(--font-display, system-ui, sans-serif);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    max-width: min(360px, calc(100vw - 24px));
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

#ziggo-regn-gemmestatus.er-synlig {
    display: flex;
}

#ziggo-regn-gemmestatus.tilstand-gemmer {
    background: #1e293b;
    color: #f1f5f9;
}

#ziggo-regn-gemmestatus.tilstand-gemt {
    background: #065f46;
    color: #ecfdf5;
}

/* Rød og bliver stående. En fejl her betyder, at data IKKE er i databasen -
   den må ikke forsvinde af sig selv, som en kvittering må. */
#ziggo-regn-gemmestatus.tilstand-fejl {
    background: #991b1b;
    color: #fef2f2;
    cursor: pointer;
}

#ziggo-regn-gemmestatus .gemmestatus-tekst {
    display: block;
}

/* ---------- Indlæsningstilstand ---------- */
/*
 * Appen henter nu sine posteringer over netværket. I det sekund er tallene på
 * skærmen ikke bare tomme - de er UKENDTE. Vises 0 kr., ligner det et tomt
 * regnskab frem for et regnskab, der ikke er hentet endnu (regel 3.2).
 */
#ziggo-regn.henter-data .container {
    opacity: 0.35;
    pointer-events: none;
    /* Markøren skal SIGE det, når man peger på noget, der ikke kan klikkes.
       En dæmpet app ser stadig ud som en app, og uden dette får man ingen
       forklaring på, at klikket ikke blev hørt. */
    cursor: progress;
}

#ziggo-regn-indlaeser {
    padding: 28px 20px;
    display: flex;
    justify-content: center;
    font-family: var(--font-display, system-ui, sans-serif);
}

.indlaeser-kort {
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 520px;
    padding: 16px 20px;
    border: 1px solid var(--border, #e2e8f0);
    border-left: 5px solid var(--primary, #2563eb);
    border-radius: 10px;
    background: var(--surface, #ffffff);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
    text-align: left;
}

.indlaeser-tekst {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.indlaeser-tekst strong {
    font-size: 15px;
    color: var(--text, #0f172a);
}

.indlaeser-ventetid:empty { display: none; }

.indlaeser-ventetid {
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}

.indlaeser-knap {
    align-self: flex-start;
    margin-top: 8px;
    padding: 6px 14px;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 7px;
    background: var(--surface, #ffffff);
    color: var(--text, #0f172a);
    font-family: inherit;
    font-size: 12.5px;
    cursor: pointer;
}

.indlaeser-knap:hover { border-color: var(--primary, #2563eb); }

.indlaeser-tekst span {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-secondary, #475569);
}

/* BEVÆGELSEN ER HELE POINTEN. Et stillestående kort er ikke til at skelne fra
   en app, der er gået i stå — og det er dér, folk begynder at klikke igen. */
.indlaeser-snurre {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border: 2.5px solid var(--border, #e2e8f0);
    border-top-color: var(--primary, #2563eb);
    border-radius: 50%;
    animation: ziggoregn-snurr 0.75s linear infinite;
}

@keyframes ziggoregn-snurr {
    to { transform: rotate(360deg); }
}

/* Nogle får kvalme af bevægelse. Så pulserer kortet i stedet for at snurre. */
@media (prefers-reduced-motion: reduce) {
    .indlaeser-snurre {
        animation: ziggoregn-puls 1.4s ease-in-out infinite;
        border-top-color: var(--border, #e2e8f0);
        background: var(--primary, #2563eb);
    }
    @keyframes ziggoregn-puls {
        0%, 100% { opacity: 0.35; }
        50% { opacity: 1; }
    }
}

#ziggo-regn-indlaeser.skjult {
    display: none;
}

/* Kunne posteringerne slet ikke hentes, må appen ikke vise en tom kassekladde.
   Så er der intet at bogføre videre på, og en ny postering ville få bilagsnummer
   1 oven i eksisterende bilag. */
#ziggo-regn-hentefejl {
    display: none;
    margin: 24px auto;
    max-width: 640px;
    padding: 20px 22px;
    border: 1px solid #fca5a5;
    border-left: 5px solid #dc2626;
    border-radius: 8px;
    background: #fef2f2;
    color: #7f1d1d;
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: 14px;
    line-height: 1.6;
}

#ziggo-regn-hentefejl.er-synlig {
    display: block;
}

#ziggo-regn-hentefejl h2 {
    font-family: var(--font-display, system-ui, sans-serif);
    font-size: 17px;
    margin-bottom: 8px;
    color: #991b1b;
}

#ziggo-regn-hentefejl code {
    display: block;
    margin-top: 10px;
    padding: 8px 10px;
    background: #fff;
    border-radius: 5px;
    font-size: 12.5px;
    color: #475569;
    word-break: break-word;
}


/* ---------- hidden-attributten skal altid vinde ---------- */
/*
 * !important STÅR HER MED VILJE.
 *
 * `hidden` betyder "dette element er ikke relevant lige nu". Browserens egen
 * regel er blot `[hidden]{display:none}` — uden klasse, uden id — så ENHVER
 * regel i appen med et display slår den. Fx `.theme-toggle-btn{display:flex}`,
 * hvilket betød at `btnLogud.hidden = true` ikke gjorde noget som helst.
 *
 * Det er ikke en fejl i den ene knap; det er en fælde, der rammer hver gang
 * nogen skjuler noget med attributten frem for en klasse. Derfor én regel her
 * i stedet for at jagte den enkeltvis.
 *
 * Skal et element vises igen, så fjern attributten — lad være med at style
 * uden om den.
 */
#ziggo-regn [hidden],
#ziggo-regn[hidden] {
    display: none !important;
}


/* ---------- Fuld bredde på mobil ---------- */
/*
 * På en telefon er 90 % spild: de 10 % går til to margener, der ikke bruges til
 * noget, mens tabellerne mangler pladsen. Containeren fylder derfor det hele.
 *
 * Den indvendige polstring bliver stående. Uden den støder tal og tekst helt ud
 * til skærmkanten, og på en telefon med afrundede hjørner bliver yderste tegn
 * svært at læse.
 */
@media (max-width: 768px) {
    #ziggo-regn .container {
        width: 100%;
    }
}


/* ---------- Bredden styres af containeren alene ---------- */
/*
 * Indpakningen havde 20 px polstring i siderne fra dengang, appen var en
 * selvstændig side. Nu bestemmer .container bredden (90 %, 100 % på mobil), og
 * så bliver de 20 px trukket fra FØR de 90 % regnes — resultatet blev 87 % af
 * vinduet i stedet for 90.
 *
 * To ting, der begge bestemmer bredden, giver et tal ingen kan forudsige.
 * Polstringen fjernes derfor vandret; den lodrette bliver, da den er luft over
 * og under, ikke bredde.
 */
#ziggo-regn {
    padding-left: 0;
    padding-right: 0;
}


/* ---------- Advarsel om gammel, cachet udgave ---------- */
/*
 * Rød og bliver stående. Kører browseren en anden app end serveren, er enhver
 * anden fejlsøgning spildt, indtil det er ude af verden — og det er usynligt
 * uden denne besked.
 */
#ziggo-regn-versionsadvarsel {
    display: block;
    margin: 0 0 18px;
    padding: 14px 18px;
    border: 2px solid #dc2626;
    border-radius: 8px;
    background: #fef2f2;
    color: #7f1d1d;
    font-family: var(--font-display, system-ui, sans-serif);
    font-size: 14px;
    line-height: 1.55;
}
#ziggo-regn-versionsadvarsel[hidden] { display: none !important; }


/* ---------- Appen begynder i toppen ---------- */
/*
 * Indpakningen havde 28 px luft foroven fra dengang, appen var en selvstændig
 * side med plads over overskriften. Overskriften er væk, og appen skal starte
 * øverst — så luften er der ikke længere noget til.
 *
 * Den nederste bliver: den er afstand til bunden af siden, ikke til toppen.
 */
#ziggo-regn {
    padding-top: 0;
}