:root {
  --bg: #f5f6f8;
  --panel: #ffffff;
  --border: #e1e4e9;
  --text: #1c2128;
  --muted: #6b7280;
  --primary: #2f6fed;
  --primary-text: #ffffff;
  --danger: #d33b3b;
  --ok: #1a8a4a;
  --ok-bg: #eaf7ef;
  --nara: #b8860b;
  --nara-bg: #fdf3d8;
  --under: #c22b2b;
  --under-bg: #fce6e6;
  --ordered: #c2570d;
  --ordered-bg: #fdece0;
  --skoogs: #0e7490;
  --skoogs-bg: #e0f4f7;
  --drag-accent: #1155cc;
}

* { box-sizing: border-box; }

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

/* Sidomeny för att växla mellan moduler (Lager / Produktplanering) */
:root { --sidenav-width: 220px; }

.sideNav {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--sidenav-width);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1rem 0.75rem;
  background: var(--panel);
  border-right: 1px solid var(--border);
  z-index: 20;
}

.sideNavItem {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  color: var(--text);
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.sideNavItem:hover { background: #f1f3f5; }
.sideNavItem.active {
  background: #e8f0fe;
  border-color: #c3d9fb;
  color: var(--primary);
}

.appContent { margin-left: var(--sidenav-width); }

.moduleHeader {
  padding: 1rem 1.5rem;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}
.moduleHeader h1 { font-size: 1.25rem; margin: 0; }
.moduleBody { padding: 1rem 1.5rem 2rem; }

.topbar {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1rem 1.5rem;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.topbar h1 { font-size: 1.25rem; margin: 0; margin-right: auto; }
.currentUser { font-size: 0.85rem; color: var(--muted); }

#articleSearch {
  border: 1px solid var(--border);
  background: var(--panel);
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
  font-size: 0.85rem;
  color: var(--text);
  width: 200px;
}

#categoryFilter {
  border: 1px solid var(--border);
  background: var(--panel);
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
  font-size: 0.85rem;
  color: var(--text);
  width: 180px;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

button.primary {
  background: var(--primary);
  color: var(--primary-text);
  border: none;
  padding: 0.55rem 1.1rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}
button.primary:hover { background: #2559c9; box-shadow: 0 3px 10px rgba(47, 111, 237, 0.35); }
button.primary:active { transform: translateY(1px); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08); }
button.danger { background: none; color: var(--danger); border: 1px solid var(--danger); border-radius: 6px; padding: 0.5rem 1rem; cursor: pointer; }
button:disabled { opacity: 0.5; cursor: not-allowed; }

.topbar button:not(.primary) {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 0.55rem 1.05rem;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}
.topbar button:not(.primary):hover {
  background: #f1f3f5;
  border-color: #c7ccd3;
  box-shadow: 0 2px 8px rgba(16, 24, 40, 0.1);
}
.topbar button:not(.primary):active { transform: translateY(1px); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05); }

#logoutBtn {
  color: var(--muted);
  background: none;
  border-color: transparent;
  box-shadow: none;
}
#logoutBtn:hover { color: var(--danger); background: #fdecec; border-color: #f5c6c6; box-shadow: none; }

.summary {
  display: flex;
  gap: 1rem;
  padding: 1rem 1.5rem 0;
}
.summary .card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  min-width: 140px;
  cursor: pointer;
  transition: border-color 0.1s, box-shadow 0.1s;
}
.summary .card:hover { border-color: var(--primary); }
.summary .card.active { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.summary .card .value { font-size: 1.4rem; font-weight: 700; }
.summary .card .label { font-size: 0.8rem; color: var(--muted); }

main { padding: 1rem 1.5rem 2rem; }

#articleTable { width: 100%; table-layout: fixed; border-collapse: collapse; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; }
#articleTable thead tr:first-child th:first-child { border-top-left-radius: 8px; }
#articleTable thead tr:first-child th:last-child { border-top-right-radius: 8px; }
#articleTable tbody tr:last-child td:first-child { border-bottom-left-radius: 8px; }
#articleTable tbody tr:last-child td:last-child { border-bottom-right-radius: 8px; }
#articleTable tbody { user-select: none; }
#articleTable thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #fff;
  padding: 0.6rem 0.75rem;
  background: var(--text);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

@media (max-width: 1300px) {
  #articleTable thead th {
    font-size: 0.58rem;
    letter-spacing: 0.01em;
    padding: 0.5rem 0.3rem;
  }
}
@media (max-width: 900px) {
  #articleTable thead th {
    font-size: 0.5rem;
    letter-spacing: 0;
    padding: 0.45rem 0.1rem;
  }
}
#articleTable tbody td { padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--border); font-size: 0.9rem; vertical-align: top; }
#articleTable tbody tr:last-child td { border-bottom: none; }
#articleTable tbody tr:hover { background: #e8f0fe; cursor: default; }
.empty { text-align: center; color: var(--muted); padding: 2rem !important; }

#articleTable tbody tr.selected { background: #d2e3fc; }
#articleTable tbody tr.selected:hover { background: #c3d9fb; }

.groupHeader td {
  background: #f1f3f5;
  font-weight: 800;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text);
  padding: 0.85rem 0.75rem;
  border-bottom: 2px solid var(--text);
}
.groupHeader:not(:first-child) td { border-top: 1px solid var(--border); }
.groupHeader .groupCount { font-weight: 400; text-transform: none; color: var(--muted); font-size: 0.9rem; }

.groupHeaderToOrder td {
  background: var(--under-bg);
  color: var(--under);
  border-bottom: 2px solid var(--under);
}
.groupHeaderToOrder .groupCount { color: var(--under); opacity: 0.75; }

.groupHeaderConfirmed td {
  background: var(--ok-bg);
  color: var(--ok);
  border-bottom: 2px solid var(--ok);
}
.groupHeaderConfirmed .groupCount { color: var(--ok); opacity: 0.75; }

.groupHeaderSkoogs td {
  background: var(--skoogs-bg);
  color: var(--skoogs);
  border-bottom: 2px solid var(--skoogs);
}
.groupHeaderSkoogs .groupCount { color: var(--skoogs); opacity: 0.75; }

.groupHeaderRow { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

/* Skiljer de pinnade sektionerna (alltid beställningar/utkörningar) från de riktiga
   kategorierna som följer — ett tydligt mellanrum istället för bara en tunn linje. */
#articleTable .pinnedSectionsDivider td { padding: 0; height: 20px; background: var(--panel); border: none; }

.sendToOrderBtn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  border: 1.5px solid var(--under);
  background: #fff;
  color: var(--under);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(194, 43, 43, 0.15);
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}
.sendToOrderBtn:hover { background: var(--under); color: #fff; box-shadow: 0 3px 10px rgba(194, 43, 43, 0.4); }
.sendToOrderBtn:active { transform: translateY(1px); }
.sendToOrderBtn:disabled, .sendToOrderBtn:disabled:hover { background: #fff; color: var(--under); box-shadow: none; transform: none; cursor: default; }

.receiveAllBtn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  border: 1.5px solid var(--ok);
  background: #fff;
  color: var(--ok);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(26, 138, 74, 0.15);
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}
.receiveAllBtn:hover { background: var(--ok); color: #fff; box-shadow: 0 3px 10px rgba(26, 138, 74, 0.4); }
.receiveAllBtn:active { transform: translateY(1px); }

.sendSkoogsBtn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  border: 1.5px solid var(--skoogs);
  background: #fff;
  color: var(--skoogs);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(14, 116, 144, 0.15);
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}
.sendSkoogsBtn:hover { background: var(--skoogs); color: #fff; box-shadow: 0 3px 10px rgba(14, 116, 144, 0.4); }
.sendSkoogsBtn:active { transform: translateY(1px); }
.sendSkoogsBtn:disabled, .sendSkoogsBtn:disabled:hover { background: #fff; color: var(--skoogs); box-shadow: none; transform: none; cursor: default; }

#articleTable .recQtyCell { cursor: pointer; }
#articleTable .recQtyCell:hover { text-decoration: underline dotted; }
#articleTable .recQtyCell.editing { padding: 0.3rem 0.4rem; }
#articleTable .recQtyMultiCell { display: flex; flex-direction: column; gap: 0.3rem; cursor: default; }
#articleTable .recQtyMultiCell:hover { text-decoration: none; }
.recQtyLine { cursor: pointer; min-height: 1.8rem; display: flex; align-items: center; }
.recQtyLine:hover { text-decoration: underline dotted; }
.recQtyLine.editing { padding: 0; }
.recQtyInput { width: 70px; font: inherit; padding: 0.25rem 0.4rem; border: 1px solid var(--border); border-radius: 4px; }

.colActionsHeader { text-align: right !important; padding-right: 0.5rem !important; }
.colActionsHeader .inlineIconBtn + .inlineIconBtn { margin-left: 0.3rem; }
.inlineIconBtn {
  border: none;
  background: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0.2rem 0.3rem;
  border-radius: 4px;
}
.inlineIconBtn:hover { color: var(--text); background: #e7e9ec; }
.inlineIconBtn.active { color: var(--primary); background: #e8f0fe; }

/* Radens receive-info — en .receiveOrderBlock per bekräftad beställning (oftast bara en,
   men flera staplas vertikalt om artikeln råkar ha flera samtidigt). */
.receiveCellWrap { display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; padding-right: 0.75rem; }
.receiveOrderBlock {
  display: inline-grid;
  grid-template-columns: auto auto;
  justify-content: flex-end;
  align-items: center;
  gap: 0.2rem 0.3rem;
}
.expectedDateLabel { grid-column: 1; justify-self: center; font-size: 0.7rem; color: var(--muted); white-space: nowrap; }
.receiveBadge { grid-column: 1; justify-self: center; font-size: 0.72rem; padding: 0.15rem 0.5rem; white-space: nowrap; }
.receiveButtons { grid-column: 2; display: flex; align-items: center; gap: 0.3rem; flex-wrap: nowrap; }

#articleTable tbody tr[draggable]:active { cursor: grabbing; }
#articleTable tbody tr.dragging { opacity: 0.4; cursor: grabbing; }
#articleTable tbody tr.dragOverBefore { box-shadow: inset 0 2px 0 0 var(--drag-accent); }
#articleTable tbody tr.dragOverAfter { box-shadow: inset 0 -2px 0 0 var(--drag-accent); }

.categoryPlaceholder td {
  color: var(--muted);
  font-style: italic;
  text-align: center;
  padding: 0.9rem 0.75rem;
  border: 1px dashed var(--border);
  background: #fafbfc;
}

.badge {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
}
.badge.ok { background: var(--ok-bg); color: var(--ok); }
.badge.nara { background: var(--nara-bg); color: var(--nara); }
.badge.under { background: var(--under-bg); color: var(--under); }
.badge.pendingOrder { background: #e8f0fe; color: var(--primary); }
.badge.confirmedOrder { background: var(--ok-bg); color: var(--ok); }
.badge.awaitingDelivery { background: var(--ordered-bg); color: var(--ordered); }
.badge.countdown { background: #eef0f4; color: var(--muted); }
.badge.overdue { background: var(--under-bg); color: var(--under); }

.statusCell { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 0.3rem; max-width: 100%; }
/* En rad per bekräftad beställning (flex-basis:100% tvingar radbrytning innan nästa
   beställnings badge-par) — min-height matchar .recQtyLine så Rek. beställning-kolumnens
   antal hamnar i linje med rätt beställnings Beställd-badge. */
.statusOrderBlock { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; min-height: 1.8rem; }
#articleTable .statusCell .badge { max-width: 100%; min-width: 0; font-size: 0.72rem; padding: 0.15rem 0.5rem; line-height: 1.3; white-space: normal; text-align: center; }
.orderTimestampDetail { flex-basis: 100%; text-align: left; font-size: 0.7rem; color: var(--muted); }
/* Håller tidsraden fastsvetsad under just Beställd-badgen, oavsett hur andra badgar
   (t.ex. "Väntar på inleverans") radbryts i statusCell bredvid den. */
.badgeStack { display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; }
.badgeStack .orderTimestampDetail { flex-basis: auto; }

dialog {
  border: none;
  border-radius: 10px;
  padding: 0;
  width: 480px;
  max-width: 92vw;
}
dialog::backdrop { background: rgba(0,0,0,0.35); }
#articleDialog { width: 520px; }
#articleForm { padding: 1.25rem 1.5rem; display: flex; flex-direction: column; gap: 0.7rem; }
#articleForm h2 { margin: 0 0 0.25rem; font-size: 1.1rem; }
#columnSettingsDialog { width: 460px; }
#columnSettingsForm { padding: 1.25rem 1.5rem; display: flex; flex-direction: column; gap: 0.7rem; }
#columnSettingsForm h2 { margin: 0 0 0.25rem; font-size: 1.1rem; }
#categoryDialog { width: 360px; }
#categoryForm { padding: 1.25rem 1.5rem; display: flex; flex-direction: column; gap: 0.7rem; }
#confirmDialog { width: 360px; }
#confirmDialog form { padding: 1.25rem 1.5rem; display: flex; flex-direction: column; gap: 0.7rem; }
#confirmDialog h2 { margin: 0; font-size: 1.1rem; }
#confirmMessage { margin: 0; font-size: 0.9rem; color: var(--text); white-space: pre-line; }
#alertDialog { width: 360px; }
#alertDialog form { padding: 1.25rem 1.5rem; display: flex; flex-direction: column; gap: 0.7rem; }
#alertDialog h2 { margin: 0; font-size: 1.1rem; }
#alertMessage { margin: 0; font-size: 0.9rem; color: var(--text); white-space: pre-line; }
#categoryForm h2 { margin: 0 0 0.25rem; font-size: 1.1rem; }
#investDialog { width: 520px; }
#promptDialog { width: 400px; }
#investForm, #promptDialog form { padding: 1.25rem 1.5rem; display: flex; flex-direction: column; gap: 0.7rem; }
#investForm h2, #promptDialog h2 { margin: 0 0 0.25rem; font-size: 1.1rem; }
#confirmOrderForm, #receiveForm { padding: 1.25rem 1.5rem; display: flex; flex-direction: column; gap: 0.7rem; }
#confirmOrderForm h2, #receiveForm h2 { margin: 0 0 0.25rem; font-size: 1.1rem; }
.dialogHint { font-size: 0.85rem; color: var(--text); margin: 0 0 0.25rem; }

.fieldTable { width: 100%; border-collapse: collapse; }
.fieldTable th {
  text-align: left;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--muted);
  padding: 0 0 0.4rem;
  border-bottom: 1px solid var(--border);
}
.fieldTable td {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.fieldTable tr:last-child td { border-bottom: none; }
.fieldTable td:first-child { font-weight: 600; color: var(--text); font-size: 0.88rem; white-space: nowrap; padding-right: 0.75rem; width: 1%; }
.fieldTable input, .fieldTable textarea {
  font: inherit;
  font-weight: normal;
  width: 100%;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
}
.fieldTable textarea { resize: vertical; }
.dialogActions { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; }
.dialogActions .spacer { flex: 1; }
.dialogActions button:not(.primary):not(.danger) {
  background: none; border: 1px solid var(--border); padding: 0.5rem 1rem; border-radius: 6px; cursor: pointer;
}

.contextMenu {
  position: fixed;
  z-index: 1000;
  margin: 0;
  padding: 0.3rem;
  list-style: none;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  min-width: 190px;
}
.contextMenu[hidden] { display: none; }
.contextMenu li[hidden] { display: none; }
.contextMenu button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 0.5rem 0.6rem;
  border-radius: 6px;
  font: inherit;
  font-size: 0.88rem;
  color: var(--text);
  cursor: pointer;
}
.contextMenu button:hover { background: #e8f0fe; }
.contextMenu button:disabled { color: var(--muted); cursor: not-allowed; }
.contextMenu button:disabled:hover { background: none; }

.badgeCount[hidden] { display: none; }
.badgeCount {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.2rem;
  height: 1.2rem;
  padding: 0 0.35rem;
  margin-left: 0.4rem;
  border-radius: 999px;
  background: var(--under);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
}

#ordersDialog { width: 560px; }
.ordersPanel { padding: 1.25rem 1.5rem; display: flex; flex-direction: column; gap: 0.9rem; max-height: 80vh; }
.dialogHeader { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.dialogHeader h2 { margin: 0; font-size: 1.1rem; }
.ordersListToolbar { display: flex; align-items: center; gap: 0.5rem; }
.ordersListToolbar label { font-size: 0.82rem; color: var(--muted); }
.ordersListToolbar select { font: inherit; padding: 0.3rem 0.5rem; border: 1px solid var(--border); border-radius: 6px; }
#ordersList { display: flex; flex-direction: column; gap: 0.75rem; overflow-y: auto; }

.ordersEmailSetting {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.ordersEmailSetting label { font-size: 0.78rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.02em; }
.ordersEmailSettingRow { display: flex; gap: 0.5rem; }
.ordersEmailSettingRow input {
  flex: 1;
  font: inherit;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
}
.ordersEmailSettingRow button {
  padding: 0.4rem 0.9rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: none;
  cursor: pointer;
  font-size: 0.85rem;
}
.ordersEmailSettingRow button:hover { background: #e8f0fe; }

.orderCard { border: 1px solid var(--border); border-radius: 8px; padding: 0.75rem 0.9rem; }
.orderCardHeader { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.orderCardHeader strong { font-size: 0.9rem; }
.orderCardHeaderTitles { display: flex; flex-direction: column; gap: 0.1rem; }
.orderSupplierName { font-size: 0.95rem; }
.orderNumber { font-size: 0.72rem; color: var(--muted); font-weight: 600; letter-spacing: 0.02em; }
.orderRecipient { font-size: 0.78rem; color: var(--muted); font-weight: 400; }
.orderDeliveryInfo { font-size: 0.82rem; color: var(--muted); margin-bottom: 0.5rem; }
.orderDeliveryInfo.overdue { color: var(--under); font-weight: 600; }
.linkBtn { background: none; border: none; padding: 0; margin-left: 0.4rem; font: inherit; font-size: 0.82rem; color: var(--primary); cursor: pointer; text-decoration: underline; }
.linkBtn:hover { color: #2559c9; }
.orderItemsList { margin: 0 0 0.6rem; padding-left: 1.1rem; font-size: 0.85rem; color: var(--text); }
.orderItemsList li { margin-bottom: 0.15rem; }
.orderCardActions { display: flex; gap: 0.5rem; }
.orderCardActions button {
  font-size: 0.82rem;
  padding: 0.35rem 0.7rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: none;
  cursor: pointer;
}
.orderCardActions button.primary { background: var(--primary); color: var(--primary-text); border: none; }
.orderCardActions button.danger { color: var(--danger); border-color: var(--danger); }
.orderCardDocuments { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--border); }
.documentBtn { font-size: 0.78rem; }
.emptyOrders { color: var(--muted); font-size: 0.9rem; text-align: center; padding: 1.5rem 0; }

.ordersSectionDivider {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
  padding-top: 0.6rem;
  margin-top: 0.2rem;
  border-top: 1px solid var(--border);
}
.orderCardReceived { opacity: 0.7; }
.badge.partialReceived { background: #eef0f4; color: var(--muted); margin-left: 0.4rem; }
.itemReceivedMark { font-size: 0.8rem; }

#createOrderDialog { width: 560px; }
#createOrderForm { padding: 1.25rem 1.5rem; display: flex; flex-direction: column; gap: 0.9rem; }
#createOrderForm h2 { margin: 0; font-size: 1.1rem; }

.orderItemsSection { display: flex; flex-direction: column; gap: 0.4rem; }
.orderItemsSectionHeader {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.orderItemsTable th:nth-child(2), .orderItemsTable td:nth-child(2) { width: 140px; }
.orderItemsTable th:last-child, .orderItemsTable td:last-child { width: 1%; }
.orderItemName { font-weight: 600; color: var(--text); font-size: 0.9rem; }
.orderItemMeta { font-size: 0.78rem; color: var(--muted); }
.orderItemQtyWrap { display: flex; align-items: center; gap: 0.35rem; }
.orderItemQtyWrap input[type="number"] { width: 6.5rem; }
.orderItemQtyWrap .unit { font-size: 0.78rem; color: var(--muted); white-space: nowrap; }
.removeOrderItemBtn {
  border: none;
  background: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0 0.3rem;
}
.removeOrderItemBtn:hover { color: var(--danger); }

.orderAddArticle { position: relative; }
.orderAddArticle input {
  width: 100%;
  font: inherit;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
}
.autocompleteResults {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 220px;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
.autocompleteResults[hidden] { display: none; }
.autocompleteResult {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0.7rem;
  cursor: pointer;
  font-size: 0.85rem;
}
.autocompleteResult:hover, .autocompleteResult.active { background: #e8f0fe; }
.autocompleteResult .name { color: var(--text); }
.autocompleteResult .meta { color: var(--muted); font-size: 0.78rem; white-space: nowrap; }
.autocompleteEmpty { padding: 0.6rem 0.7rem; font-size: 0.85rem; color: var(--muted); }

/* Bredare/högre än ordersDialog, och panelen (inte #recipesList) är scroll-behållaren —
   annars klipper #recipesList:s overflow-y bort artikel-dropdownen så fort ett receptkort
   hamnar nära listans nedre kant, eftersom den ligger absolut positionerad inuti kortet. */
#recipesDialog { width: 760px; }
#recipesDialog .ordersPanel { max-height: 88vh; overflow-y: auto; }
.recipeGuessToggle { display: flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; color: var(--muted); cursor: pointer; }
.recipeAddForm { display: flex; gap: 0.5rem; }
.recipeAddForm input {
  flex: 1;
  font: inherit;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
}
#recipesList { display: flex; flex-direction: column; gap: 0.75rem; }
.recipeCard { border: 1px solid var(--border); border-radius: 8px; padding: 0.75rem 0.9rem; }
/* Ihopfällt kort = headern ÄR hela kortet, så bakgrunden ska nå ända ner till kortets egen
   nederkant också (inte bara en smal rand) — samma negativa marginal-teknik som nedan, fast
   även på undersidan, plus runda alla fyra hörn istället för bara de övre två. */
.recipeCard.collapsed .recipeCardHeader { margin-bottom: -0.75rem; padding-bottom: 0.75rem; border-radius: 8px; }
.recipeCardHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: -0.75rem -0.9rem 0.5rem;
  padding: 0.75rem 0.9rem;
  cursor: pointer;
  border-radius: 8px 8px 0 0;
}
/* Samma hover-färg som huvudtabellens artikelrader (#articleTable tbody tr:hover). */
.recipeCardHeader:hover { background: #e8f0fe; }
/* Expanderat recept får samma "aktiv"-färg som en markerad rad i huvudtabellen
   (#articleTable tbody tr.selected/.selected:hover) — tydlig, redan etablerad färgkod
   för "det här är det öppna/valda", istället för att bara lita på pilen. */
.recipeCard:not(.collapsed) .recipeCardHeader { background: #d2e3fc; }
.recipeCard:not(.collapsed) .recipeCardHeader:hover { background: #c3d9fb; }
.recipeCardTitleWrap { display: flex; align-items: baseline; gap: 0.5rem; min-width: 0; }
.recipeCardHeader strong { font-size: 0.95rem; }
.recipeChevron { color: var(--muted); font-size: 0.7rem; }
.recipeCardMeta { font-size: 0.78rem; color: var(--muted); font-weight: normal; white-space: nowrap; }
.deleteRecipeBtn { border: none; background: none; color: var(--muted); cursor: pointer; font-size: 0.8rem; }
.deleteRecipeBtn:hover { color: var(--danger); }
.recipeProductTypeRow { display: flex; align-items: center; gap: 0.5rem; margin: 0.5rem 0; }
.recipeProductTypeRow label { font-size: 0.82rem; color: var(--muted); }
.recipeProductTypeRow select { font: inherit; padding: 0.3rem 0.5rem; border: 1px solid var(--border); border-radius: 6px; }
/* Bara en minneshjälp (checklista), filtrerar inget — se PRODUCT_TYPE_CHECKLISTS i app.js. */
.recipeChecklistHint { font-size: 0.8rem; color: var(--muted); margin: 0.4rem 0 0; font-style: italic; }
.recipeItemsTable th:nth-child(2), .recipeItemsTable td:nth-child(2) { width: 125px; }
.recipeItemsTable th:nth-child(3), .recipeItemsTable td:nth-child(3) { width: 110px; white-space: nowrap; }
.recipeItemsTable th:last-child, .recipeItemsTable td:last-child { width: 1%; }
/* flex + nowrap håller input och enhet ("st") på samma rad — annars radbryts enheten till
   en egen rad så fort input+enhet inte får plats, vilket gör HELA raden högre och gör att
   "Gäller för"-cellen (vertical-align: middle) ser felaktigt förskjuten ut i jämförelse. */
.recipeItemQtyWrap { display: flex; align-items: center; gap: 0.35rem; flex-wrap: nowrap; }
/* ".recipeItemQtyWrap .recipeItemQty" (två klasser) istället för bara ".recipeItemQty" —
   annars vinner ".fieldTable input { width: 100% }" (högre specificitet) och rutan blir
   full kolumnbredd oavsett vad som står här. Samma mått som .recipeAddItemQty (rutan i
   "lägg till komponent"-raden) för att de ska se likadana ut. */
.recipeItemQtyWrap .recipeItemQty { width: 6rem; flex: none; padding: 0.45rem 0.5rem; }
.recipeItemMeta { font-size: 0.78rem; color: var(--muted); white-space: nowrap; }
.removeRecipeItemBtn {
  border: none;
  background: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0 0.3rem;
}
.removeRecipeItemBtn:hover { color: var(--danger); }
.recipeEmptyItems { font-size: 0.82rem; color: var(--muted); margin: 0.25rem 0 0.5rem; }

.recipeAddItem { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.5rem; }
.recipeSaveChecklistRow { display: flex; justify-content: flex-end; margin-top: 0.75rem; }
.recipeAddItemLabel {
  flex: none;
  width: 6.5rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.recipeSearchWrap { position: relative; flex: 1; }
.recipeSearchWrap input {
  width: 100%;
  font: inherit;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
}
.recipeAddItemQty {
  width: 6rem;
  font: inherit;
  padding: 0.45rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 6px;
}
.recipeAddItemLang { font: inherit; padding: 0.42rem 0.35rem; border: 1px solid var(--border); border-radius: 6px; }
/* Fast bredd — annars flyttar sig kvantitetsrutan i sidled beroende på om det här fältet
   råkar ha text ("st"/"gr") eller är tomt (väntar på att en artikel väljs i "Annan
   komponent"), eftersom .recipeSearchWrap (flex: 1) då växer olika mycket per rad. */
.recipeAddItemUnit { flex: none; width: 1.4rem; }

/* position: fixed (istället för .autocompleteResults grundinställning "absolute") + exakt
   top/left/width satta via JS (se renderRecipeAutocomplete i app.js) — annars klipper
   panelens overflow-y bort dropdownen så fort receptkortet inte har gott om plats kvar
   under sig, oavsett hur hög panelen är. Med fixed positionering finns ingen förälder
   som kan klippa den, och den får dessutom synas högre (fler artiklar åt gången). */
.recipeAddItemResults { position: fixed; left: auto; right: auto; top: auto; max-height: 340px; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translate(-50%, 0.5rem);
  background: var(--text);
  color: #fff;
  padding: 0.6rem 1.1rem;
  border-radius: 8px;
  font-size: 0.88rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  z-index: 2000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s, transform 0.15s;
}
.toast.visible { opacity: 1; transform: translate(-50%, 0); }

/* ---- Produktplanering ---------------------------------------------------------------- */
.moduleHeader { display: flex; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap; }

/* Undermeny (Recept / Beräkning) under "Produktplanering" i sidomenyn — syns bara när modulen är vald. */
.sideNavSub {
  display: none;
  flex-direction: column;
  gap: 0.2rem;
  margin: 0 0 0.35rem 1rem;
  padding-left: 0.5rem;
  border-left: 2px solid var(--border);
}
.sideNavItem.active + .sideNavSub { display: flex; }
.sideNavSubItem {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  color: var(--text);
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 0.45rem 0.7rem;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.sideNavSubItem:hover { background: #f1f3f5; }
.sideNavSubItem.active { background: #e8f0fe; border-color: #c3d9fb; color: var(--primary); }


#planningRoot { max-width: none; }
:is(#planningRoot, #planHeaderTools, #investmentsRoot, #profitRoot) input[type="text"],
:is(#planningRoot, #planHeaderTools, #investmentsRoot, #profitRoot) input[type="number"],
:is(#planningRoot, #planHeaderTools, #investmentsRoot, #profitRoot) select {
  border: 1px solid var(--border);
  background: var(--panel);
  border-radius: 6px;
  padding: 0.4rem 0.55rem;
  font-size: 0.88rem;
  color: var(--text);
  min-width: 0;
}
:is(#planningRoot, #planHeaderTools, #investmentsRoot, #profitRoot) button:not(.primary):not(.inlineIconBtn):not(.linkBtn) {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.45rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
:is(#planningRoot, #planHeaderTools, #investmentsRoot, #profitRoot) button:not(.primary):not(.inlineIconBtn):not(.linkBtn):hover:not(:disabled) { background: #f1f3f5; }

.planAddRow { display: flex; gap: 0.5rem; margin: 0.75rem 0; }
.planAddRow input { flex: 1; max-width: 360px; }

.planCard {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 0.75rem;
}
.planCardHeader,
.planFlavorHeader {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.9rem;
  cursor: pointer;
  border-radius: 8px;
}
.planCardHeader:hover,
.planFlavorHeader:hover { background: #e8f0fe; }
.planCardBody { padding: 0 0.9rem 0.6rem; }
.planFlavor { border: 1px solid var(--border); border-radius: 8px; margin: 0.5rem 0; background: #fbfbfc; }
.planFlavorHeader { padding: 0.55rem 0.75rem; }
.planChevron { width: 1rem; color: var(--muted); }
.planMeta { font-size: 0.82rem; color: var(--muted); font-weight: 400; }
.planSpacer { flex: 1; }

.planTable { width: 100%; border-collapse: collapse; margin: 0.25rem 0 0.75rem; font-size: 0.88rem; }
.planFlavor .planTable { width: calc(100% - 1.5rem); margin: 0.25rem 0.75rem 0.75rem; }
.planTable th {
  text-align: left;
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  color: var(--muted);
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid var(--border);
}
.planTable td { padding: 0.3rem 0.5rem; border-bottom: 1px solid #eef0f3; vertical-align: middle; }
.planTable td input[type="text"] { width: 100%; }
.planTable td input[type="number"] { width: 5.5rem; }
.planTable td select { width: 4.5rem; }
.planTableNarrow { max-width: 760px; }
.planPriceCell { white-space: nowrap; }
.planPriceLabel { margin-left: 0.4rem; font-size: 0.78rem; color: var(--muted); }
.planItemCost { white-space: nowrap; font-variant-numeric: tabular-nums; }
.planTable tfoot td { font-weight: 700; border-bottom: none; }
.planAddCell { text-align: right; }
.planAddIcon { color: var(--primary); font-size: 1.25rem; font-weight: 700; line-height: 1; padding: 0.15rem 0.5rem; }
.planAddIcon:hover { color: var(--primary); background: #e8f0fe; }

.planToolbar { display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.9rem; }
.planToolbar label,
.planFields label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.8rem; color: var(--muted); font-weight: 600; }
.planToolbar input[type="text"] { width: 260px; }
.planFields { display: flex; gap: 1.25rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.planFields input { width: 220px; }

.planSection {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.9rem 1.1rem;
  margin-bottom: 0.9rem;
}
.planSection h2 { font-size: 1rem; margin: 0 0 0.6rem; }
.planSection h3 { font-size: 0.9rem; margin: 1rem 0 0.4rem; }

.planDetails summary { cursor: pointer; font-size: 0.85rem; color: var(--muted); margin-bottom: 0.5rem; }
.planCoveredFlavor { margin: 0.6rem 0; }
.planCoveredHeader { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.3rem; }
.planCheckGrid { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
.planCheck { font-size: 0.85rem; display: inline-flex; align-items: center; gap: 0.35rem; }
.linkBtn { background: none; border: none; color: var(--primary); cursor: pointer; font-size: 0.8rem; padding: 0; }
.linkBtn:hover { text-decoration: underline; }

.planSummary td:first-child { font-weight: 600; }
.planSummary td:not(:first-child),
.planSummary th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.planTotalRow td { font-weight: 700; border-top: 2px solid var(--border); background: #f5f6f8; }
.planCheaper { color: var(--ok); }
.planTotalRow .planCheaper { background: var(--ok-bg); }
.planNote { font-size: 0.9rem; margin: 0.4rem 0 0.8rem; }
.planWarning { background: var(--nara-bg); color: var(--nara); border-radius: 6px; padding: 0.45rem 0.7rem; font-size: 0.85rem; margin: 0 0 0.6rem; }

#promptInput {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.5rem 0.6rem;
  font-size: 0.95rem;
  margin: 0;
}

.planRowActions { white-space: nowrap; text-align: right; }
.planRowActions .linkBtn { margin-right: 0.4rem; }
.planWarningInline { font-size: 0.8rem; color: var(--nara); background: var(--nara-bg); border-radius: 4px; padding: 0.1rem 0.4rem; }

/* Smala fönster: tabellerna får scrolla i sin ruta istället för att spränga sidan */
.planSection,
.planFlavor { overflow-x: auto; }

/* Tydlig skillnad mellan expanderade och hopfällda recept (samma blå toner som markerad rad i lagret) */
.planFlavor { background: #fff; }
.planCard.open { border-color: #7ba7f0; box-shadow: 0 2px 8px rgba(47, 111, 237, 0.18); }
.planCard.open > .planCardHeader {
  background: #c3d9fb;
  border-bottom: 1px solid #a9c6f5;
  border-radius: 7px 7px 0 0;
}
.planCard.open > .planCardHeader:hover { background: #b4cff9; }
.planCard.open > .planCardBody { background: #f1f6fe; padding: 0.6rem 0.9rem 0.8rem; border-radius: 0 0 8px 8px; }
.planFlavor.open { border-color: #7ba7f0; }
.planFlavor.open > .planFlavorHeader {
  background: #d2e3fc;
  border-bottom: 1px solid #b7d0f7;
  border-radius: 7px 7px 0 0;
}
.planFlavor.open > .planFlavorHeader:hover { background: #c3d9fb; }
.planCard.open > .planCardHeader .planChevron,
.planFlavor.open > .planFlavorHeader .planChevron { color: var(--primary); }

/* +-meny för att lägga till smak i uträkningen */
:is(#planningRoot, #planHeaderTools, #investmentsRoot, #profitRoot) .planFlavorMenu {
  position: fixed;
  z-index: 40;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(16, 24, 40, 0.18);
  padding: 0.3rem;
  text-align: left;
}
:is(#planningRoot, #planHeaderTools, #investmentsRoot, #profitRoot) .planFlavorMenu button {
  text-align: left;
  background: none;
  border: none;
  border-radius: 6px;
  padding: 0.45rem 0.6rem;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
}
:is(#planningRoot, #planHeaderTools, #investmentsRoot, #profitRoot) .planFlavorMenu button:hover { background: #e8f0fe; }
.planMenuSep { height: 1px; background: var(--border); margin: 0.25rem 0; }

/* Större klickyta för +-ikonerna (receptet och smaktabellen) */
.planAddIcon { padding: 0.35rem 0.9rem; }
.planAddCell { width: 1%; white-space: nowrap; }
:is(#planningRoot, #planHeaderTools, #investmentsRoot, #profitRoot) .planMenuTitle {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--muted);
  padding: 0.35rem 0.6rem 0.25rem;
}
:is(#planningRoot, #planHeaderTools, #investmentsRoot, #profitRoot) .planFlavorMenu button.planMenuIncluded { color: var(--muted); cursor: default; }
:is(#planningRoot, #planHeaderTools, #investmentsRoot, #profitRoot) .planFlavorMenu button.planMenuIncluded:hover { background: none; }
:is(#planningRoot, #planHeaderTools, #investmentsRoot, #profitRoot) .planFlavorMenu button.planMenuIncluded span { font-size: 0.75rem; margin-left: 0.4rem; }

/* Flera beställningar i Beräkning */
.planAddOrderRow { margin: 0 0 1rem; }
.planOrder {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 1rem;
}
.planOrder.open { border-color: #7ba7f0; box-shadow: 0 2px 8px rgba(47, 111, 237, 0.18); }
.planOrderHeader {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.9rem;
  cursor: pointer;
  border-radius: 8px;
}
.planOrderHeader:hover { background: #e8f0fe; }
.planOrder.open > .planOrderHeader {
  background: #c3d9fb;
  border-bottom: 1px solid #a9c6f5;
  border-radius: 7px 7px 0 0;
}
.planOrder.open > .planOrderHeader:hover { background: #b4cff9; }
.planOrder.open > .planOrderHeader .planChevron { color: var(--primary); }
.planOrderLabel {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
}
.planOrderBody { background: #f1f6fe; padding: 0.8rem 0.9rem 0.2rem; border-radius: 0 0 8px 8px; }
/* Totalsumman ska sticka ut från beställningskorten (blå) — därför grön ram. */
.planTotals { border: 2px solid var(--ok); box-shadow: 0 2px 8px rgba(26, 138, 74, 0.2); }

/* Produktbilder (receptraden och beställningskortet) */
.planProductImg {
  display: block;
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: #fff;
}
.planOrderImg { width: 64px; height: 64px; }
.planImgBtn { padding: 0; line-height: 0; border-radius: 6px; }
.planImgBtn:hover .planProductImg { box-shadow: 0 0 0 2px #7ba7f0; }
.planImgEmpty {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed #b9c0cb;
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1;
}
.planImgEmpty:hover { border-color: var(--primary); background: #e8f0fe; }

/* Kolumnbredd (recept och beräkning) + nyckeltalen till höger i Beräkning */
.planColumn { max-width: 1100px; min-width: 0; }
/* Rutnät: "Lägg till beställning" överst under headern, korten under, nyckeltalen i högerkolumnen
   (spänner över båda raderna så att de börjar i höjd med knappen och följer med vid scroll). */
.planCalcLayout {
  display: grid;
  /* Högerkolumnen krymper med skärmen men ligger alltid till höger om korten. */
  /* Lite bredare än förr: rutan Total investering rymmer även "pengarna på kontot" till höger. */
  grid-template-columns: minmax(0, 1100px) clamp(290px, 29vw, 560px);
  grid-template-areas:
    "add kpi"
    "main kpi";
  gap: 1rem 1.5rem;
  align-items: start;
}
.planCalcLayout > .planAddOrderRow { grid-area: add; margin: 0; }
.planCalcLayout > .planColumn { grid-area: main; }
.planCalcLayout > .planKpi { grid-area: kpi; }
.planKpi {
  position: sticky;
  top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.planKpiCard {
  background: var(--panel);
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 1.1rem 1.4rem 1.2rem;
}
.planKpiLabel {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
.planKpiCaption { font-size: 0.8rem; color: var(--muted); margin-top: 0.6rem; }
.planKpiValue {
  font-size: clamp(1.7rem, 2.6vw, 3.2rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.planKpiEmpty { color: var(--muted); }
.planKpiHint { font-size: 0.85rem; color: var(--muted); margin: 0.6rem 0 0; }


/* Nyckeltal: grönt = intäkt (pengar in), mörkt = investering (pengar ut). */
.planKpiIncomeCard { background: var(--ok-bg); border-color: #8fd1a9; }
.planKpiIncome { color: var(--ok); }
.planKpiValue:not(.planKpiIncome):not(.planKpiEmpty):not(.invNegative) { color: var(--text); }

/* Liten etikett bredvid rubriken i nyckeltalsrutorna (t.ex. "Smidigast för expansion"). */
.planKpiBadge {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.55rem;
  border-radius: 999px;
  background: #e8f0fe;
  color: var(--primary);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* Delbelopp under huvudsiffran i nyckeltalsrutorna (t.ex. co-packerns avgift). */
.planKpiSecondary { font-size: clamp(1.2rem, 1.6vw, 1.9rem); }

/* Logotyp för Produktplanering (PPS) i modulens header */
.moduleHeader h1.ppsLogo {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0;
  font-size: 1.5rem;
  line-height: 1;
}
.ppsMark {
  flex: none;
  display: block;
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.25);
}
.ppsWordmark {
  font-weight: 800;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.ppsWordStrong { color: var(--text); }
/* Logon är medvetet neutral (skiffergrå) så att den inte tävlar med knapparnas blå, grönt
   (intäkt) eller varningsfärgerna. */
.ppsWordAccent { color: #64748b; }


/* Nyckeltalskorten i högerkolumnen */
.planKpiCards { display: flex; flex-direction: column; gap: 1rem; }



/* Dölj nyckeltalen: kolumnen försvinner åt höger och ger plats åt resten (ingen yta reserveras).
   Ett litet handtag, fast i högerkanten av fönstret, tar fram dem igen. */
.planCalcLayout.kpiHidden {
  grid-template-columns: minmax(0, 1100px);
  grid-template-areas:
    "add"
    "main";
}
.planCalcLayout.kpiHidden > .planKpi { display: contents; }
.planKpiBar { display: flex; justify-content: flex-end; padding: 0 0.15rem; }
.planKpiHide {
  background: var(--panel);
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.2rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.planKpiHide:hover { color: var(--text); background: #f1f3f5; border-color: #c7ccd3; }
/* Handtaget som visar nyckeltalen igen: fast i högerkanten, tar ingen plats i layouten. */
.planKpiShow {
  position: fixed;
  right: 0;
  top: 7.5rem;
  z-index: 30;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-right: none;
  border-radius: 10px 0 0 10px;
  padding: 0.7rem 0.55rem 0.7rem 0.6rem;
  font-size: 1rem;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: -2px 2px 10px rgba(16, 24, 40, 0.12);
}
.planKpiShow:hover { background: #f1f3f5; }

/* Uträkningsverktygen (sparade uträkningar, namn, Spara …) ligger i modulens header, bredvid logotypen. */
.planHeaderTools { display: flex; align-items: flex-end; margin-left: 0.5rem; }
.planHeaderTools .planKpiCard { border: none; padding: 0; background: none; border-radius: 0; }
.planHeaderTools .planKpiLabel { display: none; }
.planHeaderTools .planToolbar { margin: 0; gap: 0.75rem; }
.planHeaderTools .planToolbar select { width: 230px; }
.planHeaderTools .planToolbar input[type="text"] { width: 230px; }
.planHeaderTools .planToolbarButtons { display: flex; gap: 0.5rem; }

/* Investera-knappen under rutan Total investering */
.planInvestBtn { width: 100%; padding: 0.75rem 1rem; font-size: 1rem; }

/* Sektionen Investeringar */
.invCards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-bottom: 1rem; max-width: 1100px; }
.invTable { width: 100%; }
.invTable th.invNum, .invTable td.invNum { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.invIncome { color: var(--ok); font-weight: 700; }
.invRow { cursor: pointer; }
.invRow:hover, .invRow.open { background: #f1f6fe; }
.invActions { white-space: nowrap; text-align: right; }
.invBadge { display: inline-block; padding: 0.1rem 0.6rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; white-space: nowrap; }
.invPending { background: #fdf3d8; color: #8a6200; }
.invReceived { background: var(--ok-bg); color: var(--ok); }
.invDetailRow td { background: #f8fafc; padding: 0.6rem 1rem 0.9rem; }
.invNote { margin: 0 0 0.6rem; font-size: 0.9rem; white-space: pre-wrap; }
.invCards .planKpiValue { font-size: clamp(1.5rem, 2vw, 2.2rem); }



/* Guldregn när man investerar (se public/goldRain.js) */
.goldRain {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 10000;
}
.goldRain > .goldRainCoin,
.goldRain > .goldRainDot { position: absolute; top: 0; line-height: 1; opacity: 0; will-change: transform, opacity; }
.goldRainCoin { filter: drop-shadow(0 0 6px rgba(255, 200, 0, 0.85)); }
.goldRainDot {
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff8c4, #ffc400 55%, #b8860b);
  box-shadow: 0 0 8px rgba(255, 196, 0, 0.9);
}
.goldRainGlow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 30vh;
  background: linear-gradient(to bottom, rgba(255, 205, 0, 0.38), rgba(255, 205, 0, 0));
}


/* "Pengarna på kontot" överst i Investeringar: saldot, med ett kugghjul uppe till höger för att
   ändra startvärdet. */
.invAccount { position: relative; max-width: 1100px; margin-bottom: 1rem; }
.invNegative { color: var(--danger); }
.invGear {
  position: absolute;
  top: 0.7rem;
  right: 0.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: none;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.25s ease;
}
.invGear:hover { background: #f1f3f5; color: var(--text); border-color: var(--border); transform: rotate(45deg); }

/* Rubrik i modulen Investeringar (samma storlek som övriga modulrubriker) */
.moduleHeader h1.moduleTitle { font-size: 1.5rem; margin: 0; font-weight: 800; letter-spacing: -0.01em; }


/* Vinst per produkt: antaganden överst och en tabell med en rad per smak. */
#profitRoot { max-width: none; }
.profitIntro { max-width: 760px; margin-bottom: 0.75rem; }
.profitSettings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0.75rem;
  max-width: 1100px;
  margin: 0 0 1.25rem;
}
.profitSettingsGroup {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.7rem 0.9rem 0.8rem;
}
.profitSettingsGroup h3 { margin: 0 0 0.4rem; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--muted); }
.profitSettingRow { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.3rem 0; }
.profitLabel { display: flex; flex-direction: column; font-size: 0.9rem; font-weight: 600; min-width: 0; }
.profitSuffix { font-size: 0.75rem; font-weight: 400; color: var(--muted); }
.profitSettingRow input { width: 5.5rem; text-align: right; flex: none; }
.profitHint { margin: 0.4rem 0 0; font-size: 0.78rem; color: var(--muted); }

.profitTableWrap { overflow-x: auto; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; }
.profitTable { margin: 0; min-width: 880px; }
.profitTable th { text-align: left; vertical-align: bottom; }
.profitTable th.profitGroupHead { text-align: center; background: #f6f8fb; }
.profitTable thead tr:nth-child(2) th { text-align: right; }
.profitUnit { display: block; font-size: 0.72rem; font-weight: 400; color: var(--muted); }
.profitTable td { padding: 0.5rem 0.6rem; }
.profitTable td input.profitMoney { width: 6rem; text-align: right; }
.profitTable td input.profitOverride { border-color: var(--primary); background: #f5f9ff; }
/* Kanalgrupper (Egen shop / Återförsäljare / Distributör) i listan och i Värde efter produktion: en tjock
   linje vid gruppens kant och tunna linjer mellan kolumnerna i gruppen. Klasser (inte kolumnnummer), så att
   linjerna inte hamnar fel när kolumner läggs till eller tas bort. */
.profitTable .profitGroupStart { border-left: 2px solid #b3bcc8; }
.profitTable .profitSubCol { border-left: 1px solid var(--border); }
/* Rubriken "Total vinst" i listan bryts inte i tre rader — kolumnen får plats för sin text. */
.profitTable th.profitTotalHead { white-space: nowrap; min-width: 5.5rem; }
/* Namncellen: bild (som i recepten) + namnfält + ta bort bild. Flex ligger på en inre div, inte
   på själva cellen, så att tabellraden behåller sitt normala utseende. */
.profitName { min-width: 15rem; }
.profitNameWrap { display: flex; align-items: center; gap: 0.5rem; }
.profitNameWrap input[type="text"] { flex: 1 1 auto; min-width: 7rem; }
.profitNameWrap .planImgBtn { flex: none; }
.profitCell { text-align: right; white-space: nowrap; min-width: 7.5rem; }
/* Vinst per styck: normal vikt och samma storlek som övriga siffror i tabellen, dämpad grön — ska inte stickas ut. */
.profitValue { display: block; font-weight: 500; font-size: 0.88rem; font-variant-numeric: tabular-nums; }
.profitPos { color: #3a7d54; }
.profitNeg { color: var(--danger); }
.profitZero { color: var(--muted); }
.profitMargin { display: block; font-size: 0.75rem; color: var(--muted); }
.profitNone { color: var(--muted); }

/* Vinst per produkt: kostnadsposter (lock, påse, sachet, burk …) under en produktrad */
.profitCostCell { text-align: right; white-space: nowrap; }
.profitCostTotal { display: block; padding: 0.4rem 0.55rem; font-weight: 700; font-variant-numeric: tabular-nums; }
/* Den utfällda posttabellen ligger i en ljusblå ruta med blå kant (samma toner som expanderade
   recept) så att den syns tydligt mot de hopfällda raderna. */
.profitItemsRow > td {
  background: #f1f6fe;
  padding: 0.6rem 0.9rem 0.8rem 2.2rem;
  border-bottom: 2px solid #7ba7f0;
  box-shadow: inset 4px 0 0 var(--primary);
}
.profitItemsTable { width: 100%; max-width: 760px; margin: 0.25rem 0 0.4rem; }
.profitItemsTable th { border-bottom: 2px solid #a9c6f5; }
.profitItemsTable td { border-bottom-color: #c9daf5; }
.profitItemsTable tfoot td { border-top: 2px solid #a9c6f5; }
.profitItemsTable td input[type="text"] { width: 100%; min-width: 9rem; }
.profitRemove { width: 1%; text-align: center; }

/* Total investering: nuvarande siffror till vänster och "pengarna på kontot" före/efter investeringen
   till höger (bryts under siffrorna om rutan blir för smal). */
.planKpiInvestCard { display: flex; flex-wrap: wrap; gap: 0.9rem 1.2rem; }
.planKpiInvestMain { flex: 1 1 10.5rem; min-width: 0; }
.planKpiBalance {
  flex: 1 1 8.5rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 1.1rem;
  border-left: 1px solid var(--border);
}
.planKpiBalanceLabel {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.5rem;
}
.planKpiBalanceTag { font-size: 0.8rem; color: var(--muted); }
.planKpiBalanceValue {
  font-size: clamp(1rem, 1.25vw, 1.3rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  color: var(--text);
  margin-bottom: 0.55rem;
}
.planKpiBalanceValue:last-child { margin-bottom: 0; }
.planKpiBalanceValue.planKpiIncome { color: var(--ok); }
.planKpiBalanceValue.invNegative { color: var(--danger); }
.planKpiBalanceValue.planKpiEmpty { color: var(--muted); }
.planKpiBalanceNote { font-size: 0.75rem; font-weight: 700; color: var(--ok); margin: -0.25rem 0 0.5rem; }

/* Intäktsrutan i Beräkning: kanalväljare i rubrikraden + jämförelsetabell (intäkt/vinst per kanal). */
.planKpiLabelRow { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; }
#planningRoot .planKpiChannelSelect {
  padding: 0.15rem 0.45rem;
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: 999px;
  background: #fff;
}
.planKpiChannels { width: 100%; border-collapse: collapse; margin-top: 0.7rem; font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.planKpiChannels th { font-size: 0.68rem; font-weight: 700; color: var(--muted); text-align: right; padding: 0 0 0.25rem 0.4rem; }
.planKpiChannels td { text-align: right; padding: 0.25rem 0 0.25rem 0.4rem; border-top: 1px solid #cfe9da; color: var(--ok); font-weight: 700; }
.planKpiChannels td:first-child, .planKpiChannels th:first-child { text-align: left; padding-left: 0; color: var(--text); font-weight: 600; }
.planKpiChannels .planKpiChannelActive td { background: rgba(26, 138, 74, 0.08); }

/* Resultattabellerna: en rubrikrad per försäljningskanal (egen shop / återförsäljare / distributör). */
.planTable tr.planChannelHead td {
  background: #f3f6fa;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.45rem 0.5rem;
  border-top: 2px solid var(--border);
  text-align: left;
}
.planTable tr.planChannelHead.planChannelSelected td { background: var(--ok-bg); color: var(--ok); }
.planTable tr.planChannelHead .planMeta { font-weight: 500; }

/* Co-packer, Engångskostnader och Försäljning fälls ihop/ut tillsammans med ett klick på en rubrik. */
.planFoldHead { cursor: pointer; user-select: none; }
.planFoldHead:hover .planChevron { color: var(--primary); }
.planFoldHead .planChevron { display: inline-block; width: 1em; color: var(--muted); }
.planSectionFolded { padding-top: 0.6rem; padding-bottom: 0.6rem; }
.planSectionFolded .planFoldHead { margin: 0; }
.planFolded[hidden] { display: none; }

/* En gemensam ruta för Co-packer, Engångskostnader och Försäljning: tre delar åtskilda av linjer. */
.planSubSection + .planSubSection { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.planSubSection h3 { font-size: 0.95rem; margin: 0 0 0.5rem; }
.planFoldSummary {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.4rem;
  font-size: 0.85rem;
  color: var(--muted);
}
.planFoldSummary strong { color: var(--text); font-weight: 600; margin-right: 0.3rem; }

/* Utfälld ruta för Co-packer/Engångskostnader/Försäljning: tydlig blå ram och rubrikband (samma
   toner som expanderade recept och beställningar) så att den sticker ut mot de vita rutorna. */
.planInputsBox:not(.planSectionFolded) {
  border: 2px solid #7ba7f0;
  box-shadow: 0 2px 8px rgba(47, 111, 237, 0.18);
  overflow: hidden;
}
.planInputsBox:not(.planSectionFolded) > .planFoldHead {
  margin: -0.9rem -1.1rem 0.9rem;
  padding: 0.7rem 1.1rem;
  background: #c3d9fb;
  border-bottom: 1px solid #a9c6f5;
}
.planInputsBox:not(.planSectionFolded) > .planFoldHead:hover { background: #b4cff9; }
.planInputsBox:not(.planSectionFolded) > .planFoldHead .planChevron { color: var(--primary); }

/* Vinst per produkt: koppling till receptsmak, momsrader under priserna och låsta (kopplade) fält. */
.profitNameCol { flex: 1 1 auto; min-width: 7rem; display: flex; flex-direction: column; gap: 0.3rem; }
.profitNameCol input[type="text"] { width: 100%; }
.profitItemsHead .linkBtn { margin-left: 0.5rem; font-size: 0.75rem; font-weight: 500; }
.profitRowIcons { display: flex; align-items: center; gap: 0.1rem; flex: none; }
.profitPriceCell { white-space: nowrap; }
.profitVat { display: flex; flex-direction: column; margin-top: 0.25rem; font-size: 0.72rem; color: var(--muted); line-height: 1.35; }
.profitVat strong { color: var(--text); font-weight: 600; margin-left: 0.25rem; }
/* Värden som inte går att ändra (hämtas från receptet): ingen ruta runt siffran. Samma storlek som ett
   inmatningsfält (transparent kant), så att siffrorna står i linje med de som går att ändra. */
#profitRoot .profitTable td input.profitMoney:disabled {
  border-color: transparent;
  background: transparent;
  color: var(--text);
  -webkit-text-fill-color: var(--text);
  opacity: 1;
  cursor: default;
}

/* Recept: försäljningspriser per smak (inkl. moms) ovanför ingredienstabellen. */
.planFlavorPrices { padding: 0.5rem 0.75rem 0; }
.planFlavorPricesTitle { font-size: 0.85rem; font-weight: 700; margin-bottom: 0.4rem; }
.planFlavorPrices .planFields { margin-bottom: 0.4rem; }
.planFlavorPrices label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.8rem; font-weight: 600; color: var(--muted); }
.planFlavorPrices input { width: 160px; }

/* Menyn "+ Från recept" i Vinst per produkt (flex-reglen för .planFlavorMenu skulle annars skriva över hidden). */
:is(#planningRoot, #planHeaderTools, #investmentsRoot, #profitRoot) .planFlavorMenu[hidden] { display: none; }
#profitRoot .planFlavorMenu { max-height: 60vh; overflow-y: auto; }

/* Vinst per produkt: receptets ingredienser (skrivskyddade) ovanför egna tillägg på en kopplad rad. */
.profitItemsHead { margin: 0.5rem 0 0.2rem; font-size: 0.8rem; font-weight: 700; }
.profitRecipeTable td { color: var(--muted); }
.profitRecipeTable tfoot td { color: var(--text); }

/* Små produktbilder i menyn "+ Från recept" i Vinst per produkt */
.planMenuProduct { display: flex; align-items: center; gap: 0.5rem; }
.profitMenuImg {
  width: 28px;
  height: 28px;
  flex: none;
  object-fit: cover;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: #fff;
}
.profitMenuImgEmpty { display: inline-block; background: #f1f3f5; }

/* Vinst per produkt: Total vinst-kolumnerna (celler och totalraden) och momsrullistan "Moms" i verktygsraden. */
.profitValueNum { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.profitValueTotal td { font-weight: 800; border-top: 2px solid var(--border); background: #f6f8fb; }
.profitValueVatLabel { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; font-weight: 600; color: var(--muted); }
#profitRoot .profitValueVatSelect { font-size: 0.85rem; padding: 0.3rem 0.5rem; }

/* Vinst per produkt: knapp som döljer/visar förklaringen och inställningsrutorna överst. */
.profitInfoToggleRow { margin: 0 0 0.6rem; display: flex; align-items: center; gap: 0.5rem; }
#profitRoot .profitInfoToggle { font-size: 0.82rem; padding: 0.3rem 0.7rem; color: var(--muted); }
/* "?"-knappen och den korta förklaringen under den (stängd som standard). */
#profitRoot .profitHelpBtn {
  width: 1.7rem;
  height: 1.7rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--panel);
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1;
}
.profitHelp {
  max-width: 64rem;
  margin: 0 0 0.75rem;
  padding: 0.55rem 1rem;
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: 8px;
  background: var(--panel);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text);
}
.profitHelp ul { margin: 0; padding-left: 1.1rem; }
.profitHelp li + li { margin-top: 0.3rem; }

/* Vinst per produkt, listan: rullistan "Visa" (moms) längst till höger i raden med "+ Lägg till produkt". */
#profitRoot .planAddRow { flex-wrap: wrap; align-items: center; }
#profitRoot .profitListOptions { margin-left: auto; display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 0.75rem; }
/* Layout B: kanalerna som av/på-knappar i raden (en dold kryssruta + en pill; ikryssad = markerad). */
#profitRoot .profitChannelPills { display: inline-flex; flex-wrap: wrap; gap: 0.35rem; }
#profitRoot .profitChannelPill { position: relative; display: inline-flex; cursor: pointer; }
#profitRoot .profitChannelPill input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; pointer-events: none; }
#profitRoot .profitChannelPill span {
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel);
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
}
#profitRoot .profitChannelPill:hover span { background: #f1f3f5; }
#profitRoot .profitChannelPill input:checked + span { background: #e8f0fe; border-color: #c3d9fb; color: var(--primary); }
#profitRoot .profitChannelPill input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
/* Menyn "Visa ▾": kanaler, kolumner, moms och beräkning i en meny (kryssrutor/radioknappar som menyrader). */
#profitRoot .profitViewMenu { min-width: 240px; padding-bottom: 0.4rem; }
#profitRoot .profitMenuCheck { display: flex; align-items: flex-start; gap: 0.55rem; padding: 0.4rem 0.6rem; border-radius: 6px; font-size: 0.88rem; font-weight: 500; color: var(--text); cursor: pointer; }
#profitRoot .profitMenuCheck:hover { background: #e8f0fe; }
#profitRoot .profitMenuCheck input { flex: none; width: auto; margin: 0.2rem 0 0; cursor: pointer; }
#profitRoot .profitMenuHint { display: block; font-size: 0.72rem; font-weight: 400; color: var(--muted); }
/* "Visa vinstmarginal" urkryssad: marginalraden under vinsten döljs i hela listan. */
#profitListTable.profitHideMargin .profitMargin { display: none; }
.profitQtyCell { white-space: nowrap; }

/* ---- Konto: knapp i sidomenyn + dialog (byt lösenord, användarhantering för admin) ------------------ */
.sideNavAccount { margin-top: auto; color: var(--muted); }
#accountDialog { width: 760px; max-width: 94vw; max-height: 90vh; overflow: auto; }
.accountBox { padding: 1.1rem 1.4rem 1.25rem; }
.accountHead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.4rem; }
.accountHead h2 { margin: 0; font-size: 1.15rem; }
.accountClose { border: none; background: none; font-size: 1rem; cursor: pointer; color: var(--muted); padding: 0.3rem 0.5rem; border-radius: 6px; }
.accountClose:hover { background: #f1f3f5; color: var(--text); }
.accountSection { border-top: 1px solid var(--border); padding-top: 0.9rem; margin-top: 0.9rem; }
.accountSection h3 { margin: 0 0 0.6rem; font-size: 1rem; }
.accountSection h4 { margin: 1.1rem 0 0.5rem; font-size: 0.9rem; }
.accountBadge { display: inline-block; padding: 0 0.4rem; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--primary); background: #e8f0fe; border-radius: 999px; vertical-align: middle; }
.accountHint { font-size: 0.78rem; font-weight: 400; color: var(--muted); }
.accountForm { display: flex; flex-direction: column; gap: 0.6rem; max-width: 22rem; }
.accountForm label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.85rem; font-weight: 600; }
.accountForm input[type="password"], .accountForm input[type="text"], .accountForm input[type="email"] {
  font: inherit; font-weight: 400; padding: 0.45rem 0.55rem; border: 1px solid var(--border); border-radius: 6px;
}
.accountForm .accountCheck { flex-direction: row; align-items: center; gap: 0.4rem; font-weight: 500; }
.accountForm button.primary { align-self: flex-start; }
.accountAddForm { max-width: 26rem; }
.accountError { margin: 0; min-height: 1.1em; font-size: 0.85rem; color: var(--under); }
.accountNotice { margin: 0.6rem 0 0; padding: 0.5rem 0.7rem; font-size: 0.82rem; color: #7a4b00; background: #fff6e0; border: 1px solid #f1d9a3; border-radius: 6px; }
/* Besked överst i dialogen — följer med när dialogen scrollas (se setStatus i account.js). */
.accountStatus { position: sticky; top: 0.4rem; z-index: 2; margin: 0 0 0.7rem; padding: 0.65rem 0.9rem; font-size: 0.9rem; font-weight: 600; line-height: 1.35; border: 1px solid; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12); }
.accountStatus[hidden] { display: none; }
.accountStatus.ok { color: #14532d; background: #e3f5e9; border-color: #9fd6b3; }
.accountStatus.info { color: #1e3a8a; background: #e8f0fe; border-color: #b4c9f5; }
.accountStatus.warn { color: #7a4b00; background: #fff6e0; border-color: #f1d9a3; }
.accountData summary { cursor: pointer; font-size: 1rem; font-weight: 700; }
.accountData[open] summary { margin-bottom: 0.6rem; }
.accountSection code { padding: 0 0.3rem; font-size: 0.85em; background: #f1f3f5; border-radius: 4px; }
.accountTableWrap { overflow-x: auto; }
.accountTable { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.accountTable th { text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); padding: 0.3rem 0.5rem; border-bottom: 1px solid var(--border); }
.accountTable td { padding: 0.4rem 0.5rem; border-bottom: 1px solid #eef0f3; vertical-align: middle; }
.accountEmail { width: 100%; min-width: 11rem; font: inherit; font-size: 0.85rem; padding: 0.3rem 0.45rem; border: 1px solid var(--border); border-radius: 6px; }
.accountRename { border: none; background: none; padding: 0 0.3rem; margin-left: 0.1rem; font-size: 0.85rem; line-height: 1; color: var(--muted); cursor: pointer; border-radius: 4px; }
.accountRename:hover { color: var(--primary); background: #e8f0fe; }
.accountActions { white-space: nowrap; text-align: right; }
.accountActions button { font-size: 0.78rem; padding: 0.3rem 0.55rem; margin-left: 0.2rem; }
.accountActions button.accountDelete:not(:disabled):hover { color: var(--danger); background: #fdecec; border-color: #f5c6c6; }
.accountFoot { border-top: 1px solid var(--border); margin-top: 1.1rem; padding-top: 0.8rem; display: flex; justify-content: flex-end; }