/**
 * MAPPE: /assets/css/components/
 * FIL: ejer_toolbar.css
 *
 * BRUGES AF: de offentlige butikssider (butik.php, butik_service_public.php)
 * sammen med view-komponenten app/views/components/ejer_toolbar.php.
 *
 * BESKRIVELSE:
 * Kompakt ejer-toolbar + kunde-preview-pille. Ejer-UI på en KUNDEVENDT side
 * skal fylde så lidt som muligt — derfor en lille EJER-markør frem for en hel
 * sætning, og handlinger som kanoniske .btn-sm (designmanual §7).
 *
 * Tema-bevidst: alle farver kommer fra tokens, så toolbaren følger lyst/mørkt
 * tema. (Den tidligere service-side hårdkodede #1e293b og stod mørk i lyst tema.)
 */

/* Kompakt: ejer-UI skal fylde så lidt som muligt på den kundevendte side. */
.ejer-toolbar {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.375rem 0.625rem;
    margin: 0.625rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

/* Ejer-markør: ikon + kort label i stedet for en hel sætning. */
.ejer-toolbar-mark {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--slate-500);
    flex-shrink: 0;
}

.ejer-toolbar-mark svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.ejer-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Diskret tekst-link — bevidst lav vægt, jf. ønsket om at den er "lidt skjult". */
.ejer-preview-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    font-size: 0.8125rem;
    color: var(--slate-500);
    text-decoration: none;
    padding: 0.25rem 0.375rem;
    border-radius: var(--radius-sm);
    transition: var(--transition);
}

.ejer-preview-link svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.ejer-preview-link:hover {
    color: var(--sekundær);
    text-decoration: underline;
}

.ejer-preview-link:focus-visible {
    outline: 2px solid var(--sekundær);
    outline-offset: 2px;
}

/* Kunde-preview: flydende pille — nul plads i sidens flow. */
.kunde-preview-pille {
    position: fixed;
    left: 1rem;
    bottom: 1rem;
    z-index: 900;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--slate-800);
    color: var(--slate-50);
    padding: 0.5rem 0.875rem;
    border-radius: 9999px;
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    box-shadow: var(--shadow-lg);
}

.kunde-preview-pille svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.kunde-preview-afslut {
    border-left: 1px solid var(--slate-600);
    padding-left: 0.5rem;
    color: var(--accent);
    font-weight: 600;
}

.kunde-preview-pille:hover .kunde-preview-afslut {
    text-decoration: underline;
}

.kunde-preview-pille:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ═══════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════ */
@media (max-width: 900px) {
    .ejer-toolbar-label { display: none; }
}

@media (max-width: 640px) {
    /* På mobil bærer knapperne selv ejer-konteksten — det ensomme skjold
       ville bare efterlade et tomt felt til venstre. */
    .ejer-toolbar {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .ejer-toolbar-mark { display: none; }

    .ejer-toolbar-actions {
        flex: 1;
        justify-content: flex-start;
    }

    /* 44px touch targets på mobil */
    .ejer-toolbar-actions .btn-sm,
    .ejer-preview-link {
        min-height: 44px;
    }

    .kunde-preview-pille {
        min-height: 44px;
        left: 0.75rem;
        bottom: 0.75rem;
    }
}