@layer foundation,pages,components;
@layer pages {
:root {
            --bg: #f7f5f0;
            --card: #ffffff;
            --text: #4a453e;
            --primary: #7a8b7b;
            --primary-hover: #657566;
            --accent: #c88a65;
            --border: #e5dec9;
            --danger: #c0392b;
            --success-bg: #eaf2eb;
            --warning-bg: #fef3e6;
            --info-bg: #eef3f4;
        }

        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            padding: 15px;
            background: var(--bg);
            color: var(--text);
            font-family:
                -apple-system,
                BlinkMacSystemFont,
                "Segoe UI",
                Roboto,
                sans-serif;
        }

        .side {
            max-width: 1250px;
            margin: 0 auto;
        }

        h1,
        h2,
        h3,
        h4 {
            margin-top: 0;
        }

        .nav-bar {
            display: flex;
            gap: 18px;
            flex-wrap: wrap;
            margin-bottom: 20px;
            padding: 12px 18px;
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 8px;
        }

        .nav-bar a {
            color: var(--text);
            text-decoration: none;
            font-weight: bold;
        }

        .kort {
            margin-bottom: 20px;
            padding: 18px;
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 8px;
        }

        .dempa {
            color: #777;
            font-size:var(--font-body);
        }

        .batch-status {
            display: grid;
            grid-template-columns:
                repeat(
                    auto-fit,
                    minmax(155px, 1fr)
                );
            gap: 10px;
            margin-top: 15px;
        }

        .status-kort {
            padding: 13px;
            background: #faf7f2;
            border: 1px solid var(--border);
            border-radius: 6px;
        }

        .status-kort .label {
            margin-bottom: 4px;
            color: #777;
            font-size:var(--font-label);
            text-transform: uppercase;
        }

        .status-kort .verdi {
            font-size:var(--font-section);
            font-weight: bold;
        }

        .maaling-kort {
            margin-top: 18px;
            padding-top: 16px;
            border-top: 1px solid var(--border);
        }

        .maaling-stat-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
            gap: 8px;
            margin-bottom: 14px;
        }

        .maaling-stat {
            padding: 10px 12px;
            background: #f4f8f2;
            border: 1px solid #d7e4d2;
            border-radius: 6px;
        }

        .maaling-stat .label {
            color: #697366;
            font-size:var(--font-label);
            font-weight: 700;
            text-transform: uppercase;
            margin-bottom: 4px;
        }

        .maaling-stat .verdi {
            font-size:var(--font-section);
            font-weight: 700;
        }

        .maaling-stat .undertekst {
            margin-top: 3px;
            color: #777;
            font-size:var(--font-label);
        }

        .chart-wrap {
            position: relative;
            width: 100%;
            min-height: 260px;
            padding: 8px;
            background: #fff;
            border: 1px solid var(--border);
            border-radius: 6px;
        }

        #fermentation-chart {
            display: block;
            width: 100%;
            height: 260px;
        }

        .chart-legend {
            display: flex;
            gap: 8px 14px;
            flex-wrap: wrap;
            margin: 8px 0 0;
            color: #666;
            font-size:var(--font-label);
        }

        .chart-dot {
            display: inline-block;
            width: 9px;
            height: 9px;
            margin-right: 5px;
            border-radius: 50%;
            vertical-align: middle;
        }

        .chart-dot.sg {
            background: #4d7253;
        }

        .chart-dot.abv {
            background: #ae6141;
        }

        .chart-dot.temperature { background: #3e789d; border-radius: 1px; }
        .chart-legend label { display: inline-flex; align-items: center; gap: 5px; margin: 0; font-weight: 400; cursor: pointer; }
        .chart-legend .chart-dot { margin-right: 0; }

        .chart-note {
            margin-top: 10px;
            color: #777;
            font-size:var(--font-label);
            line-height: 1.45;
        }

        .analyse-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
            gap: 9px;
        }

        .analyse-resultat {
            margin: 9px 0;
            padding: 10px 12px;
            background: #fafafa;
            border: 1px solid var(--border);
            border-radius: 6px;
        }

        .analyse-values {
            display: flex;
            gap: 7px;
            flex-wrap: wrap;
            margin-top: 7px;
        }

        .analyse-value {
            padding: 4px 7px;
            background: #f1f4ef;
            border-radius: 4px;
            font-size:var(--font-label);
        }

        .maaling-felt {
            padding: 11px 12px;
            background: #edf5ea;
            border: 1px solid #d7e4d2;
            border-radius: 6px;
            margin-bottom: 12px;
        }

        .maaling-felt .flex-rad {
            align-items: flex-end;
        }

        .checkbox-line {
            display: flex;
            align-items: center;
            gap: 7px;
            min-height: 42px;
            margin-bottom: 8px;
            font-size:var(--font-label);
            font-weight: 600;
        }

        .checkbox-line input {
            width: auto;
            margin: 0;
        }

        .batch-type-rad {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
            margin-top: 9px;
        }

        .batch-type-badge {
            display: inline-block;
            padding: 5px 10px;
            border-radius: 14px;
            font-size:var(--font-label);
            font-weight: bold;
        }

        .batch-type-badge.hoved {
            background: #eaf2eb;
            color: #526553;
        }

        .batch-type-badge.soster {
            background: #f0d9ca;
            color: #8b5f43;
        }

        .batch-innstillinger {
            margin-top: 12px;
            padding: 0;
            border: 1px solid var(--border);
            border-radius: 6px;
            overflow: hidden;
        }

        .batch-innstillinger > summary {
            padding: 10px 12px;
            cursor: pointer;
            background: #faf7f2;
            font-size:var(--font-body);
            font-weight: bold;
        }

        .batch-innstillinger .innstillinger-innhold {
            padding: 12px;
        }

        .tilknyttede-soster {
            margin-top: 10px;
            padding: 10px;
            background: #f3ebe4;
            border-radius: 6px;
            font-size:var(--font-body);
        }

        .tilknyttede-soster a {
            color: var(--text);
            font-weight: bold;
        }

        .tabell-ramme {
            overflow-x: auto;
        }

        table {
            width: 100%;
            min-width: 650px;
            border-collapse: collapse;
        }

        th,
        td {
            padding: 9px;
            border-bottom: 1px solid var(--border);
            text-align: left;
            vertical-align: middle;
            font-size:var(--font-body);
        }

        th {
            background: #faf7f2;
        }

        .total-rad {
            font-weight: bold;
            background: #faf7f2;
        }

        input,
        select,
        textarea {
            width: 100%;
            margin-top: 4px;
            margin-bottom: 8px;
            padding: 10px;
            border: 1px solid var(--border);
            border-radius: 4px;
            background: white;
            font-size:var(--font-body);
        }

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

        label {
            font-size:var(--font-label);
            font-weight: 600;
        }

        button {
            min-height: 42px;
            padding: 9px 14px;
            border: 0;
            border-radius: 4px;
            background: var(--primary);
            color: white;
            cursor: pointer;
            font-weight: bold;
        }

        button:hover {
            background: var(--primary-hover);
        }

        button.slett {
            background: var(--danger);
        }

        button.rediger {
            background: var(--accent);
        }

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

        .flex-kol {
            flex: 1;
            min-width: 135px;
        }

        .flex-kol.bred {
            flex: 2;
        }

        .auto-save-status {
            display: block;
            min-height: 16px;
            margin-top: 3px;
            font-size:var(--font-label);
            font-weight: normal;
            color: #6f7f70;
        }

        .auto-save-status.feil {
            color: var(--danger);
        }

        details.prosess-steg {
            margin-bottom: 12px;
            overflow: hidden;
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 8px;
        }

        details.prosess-steg > summary {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 15px;
            cursor: pointer;
            font-weight: bold;
            list-style: none;
        }

        details.prosess-steg > summary::-webkit-details-marker {
            display: none;
        }

        details.prosess-steg > summary::after {
            content: "►";
            color: #888;
            font-size:var(--font-label);
            transition: transform 0.2s;
        }

        details.prosess-steg[open] > summary::after {
            transform: rotate(90deg);
        }

        details.prosess-steg[open] > summary {
            background: #faf7f2;
            border-bottom: 1px solid var(--border);
        }

        .steg-innhold {
            padding: 15px;
        }

        .status-tag {
            display: inline-block;
            margin-right: 8px;
            padding: 4px 10px;
            border-radius: 12px;
            background: #eee;
            font-size:var(--font-label);
        }

        .status-tag.Pågår {
            background: var(--warning-bg);
            color: var(--accent);
        }

        .status-tag.Fullført {
            background: var(--success-bg);
            color: var(--primary);
        }

        .steg-beskrivelse {
            margin-bottom: 15px;
            padding: 12px;
            background: var(--info-bg);
            border-radius: 6px;
            font-size:var(--font-body);
            line-height: 1.5;
        }

        .volum-forhaandsvisning {
            margin-bottom: 15px;
            padding: 12px;
            background: #f4f6f2;
            border-left: 4px solid var(--primary);
            border-radius: 5px;
        }

        .volum-forhaandsvisning strong {
            font-size:var(--font-section);
        }

        .logg-accordion {
            margin: 14px 0;
            overflow: hidden;
            border: 1px solid #d7e4d2;
            border-radius: 6px;
            background: #edf5ea;
        }

        .logg-accordion > summary {
            padding: 12px 14px;
            cursor: pointer;
            font-weight: bold;
            list-style: none;
        }

        .logg-accordion > summary::-webkit-details-marker {
            display: none;
        }

        .logg-accordion > summary::after {
            content: "►";
            float: right;
            color: #888;
            font-size:var(--font-label);
            transition: transform 0.2s;
        }

        .logg-accordion[open] > summary::after {
            transform: rotate(90deg);
        }

        .logg-accordion[open] > summary {
            border-bottom: 1px solid #d7e4d2;
        }

        .logg-accordion-innhold {
            padding: 12px;
            background: #f8fbf7;
        }

        .logg-accordion .logg-post {
            background: #edf5ea;
            border-color: #d7e4d2;
        }

        .logg-accordion .rediger-boks {
            background: #f8fbf7;
            border-color: #d7e4d2;
        }

        .logg-accordion-innhold .logg-post:last-child {
            margin-bottom: 0;
        }

        .logg-post {
            margin-bottom: 10px;
            padding: 12px;
            border: 1px solid var(--border);
            border-radius: 6px;
            background: #fafafa;
        }

        .logg-topp {
            display: flex;
            justify-content: space-between;
            gap: 10px;
            flex-wrap: wrap;
        }

        .logg-data {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
            margin: 9px 0;
        }

        .logg-verdi {
            padding: 5px 8px;
            background: #f2efe9;
            border-radius: 4px;
            font-size:var(--font-body);
        }

        .logg-tekst {
            margin-top: 8px;
            padding: 8px 10px;
            background: #f7f5f0;
            border-radius: 4px;
            line-height: 1.4;
            text-align: left;
            white-space: normal;
        }

        .logg-tekst strong {
            display: block;
            margin-bottom: 3px;
        }

        .logg-handlinger {
            display: flex;
            gap: 5px;
            flex-wrap: wrap;
        }

        .rediger-boks {
            margin-top: 12px;
            padding: 12px;
            background: #fff8f3;
            border: 1px solid var(--border);
            border-radius: 5px;
        }

        .skjema {
            margin-top: 15px;
            padding: 14px;
            background: #faf7f2;
            border: 1px solid var(--border);
            border-radius: 6px;
        }

        .vaeske-boks {
            margin-top: 12px;
            padding: 12px;
            background: #eef3f4;
            border-radius: 6px;
        }

        .kilde-boks {
            display: none;
        }

        .lagre-logg {
            background: #7f987b;
            color: #fff;
        }

        .lagre-logg:hover {
            background: #6d8669;
        }

        .fullfoer {
            width: 100%;
            margin-top: 15px;
            background: #bd8362;
            color: #fff;
        }

        .fullfoer:hover {
            background: #a97052;
        }

        .gjenapne-steg {
            width: 100%;
            margin-top: 10px;
            background: #eee8de;
            color: var(--text);
            border: 1px solid var(--border);
        }

        .gjenapne-steg:hover {
            background: #e2dacd;
        }

        .ekstra-omstikk {
            margin: -2px 0 14px 0;
            padding: 12px;
            background: #f3ebe4;
            border: 1px dashed var(--accent);
            border-radius: 8px;
        }

        .ekstra-omstikk button {
            width: 100%;
            background: var(--accent);
        }

        .flaske-feil {
            margin-bottom: 14px;
            padding: 11px 13px;
            background: #fff0ed;
            color: #8d2f26;
            border-left: 4px solid var(--danger);
            border-radius: 5px;
            font-size:var(--font-body);
            font-weight: 600;
        }

        .flaske-run {
            margin-bottom: 10px;
            padding: 12px;
            background: #fafafa;
            border: 1px solid var(--border);
            border-radius: 6px;
        }

        .flaske-preview {
            margin: 10px 0 12px 0;
            padding: 10px 12px;
            background: #f4f6f2;
            border-left: 4px solid var(--primary);
            border-radius: 5px;
            line-height: 1.6;
            font-size:var(--font-body);
        }

        .flaske-preview.feil {
            background: #fff0ed;
            border-left-color: var(--danger);
            color: #8d2f26;
        }

        .emballasje-info {
            margin: 10px 0 12px 0;
            padding: 10px 12px;
            background: #eef3f4;
            border-radius: 5px;
            font-size:var(--font-body);
            line-height: 1.55;
        }

        .emballasje-info a {
            color: var(--text);
            font-weight: bold;
        }

        .kostpris-linje {
            margin-top: 7px;
            font-weight: bold;
        }

        button:disabled {
            opacity: 0.45;
            cursor: not-allowed;
        }

        .samlet-rapport {
            margin-top: 25px;
            margin-bottom: 30px;
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 8px;
            overflow: hidden;
        }

        .samlet-rapport > summary {
            padding: 16px;
            cursor: pointer;
            font-weight: bold;
            background: #faf7f2;
            list-style: none;
        }

        .samlet-rapport > summary::-webkit-details-marker {
            display: none;
        }

        .samlet-rapport > summary::after {
            content: "▼";
            float: right;
            color: #888;
            font-size:var(--font-label);
            transition: transform 0.2s;
        }

        .samlet-rapport:not([open]) > summary::after {
            transform: rotate(-90deg);
        }

        .rapport-innhold {
            padding: 15px;
        }

        .rapport-post {
            padding: 14px 0;
            border-bottom: 1px solid var(--border);
        }

        .rapport-post:last-child {
            border-bottom: none;
        }

        .rapport-topp {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 10px;
            margin-bottom: 10px;
            font-size:var(--font-body);
        }

        .rapport-topp strong {
            font-size:var(--font-body);
            color: var(--text);
        }

        .rapport-topp span {
            color: #777;
            font-size:var(--font-body);
        }

        .rapport-avvik,
        .rapport-notat {
            margin-top: 7px;
            padding: 9px 11px;
            border-radius: 5px;
            line-height: 1.45;
            text-align: left;
        }

        .rapport-avvik {
            background: #fff3ed;
            border-left: 3px solid var(--accent);
        }

        .rapport-notat {
            background: #f4f6f2;
            border-left: 3px solid var(--primary);
        }

        .rapport-avvik strong,
        .rapport-notat strong {
            display: block;
            margin-bottom: 3px;
        }

        .fat-kort {
            margin: 12px 0 16px 0;
            padding: 14px;
            background: #f5f0e8;
            border: 1px solid var(--border);
            border-left: 4px solid var(--accent);
            border-radius: 6px;
        }

        details.fatparti-valg {
            margin-top: 9px;
            overflow: hidden;
            background: white;
            border: 1px solid var(--border);
            border-radius: 6px;
        }

        details.fatparti-valg > summary {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 12px 14px;
            cursor: pointer;
            list-style: none;
            font-weight: bold;
        }

        details.fatparti-valg > summary::-webkit-details-marker {
            display: none;
        }

        details.fatparti-valg > summary:hover {
            background: #faf7f2;
        }

        .fatparti-valg-tekst {
            min-width: 0;
        }

        .fatparti-valg-knapp {
            flex-shrink: 0;
            padding: 7px 10px;
            border-radius: 4px;
            background: var(--primary);
            color: white;
            font-size:var(--font-label);
        }

        details.fatparti-valg[open] .fatparti-valg-knapp::after {
            content: "Lukk";
        }

        details.fatparti-valg:not([open]) .fatparti-valg-knapp::after {
            content: "Velg / åpne";
        }

        .fat-grid {
            display: grid;
            grid-template-columns:
                repeat(
                    auto-fit,
                    minmax(150px, 1fr)
                );
            gap: 8px;
            margin: 10px 0;
        }

        .fat-verdi {
            padding: 9px;
            background: white;
            border: 1px solid var(--border);
            border-radius: 5px;
        }

        .fat-verdi .label {
            color: #777;
            font-size:var(--font-label);
            text-transform: uppercase;
        }

        .fat-feil {
            margin-bottom: 12px;
            padding: 10px 12px;
            background: #fff0ed;
            border-left: 4px solid var(--danger);
            border-radius: 5px;
            color: #8d2f26;
        }

        .fat-melding {
            margin-bottom: 12px;
            padding: 10px 12px;
            background: #eaf2eb;
            border-left: 4px solid var(--primary);
            border-radius: 5px;
        }



        .plan-grid {
            display: grid;
            gap: 8px;
        }

        .plan-step {
            display: grid;
            grid-template-columns: minmax(220px, 1fr) minmax(250px, 360px);
            align-items: center;
            gap: 12px;
            padding: 10px 12px;
            background: #faf7f2;
            border: 1px solid var(--border);
            border-radius: 6px;
        }

        .plan-date-row {
            display: grid;
            grid-template-columns: 1fr auto;
            align-items: center;
            gap: 7px;
        }

        .plan-date-row input,
        .plan-date-row button {
            margin: 0;
        }

        .reminder-list {
            display: grid;
            gap: 8px;
        }

        .reminder-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 10px 12px;
            border: 1px solid var(--border);
            border-radius: 6px;
            background: #fff;
        }

        .reminder-actions {
            display: flex;
            gap: 6px;
            flex-shrink: 0;
        }

        .reminder-actions button {
            min-height: 34px;
            padding: 6px 9px;
        }

        .mini-badge,
        .planlagt-chip {
            display: inline-block;
            margin-left: 7px;
            padding: 3px 6px;
            background: #eef2ec;
            border-radius: 10px;
            color: #637064;
            font-size:var(--font-label);
            font-weight: 700;
        }

        .planlagt-chip {
            background: #f4eee8;
            color: #84664f;
        }

        @media (max-width: 750px) {
            .plan-step {
                grid-template-columns: 1fr;
            }

            .plan-date-row {
                grid-template-columns: 1fr;
            }

            .reminder-row {
                align-items: flex-start;
                flex-direction: column;
            }
        }

        @media (max-width: 750px) {
            body {
                padding: 8px;
            }

            .kort {
                padding: 12px;
            }

            .batch-status {
                grid-template-columns:
                    repeat(
                        2,
                        minmax(120px, 1fr)
                    );
            }

            .status-kort .verdi {
                font-size:var(--font-section);
            }

            h1 {
                font-size:var(--font-heading);
            }

            details.prosess-steg > summary {
                padding: 12px;
            }
        }

/* Status actions have distinct, quiet colours. */
.status-summary .brew-button{background:#dcebf7;color:#244562;border-color:#bdd4e7}
.status-archive button{background:#f6ead1;color:#665020;border-color:#e3d0a5}
.status-failed>summary,.status-failed button{background:#f8dddd;color:#792e35;border:1px solid #eabdc0;border-radius:6px;padding:7px 10px}
.type-save-status{display:inline-block;background:#e9e2f4;color:#57466d;padding:5px 8px;border-radius:5px;font-size:var(--font-label);margin-top:4px}
.type-save-status[data-error=true]{background:#f8dddd;color:#792e35}
.batch-bottom-grid{grid-template-columns:1fr}

.status-type-fields>label{flex:1;min-width:80px;display:block}.status-type-fields select{width:100%}.type-save-status{flex:none;max-width:170px}

}