/* Normec huisstijl — enige bron van merkwaarden. Laadt ná bootstrap + DX-thema. */

@font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/ubuntu-300.ttf') format('truetype');
}
@font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/ubuntu-400.ttf') format('truetype');
}
@font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/ubuntu-500.ttf') format('truetype');
}
@font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/ubuntu-700.ttf') format('truetype');
}

:root {
    --normec-orange:        #EE7203;
    --normec-orange-bright: #FF900D;
    --normec-grey:          #575756;
    --normec-cream:         #FBF7F4;
    --normec-beige:         #EDE7E1;
    --normec-beige-light:   #EEE8E2;
    --normec-brown:         #451B05;
    --normec-teal:          #115757;
    --normec-white:         #FFFFFF;
    --normec-radius-pill:   999px;
    --normec-radius-card:   8px;
    --normec-grey-soft:     #9B948E;  /* secundaire tekst (labels, meta) */
    --normec-line-soft:     #F4EEE8;  /* rij-scheiding binnen kaarten */
    --normec-warn-bg:       #FBF1E8;  /* waarschuwingsvlak (oranje tint) */
    --normec-radius-field:  6px;      /* formuliervelden, nav-subitems */
    --normec-radius-chip:   4px;      /* code-/barcode-chips */
}

/* --- Bootstrap-overrides: bestaande markup kleurt mee --- */
:root {
    --bs-primary:     var(--normec-orange);
    --bs-primary-rgb: 238, 114, 3;
    --bs-link-color:  var(--normec-orange);
    --bs-link-hover-color: var(--normec-orange-bright);
    --bs-body-color:  var(--normec-grey);
    --bs-body-bg:     var(--normec-cream);
}

a, .btn-link { color: var(--normec-orange); }
a:hover, .btn-link:hover { color: var(--normec-orange-bright); }

/* Native formulier-elementen kleuren zonder dit mee in het browser-/DevExpress-blauw: de slider
   en checkbox op /settings, en elke toekomstige radio of range. Bootstrap's .form-check-input
   luistert niet naar accent-color (die tekent zijn eigen vinkje met background-image), vandaar
   de aparte :checked-regel eronder — o.a. "Voeg waypoints toe" op /sampling kleurde blauw. */
input[type="checkbox"],
input[type="radio"],
input[type="range"] {
    accent-color: var(--normec-orange);
}

.form-check-input:checked {
    background-color: var(--normec-orange);
    border-color: var(--normec-orange);
}

.form-check-input:focus {
    border-color: var(--normec-orange);
    box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--normec-orange) 25%, transparent);
}

.btn-primary {
    --bs-btn-bg: var(--normec-orange);
    --bs-btn-border-color: var(--normec-orange);
    --bs-btn-hover-bg: var(--normec-orange-bright);
    --bs-btn-hover-border-color: var(--normec-orange-bright);
    --bs-btn-active-bg: var(--normec-brown);
    --bs-btn-active-border-color: var(--normec-brown);
    /* Disabled niet vergeten: zonder deze twee valt een uitgeschakelde knop terug op de
       --bs-btn-disabled-bg uit het DevExpress-Bootstrap-thema en kleurt hij ineens blauw
       (gemeten rgb(15,108,189) op /sampling zolang er nog geen perceel gekozen was).
       Bootstrap legt er zelf al opacity .65 overheen, dus dit wordt gedempt oranje. */
    --bs-btn-disabled-bg: var(--normec-orange);
    --bs-btn-disabled-border-color: var(--normec-orange);
    --bs-btn-disabled-color: #fff;
    color: #fff;
}

/* De secundaire outline-variant was zo licht (DevExpress-grijs op wit) dat een ingeschakelde knop
   niet van een uitgeschakelde te onderscheiden was — gemeld 2026-09-16 over "Polygoon tekenen"/
   "Omschrijving bewerken" in het Bemonsteringsgebied-paneel. Ingeschakeld: duidelijk donkergrijs
   met zichtbare rand; uitgeschakeld blijft (via Bootstraps eigen opacity .65 + de lichtere
   disabled-kleuren hieronder) herkenbaar gedempt. */
.btn-outline-secondary {
    --bs-btn-color: var(--normec-grey);
    --bs-btn-border-color: var(--normec-grey-soft);
    --bs-btn-hover-bg: var(--normec-beige);
    --bs-btn-hover-color: var(--normec-brown);
    --bs-btn-hover-border-color: var(--normec-grey);
    --bs-btn-active-bg: var(--normec-beige);
    --bs-btn-active-color: var(--normec-brown);
    --bs-btn-active-border-color: var(--normec-grey);
    --bs-btn-disabled-color: var(--normec-grey-soft);
    --bs-btn-disabled-border-color: var(--normec-line-soft);
}

/* Zelfde valkuil als hierboven, maar dan de hele variant: .btn-outline-primary had helemaal geen
   huisstijl-override en rende dus in alle toestanden in het DevExpress-blauw (o.a. "Vastleggen en
   toewijzen", "Bewaren als perceel", en de permanent uitgeschakelde RVO-knop op /settings/rvo). */
.btn-outline-primary {
    --bs-btn-color: var(--normec-orange);
    --bs-btn-border-color: var(--normec-orange);
    --bs-btn-hover-bg: var(--normec-orange);
    --bs-btn-hover-border-color: var(--normec-orange);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--normec-orange-bright);
    --bs-btn-active-border-color: var(--normec-orange-bright);
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-color: var(--normec-orange);
    --bs-btn-disabled-border-color: var(--normec-orange);
}

/* Primaire CTA in pill-vorm (alleen waar expliciet toegepast, niet overal) */
.btn-pill {
    border-radius: var(--normec-radius-pill);
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

/* --- Publieke schermen (login/activeren/toegang-aanvragen/geen-toegang):
   gecentreerde kaart op crème, huisstijl-visitekaartje --- */
.auth-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem 1rem;
}

.auth-shell__brand {
    margin-bottom: 1.5rem;
}

.auth-shell__body {
    width: 100%;
    max-width: 420px;
}

.auth-shell__body .card {
    border: none;
    border-radius: var(--normec-radius-card);
    box-shadow: 0 2px 16px rgba(69, 27, 5, 0.08);
}

/* --- DevExpress Fluent accent → Normec-oranje ---
   Let op: verifieer de exacte class-namen in Step 2 tegen de gerenderde DX-knop.
   Deze selectoren dekken de Fluent/Bootstrap-variant van DxButton. */
.dxbl-btn-primary,
.dxbl-btn.dxbl-btn-primary {
    background-color: var(--normec-orange);
    border-color: var(--normec-orange);
    color: #fff;
}
.dxbl-btn-primary:hover {
    background-color: var(--normec-orange-bright);
    border-color: var(--normec-orange-bright);
}

/* --- Icoonacties (Components/IconAction.razor) ---
   Eén uiterlijk voor vaste rij-/tegelacties: transparant, grijs icoon, oranje op crème bij hover.
   De tooltip (data-tip) verschijnt direct onder het icoon, rechts uitgelijnd (de acties staan meestal aan de rechterrand), zonder vertraging. */
.icon-action {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background: none;
    border: none;
    padding: 4px 6px;
    font-size: 15px;
    line-height: 1;
    color: var(--normec-grey-soft);
    cursor: pointer;
    border-radius: var(--normec-radius-chip);
    text-decoration: none;
}

.icon-action:hover:not(:disabled),
.icon-action:focus-visible {
    color: var(--normec-orange);
    background-color: var(--normec-cream);
}

.icon-action--danger:hover:not(:disabled),
.icon-action--danger:focus-visible {
    color: #C0392B;
}

.icon-action:focus-visible {
    outline: 2px solid var(--normec-orange);
    outline-offset: 1px;
}

.icon-action:disabled {
    opacity: 0.5;
    cursor: default;
}

.icon-action[data-tip]:hover::after,
.icon-action[data-tip]:focus-visible::after {
    content: attr(data-tip);
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 2000;
    padding: 3px 8px;
    border-radius: var(--normec-radius-chip);
    background: var(--normec-brown);
    color: #fff;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.3;
    white-space: nowrap;
    pointer-events: none;
}