/* =============================================
   STATIK v3 — Clean Interface
   Based on statik_ui_concept.html
   ============================================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ─── TOKENS ─────────────────────────────────── */
/* Vebit dark — recessed-card look:
   bg is the LIGHTER mid-navy; cards (panel) RECEDE into deeper navy
   below; inner cells/lifts step back up toward bg. The rail uses an
   even darker tier so it grounds the whole shell. */
:root {
  --bg:      #131C2E;   /* main content area — medium navy */
  --panel:   #0B1320;   /* card surface — deepest navy, recedes below bg */
  --s2:      #1A2436;   /* cell bg inside cards — back up toward bg */
  --lift:    #22304A;   /* hover / active surface */
  --rail-bg: #0A111E;   /* sidebar — darkest tier, grounds the shell */
  --border:  rgba(255,255,255,0.06);
  --border2: rgba(255,255,255,0.11);
  --border3: rgba(255,255,255,0.20);
  --text:    #F8FAFC;
  --sub:     #94A3B8;
  --muted:   #5F6B82;

  /* Primary token historically named --red — kept as identifier
     for JS compat, but now points at the Vebit teal so the whole
     app re-skins automatically wherever --red was used as an accent. */
  --red:      #14B8A6;
  --red-dim:  rgba(20,184,166,0.12);
  --red-mid:  rgba(20,184,166,0.28);

  /* Semantic colours */
  --green:   #22c55e;
  --amber:   #f59e0b;
  --blue:    #3b82f6;
  --purple:  #a855f7;
  --teal:    #14B8A6;
  --teal-2:  #2DD4BF;
  --teal-soft: rgba(20,184,166,0.12);
  --accent:  #14B8A6;
  --accent-2:#2DD4BF;

  /* Task type colours (used in JS) */
  --work:     #3b82f6;
  --material: #14b8a6;
  --extra:    #a855f7;
  --waiting:  #f59e0b;
  --approve:  #e8192c;

  /* Aliases for backward compat */
  --card: #0B1320;
  --bg2:  #0A111C;

  /* Layout */
  --sidebar-w: 210px;
  --r:    7px;
  --r-md: 9px;
  --r-lg: 12px;
  --r-xl: 16px;

  --font:      'Inter', system-ui, -apple-system, sans-serif;
  --font-cond: 'Inter', system-ui, -apple-system, sans-serif;
  --shadow:    0 2px 14px rgba(0,0,0,0.5);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.7);
  --card-border: 1px solid var(--border);
  --card-bg: var(--panel);
}

/* 3.0.27 — Payday-style grayscale dark (sami grá-tónn og Payday notar en
   við erum með okkar eigin accent svo við erum ekki að copy-a þá beint).
   Slidari snap-ar dark-navy → dark-gray → light. */
[data-theme="dark-gray"] {
  --bg:      #1e1e1e;
  --panel:   #232323;
  --s2:      #2c2c2c;
  --lift:    #3a3a3a;
  --rail-bg: #181818;
  --border:  rgba(255,255,255,0.07);
  --border2: rgba(255,255,255,0.12);
  --border3: rgba(255,255,255,0.22);
  --text:    #E9ECEF;
  --sub:     #9CA3AF;
  --muted:   #6B7280;
  --card:    #232323;
  --bg2:     #1a1a1a;
}

/* 3.0.28 — mið-ljóst (dim light): mýkri grá fyrir dagsbirtu án að vera
   blindandi hvítt. Sit milli dark-gray og light í slidernum. */
[data-theme="mid-light"] {
  --bg:      #DDE3EA;     /* cool soft gray — ekki hvítt */
  --panel:   #E8ECF1;     /* card surface, aðeins ljósara */
  --s2:      #D5DCE3;     /* cell bg inside cards */
  --lift:    #C8D0D9;
  --rail-bg: #E1E6EC;
  --border:  rgba(31,41,55,0.10);
  --border2: rgba(31,41,55,0.16);
  --border3: rgba(31,41,55,0.24);
  --text:    #1F2937;     /* dark gray (ekki pure black) */
  --sub:     #4B5563;
  --muted:   #6B7280;
  --card:    #E8ECF1;
  --bg2:     #D5DCE3;
  --shadow:    0 1px 3px rgba(31,41,55,0.08), 0 4px 14px rgba(31,41,55,0.06);
  --shadow-lg: 0 8px 32px rgba(31,41,55,0.14);
  --card-border: 1px solid rgba(31,41,55,0.10);
  --card-bg: #E8ECF1;
}

/* Vebit light — clean white + deep navy text + same teal accents. */
[data-theme="light"] {
  --bg:      #F8FAFC;     /* main content area — slightly off-white */
  --panel:   #FFFFFF;     /* cards stand out as pure white */
  --s2:      #F1F5F9;     /* cell bg inside cards */
  --lift:    #E2E8F0;
  --rail-bg: #FFFFFF;
  --border:  rgba(11,19,32,0.08);
  --border2: rgba(11,19,32,0.14);
  --border3: rgba(11,19,32,0.22);
  --text:    #0B1320;
  --sub:     #475569;
  --muted:   #94A3B8;
  --card:    #F9FAFB;
  --bg2:     #F1F5F9;
  /* Teal accent (was --red here too) */
  --red:     #14B8A6;
  --red-dim: rgba(20,184,166,0.10);
  --red-mid: rgba(20,184,166,0.22);
  --shadow:    0 1px 3px rgba(11,19,32,0.06), 0 4px 14px rgba(11,19,32,0.05);
  --shadow-lg: 0 8px 32px rgba(11,19,32,0.12);
  --card-border: 1px solid rgba(11,19,32,0.08);
  --card-bg: #F9FAFB;
}
/* 3.0.27 — Accent picker. Engin græn (Payday-litur). Sex options sem
   override-a --accent + tengdar token-ar svo allt re-skin-ast (linkar,
   primary takkar, fókus rammar, --red sem sögulega var notað sem accent). */
[data-accent="teal"]   { --accent:#14B8A6; --accent-2:#2DD4BF; --red:#14B8A6; --red-dim:rgba(20,184,166,0.12); --red-mid:rgba(20,184,166,0.28); }
[data-accent="blue"]   { --accent:#3B82F6; --accent-2:#60A5FA; --red:#3B82F6; --red-dim:rgba(59,130,246,0.12); --red-mid:rgba(59,130,246,0.28); }
[data-accent="purple"] { --accent:#8B5CF6; --accent-2:#A78BFA; --red:#8B5CF6; --red-dim:rgba(139,92,246,0.12); --red-mid:rgba(139,92,246,0.28); }
[data-accent="amber"]  { --accent:#F59E0B; --accent-2:#FBBF24; --red:#F59E0B; --red-dim:rgba(245,158,11,0.12); --red-mid:rgba(245,158,11,0.28); }
[data-accent="coral"]  { --accent:#F97066; --accent-2:#FDA29B; --red:#F97066; --red-dim:rgba(249,112,102,0.12); --red-mid:rgba(249,112,102,0.28); }
[data-accent="cyan"]   { --accent:#06B6D4; --accent-2:#22D3EE; --red:#06B6D4; --red-dim:rgba(6,182,212,0.12); --red-mid:rgba(6,182,212,0.28); }

/* ── Borders toggle (independent of color theme) ── */
[data-borders="off"] {
  --card-border: none !important;
  --card-bg: transparent !important;
}
/* Extend borderless to ALL common content containers across all pages */
[data-borders="off"] .card,
[data-borders="off"] .manualEntry,
[data-borders="off"] .periodCard,
[data-borders="off"] .kpi,
[data-borders="off"] .kpiTile,
[data-borders="off"] .mediaStripCard {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}
[data-borders="off"] .tw { border-bottom: none !important; }
[data-borders="off"] .dashKpiChip { border-right: none !important; border-left: none !important; }
[data-borders="off"] .dashStatRow,
[data-borders="off"] .dashLeaderRow,
[data-borders="off"] .dashToggleRow { border-bottom: none !important; }
[data-borders="off"] .dashCard { box-shadow: none !important; }
[data-borders="off"] .filterRow { border-bottom: none !important; }
[data-borders="off"] .projHero { border-bottom: none !important; }
[data-borders="off"] .projMediaCard { border: none !important; background: transparent !important; }
/* Keep modal panels, rails, and form inputs visually intact */
[data-borders="off"] .panel header,
[data-borders="off"] .panel footer { border-color: var(--border) !important; }

/* ─── RESET ──────────────────────────────────── */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow-x: hidden; }
body { overflow-x: hidden; max-width: 100vw; }
html, body { height: 100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: var(--font); cursor: pointer; }
* { scrollbar-width: thin; scrollbar-color: var(--border2) transparent; }
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 99px; }

/* ─── SIDEBAR ────────────────────────────────── */
.rail {
  display: none;
  position: fixed;
  left: 0; top: 0; bottom: 0;
  width: var(--sidebar-w);
  background: var(--rail-bg);
  border-right: 1px solid var(--border);
  flex-direction: column;
  z-index: 100;
  overflow: hidden;
}
@media(min-width:768px) { .rail { display: flex; } }

.rail-header {
  display: flex; align-items: center; justify-content: center;
  padding: 28px 14px 24px;
  flex-shrink: 0;
}
.rail-logo-link { display: flex; align-items: center; text-decoration: none; width: 100%; justify-content: center; }
.railVebitLogo {
  height: 96px; width: auto; max-width: 100%;
  object-fit: contain; display: block;
  filter: drop-shadow(0 4px 16px rgba(20,184,166,0.35));
}
[data-theme="light"] .railVebitLogo {
  content: url('../assets/vebit_horizontal_light.svg');
  filter: none;
}
/* Legacy class kept for any non-rail surfaces that still use it. */
.statikLogoImg { height: 20px; width: auto; object-fit: contain; display: block; }
[data-theme="light"] .statikLogoImg { content: url('../assets/logo-light.png?v=2'); }
/* Mobile-header Vebit logo (uses the same class as legacy Statik logo but
   needs to be the SVG and a touch larger so it reads at glance). */
.mobileVebitLogo { height: 42px !important; }
[data-theme="light"] .mobileVebitLogo { content: url('../assets/vebit_horizontal_light.svg'); }

/* BETA badge */
.betaBadge {
  display: inline-flex; align-items: center;
  background: var(--amber); color: #000;
  font-size: 9px; font-weight: 900;
  letter-spacing: 0.6px; border-radius: 4px;
  padding: 2px 5px; line-height: 1.4;
  flex-shrink: 0; white-space: nowrap;
}
/* Larger badge used in mobile header */
.betaBadgeLg {
  display: inline-flex; align-items: center;
  background: var(--amber); color: #000;
  font-size: 11px; font-weight: 900;
  letter-spacing: 0.8px; border-radius: 5px;
  padding: 3px 8px; line-height: 1.4;
  flex-shrink: 0; white-space: nowrap;
}

.rail-nav {
  flex: 1;
  padding: 8px 7px;
  overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column; gap: 1px;
}
.rail-section {
  font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px;
  color: var(--muted);
  padding: 10px 8px 3px;
}

.r-btn {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 7px 9px;
  border-radius: var(--r);
  font-size: 13px; font-weight: 500;
  color: var(--sub);
  transition: all 0.1s;
  text-decoration: none;
  border: none; background: transparent;
  cursor: pointer; text-align: left;
  white-space: nowrap;
}
.r-btn:hover { background: var(--s2); color: var(--text); }
.r-btn.on, .r-btn.active {
  background: var(--red-dim);
  color: var(--red);
  font-weight: 600;
}
.r-btn svg {
  width: 14px; height: 14px;
  stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  pointer-events: none; flex-shrink: 0;
}
.r-btn-badge {
  margin-left: auto;
  background: var(--red); color: #fff;
  font-size: 10px; font-weight: 700;
  padding: 1px 6px; border-radius: 99px;
}

.rail-sep {
  height: 1px; background: var(--border);
  margin: 4px 9px; flex-shrink: 0;
}
.rail-bot {
  padding: 10px 12px 14px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  display: flex; flex-direction: column; gap: 10px;
}
/* Subscription card — "Pakkinn þinn / Pro" with teal accent line + CTA */
.railSubCard {
  display: block; text-decoration: none;
  background: var(--panel);
  border: 1px solid var(--border2);
  border-radius: 12px;
  padding: 12px 14px;
  position: relative;
  overflow: hidden;
  transition: border-color .15s, transform .12s;
}
.railSubCard::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}
.railSubCard:hover { border-color: rgba(20,184,166,0.45); transform: translateY(-1px); }
.railSubCard__top {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px;
  color: var(--muted); margin-bottom: 2px;
}
.railSubCard__plan {
  font-size: 18px; font-weight: 900; color: var(--text);
  line-height: 1.1; letter-spacing: -.3px;
}
.railSubCard__exp { font-size: 10px; color: var(--sub); margin-top: 4px; }
.railSubCard__cta {
  display: inline-block; margin-top: 9px;
  font-size: 11px; font-weight: 700; color: var(--accent);
  border: 1px solid rgba(20,184,166,0.35);
  padding: 4px 10px; border-radius: 6px;
}

/* User card — avatar + name/role + chev (click → sign-out for now) */
.railUserCard {
  display: flex; align-items: center; gap: 9px;
  width: 100%; padding: 7px 9px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer; text-align: left;
  transition: background .12s, border-color .12s;
  font-family: var(--font);
}
.railUserCard:hover { background: var(--s2); border-color: var(--border2); }
.railUserCard__text { flex: 1; min-width: 0; }
.rail-avatar-circle {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  flex-shrink: 0;
}
.rail-user-name {
  font-size: 13px; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rail-user-role { font-size: 10px; color: var(--muted); margin-top: 1px; }
.railUserCard__chev { color: var(--muted); flex-shrink: 0; }
.railUserCard:hover .railUserCard__chev { color: var(--text); }

/* ─── LAYOUT ─────────────────────────────────── */
.container {
  max-width: 820px;
  padding: 18px 14px 88px;
}
@media(min-width:768px) {
  .container {
    margin-left: var(--sidebar-w);
    padding: 22px 26px 40px;
    /* No max-width cap on desktop — content fills the screen on wide
     * monitors (4K, ultrawide). Calendar already did this via .calWrap;
     * extending to all pages so Bókhald / Yfirlit / Time / Vöruskrá / Plan
     * get the same breathing room. */
    max-width: none;
  }
}

/* ─── DESKTOP TOPBAR ─────────────────────────── */
.dTopbar {
  display: none;
  position: sticky; top: 0; z-index: 50;
  min-height: 68px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: 14px 28px;
  align-items: center; gap: 16px;
  margin-left: var(--sidebar-w);
}
@media(min-width:768px) { .dTopbar { display: flex; } }
.dTopTitle { flex-shrink: 0; }
.dTopTitle h1 {
  font-size: 22px; font-weight: 900; letter-spacing: -.3px;
  color: var(--text); line-height: 1.15; margin: 0;
}
.dTopActions {
  display: inline-flex; align-items: center; gap: 8px;
  flex-shrink: 0;
}
.dTopIconBtn {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--lift);
  border: 1px solid var(--border2);
  border-radius: 10px;
  cursor: pointer; padding: 0;
  color: var(--text); text-decoration: none;
  position: relative;
  transition: background-color .12s, border-color .12s, transform .1s;
}
.dTopIconBtn:hover {
  background: rgba(20,184,166,0.18);
  border-color: rgba(20,184,166,0.45);
  transform: translateY(-1px);
}
.dTopIconBtn svg { stroke: currentColor; fill: none; }
.dTopIconBtn__dot {
  position: absolute; top: 6px; right: 6px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg);
}
/* Desktop topbar language flag — sits next to search box.
   Bumped contrast (lift bg + border3) so it doesn't disappear into
   the dark navy topbar. Hover bumps to teal-tinted bg. */
.dTopLangBtn {
  background: var(--lift);
  border: 1px solid var(--border3);
  border-radius: 99px;
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  margin-left: 8px;
  color: var(--text);
  transition: background-color .12s, border-color .12s, transform .1s;
}
.dTopLangBtn:hover {
  background: rgba(20,184,166,0.18);
  border-color: rgba(20,184,166,0.45);
  transform: translateY(-1px);
}
.dTopLangBtn svg { stroke: var(--text); fill: none; }
/* Shared language-picker popup (used by mobile + desktop) */
.langPickerMenu {
  z-index: 1000;
  background: var(--panel);
  border: 1px solid var(--border2);
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
  padding: 6px;
  min-width: 160px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.langPickerItem {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 0;
  background: transparent;
  color: var(--text);
  border-radius: 10px;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
}
.langPickerItem:hover { background: var(--lift); }
.langPickerItem.active { background: var(--lift); font-weight: 800; }
.langPickerFlag { font-size: 18px; }
.langPickerLabel { flex: 1; }
.langPickerCheck { color: var(--red, #ef4444); font-weight: 900; }
.dTopSearchBox {
  display: flex; align-items: center; gap: 9px;
  background: var(--panel); border: 1px solid var(--border2);
  border-radius: 10px; padding: 10px 14px;
  width: 340px; max-width: 40vw;
  margin-left: auto;
  transition: border-color .12s;
  position: relative;
}
.dTopSearchBox:focus-within { border-color: rgba(20,184,166,0.45); }
.dTopSearchBox svg {
  width: 13px; height: 13px; stroke: var(--muted); fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0;
}
.dTopSearchBox input {
  border: none; background: transparent; color: var(--text);
  font-family: var(--font); font-size: 13px; outline: none; width: 100%;
}
.dTopSearchBox input::placeholder { color: var(--muted); }

/* ─── MOBILE HEADER ──────────────────────────── */
.header {
  position: sticky; top: 0; z-index: 90;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
@media(min-width:768px) { .header { display: none; } }

.headerInner {
  padding: 0 14px;
  height: 60px;
  display: flex; align-items: center; gap: 10px;
}

.logoLink { display: flex; align-items: center; gap: 7px; text-decoration: none; color: var(--text); }
.logoLink .statikLogoImg { height: 22px; }
.logoLink .mobileVebitLogo { height: 44px; }
.brand { display: flex; align-items: center; }

/* Icon button */
.ib {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r); border: 1px solid var(--border2);
  background: var(--lift);
  color: var(--text); cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  flex-shrink: 0;
}
.ib:hover { background: rgba(20,184,166,0.18); border-color: rgba(20,184,166,0.45); color: var(--text); }
.ib svg {
  width: 17px; height: 17px;
  stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* Legacy nav (hidden, kept for event wiring) */
.nav { display: none !important; }
#navToggle { display: none !important; }
.navRight { display: flex; align-items: center; gap: 6px; }
.navBadge {
  display: inline-block; background: var(--red); color: #fff;
  font-size: 9px; font-weight: 800; border-radius: 99px;
  min-width: 15px; height: 15px; line-height: 15px;
  text-align: center; padding: 0 3px; margin-left: 4px;
  vertical-align: middle;
}
.navSearch { position: relative; }
.navSearch input {
  width: 160px; padding: 6px 12px;
  border-radius: var(--r); border: 1px solid var(--border2);
  background: var(--panel); color: var(--text);
  font-size: 13px; outline: none;
}
.navSearch input::placeholder { color: var(--muted); }

/* ─── BOTTOM NAV ─────────────────────────────── */
/* Hidden 2026-05-09 — moved nav links into FAB speed-dial. Saves vertical space.
   Home is reachable via the Statik logo top-left. */
.bottomNav { display: none !important; }
.bottomNav a {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; gap: 2px;
  padding: 4px 2px;
  color: var(--muted); font-size: 9px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
  transition: color 0.1s; min-width: 0;
  border: none; background: transparent; cursor: pointer;
}
.bottomNav a.active, .bottomNav a:hover { color: var(--red); }
.bnSvg {
  width: 20px; height: 20px;
  stroke: currentColor; fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

/* ─── FAB ────────────────────────────────────── */
.fab {
  display: none;
  position: fixed; bottom: 68px; right: 16px;
  width: 48px; height: 48px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); border-radius: 50%; border: none;
  color: #fff; cursor: pointer; z-index: 99;
  align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(20,184,166,0.45);
}
@media(max-width:767px) { .fab { display: flex; } }
.fab svg {
  width: 20px; height: 20px; stroke: currentColor; fill: none;
  stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
}

/* ─── SPEED DIAL FAB ─────────────────────────── */
/* No bottom nav anymore (hidden 2026-05-09) — FAB sits closer to bottom edge. */
.speedDial {
  position: fixed; bottom: max(20px, env(safe-area-inset-bottom)); right: 14px;
  z-index: 200; display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 8px;
}
/* Hide the FAB while a task popup is open — it sat above the panel and
   covered the Status dropdown in the bottom-right corner. */
body:has(.taskDetailPanel.open) .speedDial { display: none !important; }
/* Same problem for any open .modal (Upload, New Task, Edit Task, etc.) —
   FAB has z-index:200 just like .modal, and being later in DOM order it
   wins, eating taps on the bottom-sheet's controls (project select,
   Submit button). On mobile this manifests as "can't select project /
   can't upload anything". Hide it whenever any modal is open. */
body:has(.modal.open) .speedDial { display: none !important; }
@media(min-width:768px){ .speedDial { bottom: 20px; } }
.speedDialMain {
  width: 54px; height: 54px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); border: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 0 0 4px rgba(0,0,0,.25), 0 8px 28px rgba(20,184,166,0.55);
  transition: transform .2s, box-shadow .2s; color: #fff;
}
.speedDialMain:hover { box-shadow: 0 0 0 4px rgba(0,0,0,.25), 0 12px 36px rgba(20,184,166,0.75); }
.speedDialMain:hover { transform: scale(1.06); }
.speedDialMain.open { transform: rotate(45deg); }
.speedDialMain svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.speedDialItems {
  display: flex; flex-direction: column; gap: 6px;
  overflow: hidden; max-height: 0;
  transition: max-height .25s ease, opacity .2s;
  opacity: 0; pointer-events: none;
}
.speedDialItems.open { max-height: 400px; opacity: 1; pointer-events: auto; }
.speedDialItem {
  display: flex; align-items: center; gap: 10px;
  cursor: pointer; justify-content: flex-end;
}
.speedDialItemLabel {
  background: var(--panel); border: 1px solid var(--border2);
  border-radius: var(--r); padding: 5px 11px;
  font-size: 12px; font-weight: 700; color: var(--text);
  white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.speedDialItemBtn {
  width: 38px; height: 38px;
  border-radius: 50%; border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(0,0,0,.3);
  color: #fff; font-size: 18px;
}
.speedDialItemBtn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* Section header inside the speed-dial (Navigate / Add new) */
.speedDialSection {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--muted);
  text-align: right;
  padding: 6px 4px 2px;
  align-self: stretch;
}
/* Subtle divider between sections */
.speedDialDivider {
  height: 1px;
  background: var(--border);
  margin: 4px 0 0 auto;
  width: 60%;
}

/* Hide FAB when a panel/modal is open on mobile */
.no-fab #_speedDial { display: none !important; }

/* Trim the previous 80px FAB-clear padding — user reported large dead
   space under Mark done / Open full. 20px keeps the buttons clear of
   the FAB without leaving a visible empty block. */
@media(max-width:767px){
  .te.open { padding-bottom: 20px; }
}

/* ─── TYPOGRAPHY ─────────────────────────────── */
.h1 {
  display: flex; align-items: center;
  justify-content: space-between;
  gap: 12px; margin: 0 0 16px; flex-wrap: wrap;
}
.h1 h1 { font-size: 20px; font-weight: 800; letter-spacing: -0.3px; }
.sub { font-size: 13px; color: var(--sub); line-height: 1.5; }
.pageTitle { font-size: clamp(18px,4vw,24px); font-weight: 900; letter-spacing: -0.5px; }

/* Section head */
.sh {
  display: flex; align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.sh h2 {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.8px; color: var(--sub);
}

/* ─── STATS STRIP ────────────────────────────── */
.stats {
  display: flex;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  margin-bottom: 18px;
}
.stats-item {
  flex: 1; padding: 11px 6px; text-align: center;
  border-right: 1px solid var(--border);
  cursor: pointer; transition: background 0.1s;
}
.stats-item:last-child { border-right: none; }
.stats-item:hover { background: var(--s2); }
.stats-num { font-size: 22px; font-weight: 800; line-height: 1; }
.stats-label {
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.4px; color: var(--sub); margin-top: 3px;
}

/* KPI grid (alternative to stats strip) */
.kpiGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px,1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r); overflow: hidden;
  margin-bottom: 18px;
}
.kpiTile { background: var(--panel); padding: 12px 14px; }
.kpiTile .kpiVal { font-size: 22px; font-weight: 800; line-height: 1; }
.kpiTile .kpiLabel {
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--sub); margin-top: 3px;
}

/* ─── TASK GROUPS ────────────────────────────── */
.pg, .taskGroup { margin-bottom: 20px; }

.pgh, .taskGroupHead {
  display: flex; align-items: center;
  padding: 0 0 8px;
  border-bottom: 1px solid var(--border);
}
.pn, .taskGroupName { font-size: 13px; font-weight: 700; flex: 1; }
.pc, .taskGroupCount { font-size: 11px; font-weight: 700; color: var(--muted); }

/* ─── TASK ROWS (inline expand) ──────────────── */
.tw { border-bottom: 1px solid var(--border); }
.tw:last-child { border-bottom: none; }

.tr {
  display: flex; align-items: center;
  padding: 9px 0; gap: 10px;
  cursor: pointer;
  border-radius: var(--r);
  transition: background 0.1s;
}
.tr:hover, .tr.open {
  background: var(--s2);
  margin: 0 -8px; padding: 9px 8px;
}
.tl {
  width: 3px; height: 24px;
  border-radius: 2px; flex-shrink: 0;
}
.tt {
  flex: 1; font-size: 14px; font-weight: 500;
  min-width: 0; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.tbadges { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }

/* Expand panel */
.te { max-height: 0; overflow: hidden; transition: max-height 0.28s ease; }
.te.open { max-height: 600px; }
.ei { padding: 10px 0 14px 11px; }

/* Expand actions */
.eactions { display: flex; align-items: center; gap: 6px; padding-top: 6px; }
.xb {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600;
  padding: 5px 10px; border-radius: var(--r);
  border: 1px solid var(--border2); background: var(--panel);
  color: var(--sub); cursor: pointer; font-family: var(--font);
  transition: all 0.1s;
}
.xb:hover { background: var(--lift); color: var(--text); }
.xb.done { background: rgba(34,197,94,0.1); border-color: rgba(34,197,94,0.2); color: var(--green); }
.xb svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.xopen {
  margin-left: auto; font-size: 11px; font-weight: 700;
  color: var(--muted); padding: 5px 0; border: none; background: transparent;
  cursor: pointer; font-family: var(--font); transition: color 0.1s;
}
.xopen:hover { color: var(--text); }

/* Inline comment box */
.ecomments { border-top: 1px solid var(--border); padding-top: 10px; margin-bottom: 10px; }
.echead { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); margin-bottom: 8px; }
.ecomment { display: flex; gap: 8px; margin-bottom: 8px; align-items: flex-start; }
.ecava {
  width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; color: #fff;
  flex-shrink: 0; margin-top: 1px; background: var(--blue);
}
.ecbody { flex: 1; min-width: 0; }
.ecwho { font-size: 12px; font-weight: 700; margin-right: 5px; }
.ectext { font-size: 12px; color: var(--sub); }
.ectime { font-size: 10px; color: var(--muted); margin-left: 4px; }
.ecinput { display: flex; gap: 6px; align-items: center; margin-top: 8px; }
.ecinput input {
  flex: 1; background: transparent; border: none;
  border-bottom: 1px solid var(--border2);
  padding: 6px 0; color: var(--text); font-family: var(--font);
  font-size: 13px; outline: none; transition: border-color 0.1s;
}
.ecinput input:focus { border-bottom-color: var(--red); }
.ecinput input::placeholder { color: var(--muted); }
.ecsend {
  width: 28px; height: 28px;
  background: var(--red); border: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
}
.ecsend svg { width: 13px; height: 13px; stroke: #fff; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

/* Status row in expand */
.statusRow { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 10px; align-items: center; }
.statusRow > span { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; color: var(--muted); margin-right: 2px; }
.stPill {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.3px; padding: 3px 9px; border-radius: 99px;
  border: none; cursor: pointer; font-family: var(--font);
  transition: all 0.1s; background: var(--s2); color: var(--sub);
}
.stPill:hover { background: var(--lift); }
.stPill.sel-work { background: rgba(59,130,246,0.15); color: #3b82f6; }
.stPill.sel-prog { background: rgba(34,197,94,0.15); color: #22c55e; }
.stPill.sel-wait { background: rgba(245,158,11,0.15); color: #f59e0b; }
.stPill.sel-done { background: rgba(34,197,94,0.15); color: #22c55e; }

.edesc { font-size: 13px; color: var(--sub); line-height: 1.55; margin-bottom: 10px; }
.ephotos { display: flex; gap: 4px; margin-bottom: 10px; }
.ephoto {
  width: 64px; height: 64px; background: var(--lift);
  border-radius: var(--r); display: flex; align-items: center;
  justify-content: center; color: var(--muted); font-size: 20px;
  flex-shrink: 0; overflow: hidden;
}

/* ─── TASK ROW STATES ────────────────────────── */
.tw-done .tr { opacity: 0.55; }
.tt-done { text-decoration: line-through; }
.taskPhotoStrip {
  display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 8px;
}
.taskStripThumb {
  width: 64px; height: 64px; object-fit: cover;
  border-radius: var(--r); cursor: zoom-in;
  border: 1px solid var(--border);
}
.taskGroupCountDone { color: var(--green) !important; }

/* ─── TASK CARDS (legacy grid view) ─────────── */
.taskCard {
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 3px solid transparent;
  border-radius: var(--r);
  padding: 12px 14px;
  cursor: pointer;
  transition: background 0.1s;
}
.taskCard:hover { background: var(--s2); }
.taskCard[data-type="work"]     { border-left-color: var(--work); }
.taskCard[data-type="material"] { border-left-color: var(--material); }
.taskCard[data-type="extra"]    { border-left-color: var(--extra); }
.taskCard[data-type="waiting"]  { border-left-color: var(--waiting); }

/* ─── PROJECT CARDS ──────────────────────────── */
.grid3 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px,1fr));
  gap: 10px;
}
.projectCard {
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--red);
  border-radius: var(--r);
  padding: 14px 16px;
  cursor: pointer;
  transition: background 0.1s;
  display: block;
}
.projectCard:hover { background: var(--s2); }

/* ─── GRID ───────────────────────────────────── */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px,1fr));
  gap: 10px;
}

/* ─── BUTTONS ────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; padding: 7px 14px;
  border-radius: var(--r);
  font-family: var(--font); font-size: 13px; font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border2);
  background: var(--s2); color: var(--text);
  transition: all 0.1s; white-space: nowrap;
}
.btn:hover { background: var(--lift); }
.btn.primary { background: var(--red); border-color: var(--red); color: #fff; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; }
.btn.ghost:hover { background: var(--s2); }
.btn.danger  { background: rgba(232,25,44,0.12); border-color: rgba(232,25,44,0.25); color: var(--red); }
.btn.success { background: rgba(34,197,94,0.12); border-color: rgba(34,197,94,0.25); color: var(--green); }
.btn.success:hover { background: rgba(34,197,94,0.2); }
.btn.small { padding: 5px 10px; font-size: 12px; }

/* ── Live update bubble ──────────────────────────────── */
#liveUpdateBubble {
  position: fixed;
  top: 62px;
  left: 50%;
  transform: translateX(-50%) translateY(-12px);
  z-index: 8500;
  background: var(--red);
  color: #fff;
  padding: 9px 20px;
  border-radius: 99px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(0,0,0,.4);
  opacity: 0;
  transition: opacity .22s ease, transform .22s ease;
  pointer-events: none;
  white-space: nowrap;
  user-select: none;
}
#liveUpdateBubble.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.btn.xs { padding: 3px 8px; font-size: 11px; }
.btn svg {
  width: 14px; height: 14px;
  stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* ─── BADGES & PILLS ─────────────────────────── */
.badge, .p {
  display: inline-flex; align-items: center;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.3px;
  padding: 2px 7px; border-radius: 99px;
  white-space: nowrap;
}
.badge.work,     .p.w   { background: rgba(59,130,246,0.12); color: #3b82f6; }
.badge.material, .p.m   { background: rgba(20,184,166,0.12); color: var(--accent); }
.badge.extra,    .p.tf  { background: rgba(168,85,247,0.12); color: #a855f7; }
.badge.waiting,  .p.wt  { background: rgba(245,158,11,0.13); color: #f59e0b; }
.badge.high,     .p.ap  { background: rgba(232,25,44,0.12);  color: #e8192c; }
.badge.done,     .p.dn  { background: rgba(34,197,94,0.12);  color: #22c55e; }
.badge.inprog,   .p.pg  { background: rgba(34,197,94,0.12);  color: #22c55e; }
.badge.open,     .p.pn  { background: rgba(245,158,11,0.13); color: #f59e0b; }
.badge.nd2,      .p.nd2 { background: rgba(245,158,11,0.13); color: #f59e0b; }
.badge.hd,       .p.hd  { background: rgba(139,146,163,0.1); color: #8b92a3; }

/* Due date chips */
.due { font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 99px; }
.due.today   { background: rgba(245,158,11,0.15);   color: var(--amber); }
.due.overdue { background: rgba(232,25,44,0.12);    color: var(--red); }
.due.soon    { background: rgba(139,146,163,0.10);  color: var(--sub); }

/* New notification dot */
.nd { width: 6px; height: 6px; background: var(--red); border-radius: 50%; flex-shrink: 0; }

/* Status dot */
.statusDot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.statusDot.open   { background: var(--amber); }
.statusDot.inprog { background: var(--blue); }
.statusDot.done   { background: var(--green); }

/* ─── FORMS ──────────────────────────────────── */
.form { display: flex; flex-direction: column; gap: 12px; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field label {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px; color: var(--sub);
}
.field input, .field select, .field textarea {
  background: var(--s2);
  border: 1px solid var(--border2);
  border-radius: var(--r);
  padding: 8px 10px;
  color: var(--text);
  font-family: var(--font); font-size: 14px;
  outline: none; width: 100%;
  transition: border-color 0.1s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--red);
}
.field input::placeholder, .field textarea::placeholder { color: var(--muted); }
.field textarea { resize: vertical; min-height: 80px; line-height: 1.5; }
.field select {
  appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%238890a6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center; padding-right: 26px;
}
.field input[type=file] { padding: 6px 10px; color: var(--sub); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media(max-width:500px) { .split { grid-template-columns: 1fr; } }
.checkRow { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; font-weight: 500; }
.checkRow input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--red); flex-shrink: 0; }

/* Location chips */
.locChips { display: flex; gap: 6px; flex-wrap: wrap; }
.locChip {
  display: flex; align-items: center; gap: 5px;
  padding: 6px 10px; border-radius: var(--r);
  border: 1px solid var(--border2); background: var(--s2);
  font-size: 12px; font-weight: 600; cursor: pointer;
  transition: all 0.1s;
}
.locChip input[type=radio] { display: none; }
.locChip:has(input:checked) {
  background: var(--red-dim); border-color: var(--red); color: var(--red);
}

/* ─── MODAL ──────────────────────────────────── */
.modal {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.65); z-index: 200;
  align-items: flex-end; justify-content: center;
}
@media(min-width:600px) { .modal { align-items: center; } }
.modal.open { display: flex; }

.panel {
  background: var(--panel);
  border-radius: 16px 16px 0 0;
  width: 100%; max-height: 92dvh;
  overflow-y: auto;
  padding: 0 20px env(safe-area-inset-bottom, 18px);
}
@media(min-width:600px) {
  .panel { border-radius: var(--r-lg); max-width: 500px; max-height: 88dvh; }
}
.panelBody { padding: 14px 0; }
.content { padding: 14px 0; }

.panel header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 0 12px;
  border-bottom: 1px solid var(--border);
  font-size: 15px; font-weight: 700;
  position: sticky; top: 0; background: var(--panel); z-index: 1;
}
.panel footer {
  display: flex; gap: 8px;
  padding: 12px 0 6px;
  border-top: 1px solid var(--border);
  position: sticky; bottom: 0; background: var(--panel); z-index: 1;
}
.panel footer .btn { flex: 1; }

/* Mobile drag handle */
.panel::before {
  content: '';
  display: block;
  width: 32px; height: 3px;
  background: var(--border2); border-radius: 2px;
  margin: 10px auto 0;
}
@media(min-width:600px) { .panel::before { display: none; } }

/* Type selector in modal */
.typerow {
  display: flex; gap: 0;
  background: var(--s2); border-radius: var(--r);
  padding: 3px; margin: 14px 0 16px;
}
.tp {
  flex: 1; padding: 7px 3px; border-radius: 5px;
  font-size: 11px; font-weight: 700; text-align: center;
  cursor: pointer; border: none; font-family: var(--font);
  color: var(--sub); background: transparent; transition: all 0.15s;
}
.tp.sw  { background: rgba(59,130,246,0.2);  color: #3b82f6; }
.tp.sm  { background: rgba(20,184,166,0.2);  color: var(--accent); }
.tp.se  { background: rgba(168,85,247,0.2);  color: #a855f7; }
.tp.swt { background: rgba(245,158,11,0.2);  color: #f59e0b; }

/* ─── CARDS / PANELS ─────────────────────────── */
.card {
  background: var(--card-bg, var(--panel));
  border: var(--card-border, 1px solid var(--border));
  border-radius: var(--r);
}
.card.pad { padding: 14px 16px; }
.card.section { margin-top: 14px; }

/* ─── STAFF CARDS ────────────────────────────── */
/* (legacy .staffCard moved — full new rules live further down) */
.staffAvatar {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #fff;
  background: var(--blue); flex-shrink: 0;
}

/* ─── TOOL CARDS ─────────────────────────────── */
.toolCard {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 12px 14px;
  cursor: pointer; transition: background 0.1s;
}
.toolCard:hover { background: var(--s2); }

/* ─── MEMO / NOTE / RECEIPT CARDS ───────────── */
.memoCard, .noteCard {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 14px 16px;
  cursor: pointer; transition: background 0.1s;
}
.memoCard:hover, .noteCard:hover { background: var(--s2); }

/* ─── ACTIVITY FEED ──────────────────────────── */
.actFeed { display: flex; flex-direction: column; }
.actItem {
  display: flex; gap: 11px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.actItem:last-child { border-bottom: none; }
.actAvatar {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #fff;
  flex-shrink: 0; margin-top: 1px;
}

/* Activity card (legacy) */
.activityCard {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 12px 14px;
  display: flex; gap: 12px; align-items: flex-start;
}

/* ─── TIME ENTRIES ───────────────────────────── */
.timeRow {
  display: flex; align-items: center;
  padding: 10px 14px; gap: 10px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
}
.timeRow:first-child { border-radius: var(--r) var(--r) 0 0; }
.timeRow:last-child { border-bottom: none; border-radius: 0 0 var(--r) var(--r); }

/* ─── SEARCH ─────────────────────────────────── */
.searchResults {
  position: absolute; top: calc(100% + 4px); right: 0;
  width: 260px; background: var(--panel);
  border: 1px solid var(--border2); border-radius: var(--r-md);
  overflow: hidden; box-shadow: var(--shadow-lg); z-index: 200;
}
.searchResults.hidden { display: none; }
.searchResult {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-bottom: 1px solid var(--border);
  cursor: pointer; transition: background 0.1s;
}
.searchResult:last-child { border-bottom: none; }
.searchResult:hover { background: var(--s2); }
.searchType {
  font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--red); min-width: 44px;
}
.searchLabel { font-size: 13px; }

/* ─── FILTER CHIPS ───────────────────────────── */
.frow {
  display: flex; gap: 5px; overflow-x: auto;
  scrollbar-width: none; margin-bottom: 16px; padding-bottom: 2px;
}
.frow::-webkit-scrollbar { display: none; }
.chip {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.3px; padding: 5px 11px; border-radius: 99px;
  cursor: pointer; border: none; font-family: var(--font);
  white-space: nowrap; transition: all 0.1s;
  background: var(--s2); color: var(--sub);
}
.chip:hover { background: var(--lift); color: var(--text); }
.chip.active { background: var(--red-dim); color: var(--red); }

/* ─── LOGIN ──────────────────────────────────── */
.loginWrap {
  min-height: 100dvh; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 24px 16px; background: var(--bg);
}
.loginCard {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 32px 28px; width: 100%; max-width: 380px;
}
.loginSub { font-size: 13px; color: var(--sub); }
.statikLogo { margin: 0 auto 4px; }

/* ─── CALENDAR ───────────────────────────────── */
.calWrap { display: flex; gap: 0; height: calc(100vh - 50px); overflow: hidden; }
@media(min-width:768px) { .calWrap { height: calc(100vh - 52px); margin-left: var(--sidebar-w); } }
.calSidebar {
  width: 240px; flex-shrink: 0;
  background: var(--panel); border-right: 1px solid var(--border);
  overflow-y: auto; padding: 14px;
}
@media(max-width:767px) { .calSidebar { display: none; } }
.calMain { flex: 1; overflow-y: auto; }

/* ─── MANAGEMENT ─────────────────────────────── */
.mgmtShell { display: flex; gap: 0; overflow: hidden; }

/* ─── INSPECTION FORM PICKER ─────────────────── */
#taskInspFormPicker label {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 7px; border-radius: 5px; cursor: pointer;
  font-size: 12px; font-weight: 500;
  transition: background 0.1s;
}
#taskInspFormPicker label:hover { background: var(--s2); }
#taskInspFormPicker input[type=checkbox] { accent-color: var(--red); width: 13px; height: 13px; }

/* ─── RUNTIME ERROR BANNER ───────────────────── */
#runtimeErrorBanner {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 9999;
  display: none; padding: 12px 14px; border-radius: 14px;
  background: rgba(180,40,40,.92); color: #fff;
  border: 1px solid rgba(255,255,255,.25);
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
  font-size: 12px; line-height: 1.4;
}
@media(min-width:768px) { #runtimeErrorBanner { left: calc(var(--sidebar-w) + 12px); } }

/* ─── MISC ───────────────────────────────────── */
section { margin-bottom: 20px; }

/* Mobile activity link */
.mobileActivityBtn {
  display: flex; align-items: center;
  padding: 5px; color: var(--sub);
  border: none; background: none; position: relative;
}

/* Scrollable X on mobile tables */
.tableWrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Skeleton loader */
.skeleton {
  background: linear-gradient(90deg, var(--s2) 25%, var(--lift) 50%, var(--s2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--r);
}
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }

/* ─── UTILITY ────────────────────────────────── */
.desktopOnly { display: none !important; }
@media(min-width:768px) { .desktopOnly { display: flex !important; } }
.hint { font-size: 12px; color: var(--muted); padding: 4px 0; }
.notice { font-size: 13px; color: var(--sub); padding: 10px 0; line-height: 1.5; }

/* ─── EXTRA BADGES ───────────────────────────── */
.badge.warn     { background: rgba(245,158,11,0.13); color: #f59e0b; }
.badge.success  { background: rgba(34,197,94,0.12);  color: #22c55e; }
.badge.norm     { background: rgba(139,146,163,0.10); color: #8b92a3; }
.badge.mat-needed  { background: rgba(245,158,11,0.13); color: #f59e0b; }
.badge.mat-transfer{ background: rgba(20,184,166,0.12); color: var(--accent); }

/* ─── TABS ───────────────────────────────────── */
.tabBar {
  display: flex; gap: 3px;
  background: var(--s2); border-radius: var(--r);
  padding: 3px;
}
.tabBtn {
  flex: 1; padding: 7px 10px; border-radius: 5px;
  font-size: 12px; font-weight: 700; text-align: center;
  cursor: pointer; border: none; font-family: var(--font);
  color: var(--sub); background: transparent; transition: all 0.15s;
}
.tabBtn.active { background: var(--panel); color: var(--text); box-shadow: 0 1px 4px rgba(0,0,0,0.25); }
.tabBtn:hover:not(.active) { color: var(--text); }

/* ─── SECTION TITLE ──────────────────────────── */
.sectionTitle {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.7px;
  color: var(--muted); margin-bottom: 10px;
}

/* ─── QUICK ACTIONS BAR ──────────────────────── */
.quickActionsBar { display: flex; gap: 6px; flex-wrap: wrap; }
.qaBtn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: var(--r);
  font-size: 12px; font-weight: 600;
  background: var(--panel); border: 1px solid var(--border2);
  color: var(--sub); cursor: pointer; font-family: var(--font);
  transition: all 0.1s; text-decoration: none;
}
.qaBtn:hover { background: var(--s2); color: var(--text); }
.qaBtn svg {
  width: 14px; height: 14px; stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0;
}

/* ─── KPI ROW ────────────────────────────────── */
.kpiRow {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  margin-bottom: 18px;
}
@media(max-width:500px) { .kpiRow { grid-template-columns: repeat(3, 1fr); } }
.kpi {
  background: var(--panel);
  padding: 12px 10px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 3px; cursor: pointer;
  border: none;
  border-top: 3px solid transparent;
  font-family: var(--font);
  transition: background 0.1s;
}
.kpi:hover { background: var(--s2); }
.kpi .value { font-size: 26px; font-weight: 800; line-height: 1; }
.kpi .label {
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--sub);
}
.kpi.work     .value { color: var(--work); }
.kpi.material .value { color: var(--material); }
.kpi.extra    .value { color: var(--extra); }
.kpi.waiting  .value { color: var(--waiting); }
.kpi.approval .value { color: var(--red); }

/* ─── DUE THIS WEEK LIST (dashboard) ─────────── */
.dueCalendarStrip { display: flex; flex-direction: column; gap: 0; }
.dueWeekDay {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--r); margin-bottom: 6px; overflow: hidden;
}
.dueWeekDayHdr {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px; background: var(--s2);
  border-bottom: 1px solid var(--border);
}
.dueWeekDayHdr.dueWeekToday { background: var(--red-dim); border-bottom-color: var(--red-mid); }
.dueWeekDayHdr.dueWeekOverdue { background: rgba(232,25,44,0.06); }
.dueWeekDayName { font-size: 12px; font-weight: 800; }
.dueWeekToday .dueWeekDayName { color: var(--red); }
.dueWeekDayDate { font-size: 11px; color: var(--sub); }
.dueWeekCount {
  font-size: 10px; font-weight: 800;
  background: var(--lift); color: var(--sub);
  padding: 1px 7px; border-radius: 99px; margin-left: auto;
}
.dueWeekCountOverdue { background: var(--red-dim); color: var(--red); }
.dueWeekTask {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px 9px 14px;
  border-left: 3px solid transparent;
  border-bottom: 1px solid var(--border);
  text-decoration: none; color: var(--text); transition: background .1s;
}
.dueWeekTask:last-child { border-bottom: none; }
.dueWeekTask:hover { background: var(--s2); }
.dueWeekTaskMain { flex: 1; min-width: 0; }
.dueWeekTaskTitle {
  font-size: 13px; font-weight: 500; display: block;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dueWeekTaskProject {
  font-size: 11px; color: var(--sub); display: block;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px;
}
.dueWeekEmpty { padding: 10px 12px; font-size: 12px; color: var(--muted); font-style: italic; }

/* ─── TIME WHEEL ────────────────────────────── */
.timeWheel {
  display: flex; flex-direction: column; align-items: stretch; gap: 4px;
}
.twDisplay {
  font-size: 32px; font-weight: 900; color: var(--text);
  background: var(--s2); border-radius: var(--r);
  text-align: center; padding: 10px 0; line-height: 1.2;
}
.twBtn {
  width: 100%; padding: 12px 0;
  background: var(--lift); border: 1px solid var(--border2);
  border-radius: var(--r); color: var(--text); font-size: 20px;
  font-weight: 700; cursor: pointer; transition: background .1s;
  font-family: var(--font); line-height: 1;
}
.twBtn:hover { background: var(--s2); }
.twBtn:active { background: var(--border2); }
.fieldLabel {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .6px; color: var(--muted); margin-bottom: 6px;
}
/* Sleek time wheel (new) */
.timeWheelNew { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; }
.twNLabel { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .7px; color: var(--muted); text-align: center; }
.twNInner { display: flex; align-items: center; gap: 4px; }
.twNCol { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.twNBtn {
  width: 52px; height: 34px;
  background: var(--s2); border: 1px solid var(--border2);
  border-radius: var(--r); color: var(--sub);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .1s, color .1s;
}
.twNBtn:hover { background: var(--lift); color: var(--text); }
.twNBtn:active { background: var(--border2); transform: scale(0.96); }
.twNBtn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.twNVal { font-size: 32px; font-weight: 900; min-width: 54px; text-align: center; line-height: 1.2; color: var(--text); padding: 2px 0; }
.twNSep { font-size: 32px; font-weight: 900; color: var(--muted); line-height: 1; padding: 0 2px; margin-bottom: 6px; }

/* Theme picker popup */
.themeMenu {
  position: fixed; bottom: 68px; left: 8px;
  background: var(--panel); border: 1px solid var(--border2);
  border-radius: var(--r-lg); padding: 10px 10px 8px;
  box-shadow: var(--shadow-lg); z-index: 9100;
  min-width: 220px; max-width: 260px;
}
@media(min-width:768px){ .themeMenu { bottom: 56px; left: 10px; } }
.themeMenuSection {
  font-size: 9px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .08em; color: var(--muted); padding: 0 2px 6px;
}
.themeMenuGrid {
  display: grid; grid-template-columns: repeat(9, 1fr); gap: 5px; margin-bottom: 4px;
}
.themeMenuSwatch {
  width: 100%; aspect-ratio: 1; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.12); cursor: pointer;
  background: none; padding: 0; position: relative;
  display: flex; align-items: center; justify-content: center;
  transition: transform .12s, border-color .12s;
}
.themeMenuSwatch:hover { transform: scale(1.15); border-color: rgba(255,255,255,0.4); }
.themeMenuSwatch.active { border-color: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,0.6); }
.themeMenuCheck { font-size: 10px; color: #fff; font-weight: 900; pointer-events: none; }
.themeMenuDivider { height: 1px; background: var(--border); margin: 8px 0; }
.themeMenuBorderRow { display: flex; gap: 6px; }
.themeMenuBorderBtn {
  flex: 1; padding: 7px 6px; border-radius: var(--r);
  border: 1px solid var(--border2); background: var(--lift);
  color: var(--sub); font-size: 12px; font-weight: 600;
  cursor: pointer; font-family: var(--font); transition: all .12s;
}
.themeMenuBorderBtn:hover { background: var(--s2); }
.themeMenuBorderBtn.active { border-color: var(--red); color: var(--text); background: var(--red-dim); }

/* Flat filter row (tasks / other list pages) */
.filterRow { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-bottom: 16px; align-items: flex-end; border-bottom: 1px solid var(--border); padding-bottom: 12px; }
.filterRow .field { flex: 1; min-width: 130px; margin: 0; }
.filterRow .field label { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .7px; color: var(--muted); display: block; margin-bottom: 5px; }
.filterRow .field select,
.filterRow .field input[type="text"],
.filterRow .field input[type="search"] {
  width: 100%; padding: 6px 0; background: transparent;
  border: none; border-bottom: 1.5px solid var(--border2);
  color: var(--text); font-family: var(--font); font-size: 13px; outline: none;
}
.filterRow .field select:focus,
.filterRow .field input:focus { border-bottom-color: var(--red); }

/* ─── NEW DASHBOARD ──────────────────────────── */
.dashHero { padding: 16px 0 10px; }

/* ═══ DASHBOARD redesign 2026-05-10 (linear, welcoming) ═════════════════════ */
.dashHeroCard {
  background: linear-gradient(135deg, rgba(239,68,68,0.06) 0%, rgba(59,130,246,0.06) 100%);
  border: 1px solid var(--border2);
  border-radius: 18px;
  padding: 18px 20px;
  margin-bottom: 14px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
}
.dashHeroLeft { min-width: 0; }
.dashHeroGreet {
  font-size: clamp(20px, 5vw, 28px);
  font-weight: 900; letter-spacing: -.5px;
  margin: 0; line-height: 1.1;
  color: var(--text);
}
.dashHeroDate { font-size: 12px; color: var(--muted); margin: 4px 0 0; font-weight: 600; }
.dashHeroRight { text-align: right; }
.dashHeroClock {
  font-size: clamp(22px, 5vw, 30px);
  font-weight: 900; letter-spacing: -.6px;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.dashHeroWx { font-size: 11px; color: var(--muted); margin-top: 2px; font-weight: 600; }
.dashLangSwitcher { display: inline-flex; gap: 4px; margin-top: 6px; justify-content: flex-end; }
.dashLangBtn {
  border: 1px solid var(--border);
  background: var(--card-bg, var(--panel));
  border-radius: 99px;
  padding: 2px 6px;
  font-size: 13px;
  cursor: pointer;
  opacity: .55;
  transition: opacity .12s, border-color .12s, background-color .12s;
}
.dashLangBtn:hover { opacity: .9; }
.dashLangBtn.active {
  opacity: 1;
  border-color: var(--red, #ef4444);
  background: rgba(239,68,68,0.08);
}
.dashHeroCard .dashClockedInBar {
  grid-column: 1 / -1;
  background: rgba(34,197,94,0.10);
  border: 1px solid rgba(34,197,94,0.30);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--green, #22c55e);
}

/* Quick action buttons row */
.dashQuickRow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.dashQA {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--card-bg, var(--panel));
  border: 1px solid var(--border2);
  border-radius: 14px;
  padding: 14px 16px;
  text-decoration: none;
  color: var(--text);
  cursor: pointer;
  position: relative;
  transition: transform .08s, border-color .12s, background-color .12s;
}
.dashQA:hover { transform: translateY(-1px); border-color: var(--border3); background: var(--lift); }
.dashQAIcon { font-size: 22px; flex-shrink: 0; }
.dashQAText { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dashQAText b { font-size: 14px; font-weight: 800; }
.dashQAText span { font-size: 11px; color: var(--muted); font-weight: 600; }
.dashQABadge {
  position: absolute;
  top: 8px; right: 10px;
  background: var(--red, #ef4444);
  color: #fff;
  font-size: 10px; font-weight: 800;
  padding: 2px 7px;
  border-radius: 99px;
  min-width: 18px;
  text-align: center;
}
.dashQA--time .dashQAIcon  { color: var(--blue, #3b82f6); }
.dashQA--bok  .dashQAIcon  { color: var(--amber, #f59e0b); }
.dashQA--tasks .dashQAIcon { color: var(--green, #22c55e); }
.dashQA--proj .dashQAIcon  { color: var(--purple, #a855f7); }

/* My week — current week subtle highlight */
.dashMyWeek--current {
  border-color: rgba(59,130,246,0.30);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.06);
}
.dashWeekNav {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.dashWeekRange {
  font-size: 11px; font-weight: 700;
  color: var(--sub);
  min-width: 110px;
  text-align: center;
}
.dashWeekNowChip {
  display: inline-block;
  background: rgba(59,130,246,0.15);
  color: var(--blue, #3b82f6);
  font-size: 9px; font-weight: 800;
  padding: 2px 7px;
  border-radius: 99px;
  margin-left: 6px;
  text-transform: uppercase;
  letter-spacing: .4px;
  vertical-align: middle;
}

/* Bottom row: News + stats summary side-by-side */
.dashBottomRow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 16px;
}
@media (max-width: 720px) {
  .dashBottomRow { grid-template-columns: 1fr; }
}
.dashNewsBody { padding-top: 6px; }
.dashNewsRow {
  border-left: 3px solid var(--red, #ef4444);
  padding: 8px 12px;
  margin-bottom: 8px;
  background: var(--lift);
  border-radius: 8px;
}
.dashNewsRow:last-child { margin-bottom: 0; }
.dashNewsTitle { font-size: 13px; font-weight: 800; color: var(--text); }
.dashNewsBodyText { font-size: 11px; color: var(--sub); margin-top: 3px; line-height: 1.4; }
.dashNewsDate { font-size: 10px; color: var(--muted); margin-top: 4px; font-weight: 600; }
.dashNewsDel { background:none; border:none; color:var(--muted); font-size:10px; cursor:pointer; padding:0; text-decoration:underline; font-family:inherit; }
.dashNewsDel:hover { color: var(--red); }

/* Assigned to me — task list inside dashboard side card */
/* Compact list — was too tall and inconsistent with the other widgets.
   2026-05-23: padded items down, removed double-card-on-card background. */
.dashAssignedList { padding: 4px 10px 10px; display: flex; flex-direction: column; gap: 2px; }
.dashAssignedRow {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  border-left: 2px solid transparent;
  border-radius: 6px;
  padding: 6px 8px;
  text-decoration: none;
  color: var(--text);
  transition: background-color .12s, border-color .12s;
}
.dashAssignedRow:hover {
  background: var(--lift);
  border-left-color: var(--accent);
}
.dashAssignedHigh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  background: #F59E0B;
  color: #fff;
  font-weight: 900;
  font-size: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dashAssignedBody { flex: 1; min-width: 0; }
.dashAssignedTitle {
  font-size: 12.5px; font-weight: 700;
  color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dashAssignedProj {
  font-size: 10px; color: var(--muted); margin-top: 1px;
  font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dashAssignedDue {
  font-size: 10px; font-weight: 700;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 1px 7px;
  color: var(--sub);
  white-space: nowrap;
  flex-shrink: 0;
}
.dashAssignedDue.overdue {
  background: rgba(245,158,11,0.12);
  border-color: rgba(245,158,11,0.35);
  color: #F59E0B;
}

/* Hide legacy dashboard chrome we no longer use */
#dashEditBar, #dashAddCardBtn, #dashCustomizeModal { display: none !important; }

.dashGreeting { font-size: 22px; font-weight: 900; line-height: 1.25; }
.dashSubGreeting { font-size: 13px; color: var(--sub); margin-top: 3px; }
.dashHeroStats {
  display: flex; align-items: stretch;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--r); overflow: hidden; margin-top: 12px;
}
.dashHeroStat {
  display: flex; flex-direction: column; align-items: center;
  padding: 10px 0; gap: 2px; flex: 1;
}
.dashHeroStatNum { font-size: 24px; font-weight: 900; line-height: 1; }
.dashHeroStatLabel { font-size: 9px; color: var(--sub); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.dashHeroStatDiv { width: 1px; background: var(--border); align-self: stretch; }

.dashQuickActions {
  display: flex; gap: 7px; margin: 10px 0 12px;
  overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
}
.dashQABtn {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 13px; background: var(--panel);
  border: 1px solid var(--border); border-radius: var(--r);
  color: var(--text); font-size: 13px; font-weight: 600;
  cursor: pointer; white-space: nowrap; text-decoration: none;
  font-family: var(--font); flex-shrink: 0; transition: background .1s;
}
.dashQABtn:hover { background: var(--s2); }
.dashQABtn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Cards: proper grouped containers with panel bg + soft border.
   Before this, .dashCard had no styling so widgets sat directly on the
   page bg and the whole dashboard felt visually flat / "ungrouped". */
.dashCard {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  margin-bottom: 16px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
  transition: border-color .15s, box-shadow .15s;
}
.dashCard:hover { border-color: var(--border2, var(--border)); }
.dashCardHdr {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--border);
}
.dashCardTitle { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: var(--sub); }
.dashCardBadge {
  font-size: 11px; font-weight: 800;
  background: rgba(20,184,166,0.12); color: var(--accent-2);
  padding: 2px 9px; border-radius: 99px;
}

/* ─── HERO WELCOME (top of dashboard) ─────────────────────────────────── */
.dashHero {
  background: linear-gradient(135deg, var(--panel) 0%, rgba(20,184,166,0.08) 100%);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px 20px;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
}
.dashHero::before {
  content: '';
  position: absolute; top: -50%; right: -50%;
  width: 100%; height: 200%;
  background: radial-gradient(circle, rgba(20,184,166,0.10) 0%, transparent 60%);
  pointer-events: none;
}
.dashHero__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; position: relative; }
.dashHero__text { flex: 1; min-width: 0; }
.dashHero__greet {
  font-size: clamp(20px, 4.5vw, 28px); font-weight: 900; letter-spacing: -0.5px;
  color: var(--text); line-height: 1.15;
}
.dashHero__date {
  font-size: 13px; font-weight: 600; color: var(--sub); margin-top: 4px;
  text-transform: capitalize;
}
.dashHero__mark { flex-shrink: 0; }
.dashHero__mark img {
  width: clamp(48px, 10vw, 64px); height: clamp(48px, 10vw, 64px);
  /* icon-only SVG is dark navy; brighten to white for dark bg, the teal
     accent dots stay because they're not pure black */
  filter: brightness(0) invert(1) drop-shadow(0 2px 8px rgba(20,184,166,0.4));
  opacity: 0.92;
}

.dashTaskRow {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0; border-left: 3px solid transparent;
  border-bottom: 1px solid var(--border);
  text-decoration: none; color: var(--text); transition: background .1s;
  cursor: pointer;
}
.dashTaskRow:last-child { border-bottom: none; }
.dashTaskRow:hover { background: var(--s2); margin: 0 -8px; padding: 9px 8px; }
.dashTaskTitle { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashTaskMeta { font-size: 11px; color: var(--sub); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashEmpty { padding: 14px 16px; font-size: 13px; color: var(--muted); }

.dashKpiChip {
  display: flex; flex-direction: column; align-items: center;
  padding: 12px 8px;
  text-decoration: none; color: var(--text); transition: background .1s;
  flex: 1; border-radius: var(--r);
}
.dashKpiChip:hover { background: var(--s2); }
.dashKpiNum { font-size: 26px; font-weight: 900; line-height: 1; }
.dashKpiLabel { font-size: 9px; color: var(--sub); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; margin-top: 3px; }

.dashStatRow { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.dashStatRow:last-child { border-bottom: none; }
.dashStatIcon { font-size: 18px; flex-shrink: 0; width: 24px; text-align: center; }
.dashStatLabel { font-size: 12px; color: var(--sub); }
.dashStatSub { font-size: 11px; margin-top: 1px; }
.dashStatValue { font-size: 14px; font-weight: 800; flex-shrink: 0; text-align: right; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dashLeaderRow { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.dashLeaderRow:last-child { border-bottom: none; }
.dashLeaderMe { background: rgba(20,184,166,0.10); border-radius: 6px; }
.dashLeaderMedal { font-size: 18px; width: 24px; text-align: center; flex-shrink: 0; }
.dashLeaderAvatar { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: #fff; flex-shrink: 0; }
.dashLeaderName { flex: 1; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashLeaderStats { font-size: 12px; flex-shrink: 0; text-align: right; }

/* ─── MY WEEK WIDGET — 7 days, compact, no horizontal scroll ─────────── */
.dashMyWeek {}
.mwGrid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-top: 1px solid var(--border);
  min-height: 70px;
  width: 100%;
}
.mwDay {
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  min-width: 0; /* allow flex children to shrink below content size */
  overflow: hidden;
}
.mwDay:last-child { border-right: none; }
/* Weekend tone-down: faint bg + lighter text */
.mwDay:nth-child(6),
.mwDay:nth-child(7) {
  background: rgba(0,0,0,0.02);
}
.mwDayHdr {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5px 2px 4px;
  border-bottom: 1px solid var(--border);
  background: var(--s2);
  gap: 1px;
  flex-shrink: 0;
}
.mwToday .mwDayHdr { background: var(--red-dim); }
.mwToday .mwDayName { color: var(--red); }
.mwToday .mwDayNum { background: var(--red); color: #fff; border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; }
.mwDayName { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: var(--muted); }
.mwDayNum  { font-size: 12px; font-weight: 800; color: var(--fg); line-height: 1; }
.mwDayBody {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 3px 2px;
  min-height: 32px;
  min-width: 0;
  overflow: hidden;
}
.mwTask {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 600;
  color: var(--fg);
  text-decoration: none;
  border-left: 3px solid var(--work);
  padding: 2px 4px;
  border-radius: 3px;
  background: var(--lift);
  line-height: 1.2;
  overflow: hidden;
  min-width: 0;
}
.mwTask:hover { background: var(--s2); }
.mwTaskTitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
.mwHigh { flex-shrink: 0; font-weight: 800; color: var(--red); font-size: 10px; }
.mwTaskOverdue { opacity: .85; }
.mwTaskDue { flex-shrink: 0; font-size: 10px; color: var(--red); font-weight: 600; margin-left: auto; white-space: nowrap; }
.mwWASlot { display: flex; flex-direction: column; gap: 3px; }
.mwWA {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  color: var(--blue);
  padding: 2px 5px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--blue) 10%, transparent);
  cursor: pointer;
  overflow: hidden;
}
.mwWA:hover { background: color-mix(in srgb, var(--blue) 18%, transparent); }
.mwWADot { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); flex-shrink: 0; }
.mwWAName { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mwOverdue {
  border-top: 1px solid var(--border);
  padding: 8px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mwOverdueLabel {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--red);
  margin-bottom: 2px;
}
@media (max-width: 480px) {
  .mwDayName { font-size: 9px; letter-spacing: 0; }
  .mwDayNum  { font-size: 12px; }
  .mwTask    { font-size: 10px; }
}

/* ─── UPCOMING (3 days) + OVERDUE — dashboard hero widget, teal theme ─── */
:root {
  --teal:        #14B8A6;
  --teal-2:      #2DD4BF;
  --teal-soft:   rgba(20,184,166,0.10);
  --teal-mid:    rgba(20,184,166,0.22);
  --amber-mid:   rgba(245,158,11,0.35);
  --amber-soft:  rgba(245,158,11,0.10);
  --amber:       #F59E0B;
}
.dashUpcoming { overflow: hidden; }
.dashUpcoming .dashCardHdr {
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--border);
}
.upDays { display: flex; flex-direction: column; }
.upDay {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--border);
  padding: 12px 16px;
  gap: 8px;
}
.upDay:last-child { border-bottom: none; }
.upDay--today {
  background: var(--teal-soft);
  border-left: 3px solid var(--teal);
  padding-left: 13px; /* compensate for 3px border */
}
.upDayHdr {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.upDayLabel {
  font-size: 14px;
  font-weight: 800;
  color: var(--fg);
  letter-spacing: -.2px;
}
.upDay--today .upDayLabel { color: var(--teal); text-transform: uppercase; font-size: 13px; letter-spacing: .5px; }
.upDayDate {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.upDayCount {
  margin-left: auto;
  background: var(--teal-soft);
  color: var(--teal);
  font-size: 11px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  min-width: 22px;
  text-align: center;
}
.upDayBody { display: flex; flex-direction: column; gap: 6px; }
.upTask {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--s2);
  border: 1px solid var(--border);
  border-left: 3px solid transparent;
  text-decoration: none;
  color: var(--fg);
  font-weight: 600;
  transition: background .12s, border-color .12s, transform .12s;
}
.upTask:hover {
  background: var(--lift);
  border-left-color: var(--accent);
  transform: translateX(2px);
}
.upTaskBody { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.upTaskTitle {
  font-size: 14px;
  font-weight: 700;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.upTaskProj {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.upHigh {
  flex-shrink: 0;
  width: 18px; height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--amber);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  border-radius: 50%;
}
.upEmpty {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
  padding: 2px 4px;
}
.upTaskDue {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--amber);
  background: var(--amber-soft);
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
/* Overdue stack — COMPACT: single-line rows, smaller font, dense list */
.upOverdue {
  border-top: 1px solid var(--border);
  background: transparent;
  padding: 10px 14px 12px;
}
.upOverdueHdr {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.upOverdueLabel {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--amber);
}
.upOverdueCount {
  background: var(--amber);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 1px 7px;
  border-radius: 999px;
  min-width: 18px;
  text-align: center;
}
.upOverdueList { display: flex; flex-direction: column; gap: 1px; }
/* Compact overdue row: single line, tight padding, no separate proj row */
.upTask--overdue {
  background: transparent;
  border: 1px solid transparent;
  border-left: 2px solid rgba(245,158,11,0.4);
  padding: 5px 8px;
  border-radius: 4px;
  gap: 6px;
  min-height: 0;
}
.upTask--overdue:hover {
  background: rgba(245,158,11,0.08);
  border-left-color: var(--amber);
  transform: none;
}
.upTask--overdue .upTaskBody { flex-direction: row; align-items: baseline; gap: 6px; }
.upTask--overdue .upTaskTitle { font-size: 12px; font-weight: 600; }
.upTask--overdue .upTaskProj  {
  font-size: 11px; font-weight: 500;
  flex-shrink: 1; overflow: hidden; text-overflow: ellipsis;
}
.upTask--overdue .upTaskProj::before { content: '· '; opacity: .6; }
.upTask--overdue .upTaskDue {
  font-size: 10px;
  padding: 1px 6px;
  background: transparent;
  color: var(--amber);
}
.upTask--overdue .upHigh {
  width: 14px; height: 14px; font-size: 9px;
}
.upMore {
  display: block;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--teal);
  padding: 6px;
  text-decoration: none;
  margin-top: 2px;
}
.upMore:hover { color: var(--teal-2); }

/* Tablet+ : days in a 3-col grid so it scans across instead of down */
@media (min-width: 720px) {
  .upDays {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  .upDay { border-right: 1px solid var(--border); border-bottom: none; }
  .upDay:last-child { border-right: none; }
  .upDay--today {
    border-left: none;
    border-top: 3px solid var(--teal);
    padding-left: 16px;
    padding-top: 9px;
  }
}

/* Customize panel toggles */
.dashToggleRow { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.dashToggleRow:last-child { border-bottom: none; }
.toggleSwitch { position: relative; flex-shrink: 0; }
.toggleSwitch input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggleTrack { display: block; width: 44px; height: 25px; background: var(--lift); border: 1px solid var(--border2); border-radius: 99px; cursor: pointer; transition: background .2s; position: relative; }
.toggleSwitch input:checked + .toggleTrack { background: var(--red); border-color: var(--red); }
.toggleThumb { position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; background: #fff; border-radius: 50%; transition: transform .2s; box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.toggleSwitch input:checked + .toggleTrack .toggleThumb { transform: translateX(19px); }

/* Keep these for tasks.js compat */
.recentRow {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 0; border-bottom: 1px solid var(--border);
  text-decoration: none; color: var(--text); transition: opacity .1s;
}
.recentRow:last-child { border-bottom: none; }
.recentRow:hover { opacity: 0.8; }
.recentRowCompact { padding: 6px 0; }
.recentRowLeft { min-width: 0; flex: 1; }
.recentRowTitle { font-size: 13px; font-weight: 500; }
.recentRowMeta { font-size: 11px; color: var(--sub); margin-top: 1px; }
.recentRowBadges { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }

/* ─── TASK GROUP (dashboard + tasks) ─────────── */
/* Card-per-project grouping. Áður var project-nafn 12px sub-color og engin
   visual aðgreining milli verkefna. Notandi kvartaði 2026-05-09: „þarf að sjá
   meiri mun milli verka". */
.taskGroup {
  margin-bottom: 18px;
  background: var(--s2);
  border: 1px solid var(--border2);
  border-radius: 12px;
  padding: 12px 16px 8px;
  transition: border-color .15s;
}
.taskGroup:hover {
  border-color: var(--border);
}
.taskGroupHeader {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 0 0 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.taskGroupName {
  font-size: 15px; font-weight: 800; color: var(--text);
  text-decoration: none;
  letter-spacing: -.2px;
  display: flex; align-items: center; gap: 8px;
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.taskGroupName::before {
  content: '📂';
  font-size: 14px;
  opacity: .7;
}
.taskGroupName:hover {
  color: var(--blue, #3b82f6);
}
.taskGroupCount {
  font-size: 11px; font-weight: 700; color: var(--muted);
  background: var(--lift); padding: 3px 10px; border-radius: 99px;
  flex-shrink: 0;
}
.taskGroupBody {
  display: flex; flex-direction: column;
}
/* Innan card: tasks þurfa minna padding/border en áður */
.taskGroup .tw { border-bottom-color: var(--border); }
.taskGroup .tw:last-child { border-bottom: none; }
.taskGroup .tr { padding: 11px 0; }
.taskGroup .tr:hover, .taskGroup .tr.open {
  background: var(--lift);
  margin: 0 -8px; padding: 11px 8px;
  border-radius: 6px;
}
/* Stærri colored stripe svo task-type sjáist betur */
.taskGroup .tl { width: 4px; height: 28px; }
/* Aðeins bigger title */
.taskGroup .tt { font-size: 14px; font-weight: 600; }
.masonryCol { display: flex; flex-direction: column; gap: 8px; }

/* ─── TASK FILTER PILLS (tasks page) ─────────── */
.filterBar {
  display: flex; gap: 5px; overflow-x: auto;
  scrollbar-width: none; margin-bottom: 14px;
  padding-bottom: 2px;
}
.filterBar::-webkit-scrollbar { display: none; }

/* ─── TIME PAGE (period stats) ───────────────── */
.periodStats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--border);
  border: 1px solid var(--border); border-radius: var(--r);
  overflow: hidden; margin-bottom: 14px;
}
.pStatItem {
  background: var(--panel); padding: 10px 8px;
  text-align: center;
}
.pStatNum { font-size: 20px; font-weight: 800; line-height: 1; }
.pStatLabel {
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.4px; color: var(--sub); margin-top: 3px;
}

/* ─── TASK DETAIL PANEL (desktop right panel) ─── */
/* 3.0.75: bumped above Leaflet's defaults (controls at 1000) so the project
   map doesn't bleed through the drawer when admin opens a task. The map
   container also gets `isolation:isolate` below to constrain its panes. */
.taskDetailPanel {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 520px; max-width: calc(100vw - var(--sidebar-w) - 20px);
  background: var(--panel); border-left: 1px solid var(--border);
  padding: 20px 22px 32px; overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.32,0.72,0,1);
  z-index: 1100;
}
.taskDetailPanel.open { transform: translateX(0); }
.taskPanelBackdrop {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.35); z-index: 1099;
}
.taskPanelBackdrop.open { display: block; }
@media(max-width:767px){
  .taskDetailPanel {
    top: auto; left: 0; right: 0; bottom: 0;
    width: 100%; max-width: 100%;
    height: 92vh; border-left: none;
    border-top: 1px solid var(--border);
    border-radius: 14px 14px 0 0;
    transform: translateY(100%);
    padding: 16px 16px 28px;
  }
  .taskDetailPanel.open { transform: translateY(0); }
}
.panelSectionLabel {
  font-size: 9px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted);
}

.tpMetaGrid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1px; background: var(--border);
  border: 1px solid var(--border); border-radius: var(--r);
  overflow: hidden; margin-bottom: 18px;
}
.tpMetaCell {
  background: var(--panel); padding: 10px 12px;
}
.tpMetaLabel {
  font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px;
  color: var(--muted); margin-bottom: 3px;
}
.tpMetaVal { font-size: 13px; font-weight: 600; }
.tpSectionLabel {
  font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px;
  color: var(--muted); margin-bottom: 8px;
}
.tpPhotoGrid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 4px; margin-bottom: 18px;
}
.tpPhoto {
  aspect-ratio: 1; background: var(--lift);
  border-radius: var(--r); overflow: hidden;
  cursor: zoom-in;
}
.tpPhoto img { width: 100%; height: 100%; object-fit: cover; }
.tpPhotoMore {
  aspect-ratio: 1; background: var(--lift);
  border-radius: var(--r);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700; color: var(--sub);
}
.tpComment { display: flex; gap: 10px; margin-bottom: 14px; align-items: flex-start; }
.tpCommentInput {
  display: flex; gap: 8px; align-items: center;
  padding: 8px 12px;
  background: var(--lift);
  border: 1px solid var(--border2);
  border-radius: var(--r); margin-bottom: 18px;
}
.tpCommentInput input {
  flex: 1; background: transparent; border: none;
  color: var(--text); font-size: 13px;
  outline: none; font-family: var(--font);
}

/* ─── STAFF PAGE ──────────────────────────────── */
.staffFeed { display: flex; flex-direction: column; gap: 8px; }
.staffFeedSection {
  font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .7px;
  color: var(--muted); margin: 10px 0 6px;
}
.staffFeedRow {
  display: flex; align-items: center; gap: 14px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 12px 14px;
}
.sfAvatar {
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 800; color: #fff;
  flex-shrink: 0;
}
.sfInfo { flex: 1; min-width: 0; }
.sfName { font-size: 15px; font-weight: 800; margin-bottom: 2px; }
.sfMeta { font-size: 12px; color: var(--sub); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sfMeta svg { width: 11px; height: 11px; stroke: var(--muted); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.sfStats { text-align: right; flex-shrink: 0; }
.sfHours { font-size: 15px; font-weight: 800; color: var(--blue); }
.sfOT { font-size: 11px; font-weight: 700; color: var(--amber); }

/* ─── STAFF CARD (2026-05-22 v3 — compact row + full-settings dropdown) ───── */
.staffCard {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 6px;
  transition: border-color .15s;
  overflow: hidden;
}
.staffCard:hover { border-color: rgba(20,184,166,0.30); }
.staffCard--frozen { opacity: 0.65; }

/* Compact row — 36px avatar, single line, ~52px tall.
   !important on display/flex bits because some browsers apply weird
   default block behavior to <button> elements that resists display:flex. */
.staffCard__top {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: transparent;
  border: none;
  padding: 8px 12px;
  cursor: pointer;
  font-family: var(--font);
  color: var(--text);
  text-align: left;
}
.staffCard__top:hover { background: rgba(255,255,255,0.02); }
.staffCard .sfAvatar {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; color: #fff;
  flex-shrink: 0;
}
.staffCard__name {
  font-size: 14px; font-weight: 800; color: var(--text);
  display: flex; align-items: center; gap: 8px;
  line-height: 1.1;
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.staffCard__role {
  font-size: 9px; font-weight: 800; letter-spacing: .5px;
  padding: 2px 7px; border-radius: 999px;
  text-transform: uppercase;
  flex-shrink: 0;
}
.staffCard__frozenBadge {
  font-size: 9px; font-weight: 800; letter-spacing: .5px;
  padding: 2px 7px; border-radius: 999px;
  background: rgba(148,163,184,.15); color: #94A3B8;
  border: 1px solid rgba(148,163,184,.3);
}

/* Reminder pills — sit on the row directly */
.staffCard__pills {
  display: inline-flex; gap: 5px;
  flex-shrink: 0;
}
.staffCard__pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 9px;
  background: var(--lift);
  border: 1px solid var(--border2);
  border-radius: 7px;
  color: var(--muted);
  font-family: var(--font);
  font-size: 11px; font-weight: 600;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
  white-space: nowrap;
}
.staffCard__pill:hover { background: var(--s2); border-color: var(--border3); color: var(--text); }
.staffCard__pill.is-on {
  background: rgba(34,197,94,.10);
  border-color: rgba(34,197,94,.35);
  color: #22c55e;
}
.staffCard__pillDot {
  width: 5px; height: 5px; border-radius: 50%; background: var(--muted);
}
.staffCard__pill.is-on .staffCard__pillDot { background: #22c55e; }

/* Bell button next to chevron */
.staffCard__bell { display: inline-flex; }
.staffCard__iconBtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  background: var(--lift);
  border: 1px solid var(--border2);
  border-radius: 7px;
  color: var(--text);
  cursor: pointer;
  transition: background .12s, border-color .12s, transform .1s;
}
.staffCard__iconBtn:hover {
  background: rgba(20,184,166,0.15);
  border-color: rgba(20,184,166,0.4);
  transform: translateY(-1px);
}
.staffCard__iconBtn svg { stroke: currentColor; }
.staffCard__chev {
  color: var(--muted);
  display: inline-flex;
  transition: transform .2s;
  flex-shrink: 0;
}
.staffCard__top[aria-expanded="true"] .staffCard__chev {
  transform: rotate(180deg);
  color: var(--text);
}

/* Dropdown = user settings (full form) */
.staffCard__dd {
  border-top: 1px solid var(--border);
  background: var(--s2);
}
.staffCard__dd[hidden] { display: none; }
.staffCard__form {
  padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.staffCard__readonly {
  display: flex; align-items: baseline; gap: 10px;
  padding: 8px 12px;
  background: var(--lift);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
}
.staffCard__roLabel {
  color: var(--muted); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .4px;
  min-width: 60px;
}
.staffCard__roValue { color: var(--text); font-weight: 600; word-break: break-all; }
.staffCard__hint {
  font-size: 10px; color: var(--muted); margin-top: -4px;
}
.staffCard__formFooter {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}

@media (max-width: 760px) {
  .staffCard__pillLabel { display: none; }
  .staffCard__pill { padding: 5px 7px; min-width: 26px; justify-content: center; }
}
@media (max-width: 480px) {
  .staffCard__top { gap: 7px; padding: 7px 10px; }
  .staffCard__name { font-size: 13px; }
}

/* ─── ACTIVITY FEED (clean) ───────────────────── */
.actFeedNew .actItem { border-left: 3px solid var(--red); padding-left: 10px; }
.actQuote {
  margin-top: 6px; padding: 7px 11px;
  background: var(--s2);
  border-left: 3px solid var(--border2);
  border-radius: 0 var(--r) var(--r) 0;
  font-size: 13px; line-height: 1.55; color: var(--sub);
  font-style: italic;
}
.actPhotoRow { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.actThumb {
  width: 100%; aspect-ratio: 1;
  object-fit: cover; border-radius: var(--r);
  cursor: zoom-in;
}

/* ─── CLOCK WIDGET (time page) ────────────────── */
.clockWidget {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 7px 12px;
  margin-bottom: 8px;
}
/* Compact horizontal layout: time/date column + Clock In/Out button */
.clockTopRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.clockTextCol { text-align: left; min-width: 0; line-height: 1.1; }
.clockDisplay {
  font-size: clamp(20px, 5.5vw, 28px);
  font-weight: 900; letter-spacing: -.8px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.clockDate { font-size: 10px; color: var(--sub); margin-top: 2px; }
.clockStatus {
  font-size: 10px; font-weight: 600; margin-top: 4px; text-align: center;
  color: var(--green);
  min-height: 14px; /* avoid layout jump when status text appears/disappears */
  font-variant-numeric: tabular-nums;
}
#tmLiveTimer, #tmProgStart, #tmProgEnd, #tmProgMid {
  font-variant-numeric: tabular-nums;
}
.clockProgressWrap { margin-bottom: 16px; }
.clockProgressBar {
  height: 6px; background: var(--s2);
  border-radius: 99px; overflow: hidden;
  margin: 4px 0;
}
.clockProgressFill {
  height: 100%; background: var(--green);
  border-radius: 99px; transition: width 1s linear;
  min-width: 2px;
}
.clockProgressLabels {
  display: flex; justify-content: space-between;
  font-size: 10px; color: var(--muted); font-weight: 600;
}
.clockBtns { display: grid; grid-template-columns: 1fr; gap: 8px; }
.clockBtnGroup {
  display: flex; align-items: center; gap: 6px; flex-shrink: 0;
}
.clockBtn {
  padding: 7px 14px; border-radius: var(--r);
  font-size: 12px; font-weight: 800; border: none;
  cursor: pointer; font-family: var(--font);
  transition: filter .15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.clockBtnCancel {
  background: var(--lift);
  color: var(--muted);
  padding: 7px 10px;
  font-size: 14px;
  border: 1px solid var(--border2);
}
.clockBtnCancel:hover {
  background: rgba(232,25,44,.1);
  color: var(--red);
  border-color: rgba(232,25,44,.3);
}
.clockBtn:hover { filter: brightness(1.1); }
.clockBtnIn  { background: var(--green); color: #fff; }
.clockBtnOut { background: var(--red);   color: #fff; }

.manualEntry {
  background: var(--card-bg, var(--panel));
  border: var(--card-border, 1px solid var(--border));
  border-radius: var(--r);
  padding: 8px 10px;
  margin-bottom: 8px;
}
.manualEntryLabel {
  display: none; /* "Log entry manually" label fjarlægt — sparar pláss */
}
.manualEntryRow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 8px;
}
.manualTimeWheels {
  display: block;
  margin: 0 0 8px;
}
.manualTimeWheel { flex: 1; min-width: 0; }
.manualEntry .twNVal, .manualEntry .twNSep { font-size: 26px; }
.manualEntry .twNBtn { width: 44px; height: 28px; }
.manualEntryNote {
  width: 100%; background: var(--s2); border: 1px solid var(--border2);
  border-radius: var(--r); color: var(--text); font-family: var(--font);
  font-size: 13px; padding: 6px 9px; min-height: 32px; resize: vertical;
  outline: none; box-sizing: border-box; display: block; margin-bottom: 6px;
}
.manualEntryNote:focus { border-color: var(--red); }
.manualEntryActions { display: flex; justify-content: flex-end; }
.manualEntryField { display: flex; flex-direction: column; gap: 3px; }
.manualEntryField label {
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; color: var(--muted);
}
.manualEntryField input, .manualEntryField select {
  background: var(--s2); border: 1px solid var(--border2);
  border-radius: var(--r); padding: 6px 8px;
  color: var(--text); font-size: 13px; font-weight: 600;
  font-family: var(--font); outline: none; width: 100%;
  transition: border-color .1s;
}
.manualEntryField input:focus, .manualEntryField select:focus { border-color: var(--red); }

/* ═══ MOCKUP-STYLE TIME CONSOLE (2026-05-10 redesign) ═══════════════════════
   Single-ring dial · separate white cards · collapsible tabs panel.
   Class prefix: tc* (time console). Old entryDial* classes still defined
   below for back-compat but unused after this redesign. */
.tcConsole {
  background: var(--card-bg, var(--panel));
  border: 1px solid var(--border2);
  border-radius: 22px;
  padding: 12px;
  margin-bottom: 8px;
  box-shadow: 0 8px 28px rgba(15,23,42,.06);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Clock line: time+date inline left, Clock In/Out button right (no own card). */
.tcClockLine {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 4px 4px 0;
}
.tcClockTime {
  font-size: clamp(22px, 6.5vw, 30px);
  font-weight: 950; letter-spacing: -1px;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.tcClockDate {
  font-size: 11px; font-weight: 700;
  color: var(--muted); margin-top: 3px;
}
.tcClockBtnGroup { display: flex; align-items: center; gap: 6px; }
.tcClockBtn {
  border: 0; border-radius: 10px;
  padding: 6px 12px; font-size: 11px; font-weight: 900;
  color: #fff; cursor: pointer;
  transition: filter .15s, transform .08s;
  white-space: nowrap;
}
.tcClockBtn:active { transform: scale(.97); }
.tcClockBtn.in  { background: var(--red, #ef4444); box-shadow: 0 8px 18px rgba(239,68,68,.25); }
.tcClockBtn.out { background: #18181b; box-shadow: 0 8px 18px rgba(15,23,42,.30); }
.tcClockCancel {
  border: 1px solid var(--border2);
  background: var(--panel);
  color: var(--muted);
  border-radius: 12px;
  padding: 8px 11px;
  font-size: 13px;
  cursor: pointer;
}

/* Date + Project — 2-col with floating labels.
   Date column needs ≥150px to fit "DD/MM/YYYY" + calendar icon without clipping. */
.tcFields {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) 1.5fr;
  gap: 6px;
}
.tcField { position: relative; min-width: 0; }
.tcField label {
  position: absolute; left: 12px; top: 6px; z-index: 2;
  font-size: 9px; font-weight: 900;
  text-transform: uppercase; letter-spacing: .5px;
  color: var(--muted); pointer-events: none;
}
.tcField input,
.tcField select {
  width: 100%; min-width: 0;
  border: 1px solid var(--border2);
  background: var(--panel);
  color: var(--text);
  border-radius: 14px;
  padding: 19px 12px 7px;
  font: inherit;
  font-size: 13px; font-weight: 800;
  outline: none;
}
.tcField input:focus, .tcField select:focus {
  border-color: rgba(20,184,166,.55);
  box-shadow: 0 0 0 3px rgba(20,184,166,.12);
}

/* Start | End | Total — 3 cards in a row */
.tcTimeCards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.tcTimeCard {
  background: var(--panel);
  border: 1.5px solid var(--border2);
  border-radius: 12px;
  padding: 4px 9px;
  min-width: 0;
  transition: border-color .12s, background-color .12s, box-shadow .12s;
}
.tcTimeCard span {
  display: block;
  font-size: 9px; font-weight: 900;
  text-transform: uppercase; letter-spacing: .5px;
  color: var(--muted);
}
.tcTimeCard b {
  display: block; margin-top: 1px;
  font-size: 15px; font-weight: 900;
  letter-spacing: -.4px; line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.tcTimeCard.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(20,184,166,.12);
}
/* Start (Arr) tinted blue, End (Dep) tinted red — matches the dial knob
   colors so the visual signal is consistent (blue marker at start, red
   marker at end). Total stays neutral teal-ish via --tcAccent. */
.tcTimeCard.confirmed#tcCardArr { background: rgba(59,130,246,.06); }
.tcTimeCard.confirmed#tcCardArr b { color: #2563eb; }
.tcTimeCard.confirmed#tcCardDep { background: rgba(239,68,68,.06); }
.tcTimeCard.confirmed#tcCardDep b { color: #ef4444; }
.tcTimeCard.total b { color: var(--accent); }
.tcTimeCard.total.confirmed { background: rgba(20,184,166,.08); border-color: rgba(20,184,166,.5); }
.tcTimeCard.total.confirmed b { color: var(--accent); }

/* Dial panel: takes remaining flex space, centers the dial which scales to fit */
.tcDialPanel {
  background: var(--lift);
  border: 1px solid var(--border2);
  border-radius: 16px;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex: 1 1 auto;
  min-height: 0;
}
/* Desktop (2026-05-27): dial hidden — admin types times directly into the
   <input type="time"> fields embedded in tcTimeCard. The dial is touch-first
   UX (snap-rotate to confirm) and feels cramped on a 1920px screen with a
   mouse. Hiding via display:none is cheap because the dial JS still runs
   harmlessly in the background (state updates apply to arrMins/depMins). */
.tcTimeReadout { display: block; }
.tcTimeInput   { display: none; }
@media (min-width: 768px) {
  .tcDialPanel { display: none; }
  .tcTimeReadout { display: none; }
  .tcTimeInput {
    display: block;
    margin-top: 4px;
    width: 100%;
    font-size: 17px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    color: var(--text);
    background: rgba(255,255,255,.03);
    border: 1px solid var(--border2);
    border-radius: 8px;
    padding: 8px 10px;
    outline: none;
    letter-spacing: -.3px;
  }
  .tcTimeInput:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(20,184,166,.18);
  }
  /* Card padding expands a bit on desktop so the input has breathing room */
  .tcTimeCard { padding: 8px 12px; }
  .tcTimeCard span { font-size: 10px; }
}
.tcDial {
  /* Dial size — ResizeObserver in JS overrides this with container-aware
     px value, but this is the static fallback. JS uses var(--tcSize)
     in transform calcs so it must resolve to a definite length. */
  --tcSize: min(74vw, 280px, 38dvh);
  width: var(--tcSize);
  height: var(--tcSize);
  border-radius: 50%;
  position: relative;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
  background: rgba(0,0,0,0.0001);
  box-shadow:
    inset 0 0 0 12px var(--panel),
    0 12px 22px rgba(15,23,42,.10);
  flex-shrink: 0;
}
.tcDial:active { cursor: grabbing; }
/* Outer face — conic-gradient updated by JS to show duration arc.
   pointer-events:none so drag events bubble to .tcDial parent. */
.tcDialFace {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(#e2e8f0 0deg 360deg);
  pointer-events: none;
}
.tcDialFace::after {
  content: '';
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  background: var(--panel);
  pointer-events: none;
}
/* Hour ticks — pointer-events:none so drag works through. */
.tcTick {
  position: absolute;
  font-weight: 900;
  z-index: 2;
  pointer-events: none;
}
/* AM ticks — bigger, near outer rim */
.tcTickAM {
  font-size: 12px;
  color: var(--text);
}
.tcTickAM.t12 { top: 14px; left: 50%; transform: translateX(-50%); }
.tcTickAM.t3  { right: 18px; top: 50%; transform: translateY(-50%); }
.tcTickAM.t6  { bottom: 14px; left: 50%; transform: translateX(-50%); }
.tcTickAM.t9  { left: 18px; top: 50%; transform: translateY(-50%); }
/* PM ticks — smaller, in the inner zone (between rings) */
.tcTickPM {
  font-size: 10px;
  color: var(--muted);
  opacity: .8;
}
/* 15 (3 PM) at right-inner; 18 (6 PM) at bottom-inner; 21 (9 PM) at left-inner.
   These fall between the white-frame border and the center button. */
.tcTickPM.tp15 { right: 50px; top: 50%; transform: translateY(-50%); }
.tcTickPM.tp18 { bottom: 44px; left: 50%; transform: translateX(-50%); }
.tcTickPM.tp21 { left: 50px; top: 50%; transform: translateY(-50%); }
/* Needle — thin line from center to knob */
.tcNeedle {
  position: absolute;
  left: 50%; top: 50%;
  width: 4px;
  height: calc(var(--tcSize) * 0.36);
  background: #22c55e;
  border-radius: 99px;
  transform-origin: 50% 100%;
  transform: translate(-50%, -100%) rotate(0deg);
  z-index: 3;
  pointer-events: none;
}
/* Knob — circle that rides the active ring */
.tcKnob {
  position: absolute;
  left: 50%; top: 50%;
  width: 26px; height: 26px;
  border-radius: 999px;
  background: #22c55e;
  border: 4px solid var(--panel);
  box-shadow: 0 8px 18px rgba(34,197,94,.35);
  transform: translate(-50%, -50%) rotate(0deg) translateY(calc(var(--tcSize) * -0.36));
  z-index: 4;
  transition: background-color .12s, box-shadow .12s;
  pointer-events: none;
}
/* Center tap-to-confirm button — absolute-positioned over dial center */
.tcCenter {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  border: 0;
  width: calc(var(--tcSize) * 0.42);
  height: calc(var(--tcSize) * 0.42);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 2px;
  font: inherit;
  transition: transform .08s, background .15s, box-shadow .15s;
  padding: 0 6px;
}
.tcCenter:active { transform: translate(-50%, -50%) scale(.96); }
.tcCenter.start { background: linear-gradient(180deg, var(--accent-2) 0%, var(--accent) 100%); box-shadow: 0 14px 28px rgba(20,184,166,.35); }
.tcCenter.end   { background: linear-gradient(180deg, var(--accent) 0%, #0F766E 100%); box-shadow: 0 14px 28px rgba(15,118,110,.35); }
.tcCenter.done  { background: linear-gradient(180deg, #1f2937 0%, #0f172a 100%); box-shadow: 0 12px 24px rgba(15,23,42,.30); }
.tcCenter .tcStep {
  font-size: 9px; font-weight: 900; opacity: .85;
  text-transform: uppercase; letter-spacing: .3px;
  white-space: nowrap; max-width: 95%;
  overflow: hidden; text-overflow: ellipsis;
}
.tcCenter strong {
  /* Scale text to the actual dial size (JS sets --tcSize). The clamp lower
     bound keeps small dials readable; the upper bound prevents the time from
     dominating the button on the big desktop dial. */
  font-size: clamp(15px, calc(var(--tcSize, 220px) * 0.108), 26px);
  font-weight: 900; letter-spacing: -.5px;
  line-height: 1; margin: 2px 0;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  max-width: 100%;
}
.tcCenter { padding: 0 3px; }
.tcCenter .tcHint {
  font-size: 9px; opacity: .7;
  white-space: nowrap; max-width: 95%;
  overflow: hidden; text-overflow: ellipsis;
}

/* Quick-adjust row */
.tcQuick {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
}
.tcQuickBtn {
  font: inherit;
  cursor: pointer;
  border: 1px solid var(--border2);
  background: var(--panel);
  color: var(--text);
  border-radius: 10px;
  padding: 6px 0;
  font-size: 11px; font-weight: 900;
  transition: background-color .12s;
}
.tcQuickBtn:hover { background: var(--lift); }
.tcQuickBtn:active { transform: scale(.97); }

/* Description with floating label */
.tcDesc {
  position: relative;
}
.tcDesc label {
  position: absolute; left: 12px; top: 6px; z-index: 2;
  font-size: 9px; font-weight: 900;
  text-transform: uppercase; letter-spacing: .5px;
  color: var(--muted); pointer-events: none;
}
.tcDesc textarea {
  width: 100%;
  border: 1px solid var(--border2);
  background: var(--panel);
  color: var(--text);
  border-radius: 14px;
  padding: 19px 12px 7px;
  font: inherit;
  font-size: 13px; font-weight: 700;
  resize: vertical;
  min-height: 52px;
  outline: none;
}
.tcDesc textarea:focus {
  border-color: rgba(20,184,166,.55);
  box-shadow: 0 0 0 3px rgba(20,184,166,.12);
}

/* Add Entry button — Vebit teal brand color, compact for phone */
.tcSaveBtn {
  border: 0;
  border-radius: 10px;
  background: linear-gradient(180deg, var(--accent-2) 0%, var(--accent) 100%);
  color: #fff;
  font: inherit;
  font-size: 13px; font-weight: 900;
  padding: 7px;
  cursor: pointer;
  box-shadow: 0 5px 12px rgba(20,184,166,.28);
  transition: transform .08s, filter .12s;
}
.tcSaveBtn:active { transform: scale(.99); }
.tcSaveBtn:hover { filter: brightness(1.05); }

/* Tabs panel — separate white card below the console. Collapsed by default. */
.tcTabsPanel {
  background: var(--card-bg, var(--panel));
  border: 1px solid var(--border2);
  border-radius: 18px;
  margin-bottom: 12px;
  box-shadow: 0 6px 22px rgba(15,23,42,.05);
  overflow: hidden;
  flex-shrink: 0;
}

/* 2026-05-11 scroll-flip layout: console fills the viewport, scrolling down
   snaps instantly to the below section (history / admin / settings). State
   persists because the console DOM never re-renders on history-tab switches.
   2026-05-27: snap is MOBILE-ONLY now. On desktop scroll-snap-mandatory feels
   like the page is fighting the mouse-wheel — user reported it as flippy/
   uncomfortable. Mobile keeps snap because the page-flip pattern works well
   with touch flicks. We scope the snap rule via @media (max-width:767px). */
/* 3.0.53: mobile snap relaxed to PROXIMITY — mandatory was causing
   iOS users to get bounced back up when they scrolled to the bottom of
   the history section (snap engine pulled them to the previous snap
   point + momentum scroll fought it = "page pushes me back up"). With
   proximity, snap kicks in only when the scroll position is already
   near a snap target — long lists scroll freely.
   Desktop still has no snap per user note. */
@media (max-width: 767px) {
  body.tcSnapScroll, html:has(body.tcSnapScroll) {
    scroll-snap-type: y proximity;
    scroll-behavior: smooth;
    scroll-padding-top: 60px;
    overscroll-behavior-y: contain;
  }
}
/* Kill snap-type while the user is typing — keyboard pop on iOS scrolls
   the focused input into view but snap fights it. The .tc-input-focus
   class is a JS fallback for browsers without :has(). */
body.tcSnapScroll:has(.tcConsole :is(input, textarea, select, [contenteditable]):focus),
body.tcSnapScroll.tc-input-focus {
  scroll-snap-type: none;
}
.tcConsole {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 14px;       /* breathing room above the clock so it doesn't kiss the header */
  padding-bottom: 6px;
}
.tcBelow { padding-top: 14px; }
/* Mobile: page-flip snap (console first, history second) + viewport-height
   floor so each section is its own page. Desktop strips both so the
   layout flows naturally without dead viewport gaps.
   3.0.53: dropped scroll-snap-stop:always — combined with mandatory+iOS
   momentum scroll it was hijacking the history scroll on long lists. With
   proximity snap-type (above) + no snap-stop, the user can scroll PAST
   a snap target if their fling has enough momentum, and snap only
   "magnets" near sections boundaries. */
@media (max-width: 767px) {
  .tcConsole {
    min-height: calc(100dvh - 60px);
    scroll-snap-align: start;
  }
  .tcBelow {
    min-height: calc(100dvh - 60px);
    scroll-snap-align: start;
  }
}
@media(min-width:768px) { .tcBelow { padding-top: 8px; } }
/* Reverted 2026-05-24: notandi vill bara up/down layout, ekki side-by-side.
   Áður hér: @media (min-width:1100px) sem braut scroll-snap og setti
   tcConsole + tcBelow í grid-2cols með sticky console. Tók í burtu —
   page-flip layout (console fyrst, history neðar) er sami á öllum
   skjástærðum núna. */
/* Sticky period header inside My History so prev/next stays reachable while
   scrolling through day rows. Offsets differ for admin (tabs at top:60px) vs
   non-admin (no tabs). Background is opaque so day rows don't bleed through. */
.tcBelow .periodCard {
  /* Override: don't clip the sticky child via border-radius+overflow. */
  overflow: visible;
}
/* 3.0.47: stack via CSS var --tcTabsH so JS can measure the actual tabs
   height after render. Defaults to 0 when tabs aren't present (non-admin). */
.tcBelow .periodCardHead {
  position: sticky;
  top: calc(60px + var(--tcTabsH, 0px));
  z-index: 8;
  background: var(--card-bg, var(--panel));
}
@media(min-width:768px) {
  .tcBelow .periodCardHead { top: calc(68px + var(--tcTabsH, 0px)); }
}
.tcBelowTabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  padding: 6px;
  background: var(--card-bg, var(--panel));
  border: 1px solid var(--border2);
  border-radius: 14px;
  margin-bottom: 12px;
  position: sticky;
  top: 60px;
  z-index: 30;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}
.tcBelowBody { padding-bottom: 24px; }
.tcScrollHint {
  text-align: center;
  font-size: 11px; font-weight: 700;
  color: var(--muted);
  padding: 6px 0 2px;
  letter-spacing: .4px;
  text-transform: uppercase;
  opacity: .6;
  animation: tcScrollHintPulse 2s ease-in-out infinite;
}
@keyframes tcScrollHintPulse {
  0%, 100% { opacity: .4; transform: translateY(0); }
  50% { opacity: .85; transform: translateY(2px); }
}
/* Desktop: no page-flip, no scroll hint needed — History tabs sit right
   under the Add Entry button instead. */
@media(min-width:768px) { .tcScrollHint { display: none; } }
@media(min-width:768px){
  .container#timeRoot { margin-left: var(--sidebar-w, 210px); }
}
.tcTabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  padding: 6px;
}
.tcTabBtn {
  font: inherit;
  cursor: pointer;
  border: 0;
  background: transparent;
  color: var(--sub);
  border-radius: 10px;
  padding: 6px 4px;
  font-size: 12px; font-weight: 900;
  transition: background .12s, color .12s;
}
.tcTabBtn:hover { background: var(--lift); }
.tcTabBtn.active { background: #18181b; color: #fff; }
.tcTabBody {
  border-top: 1px solid var(--border);
  padding: 8px 12px 12px;
}

/* ── Single-thumb sequential dial (Tími manual entry) ── */
.entryDial {
  background: var(--lift);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 8px 8px;
  margin-bottom: 8px;
}
/* Soft drop-shadow on the dial face itself for visual depth */
.entryDialSvg { filter: drop-shadow(0 8px 22px rgba(15,23,42,.08)); }
/* Start | End | Total card row above the dial (mockup-style) */
.entryDialCards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  margin-bottom: 6px;
}
.entryDialCard {
  background: var(--card-bg, var(--panel));
  border: 1.5px solid var(--border2);
  border-radius: 10px;
  padding: 5px 9px;
  min-width: 0;
  transition: border-color .12s, background-color .12s, box-shadow .12s;
}
.entryDialCard .edcLabel {
  display: block;
  font-size: 9px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .5px;
  color: var(--muted);
}
.entryDialCard .edcValue {
  display: block;
  margin-top: 2px;
  font-size: 17px; font-weight: 900;
  letter-spacing: -.5px;
  color: var(--text);
  line-height: 1;
}
/* Active card (currently picking that one) — green/blue glow */
.entryDialCard#epArr.active {
  border-color: #22c55e;
  box-shadow: 0 0 0 3px rgba(34,197,94,.10);
}
.entryDialCard#epDep.active {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59,130,246,.10);
}
/* Confirmed (already picked) */
.entryDialCard#epArr.confirmed { background: rgba(34,197,94,.08); }
.entryDialCard#epArr.confirmed .edcValue { color: #16a34a; }
.entryDialCard#epDep.confirmed { background: rgba(59,130,246,.08); }
.entryDialCard#epDep.confirmed .edcValue { color: #2563eb; }
/* Total — emphasized when both set */
.entryDialCard.total .edcValue { color: var(--muted); }
.entryDialCard.total.confirmed {
  background: rgba(245,158,11,.08);
  border-color: rgba(245,158,11,.5);
}
.entryDialCard.total.confirmed .edcValue { color: #b45309; }

.entryDialSvgWrap {
  text-align: center;
  margin: 0;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
/* Inner container is the positioning context for the absolute-centered button.
   Sized to the SVG so the button lines up with the SVG's actual middle, not the row.
   Use inline-block + text-align centering on the wrapper — most reliable cross-browser. */
.entryDialSvgInner {
  position: relative;
  display: inline-block;
  line-height: 0;
  vertical-align: top;
}
/* Scale dial to fit phone screens — clamp keeps it readable on small + decent on tablet */
.entryDialSvg {
  width: clamp(220px, 60vw, 280px);
  height: auto;
  cursor: crosshair;
  display: block;
}
/* Ring tracks + tick labels — theme-aware so visible in both light and dark */
.dialRingTrack { stroke: var(--border2); }
.dialTickAM {
  fill: var(--text);
  font-size: 11px;
  font-weight: 700;
}
.dialTickPM {
  fill: var(--sub);
  font-size: 10px;
  font-weight: 700;
}
/* Center tap-to-confirm button — smaller so it doesn't cover ring labels.
   Mockup-inspired: gradient, deep colored shadow, soft transition. */
.entryDialCenter {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(86px, 24vw, 110px);
  height: clamp(86px, 24vw, 110px);
  border-radius: 999px;
  border: none;
  font: inherit;
  cursor: pointer;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  transition: transform .12s, background .15s, box-shadow .15s;
  padding: 0 4px;
}
.entryDialCenter:active { transform: translate(-50%, -50%) scale(.96); }
.entryDialCenter.start {
  background: linear-gradient(180deg, #34d399 0%, #16a34a 100%);
  box-shadow: 0 12px 24px rgba(34,197,94,0.40), 0 2px 6px rgba(34,197,94,0.30);
}
.entryDialCenter.end {
  background: linear-gradient(180deg, #60a5fa 0%, #2563eb 100%);
  box-shadow: 0 12px 24px rgba(59,130,246,0.40), 0 2px 6px rgba(59,130,246,0.30);
}
.entryDialCenter.done {
  background: linear-gradient(180deg, #1f2937 0%, #0f172a 100%);
  box-shadow: 0 10px 22px rgba(15,23,42,0.30), 0 2px 6px rgba(15,23,42,0.20);
}
.entryDialCenter .edcStep {
  font-size: 9px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .6px; opacity: .85;
}
.entryDialCenter .edcTime {
  font-size: 21px; font-weight: 900; letter-spacing: -.4px; line-height: 1;
  margin: 2px 0;
}
.entryDialCenter .edcHint { font-size: 9px; opacity: .7; }

.entryDialQuickRow {
  display: flex;
  gap: 5px;
  justify-content: center;
  flex-wrap: nowrap;
  margin-top: 6px;
}
.entryDialQuick {
  font: inherit;
  cursor: pointer;
  border: 1px solid var(--border2);
  background: var(--card-bg, var(--panel));
  color: var(--text);
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 700;
  transition: background-color .1s;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
}
.entryDialQuick:hover { background: var(--lift); }

/* ── History toggle button (collapsible bottom section) ── */
.historyToggleBtn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: var(--card-bg, var(--panel));
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 18px;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  cursor: pointer;
  margin: 16px 0 8px;
  transition: background-color .12s, border-color .12s;
}
.historyToggleBtn:hover { background: var(--lift); border-color: var(--border2); }
.historyToggleArrow {
  font-size: 14px; color: var(--muted); font-weight: 700;
}
.historyPanel {
  margin-top: 4px;
}

/* ── Payroll list (Tími history) — single white card með þunna dividers á milli daga ── */
.payrollListCard {
  background: var(--panel);
  border: 1px solid var(--border2);
  border-radius: 14px;
  padding: 0;
  margin-top: 8px;
  margin-bottom: 14px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
/* Each day row sits in the single card; thin border-bottom acts as divider */
.payrollListCard .dayRow {
  border-bottom: 1px solid var(--border);
}
.payrollListCard .dayRow:last-child {
  border-bottom: none;
}
/* Day-row hover lyftir bg-litinn subtly. Today heldur sínu blue tinted bg. */
.dayRow { transition: background-color .12s; cursor: pointer; }
.dayRow:not(.dayRowToday):hover { background-color: var(--lift); }
/* Hide row note on narrow phones — tap row to see full detail in expand panel */
@media (max-width: 480px) {
  .dayRowNote { display: none !important; }
}

.periodCard {
  background: var(--card-bg, var(--panel));
  border: var(--card-border, 1px solid var(--border));
  border-radius: var(--r);
  margin-bottom: 14px;
}
.periodCardHead {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .7px;
  color: var(--muted); display: flex; align-items: center;
  justify-content: space-between; gap: 10px;
}
.periodCardHead strong { color: var(--text); font-size: 12px; }
/* Cleaner stat cards (Time page) — endurhönnun 2026-05-09 til að matcha
   minimalisma mockup. Áður grid með 1px gap og border-bg. Núna sjálfstæð
   rounded cards með breathing room. */
.periodGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  background: transparent;
  padding: 0;
}
.periodCell {
  background: var(--s2);
  border: 1px solid var(--border2);
  border-radius: 14px;
  padding: 12px 14px;
  transition: border-color .15s;
  min-width: 0;
}
@media (max-width: 480px) {
  .periodCell { padding: 9px 11px; }
  .periodCellLabel { font-size: 9px !important; letter-spacing: .4px; }
  .periodCellVal   { font-size: 18px !important; }
  .periodCardHead  { padding: 8px 12px; }
}
.periodCell:hover { border-color: var(--border); }
.periodCellLabel {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .6px;
  color: var(--muted); margin-bottom: 6px;
}
.periodCellVal { font-size: 22px; font-weight: 900; letter-spacing: -.5px; }

.entriesList { }
.entryRow {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--border);
}
.entryRow:last-child { border-bottom: none; }
.entryDot {
  width: 8px; height: 8px; border-radius: 50%;
  flex-shrink: 0;
}
.entryDay { font-size: 12px; font-weight: 700; min-width: 52px; color: var(--sub); }
.entryTime { font-size: 12px; color: var(--sub); flex: 1; }
.entryNote { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100px; }
.entryHours { font-size: 13px; font-weight: 800; flex-shrink: 0; }

/* ─── RECEIPT LIST ────────────────────────────── */
.receiptRow {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.receiptRow:last-child { border-bottom: none; }
.receiptRow.is-finished { opacity: 0.5; }
.receiptThumb {
  width: 52px; height: 52px;
  background: var(--s2);
  border-radius: var(--r);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; flex-shrink: 0; overflow: hidden;
  border: 1px solid var(--border);
}
.receiptThumb img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r); }
.receiptInfo { flex: 1; min-width: 0; }
.receiptTitle { font-size: 14px; font-weight: 700; line-height: 1.3; }
.receiptMeta { font-size: 11px; color: var(--sub); margin-top: 2px; }
.receiptActions { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }

/* ─── CALENDAR ADMIN STATS BAR ───────────────── */
.calAdminStatsBar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--panel); border-bottom: 1px solid var(--border);
  padding: 10px 20px;
}
.calAdminStatsPeriod {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; color: var(--muted); white-space: nowrap;
}
.calAdminStatsCells { display: flex; gap: 1px; background: var(--border); border-radius: var(--r); overflow: hidden; }
.calAdminStatCell { background: var(--bg); padding: 6px 14px; }
.calAdminStatLabel { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin-bottom: 2px; }
.calAdminStatVal { font-size: 16px; font-weight: 900; }

/* ─── CALENDAR MEMOS ─────────────────────────── */
.calMemoDots { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 2px; }
.calMemoDot  { font-size: 10px; line-height: 1; cursor: default; }
.calDayPanelMemos {
  border-top: 1px solid var(--border);
  padding: 12px 16px 8px;
}
.calDayPanelMemosTitle {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; color: var(--muted); margin-bottom: 8px;
}
.calMemoItem {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 6px 0; border-bottom: 1px solid var(--border);
}
.calMemoText { flex: 1; font-size: 13px; line-height: 1.45; }
.calMemoDelete { flex-shrink: 0; opacity: .5; }
.calMemoDelete:hover { opacity: 1; }
.calMemoAddRow { display: flex; gap: 8px; margin-top: 8px; align-items: center; }
.memoSwatchRow { display: flex; gap: 6px; margin-bottom: 8px; }
.memoSwatch { width: 24px; height: 24px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; flex-shrink: 0; transition: transform 0.1s, border-color 0.1s; }
.memoSwatch:hover { transform: scale(1.15); }
.memoSwatch.selected { border-color: var(--text) !important; transform: scale(1.2); box-shadow: 0 0 0 2px var(--bg); }

/* ─── TOOL ROW ────────────────────────────────── */
/* 2026-05-26: stack actions below the info on phones so the buttons don't
   overlap or get clipped. Three+ action buttons on a 360px screen do not
   fit in a single row no matter how small. */
.toolRow {
  display: flex; align-items: center; gap: 12px;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--r); padding: 10px 14px; margin-bottom: 8px;
  flex-wrap: wrap;
}
.toolRowPhoto {
  width: 48px; height: 48px; flex-shrink: 0;
  border-radius: var(--r-md); overflow: hidden;
  background: var(--lift);
}
.toolNoPhoto {
  width: 48px; height: 48px; display: flex; align-items: center;
  justify-content: center; font-size: 22px;
}
.toolRowInfo { flex: 1; min-width: 0; }
.toolRowName { font-size: 14px; font-weight: 700; margin-bottom: 3px; word-break: break-word; }
.toolRowStatus { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.toolRowActions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; flex-wrap: wrap; }
@media (max-width: 560px) {
  .toolRow { padding: 10px 12px; gap: 10px; }
  /* Actions break onto their own line so they can't overlap the info column. */
  .toolRowActions {
    flex-basis: 100%;
    justify-content: flex-end;
    padding-top: 4px;
    border-top: 1px dashed var(--border);
    margin-top: 4px;
  }
  .toolRowActions .btn { padding: 6px 10px; font-size: 12px; }
}

/* ─── TOOL ROW (clean) ────────────────────────── */
.toolRowClean {
  display: flex; align-items: center; gap: 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 12px 14px;
  margin-bottom: 8px;
}
.toolIconBox {
  width: 40px; height: 40px;
  background: var(--s2); border-radius: var(--r);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0;
}
.toolName { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.toolMeta { font-size: 11px; color: var(--sub); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.badge.in-garage  { background: rgba(34,197,94,0.12);   color: #22c55e; }
.badge.signed-out { background: rgba(232,25,44,0.12);   color: #e8192c; }
.badge.on-site    { background: rgba(59,130,246,0.12);  color: #3b82f6; }

/* ─── MOBILE TASK SHEET ──────────────────────── */
.mobileTaskSheet {
  display: none; position: fixed; inset: 0; z-index: 300;
  pointer-events: none;
}
.mobileTaskSheet.open { display: block; pointer-events: auto; }
.mobileTaskSheetBackdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.5);
  opacity: 0; transition: opacity .3s;
}
.mobileTaskSheet.open .mobileTaskSheetBackdrop { opacity: 1; }
.mobileTaskSheetPanel {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: var(--panel);
  border-radius: 18px 18px 0 0;
  padding: 0 16px env(safe-area-inset-bottom,16px);
  max-height: 85dvh; overflow-y: auto;
  transform: translateY(100%); transition: transform .32s cubic-bezier(0.32,0.72,0,1);
}
.mobileTaskSheet.open .mobileTaskSheetPanel { transform: translateY(0); }
.mobileTaskSheetHandle {
  width: 32px; height: 3px; background: var(--border2);
  border-radius: 2px; margin: 10px auto 14px; display: block;
}

/* ─── PROJECT PAGE ───────────────────────────── */
.projHero {
  background: var(--card-bg, var(--panel));
  border: var(--card-border, 1px solid var(--border));
  border-radius: var(--r-lg); overflow: hidden; margin-bottom: 20px;
}
.projCoverImg {
  height: 120px; position: relative; background: var(--lift);
}
.projInfo { padding: 16px 16px 12px; }
.projInfoTop { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.projActionsCol { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; flex-shrink: 0; }
.projName { font-size: 20px; font-weight: 800; line-height: 1.2; }
.projStatRow { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.projStatChip {
  display: flex; flex-direction: column; align-items: center;
  padding: 6px 14px; background: var(--lift); border-radius: var(--r);
  border: 1px solid var(--border2); min-width: 56px; text-decoration: none;
  font-family: var(--font); transition: background .12s;
}
.projStatChip:hover { background: var(--s2); }
.projStatNum { font-size: 18px; font-weight: 800; line-height: 1; }
.projStatLabel { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin-top: 2px; }
.projAddressLink {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 6px; padding: 3px 9px;
  background: var(--lift); border: 1px solid var(--border2);
  border-radius: var(--r); font-size: 11px; color: var(--fg); text-decoration: none;
  transition: background .12s;
}
.projAddressLink:hover { background: var(--s2); }

/* Project sections */
.projSection { margin-bottom: 24px; }

/* Project notes — compact list layout.
   One row per note (first line of body shown as the title), click to expand
   the full body + image grid. Pinned notes get a thin amber left-stripe and
   sort to the top (server-side ORDER BY pinned DESC, updated_at DESC). */
.projNoteList {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
}
.projNoteItem {
  border-bottom: 1px solid var(--border);
}
.projNoteItem:last-child { border-bottom: none; }
.projNoteItem--pinned > .projNoteRow { border-left: 3px solid var(--amber, #f59e0b); }
.projNoteRow {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
  min-width: 0;
}
.projNoteRow:hover { background: var(--lift); }
.projNoteRowPin { font-size: 12px; flex-shrink: 0; }
.projNoteRowPinSpacer { width: 14px; flex-shrink: 0; }
.projNoteRowTitle {
  flex: 1; min-width: 0;
  font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--text);
}
.projNoteRowAtt {
  font-size: 11px; font-weight: 700;
  color: var(--blue, #3b82f6);
  padding: 2px 6px; border-radius: 6px;
  background: rgba(59,130,246,.10);
  flex-shrink: 0;
}
.projNoteRowAuthor {
  font-size: 11px; font-weight: 600;
  color: var(--muted);
  flex-shrink: 0;
  max-width: 90px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.projNoteRowWhen {
  font-size: 11px; font-weight: 500;
  color: var(--muted);
  flex-shrink: 0;
  min-width: 24px; text-align: right;
}
.projNoteRowCaret {
  font-size: 11px; color: var(--muted);
  flex-shrink: 0;
  transition: transform .15s;
}
.projNoteExpand {
  padding: 4px 14px 14px 30px;
  background: rgba(0,0,0,.02);
  border-top: 1px dashed var(--border);
}
[data-theme="dark"] .projNoteExpand { background: rgba(255,255,255,.02); }
.projNoteExpandBody {
  font-size: 13px; line-height: 1.55; color: var(--text);
  white-space: pre-wrap; word-wrap: break-word;
  margin-bottom: 10px;
}
.projNoteExpandActions {
  display: flex; align-items: center; gap: 6px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

/* Memos page — compact checklist-row layout for shopping/material lists.
   One row per memo: checkbox + title + meta + delete. Click row to expand
   and see photos / full body. */
.memoList {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
}
.memoRow {
  display: grid;
  grid-template-columns: 32px 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  transition: background .12s;
}
.memoRow:last-child { border-bottom: none; }
.memoRow:hover { background: var(--lift); }
.memoRow--done { opacity: .55; }
.memoCheck {
  width: 24px; height: 24px;
  border: 2px solid var(--border2);
  border-radius: 6px;
  background: transparent;
  color: var(--green, #22c55e);
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
  padding: 0;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.memoCheck:hover { border-color: var(--green, #22c55e); }
.memoRow--done .memoCheck { background: var(--green, #22c55e); color: #fff; border-color: var(--green, #22c55e); }
.memoRowMain {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.memoRowTitle {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.memoRow--done .memoRowTitle {
  text-decoration: line-through;
  color: var(--muted);
}
.memoRowMeta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--muted);
}
.memoRowAtt {
  background: rgba(59,130,246,.10);
  color: var(--blue, #3b82f6);
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 6px;
  margin-left: auto;
}
.memoRowCaret {
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
  padding: 0 4px;
  transition: transform .15s;
}
.memoRowCaret:hover { color: var(--text); }
.memoRowDel {
  background: transparent;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  font-size: 14px;
  padding: 4px 6px;
  border-radius: 6px;
}
.memoRowDel:hover { color: var(--red); background: rgba(232,25,44,.08); }
.memoRowExpand {
  grid-column: 1 / -1;
  background: var(--lift);
  border-top: 1px dashed var(--border);
  padding: 10px 14px 12px 50px;
  margin: 6px -12px -9px -12px;
}
.memoRowBody {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
  white-space: pre-wrap;
  word-wrap: break-word;
  margin-bottom: 10px;
}
.memoRowPhotos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.memoRowThumb {
  display: block;
  width: 84px; height: 84px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.memoRowThumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.memoRowThumb:hover { border-color: var(--blue, #3b82f6); }
@media (max-width: 480px) {
  .memoRow { padding: 8px 10px; gap: 8px; grid-template-columns: 28px 1fr auto auto; }
  .memoCheck { width: 22px; height: 22px; }
  .memoRowTitle { font-size: 13px; }
  .memoRowThumb { width: 72px; height: 72px; }
}
.projNoteThumbs {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.projNoteThumb {
  display: block; width: 96px; height: 96px;
  border-radius: 8px; overflow: hidden;
  border: 1px solid var(--border);
  background: var(--lift);
  flex-shrink: 0;
}
.projNoteThumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.projNoteThumb:hover { border-color: var(--blue, #3b82f6); }
@media (max-width: 480px) {
  .projNoteRow { padding: 9px 10px; gap: 6px; font-size: 12px; }
  .projNoteRowAuthor { display: none; }   /* keep title + att + when only on phone */
  .projNoteExpand { padding: 4px 10px 10px 22px; }
  .projNoteThumb { width: 78px; height: 78px; }
}

/* Drag-and-drop image highlight — shared across all upload targets. */
.imgDropActive {
  outline: 2px dashed var(--blue, #3b82f6);
  outline-offset: -2px;
  background: rgba(59,130,246,.06);
}

/* Note editor modal — attachments list */
.projNoteEditThumbs {
  display: flex; flex-wrap: wrap; gap: 6px;
  min-height: 0;
}
.projNoteEditThumb {
  position: relative;
  width: 84px; height: 84px;
  border-radius: 8px; overflow: hidden;
  border: 1px solid var(--border2);
}
.projNoteEditThumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.projNoteEditThumbX {
  position: absolute; top: 3px; right: 3px;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 0; background: rgba(0,0,0,.7); color: #fff;
  font-size: 11px; font-weight: 800;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.projNoteEditThumbX:hover { background: var(--red); }
.projSectionHdr {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px; flex-wrap: wrap; gap: 8px;
}
.projSectionTitle {
  font-size: 13px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted);
  display: flex; align-items: center; gap: 6px;
}

/* Media grid — 3 equal cards */
.projMediaGrid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
@media(max-width:480px){ .projMediaGrid { grid-template-columns: 1fr; } }
.projMediaCard {
  background: var(--card-bg, var(--panel));
  border: var(--card-border, 1px solid var(--border));
  border-radius: var(--r-md); overflow: hidden;
  display: flex; flex-direction: column;
}
.projMediaCardHdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px 8px; border-bottom: 1px solid var(--border);
}
.projMediaCardTitle { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; }
.projMediaCount { font-size: 11px; font-weight: 700; color: var(--muted); background: var(--lift); padding: 1px 7px; border-radius: 9px; }
.projMediaPreview { flex: 1; padding: 8px; min-height: 60px; }
.projMediaActions { display: flex; gap: 6px; padding: 8px 10px; border-top: 1px solid var(--border); }
.projMediaActions .btn { flex: 1; }

/* Task photo "→ task" link overlay on thumbnails */
.mediaThumbWrap { position: relative; }
.mediaTaskLink {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,.75));
  color: #fff; font-size: 10px; font-weight: 700;
  text-align: center; padding: 14px 4px 4px;
  text-decoration: none; opacity: 1; pointer-events: auto;
  transition: background .15s;
}
.mediaThumbWrap:hover .mediaTaskLink { background: linear-gradient(transparent, rgba(0,0,0,.9)); }

/* ─── DASHBOARD WEATHER / CLOCKED-IN ────────── */
.dashClockedInBar {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 8px; padding: 6px 12px;
  background: rgba(34,197,94,.1); border: 1px solid rgba(34,197,94,.3);
  border-radius: var(--r); font-size: 12px; color: var(--green);
  font-weight: 600; max-width: 100%; flex-wrap: wrap;
}

/* ─── DASHBOARD TASK EXPAND — COMMENTS ──────── */
.teComments { margin-bottom: 8px; }
.teCommentsList { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.teCommentRow {
  display: flex; align-items: baseline; gap: 6px;
  font-size: 12px; line-height: 1.4; flex-wrap: wrap;
}
.teCommentWho { font-weight: 700; color: var(--text); white-space: nowrap; }
.teCommentWhen { font-size: 10px; color: var(--muted); white-space: nowrap; }
.teCommentText { color: var(--sub); flex: 1; }
.teCommentAdd { display: flex; gap: 6px; align-items: center; }
.teCommentInput {
  flex: 1; font-size: 12px; padding: 5px 9px;
  background: var(--lift); border: 1px solid var(--border2);
  border-radius: var(--r); color: var(--text);
  font-family: var(--font);
}
.teCommentInput:focus { outline: none; border-color: var(--blue); }

/* ─── PROJECT PHOTO GALLERY ──────────────────── */
.projPhotoGalleryPreview { padding: 4px 0; }
.projPhotoGrid6 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
}
@media(max-width:600px){ .projPhotoGrid6 { grid-template-columns: repeat(3, 1fr); } }
.projPhotoGrid6 .mediaThumbWrap {
  aspect-ratio: 1; overflow: hidden; border-radius: var(--r);
  background: var(--lift);
}
.projPhotoGrid6 .mediaThumb {
  width: 100%; height: 100%; object-fit: cover;
  display: block; cursor: zoom-in;
  transition: transform .18s;
}
.projPhotoGrid6 .mediaThumbWrap:hover .mediaThumb { transform: scale(1.04); }
.projPhotoMore {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  background: var(--lift); border-radius: var(--r);
  font-size: 13px; font-weight: 700; color: var(--sub);
  cursor: pointer; border: 1px dashed var(--border2);
  transition: background .15s;
}
.projPhotoMore:hover { background: var(--s2); color: var(--text); }
.mediaThumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.mediaDelBtn {
  position: absolute; top: 4px; right: 4px;
  background: rgba(0,0,0,.65); color: #fff;
  border: none; border-radius: 50%; width: 20px; height: 20px;
  font-size: 11px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .15s; padding: 0;
}
.mediaThumbWrap:hover .mediaDelBtn { opacity: 1; }

/* ─── DRAWINGS THUMBNAIL GRID ────────────────── */
.projDrawingsFilesRow {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
@media(max-width:640px){ .projDrawingsFilesRow { grid-template-columns: 1fr; } }
.projDrawingsCard, .projFilesCard { margin-bottom: 0 !important; }
.projDrawingGrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 6px; padding: 4px 0;
}
.projDrawingThumb {
  position: relative; border-radius: var(--r);
  overflow: hidden; background: var(--lift);
  aspect-ratio: 1;
}
.projDrawingThumb img {
  width: 100%; height: 100%; object-fit: cover;
  display: block; cursor: zoom-in;
  transition: transform .18s;
}
.projDrawingThumb:hover img { transform: scale(1.04); }
.projDrawingThumbOverlay {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center; gap: 4px;
  opacity: 0; transition: opacity .15s;
}
.projDrawingThumb:hover .projDrawingThumbOverlay { opacity: 1; }
.projDrawingThumbName {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: rgba(0,0,0,.6); color: #fff;
  font-size: 9px; padding: 2px 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ─── PROJECT FILE ROWS ──────────────────────── */
.projFileRows { display: flex; flex-direction: column; gap: 4px; padding: 4px 0; }
.projFileRow {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0; border-bottom: 1px solid var(--border);
}
.projFileRow:last-child { border-bottom: none; }
.projFileIcon { font-size: 18px; flex-shrink: 0; }
.projFileName { flex: 1; font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ─── PHOTO MANAGER (pmCard, pmGrid, etc.) ───── */
.pmGrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px,1fr));
  gap: 8px; padding: 8px 0; min-height: 40px;
}
.pmGrid.pmDragOver { background: rgba(59,130,246,.08); border-radius: var(--r); }
.pmCard {
  position: relative; border-radius: var(--r);
  overflow: hidden; background: var(--lift);
  aspect-ratio: 1; cursor: pointer;
}
.pmCard.pmDragging { opacity: .5; }
.pmCardInner { width: 100%; height: 100%; }
.pmThumb { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .18s; }
.pmCard:hover .pmThumb { transform: scale(1.04); }
.pmCardOverlay {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,.7));
  padding: 24px 8px 8px;
  opacity: 0; transition: opacity .15s;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 6px;
}
.pmCard:hover .pmCardOverlay { opacity: 1; }
.pmCardMeta { flex: 1; min-width: 0; }
.pmCardName { font-size: 11px; font-weight: 700; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pmCardSub { font-size: 10px; color: rgba(255,255,255,.7); }
.pmDelBtn {
  background: rgba(200,30,30,.8); color: #fff; border: none;
  border-radius: 50%; width: 22px; height: 22px;
  font-size: 12px; cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.pmFolder { margin-bottom: 16px; }
.pmFolderHead {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; background: var(--lift);
  border-radius: var(--r); margin-bottom: 6px;
  cursor: pointer; user-select: none;
}
.pmFolderName { font-size: 13px; font-weight: 700; flex: 1; }
.pmFolderCt { font-size: 11px; color: var(--muted); }
.pmSection { margin-bottom: 12px; }
.pmSectionLabel { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin-bottom: 6px; }
.pmDropHint { display: none; }
.pmGrid.pmDragOver .pmDropHint { display: block; text-align: center; font-size: 12px; color: var(--muted); padding: 12px; }

/* ─── MEDIA VIEWER MODAL (drawings/files list) ── */
.mediaViewFileList { display: flex; flex-direction: column; gap: 8px; }
.mediaViewFileRow {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--border);
}
.mediaViewFileRow:last-child { border-bottom: none; }
.mediaViewFileThumbnail { width: 56px; height: 56px; object-fit: cover; border-radius: var(--r); flex-shrink: 0; }
.mediaViewFileIcon { font-size: 28px; flex-shrink: 0; }
.mediaViewFileName { flex: 1; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ─── INSPECTION ─────────────────────────────── */
.areaTab {
  padding: 5px 12px; border-radius: 20px;
  border: 1px solid var(--border2); background: var(--lift);
  font-size: 12px; font-weight: 700; cursor: pointer;
  color: var(--sub); transition: background .12s, color .12s;
}
.areaTab.active {
  background: var(--red); border-color: var(--red);
  color: #fff;
}
.inspCatHeader {
  font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .6px; color: var(--muted);
  padding: 8px 0 4px; border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.inspCheckGrid { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.inspItem {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 6px 0; border-bottom: 1px solid var(--border);
}
.inspItem:last-child { border-bottom: none; }
.inspCheckBtn {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--border2);
  background: var(--lift); cursor: pointer;
  flex-shrink: 0; margin-top: 1px;
  position: relative; transition: background .12s, border-color .12s;
  display: flex; align-items: center; justify-content: center;
}
.inspCheckBtn.checked {
  background: var(--green); border-color: var(--green);
}
.inspCheckBtn.checked::after {
  content: '';
  display: block; width: 6px; height: 10px;
  border: 2px solid #fff; border-top: none; border-left: none;
  transform: rotate(45deg) translate(-1px, -1px);
}
.inspItemLabel { font-size: 13px; font-weight: 600; line-height: 1.4; }
.inspCheckmarks { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.inspMark {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700; padding: 2px 7px;
  border-radius: 10px; border: 1px solid transparent;
}
.inspTextInput {
  font-size: 13px; padding: 6px 10px;
  background: var(--lift); border: 1px solid var(--border2);
  border-radius: var(--r); color: var(--text);
  font-family: var(--font); flex: 1; max-width: 360px;
}
.inspTextInput:focus { outline: none; border-color: var(--blue); }

/* ─── INSPECTION TEMPLATE SETTINGS ──────────────────── */
.inspSettingRow {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-bottom: 1px solid var(--border);
  background: var(--panel); transition: background .1s;
}
.inspSettingRow:last-child { border-bottom: none; }
.inspSettingRow:hover { background: var(--lift); }
.inspSettingRow.dragOver { background: rgba(59,130,246,.08); outline: 2px dashed var(--blue); outline-offset: -2px; }
.inspSettingLabel { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.4; }

/* ─── INSPECTION TEMPLATE EDITOR (settings) ─────────── */
.inspTplCat { margin-bottom: 10px; border: 1px solid var(--border2); border-radius: var(--r-lg); overflow: hidden; }
.inspTplCatHdr {
  display: flex; align-items: center; gap: 4px;
  padding: 9px 12px; background: var(--lift); border-bottom: 1px solid var(--border2);
}
.inspTplCatName { flex: 1; font-size: 13px; font-weight: 800; color: var(--text); }
.inspTplItems { background: var(--panel); }
.inspInlineInput {
  background: var(--lift); border: 1px solid var(--blue);
  border-radius: var(--r); padding: 3px 8px; color: var(--text);
  font-family: var(--font); outline: none; font-size: 13px;
}

/* ─── INSPECTION FORM AREA TABS ──────────────────────── */
.inspAreaTab {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 20px;
  border: 1px solid var(--border2); background: var(--lift);
  font-size: 12px; font-weight: 700; cursor: pointer; color: var(--sub);
  transition: background .12s, border-color .12s;
}
.inspAreaTab.active { background: var(--red); border-color: var(--red); color: #fff; }
.inspAreaBadge { font-size: 10px; padding: 1px 6px; border-radius: 10px; font-weight: 700; }

/* ─── INSPECTION FORM CATEGORY CARD ─────────────────── */
.inspCatCard { border: 1px solid var(--border2); border-radius: var(--r-lg); overflow: hidden; }
.inspCatCardHdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 14px; background: var(--lift); border-bottom: 1px solid var(--border2);
}
.inspCatCardTitle { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--text); }
.inspCatCardCount { font-size: 11px; font-weight: 700; color: var(--muted); padding: 1px 7px; border-radius: 10px; background: var(--panel); }
.inspCatCardCount.done { background: rgba(46,204,113,.18); color: var(--green); }

/* ─── INSPECTION ITEM GRID ───────────────────────────── */
.inspItemGrid {
  display: grid; gap: 1px; padding: 6px;
  background: var(--border); /* gap shows as grid lines */
}
.inspItemCell {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 9px 11px; background: var(--panel);
  transition: background .1s; cursor: default;
}
.inspItemCell:hover { background: var(--lift); }
.inspItemCell.done { background: rgba(46,204,113,.05); }
.inspItemCell.inspCellOver { outline: 2px dashed var(--blue); outline-offset: -2px; }

.inspItemLabel { font-size: 12px; font-weight: 600; color: var(--text); line-height: 1.4; }
.inspWhoWhen { font-size: 10px; color: var(--muted); margin-top: 3px; line-height: 1.5; }

/* Checkbox button */
.inspItemCheck {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; margin-top: 1px;
  border: 2px solid var(--border2); background: var(--lift);
  cursor: pointer; position: relative; transition: background .15s, border-color .15s;
}
.inspItemCheck.checked { background: var(--green); border-color: var(--green); }
.inspItemCheck.checked::after {
  content: ''; display: block; width: 5px; height: 10px;
  border: 2px solid #fff; border-top: none; border-left: none;
  transform: rotate(45deg); position: absolute; top: 2px; left: 6px;
}
/* Dummy check indicator for text fields */
.inspItemCheckDummy {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; margin-top: 1px;
  border: 2px solid var(--border2); background: var(--lift); pointer-events: none;
}
.inspItemCheckDummy.checked { background: var(--green); border-color: var(--green); }

/* Inline text input */
.inspTextInputInline {
  font-size: 12px; padding: 4px 7px; flex: 1; min-width: 0;
  background: var(--lift); border: 1px solid var(--border2);
  border-radius: var(--r); color: var(--text); font-family: var(--font); outline: none;
}
.inspTextInputInline:focus { border-color: var(--blue); }

/* ─── RECEIPT THUMB BIGGER ───────────────────── */
.receiptThumb {
  width: 80px !important; height: 80px !important;
  min-width: 80px !important;
}

/* ─── TIME WHEEL MOBILE FIX ──────────────────── */
#ttTimeWheels { overflow-x: hidden; }
@media(max-width:480px){
  #ttTimeWheels { gap: 8px !important; }
  .timeWheelNew .twNVal { font-size: 26px; }
  .timeWheelNew .twNBtn { width: 44px; height: 30px; }
}

/* ─── MOBILE HAMBURGER / RAIL DRAWER ────────── */
.mobileOnly { display: none; }
@media(max-width:767px){
  .mobileOnly { display: flex; }
  .rail {
    transform: translateX(-100%);
    transition: transform .25s ease;
    z-index: 200;
  }
  .rail.mobile-open {
    display: flex !important;
    transform: translateX(0);
  }
  /* On mobile the rail should size to the viewport — no inner scroll on
     .rail-nav. We shrink the header padding + rail logo so everything
     fits in a typical phone height (~700–800px). */
  .rail-header { padding: 18px 14px 14px; }
  .railVebitLogo { height: 64px; }
  .rail-nav { overflow: visible; padding: 6px 10px; gap: 0; }
  .rail-section { padding: 8px 8px 2px; font-size: 9px; }
  .r-btn { padding: 9px 11px; font-size: 14px; gap: 11px; }
  .r-btn svg { width: 16px; height: 16px; }
  .rail-bot { padding: 12px 14px 16px; }
}

/* ─── PROJECT HERO MOBILE ────────────────────── */
@media(max-width:600px){
  .projInfoTop { display: block; }
  .projStatRow { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; width: 100%; }
  .projStatChip { padding: 5px 10px; min-width: 48px; flex-shrink: 0; }
  .projStatNum { font-size: 15px; }
  #projMapContainer { height: 90px !important; width: 100%; }
  .projName { font-size: 16px; }
  .projInfo { padding: 12px 12px 10px; }
}

/* ─── INSPECTION AREA INPUT ──────────────────── */
#areaNameInput {
  background: var(--s2); border: 1px solid var(--border2);
  border-radius: var(--r); padding: 5px 9px;
  color: var(--text); font-size: 12px; font-weight: 600;
  font-family: var(--font); outline: none;
  max-width: 220px;
}
#areaNameInput:focus { border-color: var(--red); }

/* ══════════════════════════════════════════════════
   SCHEDULE PAGE — CSS now lives in planning.html <style>
   (plan* classes below are unused but kept for safety)
   ══════════════════════════════════════════════════ */

/* Page wrapper */
.planPage {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: calc(100vh - 80px);
  padding-bottom: 80px;
}

/* ── Top bar ─────────────────────────────────────── */
.planTopBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 50;
}
.planNavGroup {
  display: flex;
  align-items: center;
  gap: 6px;
}
.planActGroup {
  display: flex;
  align-items: center;
  gap: 8px;
}
.planWeekLabel {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  min-width: 160px;
  text-align: center;
}

/* ── Legend ──────────────────────────────────────── */
.planLegend {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 16px;
  font-size: 11px;
  color: var(--sub);
  border-bottom: 1px solid var(--border);
}
.planLegItem {
  display: flex;
  align-items: center;
  gap: 5px;
}
.planLegBlock {
  display: inline-block;
  width: 18px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}

/* ── Grid wrapper ────────────────────────────────── */
.planGridWrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1;
}

/* ── Main table ──────────────────────────────────── */
.planTable {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  table-layout: fixed;
}
.planTable thead tr {
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 30;
}

/* ── Day column headers ──────────────────────────── */
.planNameTh {
  width: 130px;
  min-width: 100px;
  border-bottom: 1px solid var(--border2);
  border-right: 1px solid var(--border2);
}
.planDayTh {
  text-align: center;
  padding: 6px 4px;
  border-bottom: 1px solid var(--border2);
  border-right: 1px solid var(--border2);
  user-select: none;
}
.planThWknd { opacity: 0.45; }
.planThToday { background: rgba(249,115,22,.08); }
.planThDay {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--sub);
}
.planThNum {
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.1;
}
.planThNumToday { color: var(--red); }
.planThMon {
  font-size: 9px;
  color: var(--sub);
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* ── Worker rows ─────────────────────────────────── */
.planRow:not(:last-child) td { border-bottom: 1px solid var(--border); }
.planNameCell {
  border-right: 1px solid var(--border2);
  background: var(--surface);
  position: sticky;
  left: 0;
  z-index: 20;
  white-space: nowrap;
  overflow: hidden;
  padding: 0;
}
.planNameFlex {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px;
  height: 100%;
}
.planAvatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
  letter-spacing: .5px;
}
.planNameLabel {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Day cells ───────────────────────────────────── */
.planCell {
  vertical-align: top;
  border-right: 1px solid var(--border);
  min-width: 80px;
  cursor: default;
  transition: background .1s;
}
.planCellWknd { background: var(--s2); opacity: 0.6; }
.planCellToday { background: rgba(249,115,22,.05); }
.planCell.planCellDragOver {
  background: rgba(59,130,246,.1) !important;
  outline: 2px dashed var(--blue) !important;
  outline-offset: -2px;
}
.planCellInner {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 4px;
  min-height: 60px;
}

/* ── Work assignment blocks ──────────────────────── */
.planBlock {
  border-radius: 4px;
  padding: 4px 6px;
  cursor: pointer;
  user-select: none;
  min-height: 22px;
  transition: filter .1s;
}
.planBlock:hover { filter: brightness(1.15); }
.planBlock[draggable="true"] { cursor: grab; }
.planBlock[draggable="true"]:active { cursor: grabbing; }
.planBlockLabel {
  font-size: 10px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}

/* ── Task chips ──────────────────────────────────── */
.planChip {
  border-radius: 3px;
  padding: 2px 5px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text);
  background: var(--lift);
  border-left: 3px solid #6b7280;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: background .1s;
}
.planChip:hover { background: var(--s2); }
.planChip[draggable="true"] { cursor: grab; }

/* ── Add button in cell ──────────────────────────── */
.planCellAdd {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px dashed var(--border2);
  color: var(--sub);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  align-self: flex-start;
  flex-shrink: 0;
  transition: border-color .12s, color .12s, background .12s;
  padding: 0;
}
.planCellAdd:hover {
  border-color: var(--red);
  color: var(--red);
  background: rgba(249,115,22,.08);
}

/* ── Backlog panel ───────────────────────────────── */
.planBacklog {
  margin: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
}
.planBacklogTitle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--sub);
  border-bottom: 1px solid var(--border);
  background: var(--s2);
}
.planBacklogList {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 14px;
}
.planBacklogChip {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 7px 10px;
  border-radius: var(--r);
  border: 1px solid var(--border2);
  border-left: 3px solid #6b7280;
  background: var(--lift);
  cursor: pointer;
  min-width: 140px;
  max-width: 220px;
  transition: background .1s;
}
.planBacklogChip:hover { background: var(--s2); }
.planBacklogChip[draggable="true"] { cursor: grab; }
.planBacklogOverdue {
  border-left-color: #ef4444 !important;
  background: rgba(239,68,68,.06) !important;
}
.planBacklogName {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.planBacklogSub {
  font-size: 10px;
  color: var(--sub);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.planBacklogBadge {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--sub);
  background: var(--s2);
  padding: 1px 5px;
  border-radius: 8px;
  align-self: flex-start;
}
.planBacklogOverdue .planBacklogBadge {
  color: #ef4444;
  background: rgba(239,68,68,.12);
}
.planBacklogEmpty {
  font-size: 13px;
  color: var(--sub);
  padding: 4px 0;
}

/* ── Responsive tweaks ───────────────────────────── */
@media(max-width:767px){
  .planWeekLabel { font-size: 12px; min-width: 120px; }
  .planNameTh { width: 80px; min-width: 70px; }
  .planNameFlex { padding: 8px 6px; gap: 5px; }
  .planNameLabel { font-size: 10px; }
  .planAvatar { width: 24px; height: 24px; font-size: 9px; }
  .planThNum { font-size: 14px; }
  .planLegend { display: none; }
  .planBacklog { margin: 10px; }
  .planBacklogChip { min-width: 120px; }
  .planTopBar { padding: 8px 12px; }
}

/* Hide number-field spinners (up/down arrows) globally — they're noise on financial inputs */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* ── Bókhald mobile fixes ──────────────────────────────────────────
   The page uses many wide flex rows with min-width constraints that
   overflow on narrow screens (< 480px). On mobile, allow shrinking
   and stack rows where they'd otherwise clip. */
@media(max-width:600px){
  /* Inbox row: action row buttons can stack/wrap, dropdown shrinks */
  .inboxRow .inboxProjSelect { min-width: 0 !important; flex: 1 1 100% !important; }
  .inboxRow button.inboxAssignDirect { white-space: normal !important; word-break: break-word; max-width: 100%; line-height: 1.2; }
  .inboxRow .inboxRow-actions { width: 100%; }

  /* Period summary rows: stack into 2 visual rows on mobile.
     Project name takes full width on top, stats wrap below. */
  .periodRow { flex-wrap: wrap !important; gap: 8px !important; }
  .periodRow > div, .periodRow > a { min-width: 0 !important; }
  .periodRow > div:nth-of-type(1) { flex: 1 1 100% !important; }   /* project name takes own row */
  .periodRow > div:nth-of-type(2),
  .periodRow > div:nth-of-type(3) { text-align: left !important; flex: 1 1 auto !important; }
  .periodRow .createDraftBtn { flex: 1 1 100%; }

  /* KPI row tightens the gap on small screens */
  .container > div[style*="grid-template-columns:repeat(auto-fit,minmax(150px"] { grid-template-columns: repeat(2, 1fr) !important; gap: 6px !important; }
  .container > div[style*="grid-template-columns:repeat(auto-fit,minmax(150px"] > div { padding: 8px !important; font-size: 12px !important; }
  .container > div[style*="grid-template-columns:repeat(auto-fit,minmax(150px"] > div div:last-child { font-size: 16px !important; }

  /* Auto-tagged details list: vertical stack each entry */
  details > div > div[style*="display:flex"] { flex-wrap: wrap !important; }

  /* Container padding on bokhald page */
  body > .container { padding-left: 10px; padding-right: 10px; }
}

/* ─── Dashboard cards grid (v2.8.52 — flat linear redesign) ─────────
   Mobile: single-column stack (flex). Desktop admin: 6-col grid where
   specific cards span 2 (Hours/Staff/Bookkeeping) or 3 (Tasks/Leaderboard)
   and My Week + News span full width. Non-admin desktop stays mostly
   single-column because staff workflow is mobile-first.                  */
.dashGrid {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: stretch;
}
.dashGrid > section { min-width: 0; }

@media (min-width: 900px) {
  .dashGrid--admin {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    align-items: start;
  }
  .dashGrid--admin > section { grid-column: 1 / -1; }
  .dashGrid--admin > .dashMyHoursCard,
  .dashGrid--admin > .dashStaffHoursCard,
  .dashGrid--admin > .dashBookkeepingCard { grid-column: span 2; }
  .dashGrid--admin > .dashAssignedCard,
  .dashGrid--admin > .dashLeaderboardCard { grid-column: span 3; }
}

/* X-fjarlægja takkinn — aðeins sýnilegur í edit mode (rendered conditionally
   í dashboard.js, en CSS gefur honum hover-effect) */
.dashCardRemove:hover {
  background: rgba(232,25,44,.85) !important;
  transform: scale(1.08);
}
.dashCardRemove:active {
  transform: scale(0.95);
}
.dashCardRemove {
  transition: background .12s ease, transform .12s ease;
}

/* Edit-bar — placement + spacing */
.dashEditBar {
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}

/* ─── Gridstack overrides (Phase 2 dashboard) ─────────────────
   Gridstack default styling er hannað fyrir light themes — hér passum
   við að dark-theme litir gangi upp og resize-handles séu sjáanleg. */

/* Container — clip svo widget content brotnar ekki út úr grid */
.grid-stack {
  background: transparent;
  margin-bottom: 14px;
}

/* Hver grid-item: lift-color bakgrunnur + sniðug skuggi svo cards "poppa"
   úr síðunni án harðs border. Notar --s2 sem er aðeins lyftari en --panel. */
.grid-stack-item-content {
  overflow: auto;
  border-radius: var(--r-md);
  background: var(--s2);
  box-shadow: 0 1px 3px rgba(0,0,0,0.15), 0 4px 12px rgba(0,0,0,0.08);
  transition: box-shadow .15s ease;
}
.grid-stack-item-content:hover {
  box-shadow: 0 1px 3px rgba(0,0,0,0.18), 0 6px 18px rgba(0,0,0,0.12);
}

/* dashCard inni í grid-item: transparent svo --s2 frá container shines through.
   Engin auka border, engin margin. */
.grid-stack-item-content > .dashCard,
.grid-stack-item-content > .myWeekCard,
.grid-stack-item-content > [data-widget-id] {
  width: 100%;
  height: 100%;
  margin: 0;
  box-sizing: border-box;
  background: transparent !important;
  border: none !important;
}

/* Resize handles — gerum sjáanlegri í edit mode (var alveg gegnsætt áður) */
.grid-stack:not(.grid-stack-static) > .grid-stack-item > .ui-resizable-handle {
  background: rgba(59, 130, 246, 0.25);
  transition: background .12s;
}
.grid-stack:not(.grid-stack-static) > .grid-stack-item > .ui-resizable-handle:hover {
  background: var(--blue, #3b82f6);
}
.grid-stack:not(.grid-stack-static) > .grid-stack-item > .ui-resizable-se,
.grid-stack:not(.grid-stack-static) > .grid-stack-item > .ui-resizable-sw,
.grid-stack:not(.grid-stack-static) > .grid-stack-item > .ui-resizable-ne,
.grid-stack:not(.grid-stack-static) > .grid-stack-item > .ui-resizable-nw {
  width: 16px;
  height: 16px;
}

/* Drag indicator — þegar notandi dragar card, sýna skugga á target zone */
.grid-stack > .grid-stack-placeholder > .placeholder-content {
  background: rgba(59, 130, 246, 0.18);
  border: 2px dashed var(--blue, #3b82f6);
  border-radius: var(--r);
}

/* Cursor: grab þegar í edit mode (ekki static) */
.grid-stack:not(.grid-stack-static) .grid-stack-item {
  cursor: grab;
}
.grid-stack:not(.grid-stack-static) .grid-stack-item.ui-draggable-dragging {
  cursor: grabbing;
  z-index: 100;
}

/* Á síma: cards fall í 1 dálk ef Gridstack 1-col mode kicksar in */
@media (max-width: 700px) {
  .grid-stack > .grid-stack-item {
    width: 100% !important;
    left: 0 !important;
  }
}



/* ─── BÓKHALD CLEAN SHELL (mockup-style — bætt 2026-05-09) ────────────────────
   Tilgangur: gera Bókhalds-síðuna læsileg og professional. Sjá mockup-tilvísun
   í commit log. Class-prefix: 'b' (bSection, bStatCard, etc.) */

.bHeader {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
  align-items: flex-start;
}
@media (min-width: 720px) {
  .bHeader {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
  }
}
.bEyebrow {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .8px;
  margin: 0 0 4px 0;
}
.bTitle {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.5px;
  margin: 0;
  line-height: 1.15;
  color: var(--text);
}
.bSubtitle {
  font-size: 13px;
  color: var(--muted);
  margin: 8px 0 0 0;
  max-width: 540px;
}
.bHeaderActions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.bStatGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.bStatCard {
  background: var(--s2);
  border: 1px solid var(--border2);
  border-radius: 16px;
  padding: 16px 18px;
  transition: border-color .15s;
}
.bStatCard:hover { border-color: var(--border); }
.bStatLabel {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .6px;
  margin: 0 0 8px 0;
}
.bStatValue {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -.6px;
  margin: 0;
  color: var(--text);
}

.bSection {
  background: var(--s2);
  border: 1px solid var(--border2);
  border-radius: 18px;
  margin-bottom: 16px;
  overflow: hidden;
  transition: border-color .15s;
}
.bSection:hover { border-color: var(--border); }
.bSectionWarn {
  border-color: rgba(245,158,11,.45);
  background: rgba(245,158,11,.04);
}
.bSectionHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.bSectionTitleRow {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.bSectionIcon {
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--lift);
  border: 1px solid var(--border2);
  border-radius: 10px;
  padding: 6px 10px;
}
.bSectionTitle {
  font-size: 15px;
  font-weight: 800;
  margin: 0;
  letter-spacing: -.2px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}
.bSectionCount {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  background: var(--lift);
  border: 1px solid var(--border2);
  padding: 2px 9px;
  border-radius: 99px;
}
.bSectionCount--warn {
  color: var(--amber, #f59e0b);
  background: rgba(245,158,11,.12);
  border-color: rgba(245,158,11,.35);
}
.bSectionActions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.bSectionBody {
  padding: 14px 18px;
}
.bSectionCollapsible .bSectionHeader {
  border-bottom: none;
}
.bSectionCollapsible .bSectionBody:not([style*='display:none']) {
  border-top: 1px solid var(--border);
}

.bDateInput {
  font-size: 12px;
  background: var(--lift);
  border: 1px solid var(--border2);
  border-radius: 8px;
  color: var(--text);
  padding: 5px 10px;
  font-weight: 600;
}
.bDateInput:hover { border-color: var(--border); }


/* Pill-shaped pastel badge — shared utility */
.bPill {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 99px;
  letter-spacing: .2px;
  white-space: nowrap;
}

/* Inbox row (Bókhald > Pósthólf) — clean mockup-style */
.bInboxRow {
  border-bottom: 1px solid var(--border);
  padding: 12px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bInboxRow:last-child { border-bottom: none; }
.bInboxRow:hover { background: var(--lift); margin: 0 -10px; padding: 12px 10px; border-radius: 8px; }
.bInboxTopLine {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.bInboxDate {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  min-width: 84px;
  flex-shrink: 0;
}
.bInboxVendor {
  flex: 1;
  min-width: 200px;
}
.bInboxVendorName {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.2px;
}
.bInboxVendorMeta {
  font-size: 11px;
  color: var(--sub);
  margin-top: 3px;
  line-height: 1.5;
  word-break: break-word;
}
.bInboxAmount {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.3px;
  flex-shrink: 0;
}
.bInboxBadges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  flex-shrink: 0;
}
/* Compact inline dropdown on the topline */
.bInboxTopLine .inboxProjSelect {
  flex-shrink: 0;
  min-width: 180px;
  max-width: 220px;
  font-size: 12px;
  background: var(--lift);
  border: 1px solid var(--border2);
  border-radius: 6px;
  color: var(--text);
  padding: 5px 8px;
  font-family: inherit;
  cursor: pointer;
}
.bInboxTopLine .inboxProjSelect:hover { border-color: var(--border); }
/* Compact Tag button — rounded red pill */
.bInboxTopLine .inboxAssignBtn {
  background: #ef4444;
  border-color: #ef4444;
  color: #fff;
  font-weight: 700;
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 12px;
  flex-shrink: 0;
  white-space: nowrap;
}
.bInboxTopLine .inboxAssignBtn:hover {
  background: #dc2626;
  border-color: #dc2626;
}
/* Compact icon-only Rekstur button (tooltip explains) */
.bInboxTopLine .inboxOverheadBtn {
  flex-shrink: 0;
  padding: 5px 8px;
  font-size: 13px;
  border-radius: 6px;
}
.bInboxTopLine .inboxToggleDoc {
  flex-shrink: 0;
  padding: 4px 8px;
  font-size: 11px;
}
/* AI/heuristic suggestion chip on its own line, indented under vendor */
.bInboxSuggestionLine {
  margin-top: 4px;
  margin-left: 96px; /* line up under vendor name (date-col 84 + gap 12) */
}
.bInboxSuggestionLine .inboxAssignDirect {
  font-size: 11px;
  padding: 3px 9px;
}

/* 2-col grid fyrir bókhalds-section pör (Drög+Reikningar, Material+Rekstur) */
.bGrid2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
@media (min-width: 1024px) {
  .bGrid2 {
    grid-template-columns: 1fr 1fr;
  }
}
.bGrid2 .bSection { margin-bottom: 0; }

/* ── Cleaner row patterns fyrir Drög, Reikningar, Material-tasks ── */

/* Drög project-row: chevron + name(meta) + hours(OT) + status-pill */
.bDraftRow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  transition: background .12s;
  cursor: pointer;
}
.bDraftRow:last-child { border-bottom: none; }
.bDraftRow:hover { background: var(--lift); margin: 0 -10px; padding: 12px 10px; border-radius: 8px; }
.bDraftRowChevron {
  flex-shrink: 0;
  width: 28px; height: 28px;
  display: inline-flex;
  align-items: center; justify-content: center;
  background: var(--lift);
  border: 1px solid var(--border2);
  border-radius: 8px;
  font-size: 14px;
  color: var(--sub);
}
.bDraftRowMain {
  flex: 1;
  min-width: 0;
}
.bDraftRowName {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bDraftRowMeta {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}
.bDraftRowHours {
  text-align: right;
  flex-shrink: 0;
}
.bDraftRowHoursVal {
  font-size: 14px;
  font-weight: 800;
  color: #3b82f6;
  letter-spacing: -.2px;
}
.bDraftRowOT {
  font-size: 11px;
  font-weight: 700;
  color: var(--amber, #f59e0b);
  margin-top: 1px;
}

/* Reikningar invoice-row: status-pill | name(meta) | sale+profit */
.bInvRow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .12s;
}
.bInvRow:last-child { border-bottom: none; }
.bInvRow:hover { background: var(--lift); margin: 0 -10px; padding: 12px 10px; border-radius: 8px; }
.bInvRowMain {
  flex: 1;
  min-width: 0;
}
.bInvRowName {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bInvRowMeta {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}
.bInvRowFigures {
  text-align: right;
  flex-shrink: 0;
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bInvRowFigures .sale {
  color: var(--text);
  font-weight: 800;
  letter-spacing: -.2px;
}
.bInvRowFigures .profit {
  color: var(--green, #22c55e);
  font-weight: 700;
  font-size: 11px;
}

/* Material-task row: title + meta + note + actions */
.bMatRow {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.bMatRow:last-child { border-bottom: none; }
.bMatRowMain {
  flex: 1;
  min-width: 0;
}
.bMatRowTitle {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.2px;
}
.bMatRowMeta {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}
.bMatRowNote {
  font-size: 12px;
  color: var(--sub);
  font-style: italic;
  margin-top: 6px;
  line-height: 1.5;
}
.bMatRowActions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

/* ═══ DASHBOARD CARDS — v2.8.52 redesign ═══════════════════════════════════ */

.dashCardSub {
  font-size: 10px; font-weight: 600; color: var(--muted);
  text-transform: none; letter-spacing: 0;
  margin-left: auto;
}

/* My Hours card */
.dashHoursGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 8px;
  padding: 12px;
}
.dashHoursCell {
  background: var(--s2);
  border: 1px solid var(--border2);
  border-radius: 12px;
  padding: 10px 12px;
  min-width: 0;
}
.dashHoursCell--total {
  background: rgba(20,184,166,0.08);
  border-color: rgba(20,184,166,0.35);
}
.dashHoursLabel {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px;
  color: var(--muted);
  margin-bottom: 4px;
}
.dashHoursVal {
  font-size: 18px; font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.5px;
}

/* Staff Hours card (admin) */
.dashStaffList { padding: 6px 12px 12px; }
.dashStaffRow {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
}
.dashStaffRow:last-child { border-bottom: none; }
.dashStaffRow--me { background: linear-gradient(90deg, rgba(20,184,166,.10), transparent); border-radius: 6px; padding: 7px 6px; }
.dashStaffAvatar {
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: #fff;
  flex-shrink: 0;
}
.dashStaffName {
  font-size: 12px; font-weight: 600;
  flex: 0 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 120px;
}
.dashStaffBar {
  flex: 1 1 auto;
  height: 6px;
  background: var(--s2);
  border-radius: 999px;
  overflow: hidden;
  min-width: 30px;
}
.dashStaffBarFill {
  height: 100%;
  border-radius: 999px;
  transition: width .3s ease;
}
.dashStaffMins {
  font-size: 11px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  min-width: 48px; text-align: right;
  flex-shrink: 0;
}

/* Bookkeeping card (admin) */
.dashBookGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 12px;
}
.dashBookCell {
  background: var(--s2);
  border: 1px solid var(--border2);
  border-radius: 12px;
  padding: 12px;
  text-align: center;
  text-decoration: none;
  color: var(--text);
  transition: border-color .15s, background .15s;
}
a.dashBookCell:hover { background: var(--s3, var(--s2)); border-color: var(--border); }
.dashBookCell--warn {
  background: rgba(245,158,11,.08);
  border-color: rgba(245,158,11,.4);
}
.dashBookLabel {
  font-size: 10px; font-weight: 700;
  color: var(--muted);
  text-transform: uppercase; letter-spacing: .4px;
  margin-bottom: 4px;
}
.dashBookVal {
  font-size: 22px; font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.5px;
}

/* Leaderboard upgrades — bars + total */
.dashLeaderList { padding: 4px 0; }
.dashLeaderRank {
  font-size: 12px; color: var(--muted); font-weight: 700;
  width: 20px; text-align: center;
  display: inline-block;
}
.dashLeaderBar {
  flex: 1 1 auto;
  height: 6px;
  background: var(--s2);
  border-radius: 999px;
  overflow: hidden;
  min-width: 30px;
}
.dashLeaderBarFill {
  height: 100%;
  border-radius: 999px;
  transition: width .3s ease;
}
.dashLeaderTotal {
  font-size: 13px; font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  min-width: 28px; text-align: right;
  flex-shrink: 0;
}
.dashLeaderYou {
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
}

/* ─── Dashboard compact mode (PC ≥1100px) ─────────────────────────────
   2026-05-23: notandi vill ekki scrolla á PC. Þéttar allt sem hefur of
   margt loft: hero, cards, headers, gaps, fjölda raða í listum. Mobile
   óbreytt — þetta er bara desktop pólish. */
@media (min-width: 1100px) {
  .dashGrid { gap: 10px; }
  .dashHero { padding: 12px 16px; margin-bottom: 10px; }
  .dashHero__greet { font-size: clamp(18px, 3.2vw, 22px); }
  .dashHero__date  { font-size: 12px; margin-top: 2px; }
  .dashHero__mark img { width: 40px; height: 40px; }

  /* Generic card chrome */
  .dashCard { margin-bottom: 0; border-radius: 14px; }
  .dashCardHdr { padding: 8px 14px 8px; }
  .dashCardTitle { font-size: 11px; }

  /* Upcoming days */
  .dashUpcoming .upDay { padding: 8px 12px; min-height: 56px; }
  .dashUpcoming .upDayLabel { font-size: 12px; }
  .dashUpcoming .upDayDate  { font-size: 11px; }
  .dashUpcoming .upOverdue { padding: 6px 12px; }
  .dashUpcoming .upTask    { padding: 4px 8px; }
  .dashUpcoming .upTaskTitle { font-size: 12px; }
  .dashUpcoming .upTaskProj  { font-size: 10px; }

  /* My Hours grid */
  .dashHoursGrid { gap: 6px; padding: 8px; }
  .dashHoursCell { padding: 7px 10px; border-radius: 10px; }
  .dashHoursLabel { font-size: 9px; margin-bottom: 2px; }
  .dashHoursVal   { font-size: 16px; }

  /* Staff list */
  .dashStaffList { padding: 4px 12px 8px; }
  .dashStaffRow  { padding: 4px 0; }
  .dashStaffName { font-size: 12px; max-width: 90px; }
  .dashStaffMins { font-size: 10.5px; min-width: 40px; }
  .dashStaffAvatar { width: 22px; height: 22px; font-size: 10px; }

  /* Bookkeeping */
  .dashBookGrid { gap: 6px; padding: 8px; }
  .dashBookCell { padding: 7px 10px; min-height: 56px; border-radius: 10px; }
  .dashBookLabel { font-size: 9px; }
  .dashBookVal   { font-size: 18px; }

  /* Assigned list — already trimmed in v2.9.20, just give it a cap */
  .dashAssignedList { padding: 2px 10px 8px; }
  .dashAssignedTitle { font-size: 12px; }
  .dashAssignedProj  { font-size: 10px; }

  /* Leaderboard rows */
  .dashLeaderRow { padding: 3px 12px; }
  .dashLeaderName { font-size: 12px; }
  .dashLeaderScore { font-size: 12px; }

  /* News */
  .dashNewsItem { padding: 10px 12px; }

  /* Revenue chart compactness */
  .dashRevenueCard svg { height: auto; max-height: 180px; }
}

/* ─── Time-page shared table (Staff hours / My History / by-project) ─────
   2026-05-24: notandi vill samræmt útlit á öllum þrem sýnum. Þétt töflu-
   pattern: header row + zebra rows + tabular-nums + samkvæmir litir á
   hour-cellum. Nota .stTable--user / --history / --project til að breyta
   col-template á per-view basis ef þarf. */
.stTable {
  display: grid;
  /* Chevron column bumped 22→34px so it has room for the › glyph plus its
     own 10px×2 padding without eating into the Veikindi-value cell. The
     value (e.g. "14,4") was getting clipped on the right because chevron
     overflowed leftward. (2026-06-01 fix) */
  grid-template-columns: minmax(140px, 1.6fr) 90px 90px 90px 90px 34px;
  gap: 0;
  background: var(--card);
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  margin-bottom: 12px;
}
@media (max-width: 680px) {
  .stTable {
    grid-template-columns: minmax(70px, 1fr) 48px 48px 48px 48px 22px;
  }
  .stTable .stRow > div,
  .stTable .stHead > div {
    padding: 8px 4px;
    font-size: 11.5px;
  }
  /* Override base .stHead nowrap (line ~6031) — must use !important since
     the base rule comes later in the file and has equal specificity. */
  .stTable .stHead > div {
    font-size: 9px !important;
    letter-spacing: .2px !important;
    line-height: 1.15 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    padding: 5px 3px !important;
    min-height: 0;
  }
  /* Long staff names: ellipsis instead of wrapping → keeps row height stable */
  .stTable .stRow > div:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 700;
  }
}
@media (max-width: 380px) {
  .stTable {
    grid-template-columns: minmax(60px, 1fr) 42px 42px 42px 42px 18px;
  }
  .stTable .stRow > div,
  .stTable .stHead > div { padding: 7px 3px; font-size: 11px; }
  .stTable .stHead > div { font-size: 8.5px; }
}
/* My History per-day table: Date | Project | Normal | OT | Sick | ✏  */
.stTable--history {
  grid-template-columns: 110px minmax(120px, 1fr) 66px 66px 66px 32px;
}
@media (max-width: 680px) {
  /* 3.0.48: date col 64 → 76 so "Mon 8" fits on one line.
     No more Í DAG badge — today is shown via the .is-today blue ring (below). */
  .stTable--history { grid-template-columns: 76px minmax(60px,1fr) 44px 44px 44px 26px; }
  .stTable--history .stRow > div { padding: 8px 6px; font-size: 12px; }
  .stTable--history .stHead > div { padding: 6px 5px; font-size: 9px; }
  .stTable--history .stRow > div:first-child { font-size: 12px; gap: 4px; white-space: nowrap; }
  .stTable--history .stRow > div:nth-child(2) { font-size: 11px; }
  .stTable--history .stRow > div:last-child { font-size: 12px; padding: 6px 2px; }
}
.stTable--history .stRow > div:nth-child(2) {
  text-align: left;
  font-weight: 600;
  color: var(--text);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stTable--history .stRow > div:last-child {
  font-size: 13px;
  color: var(--muted);
  padding: 8px 4px;
  text-align: center;
}
.stTable--history .stRow > div:first-child {
  font-size: 12px;
  font-weight: 700;
  gap: 6px;
}
.stTable--history .stHead > div:nth-child(2) { text-align: left; }
.stTable--history .stHead > div:last-child { text-align: center; }
/* Period summary as a 4-col single-table mini-grid (replaces old 4-card layout).
   Lives inside .periodCard so margin/border are handled by the card wrapper. */
.stTable--periodSummary {
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: 0;
  border: 0;
  border-radius: 0;
}
.stTable--periodSummary .stHead > div {
  padding: 8px 6px;
  font-size: 9px;
  text-align: center;
}
.stTable--periodSummary .stHead > div:first-child { text-align: center; }
.stTable--periodSummary .stRow > div {
  padding: 10px 6px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  cursor: default;
  border-bottom: 0;
}
.stTable--periodSummary .stRow > div:first-child { text-align: center; display: block; }
.stTable--periodSummary .stRow:hover > div { background: var(--card); }
@media (max-width: 480px) {
  .stTable--periodSummary .stHead > div { padding: 6px 3px; font-size: 8.5px; letter-spacing: .3px; }
  .stTable--periodSummary .stRow > div { padding: 8px 3px; }
  .stTable--periodSummary .stRow > div > * { font-size: 16px !important; }
}
/* Compact period card variant (used by My History) — no extra padding, just the
   header and the table stacked tight. */
.periodCard--compact { padding: 0; }
.periodCard--compact .periodCardHead { padding: 8px 14px; border-bottom: 1px solid var(--border); }

/* When an stTable lives inside a .bSection card, drop the inner border /
   radius / margin / bg so it doesn't look like a frame-inside-a-frame —
   the section card already supplies that. "Silent" table treatment per
   user feedback 2026-05-26. */
.bSection .stTable {
  border: 0;
  border-radius: 0;
  background: transparent;
  margin-bottom: 0;
  overflow: visible;
}
.bSection > .bSectionBody:has(> .stTable),
.bSection > .bSectionBody:has(> #draftsHost > .stTable),
.bSection > .bSectionBody:has(> #periodSummaryHost > .stTable) {
  padding: 0;
}
.bSection .stTable .stHead > div {
  padding: 9px 14px;
  background: transparent;
  border-bottom: 1px solid var(--border);
}
.bSection .stTable .stRow > div {
  background: transparent;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.bSection .stTable .stRow:last-of-type > div { border-bottom: 0; }
.bSection .stTable .stRowLink:hover .stRow > div { background: var(--lift); }

/* Bókhald — Reikningar / Drög table: Verk | Tímabil | Án VSK | M. VSK | Staða */
.stTable--drafts {
  grid-template-columns: minmax(160px, 1.6fr) 110px 110px 110px 140px;
}
/* Tablet: tighter cols but all 5 visible */
@media (max-width: 680px) {
  .stTable--drafts { grid-template-columns: minmax(100px, 1.4fr) 84px 90px 90px 120px; }
  .stTable--drafts .stRow > div { padding: 10px 8px; font-size: 12px; }
  .stTable--drafts .stHead > div { padding: 7px 8px; font-size: 9px; }
}
/* Phone: drop Tímabil (col 2). Date surfaces as a small line under the name. */
@media (max-width: 480px) {
  .stTable--drafts { grid-template-columns: minmax(80px, 1fr) 80px 88px 110px; }
  .stTable--drafts .stHead > div:nth-child(2),
  .stTable--drafts .stRow  > div:nth-child(2) { display: none; }
  .stTable--drafts .stRow > div { padding: 9px 7px; font-size: 11px; }
  .stTable--drafts .stHead > div { padding: 6px 6px; font-size: 9px; }
  .stTable--drafts .stRow > div:first-child {
    white-space: normal;
    line-height: 1.25;
    align-self: center;
  }
  .stTable--drafts .stRow > div:first-child::after {
    content: attr(data-period);
    display: block;
    font-size: 10px;
    font-weight: 500;
    color: var(--muted);
    margin-top: 2px;
    letter-spacing: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.stTable--drafts .stRow > div { font-variant-numeric: tabular-nums; }
.stTable--drafts .stRow > div:first-child {
  text-align: left;
  font-weight: 800;
  letter-spacing: -.2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stTable--drafts .stRow > div:nth-child(2) {
  text-align: left;
  color: var(--muted);
  font-weight: 600;
}
.stTable--drafts .stRow > div:nth-child(3),
.stTable--drafts .stRow > div:nth-child(4) { text-align: right; font-weight: 800; }
.stTable--drafts .stRow > div:last-child { text-align: right; }
.stTable--drafts .stHead > div:first-child,
.stTable--drafts .stHead > div:nth-child(2) { text-align: left; }
.stTable--drafts .stHead > div:last-child { text-align: right; }
.stRowLink {
  display: contents;          /* keep child div as the grid item */
  color: inherit;
  text-decoration: none;
}
.stRowLink:hover .stRow > div { background: var(--lift); }

/* Tilboð table — fixed-price project quotes with progress.
   Verk | Tilboð | Rukkað | Eftir | Framvinda | Staða */
.stTable--tilbod {
  grid-template-columns: minmax(160px, 1.4fr) 130px 130px 130px minmax(140px, 1fr) 90px;
}
@media (max-width: 900px) {
  .stTable--tilbod { grid-template-columns: minmax(140px, 1.4fr) 100px 100px 100px minmax(120px, 1fr) 80px; }
  .stTable--tilbod .stRow > div { padding: 10px 6px; font-size: 12px; }
  .stTable--tilbod .stHead > div { padding: 7px 6px; font-size: 9px; }
}
@media (max-width: 680px) {
  /* Tablet: drop Eftir (col 4) + Staða (col 6) */
  .stTable--tilbod { grid-template-columns: minmax(120px, 1.4fr) 90px 90px minmax(80px, 1fr); }
  .stTable--tilbod .stHead > div:nth-child(4),
  .stTable--tilbod .stHead > div:nth-child(6),
  .stTable--tilbod .stRow  > div:nth-child(4),
  .stTable--tilbod .stRow  > div:nth-child(6) { display: none; }
}
@media (max-width: 480px) {
  /* Phone: just Verk + Rukkað + progress */
  .stTable--tilbod { grid-template-columns: minmax(90px, 1fr) 80px 60px; }
  .stTable--tilbod .stHead > div:nth-child(2),
  .stTable--tilbod .stHead > div:nth-child(4),
  .stTable--tilbod .stHead > div:nth-child(6),
  .stTable--tilbod .stRow  > div:nth-child(2),
  .stTable--tilbod .stRow  > div:nth-child(4),
  .stTable--tilbod .stRow  > div:nth-child(6) { display: none; }
}
.stTable--tilbod .stRow > div:first-child {
  text-align: left;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stTable--tilbod .stRow > div:nth-child(2),
.stTable--tilbod .stRow > div:nth-child(3),
.stTable--tilbod .stRow > div:nth-child(4) {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.stTable--tilbod .stRow > div:nth-child(5) { text-align: left; }
.stTable--tilbod .stRow > div:last-child { text-align: right; }
.stTable--tilbod .stRow:hover > div { background: var(--lift); }
.stTable--tilbod .stHead > div:nth-child(2),
.stTable--tilbod .stHead > div:nth-child(3),
.stTable--tilbod .stHead > div:nth-child(4) { text-align: right; }
.stTable--tilbod .stHead > div:nth-child(5) { text-align: left; }
.stTable--tilbod .stHead > div:last-child { text-align: right; }

/* Lagoon (3rd-party integration) table:
   Verk | Dags | Skiladagur | Tegund | Sett á | Staða | ↗ */
.stTable--lagoon {
  grid-template-columns: minmax(220px, 2fr) 80px 96px 110px 110px 130px 32px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
}
@media (max-width: 900px) {
  .stTable--lagoon { grid-template-columns: minmax(160px, 1.8fr) 70px 86px 96px 96px 110px 28px; }
  .stTable--lagoon .stRow > div { padding: 10px 6px; font-size: 11px; }
  .stTable--lagoon .stHead > div { padding: 7px 6px; font-size: 9px; }
}
@media (max-width: 680px) {
  /* Tablet: drop Tegund + Sett á */
  .stTable--lagoon { grid-template-columns: minmax(140px, 1fr) 64px 80px 100px 28px; }
  .stTable--lagoon .stHead > div:nth-child(4),
  .stTable--lagoon .stHead > div:nth-child(5),
  .stTable--lagoon .stRow  > div:nth-child(4),
  .stTable--lagoon .stRow  > div:nth-child(5) { display: none; }
}
@media (max-width: 480px) {
  /* Phone: bare essentials — Verk + Staða + arrow */
  .stTable--lagoon { grid-template-columns: minmax(100px, 1fr) 90px 24px; }
  .stTable--lagoon .stHead > div:nth-child(2),
  .stTable--lagoon .stHead > div:nth-child(3),
  .stTable--lagoon .stRow  > div:nth-child(2),
  .stTable--lagoon .stRow  > div:nth-child(3) { display: none; }
}
.stTable--lagoon .stRow > div:first-child {
  text-align: left;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stTable--lagoon .stRow > div:nth-child(2),
.stTable--lagoon .stRow > div:nth-child(3),
.stTable--lagoon .stRow > div:nth-child(4),
.stTable--lagoon .stRow > div:nth-child(5),
.stTable--lagoon .stRow > div:nth-child(6) {
  text-align: left;
  color: var(--muted);
  font-weight: 600;
  font-size: 12px;
}
.stTable--lagoon .stRow > div:last-child {
  text-align: right;
  color: var(--muted);
  font-weight: 400;
}
.stTable--lagoon .stHead > div:first-child,
.stTable--lagoon .stHead > div:nth-child(2),
.stTable--lagoon .stHead > div:nth-child(3),
.stTable--lagoon .stHead > div:nth-child(4),
.stTable--lagoon .stHead > div:nth-child(5),
.stTable--lagoon .stHead > div:nth-child(6) { text-align: left; }
.stTable--lagoon .stRow.is-overdue > div { background: rgba(232,25,44,.04); }
.stTable--lagoon .stRow.is-overdue > div:first-child { color: var(--red); }

/* Tilbúið-í-drög table:
   Verk | Nótur | Án VSK | Efni tekið/bætt við | Án VSK | Dagvinna | Yfirvinna | Aðgerð  (8 cols)
   Wider "efni" count col (col 4) so the longer header fits on one line. */
.stTable--ready {
  grid-template-columns: minmax(180px, 1.5fr) 56px 100px 130px 100px 90px 90px 100px;
}
@media (max-width: 900px) {
  .stTable--ready {
    grid-template-columns: minmax(140px, 1.3fr) 46px 88px 110px 88px 78px 78px 90px;
  }
  .stTable--ready .stRow > div { padding: 10px 6px; font-size: 12px; }
  .stTable--ready .stHead > div { padding: 7px 6px; font-size: 9px; }
}
@media (max-width: 680px) {
  /* Tablet+: drop Nótur fj + Efni fj so we keep the kr amounts */
  .stTable--ready { grid-template-columns: minmax(120px, 1.4fr) 88px 88px 74px 74px 86px; }
  .stTable--ready .stHead > div:nth-child(2),
  .stTable--ready .stHead > div:nth-child(4),
  .stTable--ready .stRow  > div:nth-child(2),
  .stTable--ready .stRow  > div:nth-child(4) { display: none; }
}
@media (max-width: 480px) {
  /* Phone: bare essentials — Verk + Dagvinna + Aðgerð */
  .stTable--ready { grid-template-columns: minmax(90px, 1fr) 72px 80px; }
  .stTable--ready .stHead > div:nth-child(2),
  .stTable--ready .stHead > div:nth-child(3),
  .stTable--ready .stHead > div:nth-child(4),
  .stTable--ready .stHead > div:nth-child(5),
  .stTable--ready .stHead > div:nth-child(7),
  .stTable--ready .stRow  > div:nth-child(2),
  .stTable--ready .stRow  > div:nth-child(3),
  .stTable--ready .stRow  > div:nth-child(4),
  .stTable--ready .stRow  > div:nth-child(5),
  .stTable--ready .stRow  > div:nth-child(7) { display: none; }
  .stTable--ready .stRow > div { padding: 9px 7px; font-size: 11px; }
  .stTable--ready .stHead > div { padding: 6px 6px; font-size: 9px; }
}
.stTable--ready .stRow > div { font-variant-numeric: tabular-nums; }
.stTable--ready .stReadyNameCell {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  text-align: left;
}
.stReadyChevron {
  background: var(--lift);
  border: 1px solid var(--border2);
  border-radius: 8px;
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted);
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  font-size: 12px;
}
.stReadyChevron:hover { color: var(--text); border-color: var(--border); }
.stReadyName {
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.stReadyMetaWait { font-size: 10px; color: var(--amber,#f59e0b); margin-top: 2px; }
.stReadyMetaSkip { font-size: 10px; color: var(--muted); text-decoration: line-through; margin-top: 2px; }
.stTable--ready .stRow > div:nth-child(2),
.stTable--ready .stRow > div:nth-child(3),
.stTable--ready .stRow > div:nth-child(4),
.stTable--ready .stRow > div:nth-child(5),
.stTable--ready .stRow > div:nth-child(6),
.stTable--ready .stRow > div:nth-child(7) {
  text-align: right;
  font-size: 12px;
  font-weight: 700;
}
.stTable--ready .stRow > div:nth-child(6) {
  color: var(--blue, #3b82f6);
  font-weight: 800;
}
.stTable--ready .stHead > div:first-child { text-align: left; }
.stTable--ready .stHead > div:nth-child(2),
.stTable--ready .stHead > div:nth-child(3),
.stTable--ready .stHead > div:nth-child(4),
.stTable--ready .stHead > div:nth-child(5),
.stTable--ready .stHead > div:nth-child(6),
.stTable--ready .stHead > div:nth-child(7) { text-align: right; }
.stTable--ready .stReadyActionCell {
  text-align: right;
  display: flex; align-items: center; justify-content: flex-end;
  padding: 6px 10px;
}
/* Hover the whole row (cells share a parent display:contents wrapper, so
   highlighting via the wrapper :hover catches all 8 cells at once — same
   feel as the Reikningar stRowLink hover.) */
.stReadyGroup { display: contents; }
.stReadyGroup:hover > .stRow > div { background: var(--lift); }
.stTable--ready .stExpand,
.stTable--ready .periodRowExpand {
  grid-column: 1 / -1;
  background: var(--lift);
  border-top: 1px solid var(--border);
  padding: 10px 14px;
}
/* 3.0.48: today gets a strong blue ring all around — replaces the old
   "Í DAG" badge that floated between rows and wrapped weirdly on mobile.
   Outline-style so it doesn't shift the row geometry; offset:-2px keeps
   it inside the row's bounding box. */
.stRow.is-today > div { background: rgba(59,130,246,.10); }
.stRow.is-today > div:first-child { color: #3b82f6; font-weight: 900; }
.stRow.is-today {
  position: relative;
  outline: 2px solid #3b82f6;
  outline-offset: -2px;
  border-radius: 2px;
}
/* Multi-project days: allow the project cell to wrap to 2 lines so we
   show ALL project names instead of truncating with "+ N". 11px font
   keeps it compact even when wrapped. */
.stTable--history .stRow.has-multi > div:nth-child(2) {
  white-space: normal;
  line-height: 1.35;
}
.stExpandEdit {
  grid-column: 1 / -1;
  background: var(--lift);
  border-bottom: 1px solid var(--border);
  border-left: 3px solid var(--amber, #F59E0B);
  padding: 10px 14px;
}
.stTable--project {
  grid-template-columns: minmax(140px, 1.6fr) 90px 90px 90px 22px;
}
@media (max-width: 680px) {
  .stTable--project { grid-template-columns: minmax(90px,1.6fr) 60px 60px 60px 18px; }
}
/* Admin per-user dropdown: Date | Time | Dagvinna | Yfirvinna 1 | Yfirvinna 2 | Verkefni | Aðgerðir
   Number columns bumped 60→72px so "YFIRV. 1" / "YFIRV. 2" header text and
   decimal values (e.g. "7,25") fit comfortably without wrapping. */
.stTable--adminday {
  /* 3.0.114: Bætt Veikindi-dálki (col 6, milli OT2 og Verkefni) */
  grid-template-columns: 92px 96px 70px 70px 70px 70px minmax(130px, 1fr) 100px;
}
@media (max-width: 680px) {
  .stTable--adminday { grid-template-columns: 60px 70px 46px 46px 46px 46px minmax(60px, 1fr) 80px; }
}
.stTable--adminday .stRow > div:first-child {
  font-size: 11px;
  font-weight: 700;
  color: var(--sub);
  gap: 4px;
}
.stTable--adminday .stRow > div:nth-child(2) {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.stTable--adminday .stRow > div:nth-child(7) {
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stTable--adminday .stRow > div:last-child {
  text-align: right;
  font-weight: 400;
  font-size: 12px;
  color: var(--muted);
  padding: 6px 6px;
}
.stTable--adminday .stHead > div:nth-child(2),
.stTable--adminday .stHead > div:nth-child(7) { text-align: left; }
.stTable--adminday .stHead > div:last-child { text-align: right; }
.stTable--adminday .stRow > div {
  padding: 7px 8px;
  font-size: 12px;
}
.stTable--adminday .stRow.is-subentry > div:first-child {
  color: transparent; /* date repeats only on first entry of a day */
}
.stHead { display: contents; }
.stHead > div {
  padding: 8px 10px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--muted);
  background: var(--lift);
  border-bottom: 1px solid var(--border);
  text-align: right;
  /* Headers must NOT wrap — "Yfirvinna 2" was breaking with the "2" on a
     second line when the column was narrow (60px). Truncate with ellipsis
     if the column is too tight on small viewports. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stHead > div:first-child { text-align: left; }
.stRow { display: contents; }
.stRow > div {
  padding: 11px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--card);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  text-align: right;
  font-variant-numeric: tabular-nums;
  min-width: 0;
}
.stRow > div:first-child {
  text-align: left;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
}
.stRow:hover > div { background: var(--lift); }
.stRow > div:last-child {
  color: var(--muted);
  font-weight: 400;
  font-size: 14px;
  transition: transform .15s;
}
.stRow.open > div:last-child { transform: rotate(90deg); }
.stRow.is-future > div { opacity: .45; }
.stRow.is-missing > div { background: rgba(245,158,11,.06); }
.stRow.is-missing > div:first-child { color: var(--amber, #F59E0B); }
/* Weekend: subtle slate-blue tint (8% opacity) — distinguishable from regular
   rows without being loud. Distinct hue from holidays so they don't bleed
   into each other visually. */
.stRow.is-weekend > div { background: rgba(100,116,139,.10); }
.stRow.is-weekend > div:first-child { color: var(--muted); }
/* Holiday: light-blue (cyan) tint, ALWAYS — both weekday public holidays
   (Annar í hvítasunnu, Annar í páskum) AND weekend-overlapping holidays
   (Hvítasunnudagur) share the same treatment so admin can scan them at
   a glance. Was tinted red previously which created the inconsistency the
   user reported (weekend holiday landed on weekend-grey, weekday holiday on
   red). Now both share this light-blue. */
.stRow.is-holiday > div { background: rgba(56,189,248,.10) !important; }
.stRow.is-holiday > div:first-child { color: #38bdf8 !important; }
/* Hide the `—` dash placeholder text in empty number cells. The grid layout
   keeps the cell width — visually the cell just appears empty. Cuts a lot of
   noise in the Staff-hours expanded table (Tími / Dagvinna / Yfirv.1 / Yfirv.2
   all default to —). */
.stCellDim { color: transparent; user-select: none; }
.stAvatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 12px;
  flex-shrink: 0;
  border: 2px solid;
}
.stCellNormal  { color: var(--accent); }
.stCellOt1     { color: #F59E0B; }
.stCellOt2     { color: #9b59b6; }
.stCellHoliday { color: #38bdf8; }
.stCellSick    { color: var(--amber, #F39C12); }
.stCellDim     { color: var(--muted); font-weight: 500; }
.stExpand {
  grid-column: 1 / -1;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  padding: 10px 14px;
}
.stExpand:empty { display: none; }
/* 3.0.47: containment for multi-entry days. Without this the panel balloons
   past the viewport, fighting the sticky period-head and the snap engine. */
@media (max-width: 767px) {
  .stExpand {
    max-height: 60vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
}
/* Multi-entry day: distinct rows separated by a clear hairline + padded
   spacing so each individual entry is its own visible block. */
.stExpand--multi { display: flex; flex-direction: column; gap: 0; }
.stExpand--multi > .stExpandEntry {
  padding: 8px 0;
}
.stExpand--multi > .stExpandEntry + .stExpandEntry {
  border-top: 1px solid var(--border2);
}

/* ── 3.0.37: Invoice line cards ─────────────────────────────────────────
   Card-style rows, subtle bg, small gaps between, softer input contrast.
   Mobile-first: stacks vertically below 900px so number grid wraps to
   2 rows instead of overflowing. */
.invLineCard {
  background: var(--card);
  border: 1px solid transparent;
  border-radius: 10px;
  margin: 6px 12px;
  padding: 12px 14px;
  transition: border-color .12s ease, background .12s ease;
}
.invLineCard:hover {
  border-color: var(--border2);
}
.invLineCard.locked {
  border-left: 3px solid var(--green, #22c55e);
  background: linear-gradient(90deg, rgba(34,197,94,.04) 0%, var(--card) 14%);
}
.invLineCard.locked input,
.invLineCard.locked .invLineTitle,
.invLineCard.locked .invNumCell,
.invLineCard.locked .invNumRead {
  background: rgba(255,255,255,.02) !important;
  color: var(--muted) !important;
  cursor: default !important;
  border-color: transparent !important;
}
.invLineCard.locked .invNumRead:hover,
.invLineCard.locked input:hover,
.invLineCard.locked .invLineTitle:hover {
  background: rgba(255,255,255,.02) !important;
  border-color: transparent !important;
}
.invLineCard.readonly {
  opacity: .85;
}
.invLineCard.readonly input,
.invLineCard.readonly button:not(.lineLockBtn) {
  pointer-events: none;
}
.invLineGrid {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto 36px;
  gap: 20px;
  align-items: start;
}
/* Title block aligns with number cells (label-tops to label-tops) */
.invLineTitleBlock {
  padding-top: 14px; /* matches invNumLabel line-height + margin-bottom */
}
.invLineTitle {
  font-size: 14px;
  font-weight: 700;
  background: rgba(255,255,255,.025);
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--text);
  padding: 7px 10px;
  outline: none;
  flex: 1;
  min-width: 0;
  transition: background .12s ease, border-color .12s ease;
}
.invLineTitle:focus,
.invLineTitle:hover {
  background: rgba(255,255,255,.05);
  border-color: var(--border2);
}
.invNumGrid {
  display: grid;
  grid-template-columns: 62px 84px 84px 62px 62px 92px 104px;
  gap: 10px;
}
.invNumLabel {
  font-size: 8.5px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .35px;
  font-weight: 600;
  text-align: right;
  line-height: 1;
  margin-bottom: 4px;
  opacity: .75;
}
.invNumCell {
  height: 34px;
  width: 100%;
  text-align: right;
  font-variant-numeric: tabular-nums;
  border-radius: 6px;
  padding: 0 8px;
  outline: none;
  font-size: 12.5px;
  box-sizing: border-box;
  background: rgba(255,255,255,.025);
  border: 1px solid transparent;
  color: var(--text);
  font-weight: 500;
  transition: background .12s ease, border-color .12s ease;
}
.invNumCell:focus,
.invNumCell:hover:not(:disabled):not(.invNumRead) {
  background: rgba(255,255,255,.08);
  border-color: var(--border2);
}
/* 3.0.40: defensively force --text color so spinner/system tint don't leak in */
input.invNumCell { color: var(--text); }
.invNumCell:disabled {
  opacity: .65;
  cursor: not-allowed;
}
.invNumRead {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color: var(--muted);
  cursor: pointer;
}
.invNumRead:hover {
  background: rgba(255,255,255,.07);
  border-color: var(--border2);
  color: var(--text);
}
.invNumCell.warn {
  background: rgba(245,158,11,.08);
  border-color: rgba(245,158,11,.32);
  color: var(--amber,#f59e0b);
  font-weight: 700;
}
.invNumCell.total {
  background: rgba(59,130,246,.08);
  color: var(--text);
  font-weight: 800;
  font-size: 13px;
}
.invLineLock,
.invLineDel {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 13px;
  padding: 0;
  transition: background .12s ease, border-color .12s ease;
}
.invLineLock { color: var(--muted); opacity: .75; }
.invLineLock:hover { background: rgba(255,255,255,.05); opacity: 1; }
.invLineLock.on { color: var(--green,#22c55e); opacity: 1; border-color: rgba(34,197,94,.4); background: rgba(34,197,94,.08); }
.invLineDel { color: var(--red); opacity: .55; }
.invLineDel:hover { background: rgba(232,25,44,.08); border-color: rgba(232,25,44,.32); opacity: 1; }

/* Mobile: stack title block over number grid, scale number grid down */
@media (max-width: 900px) {
  .invLineCard { margin: 6px 6px; padding: 10px; }
  .invLineGrid {
    grid-template-columns: 1fr 36px;
    grid-template-areas:
      "title  actions"
      "nums   nums";
    gap: 10px;
  }
  .invLineGrid > :nth-child(1) { grid-area: title; }
  .invLineGrid > :nth-child(2) { grid-area: nums; }
  .invLineGrid > :nth-child(3) { grid-area: actions; }
  .invNumGrid {
    grid-template-columns: repeat(4, 1fr);
    row-gap: 8px;
  }
}
@media (max-width: 520px) {
  .invNumGrid { grid-template-columns: repeat(3, 1fr); }
}

/* 3.0.43: ljós þemu — cellar þurfa dökkan tint svo þeir sjáist á ljósum bg
   (hvítur-á-hvítu hverfur). Notum sömu uppbyggingu og dökk en með svört
   gildi inverted. */
[data-theme="mid-light"] .invNumCell,
[data-theme="light"]     .invNumCell,
[data-theme="mid-light"] .invLineTitle,
[data-theme="light"]     .invLineTitle {
  background: rgba(0,0,0,.04);
}
[data-theme="mid-light"] .invNumCell:focus,
[data-theme="mid-light"] .invNumCell:hover:not(:disabled):not(.invNumRead),
[data-theme="light"]     .invNumCell:focus,
[data-theme="light"]     .invNumCell:hover:not(:disabled):not(.invNumRead),
[data-theme="mid-light"] .invLineTitle:focus,
[data-theme="mid-light"] .invLineTitle:hover,
[data-theme="light"]     .invLineTitle:focus,
[data-theme="light"]     .invLineTitle:hover {
  background: rgba(0,0,0,.08);
  border-color: var(--border2);
}
[data-theme="mid-light"] .invNumRead:hover,
[data-theme="light"]     .invNumRead:hover {
  background: rgba(0,0,0,.07);
}
/* Locked overrides á ljósum þemum (læstar línur — allt subtle dökk) */
[data-theme="mid-light"] .invLineCard.locked input,
[data-theme="mid-light"] .invLineCard.locked .invLineTitle,
[data-theme="mid-light"] .invLineCard.locked .invNumCell,
[data-theme="mid-light"] .invLineCard.locked .invNumRead,
[data-theme="light"]     .invLineCard.locked input,
[data-theme="light"]     .invLineCard.locked .invLineTitle,
[data-theme="light"]     .invLineCard.locked .invNumCell,
[data-theme="light"]     .invLineCard.locked .invNumRead {
  background: rgba(0,0,0,.025) !important;
}