/* De huisstijl van dm-line.be voor de publieke pagina's waar de klant iets goedkeurt:
   /offerte/{token} en /prijsaanpassing/{token}.

   Dezelfde kleuren en verhoudingen als de klantmail (zie Services/KlantMailStijl.cs):
   navy tekst, zand als accentvlak, lichtgrijs als tweede vlak, titels in gewone dikte
   en overal rechte hoeken — de site gebruikt nergens afronding.

   aktiv-grotesk is het lettertype van de site maar een Typekit-webfont dat aan het
   domein dm-line.be hangt; hier valt het net als in de mail terug op Arial.

   Bewust een gedeelde stylesheet en geen scoped .razor.css: de twee akkoordpagina's
   horen er identiek uit te zien, en scoped css geldt maar voor één component. Elke
   selector hierin begint met .klantblad of .dm-knop, dus buiten die pagina's raakt ze
   niets — hou dat zo. Geladen in Components/App.razor. */

.klantblad-pagina {
    --navy: #1c384e;
    --zand: #ceb195;
    --grijs: #4a4e57;
    --lichtgrijs: #efefef;

    background: var(--lichtgrijs);
    min-height: 100vh;
    padding: 32px 16px;
    font-family: aktiv-grotesk, Arial, Helvetica, sans-serif;
    color: var(--navy);
}

/* 960 in plaats van 720: het offerteblad draagt een tabel met vijf kolommen, en op
   720 werden de omschrijvingen daar over vier regels in geknepen terwijl er op het
   scherm van de klant ruimte over was. */
.klantblad {
    max-width: 960px;
    margin: 0 auto;
    background: #ffffff;
}

.klantblad-kop {
    background: var(--navy);
    padding: 28px 44px;
}

.klantblad-merk {
    color: #ffffff;
    font-size: 19px;
    letter-spacing: 6px;
}

.klantblad-lijn {
    height: 6px;
    background: var(--zand);
}

/* Ruim, met lucht tussen de blokken: de eerste versie las voor de collega's als
   "alles staat opgepakt op elkaar". */
.klantblad-blad {
    padding: 44px 44px 20px 44px;
    font-size: 16px;
    line-height: 1.75;
}

.klantblad-wachten {
    text-align: center;
    padding: 64px 32px;
    color: var(--grijs);
}

.klantblad-wachten .spinner-border {
    color: var(--navy);
    margin-bottom: 12px;
}

.klantblad-bovenschrift {
    margin: 0 0 8px 0;
    font-size: 13px;
    letter-spacing: 1.4px;
    color: var(--grijs);
}

/* Gewone dikte en groot: de site zet titels nergens vet. */
.klantblad-titel {
    margin: 0 0 32px 0;
    font-size: 30px;
    line-height: 1.3;
    font-weight: 400;
    color: var(--navy);
}

.klantblad-kopje {
    margin: 0 0 10px 0;
    font-size: 17px;
    font-weight: 400;
    color: var(--navy);
}

.klantblad-badge {
    display: inline-block;
    margin: 0 0 20px 0;
    padding: 6px 14px;
    background: var(--navy);
    color: #ffffff;
    font-size: 13px;
    letter-spacing: 1.4px;
}

.klantblad-bijschrift {
    margin: 0 0 12px 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--grijs);
}

.klantblad-tekst {
    margin: 0 0 24px 0;
}

/* De tekstblokken komen als opgemaakte html uit de editor en dragen dus geen
   scope-attribuut; zonder ::deep raakt de opmaak ze niet. */
.klantblad-tekst ::deep p {
    margin: 0 0 14px 0;
}

.klantblad-tekst ::deep ul,
.klantblad-tekst ::deep ol {
    margin: 0 0 14px 0;
    padding-left: 22px;
}

.klantblad-tekst ::deep li {
    margin-bottom: 6px;
}

.klantblad-tekst ::deep a {
    color: var(--navy);
}

/* De inspringing uit de oorspronkelijke documenten. Dezelfde klassenamen als Quill
   gebruikt, zodat de tekst na een bewerking dezelfde structuur houdt; zie
   OfferteRichTextRenderer.InspringAttribuut. */
.klantblad-tekst ::deep .ql-indent-1 { margin-left: 24px; }
.klantblad-tekst ::deep .ql-indent-2 { margin-left: 48px; }
.klantblad-tekst ::deep .ql-indent-3 { margin-left: 72px; }
.klantblad-tekst ::deep .ql-indent-4 { margin-left: 96px; }
.klantblad-tekst ::deep .ql-indent-5 { margin-left: 120px; }
.klantblad-tekst ::deep .ql-indent-6 { margin-left: 144px; }

/* Het feitenvlak: lichtgrijs met een zandkleurige kantlijn, zoals in de mail. */
.klantblad-feit,
.klantblad-citaat {
    background: var(--lichtgrijs);
    border-left: 4px solid var(--zand);
    padding: 24px 26px;
    margin: 0 0 28px 0;
}

.klantblad-feit-hoofd {
    font-size: 20px;
    line-height: 1.4;
}

.klantblad-feit-toelichting {
    padding-top: 14px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--grijs);
}

.klantblad-citaat-tekst {
    margin-bottom: 12px;
}

.klantblad-antwoord {
    border-left: 3px solid var(--zand);
    padding-left: 14px;
}

.klantblad-sectie {
    margin: 0 0 24px 0;
}

.klantblad-documenten {
    list-style: none;
    margin: 0 0 8px 0;
    padding: 0;
}

.klantblad-documenten li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--lichtgrijs);
}

.klantblad-bestandsnaam {
    word-break: break-word;
}

/* De offerteregels met hun totalen. Alleen de offertepagina heeft die; de
   prijsaanpassing draagt één bedrag en gebruikt .klantblad-feit.

   Op een smal scherm mag de tabel zelf schuiven in plaats van de pagina: bedragen
   onder elkaar geduwd krijgen leest niemand meer als een prijsblad. */
.klantblad-tabelhouder {
    overflow-x: auto;
    margin: 0 0 10px 0;
}

/* De regel onder de tabel die zegt dat de bedragen inclusief btw zijn. De onderruimte
   van het tabelblok staat hier: de regel hoort bij de tabel en volgt er altijd op. */
.klantblad-tabel-voetnoot {
    margin: 0 0 28px 0;
    font-size: 13px;
    color: var(--grijs);
}

.klantblad-tabel {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

.klantblad-tabel th {
    font-weight: 400;
    text-align: left;
    color: var(--grijs);
    font-size: 12px;
    letter-spacing: 1.4px;
    padding: 0 0 10px 0;
    border-bottom: 1px solid var(--navy);
    white-space: nowrap;
}

.klantblad-tabel td {
    padding: 12px 0;
    border-bottom: 1px solid var(--lichtgrijs);
    vertical-align: top;
}

.klantblad-tabel th + th,
.klantblad-tabel td + td {
    padding-left: 20px;
}

.klantblad-bedrag {
    text-align: right;
    white-space: nowrap;
}

/* Een sectiekop tussen de regels: dezelfde functie als op de papieren offerte. */
.klantblad-tabel .klantblad-regel-sectie td {
    padding-top: 22px;
    border-bottom: none;
}

.klantblad-tabel .klantblad-regel-tekst td {
    color: var(--grijs);
    border-bottom: none;
    padding-top: 0;
}

.klantblad-regel-detail {
    font-size: 13px;
    line-height: 1.6;
    color: var(--grijs);
}

/* De totalen: geen randen tot de laatste regel, want daar staat wat de klant betaalt. */
.klantblad-tabel tfoot td {
    border-bottom: none;
    padding: 6px 0;
    color: var(--grijs);
}

.klantblad-tabel tfoot td + td {
    padding-left: 20px;
}

.klantblad-tabel tfoot .klantblad-totaal td {
    border-top: 1px solid var(--navy);
    padding-top: 14px;
    font-size: 17px;
    color: var(--navy);
}

/* Het zandkleurige vlak waarin DM-Line iets aan de klant vraagt. */
.klantblad-accent {
    background: var(--zand);
    padding: 32px 34px;
    margin: 0 0 28px 0;
}

.klantblad-accent .klantblad-bijschrift {
    color: var(--navy);
}

.klantblad-onderdeel {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(28, 56, 78, 0.25);
}

.klantblad-bevestiging {
    margin-top: 24px;
    padding: 20px;
    background: #ffffff;
}

.klantblad-bevestiging p {
    margin: 0 0 16px 0;
}

.klantblad-label {
    display: block;
    margin: 0 0 6px 0;
    font-size: 13px;
    letter-spacing: 1.4px;
    color: var(--grijs);
}

.klantblad-accent .klantblad-label {
    color: var(--navy);
}

.klantblad-veld {
    display: block;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid rgba(28, 56, 78, 0.35);
    border-radius: 0;
    background: #ffffff;
    font-family: inherit;
    font-size: 16px;
    color: var(--navy);
}

.klantblad-veld:focus {
    outline: none;
    border-color: var(--navy);
    box-shadow: 0 0 0 2px rgba(28, 56, 78, 0.15);
}

/* Het vinkje bij de algemene voorwaarden. Ruim aantikbaar, ook op een telefoon:
   het is de laatste stap voor een akkoord dat niet terug te draaien is. */
.klantblad-vinkje {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 20px;
}

.klantblad-vinkje input {
    flex: none;
    width: 20px;
    height: 20px;
    margin-top: 3px;
    accent-color: var(--navy);
}

.klantblad-vinkje label {
    font-size: 15px;
    line-height: 1.6;
    cursor: pointer;
}

/* De marge staat hier en niet als spatie in de markup: Razor knipt de witruimte
   tussen de tekst en de link weg, waardoor ze aan elkaar plakten. */
.klantblad-vinkje label a {
    margin-left: 6px;
    color: var(--navy);
}

/* Lijnt uit onder de tekst van het vinkje, niet onder het vakje zelf. */
.klantblad-vinkje-voet {
    margin: 10px 0 0 32px;
}

.klantblad-vinkje-voet .klantblad-bijschrift,
.klantblad-vinkje-voet .klantblad-fout {
    margin: 8px 0 0 0;
}

.klantblad-fout {
    margin: 8px 0 0 0;
    font-size: 13px;
    color: #9b2226;
}

.klantblad-knoppen {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
}

/* De knop van de site: navy vlak, witte tekst, rechte hoeken. */
.dm-knop {
    display: inline-block;
    padding: 14px 28px;
    border: 1px solid var(--navy);
    border-radius: 0;
    background: var(--navy);
    color: #ffffff;
    font-family: inherit;
    font-size: 15px;
    letter-spacing: 0.4px;
    text-decoration: none;
    cursor: pointer;
}

.dm-knop:hover:not(:disabled) {
    background: #14293a;
    border-color: #14293a;
    color: #ffffff;
}

.dm-knop:disabled {
    opacity: 0.55;
    cursor: default;
}

.dm-knop-leeg {
    background: transparent;
    color: var(--navy);
}

.dm-knop-leeg:hover:not(:disabled) {
    background: var(--navy);
    color: #ffffff;
}

.dm-knop-klein {
    padding: 8px 16px;
    font-size: 13px;
}

.klantblad-melding {
    padding: 18px 20px;
    margin: 0 0 20px 0;
    background: var(--lichtgrijs);
    border-left: 4px solid var(--zand);
}

.klantblad-melding-kop {
    margin-bottom: 6px;
    font-size: 17px;
}

.klantblad-melding-gelukt {
    border-left-color: #2f6f4e;
}

.klantblad-melding-let-op {
    border-left-color: #b07a1e;
}

.klantblad-melding-fout {
    border-left-color: #9b2226;
}

.klantblad-voet {
    background: var(--lichtgrijs);
    padding: 26px 44px;
    font-size: 13px;
    line-height: 1.8;
    color: var(--grijs);
}

.klantblad-voet a {
    color: var(--grijs);
}

@media (max-width: 575px) {
    .klantblad-pagina {
        padding: 0;
    }

    .klantblad-kop,
    .klantblad-blad,
    .klantblad-voet {
        padding-left: 22px;
        padding-right: 22px;
    }

    .klantblad-accent {
        padding: 24px 22px;
    }

    .klantblad-titel {
        font-size: 25px;
    }

    .klantblad-knoppen .dm-knop {
        width: 100%;
        text-align: center;
    }
}