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


/* ===== Installér app: knap/trin og pop-up nederst på telefoner ===== */

.sa-install {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.sa-install-steps {
    margin: 0;
    padding-left: 1.25rem;
    list-style: decimal;
    font-size: 1rem;
    line-height: 1.6;
}

.sa-install-share {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    vertical-align: -0.2rem;
    color: var(--sa-blue);
}

.sa-install-link {
    margin: 0;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    background-color: var(--sa-ground);
    font-weight: 600;
    word-break: break-all;
    text-align: center;
}

.sa-install-sheet {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    padding: 1.25rem 16px calc(1.25rem + env(safe-area-inset-bottom));
    background-color: var(--sa-surface);
    border-radius: 1rem 1rem 0 0;
    box-shadow: 0 -8px 24px rgb(22 24 29 / 0.15);
}

.sa-install-sheet-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.sa-install-sheet-head img {
    flex: none;
    border-radius: 0.75rem;
}

.sa-install-sheet-title {
    margin: 0;
    font-family: var(--sa-condensed);
    font-size: 1.375rem;
    font-weight: 700;
}


/* ===== Vejledning (kundepanelet) ===== */

/* 2 kolonner fra lg; på mobil én. Et ulige sidste afsnit fylder hele bredden. */
.sa-guide {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    font-size: 1rem;
    line-height: 1.6;
}

@media (min-width: 64rem) {
    .sa-guide {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sa-guide > :last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}

.sa-guide p,
.sa-guide ul,
.sa-guide ol,
.sa-guide dl {
    margin: 0 0 0.75rem;
}

.sa-guide :is(p, ul, ol, dl):last-child {
    margin-bottom: 0;
}

.sa-guide ol {
    list-style: decimal;
    padding-left: 1.25rem;
}

.sa-guide ul {
    list-style: disc;
    padding-left: 1.25rem;
}

.sa-guide li + li {
    margin-top: 0.375rem;
}

.sa-guide h3 {
    margin: 1.25rem 0 0.375rem;
    font-family: var(--sa-condensed);
    font-size: 1.25rem;
    font-weight: 700;
}

.sa-guide dt {
    font-weight: 700;
}

.sa-guide dd {
    margin: 0 0 0.5rem;
    color: var(--sa-muted);
}

.sa-guide strong {
    font-weight: 700;
}

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