/**
 * MAPPE: /assets/css/components/
 * FIL: buttons.css
 *
 * BRUGES AF: ALLE sider med knapper
 *
 * BESKRIVELSE:
 * Alle button styles (primary, secondary, danger, lille, fuld, osv.)
 * Design manual (rev. D1, 2026-06-12):
 *   Primær knap: orange (#FF6B30), MØRK tekst (#111827) — hvid på orange måler
 *   kun 2.84:1 og fejler WCAG AA; mørk på orange måler 6.25:1 (AA ✓)
 *   Små knapper (.btn-lille): sekundær blå med hvid tekst (5.17:1, AA ✓)
 *   Sekundær knap: hvid/transparent, border
 *   Tertiær: blå tekst link med pil
 */

/* Basis knapper */
.btn-primary,
.btn-secondary {
    display: inline-block;
    padding: 0.5rem 0.875rem;
    border-radius: var(--border-radius);
    text-decoration: none;
    cursor: pointer;
    font-size: 0.875rem;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    transition: var(--transition);
}

/* Primær — orange med mørk tekst (D1) */
.btn-primary {
    background: var(--accent);
    color: var(--tekst-paa-accent);
    border: none;
    font-weight: 600;
}

.btn-primary:hover {
    background: var(--accent-hover);
    color: var(--tekst-paa-accent);
}

.btn-primary:focus {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Sekundær — hvid med border */
.btn-secondary {
    background: var(--surface);
    color: var(--tekst);
    border: 1.5px solid var(--color-border);
}

.btn-secondary:hover {
    background: var(--lys-grå);
    border-color: var(--mørk-grå);
    color: var(--tekst);
}

.btn-secondary:focus {
    outline: 2px solid var(--mørk-grå);
    outline-offset: 2px;
}

/* Tertiær — blå tekst link */
.btn-tertiary {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    color: var(--sekundær);
    font-size: 0.875rem;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    padding: 0;
    transition: var(--transition);
}

.btn-tertiary:hover {
    color: var(--tekst);
    text-decoration: underline;
}

/* Danger */
.btn-danger {
    padding: 0.5rem 0.875rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    font-size: 0.875rem;
    background: var(--fejl);
    color: white;
}

.btn-danger:hover {
    background: var(--red-700);
}

.btn-danger:focus {
    outline: 2px solid var(--fejl);
    outline-offset: 2px;
}

/* Success — grøn (positive handlinger). Kanonisk variant (afløser ubrugt grøn dashboard-knap) */
.btn-success {
    padding: 0.5rem 0.875rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    border: none;
    background: var(--success);
    color: #fff;
    transition: var(--transition);
}

.btn-success:hover {
    background: var(--green-600);
}

.btn-success:focus {
    outline: 2px solid var(--success);
    outline-offset: 2px;
}

/* Varianter */
.btn-fuld {
    width: 65%;
    margin: 0 auto;
    display: block;
    text-align: center;
    margin-bottom: 8px;
}

.btn-lille {
    padding: 4px 10px;
    font-size: 0.8125rem;
    margin-right: 3px;
}

/* D1: små primær-knapper er blå — orange m. mørk tekst er for svag i småt format,
   og hvid på orange fejler AA. Hvid på blå #2563EB = 5.17:1 (AA ✓) */
.btn-primary.btn-lille {
    background: var(--sekundær);
    color: var(--hvid);
    font-weight: 500;
}

.btn-primary.btn-lille:hover {
    background: var(--blue-700);
    color: var(--hvid);
}

.btn-primary.btn-lille:focus {
    outline: 2px solid var(--sekundær);
    outline-offset: 2px;
}

.btn-stor {
    padding: var(--spacing-md);
    font-size: 1rem;
}

/* ============================================================
   SMÅ KNAPPER (.btn-sm) — admin / tæt UI. KANONISK her (flyttet fra
   page-filen restaurant_admin.css, så de ~45 filer der bruger .btn-sm
   altid får korrekt styling uanset hvilken side-CSS der er loadet).
   Farver token-justeret (D1: små primær-knapper = blå).
   ============================================================ */
.btn-sm {
    padding: 0.4375rem 0.875rem;
    font-size: 0.8125rem;
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    transition: all 0.15s;
    text-decoration: none;
    white-space: nowrap;
    line-height: 1.4;
}

.btn-sm.primary { background: var(--sekundær); color: #fff; }
.btn-sm.primary:hover { background: var(--blue-700); }
.btn-sm.primary:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-sm.success { background: var(--success); color: #fff; }
.btn-sm.success:hover { background: var(--green-600); }
.btn-sm.danger { background: var(--fejl); color: #fff; }
.btn-sm.danger:hover { background: var(--red-700); }
.btn-sm.ghost {
    background: transparent;
    color: var(--mørk-grå);
    border: 1px solid var(--border);
}
.btn-sm.ghost:hover { background: var(--surface-2); border-color: var(--mørk-grå); }


/* Knap med fjern */
.btn-fjern {
    color: var(--fejl);
}

.btn-fjern:hover {
    color: var(--red-700);
}

/* Spinner i knapper — følger knappens tekstfarve (D1: primær har mørk tekst) */
.spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,.3);
    border-radius: 50%;
    border-top-color: currentColor;
    animation: spinner 0.6s linear infinite;
}

.btn-primary .spinner {
    border-color: rgba(17, 24, 39, .25);
}

@keyframes spinner {
    to { transform: rotate(360deg); }
}

/* D4 (2026-06-12): fuld bredde på primære handlinger på mobil — kontekstuelt:
   formularer, checkout-handlinger, modaler og bottom sheets. Auto-bredde
   bevares i kort, tabeller og inline-kontekster. */
@media (max-width: 768px) {
    form > .btn-primary,
    form > button[type="submit"].btn-primary,
    .form-actions .btn-primary,
    .modal-content .btn-primary.btn-stor,
    .bottom-sheet .btn-primary,
    .checkout-actions .btn-primary,
    .btn-primary.btn-stor {
        display: block;
        width: 100%;
        text-align: center;
    }
}