/* ================================================================
   dashboard.css — Horti-hub post-login dashboard
   Full-screen app layout, scoped to .dash-* prefix.
   Dark theme. Supplements shared-styles.css (CSS vars).
   ================================================================ */

/* ── Variables ──────────────────────────────────────────────────── */
:root {
  --dash-bg:                #0d1117;
  --dash-sidebar:           #111827;
  --dash-sidebar-border:    #1f2937;
  --dash-card:              #161d2c;
  --dash-card-border:       #1f2937;
  --dash-card-hover:        #1e2a3d;
  --dash-accent:            #c9a45c;
  --dash-accent-dim:        rgba(201, 164, 92, 0.12);
  --dash-accent-text:       #d8bd84;
  --dash-text:              #e2e8f0;
  --dash-text-muted:        #64748b;
  --dash-text-dim:          #94a3b8;
  --dash-topbar:            #0d1117;
  --dash-topbar-border:     #1f2937;
  --dash-separator:         #1f2937;

  --dash-badge-new-bg:      #065f46;
  --dash-badge-new-color:   #34d399;
  --dash-badge-alert-bg:    #7c2d12;
  --dash-badge-alert-color: #fb923c;
  --dash-badge-live-bg:     #1e3a5f;
  --dash-badge-live-color:  #60a5fa;

  --dash-sidebar-w:         220px;
}

/* ── Reset for full-screen shell ────────────────────────────────── */
html:has(.dash-shell),
body:has(.dash-shell) {
  height: 100%;
  width: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0 !important; /* override has-site-header padding */
  background: var(--dash-bg);
}

body:has(.dash-shell) {
  font-family: 'Space Grotesk', 'Outfit', sans-serif;
  color: var(--dash-text);
}

.dash-shell ::-webkit-scrollbar { width: 5px; height: 5px; }
.dash-shell ::-webkit-scrollbar-track { background: transparent; }
.dash-shell ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 3px; }

/* ── Shell ──────────────────────────────────────────────────────── */
.dash-shell {
  display: flex;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

/* ── Sidebar ────────────────────────────────────────────────────── */
.dash-sidebar {
  width: var(--dash-sidebar-w);
  min-width: var(--dash-sidebar-w);
  background: var(--dash-sidebar);
  border-right: 1px solid var(--dash-sidebar-border);
  display: flex;
  flex-direction: column;
  transition: width 0.25s ease, min-width 0.25s ease;
  overflow: hidden;
  flex-shrink: 0;
  z-index: 10;
}

.dash-sidebar--icons { --dash-sidebar-w: 64px; }

/* Logo */
.dash-logo {
  padding: 18px 16px;
  border-bottom: 1px solid var(--dash-sidebar-border);
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 60px;
  flex-shrink: 0;
}

.dash-sidebar--icons .dash-logo {
  justify-content: center;
  padding: 18px 0;
}

.dash-logo-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--dash-accent), #a8843f);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #0d1117;
}

.dash-logo-text {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--dash-text);
  white-space: nowrap;
}

.dash-sidebar--icons .dash-logo-text { display: none; }

/* Nav */
.dash-nav {
  flex: 1;
  padding: 10px 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  overflow-x: hidden;
}

.dash-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  margin: 0 8px;
  border-radius: 8px;
  background: transparent;
  border: none;
  border-left: 2px solid transparent;
  cursor: pointer;
  color: var(--dash-text-muted);
  transition: all 0.15s;
  outline: none;
  white-space: nowrap;
  width: calc(100% - 16px);
  font-family: inherit;
  font-size: 13.5px;
  text-align: left;
  text-decoration: none;
}

.dash-sidebar--icons .dash-nav-item {
  justify-content: center;
  margin: 0;
  padding: 12px 0;
  border-radius: 0;
  border-left: none;
  border-right: 2px solid transparent;
  width: 100%;
}

.dash-nav-item:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--dash-text-dim);
}

.dash-nav-item.active {
  background: var(--dash-accent-dim);
  border-left-color: var(--dash-accent);
  color: var(--dash-accent-text);
}

.dash-sidebar--icons .dash-nav-item.active {
  border-left-color: transparent;
  border-right-color: var(--dash-accent);
}

.dash-nav-label { pointer-events: none; }

.dash-sidebar--icons .dash-nav-label { display: none; }

/* Sidebar footer */
.dash-sidebar-foot {
  border-top: 1px solid var(--dash-sidebar-border);
  /* Lifted clear of the notice bar. This is the one that mattered: the bar spans
     the full width, so it covered the Settings button — while its own text said
     to switch company in Settings. */
  padding: 14px 16px calc(14px + var(--hh-notice-h, 0px));
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
}

.dash-sidebar--icons .dash-sidebar-foot {
  padding: 14px 0 calc(14px + var(--hh-notice-h, 0px));
  align-items: center;
}

.dash-settings-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--dash-text-muted);
  font-family: inherit;
  font-size: 12.5px;
  padding: 0;
  transition: color 0.15s;
}

.dash-settings-btn:hover { color: var(--dash-text-dim); }

.dash-sidebar--icons .dash-settings-btn { justify-content: center; }

.dash-sidebar--icons .dash-settings-label { display: none; }

.dash-sidebar-collapse {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--dash-sidebar-border);
  border-radius: 6px;
  cursor: pointer;
  color: var(--dash-text-muted);
  font-family: inherit;
  font-size: 11px;
  padding: 5px 10px;
  transition: all 0.15s;
  width: 100%;
}

.dash-sidebar--icons .dash-sidebar-collapse {
  width: 36px;
  height: 30px;
  padding: 0;
}

.dash-sidebar-collapse:hover {
  color: var(--dash-text-dim);
  border-color: rgba(255,255,255,0.2);
}

.dash-sidebar--icons .dash-collapse-label { display: none; }

.dash-user {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
}

.dash-sidebar--icons .dash-user { justify-content: center; }

.dash-user-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--dash-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  color: #0d1117;
  font-family: inherit;
}

.dash-user-info { overflow: hidden; flex: 1; }

.dash-sidebar--icons .dash-user-info { display: none; }

.dash-user-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--dash-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dash-user-email {
  font-size: 11px;
  color: var(--dash-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Main area ──────────────────────────────────────────────────── */
.dash-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Tool/learning pages don't wrap content in <main class="dash-content">.
   Drop the flex column so a child .container with overflow:hidden doesn't
   trigger flex's min-height:0 trap and clamp content to viewport height.
   padding-top clears the fixed .site-header (73px), which is otherwise
   cancelled by the body:has(.dash-shell) { padding: 0 !important } reset. */
.dash-main:not(:has(.dash-content)) {
  display: block;
  overflow-y: auto;
  padding-top: 73px;
  /* The tool pages scroll here rather than in .dash-content, so this is where
     the notice bar would otherwise cover the last rows of the page. */
  padding-bottom: var(--hh-notice-h, 0px);
}

/* ── Top bar ────────────────────────────────────────────────────── */
.dash-topbar {
  height: 56px;
  background: var(--dash-topbar);
  border-bottom: 1px solid var(--dash-topbar-border);
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 16px;
  flex-shrink: 0;
}

.dash-search {
  flex: 1;
  max-width: 440px;
  position: relative;
}

.dash-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--dash-text-muted);
  pointer-events: none;
  display: flex;
}

.dash-search input {
  width: 100%;
  background: var(--dash-card);
  border: 1px solid var(--dash-card-border);
  border-radius: 8px;
  padding: 7px 12px 7px 34px;
  font-size: 13px;
  color: var(--dash-text);
  outline: none;
  font-family: inherit;
  transition: border-color 0.15s;
}

.dash-search input:focus { border-color: rgba(201,164,92,0.3); }
.dash-search input::placeholder { color: var(--dash-text-muted); }

.dash-topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.dash-topbar-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.dash-topbar-back {
  color: var(--dash-text-muted);
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
}

.dash-topbar-back:hover {
  color: var(--dash-text);
  text-decoration: underline;
}

/* Layout toggles */
.dash-layout-btns { display: flex; gap: 3px; }

.dash-layout-btn {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  color: var(--dash-text-muted);
  transition: all 0.15s;
  padding: 0;
}

.dash-layout-btn:hover {
  background: var(--dash-card);
  color: var(--dash-text-dim);
}

.dash-layout-btn.active {
  background: var(--dash-accent-dim);
  border-color: var(--dash-card-border);
  color: var(--dash-accent);
}

/* Date + clock */
.dash-date {
  font-size: 12px;
  color: var(--dash-text-muted);
  white-space: nowrap;
}

.dash-clock {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: var(--dash-text-muted);
  min-width: 72px;
  text-align: right;
}

/* Lang toggle */
.dash-lang-toggle {
  display: flex;
  background: var(--dash-card);
  border: 1px solid var(--dash-card-border);
  border-radius: 6px;
  overflow: hidden;
}

.dash-lang-btn {
  padding: 5px 10px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  background: transparent;
  color: var(--dash-text-muted);
  border: none;
  font-family: inherit;
  letter-spacing: 0.04em;
  transition: all 0.15s;
}

.dash-lang-btn.active {
  background: var(--dash-accent);
  color: #0d1117;
}

/* Bell */
.dash-bell {
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--dash-text-muted);
  display: flex;
  align-items: center;
  padding: 0;
  transition: color 0.15s;
}

.dash-bell:hover { color: var(--dash-text-dim); }

.dash-bell-dot {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 7px;
  height: 7px;
  background: var(--dash-accent);
  border-radius: 50%;
  border: 1.5px solid var(--dash-topbar);
}

/* ── Content ────────────────────────────────────────────────────── */
.dash-content {
  flex: 1;
  overflow-y: auto;
  /* --hh-notice-h is the height of the fixed amber bar at the bottom of the
     viewport, published by org-switcher.js when it shows one and set back to 0
     when it goes. It is 0 for everyone who is not in the demo company, so this
     costs nothing the rest of the time. See syncNoticeInset(). */
  padding: 28px 28px calc(28px + var(--hh-notice-h, 0px));
}

.dash-page-header { margin-bottom: 24px; }

.dash-page-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.dash-page-header h1 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
  color: var(--dash-text);
}

.dash-page-header-row h1 { margin-bottom: 0; }

.dash-page-header p {
  font-size: 13.5px;
  color: var(--dash-text-muted);
}

/* ── Card base ──────────────────────────────────────────────────── */
.dash-card {
  background: var(--dash-card);
  border: 1px solid var(--dash-card-border);
  border-radius: 12px;
  padding: 20px;
  transition: background 0.15s;
  min-width: 0;       /* prevent grid items from exceeding their column width */
}

.dash-card:hover { background: var(--dash-card-hover); }

/* ── Section label ──────────────────────────────────────────────── */
.dash-section-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  /* Not --dash-accent-text — that token is near-white, correct only where
     the surrounding surface stayed dark on purpose (the sidebar, the
     Settings modal). Every .dash-card is white in this theme, so the icon
     here needs the same --dash-accent this file already uses for accent
     text sitting directly on a card. */
  color: var(--dash-accent);
}

.dash-section-label-text {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dash-text-muted);
}

/* ── Badges ─────────────────────────────────────────────────────── */
.dash-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.06em;
  flex-shrink: 0;
}

.dash-badge--new   { background: var(--dash-badge-new-bg);   color: var(--dash-badge-new-color); }
.dash-badge--alert { background: var(--dash-badge-alert-bg); color: var(--dash-badge-alert-color); }
.dash-badge--live  { background: var(--dash-badge-live-bg);  color: var(--dash-badge-live-color); }

/* ── Grid layouts ───────────────────────────────────────────────── */
.dash-grid { display: grid; gap: 16px; }

/* Grid — 3 columns (fully pinned col+row so the wide Checklist card can't
   leave ragged gaps when auto-flow tries to place a spanning item)
   Row 1: Weather  | Calendar         | CHP
   Row 2: Activity | Checklist (2 cols)
   Row 3: Training | News             | Tip
   Row 4: This week (full width)
   Row 5: Labor (full width)
   Row 6: Announcements (full width)

   CHP takes the top row because it is the card that carries a number: what last
   night's schedule was worth. Labor moves to its own full-width row, the shape
   it already has in the feed layout. */
.dash-grid--grid { grid-template-columns: 1fr 1fr 1fr; }
.dash-grid--grid .dash-card--weather       { grid-column: 1; grid-row: 1; }
.dash-grid--grid .dash-card--calendar      { grid-column: 2; grid-row: 1; }
.dash-grid--grid .dash-card--wkk           { grid-column: 3; grid-row: 1; }
.dash-grid--grid .dash-card--activity      { grid-column: 1; grid-row: 2; }
.dash-grid--grid .dash-card--checklist     { grid-column: 2 / 4; grid-row: 2; }
.dash-grid--grid .dash-card--training      { grid-column: 1; grid-row: 3; }
.dash-grid--grid .dash-card--news          { grid-column: 2; grid-row: 3; }
.dash-grid--grid .dash-card--usage           { grid-column: 3; grid-row: 3; }
.dash-grid--grid .dash-card--digest        { grid-column: 1 / 4; grid-row: 4; }
.dash-grid--grid .dash-card--labor         { grid-column: 1 / 4; grid-row: 5; }
.dash-grid--grid .dash-card--announcements { grid-column: 1 / 4; grid-row: 6; }

/* Feed — 2 columns
   Row 1: Weather  | Calendar
   Row 2: CHP (full width)
   Row 3: This week (full width)
   Row 4: Labor (full width)
   Row 5: Activity (full width)
   Row 6: Checklist (full width)
   Row 7: Training (full width)
   Row 8: Sources  | Tips
   Row 9: Announcements (full width) */
.dash-grid--feed {
  grid-template-columns: 1.6fr 1fr;
  grid-template-rows: auto auto auto auto auto auto auto auto auto;
}
.dash-grid--feed .dash-card--weather       { grid-column: 1; grid-row: 1; }
.dash-grid--feed .dash-card--calendar      { grid-column: 2; grid-row: 1; }
.dash-grid--feed .dash-card--wkk           { grid-column: 1 / 3; grid-row: 2; }
.dash-grid--feed .dash-card--digest        { grid-column: 1 / 3; grid-row: 3; }
.dash-grid--feed .dash-card--labor         { grid-column: 1 / 3; grid-row: 4; }
.dash-grid--feed .dash-card--activity      { grid-column: 1 / 3; grid-row: 5; }
.dash-grid--feed .dash-card--checklist     { grid-column: 1 / 3; grid-row: 6; }
.dash-grid--feed .dash-card--training      { grid-column: 1 / 3; grid-row: 7; }
.dash-grid--feed .dash-card--news          { grid-column: 1; grid-row: 8; }
.dash-grid--feed .dash-card--usage           { grid-column: 2; grid-row: 8; }
.dash-grid--feed .dash-card--announcements { grid-column: 1 / 3; grid-row: 9; }

/* List — single column */
.dash-grid--list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 960px;
}

/* ── Activity card ──────────────────────────────────────────────── */
.dash-activity-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--dash-separator);
}

.dash-activity-row:last-child { border-bottom: none; }

.dash-activity-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--dash-accent-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--dash-accent);
}

.dash-activity-icon svg {
  display: block;
}

.dash-activity-icon--link {
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.dash-activity-icon--link:hover {
  background: rgba(201, 164, 92, 0.25);
  transform: scale(1.08);
}

.dash-activity-body { flex: 1; min-width: 0; }

.dash-activity-action {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 2px;
  color: var(--dash-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dash-activity-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  color: var(--dash-text-muted);
}

.dash-sparkline { display: block; flex-shrink: 0; }

.dash-activity-delta { text-align: right; flex-shrink: 0; min-width: 52px; }

.dash-delta-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 600;
}

.dash-delta-value--up   { color: var(--dash-accent); }
.dash-delta-value--down { color: #f87171; }

.dash-delta-time {
  font-size: 11px;
  color: var(--dash-text-muted);
}

/* ── Weather card ───────────────────────────────────────────────── */
.dash-weather-temp {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin-bottom: 16px;
}

.dash-weather-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 36px;
  font-weight: 600;
  color: var(--dash-text);
  line-height: 1;
}

.dash-weather-info {
  min-width: 0;
  flex: 1;
  overflow: hidden;
}

.dash-weather-loc {
  font-size: 11.5px;
  color: var(--dash-text-muted);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dash-weather-stats {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--dash-text-muted);
  white-space: nowrap;
}

.dash-alert-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: 8px;
  margin-bottom: 8px;
}

.dash-alert-row:last-child { margin-bottom: 0; }

.dash-alert-row--warn {
  background: var(--dash-badge-alert-bg);
  border: 1px solid rgba(251, 146, 60, 0.2);
  color: var(--dash-badge-alert-color);
}

.dash-alert-row--info {
  background: var(--dash-accent-dim);
  border: 1px solid rgba(201, 164, 92, 0.15);
  color: var(--dash-accent);
}

.dash-alert-row svg { flex-shrink: 0; margin-top: 1px; }

.dash-alert-msg {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--dash-text);
  margin-bottom: 2px;
}

.dash-alert-time {
  font-size: 11px;
  color: var(--dash-text-muted);
}

/* ── Training card ──────────────────────────────────────────────── */
.dash-course { margin-bottom: 14px; }
.dash-course:last-child { margin-bottom: 0; }

.dash-course-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  gap: 8px;
}

.dash-course-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1;
}

.dash-course-name {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--dash-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dash-course-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--dash-text-muted);
  flex-shrink: 0;
}

.dash-progress-track {
  height: 5px;
  background: var(--dash-separator);
  border-radius: 3px;
  overflow: hidden;
}

.dash-progress-bar {
  height: 100%;
  background: var(--dash-accent);
  border-radius: 3px;
}

.dash-live-session {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--dash-badge-live-bg);
  border-radius: 6px;
  font-size: 12px;
  color: var(--dash-badge-live-color);
}

/* ── News card ──────────────────────────────────────────────────── */
.dash-news-item {
  padding: 10px 0;
  border-bottom: 1px solid var(--dash-separator);
  cursor: pointer;
}

.dash-news-item:last-child { border-bottom: none; }

.dash-news-item:hover .dash-news-headline { color: var(--dash-accent); }

.dash-news-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.dash-news-tag {
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--dash-sidebar);
  color: var(--dash-text-dim);
  letter-spacing: 0.04em;
}

.dash-news-time { font-size: 11px; color: var(--dash-text-muted); }

.dash-news-headline {
  font-size: 13px;
  line-height: 1.45;
  color: var(--dash-text);
  transition: color 0.15s;
  margin: 0;
}

/* ── Usage card ─────────────────────────────────────────────────── */
.dash-card--usage { border-left: 3px solid var(--dash-accent); }

/* ── This week (digest) card ────────────────────────────────────── */
/* Six tiles, each a link into the tool the number comes from; last week in
   the muted tone underneath, never coloured — a comparison, not a verdict. */
.dash-digest-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
.dash-digest-tile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border: 1px solid var(--dash-card-border);
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  background: var(--dash-surface, transparent);
}
.dash-digest-tile:hover { border-color: var(--dash-accent); }
.dash-digest-value { font-size: 1.5rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--dash-text); }
.dash-digest-label { font-size: 0.8rem; color: var(--dash-text); }
.dash-digest-prev { font-size: 0.74rem; color: var(--dash-text-muted); }

.dash-usage-text {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--dash-text);
  margin-bottom: 12px;
}

.dash-usage-text:last-child { margin-bottom: 0; }

/* ── Announcements card ─────────────────────────────────────────── */
.dash-announcements { display: flex; gap: 14px; }

.dash-announcement {
  flex: 1;
  padding: 14px 16px;
  background: var(--dash-accent-dim);
  border-radius: 10px;
  border: 1px solid var(--dash-card-border);
}

.dash-announcement-header {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.dash-announcement-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--dash-text);
  line-height: 1.4;
}

.dash-announcement-body {
  font-size: 12.5px;
  color: var(--dash-text-muted);
  line-height: 1.5;
  margin: 0;
}

/* ── Weather location input ─────────────────────────────────────── */
.dash-weather-location {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
}

.dash-weather-input {
  flex: 1;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--dash-separator);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12.5px;
  font-family: inherit;
  color: var(--dash-text-muted);
  transition: border-color 0.15s, color 0.15s;
  box-sizing: border-box;
}
.dash-weather-input:focus {
  outline: none;
  border-color: var(--dash-accent);
  color: var(--dash-text);
}

.dash-weather-geo-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--dash-separator);
  border-radius: 6px;
  color: var(--dash-text-muted);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, opacity 0.15s;
  padding: 0;
}
.dash-weather-geo-btn:hover {
  border-color: var(--dash-accent);
  color: var(--dash-accent);
}
.dash-weather-geo-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── Weather forecast row (shared with weather.html's own KNMI forecast
   row — see css/weather.css's header comment) ─────────────────────── */
.dash-forecast-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 44px;
  padding: 0 4px;
  background: rgba(255,255,255,0.04);
  border-radius: 6px;
  flex-shrink: 0;
}

.dash-forecast-time {
  font-size: 10px;
  color: var(--dash-text-muted);
  font-family: 'JetBrains Mono', monospace;
}

.dash-forecast-temp {
  font-size: 13px;
  font-weight: 600;
  color: var(--dash-text);
}

.dash-forecast-rh {
  font-size: 10px;
  color: var(--dash-accent);
}

/* ── Resource list (B4) ─────────────────────────────────────────── */
.dash-resource-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dash-resource-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 7px;
  text-decoration: none;
  transition: background 0.15s;
}
.dash-resource-item:hover { background: rgba(255,255,255,0.05); }

.dash-resource-tag {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--dash-accent);
  background: var(--dash-accent-dim);
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}

.dash-resource-label {
  font-size: 12.5px;
  color: var(--dash-text);
  flex: 1;
  line-height: 1.3;
}

.dash-resource-arrow {
  color: var(--dash-text-muted);
  flex-shrink: 0;
  opacity: 0.6;
}
.dash-resource-item:hover .dash-resource-arrow { opacity: 1; color: var(--dash-accent); }

/* ── Training course link ───────────────────────────────────────── */
.dash-course--link { cursor: pointer; }
.dash-course--link:hover { background: rgba(255,255,255,0.03); border-radius: 8px; }

/* ── Bell panel ─────────────────────────────────────────────────── */
.dash-bell-wrap {
  position: relative;
}

.dash-bell-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 292px;
  background: var(--dash-sidebar);
  border: 1px solid var(--dash-card-border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  z-index: 200;
  overflow: hidden;
}

.dash-bell-panel-header {
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dash-text-muted);
  border-bottom: 1px solid var(--dash-separator);
}

.dash-bell-panel-item {
  padding: 11px 14px;
  border-bottom: 1px solid var(--dash-separator);
}
.dash-bell-panel-item:last-child { border-bottom: none; }

.dash-bell-panel-item-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--dash-text);
  margin-bottom: 3px;
}

.dash-bell-panel-item-body {
  font-size: 12px;
  color: var(--dash-text-muted);
  line-height: 1.4;
}

.dash-bell-panel-empty {
  padding: 16px 14px;
  font-size: 13px;
  color: var(--dash-text-muted);
  text-align: center;
}

/* ── Settings modal ─────────────────────────────────────────────── */
.dash-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 500;
}
.dash-modal-backdrop[hidden] { display: none; }

.dash-modal {
  background: var(--dash-sidebar);
  border: 1px solid var(--dash-card-border);
  border-radius: 14px;
  width: 380px;
  max-width: calc(100vw - 32px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.5);
}

.dash-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--dash-separator);
  font-size: 15px;
  font-weight: 600;
  color: var(--dash-text);
}

.dash-modal-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--dash-text-muted);
  display: flex;
  align-items: center;
  padding: 2px;
  border-radius: 4px;
  transition: color 0.15s;
}
.dash-modal-close:hover { color: var(--dash-text); }

.dash-modal-body { padding: 20px; }

.dash-modal-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dash-modal-section-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dash-text-muted);
  margin: 0;
}

.dash-modal-user-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dash-modal-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--dash-accent);
  color: #0d1117;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dash-modal-user-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--dash-text);
}

.dash-modal-user-email {
  font-size: 12px;
  color: var(--dash-text-muted);
  margin-top: 2px;
}

.dash-modal-divider {
  height: 1px;
  background: var(--dash-separator);
  margin: 16px 0;
}

/* ── Company ─────────────────────────────────────────────────────
   The name and the capacity you work in it, on one line. The role is
   the part people forget, and an assistant who does not know they are
   read-only reads a refused save as a broken tool. */
.dash-company-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.dash-company-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--dash-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dash-company-role {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--dash-text-muted);
  flex-shrink: 0;
}

.dash-company-select {
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--dash-separator);
  background: var(--dash-surface, transparent);
  color: var(--dash-text);
  font-family: inherit;
  font-size: 13.5px;
}

.dash-modal-desc {
  font-size: 13px;
  color: var(--dash-text-muted);
  margin: 0;
  line-height: 1.5;
}

/* ── Company team list ──────────────────────────────────────────
   Who else works here — moved into the Company section from /setup's own
   page (6 Sept follow-up note). */
.dash-company-team { margin-top: 4px; }

.dash-company-team-heading {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dash-text-muted);
  margin-bottom: 6px;
}

.dash-company-team-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.dash-company-team-list li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dash-company-team-email {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 13px;
  color: var(--dash-text);
}

.dash-company-team-role {
  font-size: 12px;
  color: var(--dash-text-muted);
}

.dash-company-team-select {
  font: inherit;
  font-size: 12px;
  padding: 3px 6px;
  border-radius: 6px;
  border: 1px solid var(--dash-separator);
  background: var(--dash-surface, transparent);
  color: var(--dash-text);
}

.dash-company-team-remove {
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--dash-text-muted);
  opacity: 0.6;
  font-size: 16px;
  line-height: 1;
  padding: 0 4px;
}
.dash-company-team-remove:hover,
.dash-company-team-remove:focus-visible {
  opacity: 1;
  color: #ef4444;
}

.dash-modal-btn {
  padding: 9px 16px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.15s;
  text-align: center;
}
.dash-modal-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.dash-modal-btn--danger {
  background: rgba(239,68,68,0.12);
  border-color: rgba(239,68,68,0.25);
  color: #f87171;
}
.dash-modal-btn--danger:hover:not(:disabled) {
  background: rgba(239,68,68,0.2);
  border-color: rgba(239,68,68,0.4);
}

.dash-modal-btn--secondary {
  background: rgba(255,255,255,0.06);
  border-color: var(--dash-separator);
  color: var(--dash-text);
}
.dash-modal-btn--secondary:hover:not(:disabled) { background: rgba(255,255,255,0.1); }

.dash-modal-feedback {
  font-size: 12.5px;
  margin: 0;
  padding: 8px 12px;
  border-radius: 6px;
}
.dash-modal-feedback--ok  { background: rgba(201,164,92,0.12); color: var(--dash-accent-text); }
.dash-modal-feedback--err { background: rgba(239,68,68,0.10); color: #f87171; }

/* ── Search filter state ─────────────────────────────────────────── */
.dash-nav-item--hidden { display: none !important; }
.dash-card--hidden      { display: none !important; }

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .dash-grid--grid {
    grid-template-columns: 1fr 1fr;
  }
  .dash-grid--grid .dash-card--weather       { grid-column: 1;     grid-row: 1; }
  .dash-grid--grid .dash-card--calendar      { grid-column: 2;     grid-row: 1; }
  .dash-grid--grid .dash-card--wkk           { grid-column: 1;     grid-row: 2; }
  .dash-grid--grid .dash-card--news          { grid-column: 2;     grid-row: 2; }
  .dash-grid--grid .dash-card--labor         { grid-column: 1 / 3; grid-row: 3; }
  .dash-grid--grid .dash-card--activity      { grid-column: 1 / 3; grid-row: 4; }
  .dash-grid--grid .dash-card--checklist     { grid-column: 1 / 3; grid-row: 5; }
  .dash-grid--grid .dash-card--training      { grid-column: 1;     grid-row: 6; }
  .dash-grid--grid .dash-card--usage           { grid-column: 2;     grid-row: 6; }
  .dash-grid--grid .dash-card--announcements { grid-column: 1 / 3; grid-row: 7; }
}

@media (max-width: 768px) {
  .dash-sidebar:not(.dash-sidebar--icons) { --dash-sidebar-w: 180px; }
  .dash-grid--grid,
  .dash-grid--feed { grid-template-columns: 1fr; }
  /* Single column: drop every pinned col/row so cards stack in DOM order. */
  .dash-grid--grid > .dash-card,
  .dash-grid--feed > .dash-card {
    grid-column: auto;
    grid-row: auto;
  }
  .dash-announcements { flex-direction: column; }
  .dash-content { padding: 16px; }
}

/* ── Page footer ─────────────────────────────────────────────────────────── */
.dash-footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  margin-top: 2rem;
  padding: 1.25rem 0 0.75rem;
  border-top: 1px solid var(--border);
  font-size: 0.72rem;
  color: var(--text-muted);
}

.dash-footer a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.15s;
}

.dash-footer a:hover {
  color: var(--text-secondary);
}

/* ── Calendar card (full month grid) ────────────────────────────── */

.dash-cal-grid {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.dash-cal-row {
  display: grid;
  grid-template-columns: 30px repeat(7, 1fr);
  gap: 2px;
}

.dash-cal-week-num {
  font-size: 9px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--dash-accent);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 1px;
}

.dash-cal-header-cell {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--dash-text-muted);
  font-weight: 600;
  text-align: center;
  padding: 2px 0 4px;
}

.dash-cal-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  border-radius: 4px;
}

.dash-cal-cell--today {
  background: var(--dash-accent);
}

.dash-cal-cell--other {
  opacity: 0.22;
}

.dash-cal-date {
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
  color: var(--dash-text);
}

.dash-cal-cell--today .dash-cal-date {
  color: #0f172a;
  font-weight: 700;
}

/* ── Calendar month navigation ──────────────────────────────────── */
.dash-cal-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}

.dash-cal-nav-btn {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 5px;
  background: transparent;
  color: var(--dash-text-dim);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.dash-cal-nav-btn:hover { background: var(--dash-accent-dim); color: var(--dash-accent); }

.dash-cal-nav-btn--today {
  font-size: 8px;
  color: var(--dash-accent);
}
.dash-cal-nav-btn--today:hover { background: var(--dash-accent-dim); }

/* ── Forecast window nav buttons ────────────────────────────────── */
.dash-forecast-nav {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}

.dash-forecast-nav-label {
  font-size: 11px;
  color: var(--dash-text-muted);
  align-self: center;
  margin-right: 2px;
}

.dash-fnav-btn {
  padding: 3px 10px;
  border: 1px solid transparent;
  border-radius: 12px;
  /* Same green tint the forecast day tiles above use, rather than a plain
     outline — reads as part of the same card instead of a different control. */
  background: var(--dash-accent-dim);
  color: var(--dash-text-dim);
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.dash-fnav-btn:hover {
  background: var(--dash-accent-dim);
  color: var(--dash-text);
  border-color: var(--dash-accent);
}

.dash-fnav-btn--active {
  background: var(--dash-accent);
  color: #0f172a;
  border-color: var(--dash-accent);
  font-weight: 600;
}

/* .dash-forecast-wind is still used by weather.html's own forecast row
   (see css/weather.css's header comment) even though the Growing tools
   hourly card below no longer renders wind per hour. */
.dash-forecast-wind {
  font-size: 10px;
  color: var(--dash-text-muted);
  margin-top: 2px;
}

/* ── Sunrise / sunset / DLI row ─────────────────────────────────── */
.dash-weather-sun {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--dash-text-dim);
  margin: 4px 0 10px;
  flex-wrap: wrap;
  font-family: 'JetBrains Mono', monospace;
}

.dash-weather-sun-sep {
  opacity: 0.35;
}

/* ── Multi-day forecast: high/low range + solar DLI ─────────────── */
.dash-weather-fc {
  margin: 0 0 12px;
}

.dash-weather-fc-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--dash-text-dim);
  margin-bottom: 6px;
}

.dash-weather-fc-row {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.dash-weather-fc-row::-webkit-scrollbar { display: none; }

.dash-weather-fc-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  /* Grows to fill a wide card rather than leaving blank space beside 6
     narrow tiles; shrinks back to the floor and the row scrolls instead
     once the card is too narrow for that floor to fit all 6. */
  flex: 1 1 0;
  min-width: 38px;
  padding: 6px 3px 8px;
  border-radius: 8px;
  background: var(--dash-accent-dim);
  border: 1px solid transparent;
  font-family: 'JetBrains Mono', monospace;
}

.dash-weather-fc-day--today {
  border-color: var(--dash-accent);
}

.dash-weather-fc-name {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--dash-text-dim);
}

.dash-weather-fc-date {
  font-size: 9px;
  color: var(--dash-text-muted);
}

.dash-weather-fc-icon {
  color: var(--dash-text-dim);
  display: flex;
  margin: 2px 0;
}

.dash-weather-fc-hi {
  font-size: 13px;
  font-weight: 700;
  color: var(--dash-text);
}

.dash-weather-fc-bar {
  position: relative;
  width: 4px;
  height: 32px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.08);
  margin: 3px 0;
}

.dash-weather-fc-bar-fill {
  position: absolute;
  left: 0;
  width: 100%;
  border-radius: 2px;
  background: var(--dash-accent);
}

.dash-weather-fc-lo {
  font-size: 11px;
  color: var(--dash-text-muted);
}

.dash-weather-fc-dli {
  font-size: 11px;
  font-weight: 700;
  color: var(--dash-accent);
  margin-top: 2px;
}

.dash-weather-fc-unit {
  display: block;
  font-size: 9px;
  color: var(--dash-text-dim);
  text-align: right;
  margin-top: 4px;
}

/* ── Hourly outlook: fixed at up to 6 checkpoints, never scrolls ──
   Replaced a dense per-hour grid that needed horizontal scrolling to see
   the whole window (6 Sept follow-up: "too much information"). Mirrors
   the 6-day row above — same tile shape, same always-fits-without-
   scrolling contract — but for a handful of hours instead of days. */
.dash-weather-hourly-row {
  display: flex;
  gap: 5px;
  margin-top: 4px;
}

.dash-weather-hourly-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 1 1 0;
  min-width: 0;
  padding: 6px 2px 8px;
  border-radius: 8px;
  background: var(--dash-accent-dim);
  border: 1px solid transparent;
  font-family: 'JetBrains Mono', monospace;
}

.dash-weather-hourly-slot--now { border-color: var(--dash-accent); }

.dash-weather-hourly-time {
  font-size: 9px;
  color: var(--dash-text-muted);
  white-space: nowrap;
}

.dash-weather-hourly-icon {
  color: var(--dash-text-dim);
  display: flex;
  margin: 2px 0;
}

/* A dot's vertical position across the row's shared track stands in for a
   connected trend line without the cost of drawing one. */
.dash-weather-hourly-bar {
  position: relative;
  width: 4px;
  height: 24px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.08);
  margin: 2px 0;
}

.dash-weather-hourly-bar-dot {
  position: absolute;
  left: 0;
  width: 100%;
  height: 6px;
  margin-top: -3px; /* recenters the dot on its top:N% placement */
  border-radius: 2px;
  background: var(--dash-accent);
}

.dash-weather-hourly-temp {
  font-size: 12px;
  font-weight: 700;
  color: var(--dash-text);
}

/* ── Responsive: compact calendar on narrow screens ─────────────── */
@media (max-width: 600px) {
  .dash-cal-cell { height: 18px; }
  .dash-cal-date { font-size: 10px; }
}

/* ── Checklist card ──────────────────────────────────────────────── */
.dash-cl-edit-btn {
  margin-left: auto;
  padding: 3px 6px;
  border: none;
  background: transparent;
  color: var(--dash-text-dim, #94a3b8);
  cursor: pointer;
  border-radius: 4px;
  line-height: 1;
}
.dash-cl-edit-btn:hover { color: var(--dash-text); background: rgba(255,255,255,0.07); }

.dash-cl-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 8px 0;
}

.dash-cl-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.12s;
  font-size: 13px;
  color: var(--dash-text, #e2e8f0);
  user-select: none;
}
.dash-cl-item:hover { background: rgba(255,255,255,0.05); }
.dash-cl-item--done { opacity: 0.4; }
.dash-cl-item--done .dash-cl-label { text-decoration: line-through; }

.dash-cl-checkbox {
  width: 15px;
  height: 15px;
  accent-color: var(--dash-accent, #c9a45c);
  flex-shrink: 0;
  cursor: pointer;
}

.dash-cl-empty {
  font-size: 12px;
  color: var(--dash-text-dim, #94a3b8);
  padding: 8px;
}

.dash-cl-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.dash-cl-progress {
  font-size: 11px;
  font-weight: 700;
  color: var(--dash-accent, #c9a45c);
}
.dash-cl-clear-btn {
  font-size: 11px;
  background: transparent;
  border: none;
  color: var(--dash-text-dim, #94a3b8);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
}
.dash-cl-clear-btn:hover { color: var(--dash-text); }

/* Checklist edit mode */
.dash-cl-list--edit { gap: 4px; }
.dash-cl-edit-row { display: flex; align-items: center; gap: 6px; }
.dash-cl-edit-input {
  flex: 1;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 13px;
  color: var(--dash-text, #e2e8f0);
  outline: none;
  font-family: inherit;
}
.dash-cl-edit-input:focus { border-color: var(--dash-accent, #c9a45c); }
.dash-cl-delete-btn {
  background: transparent;
  border: none;
  color: var(--dash-text-dim, #94a3b8);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 0 5px;
  border-radius: 4px;
}
.dash-cl-delete-btn:hover { color: #f87171; }

.dash-cl-add-row { display: flex; gap: 6px; margin-top: 4px; }
.dash-cl-add-input {
  flex: 1;
  background: rgba(255,255,255,0.04);
  border: 1px dashed rgba(255,255,255,0.15);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 13px;
  color: var(--dash-text, #e2e8f0);
  outline: none;
  font-family: inherit;
}
.dash-cl-add-input:focus { border-color: var(--dash-accent, #c9a45c); border-style: solid; }
.dash-cl-add-btn {
  background: rgba(201,164,92,0.15);
  border: 1px solid rgba(201,164,92,0.3);
  border-radius: 6px;
  color: var(--dash-accent, #c9a45c);
  font-size: 20px;
  line-height: 1;
  padding: 1px 10px;
  cursor: pointer;
}
.dash-cl-add-btn:hover { background: rgba(201,164,92,0.25); }

.dash-cl-done-btn {
  width: 100%;
  margin-top: 8px;
  padding: 6px;
  background: var(--dash-accent, #c9a45c);
  color: #0f172a;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.dash-cl-done-btn:hover { opacity: 0.9; }

/* ── Multi-section navigation (section-nav.js) ─────────────────── */
.dash-nav-section { display: flex; flex-direction: column; }
.dash-nav-row {
  display: flex;
  align-items: stretch;
  width: 100%;
}
.dash-nav-row .dash-nav-item { flex: 1; min-width: 0; }
.dash-nav-chevron {
  background: transparent;
  border: none;
  color: var(--dash-text-dim, #94a3b8);
  cursor: pointer;
  padding: 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: transform 0.15s ease, color 0.15s ease, background 0.15s ease;
  flex-shrink: 0;
}
.dash-nav-chevron:hover {
  background: rgba(255,255,255,0.05);
  color: var(--dash-text, #e2e8f0);
}
.dash-nav-chevron--open { transform: rotate(90deg); }
.dash-nav-children {
  display: flex;
  flex-direction: column;
  margin-left: 24px;
  border-left: 1px solid rgba(255,255,255,0.07);
  padding-left: 4px;
  margin-bottom: 4px;
}
.dash-nav-tool {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  font-size: 12.5px;
  color: var(--dash-text-dim, #94a3b8);
  text-decoration: none;
  border-radius: 6px;
  transition: background 0.12s, color 0.12s;
}
.dash-nav-tool:hover {
  background: rgba(255,255,255,0.04);
  color: var(--dash-text, #e2e8f0);
}
.dash-nav-tool svg { flex-shrink: 0; opacity: 0.85; }

/* Hide chevron and children in collapsed sidebar (icon-only mode) */
.dash-sidebar--icons .dash-nav-chevron,
.dash-sidebar--icons .dash-nav-children { display: none; }

/* ── Home page tiles (home.html) ───────────────────────────────── */
.dash-home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 8px;
}
.dash-home-tile {
  display: flex;
  flex-direction: column;
  padding: 20px;
  background: var(--dash-card, #161d2c);
  border: 1px solid var(--dash-card-border, #1f2937);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  min-height: 170px;
}
.dash-home-tile:hover {
  transform: translateY(-2px);
  border-color: var(--dash-accent, #c9a45c);
  background: var(--dash-card-hover, #1e2a3d);
}
.dash-home-tile-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(201,164,92,0.10);
  border-radius: 10px;
  color: var(--dash-accent, #c9a45c);
  margin-bottom: 14px;
}
.dash-home-tile-body { display: flex; flex-direction: column; flex: 1; }
.dash-home-tile-body h3 {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--dash-text, #e2e8f0);
  margin: 0 0 6px;
}
.dash-home-tile-body p {
  font-size: 0.85rem;
  color: var(--dash-text-dim, #94a3b8);
  line-height: 1.45;
  margin: 0 0 12px;
  flex: 1;
}
.dash-home-tile-status {
  align-self: flex-start;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(255,255,255,0.06);
  color: var(--dash-text-dim, #94a3b8);
}
.dash-home-tile-status--ready {
  background: rgba(201,164,92,0.15);
  color: var(--dash-accent, #c9a45c);
}
.dash-home-tile--soon { opacity: 0.92; }
.dash-home-tile--soon:hover { opacity: 1; }

/* ── Coming-soon placeholder hero (labor/technical/etc.) ───────── */
.dash-soon-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 80px 24px;
  max-width: 540px;
  margin: 0 auto;
}
.dash-soon-icon {
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(201,164,92,0.10);
  border-radius: 50%;
  color: var(--dash-accent, #c9a45c);
  margin-bottom: 24px;
}
.dash-soon-hero h1 {
  font-size: 2rem;
  font-weight: 600;
  color: var(--dash-text, #e2e8f0);
  margin: 0 0 12px;
}
.dash-soon-tagline {
  font-size: 1rem;
  color: var(--dash-text, #e2e8f0);
  opacity: 0.85;
  line-height: 1.5;
  margin: 0 0 24px;
}
.dash-soon-status {
  font-size: 0.88rem;
  color: var(--dash-text-dim, #94a3b8);
  line-height: 1.55;
  margin: 0 0 28px;
}
.dash-soon-back {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  background: var(--dash-accent, #c9a45c);
  color: #0f172a;
  border-radius: 8px;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  transition: opacity 0.15s;
}
.dash-soon-back:hover { opacity: 0.9; }

/* ── Labor summary card ──────────────────────────────────────────── */
.dash-labor-peak {
  font-size: 0.9rem;
  margin: 0.15rem 0 0.65rem;
  color: var(--dash-text);
}
.dash-labor-peak strong {
  font-size: 1.05rem;
  color: var(--dash-accent);
}
.dash-labor-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 0.75rem;
}
.dash-labor-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 0.35rem 0;
  border-radius: 6px;
  background: var(--dash-accent-dim);
  color: var(--dash-text);
}
.dash-labor-day.is-peak {
  background: var(--dash-accent);
  color: var(--dash-accent-text);
}
.dash-labor-daynum {
  font-weight: 700;
  font-size: 0.95rem;
}
.dash-labor-dayname {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  opacity: 0.8;
}
.dash-labor-tasks {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.dash-labor-task {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--dash-text);
}
.dash-labor-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dash-labor-task-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-labor-task-peak {
  font-weight: 600;
  color: var(--dash-text-muted);
  white-space: nowrap;
}
.dash-labor-empty {
  font-size: 0.85rem;
  color: var(--dash-text-muted);
  margin: 0.35rem 0 0.6rem;
}
.dash-labor-lastweek {
  font-size: 0.82rem;
  color: var(--dash-text-muted);
  margin: 0.5rem 0 0;
}
.dash-labor-delta {
  display: inline-block;
  padding: 0 0.4rem;
  border-radius: 999px;
  font-weight: 600;
}
.dash-labor-delta.is-under { background: rgba(22, 163, 74, 0.15); color: #16a34a; }
.dash-labor-delta.is-over { background: rgba(217, 119, 6, 0.15); color: #d97706; }
.dash-labor-link {
  display: inline-block;
  margin-top: 0.6rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--dash-accent);
  text-decoration: none;
}
.dash-labor-link:hover {
  text-decoration: underline;
}

/* ── CHP card ───────────────────────────────────────────────────── */
.dash-wkk-value {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
  margin-top: 0.4rem;
  color: var(--dash-text);
  font-variant-numeric: tabular-nums;
}
.dash-wkk-sub {
  font-size: 0.82rem;
  color: var(--dash-text-muted);
  margin-bottom: 0.7rem;
}
.dash-wkk-meta {
  font-size: 0.85rem;
  color: var(--dash-text-muted);
  border-top: 1px solid var(--dash-separator);
  padding-top: 0.6rem;
}
.dash-wkk-meta strong {
  color: var(--dash-text);
  font-variant-numeric: tabular-nums;
}
.dash-wkk-days { white-space: nowrap; }

.dash-wkk-control {
  display: block;
  margin-top: 0.7rem;
  font-size: 0.82rem;
  color: var(--dash-text-muted);
}
.dash-wkk-control input[type='range'] {
  display: block;
  width: 100%;
  margin-top: 0.3rem;
  accent-color: var(--dash-accent);
}
/* The caveat is part of the number, not decoration: the comparison is against a
   modelled heat-led run, never against what this grower actually did. */
.dash-wkk-note {
  font-size: 0.76rem;
  color: var(--dash-text-muted);
  margin-top: 0.45rem;
  line-height: 1.35;
}

/* Today's price glance — shown in the empty state, and also alongside a real
   but zero-hours schedule, above the "open optimisation" link, so the card
   still says something useful before the optimiser has ever been run once,
   or when the one run it has on file ran nothing. */
.dash-wkk-glance {
  margin: 0.5rem 0 0.7rem;
  border-top: 1px solid var(--dash-separator);
  padding-top: 0.6rem;
}
.dash-wkk-glance-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.82rem;
  padding: 0.15rem 0;
}
.dash-wkk-glance-label { color: var(--dash-text-muted); }
.dash-wkk-glance-value {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--dash-text);
  white-space: nowrap;
}
.dash-wkk-glance-value--low { color: var(--success); }
.dash-wkk-glance-value--high { color: var(--danger); }

/* ── Checklist: task suggestions ──────────────────────────────────────────────
   Proposals, not entries. They sit above the list, visibly separate from it,
   until the grower accepts one — at which point the item joins the list below
   and looks like everything else there. Same token set as the rest of the card
   so it inherits both themes without its own palette. */
.dash-cl-suggest-btn {
  margin-left: auto;
  padding: 3px 8px;
  border: 1px solid var(--dash-border, rgba(255,255,255,0.12));
  background: transparent;
  color: var(--dash-text-dim, #94a3b8);
  cursor: pointer;
  border-radius: 999px;
  font: inherit;
  font-size: 11px;
  line-height: 1.6;
}
.dash-cl-suggest-btn:hover:not(:disabled) {
  color: var(--dash-text, #e2e8f0);
  border-color: var(--dash-accent, #c9a45c);
}
.dash-cl-suggest-btn:disabled { opacity: 0.55; cursor: default; }

/* One task, at rest, before the grower opens the full suggestion panel — the
   dashboard's answer to "what should I do now". Same visual family as the
   panel rows, but its own block so it can sit above the list even when the
   panel itself is closed. */
.dash-next-step {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 8px 0 4px;
  padding: 8px 9px;
  border-radius: 8px;
  border-left: 2px solid var(--dash-accent, #c9a45c);
  background: rgba(201,164,92,0.07);
}
.dash-next-step--warning { border-left-color: #d98a3d; background: rgba(217,138,61,0.08); }
.dash-next-step--alert   { border-left-color: #e06a5a; background: rgba(224,106,90,0.08); }

.dash-next-step-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dash-next-step-eyebrow {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--dash-text-dim, #94a3b8);
}
.dash-next-step-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--dash-text, #e2e8f0);
  overflow-wrap: anywhere;
}
.dash-next-step-hint {
  font-size: 11px;
  color: var(--dash-text-dim, #94a3b8);
  overflow-wrap: anywhere;
}

/* Greenhouse -> cultivation -> first upload. Disappears the moment all three
   are true — see renderSetupProgress(); an evergreen "done" checklist is worse
   than no checklist. */
.dash-setup-progress {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin: 4px 0 2px;
  font-size: 10.5px;
  color: var(--dash-text-dim, #94a3b8);
}
.dash-setup-step { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.dash-setup-step--done { color: var(--dash-text, #e2e8f0); }
.dash-setup-arrow { opacity: 0.5; }

.dash-cl-suggest {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 8px 0 4px;
  padding: 8px;
  border: 1px dashed var(--dash-border, rgba(255,255,255,0.14));
  border-radius: 8px;
}
.dash-cl-suggest-head {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--dash-text-dim, #94a3b8);
  margin-bottom: 2px;
}
.dash-cl-suggest-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 7px;
  border-radius: 7px;
  border-left: 2px solid transparent;
  background: rgba(255,255,255,0.03);
}
/* Severity is a stripe, not a colour wash: it ranks the row without shouting. */
.dash-cl-suggest-row--warning { border-left-color: #d98a3d; }
.dash-cl-suggest-row--alert   { border-left-color: #e06a5a; }

.dash-cl-suggest-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dash-cl-suggest-label {
  font-size: 12.5px;
  color: var(--dash-text, #e2e8f0);
  overflow-wrap: anywhere;
}
.dash-cl-suggest-hint {
  font-size: 11px;
  color: var(--dash-text-dim, #94a3b8);
  overflow-wrap: anywhere;
}
.dash-cl-suggest-add {
  margin-left: auto;
  flex: none;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 6px;
  background: rgba(201,164,92,0.16);
  color: var(--dash-accent, #c9a45c);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
}
.dash-cl-suggest-add:hover { background: rgba(201,164,92,0.3); }

.dash-cl-suggest-actions { display: flex; gap: 8px; margin-top: 4px; }
.dash-cl-suggest-all, .dash-cl-suggest-dismiss {
  padding: 4px 10px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font: inherit;
  font-size: 11.5px;
}
.dash-cl-suggest-all {
  background: rgba(201,164,92,0.18);
  color: var(--dash-accent, #c9a45c);
}
.dash-cl-suggest-all:hover { background: rgba(201,164,92,0.3); }
.dash-cl-suggest-dismiss {
  background: transparent;
  color: var(--dash-text-dim, #94a3b8);
}
.dash-cl-suggest-dismiss:hover { color: var(--dash-text, #e2e8f0); }
.dash-cl-suggest-empty { font-size: 12px; color: var(--dash-text-dim, #94a3b8); }

/* ── Cards with nothing to show ──────────────────────────────────────
   Three states that must not look alike: still loading, we could not load
   it, and you have not done this yet. They replaced example content —
   invented activity rows, a LIVE badge on a session that was not running,
   a temperature beside the grower's real town — which read as data. */

.dash-card-loading {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 0 8px;
}
.dash-card-loading span {
  height: 12px;
  border-radius: 4px;
  background: var(--dash-card-border);
  animation: dash-card-pulse 1.4s ease-in-out infinite;
}
.dash-card-loading span:nth-child(2) { width: 80%; animation-delay: 0.15s; }
.dash-card-loading span:nth-child(3) { width: 60%; animation-delay: 0.3s; }

@keyframes dash-card-pulse {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 0.75; }
}

@media (prefers-reduced-motion: reduce) {
  .dash-card-loading span { animation: none; opacity: 0.5; }
}

.dash-card-note {
  padding: 6px 0 4px;
}
.dash-card-note p {
  margin: 0 0 8px;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--dash-text-dim);
}

.dash-card-note-link {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--dash-accent);
  text-decoration: none;
}
.dash-card-note-link:hover { text-decoration: underline; }

.dash-card-retry {
  padding: 5px 12px;
  border: 1px solid var(--dash-card-border);
  border-radius: 6px;
  background: transparent;
  color: var(--dash-text-dim);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}
.dash-card-retry:hover {
  color: var(--dash-text);
  border-color: var(--dash-text-muted);
}