/*
 * Nice to know – stilmall. Följer ntmy.agency: svart och vitt, accent #FF9152,
 * rubriker i Platform, brödtext i DM Sans, 3 px hörnradie. Ingen byggkedja.
 */

@font-face { font-family: "DM Sans"; src: url("/fonts/dm-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "DM Sans"; src: url("/fonts/dm-sans-latin-ext-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "DM Sans"; src: url("/fonts/dm-sans-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --black: #000;
  --white: #fff;
  --bg: #F5F5F5;
  --line: #E6E6E6;
  --line-soft: #F0F0F0;
  --line-strong: #CFCFCF;
  --muted: #595959;
  --muted-2: #404040;
  --accent: #FF9152;
  --accent-ink: #B04A10;
  --accent-soft: #FFEDE3;
  --green: #2E9E5B;  --green-soft: #E3F3E8; --green-ink: #1E6B41;
  --yellow: #E2A92C; --yellow-soft: #FBF0D4; --yellow-ink: #6E4F00;
  --red: #D24433;    --red-soft: #FBE3DF;    --red-ink: #9B2516;
  --grey-soft: #EDEDED;
  --radius: 3px;        /* knappar och fält */
  --radius-card: 6px;   /* kort */
  --text-2: #666;       /* sekundär text */
  --text-3: #8C8C8C;    /* tertiär text */
  --blue: #5B7FC2;      --blue-soft: #E8EEF9; --blue-ink: #23406E;
  --accent-light: #FFC9A8; /* upparbetat, ej fakturerat */
  --yellow-ink-2: #8A5A00;
  --gap: 12px;          /* mellan kort */
  --gap-in: 8px;        /* inne i grupper */
  /* Rubriktypsnitt: byt "Platform" här (och lägg filen i public/fonts) – en rad. */
  --font-heading-face: "Platform";
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-head: var(--font-heading-face), "Platform Web", "DM Sans", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font-body); font-size: 13px; line-height: 1.4; color: var(--black); background: var(--bg); }
a { color: var(--black); }
a:hover { color: var(--accent-ink); }
h1, h2, h3 { font-family: var(--font-head); font-weight: 400; margin: 0; line-height: 1.1; }
h1 { font-size: 26px; line-height: 1; }
h2 { font-size: 17px; line-height: 1.2; }
h3 { font-size: 15px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[x-cloak] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); }
.small { font-size: 11.5px; }
.nowrap { white-space: nowrap; }
.num, .k { font-variant-numeric: tabular-nums; }
.k { white-space: nowrap; }

/* ── Ramverk: smal meny (76 px) och innehåll ───────────────────── */
.app { min-height: 100vh; display: flex; }
.rail { width: 76px; flex: 0 0 76px; background: var(--black); color: var(--white); display: flex; flex-direction: column; align-items: center; padding: 14px 0; gap: 4px; position: sticky; top: 0; height: 100vh; }
.rail .brand { display: block; margin: 2px 0 14px; color: var(--white); }
.rail .brand svg { width: 30px; height: 31px; display: block; }
.rail a, .rail button { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 64px; padding: 8px 0; border-radius: 4px; color: #9A9A9A; text-decoration: none; font: inherit; font-size: 10.5px; line-height: 1; background: none; border: 0; cursor: pointer; text-align: center; }
.rail a:hover, .rail button:hover { color: var(--white); background: #1A1A1A; }
.rail a[aria-current="page"] { color: var(--white); background: #1F1F1F; }
.rail a[aria-current="page"] svg { color: var(--accent); }
.rail .spacer { flex: 1; }
.main { flex: 1 1 auto; min-width: 0; padding: 16px 20px; display: flex; flex-direction: column; gap: var(--gap); }
/* Sidor som ska rymmas på skärmen utan skroll (Översikt, Tid): höjden är 100vh, rader med grid. */
.main.fit { height: 100vh; display: grid; grid-template-rows: auto auto minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); overflow: hidden; }
@media (min-width: 768px) { .main.fit > .flash, .main.fit > .demo-today { display: none; } }
.mobile-nav { display: none; }

/* ── Byggstenar ────────────────────────────────────────────────── */
.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-card); }
.card-pad { padding: 12px 14px; }
.card-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; padding: 14px 16px 10px; }
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 3px 9px; border-radius: 999px; white-space: nowrap; background: var(--grey-soft); color: var(--muted-2); }
.pill-dark { background: var(--black); color: var(--white); }
.pill-yellow { background: var(--yellow-soft); color: var(--yellow-ink); }
.pill-green { background: var(--green-soft); color: var(--green-ink); }
.pill-red { background: var(--red-soft); color: var(--red-ink); }
.pill-accent { background: var(--accent-soft); color: var(--accent-ink); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--black); border-radius: var(--radius); background: var(--black); color: var(--white); font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; text-decoration: none; }
.btn:hover { background: #222; color: var(--white); }
.btn-outline { background: var(--white); color: var(--black); border-color: #DADADA; }
.btn-outline:hover { background: var(--bg); color: var(--black); }
.btn-small { height: 28px; padding: 0 10px; font-size: 12.5px; }
.btn-link { background: transparent; border: 0; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; padding: 0 6px; height: 34px; font: inherit; font-size: 13px; cursor: pointer; }
.btn-link:hover { color: var(--accent-ink); }
.btn-danger { color: var(--red-ink); }
.icon-btn { width: 28px; height: 28px; font-size: 13px; padding: 0; border: 1px solid #DADADA; background: var(--white); border-radius: var(--radius); font-size: 18px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; color: var(--black); }
.icon-btn:hover { background: var(--bg); color: var(--black); }

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label, .label { font-size: 11px; color: var(--text-2); }
.input, .select, .textarea { height: 32px; width: 100%; border: 1px solid #DADADA; border-radius: var(--radius); padding: 0 10px; font: inherit; font-size: 13px; background: var(--white); color: var(--black); }
.select { padding: 0 8px; }
.textarea { height: auto; min-height: 70px; padding: 10px 12px; resize: vertical; }
.input:focus, .select:focus, .textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }

.segmented { display: inline-flex; border: 1px solid #DADADA; border-radius: var(--radius); overflow: hidden; background: var(--white); }
.segmented a { height: 28px; padding: 0 12px; display: inline-flex; align-items: center; text-decoration: none; font-size: 14px; color: var(--black); }
.segmented a[aria-current="page"] { background: var(--black); color: var(--white); }
.segmented a + a { border-left: 1px solid #DADADA; }

.flash { padding: 12px 16px; border-radius: var(--radius); font-size: 14px; border: 1px solid; }
.flash-ok { background: var(--green-soft); border-color: #BFE3CB; color: var(--green-ink); }
.flash-error { background: var(--red-soft); border-color: #F2C3BB; color: var(--red-ink); }
.flash ul { margin: 0; padding-left: 18px; }

.progress { height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; }
.progress > span { display: block; height: 6px; background: var(--black); }

/* ── Dagmarkering: grön bock, gult, ring ───────────────────────── */
.mark { flex: none; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; line-height: 1; }
.mark-full { background: var(--green); color: var(--white); }
.mark-partial { background: var(--yellow); color: var(--black); }
.mark-empty { border: 1.5px solid #9E9E9E; color: transparent; }
.mark-free, .mark-future { width: 26px; }
.mark-sm { width: 20px; height: 20px; font-size: 11px; }
.legend { display: flex; flex-wrap: wrap; gap: 18px; font-size: 13px; color: var(--muted-2); }
.legend span { display: inline-flex; align-items: center; gap: 8px; }

/* ── Sidhuvud ─────────────────────────────────────────────────── */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; }
.eyebrow { font-size: 14px; color: var(--muted); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.head-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.month-meter { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; min-width: 220px; }
.month-meter .big { font-family: var(--font-head); font-size: 26px; line-height: 1; }

/* ── Snabbrad ─────────────────────────────────────────────────── */
.quick { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.quick-grid { display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(0, 1.1fr) 150px 90px minmax(0, 1.6fr) auto; gap: 8px; align-items: end; }
.combo { position: relative; }
.combo-list { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0; background: var(--white); border: 1px solid var(--line-strong); border-radius: var(--radius); max-height: 320px; overflow-y: auto; box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.combo-list button { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 14px; border: 0; border-top: 1px solid var(--line-soft); background: var(--white); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.combo-list button:first-child { border-top: 0; }
.combo-list button:hover, .combo-list button[aria-selected="true"] { background: var(--accent-soft); }
.combo-list .group { padding: 8px 14px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.chip { flex: none; border: 1px solid #DADADA; background: var(--white); border-radius: 999px; padding: 0 14px; height: 36px; font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.chip:hover { border-color: var(--black); }
.chip[aria-pressed="true"] { background: var(--black); color: var(--white); border-color: var(--black); }
.chip .muted { font-size: 12px; }
.chip[aria-pressed="true"] .muted { color: #CFCFCF; }

/* ── Okopplat ─────────────────────────────────────────────────── */
.unlinked { background: var(--yellow-soft); border: 1px solid #EBD49A; border-radius: var(--radius); padding: 16px 20px; display: flex; flex-direction: column; gap: 10px; }
.unlinked h2 { font-size: 20px; }
.unlinked-row { display: grid; grid-template-columns: 110px 70px minmax(0, 1fr) minmax(0, 280px) auto; gap: 10px; align-items: center; font-size: 14px; padding-top: 10px; border-top: 1px solid #EBD49A; }
.unlinked-row .select { height: 38px; font-size: 14px; }

/* ── Layout med sidospalt ─────────────────────────────────────── */
.split { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.split-main { flex: 999 1 620px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.split-side { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }

/* ── Vecka ────────────────────────────────────────────────────── */
.week-nav { display: flex; align-items: center; gap: 8px; }
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.day-col { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-direction: column; min-height: 360px; min-width: 0; }
.day-col.is-free { background: #FAFAFA; }
.day-col.is-today { border-top: 3px solid var(--accent); }
.day-col.is-selected { outline: 2px solid var(--black); outline-offset: -1px; }
.day-col-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; padding: 12px 12px 10px; text-decoration: none; color: inherit; }
.day-col-head:hover { color: inherit; background: var(--bg); }
.day-col-head .total { font-family: var(--font-head); font-size: 22px; line-height: 1.1; }
.day-col-body { display: flex; flex-direction: column; gap: 6px; padding: 0 10px 10px; }
.chip-entry { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 7px 9px; display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; text-decoration: none; color: inherit; }
.chip-entry:hover { border-color: var(--black); color: inherit; }
.chip-entry .row { display: flex; justify-content: space-between; gap: 6px; }
.chip-entry .who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-entry.is-unlinked { background: var(--yellow-soft); border-color: #EBD49A; }
.chip-entry.is-locked { background: #FAFAFA; color: var(--muted-2); }
.day-col-foot { margin-top: auto; padding: 0 10px 10px; }
.day-col-foot a { display: flex; align-items: center; justify-content: center; height: 34px; border: 1px dashed #BDBDBD; border-radius: var(--radius); font-size: 13px; color: var(--muted-2); text-decoration: none; }
.day-col-foot a:hover { border-color: var(--black); color: var(--black); }

/* ── Dag ──────────────────────────────────────────────────────── */
.day-strip { display: grid; grid-template-columns: 44px repeat(7, minmax(0, 1fr)) 44px; gap: 8px; }
.day-tab { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 6px 10px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; color: inherit; min-height: 44px; }
.day-tab:hover { border-color: var(--black); color: inherit; }
.day-tab[aria-current="date"] { background: var(--black); color: var(--white); border-color: var(--black); }
.day-tab .n { font-size: 12px; }
.day-tab .h { font-family: var(--font-head); font-size: 18px; line-height: 1.1; }
.day-tab.is-today:not([aria-current]) { border-top: 3px solid var(--accent); }
.entries { display: flex; flex-direction: column; }
.entry { border-top: 1px solid var(--line-soft); }
.entry-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 12px 20px; }
.entry-who { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.entry-who .meta { font-size: 13px; color: var(--muted); }
.entry-hours { font-size: 16px; text-align: right; white-space: nowrap; }
.entry-edit { padding: 4px 20px 16px; display: flex; flex-direction: column; gap: 10px; }
.edit-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) 110px 100px; gap: 8px; }
.edit-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.notice { font-size: 13px; padding: 10px 12px; border-radius: var(--radius); background: var(--grey-soft); color: var(--muted-2); }
.notice-lock { background: var(--accent-soft); color: var(--accent-ink); }
.empty { padding: 24px 20px; border-top: 1px solid var(--line-soft); font-size: 14px; color: var(--muted); }

/* ── Förslag ──────────────────────────────────────────────────── */
.split-stacked { flex-direction: column; align-items: stretch; }
.split-stacked .split-main, .split-stacked .split-side { flex: 1 1 auto; width: 100%; }
.split-stacked .sugg-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); column-gap: 28px; }
.sugg { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; border-top: 1px solid var(--line-soft); }
.sugg-top { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.sugg-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ── Månad ────────────────────────────────────────────────────── */
.month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.month-dow { font-size: 12px; color: var(--muted); text-align: center; padding-bottom: 4px; }
.month-cell { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); min-height: 76px; padding: 8px; display: flex; flex-direction: column; justify-content: space-between; text-decoration: none; color: inherit; }
.month-cell:hover { border-color: var(--black); color: inherit; }
.month-cell.is-out { opacity: .45; }
.month-cell.is-free { background: #FAFAFA; }
.month-cell.is-today { border-top: 3px solid var(--accent); }
.month-cell .top { display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
.month-cell .h { font-size: 15px; }
.stat { display: flex; flex-direction: column; gap: 4px; }
.stat .big { font-family: var(--font-head); font-size: 28px; line-height: 1; }

/* ── Mobil: bottenark ─────────────────────────────────────────── */
.mobile-only { display: none; }
.sheet-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 50; display: flex; align-items: flex-end; }
.sheet { background: var(--white); width: 100%; border-radius: 12px 12px 0 0; padding: 18px 16px 24px; display: flex; flex-direction: column; gap: 14px; max-height: 92vh; overflow-y: auto; }
.sheet-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.sheet-head .title { font-family: var(--font-head); font-size: 24px; line-height: 1.1; }
.hour-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.hour-grid button { height: 46px; border: 1px solid #DADADA; background: var(--white); border-radius: var(--radius); font: inherit; font-size: 16px; cursor: pointer; }
.hour-grid button[aria-pressed="true"] { background: var(--black); color: var(--white); border-color: var(--black); }

@media (max-width: 1100px) {
  .main:not(.fit) { padding: 16px 20px; }
  .quick-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 150px 90px; }
  .quick-grid .field-desc { grid-column: 1 / 4; }
  .week { grid-template-columns: repeat(7, minmax(120px, 1fr)); overflow-x: auto; padding-bottom: 6px; }
  .unlinked-row { grid-template-columns: 100px 60px minmax(0, 1fr); }
  .unlinked-row form { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
  body { font-size: 15px; }
  .rail { display: none; }
  .main, .main.fit { padding: 16px 16px 120px; gap: 12px; height: auto; display: flex; overflow: visible; }
  .input, .select, .textarea { height: 44px; font-size: 15px; }
  .btn { height: 40px; }
  h1 { font-size: 24px; }
  .desktop-only { display: none !important; }
  .mobile-only { display: flex; }
  .page-head { align-items: flex-start; }
  .month-meter { min-width: 0; align-items: flex-start; width: 100%; }
  .month-meter .progress { width: 100% !important; }
  .head-tools { width: 100%; }
  .segmented { flex: 1 1 100%; width: 100%; }
  .segmented a { flex: 1; justify-content: center; padding: 0 8px; }
  .day-strip, .day-strip.mobile-only { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
  .day-strip .icon-btn { display: none; }
  .day-tab { padding: 6px 2px 8px; }
  .day-tab .h { font-size: 15px; }
  .day-tab .mark { width: 16px; height: 16px; font-size: 10px; }
  .entry-row { padding: 12px 14px; grid-template-columns: minmax(0, 1fr) auto; }
  .entry-row .entry-btn { grid-column: 1 / -1; justify-self: start; }
  .entry-edit { padding: 4px 14px 14px; }
  .edit-grid { grid-template-columns: 1fr 1fr; }
  .edit-grid .span-2 { grid-column: 1 / -1; }
  .unlinked { padding: 14px; }
  .unlinked-row { grid-template-columns: auto auto 1fr; }
  .month-grid { gap: 3px; }
  .month-cell { min-height: 54px; padding: 5px; }
  .month-cell .h { font-size: 12px; }
  .month-dow { font-size: 11px; }
  .mobile-nav { display: grid; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--white); border-top: 1px solid var(--line); padding: 10px 12px 14px; gap: 10px; grid-template-columns: 1fr; }
  .mobile-nav .links { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); text-align: center; font-size: 12px; }
  .mobile-nav .links a, .mobile-nav .links span, .mobile-nav .links button { color: var(--muted); text-decoration: none; display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 44px; justify-content: center; min-width: 0; background: none; border: 0; font: inherit; font-size: 12px; cursor: pointer; padding: 0; }
  .mobile-nav .links a[aria-current="page"], .mobile-nav .links button[aria-current="page"] { color: var(--black); }
  .more-menu { display: flex; flex-direction: column; border-bottom: 1px solid var(--line); padding-bottom: 6px; }
  .more-menu a { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 8px; text-decoration: none; color: var(--black); font-size: 15px; }
  .more-menu a[aria-current="page"] { font-weight: 600; }
  html, body { overflow-x: clip; }
  .mobile-nav .btn { height: 50px; font-size: 15px; width: 100%; }
}

/* ── Steg 5: listor, kort, tavla ─────────────────────────────── */
.status { display: inline-flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.4; }
.status-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; margin-top: 4px; background: #BDBDBD; }
.status-rod .status-dot { background: var(--red); }
.status-gul .status-dot { background: var(--yellow); }
.status-gron .status-dot { background: var(--green); }
.status-rod .status-text { color: var(--red-ink); }
.status-gul .status-text { color: var(--yellow-ink); }
.warning-box { border-radius: var(--radius); padding: 12px 16px; font-size: 14px; display: flex; gap: 10px; align-items: flex-start; }
.warning-box.rod { background: var(--red-soft); color: var(--red-ink); }
.warning-box.gul { background: var(--yellow-soft); color: var(--yellow-ink); }

.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filters .label { margin-right: 4px; }
a.chip { text-decoration: none; color: inherit; }

.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th { text-align: left; font-weight: 400; font-size: 11px; color: var(--text-2); padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.table td { padding: 9px 10px; height: 36px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table .r { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.table a.row-link { text-decoration: none; font-weight: 500; }
.table a.row-link:hover { text-decoration: underline; }
.table-wrap { overflow-x: auto; }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.kpi { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; }
.kpi .big { font-family: var(--font-head); font-size: 24px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi .sub { font-size: 12px; color: var(--muted); }
.kpi .progress { margin-top: 4px; }
.progress.over > span { background: var(--red); }
.progress.warn > span { background: var(--yellow); }

.board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.board-col { background: var(--bg); border-radius: var(--radius); padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 120px; }
.board-col h3 { font-family: var(--font-body); font-size: 13px; color: var(--muted); display: flex; justify-content: space-between; padding: 2px 2px 4px; }
.task { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.task.is-done { color: var(--muted); }
.task.is-done .task-title { text-decoration: line-through; }
.task-top { display: flex; justify-content: space-between; gap: 8px; }
.task-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.task-actions button { height: 30px; padding: 0 10px; font-size: 12px; }
.check-btn { display: inline-flex; align-items: center; gap: 6px; }

.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.section-head h2 { font-size: 20px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; align-items: end; }
.form-grid .wide { grid-column: span 2; }
.check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; min-height: 44px; }
.check input { width: 18px; height: 18px; accent-color: var(--black); }
details.add { border-top: 1px solid var(--line-soft); padding-top: 12px; }
details.add > summary { cursor: pointer; font-size: 14px; list-style: none; display: inline-flex; align-items: center; gap: 6px; }
details.add > summary::-webkit-details-marker { display: none; }
details.add > summary::before { content: "+"; font-size: 16px; }
details.add[open] > summary::before { content: "–"; }
details.add > form { margin-top: 12px; }
.dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; font-size: 14px; margin: 0; }
.dl dt { color: var(--muted); }
.dl dd { margin: 0; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.deal-group + .deal-group { margin-top: 8px; }
.tag-current { background: var(--black); color: var(--white); }

@media (max-width: 1100px) {
  .grid-2 { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .board { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr 1fr; }
  .form-grid .wide { grid-column: 1 / -1; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .kpi .big { font-size: 20px; }
  /* Tabeller blir kort i mobilen: varje rad är ett kort, varje cell har sin rubrik. */
  .table.stack-mobile thead { display: none; }
  .table.stack-mobile, .table.stack-mobile tbody, .table.stack-mobile tr, .table.stack-mobile td { display: block; width: 100%; }
  .table.stack-mobile tr { border-bottom: 1px solid var(--line); padding: 10px 0; }
  .table.stack-mobile tr:last-child { border-bottom: 0; }
  .table.stack-mobile td { border: 0; padding: 3px 14px; display: flex; justify-content: space-between; gap: 12px; text-align: right; }
  .table.stack-mobile td::before { content: attr(data-label); color: var(--muted); font-size: 12px; text-align: left; flex: none; }
  .table.stack-mobile td.first { display: block; text-align: left; padding-top: 6px; padding-bottom: 6px; }
  .table.stack-mobile td.first::before { display: none; }
  .table.stack-mobile td.r { text-align: right; }
}
@media (max-width: 767px) {
  .table.stack-mobile td > .status { text-align: left; max-width: 70%; }
}

/* Simulerat idag (APP_DEMO_TODAY, bara lokalt) */
.demo-today { font-size: 12px; color: var(--muted, #666); border: 1px dashed currentColor; border-radius: 3px; padding: 4px 10px; margin-bottom: 14px; display: inline-block; }

/* Kontakter på kundkortet */
.contact { border-bottom: 1px solid var(--line-soft); padding: 6px 0; }
.contact summary { cursor: pointer; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.contact summary::-webkit-details-marker { display: none; }

/* Fakturering */
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.muted-2 { color: var(--muted-2); }
.pill-blue { background: #E8EEF9; color: #23406E; }
.tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.tiles .label { display: flex; align-items: center; gap: 8px; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: block; flex: none; }
.dot-grey { background: #A6A6A6; } .dot-accent { background: var(--accent); } .dot-blue { background: #5B7FC2; }
.dot-green { background: var(--green); } .dot-red { background: var(--red); }
.control { border-left: 4px solid var(--accent); display: flex; flex-direction: column; gap: 0; }
.check-row { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line-soft); font-size: 14px; }
.check-text { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.check-icon { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; flex: none; }
.check-ok { background: var(--green); color: var(--white); }
.check-gul { background: var(--yellow); color: var(--black); }
.check-rod { background: var(--red); color: var(--white); }
.check-info, .check-todo { background: var(--grey-soft); color: var(--muted-2); }
.act, .btn-link.act { font-size: 14px; color: var(--black); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; padding: 0; height: auto; }
.act:hover { color: var(--accent-ink); }
.bases { overflow: hidden; }
.basis-row { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.6fr) 120px 120px 150px; gap: 12px; padding: 12px 20px; align-items: center; font-size: 14px; }
.basis-head { font-size: 12px; color: var(--muted); background: #FAFAFA; padding-top: 10px; padding-bottom: 10px; }
.basis-row .r { text-align: right; }
.basis { border-top: 1px solid var(--line-soft); }
.basis > summary { cursor: pointer; list-style: none; }
.basis > summary::-webkit-details-marker { display: none; }
.basis > summary:hover { background: #FCFCFC; }
.basis-org { font-weight: 600; }
.basis.is-credited { color: var(--muted); }
.basis.is-credited .basis-org { font-weight: 400; text-decoration: line-through; }
.basis-body { padding: 4px 20px 20px; background: #FCFCFC; display: flex; flex-direction: column; gap: 14px; }
.lines { display: flex; flex-direction: column; }
.line { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr) 120px; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); font-size: 14px; }
.line .r { text-align: right; }
.adj { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.overage { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid var(--yellow-soft); background: #FFFBF0; border-radius: var(--radius); }
.overage.is-decided { border-color: var(--line); background: var(--white); }
.overage-title { font-size: 14px; font-weight: 600; }
.basis-actions { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.basis-actions form, .check-row form, .adj form { margin: 0; }
.sync-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line-soft); font-size: 14px; }
@media (max-width: 1100px) {
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .tiles { grid-template-columns: 1fr 1fr; }
  .basis-head { display: none; }
  .basis-row { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 16px; }
  .basis-row > :nth-child(2) { grid-column: 1 / -1; order: 3; }
  .basis-row > :nth-child(4) { order: 4; }
  .basis-row > :nth-child(5) { order: 5; text-align: right; }
  .basis-body { padding: 4px 16px 16px; }
  .line { grid-template-columns: minmax(0, 1fr) auto; }
  .line > :first-child { grid-column: 1 / -1; }
  .line > :first-child:empty { display: none; }
  .check-row { flex-direction: column; align-items: flex-start; }
  .check-row > form, .check-row > a { margin-left: 32px; }
}
.btn:disabled, .btn[disabled] { opacity: .4; cursor: not-allowed; }
.basis:target > summary { box-shadow: inset 3px 0 0 var(--accent); }
.flash-warn { background: var(--yellow-soft); border-color: #EBD49A; color: var(--yellow-ink); }

/* Översikt */
.headline { display: flex; flex-wrap: wrap; gap: 28px; }
.headline > div { display: flex; flex-direction: column; gap: 2px; }
.headline .big { font-family: var(--font-head); font-size: 24px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.headline .sub { font-size: 12px; color: var(--muted); }
.overview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 16px; align-items: start; }
.block-h { font-size: 22px; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.block-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ov-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line-soft); font-size: 14px; margin: 0; }
.ov-row form { margin: 0; }
.ov-text { display: flex; gap: 10px; align-items: flex-start; }
.risk { display: grid; grid-template-columns: 4px minmax(0, 1fr) auto; align-items: start; }
.risk-bar { width: 4px; align-self: stretch; border-radius: 2px; }
.risk-rod { background: var(--red); } .risk-gul { background: var(--yellow); }
@media (max-width: 1100px) { .overview { grid-template-columns: 1fr; } }
@media (max-width: 767px) {
  .headline { gap: 14px 20px; }
  .headline .big { font-size: 20px; }
  .ov-row:not(.risk) { flex-direction: column; align-items: flex-start; }
  .ov-row:not(.risk) > .act, .ov-row:not(.risk) > form { margin-left: 32px; }
}

/* Ekonomi */
.segmented { display: inline-flex; border: 1px solid #DADADA; border-radius: var(--radius); overflow: hidden; background: var(--white); }
.segmented a { height: 28px; padding: 0 12px; display: inline-flex; align-items: center; font-size: 12.5px; text-decoration: none; color: var(--muted-2); }
.segmented a[aria-pressed="true"] { background: var(--black); color: var(--white); }
.eco-charts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.hbar-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) 90px; gap: 10px; align-items: center; font-size: 13px; }
.hbar { position: relative; height: 12px; background: var(--line-soft); border-radius: 3px; display: block; }
.hbar-fill { display: block; height: 12px; border-radius: 3px; }
.fill-green { background: var(--green); } .fill-yellow { background: var(--yellow); } .fill-red { background: var(--red); }
.hbar-target { position: absolute; top: -3px; width: 2px; height: 18px; background: var(--black); }
.legend { display: flex; gap: 14px; font-size: 12px; color: var(--muted-2); margin-top: -6px; flex-wrap: wrap; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.sw { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.sw-black { background: var(--black); } .sw-grey { background: #C3C4C7; } .sw-line { height: 0; border-top: 1px dashed var(--black); }
.vbars { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; height: 150px; border-bottom: 1px solid #DADADA; align-items: end; }
.vbar-col { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.vbar { display: block; width: 60%; max-width: 30px; }
.vbar-black { background: var(--black); } .vbar-grey { background: #C3C4C7; } .vbar-accent { background: var(--accent); border-radius: 2px 2px 0 0; }
.vbar-sched { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--black); display: block; }
.vbar-labels { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; font-size: 12px; text-align: center; }
.vbar-labels > span { display: flex; flex-direction: column; align-items: center; }
.eco-table { min-width: 980px; }
.eco-table tfoot td { border-top: 1px solid var(--line); font-weight: 500; }
@media (max-width: 1100px) { .eco-charts { grid-template-columns: 1fr; } }
@media (max-width: 767px) {
  .segmented a { padding: 0 10px; font-size: 13px; }
  .hbar-row { grid-template-columns: 90px minmax(0, 1fr) 80px; }
}

/* Klistra in tidsrader */
.paste-results { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }

/* Inloggning */
.auth-body { min-height: 100vh; display: flex; align-items: flex-start; justify-content: center; }
.auth { width: 100%; max-width: 440px; padding: 56px 16px; display: flex; flex-direction: column; gap: 16px; }
.auth-brand { display: flex; align-items: center; gap: 12px; color: var(--black); }
.auth-brand .brand-name { font-family: var(--font-head); font-size: 22px; }
.auth-card { gap: 16px; }
.secret { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 18px; letter-spacing: 1px; background: var(--bg); padding: 10px 12px; border-radius: var(--radius); word-break: break-all; }
.codes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; font-size: 15px; }

/* Inställningar */
.inline-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
.inline-form .input { height: 40px; }
.reason-row { display: grid; grid-template-columns: 130px minmax(0, 1fr) 110px; gap: 10px; align-items: center; }
.check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
@media (max-width: 767px) { .reason-row { grid-template-columns: 1fr; gap: 4px; } }
.qr { background: var(--white); padding: 8px; align-self: flex-start; border: 1px solid var(--line); border-radius: var(--radius); }
.qr svg { display: block; width: 200px; height: 200px; }

/* Feedback 2026-11-10: tätare sidor och en rad nyckeltal */
.kpi-foot { font-size: 13px; color: var(--muted); margin-top: -6px; }
.tg-ok { color: var(--green-ink); } .tg-warn { color: var(--yellow-ink); } .tg-bad { color: var(--red-ink); }
.filter-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filter-row .select, .filter-row .input { width: auto; flex: 1 1 160px; min-width: 0; height: 32px; }
/* Snabbraden på Tid: sök, tid, Enter */
.quick-line { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.quick-line .combo { flex: 1 1 320px; min-width: 0; }
.quick-line .quick-dur { flex: 0 0 96px; }
.quick-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.select-small, .input-small { height: 34px; font-size: 13px; padding-top: 4px; padding-bottom: 4px; width: auto; }
.quick-comment { flex: 1 1 260px; }
.chips-small { gap: 6px; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
.chips-small > * { flex: 0 0 auto; }
.chip-small { font-size: 12px; padding: 3px 9px; min-height: 0; }
/* Översikt: genvägar och uppgifter */
.shortcuts { display: flex; flex-wrap: wrap; gap: 8px; }
.todo-check { width: 20px; height: 20px; border: 1.5px solid var(--muted); border-radius: 50%; background: var(--white); cursor: pointer; flex: 0 0 auto; padding: 0; }
.todo-check:hover, .todo-check:focus-visible { border-color: var(--accent, #FF9152); background: var(--accent-soft, #FFE9DC); }
.task-reminder summary { cursor: pointer; color: var(--muted); }

/* ══ Designsystemet 2026-11 (docs/design/designsystem.md) ═════════════════════════ */
.lbl { font-size: 11px; color: var(--text-2); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.hint { font-size: 11.5px; color: var(--text-2); }
.h2c { margin: 0; font-family: var(--font-head); font-weight: 400; font-size: 17px; line-height: 1.2; }
.card-title { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.card-title .hint { font-size: 11px; }
.c-ok { color: var(--green-ink); } .c-warn { color: var(--yellow-ink-2); } .c-bad { color: var(--red-ink); }
.strong { font-weight: 700; }
.pill-count { background: var(--accent-soft); margin-left: 4px; font-size: 12px; padding: 2px 8px; vertical-align: 2px; }

/* Ikonknapp 28 × 28 (✓ ✎ ✕). ✓ är svart. */
.ib { width: 28px; height: 28px; border: 1px solid #E0E0E0; background: var(--white); border-radius: var(--radius); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font: inherit; font-size: 13px; padding: 0; color: var(--black); text-decoration: none; flex: none; }
.ib:hover { border-color: var(--black); color: var(--black); }
.ib-dark { background: var(--black); color: var(--white); border-color: var(--black); }
.ib-dark:hover { color: var(--white); background: #222; }

/* Nyckeltalskort: grafik + etikett, värde och jämförelse */
.kpi-row { display: grid; grid-template-columns: 1.25fr repeat(4, minmax(0, 1fr)); gap: 10px; }
.kpi-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 10px 14px; display: grid; gap: 10px; align-items: center; min-width: 0; color: inherit; text-decoration: none; }
a.kpi-card:hover { border-color: #BDBDBD; color: inherit; }
.kpi-card.g-half { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; }
.kpi-card.g-ring { grid-template-columns: 58px minmax(0, 1fr); }
.kpi-card.g-bar { display: flex; flex-direction: column; gap: 4px; justify-content: center; align-items: stretch; }
.kpi-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kpi-top { display: flex; justify-content: space-between; gap: 8px; }
.kv { font-family: var(--font-head); font-size: 21px; line-height: 1.05; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kd { font-size: 11.5px; color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-svg { display: block; overflow: visible; }

/* Stapel med målstreck och delad stapel */
.tbar { position: relative; height: 8px; background: #EFEFEF; border-radius: 4px; display: block; }
.tbar > .fill { display: block; height: 100%; border-radius: 4px; background: var(--black); max-width: 100%; }
.tbar > .mark { position: absolute; top: -3px; width: 2px; height: 14px; background: var(--black); }
.tbar > .mark.accent { background: var(--accent); }
.sbar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: #EFEFEF; }
.sbar > span { display: block; min-width: 0; }

/* Sammanfattningsrad: etikett, värde, jämförelse */
.st-row { display: grid; gap: 16px; padding-bottom: 6px; border-bottom: 1px solid #F2F2F2; }
.st { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.st .l { font-size: 11px; color: var(--text-2); white-space: nowrap; }
.st .v { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1.2; }
.st .d { font-size: 11px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st .tbar { margin: 6px 0 3px; }

/* Stapeldiagram per månad / ackumulerat */
.mchart { flex: 1; min-height: 0; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 6px; }
.mchart-y { display: flex; flex-direction: column; justify-content: space-between; font-size: 10px; color: #999; text-align: right; padding-bottom: 16px; }
.mchart-area { display: flex; flex-direction: column; min-height: 0; }
.mchart-plot { flex: 1; position: relative; border-bottom: 1px solid #DADADA; background: linear-gradient(to top, transparent 49.6%, #F2F2F2 49.6%, #F2F2F2 50.4%, transparent 50.4%); min-height: 60px; }
.mchart-bars, .mchart-x { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 10px; }
.mchart-bars { position: absolute; inset: 0; align-items: end; }
.mchart-col { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; }
.mchart-col > span { display: block; width: 64%; }
.mchart-col .up { background: var(--accent-light); border-radius: 2px 2px 0 0; }
.mchart-col .fak { background: var(--black); }
.mchart-col .plan { position: absolute; bottom: 0; width: 64%; border: 1.5px solid var(--black); border-bottom: 0; border-radius: 2px 2px 0 0; background: transparent; box-sizing: border-box; }
.mchart svg.lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mchart-x { height: 16px; align-items: end; }
.mchart-x span { text-align: center; font-size: 10.5px; color: #888; }
.mchart-x span.on { font-weight: 700; color: var(--black); }
.legend-row { display: flex; gap: 10px; font-size: 11px; color: #555; flex-wrap: wrap; }
.legend-row > span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.sw9 { width: 9px; height: 9px; display: inline-block; }
.sw-dash { width: 14px; border-top: 2px dashed var(--accent); display: inline-block; }
.sw-frame { width: 9px; height: 9px; border: 1.5px solid var(--black); box-sizing: border-box; display: inline-block; }
.toggle { display: inline-flex; border: 1px solid #DADADA; border-radius: var(--radius); overflow: hidden; }
.toggle button, .toggle a { height: 26px; padding: 0 10px; border: 0; background: var(--white); color: #333; font: inherit; font-size: 12px; cursor: pointer; display: inline-flex; align-items: center; text-decoration: none; }
.toggle [aria-pressed="true"], .toggle [aria-current="page"] { background: var(--black); color: var(--white); }

/* Horisontella staplar med målstreck (TG per kund) */
.hbars { flex: 1; display: flex; flex-direction: column; justify-content: space-around; gap: 4px; }
.hb-row { display: grid; grid-template-columns: 118px minmax(0, 1fr) 34px; gap: 8px; align-items: center; font-size: 12px; }
.hb-row .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hb { position: relative; height: 11px; background: #F4F4F4; border-radius: 2px; display: block; }
.hb > .fill { display: block; height: 11px; border-radius: 2px; max-width: 100%; }
.hb > .mark { position: absolute; top: -2px; width: 1.5px; height: 15px; background: var(--black); }

/* Godkännandelista */
.list-scroll { flex: 1; min-height: 0; overflow: auto; }
.ap-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid #F2F2F2; }
.src { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; flex: none; }
.src-c { background: var(--black); color: var(--white); }
.src-k { background: var(--blue-soft); color: var(--blue-ink); }
.src-r { background: var(--green-soft); color: var(--green-ink); }
.src-x { background: var(--red-soft); color: var(--red-ink); }
.src-t { background: var(--grey-soft); color: #444; }
.ap-main { display: flex; flex-direction: column; min-width: 0; }
.ap-top { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.ap-top > :first-child, .ap-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-meta { font-size: 11.5px; color: #777; }
.ap-actions { display: flex; gap: 4px; }
.ap-actions form { margin: 0; }

/* Uppgiftslista */
.task-row { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 7px 0; border-top: 1px solid #F2F2F2; }
.task-row form { margin: 0; }
.task-row .box { width: 15px; height: 15px; margin: 2px 0 0; border: 1.5px solid #8C8C8C; border-radius: 3px; background: var(--white); padding: 0; cursor: pointer; display: block; }
.task-row .box:hover, .task-row .box:focus-visible { border-color: var(--black); background: var(--accent-soft); }
.task-row .t { font-size: 13px; line-height: 1.25; }
.task-row .s { font-size: 11px; color: #888; }
.task-row .when { font-size: 11px; white-space: nowrap; color: #888; }
.task-row .when.late { color: var(--red-ink); font-weight: 700; }
.task-row .when.today { color: var(--black); font-weight: 700; }
.task-row.done .t { text-decoration: line-through; color: #AAA; }

/* Kundfärg */
.cdot { width: 10px; height: 10px; border-radius: 2px; display: inline-block; flex: none; }
.swatches { display: flex; gap: 6px; flex-wrap: wrap; }
.swatches label { width: 26px; height: 26px; border-radius: 4px; cursor: pointer; border: 2px solid transparent; display: inline-flex; }
.swatches input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.swatches input:checked + label { border-color: var(--black); box-shadow: inset 0 0 0 2px var(--white); }
.swatches input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 1100px) {
  .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi-row > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .kpi-row { grid-template-columns: 1fr; }
  .kpi-row > :first-child { grid-column: auto; }
  .mchart-bars, .mchart-x { gap: 4px; }
  .mchart-x span { font-size: 9.5px; }
}
.color-pick > summary { list-style: none; }
.color-pick > summary::-webkit-details-marker { display: none; }

/* ── Översikt (oversikt-v4) ───────────────────────────────────── */
.ov-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; position: relative; }
.ov-title { display: flex; align-items: baseline; gap: 14px; min-width: 0; }
.ov-title h1 { white-space: nowrap; }
.ov-title .hint { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-shortcuts { display: flex; gap: 6px; position: relative; }
.ov-pop { position: absolute; right: 0; top: 40px; z-index: 30; width: 420px; padding: 12px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.1); }
.ov-toast { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 60; background: var(--black); color: var(--white); padding: 8px 14px; border-radius: var(--radius-card); font-size: 13px; box-shadow: 0 8px 24px rgba(0,0,0,.15); max-width: 70vw; }
.ov-toast.is-error { background: var(--red-ink); }
.ov-grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); grid-template-rows: minmax(0, 1.25fr) minmax(0, 1fr); gap: 10px; min-height: 0; }
.ov-card { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.ov-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; min-height: 0; }
.ov-chart-tools { display: flex; align-items: center; gap: 14px; }
.ov-st { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.deals { flex: 1; display: flex; flex-direction: column; justify-content: space-around; border-top: 1px solid #F2F2F2; min-height: 0; }
.deal-row { display: grid; grid-template-columns: minmax(0, 1fr) 76px 34px; gap: 8px; align-items: center; font-size: 12px; }
.deal-name { display: flex; flex-direction: column; min-width: 0; }
.ell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.task-text { display: flex; flex-direction: column; min-width: 0; text-decoration: none; color: inherit; }
.task-text:hover { color: inherit; }
.task-text:hover .t { text-decoration: underline; }
.task-row .box-link { border-style: dashed; }
@media (max-width: 1100px) {
  .ov-head { flex-wrap: wrap; }
  .ov-grid { grid-template-columns: 1fr; grid-template-rows: none; }
}
@media (max-width: 767px) {
  .ov-title { flex-direction: column; gap: 4px; }
  .ov-title .hint { white-space: normal; }
  .ov-shortcuts { flex-wrap: wrap; }
  .ov-shortcuts .btn { height: 36px; }
  .ov-pop { position: fixed; left: 12px; right: 12px; top: 80px; width: auto; }
  .ov-pair { grid-template-columns: 1fr; }
  .ov-card .mchart { height: 200px; flex: none; }
  .ov-st { grid-template-columns: 1fr 1fr; row-gap: 10px; }
  .ov-chart-tools { flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
  .ov-card .card-title { flex-wrap: wrap; }
  .list-scroll { max-height: none; overflow: visible; }
}

/* ── Tid (tid-v2) ─────────────────────────────────────────────── */
.main.fit:has(> .tid) { grid-template-rows: minmax(0, 1fr); padding: 18px 22px; }
.main.fit > .tid { display: grid; grid-template-rows: auto auto minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); gap: 12px; min-height: 0; }
.tid { display: flex; flex-direction: column; gap: 12px; }
.tid-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.tid-head-l { display: flex; align-items: center; gap: 14px; min-width: 0; }
.tid-head-l h1 { font-size: 28px; white-space: nowrap; }
.tid-head-r { display: flex; align-items: center; gap: 18px; }
.tid-meter { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.tid-sep { width: 1px; height: 30px; background: #E0E0E0; }
.tid-month { display: flex; flex-direction: column; align-items: flex-end; font-size: 12px; color: var(--text-2); }
.cmd { padding: 10px 12px; border-color: var(--black); }
.cmd-form { display: flex; flex-direction: column; gap: 8px; }
.cmd-grid { display: grid; grid-template-columns: 132px minmax(0, 1fr) 150px 86px auto auto; gap: 8px; align-items: center; }
.cmd .input, .cmd .select, .cmd-btn { height: 38px; font-size: 14px; }
.cmd-day { font-weight: 600; }
.cmd-hours { font-size: 15px; text-align: right; }
.cmd-search { position: relative; min-width: 0; }
.cmd-picked { height: 38px; border: 1px solid #DADADA; border-radius: var(--radius); display: flex; align-items: center; gap: 8px; padding: 0 6px 0 8px; font-size: 14px; }
.cmd-x { margin-left: auto; border: 0; background: none; cursor: pointer; font-size: 14px; color: #888; }
.cmd-hits { position: absolute; left: 0; right: 0; top: 42px; z-index: 20; box-shadow: 0 6px 18px rgba(0,0,0,.08); padding: 4px; max-height: 320px; overflow: auto; }
.cmd-hits button { width: 100%; display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 7px 8px; border: 0; background: var(--white); text-align: left; font: inherit; font-size: 13.5px; cursor: pointer; border-radius: var(--radius); }
.cmd-hits button:hover, .cmd-hits button[aria-selected="true"] { background: var(--accent-soft); }
.cmd-recent { display: flex; gap: 6px; align-items: center; overflow: hidden; white-space: nowrap; }
.chip-s { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border: 1px solid #E2E2E2; border-radius: 999px; background: var(--white); font: inherit; font-size: 12px; cursor: pointer; }
.chip-s:hover { border-color: var(--black); }
.chip-s[aria-pressed="true"] { border-color: var(--black); background: var(--bg); }
.cmd-toast { margin-left: auto; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; }
.tid-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 12px; min-height: 0; }
.tid-body-flow { align-items: start; }
.tid-week { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) 64px; gap: 8px; min-height: 0; }
.tid-day { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.tid-day.is-on { border: 2px solid var(--black); }
.tid-day.is-free { background: #FAFAFA; }
.tid-day-head { border: 0; background: none; padding: 10px 10px 8px; text-align: left; cursor: pointer; font: inherit; display: flex; flex-direction: column; gap: 6px; border-bottom: 1px solid #F0F0F0; color: inherit; }
.tid-day-head:disabled { cursor: default; }
.tid-day-head:not(:disabled):hover { background: #FAFAFA; }
.day-mark { width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 700; flex: none; }
.day-mark.ok { background: var(--green); color: var(--white); }
.day-mark.warn { background: var(--yellow); color: var(--black); }
.tid-day-body { flex: 1; overflow: auto; padding: 6px; display: flex; flex-direction: column; gap: 5px; }
.tid-entry { background: #FAFAFA; border-left: 3px solid #BDBDBD; border-radius: 3px; padding: 6px 8px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 6px; align-items: baseline; text-decoration: none; color: inherit; }
.tid-entry:hover { background: #F2F2F2; color: inherit; }
.tid-entry.is-locked { opacity: .75; }
.tid-add { margin-top: 2px; border: 1px dashed #DADADA; background: none; border-radius: 3px; padding: 6px; font: inherit; font-size: 11.5px; color: #888; cursor: pointer; }
.tid-add:hover { border-color: var(--black); color: var(--black); }
.tid-weekend { display: flex; flex-direction: column; align-items: center; padding: 10px 4px; gap: 6px; background: #FAFAFA; }
.tid-dot { width: 10px; height: 10px; border-radius: 2px; display: block; }
.tid-aside { display: flex; flex-direction: column; gap: 12px; min-height: 0; overflow: auto; }
.tid-aside .h2c { font-size: 15px; }
.sg-row { padding: 7px 0; border-top: 1px solid #F2F2F2; }
.sg-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: center; }
.sg-adjust { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; }
.tid-paste { margin-top: 8px; }
.tid-paste > summary { cursor: pointer; font-size: 11.5px; }
.tid-unlinked { background: #FFFBF0; border-color: #F1E3BC; }
.tid-unl-row { display: flex; flex-direction: column; gap: 6px; padding: 6px 0; }
.tid-unl-row + .tid-unl-row { border-top: 1px solid #F1E3BC; }
.tid-unl-row .select { height: 30px; font-size: 12.5px; }
.tid-pk { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 12.5px; }
.tid .day-strip { grid-template-columns: 32px repeat(7, minmax(0, 1fr)) 32px; }
.tid .day-strip .icon-btn { width: 32px; height: auto; }
@media (max-width: 1100px) {
  .tid-head { flex-wrap: wrap; }
  .cmd-grid { grid-template-columns: 120px minmax(0, 1fr) 130px 80px; }
  .cmd-grid > .cmd-btn { grid-row: 2; }
  .tid-body { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .tid-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .tid-head-l { flex-wrap: wrap; gap: 8px 10px; }
  .tid-head-l h1 { font-size: 24px; }
  .tid-head-r { width: 100%; justify-content: space-between; }
  .tid-meter { align-items: flex-start; }
  .tid .day-strip { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .tid-aside { overflow: visible; }
}
.cmd-chips { flex: 1 1 auto; min-width: 0; overflow: hidden; display: flex; gap: 6px; align-items: center; }
.cmd-toast { flex: 0 1 auto; max-width: 55%; white-space: nowrap; }

@media (max-width: 767px) { .ov-toast { display: none; } }

/* ── Fakturering · Plan ───────────────────────────────────────── */
.plan-sum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 16px; align-items: center; }
.plan-actions { display: flex; gap: 6px; }
.plan-actions form { margin: 0; }
.plan-form { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 0; }
.plan-form .select { width: auto; max-width: 260px; }
.plan-form .input[name="value"], .plan-form .input[name="amount"] { width: 110px; }
.plan-form .input[name="months"] { width: 70px; }
.plan-form .input[name="text"] { flex: 1 1 220px; width: auto; }
.plan-new { padding: 10px 12px; border-top: 1px solid var(--line-soft); }
.plan-split { padding: 0 12px 12px; }
.plan-split > summary { cursor: pointer; padding: 4px 0 8px; }
.plan-edit-row td { background: #FCFCFC; }
.plan-flag { border: 1px solid #F1E3BC; background: #FFFBF0; border-radius: var(--radius-card); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
@media (max-width: 1100px) { .plan-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); } .plan-actions { grid-column: 1 / -1; } }
@media (max-width: 767px) {
  .plan-sum { grid-template-columns: 1fr 1fr; }
  .plan-actions { flex-direction: column; align-items: stretch; }
  .plan-form { flex-direction: column; align-items: stretch; }
  .plan-form .select, .plan-form .input { width: 100% !important; max-width: none; }
}
.sw-cost { width: 14px; border-top: 2px solid var(--red); display: inline-block; }
.cmd-plan { display: flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 6px 8px; background: #FAFAFA; border-radius: var(--radius); }
.cmd-plan .hint { margin-left: auto; }

/* ── Steg 6: övriga sidor med samma ramar och täthet ──────────── */
/* Nyckeltal i en rad (samma kort som Översikt). */
.kpis, .tiles { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-columns: none; gap: 10px; }
.kpi { border-radius: var(--radius-card); padding: 10px 14px; gap: 2px; justify-content: center; min-width: 0; }
.kpi .label, .tiles .label { font-size: 11px; color: var(--text-2); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi .big { font-size: 21px; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi .sub { font-size: 11.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-foot { font-size: 11.5px; margin-top: -4px; }
.card-head { padding: 10px 14px 8px; }
.card-head .small { font-size: 11px; }
.page-head { gap: 10px 20px; align-items: center; }
.eyebrow { font-size: 12.5px; }
.stack { gap: var(--gap); }
.grid-2 { gap: var(--gap); }
.split { gap: var(--gap); }
.section-head h2 { font-size: 17px; }
.check-row, .sync-row, .ov-row { padding: 7px 0; font-size: 13px; }
.basis-row { padding: 9px 14px; font-size: 13px; }
.basis-body { padding: 4px 14px 14px; }
.line { padding: 7px 0; font-size: 13px; }
.board-col { min-height: 0; }
.empty-line { font-size: 12.5px; color: var(--text-2); padding: 8px 14px; margin: 0; }
/* Simulerat idag: liten etikett i hörnet i stället för en rad som tar plats. */
.demo-today { position: fixed; right: 12px; bottom: 10px; z-index: 70; margin: 0; padding: 2px 8px; font-size: 11px; background: var(--white); opacity: .85; pointer-events: none; }
@media (max-width: 1100px) {
  .kpis, .tiles { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .kpis, .tiles { grid-template-columns: 1fr 1fr; }
  .demo-today { bottom: 110px; }
}
/* Projekttavla: tätare kort, klara kort fälls ihop efter tre */
.board { gap: 10px; }
.board-col { padding: 8px; gap: 6px; }
.board-col h3 { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.task { padding: 7px 9px; gap: 4px; font-size: 13px; border-radius: var(--radius-card); }
.task-actions button { height: 26px; padding: 0 8px; font-size: 12px; }
.task-actions { gap: 4px; }
.task .small { font-size: 11.5px; }
.board-more > summary { cursor: pointer; padding: 2px 4px; }
.board-more[open] { display: flex; flex-direction: column; gap: 6px; }
.head-tools .lbl { margin-right: -2px; }
.filter-row.card-pad { padding: 8px 10px; }
.filter-row .select { flex: 0 1 200px; }
.filter-row .input[type="search"] { flex: 1 1 240px; }
.row-name { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; }
.row-name .row-link { white-space: nowrap; }
.dl { font-size: 13px; gap: 4px 14px; }
.form-grid { gap: 8px; }
/* Inställningar: flikar på en rad och korten i två kolumner */
.settings-tabs { flex-wrap: wrap; align-self: flex-start; max-width: 100%; }
.settings-tabs a { height: 30px; padding: 0 12px; font-size: 12.5px; }
.settings-tabs a + a { border-left: 1px solid #E6E6E6; }
@media (min-width: 1200px) {
  .settings-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); align-items: start; }
  .settings-body > form, .settings-body > div:not(.card), .settings-body > :has(.table), .settings-body > .flash { grid-column: 1 / -1; }
  .settings-body > form.stack { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .settings-body > form.stack > div:last-child { grid-column: 1 / -1; }
  .settings-body .card[style*="max-width"] { max-width: none !important; }
}
.settings-body { display: flex; flex-direction: column; gap: var(--gap); }
@media (min-width: 1200px) { .settings-body { display: grid; } }
.block-h { font-size: 17px; }
@media (min-width: 768px) { .check { min-height: 32px; } .reason-row { gap: 8px; } }

/* Månadsdiagrammet: intäktsstapeln och kostnaden (röd, ca 30 % bredd) bredvid varandra */
.mchart-col { flex-direction: row; align-items: flex-end; justify-content: center; gap: 2px; }
.mchart-col > .rev { position: relative; width: 52%; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
.mchart-col > .rev > span { display: block; width: 100%; }
.mchart-col > .rev > .plan { position: absolute; bottom: 0; left: 0; right: 0; width: auto; }
.mchart-col > .cost { display: block; width: 30%; background: #D24433; border-radius: 2px 2px 0 0; }