/* Hele appens stil (tross navnet, ikke bare kjøkkensidene). Lastes via stylesheet_link_tag :app
 * i layouts/application. Ingen eksterne fonter: Inter/Plus Jakarta Sans brukes bare hvis de finnes
 * lokalt, ellers systemfont. Utskriftsvisningen har egen CSS i layouts/print.html.erb. */

/* Fargevariabler: accent = grønn (normalkost/OK), special = gul (spesialkost), warn = rød (varsel/allergi). */
:root { --accent: #2f6f4e; --accent-dark: #204d37; --accent-soft: #e8f2ec; --warn: #b5502e; --warn-dark: #96401f; --warn-soft: #f8e9e2;
  --special: #c9922e; --special-dark: #8a6a1d; --special-soft: #f9f1de;
  --ink: #16231b; --muted: #5f6b63; --line: #e7ebe8; --bg: #f4f6f4; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: #1c2420; font-family: "Inter", system-ui, sans-serif; font-size: 14px; }
h1, h2, h3 { font-family: "Plus Jakarta Sans", system-ui, sans-serif; color: var(--ink); margin: 0; }
h1 { font-size: 28px; font-weight: 800; }
h2 { font-size: 15px; font-weight: 700; margin-bottom: 10px; }
h3 { font-size: 14px; font-weight: 700; }
a { color: var(--accent); text-decoration: none; font-weight: 600; }
a:hover { color: var(--accent-dark); text-decoration: underline; }

/* Layout */
body.with-sidebar { display: flex; min-height: 100vh; }
.sidebar { width: 240px; flex-shrink: 0; background: #fff; border-right: 1px solid var(--line); padding: 26px 16px; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.brand { display: flex; align-items: center; gap: 10px; padding: 0 8px 22px; font: 800 18px "Plus Jakarta Sans", sans-serif; color: #16231b; }
.nav-section { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #9aa79e; padding: 16px 12px 4px; }
.sidebar nav { display: flex; flex-direction: column; gap: 1px; }
.nav-link { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 9px; color: #5b6b60; font-weight: 500; font-size: 14px; background: none; border: 0; width: 100%; text-align: left; cursor: pointer; font-family: inherit; }
.nav-link:hover { background: #f4f6f4; color: var(--ink); text-decoration: none; }
.nav-link.active { background: var(--accent-soft); color: var(--accent-dark); font-weight: 600; }
.sidebar form { margin: 0; }
.sidebar-foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); }
.who { display: flex; align-items: center; gap: 9px; padding: 0 4px 8px; }
.who span:last-child { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.who strong { font-size: 12.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; }
.who small { font-size: 11.5px; color: var(--muted); }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: #d7c7a8; color: #6b5636; font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
main { flex-grow: 1; min-width: 0; padding: 26px 28px 40px; display: flex; flex-direction: column; gap: 18px; }
body.guest main { max-width: 26rem; margin: 10vh auto 0; }
.flash { padding: 10px 14px; border-radius: 10px; font-weight: 500; }
.flash-alert { background: var(--warn-soft); color: var(--warn); }
.flash-notice { background: var(--accent-soft); color: var(--accent-dark); }
.meta, .notice { color: var(--muted); font-size: 13px; margin: 2px 0 0; }
.reason { font-size: 12px; color: var(--muted); }
.reason.status-worse { color: var(--warn-dark); font-weight: 600; }

/* Cards */
.stats { display: flex; flex-wrap: wrap; gap: 14px; }
.stats div { flex: 1 1 160px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; font-size: 12px; font-weight: 600; color: var(--muted); }
.stats strong { display: block; margin-top: 6px; font: 800 26px "Plus Jakarta Sans", sans-serif; color: var(--ink); }
section { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px 20px; }
section > h2:first-child { font-size: 15px; }
.stats { margin: 0; }
.avvik { background: var(--warn-soft); border-color: #eccfc3; }
.avvik h2 { color: var(--warn); }
.avvik ul { margin: 0; padding-left: 1.1rem; }

/* Tabeller */
table { width: 100%; border-collapse: collapse; }
th { font-size: 11px; font-weight: 700; color: #9aa79e; text-transform: uppercase; padding: 6px 8px; border-bottom: 1px solid #eef1ef; text-align: left; }
td { padding: 9px 8px; border-bottom: 1px solid #f3f5f3; text-align: left; vertical-align: top; }
tr:last-child td { border-bottom: 0; }
.num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
td form, td .button_to { margin: 0; }

/* Chips */
.badge { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 20px; white-space: nowrap; }
.badge-konflikt { background: var(--warn-soft); color: var(--warn); }
.badge-ukjent { background: #eceeed; color: #5b6b60; }
.badge-manuelt { background: #f6efdc; color: #8a6a1d; }
.badge-manuell { background: #f6efdc; color: #8a6a1d; }
.badge-ok, .badge-ingen_konflikt { background: var(--accent-soft); color: var(--accent-dark); }
.badge-normal { background: var(--accent-soft); color: var(--accent-dark); }
.badge-spesial { background: var(--special-soft); color: var(--special-dark); }
.badge-allergi { background: var(--warn-soft); color: var(--warn-dark); }

/* Skjema og knapper */
.picker { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 7px 10px; align-self: flex-start; }
input, select, textarea { font: inherit; padding: 8px 10px; border: 1px solid #d6ddd8; border-radius: 9px; background: #fff; color: var(--ink); max-width: 100%; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
input[type=submit], button { font: 700 14px "Inter", sans-serif; background: var(--accent); color: #fff; border: 0; border-radius: 10px; padding: 9px 16px; cursor: pointer; }
input[type=submit]:hover, button:hover { background: var(--accent-dark); }
.sidebar button.nav-link, table button, td input[type=submit] { background: none; color: inherit; }
td button, td input[type=submit] { background: none; color: var(--warn); padding: 4px 8px; font-weight: 600; }
td button:hover, td input[type=submit]:hover { background: var(--warn-soft); }
.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; max-width: 30rem; }
.field label { font-size: 12.5px; font-weight: 600; color: #4a5750; }
.error { background: var(--warn-soft); color: var(--warn); padding: 8px 12px; border-radius: 9px; }
form[action$="/new"] + p, .actions { margin: 0; }
.checks { display: flex; flex-wrap: wrap; gap: 8px; }
.checks form { margin: 0; }
.check { min-height: 56px; font-size: 17px; padding: 10px 22px; background: #fff; color: var(--accent-dark); border: 1.5px solid var(--accent); border-radius: 10px; }
.check:hover { background: var(--accent-soft); }
.check.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.check.off { background: var(--warn-soft); color: var(--warn-dark); border-color: var(--warn-dark); }
.check-compact { min-height: 34px; font-size: 13px; padding: 5px 10px; }
.table-compact td, .table-compact th { padding: 6px 8px; }

/* Innlogging */
body.guest form { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 22px; display: flex; flex-direction: column; gap: 12px; }
body.guest input:not([type=submit]) { width: 100%; }

@media (max-width: 800px) {
  body.with-sidebar { flex-direction: column; }
  .sidebar { width: 100%; height: auto; position: static; flex-direction: row; flex-wrap: wrap; padding: 12px; gap: 4px; }
  .sidebar nav { flex-direction: row; flex-wrap: wrap; }
  .nav-section, .sidebar-foot .who { display: none; }
  .sidebar-foot { margin: 0; padding: 0; border: 0; }
  .nav-link { width: auto; }
  main { padding: 16px; }
}
@media print { .sidebar, .picker, .checks { display: none; } main { padding: 0; } }
/* Knapper, valgknapper (chips) og skjema på én linje */
.btn { background: var(--accent); color: #fff; border-radius: 10px; padding: 9px 16px; font-weight: 700; }
.btn:hover { background: var(--accent-dark); color: #fff; text-decoration: none; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.chip { padding: 6px 14px; border-radius: 20px; border: 1px solid var(--line); background: #fff; color: #4a5750; font-weight: 600; }
.chip:hover { background: var(--accent-soft); text-decoration: none; }
.chip.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.inline-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.inline-form label { font-weight: 600; color: #4a5750; }
/* Navigering mellom dager/perioder (Dagsoversikt, Kostnader) */
.weeknav { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.weeknav > a:first-child, .weeknav > a:nth-child(3) { padding: 6px 12px; background: #fff; border: 1px solid var(--line); border-radius: 10px; }
.weeknav .picker { padding: 3px 6px; }
.weeknav .picker input { border: 0; padding: 4px; }
table tfoot td.total { font-weight: 800; }
/* Produksjon: sammenstillingen av normalkost og spesialkost */
.overview { display: flex; flex-wrap: wrap; gap: 14px; background: none; border: 0; padding: 0; }
.overview > div { flex: 1 1 280px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px 20px; }
.overview span { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.overview strong { display: block; font: 800 40px "Plus Jakarta Sans", sans-serif; color: var(--ink); }
.ov-normal { border-left: 4px solid var(--accent); }
.ov-special { border-left: 4px solid var(--special); }
.overview ul { list-style: none; margin: 8px 0 0; padding: 0; }
.overview li { display: flex; justify-content: space-between; padding: 3px 0; color: #4a5750; }
.overview ul.calc { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 8px; font-size: 13px; }
/* «Dette trengs»-rad med råvarebehov i avdelingstabellene */
.calc-row td { background: #f7faf8; padding: 8px; }
.calc-label { font-size: 12px; font-weight: 700; color: var(--muted); margin-right: 6px; }
.chip-need { display: inline-block; background: var(--accent-soft); color: var(--accent-dark); border-radius: 20px; padding: 3px 10px; font-size: 12.5px; font-weight: 600; margin: 2px 2px 2px 0; }
/* Kjøkkensidenes topp: tittel, måltidsfaner, tom-tilstand og fremdriftslinje */
.kitchen-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.kitchen-top h1 { font-size: 34px; }
.btn-big { padding: 14px 22px; font-size: 16px; }
.meal-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.meal-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 64px; background: #fff; border: 2px solid var(--line); border-radius: 14px; font: 700 18px "Plus Jakarta Sans", sans-serif; color: #4a5750; }
.meal-tab:hover { border-color: var(--accent); text-decoration: none; }
.meal-tab.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.meal-tab.empty { opacity: .5; }
.meal-tab small { font: 700 11px "Inter", sans-serif; text-transform: uppercase; letter-spacing: .06em; background: var(--special); color: #fff; border-radius: 20px; padding: 1px 8px; margin-top: 3px; }
.empty-state { text-align: center; padding: 40px 20px; }
.empty-state p { color: var(--muted); }
.progress { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 18px; }
.progress-text { font-size: 16px; margin-bottom: 8px; }
.progress-bar { height: 14px; background: #eef1ef; border-radius: 8px; overflow: hidden; }
.progress-bar span { display: block; height: 100%; background: var(--accent); transition: width .3s; }
@media (max-width: 600px) { .meal-tabs { grid-template-columns: repeat(2, 1fr); } }
/* Sammenleggbare «Dette skal lages»-rader (rett, avdeling) med ▸-pil og store tall */
.cook-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.cook-total { font-size: 12px; font-weight: 600; color: var(--muted); }
.cook-total strong { font: 800 20px "Plus Jakarta Sans", sans-serif; color: var(--ink); margin-left: 4px; }
.cook-item { border: 1px solid var(--line); border-radius: 12px; margin-top: 8px; }
.cook-item summary, .cook-unknown { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 16px; cursor: pointer; list-style: none; min-height: 56px; }
.cook-item summary::-webkit-details-marker { display: none; }
.cook-item summary::before { content: "▸"; color: var(--accent); font-size: 18px; transition: transform .15s; }
.cook-item[open] summary::before { transform: rotate(90deg); }
.cook-item[open] summary { background: var(--accent-soft); border-radius: 12px 12px 0 0; }
.cook-name { flex: 1; font: 700 17px "Plus Jakarta Sans", sans-serif; color: var(--ink); }
.cook-name small, .cook-n small { font: 500 12px "Inter", sans-serif; color: var(--muted); }
.cook-n { font: 800 22px "Plus Jakarta Sans", sans-serif; color: var(--ink); white-space: nowrap; }
.cook-item table { margin: 4px 0 8px; }
.cook-item td, .cook-item th { padding-left: 16px; padding-right: 16px; }
.big-amount { font-size: 17px; }
.big-amount small { font-weight: 500; color: var(--muted); font-size: 12px; }
.cook-unknown { cursor: default; background: var(--warn-soft); border-color: #eccfc3; }
/* Avkrysningsruter i skjemaer (allergener) og råvarelinjer i oppskriftsskjemaet */
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px 12px; }
.check-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: #fff; cursor: pointer; font-size: 14px; font-weight: 500; color: var(--ink); min-height: 44px; }
.check-item:hover { border-color: var(--accent); }
.check-item:has(input:checked) { background: var(--accent-soft); border-color: var(--accent); }
.check-item input { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); flex-shrink: 0; }
.field:has(.check-grid) { max-width: 48rem; }
.field-row { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px; max-width: 40rem; }
.field-row select { flex: 1 1 14rem; }
.field-row input[type=number] { width: 7rem; }
form > .field, form > h2 { max-width: 48rem; }

/* Meny */
.nav-label { flex: 1; }
.nav-badge { background: var(--warn); color: #fff; font-size: 11px; font-weight: 700; border-radius: 20px; padding: 1px 8px; min-width: 22px; text-align: center; }
.btn-warn { background: #fff; color: var(--warn); border: 1.5px solid var(--warn); }
.btn-warn:hover { background: var(--warn-soft); color: var(--warn); }
code.token { display: block; margin-top: 10px; padding: 14px; background: #f4f6f4; border-radius: 10px; font-size: 15px; word-break: break-all; user-select: all; }

/* Kjøkkenside */
.kitchen, .page-stack { display: flex; flex-direction: column; gap: 18px; }
.daynav { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 14px; }
.daynav > a:not(.chip) { padding: 8px 12px; background: #fff; border: 1px solid var(--line); border-radius: 10px; }
.daynav .picker { padding: 2px 6px; }
.daynav .picker input { border: 0; padding: 6px; }
.cook-unknown { gap: 12px; }
.cook-unknown .chip { background: #fff; }
.who-did { margin: 8px 0 0; font-size: 12.5px; color: var(--muted); }
.avvik p { margin: 0 0 6px; }

@media (max-width: 800px) {
  .sidebar { flex-wrap: nowrap; overflow-x: auto; position: sticky; top: 0; z-index: 10; }
  .sidebar nav { flex-wrap: nowrap; }
  .brand { display: none; }
  .nav-link { white-space: nowrap; }
}

/* Admin */
.page-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.search { width: 100%; max-width: 26rem; margin-bottom: 10px; padding: 10px 14px; font-size: 15px; }
table.list td.name-cell a { font-size: 15px; }
table.list td.name-cell .badge { margin-left: 8px; }
.row-actions { text-align: right; width: 1%; white-space: nowrap; }
button.link-danger { background: none; color: var(--muted); font-weight: 500; font-size: 13px; padding: 4px 8px; }
button.link-danger:hover { background: var(--warn-soft); color: var(--warn); }
.hint { color: var(--muted); font-size: 12.5px; }
.form-actions { display: flex; align-items: center; gap: 16px; margin-top: 8px; }
.cancel { color: var(--muted); font-weight: 500; }
.ok { color: var(--accent-dark); font-weight: 600; }
.warn-text { color: var(--warn); font-weight: 600; }
.count { display: inline-block; background: var(--warn); color: #fff; font-size: 12px; border-radius: 20px; padding: 1px 9px; margin-left: 6px; vertical-align: middle; }
table.review td { vertical-align: middle; padding: 12px 8px; }
table.review .inline-form select, table.review .inline-form input[type=text] { min-width: 12rem; }
table.review td input[type=submit] { background: var(--accent); color: #fff; padding: 8px 16px; }
table.review td input[type=submit]:hover { background: var(--accent-dark); }
.chip-warn { color: var(--warn); border-color: #eccfc3; }

/* Oppskriftsside */
.recipe-hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 18px; }
.recipe-photo { background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; min-height: 240px; display: flex; }
.recipe-photo img { width: 100%; height: 100%; max-height: 420px; object-fit: cover; display: block; }
.photo-placeholder { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: #f4f6f4; color: var(--muted); }
.photo-placeholder span { font-size: 48px; }
.photo-placeholder p { margin: 0; }
.recipe-facts { display: flex; flex-direction: column; gap: 12px; }
.fact { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 18px; display: flex; flex-direction: column; gap: 4px; }
.fact > span { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.fact strong { font: 800 28px "Plus Jakarta Sans", sans-serif; color: var(--ink); }
.fact strong.small { font-size: 16px; }
.fact small { color: #4a5750; font-size: 13px; }
.fact-main { background: var(--accent); border-color: var(--accent); }
.fact-main > span, .fact-main strong { color: #fff; }
.allergen-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.allergen { background: var(--warn-soft); color: var(--warn); font-weight: 700; font-size: 13px; border-radius: 20px; padding: 3px 12px; }
.section-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.section-head h2 { margin: 0; }
table.amounts td { font-size: 15px; padding: 11px 8px; }
ol.steps { margin: 0; padding: 0; list-style: none; counter-reset: step; display: flex; flex-direction: column; gap: 10px; }
ol.steps li { counter-increment: step; display: flex; gap: 14px; align-items: flex-start; font-size: 16px; line-height: 1.5; }
ol.steps li::before { content: counter(step); flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: #fff; font: 800 15px "Plus Jakarta Sans", sans-serif; display: flex; align-items: center; justify-content: center; }
details.more { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 20px; }
details.more summary { cursor: pointer; font-weight: 700; color: #4a5750; }
.cook-open { padding: 10px 16px 0; }
.form-thumb { max-width: 240px; max-height: 160px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }
@media (max-width: 800px) { .recipe-hero { grid-template-columns: 1fr; } }

/* Lokasjonsfelt øverst på alle sider (layouts/application): hvilken lokasjon tallene gjelder, med bytte for leder */
.location-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: var(--accent-soft); color: var(--accent-dark); border-radius: 10px; padding: 8px 14px; font-size: 13px; font-weight: 600; }
.location-bar strong { font: 800 15px "Plus Jakarta Sans", system-ui, sans-serif; margin-left: 4px; }
.location-bar form { margin: 0; }
.location-bar select { padding: 4px 8px; font-size: 13px; }

/* Det som trenger deg (admin/tasks): ett kort per oppgave med tittel, knapp og eksempler */
.task-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.task-head h2 { margin: 0; }
.task-examples { margin: 4px 0 0; color: var(--ink); font-weight: 600; }

/* Visningsfaner øverst på kjøkkensidene (kitchen/_topbar): Oversikt, Normalkost, Spesialkost, Fremdrift */
.view-tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--line); flex-wrap: wrap; }
.view-tab { padding: 10px 18px; font: 700 15px "Plus Jakarta Sans", system-ui, sans-serif; color: var(--muted); border-bottom: 3px solid transparent; margin-bottom: -2px; }
.view-tab:hover { color: var(--ink); text-decoration: none; }
.view-tab.on { color: var(--accent-dark); border-bottom-color: var(--accent); }

/* Ukesplan (admin/meal_plans, ukesplan_controller.js): uke- og månedsvisning med søkevindu */
.up-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 14px 0; }
.up-segs { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; }
.up-seg { min-height: 44px; padding: 0 20px; border: 0; background: #fff; font: 600 14px inherit; font-family: inherit; color: var(--ink); cursor: pointer; }
.up-seg.on { background: var(--accent); color: #fff; }
.up-status { margin-left: auto; padding: 10px 14px; border-radius: 10px; font-weight: 600; display: inline-flex; align-items: center; gap: 10px; }
.up-status.ok { background: var(--accent-soft); color: var(--accent-dark); }
.up-status.warn { background: var(--warn-soft); color: var(--warn-dark); }
.up-savenow { min-height: 32px; padding: 0 12px; border: 0; border-radius: 8px; background: var(--accent); color: #fff; font: 700 13px inherit; font-family: inherit; cursor: pointer; }
.up-linkbtn { border: 0; background: none; color: inherit; text-decoration: underline; font: inherit; cursor: pointer; }
.up-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 8px 0 14px; }
.up-nav strong { font: 800 16px "Plus Jakarta Sans", sans-serif; color: var(--ink); }
.up-arrow, .up-today, .up-month { min-height: 44px; min-width: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font: 600 14px inherit; font-family: inherit; color: var(--ink); cursor: pointer; }
.up-month.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.up-months { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.up-week { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 1100px) { .up-week { grid-template-columns: repeat(2, 1fr); } }
.up-card { display: flex; flex-direction: column; gap: 8px; min-height: 196px; padding: 14px; text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 14px; font-family: inherit; font-size: 14px; color: var(--ink); cursor: pointer; }
.up-card:hover:not(:disabled) { border-color: var(--accent); }
.up-card.weekend { background: #f0f3f1; }
.up-card.today { border: 2px solid var(--accent); }
.up-card.past { opacity: .55; cursor: default; }
.up-card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.up-dish { font-weight: 600; font-size: 15px; }
.up-dish.empty { border: 1.5px dashed #c5cec8; border-radius: 10px; padding: 10px; color: var(--muted); font-weight: 500; }
.up-dish.empty small { display: block; font-weight: 700; color: var(--ink); }
.up-allergens { display: flex; flex-wrap: wrap; gap: 4px; }
.up-pill { display: inline-block; padding: 2px 9px; border-radius: 99px; background: #eceff0; color: var(--muted); font-size: 12px; font-weight: 600; }
.up-pill.on { background: var(--accent); color: #fff; }
.up-dim { color: var(--muted); font-size: 12px; }
.up-warn { padding: 6px 10px; border-radius: 8px; background: var(--warn-soft); color: var(--warn-dark); font-weight: 600; font-size: 13px; }
.up-repeat { align-self: flex-start; padding: 3px 10px; border-radius: 99px; background: var(--special-soft); color: var(--special-dark); font-size: 12px; font-weight: 700; }
.up-card-foot { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; display: flex; justify-content: space-between; gap: 8px; }
.up-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.up-dot.special { background: var(--special); }
.up-dot.warn { background: var(--warn); }
.up-card-wide { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px; overflow-x: auto; }
.up-month-grid { display: grid; grid-template-columns: 44px repeat(7, 1fr); gap: 6px; min-width: 640px; }
.up-colhead { text-align: center; font-size: 12px; font-weight: 700; color: var(--muted); }
.up-weeknr { border: 0; background: none; color: var(--accent); font: 700 12px inherit; font-family: inherit; text-decoration: underline; cursor: pointer; }
.up-cell { min-height: 104px; padding: 8px; display: flex; flex-direction: column; justify-content: space-between; gap: 4px; text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 10px; font-family: inherit; color: var(--ink); cursor: pointer; }
@media (max-width: 1100px) { .up-cell { min-height: 84px; } }
.up-cell.weekend { background: #f0f3f1; }
.up-cell.selweek { background: var(--accent-soft); }
.up-cell.outside { opacity: .4; }
.up-cell.past { opacity: .55; }
.up-cell.today { border: 2px solid var(--accent); }
.up-cell.selected { border: 2px solid var(--accent-dark); background: var(--accent-soft); }
.up-cell-top { display: flex; justify-content: space-between; align-items: center; font-weight: 800; }
.up-cell-dish { font-weight: 600; font-size: 13px; }
.up-cell-dish.std { font-style: italic; font-weight: 400; color: var(--muted); }
.up-legend { color: var(--muted); font-size: 12px; margin: 10px 2px; }
.up-overlay { position: fixed; inset: 0; background: rgba(22, 35, 27, .45); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 50; }
.up-modal { width: 520px; max-width: 100%; background: #fff; border-radius: 14px; padding: 18px; display: flex; flex-direction: column; gap: 12px; max-height: 90vh; }
.up-modal-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.up-modal-head h2 { margin: 0; font-size: 18px; }
.up-close { min-width: 44px; min-height: 44px; border: 0; background: none; font-size: 18px; cursor: pointer; }
.up-search { min-height: 48px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; font: 500 15px inherit; font-family: inherit; width: 100%; }
.up-list { overflow-y: auto; max-height: 560px; display: flex; flex-direction: column; gap: 8px; }
.up-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 52px; padding: 8px 12px; text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 10px; font-family: inherit; color: var(--ink); cursor: pointer; }
.up-row small { display: block; color: var(--muted); font-size: 12px; }
.up-row.std { border-style: dashed; }
.up-row.on { border-color: var(--accent); background: var(--accent-soft); }

/* Banner for timesoppdateringer (kitchen/_changes_banner) og merket «Endret kl. …» på en avdeling. */
.cook-item.conflict { border: 2px solid var(--warn); }
.conflicts { background: var(--warn-soft); border: 1px solid var(--warn); border-radius: 12px; padding: 12px 16px; margin-top: 12px; }
.conflicts h2 { color: var(--warn); margin: 0 0 6px; }
.conflicts ul { margin: 0; padding-left: 18px; }
tr.sub.conflict td { background: var(--warn-soft); }
.ov-special li.conflict { color: var(--warn); font-weight: 600; }
.changes-banner { background: var(--warn-soft); border: 1px solid #eccfc3; border-radius: 12px; padding: 14px 16px; }
.changes-banner h2 { color: var(--warn); margin: 0 0 8px; }
.change-item { padding: 8px 0; border-top: 1px solid #eccfc3; }
.change-item p { margin: 0 0 4px; }
.change-item ul { margin: 0; padding-left: 1.1rem; }
.change-item.severe { border-left: 5px solid var(--warn); padding-left: 10px; color: var(--warn-dark); font-weight: 600; }
.change-item.neutral { color: var(--muted); }
.changed-mark { font-size: 12.5px; font-weight: 600; color: var(--warn); }

/* Hensyn og dietter: kort med filter og sidepanel */
.chips .search { margin: 0 0 0 auto; width: 11rem; }
.hensyn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.hcard { --c: var(--muted); display: flex; flex-direction: column; gap: 10px; padding: 16px; background: #fff; border: 1px solid var(--line); border-top: 6px solid var(--c); border-radius: 12px; color: var(--ink); }
.hcard:hover { box-shadow: 0 2px 10px rgba(22, 35, 27, .14); text-decoration: none; }
.hcard[hidden] { display: none; }
.hkind-allergen { --c: var(--warn); }
.hkind-naering { --c: var(--accent); }
.hkind-konsistens { --c: #3b6ea5; }
.hcard-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.hcard-top b { font-size: 17px; }
.hcard-top small { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.hcard-applies { display: flex; gap: 8px; align-items: center; font-size: 13px; }
.hcard-applies span { padding: 3px 10px; border-radius: 6px; background: var(--accent-soft); color: var(--accent-dark); }
.hcard-applies span.off { background: #eceeed; color: #7a857d; }
.hcard-applies em { font-style: normal; color: var(--muted); }
.hcard-excl { font-size: 14px; min-height: 20px; color: #3e4a42; }
.hcard-alert { font-size: 13px; font-weight: 600; border-radius: 6px; padding: 6px 10px; margin: 0; }
.hcard-alert.warn { background: var(--warn-soft); color: var(--warn-dark); }
.hcard-alert.review { background: var(--special-soft); color: var(--special-dark); }
.hcard-alert[hidden], [data-hensyn-panel-target=allergens][hidden] { display: none; }
turbo-frame#panel:empty { display: none; }
.panel-overlay { position: fixed; inset: 0; background: rgba(22, 35, 27, .4); z-index: 40; }
.panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(480px, 100%); background: #fff; padding: 24px; overflow: auto; z-index: 41; display: flex; flex-direction: column; gap: 6px; }
.panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.panel-head h2 { margin: 0; }
.panel .field, .panel form > .field { max-width: none; }
.panel-delete { align-self: flex-start; margin-top: 4px; }
.field-label { font-size: 12.5px; font-weight: 600; color: #4a5750; }
.segmented { display: flex; border: 1px solid #c6cdc8; border-radius: 10px; overflow: hidden; }
.seg { flex: 1; margin: 0; cursor: pointer; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: block; padding: 9px 4px; text-align: center; font-size: 14px; font-weight: 600; color: var(--ink); background: #fff; }
.seg input:checked + span { background: var(--accent); color: #fff; }
.seg-allergen input:checked + span { background: var(--warn); }
.seg input:focus-visible + span { outline: 2px solid var(--accent-dark); outline-offset: -2px; }

/* Kostnader: sammenligningsgraf, topp 5-lister og sorterbare tabeller */
.stats small { display: block; margin-top: 4px; font-weight: 500; font-size: 12px; color: var(--muted); }
.stats small.delta-up { color: var(--warn); }
.stats small.delta-down { color: var(--accent-dark); }
.cost-chart { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px 20px; margin: 14px 0; }
.cost-chart .section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; }
.cost-chart .section-head h2 { margin: 0; }
.cost-chart .chips { margin-bottom: 8px; }
.cost-chart .chip { font-size: 13px; cursor: pointer; }
.cost-chart-svg { width: 100%; height: auto; display: block; }
.cost-chart-table { margin-top: 8px; font-size: 14px; }
.dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 8px; vertical-align: -1px; }
.cost-chart .chip.on .dot { box-shadow: 0 0 0 2px #fff; }
.top-lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin: 14px 0; }
.top-lists section { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 18px; }
.top-lists h2 { margin: 0 0 8px; font-size: 16px; }
.top-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 6px 0; }
.top-row > small { grid-column: 2; text-align: right; color: var(--muted); font-size: 12px; }
.top-row > .bar { grid-column: 1; grid-row: 2; align-self: center; }
.bar { display: block; height: 6px; background: #eef1ee; border-radius: 3px; }
.bar u { display: block; height: 6px; background: var(--accent); border-radius: 3px; text-decoration: none; }
td.share { width: 110px; }
th[data-sort-table-target=head] { cursor: pointer; }
th[data-sort-table-target=head]:hover { color: var(--accent-dark); }
th[data-dir=asc]::after { content: " ▲"; font-size: 10px; }
th[data-dir=desc]::after { content: " ▼"; font-size: 10px; }

/* Python-portering: tokens som maler fra før portering bruker */
:root { --ok: var(--accent-dark); --fg: var(--ink); }
.nav-link form, .sidebar form { display: block; }
.sidebar form button.nav-link { background: none; color: #5b6b60; font-weight: 500; }
.sidebar form button.nav-link:hover { background: #f4f6f4; color: var(--ink); }

/* Normalkost/Spesialkost: rett uten oppskrift (ikke brettbar, nøytral) */
.cook-item > .cook-unknown { background: #fff; border: 0; cursor: default; }

/* Produksjon/Fremdrift/Dag: statuskoder fra Python-visningene og kostformer i råvaretabellen */
.badge-manuell { background: #f6efdc; color: #8a6a1d; }
.badge-ok { background: var(--accent-soft); color: var(--accent-dark); }
.kostformer .badge { margin-left: 4px; }
span.check { display: inline-block; min-height: 0; }
.stats span[data-testid=naering-total] { display: block; margin-top: 6px; font-size: 14px; font-weight: 600; color: var(--ink); }

/* Spor et måltid (admin/traces) */
.trace-snapshot h3 { margin: 12px 0 4px; font-size: 15px; }
td.n { text-align: right; }
mark { background: #ffe08a; color: #000; font-weight: 700; padding: 0 3px; }
tr.conflict td { background: #fdecee; }
.fase-etter { color: var(--warn, #b00020); font-weight: 700; }

/* Admin-skall (Django-adminens sider, templates/admin/): bruker klassene over; bare det som mangler her. */
table.list tbody th { font-size: 15px; font-weight: 600; color: var(--ink); text-transform: none; padding: 9px 8px; border-bottom: 1px solid #f3f5f3; vertical-align: top; }
table.list thead th a { color: inherit; font-weight: 700; }
table.list th.field-name { white-space: nowrap; }
.admin-filters { display: flex; flex-direction: column; gap: 4px; background: none; border: 0; padding: 0; }
.admin-filters .field-label { align-self: center; min-width: 10rem; }
.admin-search .search { margin-bottom: 10px; }
.admin-pager { margin: 12px 0 0; align-items: center; }
.admin-pager .this-page { background: var(--accent); color: #fff; border-radius: 20px; padding: 6px 14px; font-weight: 600; }
.admin-pager a, .admin-pager .this-page { padding: 6px 14px; border-radius: 20px; }
.admin-pager > span.meta { margin-left: auto; }
.hidden { display: none; }
.field .readonly { padding: 8px 0; }
.field ul.errorlist, .errorlist { list-style: none; margin: 0; padding: 0; color: var(--warn); }
.check-grid > div { display: contents; }
.check-grid label { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: #fff; cursor: pointer; font-size: 14px; font-weight: 500; color: var(--ink); min-height: 44px; }
.check-grid label:hover { border-color: var(--accent); }
.check-grid label:has(input:checked) { background: var(--accent-soft); border-color: var(--accent); }
.check-grid input { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); flex-shrink: 0; }
.check-grid > div > div { display: contents; }
.form-actions .deletelink { margin-left: auto; color: var(--warn); font-weight: 500; font-size: 13px; }
a.btn { background: var(--accent); color: #fff; border-radius: 10px; padding: 9px 16px; font-weight: 700; }
a.btn:hover { background: var(--accent-dark); text-decoration: none; }
.actions { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.actions label { font-weight: 600; font-size: 13px; }
.field-label { font-size: 12.5px; font-weight: 600; color: #4a5750; }
form .field input[type=text], form .field input[type=number], form .field input[type=search], form .field select { max-width: 30rem; }

/* Kostnader og Spor et måltid (c3): radoverskrifter ser ut som vanlige celler, sorteringslenker arver overskriftsfargen */
table.cost-tabell thead th a { color: inherit; font-weight: inherit; }
table.cost-tabell tbody th { font-size: 14px; font-weight: 400; color: var(--ink); text-transform: none; padding: 9px 8px; border-bottom: 1px solid #f3f5f3; vertical-align: top; }

/* Mat (c1): Ukesplan, lenker i stedet for Rubys knapper, og søkevindu uten JS-fallback */
a.up-seg, a.up-arrow, a.up-today, a.up-month, a.up-weeknr, a.up-cell { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
a.up-cell { display: flex; align-items: stretch; justify-content: space-between; }
a.up-seg { color: var(--ink); }
a.up-seg.on, a.up-month.on { color: #fff; }
.up-week .up-card input.up-pick { font: inherit; }
.js .up-card input.up-pick, .js .nojs-only { display: none; }
.up-card.past input.up-pick { opacity: .6; }
.up-month-grid > .up-weeknr { align-self: center; }
.trace-form .field { max-width: none; margin-bottom: 0; }
.trace-form { display: flex; flex-direction: column; gap: 14px; margin: 14px 0; max-width: 48rem; }
.trace-form select, .trace-form input { width: 100%; max-width: none; box-sizing: border-box; }
.trace-form .btn { align-self: flex-start; }
.visually { position: absolute; left: -9999px; }
.up-card-foot { font-weight: 600; color: var(--ink); }
.up-card-foot, .up-card-foot span { font-size: 12px; }
a.btn.btn-big { padding: 14px 22px; font-size: 16px; }
.recipe-form .field:not(.field-row) input[type=text], .recipe-form .field:not(.field-row) select { max-width: none; }

/* Smal skjerm (g1): skjemaknapper bryter linje, brede tabeller ruller i stedet for å sprenge siden */
.form-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cost-tabell, .cost-chart-table { display: block; overflow-x: auto; max-width: 100%; }