/* ═══════════════════════════════════════════════════════════════════════
   DEPARTMENTS — global context bar, picker, badges, settings, pills
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Unified context bar (Site + Department chips, side-by-side) ───
   Bar is left-aligned with the rest of page content (no own horizontal
   padding or auto-centering — those would compete with .main's padding
   and visually offset the chips from headings/cards below). */
/* Context bar: replaced by drawer on desktop; tiny breadcrumb on mobile.
   Hidden entirely when the user only has one site + one department — no
   choices to make, no row needed. Multi-site/dept users see compact chips. */
.context-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 0 12px 0;
  margin: 0;
  max-width: none;
}
.context-bar[hidden] { display: none; }

/* Desktop: the drawer sidebar is the navigation context — hide the bar. */
@media (min-width: 1024px) {
  .context-bar { display: none; }
}

/* Mobile: collapse the full chips to a compact inline breadcrumb row. */
@media (max-width: 1023px) {
  .context-bar {
    gap: 6px;
    padding: 0 0 10px 0;
    font-size: var(--text-sm);
    color: var(--text-muted);
  }
  .context-bar .context-chip {
    flex: 0 1 auto;
    min-width: 0;
    padding: 5px 10px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    min-height: 0;
    height: auto;
    gap: 5px;
  }
  .context-bar .context-chip:hover { border-color: var(--text-muted); }
  .context-bar .context-chip-icon {
    width: 18px; height: 18px;
    border-radius: var(--radius-sm);
  }
  .context-bar .context-chip-icon svg { width: 11px; height: 11px; }
  .context-bar .context-chip-label { display: none; }
  .context-bar .context-chip-value {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
    max-width: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .context-bar .context-chip-chevron { width: 12px; height: 12px; opacity: 0.6; }
}

/* Each chip: same height, same radius, same internal layout. */
.context-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 8px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
  touch-action: manipulation;
  font-family: inherit;
  color: var(--text-primary);
  min-height: 50px;
  box-sizing: border-box;
}
.context-chip:hover { border-color: var(--accent); }
.context-chip-icon {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: var(--radius-md);
  flex-shrink: 0;
}
.context-chip-icon svg { width: 16px; height: 16px; }
.context-chip-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}
.context-chip-label {
  font-size: var(--text-xs);
  line-height: 1.2;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.context-chip-value {
  font-size: var(--text-md);
  line-height: 1.35;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}
.context-chip-chevron {
  width: 16px; height: 16px;
  color: var(--text-muted);
  transition: transform 0.15s;
  flex-shrink: 0;
}
.context-chip[aria-expanded="true"] .context-chip-chevron {
  transform: rotate(180deg);
}

/* ─── Picker dropdown ─── */
.dept-picker {
  position: fixed;
  z-index: 300;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 32px rgba(0,0,0,0.18);
  padding: 6px;
  max-height: 360px;
  overflow-y: auto;
  min-width: 240px;
  animation: deptPickerIn 0.14s ease-out;
}
[data-theme="dark"] .dept-picker { box-shadow: 0 12px 32px rgba(0,0,0,0.5); }
@keyframes deptPickerIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.dept-picker-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: var(--text-md);
  color: var(--text-primary);
  transition: background 0.1s;
  touch-action: manipulation;
}
.dept-picker-item:hover { background: var(--bg-elevated); }
.dept-picker-item.is-active { background: var(--bg-elevated); border-color: var(--border); }
.dept-picker-item-icon {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: var(--radius-md);
  flex-shrink: 0;
}
.dept-picker-item-icon svg { width: 15px; height: 15px; }
.dept-picker-item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.dept-picker-item-name {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dept-picker-item-sub {
  font-size: var(--text-xs);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dept-picker-item-tick {
  width: 16px; height: 16px;
  color: var(--accent);
  flex-shrink: 0;
}

/* ─── Department badge on task cards ─── */
.tasks-card-dept {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1;
  padding: 4px 9px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  letter-spacing: 0.01em;
}
/* Bare icon (no 14px box) so the dept chip matches the shared location chip
   (.card-loc-chip) exactly — same 13px glyph, same chip height. The dept colour
   stays on the glyph. (Radek 2026-06-29) */
.tasks-card-dept-ico {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.tasks-card-dept-ico svg { width: 13px; height: 13px; }

/* ─── Department pills in quick-add form ─── */
.tasks-dept-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.tasks-dept-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px 7px 7px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.12s;
  touch-action: manipulation;
  font-family: inherit;
}
.tasks-dept-pill-ico {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--d-color, #888) 15%, transparent);
  color: var(--d-color, var(--text-secondary));
  flex-shrink: 0;
}
.tasks-dept-pill-ico svg { width: 12px; height: 12px; }
.tasks-dept-pill:hover { border-color: var(--text-muted); }
.tasks-dept-pill.is-active {
  background: color-mix(in srgb, var(--d-color, var(--accent)) 12%, transparent);
  border-color: var(--d-color, var(--accent));
  color: var(--d-color, var(--text-primary));
}

/* Read-only single-dept chip (shown when user belongs to one dept only) */
.tasks-dept-readonly {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 8px 8px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--text-primary);
  width: fit-content;
  max-width: 100%;
}
.tasks-dept-readonly-ico {
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: var(--radius-md);
  flex-shrink: 0;
}
.tasks-dept-readonly-ico svg { width: 13px; height: 13px; }

/* ─── Settings: Departments list ─── */
.settings-section-help {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.5;
  margin: -4px 0 12px;
  max-width: 540px;
}
.dept-manage-icon {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: var(--radius-md);
  flex-shrink: 0;
}
.dept-manage-icon svg { width: 16px; height: 16px; }
.dept-colour-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.dept-colour-swatch {
  width: 28px; height: 28px;
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  transition: transform 0.08s, border-color 0.12s;
}
.dept-colour-swatch:hover { transform: scale(1.06); }
.dept-colour-swatch.is-active {
  border-color: var(--text-primary);
  box-shadow: 0 0 0 2px var(--bg-surface), 0 0 0 4px var(--text-primary);
}

/* ─── Settings: User edit Department checkbox row ─── */
.user-dept-checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: var(--text-md);
}
.user-dept-checkbox-icon {
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: var(--radius-md);
  flex-shrink: 0;
}
.user-dept-checkbox-icon svg { width: 13px; height: 13px; }

/* ─── Detail tile: department row inside task detail (added later) ─── */
/* CALM (2026-06-29) — neutral chip + the dept colour kept on the bare icon, matching
   the dept CARD chip + the rest of the chip family. */
.tasks-detail-dept-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1;
  padding: 4px 9px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text-primary);
  letter-spacing: 0.01em;
  transition: border-color 0.12s;
}
.tasks-detail-dept-pill:hover { border-color: var(--border-strong, var(--text-muted)); }
.tasks-detail-dept-pill-ico {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.tasks-detail-dept-pill-ico svg { width: 13px; height: 13px; }
.tasks-detail-dept-pill--unset { color: var(--text-muted); }
.tasks-detail-dept-pill--unset .tasks-detail-dept-pill-ico { color: var(--text-muted); }

/* ═══════════════════════════════════════════════════════════════════════
   DESKTOP LAYOUT — persistent drawer at ≥1024px
   ═══════════════════════════════════════════════════════════════════════
   On desktop the drawer is a permanent left rail (no slide-out, no overlay).
   Content area sits to the right with margin-left equal to drawer width.
   The floating hamburger is hidden — the drawer is always there.
   On mobile (<1024px) we fall back to the existing slide-in pattern. */

@media (min-width: 1024px) {
  :root {
    --drawer-width: 224px;   /* narrower than mobile (was 300px → 224, 2026-06-16 density pass) */
  }

  /* Drawer is anchored permanently — no transitions, always visible */
  .drawer {
    max-width: var(--drawer-width);
  }

  /* Content area starts after drawer; no slide-out animation */
  .app-shell {
    transform: none !important;
    /* IMPORTANT: also clear will-change so .app-shell doesn't create a
       containing block for position:fixed children. Without this, the
       picker dropdowns (and any other fixed overlays) get offset by the
       drawer width, because they end up positioned relative to .app-shell
       instead of the viewport. */
    will-change: auto !important;
    margin-left: var(--drawer-width);
    width: calc(100% - var(--drawer-width));
    transition: none;
  }
  .app-shell.open {
    transform: none !important;
    margin-left: var(--drawer-width);
  }
  /* Kill the dim-overlay since the drawer is part of the layout, not modal */
  .app-shell::before { display: none !important; }

  /* Hamburger isn't needed — drawer is always there */
  .float-hamburger { display: none; }

  /* Brand header sits IN LINE with the app-bar so their bottom borders form
     one continuous line across the top of the app (no "step" between the rail
     and the content). The app-bar's desktop height is its 42px menu button +
     14/12px padding + 1px border ≈ 68px — match it exactly. flex-shrink:0 stops
     the drawer's flex column from squashing the header when the nav list is long
     (the content area scrolls instead). Keep in sync if the app-bar's vertical
     rhythm changes. Desktop-rail only — mobile keeps its safe-area header pad. */
  .drawer-header {
    height: 68px;
    padding-top: 0;
    padding-bottom: 0;
    flex-shrink: 0;
  }

  /* ── Collapsible rail ──────────────────────────────────────────────
     The app-bar hamburger hides the rail entirely so content can reclaim
     the full width; the choice is remembered (body.rail-collapsed). We
     animate the drawer's OWN transform + the content's margin/width, and
     deliberately NOT a transform on .app-shell — that would make it a
     containing block for position:fixed overlays (see the will-change note
     above) and offset the picker dropdowns. */
  .drawer {
    transition: transform 0.28s cubic-bezier(0.32,0.72,0,1),
                background 0.3s ease, border-color 0.3s ease;
  }
  .app-shell {
    transition: margin-left 0.28s cubic-bezier(0.32,0.72,0,1),
                width 0.28s cubic-bezier(0.32,0.72,0,1);
  }
  body.rail-collapsed .drawer { transform: translateX(-100%); }
  body.rail-collapsed .app-shell { margin-left: 0; width: 100%; }
  /* Flip the glyph to hint the rail will slide back in */
  body.rail-collapsed .app-bar-menu .app-menu-icon { transform: scaleX(-1); }

  /* More breathing room and a wider content max-width on desktop.
     Top padding matches mobile — bar is a flex sibling so content starts
     16px below the bar's border. */
  .main {
    padding: 16px 36px calc(env(safe-area-inset-bottom) + 40px);
    max-width: 1200px;
  }
}

/* Wider content on big screens — modules use the space. The ceiling climbs
   to a generous ~1700px on large / external monitors (readability over
   edge-to-edge). Single-column readers (KB prose, Tasks/Safety lists) keep
   their own narrower inner caps, so only grid/split screens widen. */
@media (min-width: 1280px) {
  .main { max-width: 1360px; padding-left: 48px; padding-right: 48px; }
}
@media (min-width: 1536px) {
  .main { max-width: 1560px; }
}
@media (min-width: 1800px) {
  .main { max-width: 1700px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   DEPARTMENTS — Settings panel: site-grouped layout + module access grid
   ═══════════════════════════════════════════════════════════════════════ */

.depts-site-group {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.depts-site-group:first-child { margin-top: 0; padding-top: 0; border-top: none; }

.depts-site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.depts-site-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.depts-site-name svg {
  width: 14px; height: 14px;
  color: var(--accent);
  flex-shrink: 0;
}
.depts-site-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.depts-site-empty {
  font-size: var(--text-sm);
  color: var(--text-muted);
  font-style: italic;
  padding: 6px 4px;
}

/* Module count chip in row */
.dept-modules-count {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-muted);
  background: var(--bg-elevated);
  padding: 2px 7px;
  border-radius: var(--radius-md);
  margin-left: 8px;
  vertical-align: middle;
  letter-spacing: 0;
  text-transform: none;
}

/* Module access grid in edit panel */
.dept-module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
  margin-top: 6px;
}
.dept-module-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--text-base);
  color: var(--text-primary);
  transition: border-color 0.12s, background 0.12s;
}
.dept-module-row:hover { border-color: var(--accent); }
.dept-module-row input[type="checkbox"] {
  flex-shrink: 0;
  cursor: pointer;
}
.dept-module-row:has(input:checked) {
  background: var(--accent-soft);
  border-color: var(--accent);
}

/* ═══════════════════════════════════════════════════════════════════════
   DRAWER — per-site Department selector inside each site accordion
   ═══════════════════════════════════════════════════════════════════════
   Sits at the top of each expanded site's content area. Coloured left
   stripe matches the selected dept's colour for instant visual recognition
   (key safeguard for managers who switch contexts often). */

/* Accordion height cap — only exists so the expand/collapse can animate
   (you can't transition to max-height:none). Must clear the FULL module list:
   "All departments" shows every module (~17 now) plus the dept-selector chip,
   which is well over the old 600px and was clipping the bottom modules
   (Projects / Safety / Statistics). The outer .drawer-content scrolls, so a
   tall value here never overflows the viewport — it just stops clipping. */
.drawer-site.expanded .drawer-site-modules {
  max-height: 1400px;
}

/* Common base — applies to row, static, and empty states */
.drawer-site-dept-row,
.drawer-site-dept-static,
.drawer-site-dept-empty {
  margin: 6px 6px 8px 0;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 500;
}

/* Active dropdown trigger — a button styled to look like a chip */
.drawer-site-dept-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 30px 6px 6px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-left: 3px solid var(--d-color, var(--accent));
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
  font-family: inherit;
  text-align: left;
  color: var(--text-primary);
  /* Reset default button styles */
  -webkit-appearance: none;
  appearance: none;
  outline: none;
}
.drawer-site-dept-row:hover { border-color: var(--accent); }
.drawer-site-dept-row:active { background: var(--bg-base); }
.drawer-site-dept-row[aria-expanded="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.12);
}
.drawer-site-dept-icon {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: var(--radius-md);
  flex-shrink: 0;
}
.drawer-site-dept-icon svg { width: 13px; height: 13px; }
.drawer-site-dept-label {
  flex: 1;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-primary);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  min-width: 0;
}
.drawer-site-dept-chevron {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px; height: 14px;
  color: var(--text-muted);
  pointer-events: none;
  transition: transform 0.15s;
}
.drawer-site-dept-row[aria-expanded="true"] .drawer-site-dept-chevron {
  transform: translateY(-50%) rotate(180deg);
  color: var(--accent);
}

/* Static label state — single dept user, no choice */
.drawer-site-dept-static {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 6px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-left: 3px solid var(--d-color, var(--accent));
}
.drawer-site-dept-static-icon {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: var(--radius-md);
  flex-shrink: 0;
}
.drawer-site-dept-static-icon svg { width: 13px; height: 13px; }
.drawer-site-dept-static-name {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-primary);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  min-width: 0;
  flex: 1;
}

/* Empty / no-access state */
.drawer-site-dept-empty {
  padding: 8px 10px;
  background: transparent;
  border: 1px dashed var(--border);
  color: var(--text-muted);
  font-size: var(--text-xs);
  line-height: 1.4;
}
.drawer-site-dept-link {
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
}

/* Locked site (user has no access) */
.drawer-site.is-locked {
  opacity: 0.55;
}
.drawer-site.is-locked .drawer-site-header {
  cursor: default;
}

/* Mobile width pass (2026-06-25): tighten horizontal padding on mobile so content
   uses the screen width. Appended at end-of-file so it beats the base rules AND any
   wider-breakpoint (600/640/767px) blocks at equal specificity (later source wins).
   Desktop (>=600px) untouched. */
@media (max-width: 599px) {
  /* .drawer-site-dept-row intentionally NOT trimmed: its 30px right padding is the
     gutter for an absolutely-positioned chevron — shrinking it crowds the chevron. */
  .dept-module-row { padding: 8px 7px; }
  .dept-module-grid { gap: 6px; }
}