/*
 * SkilteApp – "Vejskilt"-design oven på Filament.
 * Filaments egen CSS ligger i cascade layers, så reglerne her (uden layer) vinder uden !important.
 * Minimalistisk: ingen ikoner i menuer, knapper, faner og nøgletal – kun tekst, farve og luft.
 * Design: https://claude.ai/artifact/Crmbe9sU3JuqKvQBYTr8Bv
 */

:root {
    --sa-ground: #F3F3F0;
    --sa-surface: #FFFFFF;
    --sa-ink: #16181D;
    --sa-muted: #545A63;
    --sa-line: #E2E3DF;
    --sa-line-strong: #D4D5D0;
    --sa-blue: #1F4E9C;
    --sa-signal: #F5C400;
    --sa-signal-hover: #E6B800;
    --sa-condensed: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;
}


/* ===== Grundlag ===== */

.fi-body {
    background-color: var(--sa-ground);
    color: var(--sa-ink);
}

/* Ikoner er pynt her – vis kun tekst. Ikon-knapper (fx luk-kryds) bevares. */
.fi-sidebar-item-icon,
.fi-topbar-item-icon,
.fi-tabs-item .fi-icon,
.fi-btn > .fi-icon,
.fi-link > .fi-icon,
.fi-wi-stats-overview-stat-label-ctn .fi-icon,
.fi-section-header > .fi-icon,
.fi-ta-empty-state-icon-bg,
.fi-empty-state-icon-bg {
    display: none;
}

/* Ordrenumre (#128) i Barlow Condensed */
.sa-num {
    font-family: var(--sa-condensed);
    font-weight: 700;
    font-size: 1.25rem;
    font-variant-numeric: tabular-nums;
}


/* ===== Typografi: Barlow Condensed til overskrifter og tal ===== */

.fi-logo,
.fi-header-heading,
.fi-simple-header-heading,
.fi-section-header-heading,
.fi-ta-header-heading,
.fi-wi-stats-overview-stat-value {
    font-family: var(--sa-condensed);
    font-weight: 700;
    letter-spacing: 0;
}

.fi-logo {
    font-size: 1.75rem;
    line-height: 1;
}

.fi-header-heading {
    font-size: 2.75rem;
    line-height: 1.05;
}

.fi-simple-header-heading {
    font-size: 2.25rem;
    line-height: 1.1;
}

.fi-header-subheading {
    font-size: 1.0625rem;
    color: var(--sa-muted);
}

.fi-section-header-heading,
.fi-ta-header-heading {
    font-size: 1.5rem;
    line-height: 1.2;
}

.fi-wi-stats-overview-stat-value {
    font-size: 2.75rem;
    line-height: 1;
}

.fi-wi-stats-overview-stat-label {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--sa-muted);
}

/* Logo: Infra Group + undertitel (admin) */
.sa-brand {
    display: inline-flex;
    flex-direction: column;
    gap: 0.375rem;
    font-family: var(--sa-condensed);
    font-weight: 700;
    font-size: 1.75rem;
    line-height: 1;
}

.sa-brand-logo {
    display: block;
    height: 2rem;
    width: auto;
}

/* Lyst logo kun i den mørke admin-sidemenu; mørkt logo alle andre steder (fx login-siden). */
.sa-brand-logo-light,
.fi-panel-admin .fi-sidebar .sa-brand-logo-dark {
    display: none;
}

.fi-panel-admin .fi-sidebar .sa-brand-logo-light {
    display: block;
}

.sa-brand-sub {
    font-family: 'Barlow', system-ui, sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    color: #A5A8A0;
}


/* ===== Hovedhandling: signalgul med mørk tekst ("Opret ordre", "Bestil igen") ===== */

.fi-btn.sa-cta {
    background-color: var(--sa-signal);
    color: var(--sa-ink);
    font-weight: 700;
    box-shadow: none;
}

.fi-btn.sa-cta:hover,
.fi-btn.sa-cta:focus-visible {
    background-color: var(--sa-signal-hover);
    color: var(--sa-ink);
}

.fi-btn.sa-cta .fi-btn-label,
.fi-btn.sa-cta span {
    color: var(--sa-ink);
}


/* ===== Kundepanelet: lys topbar, aktiv menu = blå streg ===== */

.fi-panel-app .fi-topbar {
    background-color: var(--sa-surface);
    box-shadow: inset 0 -1px 0 var(--sa-line);
}

.fi-panel-app .fi-topbar-item-btn {
    background-color: transparent;
    border-radius: 0;
    font-weight: 600;
}

.fi-panel-app .fi-topbar-item.fi-active .fi-topbar-item-btn {
    background-color: transparent;
    box-shadow: inset 0 -2px 0 var(--sa-blue);
}

.fi-panel-app .fi-topbar-item.fi-active .fi-topbar-item-label {
    color: var(--sa-blue);
}


/* ===== Admin: mørk sidemenu (asfalt) ===== */

.fi-panel-admin .fi-sidebar {
    background-color: var(--sa-ink);
}

.fi-panel-admin .fi-sidebar-header {
    background-color: transparent;
    box-shadow: none;
    justify-content: flex-start;
}

.fi-panel-admin .fi-sidebar .fi-logo,
.fi-panel-admin .fi-sidebar .sa-brand {
    color: #FFFFFF;
}

.fi-panel-admin .fi-sidebar-item-btn {
    border-radius: 0.5rem;
}

.fi-panel-admin .fi-sidebar-item-label {
    color: #D4D5D0;
    font-weight: 600;
}

.fi-panel-admin .fi-sidebar-item-btn:hover,
.fi-panel-admin .fi-sidebar-item-btn:focus-visible {
    background-color: #24272C;
}

.fi-panel-admin .fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background-color: #2A2D33;
}

.fi-panel-admin .fi-sidebar-item.fi-active .fi-sidebar-item-label {
    color: #FFFFFF;
}

.fi-panel-admin .fi-sidebar-group-label {
    color: #A5A8A0;
}

.fi-panel-admin .fi-sidebar .fi-user-menu-trigger,
.fi-panel-admin .fi-sidebar-footer {
    color: #D4D5D0;
}

.fi-panel-admin .fi-sidebar .fi-input-wrp {
    background-color: #24272C;
    box-shadow: none;
}

.fi-panel-admin .fi-sidebar .fi-input {
    color: #FFFFFF;
}


/* ===== Faner: understreget tekst i stedet for knapper ===== */

.fi-tabs,
.fi-tabs:not(.fi-contained) {
    gap: 1.75rem;
    margin-inline: 0;
    padding: 0;
    background-color: transparent;
    border-radius: 0;
    box-shadow: inset 0 -1px 0 var(--sa-line-strong);
}

.fi-tabs-item {
    padding: 0 0 0.75rem;
    border-radius: 0;
    background-color: transparent;
    font-weight: 600;
}

.fi-tabs-item:hover {
    background-color: transparent;
}

.fi-tabs-item.fi-active {
    background-color: transparent;
    box-shadow: inset 0 -2px 0 var(--sa-blue);
}

.fi-tabs-item.fi-active .fi-tabs-item-label {
    color: var(--sa-blue);
}


/* ===== Valgknapper i bestillingen (varetype, form, dimension): store nok til en finger ===== */

.fi-fo-toggle-buttons .fi-btn {
    min-height: 3rem;
    min-width: 6.5rem;
    padding-inline: 1.25rem;
    font-size: 1rem;
    font-weight: 600;
}


/* ===== Status-forløb på en ordre (kundepanelet) ===== */

.sa-progress {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sa-progress li {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--sa-muted);
}

.sa-progress li::before {
    content: '';
    height: 4px;
    border-radius: 2px;
    background-color: var(--sa-line-strong);
}

.sa-progress li.is-done {
    color: var(--sa-ink);
}

.sa-progress li.is-done::before {
    background-color: var(--sa-blue);
}

/* Tekstlinje nederst på forsiden */
.sa-note {
    margin: 0;
    font-size: 1rem;
    color: var(--sa-muted);
}

.sa-note a {
    color: var(--sa-blue);
    font-weight: 600;
}