/* 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); }

.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);
    color: #fff;
}

/* 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);
}