* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Apple Color Emoji', 'Segoe UI Emoji';
    margin: 0;
    background: #f7f7f8;
}

.container {
    padding: 12px;
    max-width: 960px;
    margin: 0 auto;
}

h1 {
    font-size: 22px;
    margin: 8px 0 12px;
}

/* Meta-block */
fieldset.meta {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 10px;
    background: white;
}

legend {
    font-weight: 600;
    padding: 0 6px;
}

.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
}

/* Inputs */
input, select, button {
    font-size: 16px;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    width: 100%;
}

    input:focus, select:focus {
        outline: 2px solid #2563eb22;
        border-color: #2563eb55;
    }

    input.time {
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        letter-spacing: 0.3px;
    }

.textnum {
    font-variant-numeric: tabular-nums;
}

/* Stackade celler */
.stack {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .stack small {
        font-size: 12px;
        line-height: 1;
    }

.muted {
    color: #6b7280;
}

/* Tabell */
.table {
    margin-top: 12px;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
}

.table-head, .table-row {
    display: grid;
    grid-template-columns: 36px /* # */
    64px /* Start */
    64px /* Slut  */
    88px /* K m   */
    88px /* F m   */
    118px /* K tid */
    118px /* F tid */
    104px /* K km/h */
    104px /* F km/h */
    1fr; /* Fel % */
    gap: 8px;
    align-items: start;
}

.table-head {
    padding: 8px;
    background: #f3f4f6;
    font-weight: 600;
    font-size: 12px;
}

.table-row {
    padding: 10px 8px;
    border-top: 1px solid #f1f1f1;
    font-size: 14px;
}

.table .idx {
    text-align: center;
}

/* Fel % */
.err.big {
    font-size: 16px;
    text-align: right;
    white-space: nowrap;
    color: inherit;
}

.bold-red {
    color: #dc2626;
    font-weight: 700;
}

.table-head > div:last-child,
.table-row > .stack:last-child,
.table-row > div:last-child {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    overflow: visible;
}

/* Actions */
.actions {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 12px;
    flex-wrap: wrap;
}

    .actions button {
        width: auto;
    }

    .actions .email {
        display: flex;
        align-items: center;
        gap: 6px;
    }

        .actions .email input {
            width: 220px;
        }

/* Mobil-layout */
@media (max-width: 768px) {
    .grid-2 {
        grid-template-columns: 1fr;
    }

    .table-head, .table-row {
        grid-template-columns: 32px 56px 56px 84px 84px 120px 120px 100px 100px 1fr;
        gap: 6px;
    }

    input, select {
        padding: 8px 10px;
    }
}

/* Fel % röd */
.err.big.bold-red {
    color: #dc2626 !important;
    font-weight: 700;
}

/* ===== Smal vy (kortlayout) ===== */
@media (max-width: 520px) {

    .table {
        overflow: visible;
    }

    .table-row > * {
        min-width: 0;
    }

    .table-head {
        display: none;
    }

    .table-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px 8px;
        align-items: start;
        padding: 12px 10px;
    }

        .table-row .idx {
            grid-column: 1 / 2;
            align-self: center;
            font-weight: 600;
        }

        /* Start / Slut */
        .table-row > div:nth-child(2) {
            grid-column: 1 / 2;
        }

        .table-row > div:nth-child(3) {
            grid-column: 2 / 3;
        }

        /* K m / F m */
        .table-row > div:nth-child(4) {
            grid-column: 1 / 2;
        }

        .table-row > div:nth-child(5) {
            grid-column: 2 / 3;
        }

        /* K tid / F tid */
        .table-row > div:nth-child(6) {
            grid-column: 1 / 2;
        }

        .table-row > div:nth-child(7) {
            grid-column: 2 / 3;
        }

        /* K km/h / F km/h */
        .table-row > div:nth-child(8) {
            grid-column: 1 / 2;
        }

        .table-row > div:nth-child(9) {
            grid-column: 2 / 3;
        }

        /* Fel % */
        .table-row > div:nth-child(10) {
            grid-column: 1 / -1;
            display: flex;
            justify-content: flex-end;
        }

    .stack small {
        font-size: 11px;
        opacity: 0.9;
    }

    .kp {
        padding: 8px 10px;
    }
}

/* --- Primärknapp (iPhone fix) --- */
.actions button,
.actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 16px;
    white-space: nowrap;
    -webkit-appearance: none;
    appearance: none;
    background: #2563eb;
    border: 1px solid #1d4ed8;
    color: #ffffff !important;
    font-weight: 600;
    border-radius: 10px;
    position: relative;
    z-index: 1;
}

    .actions button:focus-visible,
    .actions .btn:focus-visible {
        outline: 2px solid #93c5fd;
        outline-offset: 2px;
    }

    .actions button:active,
    .actions .btn:active {
        opacity: .92;
    }

.actions {
    position: relative;
    z-index: 0;
    flex-wrap: wrap;
}

    .actions .email {
        flex: 1 1 280px;
        min-width: 240px;
    }

        .actions .email input {
            width: 100%;
        }

/* ===== Nya tydliga etiketter Kontroll / Figurant ===== */
.role-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 2px;
    display: inline-block;
}

.role-k-label {
    color: #1d4ed8;
}
/* Blå – Kontroll */
.role-f-label {
    color: #16a34a;
}
/* Grön – Figurant */

@media (max-width: 520px) {
    .role-label {
        font-size: 10px;
        margin-bottom: 1px;
    }
}

/* Tydligt visuellt band för Kontroll / Figurant */
.role-k {
    border-left: 3px solid #1d4ed8; /* blå kant */
    padding-left: 6px;
}

.role-f {
    border-left: 3px solid #16a34a; /* grön kant */
    padding-left: 6px;
}

/* Små tydliga etiketter över kontroll / figurant */
.role-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 2px;
    display: inline-block;
}

.role-k-label {
    color: #1d4ed8; /* blå – Kontroll */
}

.role-f-label {
    color: #16a34a; /* grön – Figurant */
}

@media (max-width: 520px) {
    .role-label {
        font-size: 10px;
        margin-bottom: 1px;
    }
}
/* Färgband som INTE påverkar layouten (påverkar inte linjering) */
.role-k {
    box-shadow: inset 3px 0 0 #1d4ed8; /* blå linje på insidan */
}

.role-f {
    box-shadow: inset 3px 0 0 #16a34a; /* grön linje på insidan */
}

/* Justera vertikal linjering för Start, Slut och Fel %
   så de hamnar i nivå med K/F-fälten (som har en label ovanför) */
/*.table-row > div:nth-child(2),
.table-row > div:nth-child(3),
.table-row > div:nth-child(10) {
    padding-top: 18px;*/ /* justera vid behov (14–20px) efter känsla */
/*}*/

.kp-disabled {
    background-color: #e5e7eb !important; /* ljusgrå */
    color: #374151 !important; /* mörkare text */
    opacity: 1; /* INTE halvtransparent */
    cursor: not-allowed;
}


/* Om start = Släpvagn → ge mer utrymme så texten syns */
.start-kp.sl {
    font-weight: 600;
    font-size: 14px;
    width: 120px; /* Öka bredd – du kan justera */
    min-width: 120px;
}

/* Osynlig label för att höjdjustera Start / Slut / Fel så de linjerar med K/F */
.spacer-label {
    color: transparent; /* text osynlig */
}

/* När start = Släp → gör Start bredare och Slut smalare utan att störa höjden */
.table-row.slap-mode > div:nth-child(2) { /* Start */
    grid-column: span 2; /* tar två celler */
}

.table-row.slap-mode > div:nth-child(3) { /* Slut */
    display: none; /* göms helt */
}

/* Den osynliga etiketten ligger kvar så höjden är stabil */