/* Variabler (--bg, --card-bg, --border, --text, --muted, --primary, --primary-light)
   bor i root.css så teman kan overrida dem. Denna fil innehåller bara
   komponent-mönster-utilities (`.ds-*`) + FE17-typografi (`.apl-label*`/`.apl-info-*`).
   `:root`-blocket flyttat 2026-05-12 (FE7a). */

/* =====================================================================
   FE17 — Typografi-klasser för labels och info-värden

   Ersätter ad-hoc `class="fw-semibold fs-5"` (469 hits) och
   `class="text-xs text-muted"` (218 hits) med kanoniska klasser som
   läser FE17-variablerna från `root.css`. Variablerna skalas av
   FontSizePicker (`:root.table-font-lg/xl`), så labels/info-text följer
   med när användaren ökar tabellstorleken för läsbarhet.

   Floor-modell: storlek krymper aldrig under 1rem på små FontSize-val
   (sm/md). Bara lg/xl skalar uppåt.

   Användning:
     <label class="apl-label" for="x">Etikett</label>
     <label class="apl-label-strong" for="x">Viktig etikett</label>
     <span class="apl-info-value">@värde</span>
     <span class="apl-info-muted">Kompletterande info</span>

   Klasserna kan kombineras med Bootstrap-utilities (mb-2, d-block,
   text-truncate osv.) — typografi-egenskaper är dock kanoniska och
   ska INTE blandas med fs-5/fw-semibold/text-xs i samma element.
   ===================================================================== */
.apl-label {
    font-size: var(--label-font-size);
    font-weight: var(--label-font-weight);
    color: var(--label-color, var(--text));
    margin-bottom: 0.25rem;
    display: inline-block;
}

.apl-label-strong {
    font-size: var(--label-font-size);
    font-weight: var(--label-bold-weight);
    color: var(--label-color, var(--text));
    margin-bottom: 0.25rem;
    display: inline-block;
}

.apl-info-value {
    font-size: var(--info-font-size);
    color: var(--text);
}

.apl-info-muted {
    font-size: var(--info-muted-font-size);
    color: var(--muted);
}

/* PAGE / MODAL BASE */
.modern-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* CARD */
.ds-card {
    background: var(--card-bg);
    border-radius: 14px;
    border: 1px solid var(--border);
    box-shadow: 0 6px 16px rgba(0,0,0,0.05);
    transition: 0.2s;
}

    .ds-card:hover {
        box-shadow: 0 10px 22px rgba(0,0,0,0.08);
    }


.ds-card-header {
    font-size: 12px;
    font-weight: 500;
    color: var(--text);
    background: linear-gradient(180deg, var(--amiga-header-top) 0%, var(--amiga-header-bottom) 100%);
    border-radius: 14px 14px 0 0;
    padding: 10px 14px;
    /* 3D effect */
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), /* top light */
    inset 0 -1px 0 rgba(0,0,0,0.05), /* bottom edge */
    0 2px 4px rgba(0,0,0,0.06); /* outer lift */

    border-bottom: 1px solid rgba(0,0,0,0.05);
}
.ds-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text);
}

.ds-subtitle {
    font-size: 0.85rem;
    color: var(--muted);
}

.ds-card-body {
    padding: 20px;
}
.ds-text {
    width: 100%;
    border-radius: 10px;
    border: 1px solid var(--border);
    padding: 10px 14px;
    background: var(--bg);
    color: var(--text);
    font-size: 0.95rem;
    transition: 0.2s;
}
/* INPUTS */
.ds-input,
.ds-select,
.ds-textarea {
    width: 100%;
    border-radius: 10px;
    border: 1px solid var(--border);
    padding: 10px 14px;
    background: var(--bg);
    color: var(--text);
    font-size: 0.95rem;
    transition: 0.2s;
}

    .ds-input:focus,
    .ds-select:focus,
    .ds-textarea:focus {
        outline: none;
        border-color: var(--primary);
        background: var(--card-bg);
    }

/* BUTTONS */
.ds-btn {
    border-radius: 10px;
    padding: 8px 16px;
    font-weight: 500;
    border: 1px solid transparent;
    cursor: pointer;
    transition: 0.2s;
}

.ds-btn-primary {
    background: var(--primary);
    color: var(--saveb-text);
}

    .ds-btn-primary:hover {
        opacity: 0.9;
    }

.ds-btn-secondary {
    background: var(--card-bg);
    color: var(--text);
    border: 1px solid var(--border);
}
.ds-btn-cancel {
    background: var(--card-bg);
    color: var(--text);
    border: 1px solid var(--border);
}
.ds-btn-cancel:hover {
    background-color: var(--bs-danger, #dc3545);
    color: #ffffff;
}
/* GRID */
.ds-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}

/* LABEL */
.ds-label {
    font-size: 0.8rem;
    color: var(--muted);
}

.ds-value {
    font-weight: 500;
    color: var(--text);
}

/* Modal density presets (FE15) — flyttat till `app-utilities.css`
   eftersom det är `.apl-*`-klasser och hör tematiskt ihop med skip-link,
   radio-label och övriga utilities, inte komponent-mönster. */