/* QuiLog — delar visuell identitet med QuiOps (samma bolag, se CLAUDE.md) */

html, body {
    margin: 0;
    padding: 0;
    background: #e9edf1;
    font-family: Arial, Helvetica, sans-serif;
    color: #222;
}

* { box-sizing: border-box; }

body { padding-bottom: 24px; }

a { color: #7a6a00; }

.appShell {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 12px 24px;
}

/* ── Header ──────────────────────────────────────────────────────────── */

.appHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 18px 4px 14px;
}

.appHeaderLogo {
    font-size: 24px;
    font-weight: bold;
}

.appHeaderOrg {
    font-size: 14px;
    color: #555;
}

.appNav {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 14px;
    font-weight: bold;
}

.appNav a { text-decoration: none; }
.appNav a:hover { text-decoration: underline; }

/* ── Cards ───────────────────────────────────────────────────────────── */

.cardSection {
    background: #fff;
    border: 1px solid #d4d9df;
    border-radius: 12px;
    margin: 0 0 14px;
    padding: 14px;
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
}

.cardSection h2, .cardSection h3 {
    margin-top: 0;
}

.nowCard {
    border: 2px solid #f0f200;
}

/* ── Forms ───────────────────────────────────────────────────────────── */

.fieldStack {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0 0 10px;
}

.fieldRow {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.fieldRow > label { flex: 1; min-width: 130px; }

label {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.labelText {
    font-size: 13px;
    color: #333;
    font-weight: bold;
}

.checkboxLabel {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: normal;
}

input, select, textarea, button {
    font: inherit;
}

input[type="text"], input[type="password"], input[type="date"], input[type="time"],
input[type="datetime-local"], input[type="number"], select, textarea {
    width: 100%;
    min-height: 44px;
    border: 1px solid #c8d0d8;
    border-radius: 8px;
    padding: 8px 12px;
    background: #fff;
    color: #222;
    -webkit-appearance: none;
    appearance: none;
    line-height: 1.2;
}

textarea { min-height: 80px; resize: vertical; }

.primaryButton, .secondaryButton, .dangerButton {
    border: 0;
    border-radius: 10px;
    min-height: 44px;
    padding: 10px 16px;
    font-weight: bold;
    cursor: pointer;
}

.primaryButton { background: #f0f200; color: #111; }
.secondaryButton { background: #dfe5ea; color: #222; }
.dangerButton { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }

.primaryButton:hover, .secondaryButton:hover { filter: brightness(0.95); }

.inlineForm { display: inline; }

/* ── Meddelanden ─────────────────────────────────────────────────────── */

.flashError {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 14px;
    margin-bottom: 12px;
}

.flashWarning {
    background: #fffaeb;
    color: #92400e;
    border: 1px solid #fde68a;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 14px;
    margin-bottom: 12px;
}

.flashOk {
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 14px;
    margin-bottom: 12px;
}

/* ── Nu-panelen ──────────────────────────────────────────────────────── */

.statusRow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 10px;
}

.statusLabel { font-size: 14px; color: #555; }
.statusValue { font-size: 17px; font-weight: bold; }

/* ── Veckonavigering ─────────────────────────────────────────────────── */

.weekNav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    font-weight: bold;
}

.weekNav a { text-decoration: none; }

/* ── Dagkort ─────────────────────────────────────────────────────────── */

.dayCard {
    background: #fff;
    border: 1px solid #d4d9df;
    border-radius: 12px;
    margin: 0 0 12px;
    overflow: hidden;
}

.dayCardHeader {
    background: #f5f6f7;
    padding: 10px 14px;
    border-bottom: 1px solid #e2e6ea;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.dayCardWeekday { font-weight: bold; }
.dayCardDate { color: #666; font-size: 13px; }

.dayCardBody { padding: 12px 14px; }

.dayCardSection {
    padding: 8px 0;
    border-top: 1px solid #eef1f3;
}
.dayCardSection:first-child { border-top: none; padding-top: 0; }

.dayCardSectionLabel {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #888;
    font-weight: bold;
    margin-bottom: 4px;
}

.dayCardEmpty { color: #999; font-size: 14px; }

.entryRow {
    font-size: 14px;
    padding: 2px 0;
}

.entryContinues {
    border-left: 3px dashed #b8bec4;
    padding-left: 8px;
    margin-left: -2px;
}

.warningIcon { color: #b35c00; }
.flaggedManual { color: #7a6a00; font-size: 12px; }

/* details/summary som knappar för att lägga till nytt i ett dagkort */
.addToggle > summary {
    cursor: pointer;
    color: #7a6a00;
    font-weight: bold;
    font-size: 13px;
    list-style: none;
    padding: 4px 0;
}
.addToggle > summary::-webkit-details-marker { display: none; }
.addToggle > summary::before { content: "+ "; }
.addToggle[open] > summary::before { content: "− "; }
.addToggleBody { padding: 8px 0 4px; }

/* ── Tabeller (admin) ────────────────────────────────────────────────── */

.adminTable {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.adminTable th {
    text-align: left;
    padding: 8px 10px;
    border-bottom: 2px solid #d4d9df;
    color: #555;
    font-size: 12px;
    text-transform: uppercase;
}

.adminTable td {
    padding: 8px 10px;
    border-bottom: 1px solid #eef1f3;
    vertical-align: top;
}

.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: bold;
}

.badgeAdmin { background: #fef3c7; color: #92400e; }
.badgeDriver { background: #d1fae5; color: #065f46; }

/* ── Månadsöversikt ──────────────────────────────────────────────────── */

.monthTable { width: 100%; border-collapse: collapse; }
.monthTable td, .monthTable th { padding: 6px 8px; text-align: center; }
.monthTable td:first-child, .monthTable th:first-child { text-align: left; }
.monthDot { color: #7a6a00; font-size: 18px; }

/* ── Login ───────────────────────────────────────────────────────────── */

.loginPage {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e9edf1;
    padding: 16px;
}

.loginCard {
    background: #fff;
    border: 1px solid #d4d9df;
    border-radius: 16px;
    padding: 32px;
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.loginLogo { font-size: 26px; font-weight: bold; text-align: center; }
.loginOrgName { font-size: 14px; color: #555; text-align: center; margin-top: -10px; }

/* ── Responsivt ──────────────────────────────────────────────────────── */

@media (max-width: 560px) {
    .appHeader { flex-direction: column; align-items: flex-start; }
    .fieldRow { flex-direction: column; }
    .adminTable { font-size: 13px; }
}