/* ═══════════════════════════════════════════════════════════════════════
   KB LIGHT MODE — RESTRAINED PALETTE
   ─────────────────────────────────────────────────────────────────────
   Refit the KB module's light-mode icons to a corporate / luxury-brand
   aesthetic. Goal: secondary controls read as neutral glyphs; accent
   colour reserved for primary CTAs and current-state signals only.

   Strategy:
     • Secondary icons (camera, mic, folder-add, upload, folder-card
       icons, manage-tags hover) → neutral grey container + secondary
       text colour. Hover lifts toward accent so affordance survives.
     • Primary CTAs stay full accent: .quick-send (composer SEND), the
       big "+" FAB. These are the one-thing-eye-should-jump-to.
     • Current-state signals stay accent: active library tab, focused
       search border, selected card highlight.
     • Status meaning chips (allergens etc) unchanged — colour conveys
       compliance information.

   Dark mode (data-theme="dark") is untouched.
   ═══════════════════════════════════════════════════════════════════════ */

/* Composer — camera + mic become neutral (SEND stays primary cyan) */
[data-theme="light"] .quick-action-prominent {
  background: var(--bg-elevated);
  border-color: var(--border);
  color: var(--text-secondary);
}
[data-theme="light"] .quick-action-prominent:hover {
  background: var(--bg-hover);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

/* Folder action row — folder-add, upload buttons neutral by default */
[data-theme="light"] .kb-folder-create-btn {
  background: var(--bg-surface);
  border-color: var(--border);
  color: var(--text-secondary);
}
[data-theme="light"] .kb-folder-create-btn:hover {
  background: var(--bg-elevated);
  border-color: var(--border-strong);
  color: var(--text-primary);
}
[data-theme="light"] .kb-folder-create-btn-instr svg {
  color: var(--text-secondary);
}
[data-theme="light"] .kb-folder-create-btn-instr:hover svg {
  color: var(--accent);
}

/* Organise / instr action button — neutral default, gentle hover */
[data-theme="light"] .kb-folder-action-instr {
  color: var(--text-secondary);
}
[data-theme="light"] .kb-folder-action-instr:hover {
  background: var(--bg-elevated);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

/* Folder card left icon — neutral box, accent only on hover */
[data-theme="light"] .kb-folder-card-icon {
  background: var(--bg-elevated);
  color: var(--text-secondary);
}
[data-theme="light"] .kb-folder-card:hover .kb-folder-card-icon {
  background: var(--accent-soft);
  color: var(--accent);
}

/* Captures folder — soft neutral border, accent only on hover */
[data-theme="light"] .kb-folder-card.kb-folder-card-captures {
  border-color: var(--border-strong);
}
[data-theme="light"] .kb-folder-card.kb-folder-card-captures:hover {
  border-color: var(--accent);
}

/* Tag manager rename hover — neutral */
[data-theme="light"] .kb-tag-mgr-rename:hover {
  background: var(--bg-elevated);
  color: var(--text-primary);
}

/* Manage tags button hover — neutral */
[data-theme="light"] .kb-manage-tags-btn:hover {
  background: var(--bg-elevated);
  color: var(--text-primary);
}

/* Library tabs — neutral default, accent only on active (kept signal) */
[data-theme="light"] .kb-lib-tab:not(.is-active) {
  color: var(--text-secondary);
}
[data-theme="light"] .kb-lib-tab:not(.is-active):hover {
  color: var(--text-primary);
  background: var(--bg-surface);
}

/* App-bar icon buttons + KB folder-row icon buttons need NO light-mode
   overrides any more — the base style (css/09 / css/07) is now the ghost
   treatment built from theme tokens, so it adapts to light mode by itself.
   (The old bordered-in-light overrides lived here; removed 2026-06-10.) */

/* ═══════════════════════════════════════════════════════════════════════
   APP-WIDE LIGHT MODE — RESTRAINED PALETTE
   ─────────────────────────────────────────────────────────────────────
   Extends the KB light-mode restraint to the rest of the app. Same
   philosophy: decorative accents go neutral, accent reserved for
   primary CTAs + state signals (focus / active / selected) + functional
   colour (priority, status). Dark mode untouched.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Top app bar (every module) ─── */
/* Light mode: the bar was painted --bg-base — the SAME colour as the page —
   so it dissolved into the canvas with only a hairline to separate it. Now
   the canvas is a warm off-white, so paint the bar pure white (--bg-surface)
   with a soft 1px lift: it reads as a clean, floating header (the Notion /
   Linear pattern) instead of blending in. Dark mode keeps the base rule
   (bar = --bg-base) untouched. */
[data-theme="light"] .app-bar {
  background: var(--bg-surface);
  border-bottom-color: var(--border);
  box-shadow: 0 1px 3px rgba(45,38,25,0.05);
}
[data-theme="light"] .app-bar-actions:not(:empty)::before {
  background: var(--border);
}

/* ─── Drawer / current-site banner ─── */
[data-theme="light"] .current-site-banner {
  background: var(--bg-elevated);
  color: var(--text-secondary);
}

/* ─── Tasks module — clear, calm accent feedback on hover ─── */
/* Detail info / action tiles: in light mode these previously hovered to a
   flat grey, which gave almost no signal — buttons felt dead. Now they lift
   to an accent border + a soft accent wash so the action clearly reads as
   live, without the harsh glow we were avoiding. */
[data-theme="light"] .tasks-detail-info-tile:not(.is-readonly):hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-surface));
}
/* Already-tinted (is-active) tiles need a stronger wash on hover, otherwise
   the change is invisible against their resting accent-soft fill. */
[data-theme="light"] .tasks-detail-info-tile.is-active:not(.is-readonly):hover {
  background: color-mix(in srgb, var(--accent) 18%, var(--bg-surface));
}
/* Action buttons (Cost / Call out / Order / Equipment) — accent hover */
[data-theme="light"] .tasks-detail-action-btn:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-surface));
}
/* Month header (completed view) — neutral hover */
[data-theme="light"] .tasks-month-header:hover {
  border-color: var(--border-strong);
}
/* Reminder presets — neutral hover (selected stays accent — STATE) */
[data-theme="light"] .tasks-reminder-preset:hover {
  border-color: var(--border-strong);
  background: var(--bg-elevated);
}
/* Photo strip hover — neutral border (added photo CTA stays neutral too) */
[data-theme="light"] .tasks-detail-photo-thumb:hover {
  border-color: var(--border-strong);
}
[data-theme="light"] .tasks-detail-photo-add-btn:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
  background: var(--bg-elevated);
}
/* Photo annotate button — neutral hover */
[data-theme="light"] .tasks-photo-thumb-annotate:hover {
  background: var(--bg-elevated);
  color: var(--text-primary);
}
/* Delegate picker avatar badge — keep meaningful initial colour
   but soften to a neutral surface; identity signal lives in the
   initials, not the background. */
[data-theme="light"] .tasks-picker-avatar {
  background: var(--bg-elevated);
  color: var(--text-secondary);
}

/* ─── Rooms module — decorative borders go neutral ─── */
[data-theme="light"] .rooms-summary-row:hover {
  border-color: var(--border-strong);
}
/* Selected room card highlight — STATE, keep accent but make subtler */
/* (kept as-is from rooms grid: border-color accent + soft glow) */

/* ─── KEPT AS ACCENT (intentionally) ───
   • All filter pills active state (.tasks-status-pill.is-active, .tasks-priority-option.is-active)
   • All focus borders (.tasks-search:focus-within, .app-bar-search:focus-within, input:focus)
   • Primary CTAs (.tasks-btn-primary, .tasks-new-btn, .app-bar-action.primary, .quick-send, .kb-fab, .tasks-fab)
   • Drawer active item highlight (signals current view)
   • Functional colour (.tasks-priority-option-dot[data-pri="*"], room status colours, callout warning/info/etc)
   • Library tab active state
   • Selected card highlight (rooms, tasks)
   These all communicate STATE or PRIORITY — neutralizing them would
   lose information. The restraint applies only to decorative cyan. */

/* ─── Task pinning (per-user "today" list) ─── */
.tasks-card-pin {
  position: absolute;
  bottom: 10px;
  right: 10px; /* bottom-right corner — frees the top-right for the department chip */
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  /* Always visible + ready to tap, on every device. (A hover-reveal made iOS
     need a double-tap to open the card, and hid the pin entirely on mobile.) */
  opacity: 1;
  transition: color 0.12s, background 0.12s;
  z-index: 2;
}
.tasks-card-pin:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.tasks-card-pin.is-pinned {
  color: var(--accent);
}
.tasks-card-pin.is-pinned:hover {
  color: var(--accent);
  background: var(--accent-soft);
}
/* Subtle treatment for pinned cards so they read as "mine" at a glance */
.tasks-card.is-pinned {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}

/* Pinned-for-me section header above the regular list */
.tasks-list-section-pinned {
  margin-bottom: 18px;
}
.tasks-list-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 4px 8px;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.tasks-list-section-icon { font-size: 14px; line-height: 1; }
.tasks-list-section-title { white-space: nowrap; }
.tasks-list-section-count {
  margin-left: auto;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
}

/* ─── "Mine" filter pill (Tasks toolbar) ─── */
/* Matches .tasks-status-pill exactly so it reads as part of the same
   filter strip — same rectangular shape (radius-md), same padding,
   same active treatment (full accent fill). When pressed, looks
   identical to a status pill in its active state. */
.tasks-mine-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  white-space: nowrap;
  touch-action: manipulation;
}
.tasks-mine-pill:hover {
  border-color: var(--text-muted);
  color: var(--text-primary);
}
.tasks-mine-pill.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg-base);
  font-weight: 600;
}
[data-theme="light"] .tasks-mine-pill.is-active {
  color: #ffffff;
}

/* ─── Tasks toolbar controls — crisp on the warm canvas (2026-07-01) ───
   The two filter dropdowns (status "Open", priority "All") and the Mine pill
   sat on --bg-elevated — a warm grey a hair off the page — so they blended in.
   On the warm canvas, give them a white fill + a firmer border so they read as
   distinct, tappable controls (the crisp Linear/Notion look). Active states are
   untouched: the open dropdown keeps its accent ring, and the Mine pill's accent
   fill survives via :not(.is-active). Light mode only; scoped to the Tasks
   filter row (the reference toolbar) — a wider rollout is a later, phased pass. */
[data-theme="light"] .tasks-filter-row .tasks-priority-trigger,
[data-theme="light"] .tasks-mine-pill:not(.is-active) {
  background: var(--bg-surface);
  border-color: var(--border-strong);
}

/* The site + department scope chips in the context bar get the SAME crisp
   white-on-canvas treatment, so they match the filter controls below them
   (Radek, 2026-07-01). The .context-bar descendant selector (0,3,0) beats
   both the base .context-chip rule and the mobile compact-variant rule. */
[data-theme="light"] .context-bar .context-chip {
  background: var(--bg-surface);
  border-color: var(--border-strong);
}

/* ─── Global keyboard avoidance ───────────────────────────────────────────
   --keyboard-height is set by a visualViewport listener in index.html.
   Adding padding-bottom equal to the keyboard height lifts every modal/sheet
   so it stays fully visible above the on-screen keyboard on iOS/Android.
   Works for both bottom-sheet overlays (align-items:flex-end) and centred
   overlays (padding shifts the centre point into the visible area).
   The role-editor-backdrop is fullscreen and handles its own scroll, so it
   is intentionally excluded. */
.tasks-modal-overlay,
.kb-modal-overlay,
.callout-modal-overlay,
.modal-overlay {
  padding-bottom: var(--keyboard-height, 0px) !important;
}

/* Prevent modals from growing taller than the space above the keyboard */
@media (max-width: 767px) {
  .tasks-modal {
    max-height: calc(92vh - var(--keyboard-height, 0px));
  }
}
@media (max-width: 599px) {
  .kb-modal {
    max-height: calc(85vh - var(--keyboard-height, 0px));
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   WARM-CANVAS CONTROL LEGIBILITY  (light mode only — 2026-07-01)
   On the warm --bg-base canvas (#f7f6f3), controls filled with --bg-elevated
   (#f1efea) barely separate from the page and blend in. Give every on-canvas
   control family the SAME crisp treatment already shipped for the Tasks toolbar
   (white fill + --border-strong), and firm the segmented-track / panel edges so
   they read as distinct objects. Dark mode is untouched — every rule below is
   [data-theme="light"]. Families that ALSO live inside white modals/sheets are
   context-scoped to their on-canvas wrapper class, so those instances are left
   exactly as they are. (Mapped by a full app-wide sweep, not just the reported
   screens — one consistent treatment instead of per-spot patches.)
   ══════════════════════════════════════════════════════════════════════════ */

/* Segmented tab strips — firm the track edge so the whole strip reads as one
   bordered object on the canvas; the active segment keeps its accent fill (the
   clear signal we don't weaken). The shared .callout-view-toggle is targeted
   only via its on-canvas modifier classes, so the detail-tab bars
   (.callout-detail-tabs / .tasks-detail-tabs) and the picker-sheet browse
   toggle — which sit on white — are NOT touched. (.lp-tabs has no base border,
   so it gains one; the others already carry 1px and are just recoloured.) */
[data-theme="light"] .cl-tab-bar,
[data-theme="light"] .asset-view-toggle,
[data-theme="light"] .ctr-filter-toggle,
[data-theme="light"] .compliance-tabs,
[data-theme="light"] .order-tabs,
[data-theme="light"] .lp-tabs {
  border: 1px solid var(--border-strong);
}

/* Standalone pills / grouping-dropdown / browse rows on the canvas — crisp
   white fill + strong border. Active/selected states keep their accent or
   colour tint (excluded via :not()), so no signal is lost. The Category ▾
   dropdown is scoped to .asset-cat-dropdown so the SAME .tasks-priority-trigger
   used as a grey field inside modal forms stays grey; the mobile Asset browse
   rows are scoped to .asset-folder-nav so the identical .psheet-* atoms inside
   real picker sheets stay grey-on-white. */
[data-theme="light"] .energy-util-tab:not(.is-active),
[data-theme="light"] .cal-chip:not(.is-on),
[data-theme="light"] .order-filter-chip:not(.is-on),
[data-theme="light"] .asset-cat-dropdown .tasks-priority-trigger,
[data-theme="light"] .asset-folder-nav .psheet-row,
[data-theme="light"] .asset-folder-nav .psheet-fold-head {
  background: var(--bg-surface);
  border-color: var(--border-strong);
}

/* Desktop Asset "Locations" panel — firm the outer frame so the two-pane box
   reads crisply against the canvas. BORDER ONLY: the frame wraps both the white
   sidebar AND the asset-list panel (white cards), so its background is left
   unchanged to avoid flattening those cards onto a white pane. */
[data-theme="light"] .kb-tree-layout {
  border-color: var(--border-strong);
}


/* ════════════════════════════════════════════════════════════════════
   CHAT — light "paper" theme (2026-07-02). Chat previously had ZERO light
   overrides: bubbles were #fff-on-paper with no shadow (≈1.08:1) and rich
   task/request cards were painted the CANVAS colour (1.00:1 — invisible).
   Light mode carries depth with crisp print shadows (the app-wide light
   card-lift language), where dark mode uses tonal steps instead.
   ════════════════════════════════════════════════════════════════════ */
/* Incoming bubbles: white card on warm paper + a soft print shadow. */
[data-theme="light"] .chat-bubble {
  background: var(--bg-surface);
  box-shadow: 0 1px 3px rgba(31, 27, 16, .07);
}
/* Own messages: solid soft-accent fill (filled-vs-outlined, same as dark). */
[data-theme="light"] .chat-bubble-row.is-mine .chat-bubble {
  background: color-mix(in srgb, var(--accent) 16%, #fff);
  border-color: transparent;
}
/* Action cards: white + firm border + a stronger lift than plain bubbles —
   the top elevation step. (Must out-!important the css/15 base card rule.) */
[data-theme="light"] .chat-bubble-task {
  background: var(--bg-surface) !important;
  border-color: var(--border-strong) !important;
  box-shadow: 0 2px 8px rgba(31, 27, 16, .10);
}
/* Request/task state tints mix into WHITE (not the dark elevated token). */
[data-theme="light"] .chat-bubble-task:has(.chat-request-card.is-open) {
  background: color-mix(in srgb, #d97706 7%, #fff) !important;
}
[data-theme="light"] .chat-bubble-task:has(.chat-request-card.is-claimed) {
  background: color-mix(in srgb, var(--accent) 8%, #fff) !important;
}
[data-theme="light"] .chat-bubble-task:has(.chat-request-card.is-done),
[data-theme="light"] .chat-bubble-task:has(.chat-request-card.is-accepted),
[data-theme="light"] .chat-bubble-task:has(.chat-task-card.is-done) {
  background: color-mix(in srgb, #16a34a 6%, #fff) !important;
}
[data-theme="light"] .chat-bubble-task:has(.chat-request-card.is-declined) {
  background: color-mix(in srgb, #dc2626 6%, #fff) !important;
}
[data-theme="light"] .chat-bubble-task:has(.chat-request-card.is-on_hold) {
  background: color-mix(in srgb, #a16207 7%, #fff) !important;
}
/* Sticky date pill: translucent white over paper. */
[data-theme="light"] .chat-day span {
  background: color-mix(in srgb, #fff 82%, transparent);
}
/* Menus/popovers: warm-toned shadows instead of the hardcoded near-black ones. */
[data-theme="light"] .chat-msg-menu { box-shadow: 0 14px 40px rgba(31, 27, 16, .18); }
[data-theme="light"] .chat-plus-menu { box-shadow: 0 14px 36px rgba(31, 27, 16, .14); }
[data-theme="light"] .chat-jump-latest { box-shadow: 0 8px 22px rgba(31, 27, 16, .16); }
/* Composer + search wells: white fields on the paper surfaces. */
[data-theme="light"] .chat-input,
[data-theme="light"] .chat-list-search,
[data-theme="light"] .chat-search-input,
[data-theme="light"] .chat-name-input { background: #fff; }

/* ══════════════════════════════════════════════════════════════════════════
   KB BROWSE CONTRAST  (light mode only — Prompt 27, 2026-07-06)
   Dark mode lifts folder/doc/note cards to --bg-elevated so they read as raised
   objects on the --bg-base canvas. That token INVERTS under light (elevated
   #f1efea is DARKER than base #f7f6f3), so cards would look recessed and muddy.
   Light instead uses the app-wide white-card-on-warm-paper language already
   shipped for chat bubbles + the Tasks toolbar: pure-white fill, --border-strong
   edge, a soft print shadow. This one rule covers BOTH canvases — the desktop
   .kb-tree-panel dark override (css/03) already sets --bg-surface, which resolves
   to #fff here, so panel cards inherit the same white + shadow. .colb-row
   rows-mode is left to css/21 (its own fill). On-canvas wayfinding controls
   (crumbs, reader back, action-strip, tree +) get the same crisp white edge. */
[data-theme="light"] .kb-folder-card,
[data-theme="light"] .kb-instr-card,
[data-theme="light"] .entry-card {
  background: var(--bg-surface);
  border-color: var(--border-strong);
  box-shadow: 0 1px 3px rgba(31, 27, 16, .07);
}
[data-theme="light"] .kb-crumb,
[data-theme="light"] .kb-reader-back,
[data-theme="light"] .kb-actions-iconbtn,
[data-theme="light"] .kb-tree-action {
  background: var(--bg-surface);
  border-color: var(--border-strong);
}
/* Preserve the breadcrumb wayfinding hierarchy in light: the current crumb
   (you-are-here) and the prominent back chip keep the warm --bg-elevated fill
   — otherwise the white-crumb rule above flattens them to look identical to the
   clickable path crumbs. Both selectors out-specify / tie-then-win the rule
   above so the fill sticks. Matches dark, where css/03 + css/07 already set it. */
[data-theme="light"] .kb-crumb-current,
[data-theme="light"] .kb-crumb.kb-crumb-back {
  background: var(--bg-elevated);
}

/* ── Reader + editor surfaces (Prompt 33) ──────────────────────────────────
   Same warm-print language as the browse cards above. In light --bg-elevated
   (#f1efea) is DARKER than the --bg-base canvas and --border is a near-invisible
   hairline, so editor block cards and the reader's pills/photo frames muddy into
   the page. Give the editor block the crisp white-card + strong-edge + soft print
   shadow treatment, and lift the reader chrome with the strong edge / shadow.
   (Token-driven surfaces that already resolve well in light — toolbar keys, block
   action keys via --border-strong in css/03 — need nothing here.) */
[data-theme="light"] .kb-doc-block {
  background: var(--bg-surface);
  /* NB: border-color is deliberately NOT set here — the css/03 base rule
     already resolves to --border-strong (#d9d5cc) in light. Setting it here
     would tie the specificity of `.kb-doc-block:focus-within` (both 0,2,0)
     and, loading later, clobber the accent focus edge in light mode. */
  box-shadow: 0 1px 3px rgba(31, 27, 16, .07);
}
[data-theme="light"] .kb-reader-meta-item {
  border-color: var(--border-strong);
}
[data-theme="light"] .kb-reader-photo-frame {
  box-shadow: 0 1px 3px rgba(31, 27, 16, .07);
}