:root { --ink:#171717; --green:#171717; --cream:#f5f1e8; --card:#fffdf8; --line:#ded8cb; --muted:#69665f; --orange:#a94720; --yellow:#d6a600; --yellow-soft:#f5df8a; --yellow-pale:#fff4c9; --blue:#286e88; }
@media (min-width:768px) { body { background:#e9eee8; }.app-shell { max-width:1100px; padding:32px 34px 112px; } #today-view { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0 24px; align-items:start; } #today-view.hidden { display:none; } #today-view > .section-heading,#today-view > .hero-card,#today-view > .day-status-card,#today-view > .quick-grid,#today-view > .card-section:last-child { grid-column:1 / -1; } #today-view > .hero-card { margin-top:5px; } #today-view > .quick-grid { margin-bottom:0; } #today-view > .closing-link { grid-column:1 / -1; margin-top:12px; } #today-view > .card-section { margin-top:28px; } .bottom-nav { padding-left:max(34px, calc((100vw - 1100px)/2)); padding-right:max(34px, calc((100vw - 1100px)/2)); } .record-filters { grid-template-columns:1.4fr 1fr; align-items:end; }.record-filters > label { grid-column:1; }.record-filters > input { grid-column:1; }.record-filters > .filter-row,.record-filters > select { grid-column:2; }.record-filters > .filter-reset { grid-column:2; } }
.plan-summary { border:1px solid var(--line); border-radius:12px; background:var(--card); overflow:hidden; }.plan-summary article { padding:11px 13px; border-bottom:1px solid var(--line); }.plan-summary article:last-of-type { border-bottom:0; }.plan-summary strong,.plan-summary small { display:block; }.plan-summary small { color:var(--muted); font-size:.82rem; }.plan-summary > p { padding:11px 13px; }
.menu-section { margin-top:26px; }.menu-list,.pizza-list { border:1px solid var(--line); border-radius:13px; overflow:hidden; background:var(--card); }.menu-list > article,.pizza-card { padding:13px; border-bottom:1px solid var(--line); }.menu-list > article:last-child,.pizza-card:last-child { border-bottom:0; }.menu-list strong,.menu-list small,.pizza-card strong,.pizza-card small { display:block; }.menu-list small,.pizza-card small { color:var(--muted); font-size:.84rem; }.pizza-card { display:grid; gap:6px; }.pizza-card-head { display:flex; justify-content:space-between; gap:12px; align-items:baseline; }.pizza-price { color:var(--green); font-weight:800; }.menu-actions { display:flex; flex-wrap:wrap; gap:7px; margin-top:4px; }.menu-actions button { padding:5px 8px; border:1px solid #b7d5c4; border-radius:7px; color:var(--green); background:#edf6ef; font-size:.78rem; font-weight:700; }.ingredient-picker { display:grid; gap:7px; max-height:200px; overflow:auto; padding:8px; border:1px solid var(--line); border-radius:10px; }.ingredient-picker label { display:flex; align-items:center; gap:8px; font-size:.9rem; }.ingredient-picker input { width:19px; height:19px; accent-color:var(--green); }
.cost-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }.cost-grid .field { margin:0; }.recipe-row { display:grid !important; grid-template-columns:22px minmax(0,1fr) 82px; align-items:center !important; gap:8px !important; padding:8px 4px; border-bottom:1px solid var(--line); }.recipe-row:last-child { border-bottom:0; }.recipe-row span { min-width:0; font-weight:700; }.recipe-row small { display:block; color:var(--muted); font-size:.73rem; font-weight:400; }.recipe-row input[type="number"] { width:82px; padding:8px 6px; border:1px solid var(--line); border-radius:8px; font:inherit; }.cost-preview,.cost-summary { display:grid; gap:2px; padding:10px; border-radius:10px; color:#3d351e; background:var(--yellow-pale); font-size:.84rem; }.cost-preview strong,.cost-summary strong { color:#171717; }.cost-preview span,.cost-summary span,.cost-preview small,.cost-summary small { color:#5b470d; font-size:.78rem; }
.record-filters { display:grid; grid-template-columns:1fr; gap:8px; margin-bottom:12px; }.record-filters label { font-size:.84rem; font-weight:700; }.record-filters input,.record-filters select { width:100%; min-height:43px; padding:9px 11px; border:1px solid #c8cec7; border-radius:10px; background:white; color:var(--ink); font:inherit; }
.filter-row { display:grid; grid-template-columns:1fr 1fr; gap:8px; }.filter-reset { justify-self:start; padding:0; border:0; color:var(--green); background:transparent; font-weight:700; font-size:.85rem; }.day-status-card { display:flex; align-items:center; gap:11px; width:100%; margin:12px 0 -2px; padding:12px; border:1px solid #d3e3d8; border-radius:12px; color:var(--ink); background:#fffdf8; text-align:left; }.day-status-card > span:first-child { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; color:var(--green); background:#e4f0e8; font-size:1.2rem; }.day-status-card > span:nth-child(2) { flex:1; }.day-status-card strong,.day-status-card small { display:block; }.day-status-card small { color:var(--muted); font-size:.8rem; }.day-status-card b { color:var(--green); font-size:1.4rem; }
.brand { display:flex; align-items:center; gap:10px; }.brand-logo { width:86px; height:60px; object-fit:cover; object-position:center; border-radius:12px; mix-blend-mode:multiply; }
.report-card { padding:20px; border:1px solid var(--line); border-radius:15px; background:var(--card); }
.report-period { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-bottom:12px; }.report-period label { color:var(--muted); font-size:.78rem; }.report-period input { display:block; width:100%; margin-top:3px; padding:9px; border:1px solid #c8cec7; border-radius:8px; background:white; color:var(--ink); font:inherit; }.report-period button { grid-column:1 / -1; justify-self:start; }
.report-card h3 { margin:4px 0; }.report-counts { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }.report-counts span { padding:7px 9px; border-radius:8px; background:#e8f0ea; color:var(--green); font-size:.8rem; }.report-counts strong { margin-right:3px; }.report-records article { display:grid; gap:2px; padding:12px 0; border-bottom:1px solid var(--line); }.report-records span,.report-records small { color:var(--muted); font-size:.88rem; }
.report-options { display:grid; gap:9px; margin:18px 0 4px; padding:13px; border:1px solid var(--line); border-radius:10px; }.report-options legend { padding:0 5px; font-weight:750; font-size:.9rem; }.report-options label { font-size:.9rem; }.report-options input { width:18px; height:18px; vertical-align:middle; accent-color:var(--green); }.template-content { display:grid; gap:10px; margin-top:22px; }.template-content article,.chemical-card { padding:15px; border:1px solid var(--line); border-radius:13px; background:var(--card); }.template-content h3 { margin:0 0 4px; font-size:1rem; }.template-content p,.chemical-card p { font-size:.9rem; }.chemical-list { display:grid; gap:10px; margin-top:18px; }.chemical-card { display:grid; gap:8px; }.chemical-card small { display:block; color:var(--muted); font-size:.82rem; }.chemical-card p { margin:0; }.chemical-card > span { width:max-content; padding:4px 8px; border-radius:7px; font-size:.8rem; font-weight:750; }.risk-låg { color:#176044; background:#dceee2; }.risk-middels { color:#805419; background:#fff0c7; }.risk-høg { color:#912d26; background:#f9dfdb; }.risk-unknown { color:#586159; background:#e5e7e2; }

/* Pizza Casetta: varm gul flate med svarte detaljar. */
.topbar { padding:10px 12px; border-radius:16px; background:var(--yellow); box-shadow:0 5px 14px #17171716; }.topbar .eyebrow,.topbar h1 { color:#111; }.profile-button { color:#111; background:#fff7d7; border:1px solid #17171733; }.brand-logo { background:#fff9e9; mix-blend-mode:normal; }
.reference-intro { padding:15px; border:1px solid #dec655; border-radius:13px; background:var(--yellow-pale); }.reference-intro h3 { margin:0 0 5px; font-size:1rem; }.reference-intro p { margin:0; font-size:.9rem; }.reference-list { display:grid; gap:7px; padding:15px 15px 15px 34px; margin:0; border:1px solid var(--line); border-radius:13px; background:var(--card); font-size:.9rem; }.reference-source { margin:0; color:var(--muted); font-size:.8rem; }.reference-source a { color:#171717; font-weight:700; }
.flour-rows { display:grid; gap:8px; }.flour-row { display:grid; grid-template-columns:minmax(0, 1fr) 104px 34px; gap:7px; align-items:center; }.flour-row:first-child { grid-template-columns:minmax(0, 1fr) 104px; }.flour-row input { min-width:0; padding:11px; border:1px solid #c8cec7; border-radius:9px; font:inherit; }.add-flour { margin-top:8px; min-height:38px; }.remove-flour { display:grid; place-items:center; width:34px; height:34px; padding:0; border:0; border-radius:9px; color:#7a281e; background:#f9dfdb; font-size:1.35rem; }.dough-calculation { display:grid; grid-template-columns:repeat(2, 1fr); gap:7px; margin:12px 0; }.dough-calculation span,.dough-stats span { padding:8px; border-radius:8px; color:#3d351e; background:var(--yellow-pale); font-size:.81rem; }.dough-calculation strong { display:block; color:#171717; font-size:.95rem; }.dough-note-field { padding:13px; margin-top:16px; border:1px solid #dec655; border-radius:12px; background:var(--yellow-pale); }.dough-note-field h3 { margin:0; font-size:1rem; }.dough-journal-list { display:grid; gap:12px; margin-top:18px; }.dough-card { display:grid; gap:9px; padding:15px; border:1px solid var(--line); border-radius:14px; background:var(--card); }.dough-card p { margin:0; font-size:.9rem; }.dough-card small { display:block; color:var(--muted); font-size:.8rem; }.dough-stats { display:flex; flex-wrap:wrap; gap:6px; }.dough-result { padding:10px; border-left:4px solid var(--yellow); background:#fbf8ed; }.dough-result > strong { display:block; font-size:.85rem; }.dough-note { margin-top:6px !important; white-space:pre-wrap; }
[hidden] { display:none !important; }.public-site { min-height:100vh; display:grid; place-items:center; padding:24px; background:var(--yellow); }.public-site .app-shell,.public-site .bottom-nav,.public-site #auth-gate { display:none !important; }.public-landing,.auth-gate { width:min(100%, 540px); text-align:center; }.public-landing { padding:34px 24px; border:2px solid #171717; border-radius:22px; color:#171717; background:#fff9ea; box-shadow:10px 10px 0 #171717; }.public-logo { width:170px; max-width:70%; height:auto; margin:0 auto 18px; display:block; mix-blend-mode:multiply; }.public-landing h1,.auth-card h1 { margin:5px 0 9px; font-size:2.35rem; }.public-landing p:not(.eyebrow) { max-width:350px; margin:0 auto; }.staff-link { display:inline-block; margin-top:30px; color:#171717; font-weight:800; font-size:.86rem; }.auth-gate { margin:42px auto; }.auth-card { padding:26px 22px; border:1px solid var(--line); border-radius:20px; text-align:left; background:var(--card); box-shadow:0 10px 32px #17171716; }.auth-card .public-logo { width:122px; margin:0 0 12px; }.auth-card .primary-button { width:100%; }.auth-error { min-height:1.45em; margin:8px 0; color:#912d26; font-size:.88rem; }.auth-help { margin-top:18px; font-size:.82rem; }
.notice { color:#252119; background:var(--yellow-pale); border:1px solid #ddbb3d; }.hero-card { color:#171717; background:var(--yellow); box-shadow:0 8px 20px #4a370c24; }.hero-card p:not(.eyebrow) { color:#272112; }.hero-card .eyebrow { color:#46380a; }.progress-ring { background:conic-gradient(#171717 0deg, #fff8db99 0deg); }.progress-ring::before { background:var(--yellow); }.quick-action { border-color:#d8c675; }.quick-action span,.record-type { color:#171717; background:var(--yellow-soft); }.day-status-card { border-color:#dfc34f; }.day-status-card > span:first-child { color:#171717; background:var(--yellow-soft); }.closing-link { color:#171717; border-color:#dfc34f; background:var(--yellow-pale); }.primary-button { color:#171717; background:var(--yellow); border:1px solid #b98d00; }.primary-button:hover { background:#e3b411; }.nav-item.active { color:#171717; }.nav-item.active span { display:inline-grid; place-items:center; width:29px; height:29px; margin:0 auto 1px; border-radius:9px; background:var(--yellow); }.text-button,.document-item button,.record-action,.menu-actions button { color:#171717; }.record-action,.menu-actions button { border-color:#d6b92f; background:var(--yellow-pale); }.report-counts span { color:#171717; background:var(--yellow-pale); }.report-options input,.ingredient-picker input,.check-row input { accent-color:#bc9100; }.eyebrow { color:#806000; }.clarify { color:#5b470d; background:var(--yellow-pale); }.cool { background:#e3eef1; color:var(--blue); }.warning { background:#fae3d8; color:var(--orange); }.clean { color:#171717; background:var(--yellow-soft); }
@media print { .topbar,.notice,.quick-grid,.closing-link,.bottom-nav,.text-button,.form-actions,.clarify { display:none !important; } .app-shell { max-width:none; padding:0; } .hidden { display:none !important; } #reports-view { display:block !important; } body { background:white; } }
.document-overview { padding:12px; border:1px solid var(--line); border-radius:10px; background:#fafbf8; }
.allergen-overview { padding:12px; margin-bottom:14px; border:1px solid var(--line); border-radius:10px; background:#fafbf8; }.allergen-list { max-height:160px; margin-top:7px; overflow:auto; }.allergen-list article { display:grid; gap:2px; padding:9px 0; border-bottom:1px solid var(--line); }.allergen-list article:last-child { border:0; }.allergen-list small { color:var(--muted); font-size:.79rem; }
.document-list { max-height:156px; margin-top:7px; overflow:auto; }
.document-item { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 0; border-bottom:1px solid var(--line); font-size:.84rem; }
.document-item:last-child { border:0; }
.document-item strong,.document-item small { display:block; }.document-item small { color:var(--muted); }.document-item button { border:0; color:var(--green); background:transparent; font-weight:700; font-size:.8rem; }
.record-action { margin-top:8px; padding:5px 8px; border:1px solid #b7d5c4; border-radius:7px; color:var(--green); background:#edf6ef; font-size:.75rem; font-weight:700; }
.details-dialog-content { padding:22px; }.record-details { display:grid; gap:10px; margin-top:18px; }.record-details div { padding-bottom:9px; border-bottom:1px solid var(--line); }.record-details dt { color:var(--muted); font-size:.78rem; }.record-details dd { margin:2px 0 0; white-space:pre-wrap; }.record-details a { color:var(--green); font-weight:700; }
.help-list { display:grid; gap:10px; padding-left:22px; }.help-list strong { color:var(--green); }
.closing-link { display:flex; justify-content:space-between; width:100%; margin:-9px 0 25px; padding:13px; border:1px solid #d3e3d8; border-radius:12px; color:var(--green); background:#edf6ef; text-align:left; font-size:.9rem; }
* { box-sizing:border-box; } body { margin:0; background:var(--cream); color:var(--ink); font:16px/1.45 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } button { font:inherit; cursor:pointer; } .app-shell { max-width:720px; margin:0 auto; padding:24px 18px 105px; } .topbar,.section-heading,.dialog-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; } h1,h2,h3,p { margin:0; } h1 { font-size:1.35rem; } h2 { font-size:1.25rem; } h3 { font-size:1.35rem; margin-top:3px; } .eyebrow { color:var(--green); text-transform:uppercase; font-size:.72rem; letter-spacing:.09em; font-weight:750; } .muted { color:var(--muted); font-size:.9rem; } .profile-button { border:0; width:42px; height:42px; border-radius:50%; background:#d8e7dd; color:var(--green); font-weight:800; } .notice { display:flex; align-items:flex-start; gap:10px; padding:12px; margin:24px 0; border-radius:12px; color:#4b513d; background:#f4edd1; font-size:.86rem; } .notice span { display:grid; place-items:center; flex:0 0 19px; height:19px; border:1px solid; border-radius:50%; font-size:.75rem; font-weight:bold; } .section-heading { margin-bottom:13px; } .section-heading.compact { align-items:center; margin-bottom:9px; } .status { padding:6px 10px; border-radius:99px; font-size:.78rem; font-weight:750; } .status-neutral { color:#586159; background:#e5e7e2; } .status-ok { color:#18604b; background:#d7eee1; } .status-follow { color:#805419; background:#fbeab9; } .hero-card { display:flex; gap:16px; justify-content:space-between; padding:22px; color:white; background:var(--green); border-radius:20px; box-shadow:0 8px 20px #163b301a; } .hero-card p:not(.eyebrow) { margin-top:8px; color:#d8e8de; max-width:390px; } .hero-card .eyebrow { color:#c8e2d1; } .progress-ring { display:grid; place-items:center; width:72px; height:72px; flex:0 0 72px; align-self:center; border-radius:50%; background:conic-gradient(#f4c754 0deg, #ffffff3d 0deg); } .progress-ring::before { content:""; grid-area:1/1; width:60px; height:60px; border-radius:50%; background:var(--green); } .progress-ring strong { grid-area:1/1; z-index:1; font-size:.95rem; } .quick-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:18px 0 26px; } .quick-action { display:flex; align-items:center; gap:9px; min-height:63px; padding:11px; text-align:left; color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:13px; font-weight:700; box-shadow:0 2px 5px #1d332a0a; } .quick-action span { display:grid; place-items:center; width:30px; height:30px; border-radius:9px; background:#e3eee7; color:var(--green); font-size:1.15rem; } .card-section { margin-top:25px; } .text-button { padding:0; border:0; background:none; color:var(--green); font-weight:700; } .task-list,.record-list { padding:0; margin:0; list-style:none; } .task-list li,.record-item { display:flex; align-items:center; gap:12px; padding:14px 0; border-bottom:1px solid var(--line); } .task-dot { width:12px; height:12px; flex:0 0 12px; border:2px solid #a4aaa5; border-radius:50%; } .task-dot.done { border-color:#3d966f; background:#3d966f; } .task-list small,.record-item small { display:block; color:var(--muted); margin-top:2px; } .metrics { display:grid; grid-template-columns:1fr; background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden; } .metrics article { display:flex; align-items:center; gap:11px; padding:13px; border-bottom:1px solid var(--line); } .metrics article:last-child { border:0; } .metrics strong,.metrics span:not(.metric-icon) { display:block; } .metrics strong { font-size:1.08rem; } .metrics span:not(.metric-icon) { color:var(--muted); font-size:.85rem; } .metric-icon { display:grid; place-items:center; width:35px; height:35px; border-radius:10px; font-weight:bold; } .cool { background:#deedf1; color:var(--blue); } .warning { background:#fae3d8; color:var(--orange); } .clean { background:#e0efe5; color:#28734f; } .bottom-nav { position:fixed; bottom:0; left:0; right:0; display:flex; justify-content:center; padding:8px max(18px, calc((100vw - 720px)/2)); border-top:1px solid var(--line); background:#fffdfbf2; backdrop-filter:blur(12px); } .nav-item { flex:1; max-width:240px; padding:7px 4px; border:0; background:none; color:var(--muted); font-size:.72rem; } .nav-item span { display:block; margin-bottom:1px; font-size:1.25rem; } .nav-item.active { color:var(--green); font-weight:800; } .hidden { display:none; } .record-item { justify-content:space-between; } .record-item > div:first-child { display:flex; gap:10px; align-items:center; } .record-type { display:grid; place-items:center; width:34px; height:34px; border-radius:9px; color:var(--green); background:#e3eee7; } .record-item time { color:var(--muted); font-size:.8rem; } .settings-list { border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--card); } .settings-list button { width:100%; display:flex; justify-content:space-between; padding:17px 15px; border:0; border-bottom:1px solid var(--line); background:transparent; color:var(--ink); text-align:left; font-weight:650; } .settings-list button:last-child { border:0; } .settings-list span { color:var(--muted); font-size:1.4rem; } .clarify { margin-top:18px; padding:13px; color:#765119; background:#fff1c9; border-radius:11px; font-size:.86rem; } dialog { width:min(100% - 24px, 560px); padding:0; border:0; border-radius:20px; color:var(--ink); box-shadow:0 20px 60px #132d24aa; } dialog::backdrop { background:#0d251b88; } dialog form { padding:22px; } .close-button { display:grid; place-items:center; width:36px; height:36px; padding:0; border:0; border-radius:50%; color:var(--ink); background:#edf0eb; font-size:1.65rem; line-height:1; } .field { margin:16px 0; } .field label { display:block; margin-bottom:6px; color:#38473f; font-weight:700; font-size:.9rem; } .field input,.field select,.field textarea { width:100%; padding:13px; border:1px solid #c8cec7; border-radius:10px; color:var(--ink); background:white; font:inherit; } .field textarea { min-height:80px; resize:vertical; } .check-row { display:flex; gap:10px; align-items:center; padding:13px; margin:8px 0; border:1px solid var(--line); border-radius:10px; } .check-row input { width:21px; height:21px; accent-color:var(--green); } .form-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:24px; } .primary-button,.secondary-button { min-height:45px; padding:0 15px; border-radius:10px; font-weight:750; } .primary-button { border:0; color:white; background:var(--green); } .secondary-button { border:1px solid #c8cec7; color:var(--ink); background:white; } .toast { position:fixed; z-index:2; left:50%; bottom:92px; transform:translate(-50%, 20px); padding:10px 14px; border-radius:10px; opacity:0; color:white; background:#17342e; transition:.2s ease; pointer-events:none; } .toast.show { opacity:1; transform:translate(-50%, 0); } @media (min-width:560px) { .quick-grid { grid-template-columns:repeat(4,1fr); } .quick-action { flex-direction:column; justify-content:center; text-align:center; } .metrics { grid-template-columns:repeat(3,1fr); } .metrics article { border:0; border-right:1px solid var(--line); } .metrics article:last-child { border:0; } }