/* =====================================================
   tillagg.css
   Tillägg till design.css (ladda den EFTER design.css):
     - Flikar för kategorier
     - Rader för färgvarianter
     - Kompakt vy
   ===================================================== */


/* ---------- Flikar ---------- */

.flik-rad{
    display:flex;
    flex-wrap:wrap;
    gap:8px 14px;
    margin-bottom:20px;
}

.flik{
    font-family:'Caveat',cursive;
    font-size:1.6rem;

    background:transparent;
    color:var(--ink);
    border:2px solid var(--ink);
    border-radius:6px 6px 0 0;
    padding:2px 16px;
    cursor:pointer;
}

.flik:hover:not(.aktiv){ background:#f1f5f9; }

/* Vald flik: mörk och fylld */
.flik.aktiv{
    background:var(--ink);
    color:white;
}


/* ---------- Varianter (färger) ---------- */

/* En rad per färg: prick, namn, saldo (och sälj-knapp) */
.variant-rad{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:6px 12px;
    padding:6px 0;
}

/* Saldot fyller ut raden på försäljningssidan */
.variant-rad .streck-yta{
    flex:1;
    margin-bottom:0;
}

.farg-prick{
    width:18px;
    height:18px;
    flex-shrink:0;
    border-radius:50%;
    border:1px solid rgba(0,0,0,.3);
}

.variant-namn{
    font-family:'Caveat',cursive;
    font-size:1.5rem;
    min-width:60px;
}

/* Lagerhantering: strecken tar en egen rad, kontrollerna ligger under */
.saldo-sida .variant-rad .streck-yta{
    flex-basis:100%;
}


/* ---------- Kompakt vy ---------- */

/* Produkterna i flera kolumner på bredare skärmar */
body.kompakt #produkt-lista{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
    gap:0 24px;
}

body.kompakt .produkt{
    padding:8px 0;
    gap:10px;
    align-items:flex-start;
}

body.kompakt .produkt-bild{
    width:56px;
    height:56px;
    border-width:3px;
}

body.kompakt .produkt-info h2{
    font-size:1.5rem;
    margin-bottom:2px;
}

body.kompakt .variant-rad{
    padding:2px 0;
    gap:4px 8px;
}

body.kompakt .variant-namn{
    font-size:1.2rem;
    min-width:0;
}

body.kompakt .farg-prick{
    width:14px;
    height:14px;
}

body.kompakt .streck-siffra{ font-size:1.4rem; }

body.kompakt .streck-tomt,
body.kompakt .streck-antal{ font-size:1.2rem; }

body.kompakt .btn-salj{
    font-size:1.2rem;
    padding:1px 12px;
}

body.kompakt .saldo-knapp{
    width:32px;
    height:32px;
    font-size:18px;
}

body.kompakt .saldo-input{
    width:56px;
    font-size:1.5rem;
}