/* ============================================================
   LAC Widget CSS — Learner Analytics Coverage widget family
   Relocated from admin.css (2026-09-06).

   Root cause: every consumer of the classes below —
     LearnerAnalyticsPage.js       (/learning/analytics)
     LearnerSelfAnalyticsPage.js   (/learning/my-analytics)
     assets/js/components/lac/*.js
     assets/js/components/lac-learner/*.js
   is wired exclusively into the TENANT portal SPA (index.html).
   None of them are referenced by admin.html. admin.css is the
   admin-portal-only stylesheet (see index.html comment near the
   auditor.css <link>) and is never loaded by index.html — so this
   entire block was dead weight in admin.css and every page/widget
   listed above rendered with zero layout CSS in the tenant portal
   (no page padding, no responsive widget grid, no widget accents).

   Reported symptom: "My Learning Analytics" page controls touching
   the left nav / right edge with no padding, and not matching the
   platform's standard page-padding convention (adm-page-wrap).

   This file is the byte-for-byte relocated block (admin.css lines
   4344–5186 at time of move) — no rules were changed, only moved
   to a stylesheet index.html actually loads. See git history for
   the pre-move content if a diff is needed against admin.css.
   ============================================================ */

/* ═══════════════════════════════════════════════════════════════════════════
   LAC-1 Wave 1 — Learner Analytics Coverage Widgets
   Route: /learning/analytics  (LearnerAnalyticsPage + 6 widget classes)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Page shell ─────────────────────────────────────────────────────────── */
/* MR-109: added responsive padding — was fixed 24px 28px at all widths, leaving
   only 264px content area at 320px. Now mobile-first with canonical breakpoints. */
.lac-analytics-page {
  padding: 16px;
}
@media (min-width: 480px) {
  .lac-analytics-page { padding: 20px; }
}
@media (min-width: 768px) {
  .lac-analytics-page { padding: 24px 28px; }
}
.lac-analytics-header {
  margin-block-end: 28px;
}
.lac-analytics-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--adm-text-primary);
  margin: 0 0 6px;
}
.lac-analytics-subtitle {
  font-size: 13px;
  color: var(--adm-text-muted);
  margin: 0;
}

/* ── Widget grid (auto-fill 2 columns ≥ 768 px) ─────────────────────────── */
.lac-analytics-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 768px) {
  .lac-analytics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.lac-widget-slot--full  { grid-column: 1 / -1; }
.lac-widget-slot--half  { grid-column: span 1; }

/* ── Widget base card overrides ─────────────────────────────────────────── */
.lac-widget {
  container-type: inline-size;
  container-name: lac-widget;
}
.lac-widget-body {
  padding: 16px 20px 20px;
}
.lac-widget-header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

/* ── Widget states ──────────────────────────────────────────────────────── */
.lac-widget-loading {
  display: flex;
  justify-content: center;
  padding: 32px 0;
}
.lac-widget-empty {
  padding: 32px 0;
  text-align: center;
  color: var(--adm-text-muted);
  font-size: 13px;
}
.lac-widget-error {
  padding: 20px;
  background: var(--adm-red-glow);
  border-radius: var(--adm-radius-sm);
  color: var(--adm-text-primary);
}
.lac-widget-error-msg {
  font-size: 13px;
  margin: 0 0 12px;
  color: var(--adm-text-secondary);
}
.lac-retry-btn { margin-block-start: 8px; }
.lac-widget-slot-error {
  border-color: var(--adm-red);
}
.lac-permission-denied {
  margin: 24px 28px;
}

/* ── Generic table + footer ─────────────────────────────────────────────── */
.lac-table-wrap { border-radius: 0; }
.lac-table      { width: 100%; }
.lac-widget-footer {
  padding: 12px 20px;
  border-block-start: 1px solid var(--adm-border);
}
.lac-view-all-link {
  font-size: 12px;
  color: var(--adm-teal);
  text-decoration: none;
}
.lac-view-all-link:hover { text-decoration: underline; }

/* ── W-1 Engagement Pulse ──────────────────────────────────────────────── */
.lac-stats-grid { margin-block-end: 0; }
.lac-stat-val-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.lac-stat-trend {
  font-size: 18px;
  line-height: 1;
}
.lac-sparkline-wrap {
  margin-block-start: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.lac-sparkline-caption {
  font-size: 11px;
  color: var(--adm-text-muted);
}
.lac-trend-up   { color: var(--adm-green); }
.lac-trend-down { color: var(--adm-red);   }
.lac-trend-flat { color: var(--adm-text-muted); }

/* ── W-5 Re-watch Signals ──────────────────────────────────────────────── */
.lac-sortable-th { cursor: pointer; user-select: none; }
.lac-sortable-th:focus-visible {
  outline: 2px solid var(--adm-teal);
  outline-offset: 2px;
}
.lac-topic-title-cell {
  max-inline-size: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── W-17 Enrolment Funnel ──────────────────────────────────────────────── */
.lac-funnel {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.lac-funnel-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 0;
}
.lac-funnel-bar-wrap {
  flex: 1;
  background: var(--adm-bg-elevated);
  border-radius: var(--adm-radius-sm);
  block-size: 20px;
  overflow: hidden;
}
.lac-funnel-bar-fill {
  block-size: 100%;
  inline-size: var(--lac-funnel-width, 100%);
  border-radius: var(--adm-radius-sm);
  transition: inline-size 0.3s ease;
}
@media (prefers-reduced-motion: reduce) {
  .lac-funnel-bar-fill { transition: none; }
}
.lac-funnel-bar-fill--ok     { background: var(--adm-green); }
.lac-funnel-bar-fill--warn   { background: var(--adm-amber); }
.lac-funnel-bar-fill--danger { background: var(--adm-red); }
.lac-funnel-info {
  inline-size: 240px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lac-funnel-stage-name { font-size: 13px; font-weight: 600; color: var(--adm-text-primary); }
.lac-funnel-count      { font-size: 20px; font-weight: 700; color: var(--adm-text-primary); }
.lac-funnel-drop       { font-size: 11px; color: var(--adm-text-muted); }
.lac-funnel-drop--mid  { color: var(--adm-amber); }
.lac-funnel-drop--high { color: var(--adm-red); font-weight: 600; }
.lac-funnel-days       { font-size: 11px; color: var(--adm-text-muted); }
.lac-funnel-arrow {
  block-size: 16px;
  inline-size: 100%;
  display: flex;
  align-items: center;
  padding-inline-start: 8px;
  color: var(--adm-border-mid);
  font-size: 10px;
}
.lac-funnel-arrow::before { content: '▼'; font-size: 10px; }

/* Responsive: collapse funnel info to bottom on narrow containers */
@container lac-widget (max-width: 480px) {
  .lac-funnel-item    { flex-direction: column; align-items: flex-start; }
  .lac-funnel-info    { inline-size: 100%; }
}

/* ── W-18 LP Progression ────────────────────────────────────────────────── */
.lac-lp-card {
  background: var(--adm-bg-elevated);
  border: 1px solid var(--adm-border);
  border-radius: var(--adm-radius-md);
  padding: 16px;
  margin-block-end: 12px;
}
.lac-lp-card:last-child { margin-block-end: 0; }
.lac-lp-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--adm-text-primary);
  margin: 0 0 8px;
}
.lac-lp-meta {
  font-size: 12px;
  color: var(--adm-text-muted);
  margin-block-end: 12px;
}
.lac-lp-stages {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lac-lp-stage {
  display: flex;
  align-items: center;
  gap: 10px;
}
.lac-lp-stage-name {
  inline-size: 140px;
  flex-shrink: 0;
  font-size: 12px;
  color: var(--adm-text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
}
.lac-lp-bottleneck-badge { font-size: 10px; padding: 2px 6px; }
.lac-lp-bar-wrap {
  flex: 1;
  background: var(--adm-bg-base);
  border-radius: 100px;
  block-size: 10px;
  overflow: hidden;
}
.lac-lp-bar-fill {
  block-size: 100%;
  inline-size: var(--lac-lp-bar-pct, 0%);
  background: var(--adm-teal);
  border-radius: 100px;
  transition: inline-size 0.4s ease;
}
@media (prefers-reduced-motion: reduce) {
  .lac-lp-bar-fill { transition: none; }
}
.lac-lp-bar-fill--bottleneck { background: var(--adm-amber); }
.lac-lp-stage-info {
  inline-size: 200px;
  flex-shrink: 0;
  font-size: 11px;
  color: var(--adm-text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.lac-lp-stall-alert { font-size: 10px; }

@container lac-widget (max-width: 600px) {
  .lac-lp-stage      { flex-wrap: wrap; }
  .lac-lp-stage-name { inline-size: 100%; }
  .lac-lp-stage-info { inline-size: 100%; }
}

/* ── W-20 Dept Completion Leaderboard ───────────────────────────────────── */
.lac-dept-row--below-threshold td { color: var(--adm-red); }
.lac-dept-suppressed-row { opacity: 0.65; }
.lac-privacy-note {
  font-size: 11px;
  font-style: italic;
  color: var(--adm-text-muted);
}
.lac-pct-cell       { font-weight: 600; }
.lac-pct-cell--red  { color: var(--adm-red); }
.lac-trend-cell {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ── W-21 Inactive Learner Alert ────────────────────────────────────────── */
.lac-inactive-summary {
  font-size: 13px;
  color: var(--adm-text-muted);
  margin: 0 0 16px;
  padding: 0 20px;
}
.lac-days-stale { color: var(--adm-amber); font-weight: 600; }
.lac-remind-btn--sent {
  background: var(--adm-green-glow);
  color: var(--adm-green);
  border-color: var(--adm-green);
  cursor: default;
}
.lac-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 20px;
  border-block-start: 1px solid var(--adm-border);
}
.lac-page-info {
  font-size: 12px;
  color: var(--adm-text-muted);
}

/* ── Screen-reader-only utility (if not already in design-system.css) ───── */
.sr-only,
.adm-sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Light theme overrides for LAC widgets ──────────────────────────────── */
[data-theme="light"] .lac-lp-card {
  background: #f9fafb;
  border-color: #e5e7eb;
}
[data-theme="light"] .lac-funnel-bar-wrap {
  background: #e5e7eb;
}
[data-theme="light"] .lac-widget-error {
  background: rgba(239, 68, 68, 0.08);
}

/* ═══════════════════════════════════════════════════════════════════════════
   LAC-1 Wave 2 — Learner Self-Analytics Page Layout (minimal overrides only)
   All widget content uses existing adm-* components.
   No new :root token block — all colours via proven var(--adm-*) tokens.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Page padding ─────────────────────────────────────────────────────────
   2026-09-06: page shell now carries the canonical `.adm-page-wrap` class
   (auditor.css: max-width 1280px, centred, 24px/32px desktop padding;
   components.css MR-136: 12px/16px at ≤768px) alongside `.lac-learner-page`,
   matching every other tenant-portal page (Modules, Billing, Settings,
   Team) instead of the bespoke padding scale this class used to carry.
   `.lac-learner-page` is kept as a semantic/test-hook marker only — it no
   longer sets its own padding, so it can't win the cascade against
   `.adm-page-wrap` and drift out of sync with the shared pattern again. */

/* ── Widget grid ─────────────────────────────────────────────────────────── */

.lac-learner-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 768px) {
  .lac-learner-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .lac-widget-slot--full { grid-column: 1 / -1; }
  .lac-widget-slot--half { grid-column: span 1; }
}

/* ── Widget card — overrides adm-card defaults (no extra padding, no bottom margin) */

.adm-card.lac-learner-widget {
  padding: 0;
  margin-bottom: 0;
  border-inline-start: 3px solid var(--adm-teal, #00b4a2);
}

/* adm-card-header has margin: -20px -20px 20px designed for cards with padding:20px.
   Inside lac-learner-widget (padding:0), those negative margins bleed outside the card.
   2026-09-06: also give the header its own horizontal padding explicitly. That
   admin.css .adm-card-header (padding: 14px 20px; margin: -20px -20px 20px) is the
   admin-portal-only definition; the tenant portal's .adm-card-header comes from
   auditor.css instead, which carries no horizontal padding of its own — it relies
   on .adm-card's own padding for inset, which lac-learner-widget zeroes out above.
   Without this, the title sits flush against the card's teal left border. */
.lac-learner-widget .adm-card-header {
  margin: 0;
  padding: 14px 20px;
}

/* ── Widget body padding ─────────────────────────────────────────────────── */

.lac-widget-body {
  padding: 12px 16px;     /* mobile */
}
@media (min-width: 768px) {
  .lac-widget-body { padding: 16px 20px; }
}

/* ── Module accordion header (div role=button) — focus ring only ─────── */

/* The clickable header is a <div> so there are no UA button styles to fight.
   This class is retained only to provide the keyboard focus ring. */
[role="button"].lac-mp-toggle:focus-visible,
[role="button"][aria-controls]:focus-visible {
  outline: 2px solid var(--adm-teal, #00b4a2);
  outline-offset: -2px;
}

/* ── Progress bar ── reuse existing static helper output ─────────────────── */

.lac-learner-progress-bar {
  height: 6px;
  border-radius: 9999px;
  background: var(--adm-border-mid, rgba(255,255,255,0.12));
  overflow: hidden;
}
.lac-learner-progress-bar-fill {
  height: 100%;
  border-radius: 9999px;
  width: var(--lac-learner-pct, 0%);
  background: var(--adm-teal, #00b4a2);
  transition: width 0.3s ease;
}
@media (prefers-reduced-motion: reduce) {
  .lac-learner-progress-bar-fill { transition: none; }
}
.lac-learner-progress-bar-fill--watch { background: var(--adm-purple, #8b5cf6); }

/* ── Topic rows inside module accordion ──────────────────────────────────── */

.lac-mp-topic-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px;
  flex-wrap: wrap;
}
.lac-mp-topic-row:hover { background: var(--adm-bg-card-hover, #1f2a3f); }

.lac-mp-topic-label {
  flex: 1 1 160px;
  font-size: 13px;
  color: var(--adm-text-primary, #f0f4ff);
}
.lac-mp-topic-watch-wrap {
  flex: 1 1 120px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.lac-mp-topic-watch-label {
  font-size: 11px;
  color: var(--adm-text-muted, #64748b);
}

/* ── Permission denied panel ─────────────────────────────────────────────── */

.lac-permission-denied { margin: 24px 28px; }

/* ── Screen-reader only (keep alias used by external callers) ────────────── */

.adm-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ── Light-theme overrides — only for new classes above ──────────────────── */

[data-theme="light"] .lac-mp-toggle {
  background: #f9fafb;
  color: #111827;
}
[data-theme="light"] .lac-mp-toggle:hover,
[data-theme="light"] .lac-mp-toggle[aria-expanded="true"] {
  background: #f3f4f6;
}
[data-theme="light"] .lac-learner-progress-bar { background: #e5e7eb; }
[data-theme="light"] .lac-mp-topic-row:hover   { background: #f3f4f6; }
[data-theme="light"] .lac-mp-topic-label       { color: #374151; }
[data-theme="light"] .lac-mp-topic-watch-label { color: #6b7280; }

/* ── MR-107: Module accordion card header — CSS hover replaces JS inline style ──
   Moved from mouseenter/mouseleave JS handlers so [data-theme="light"] override works.
   MR-106: lac-mp-card-title colour via CSS so light-theme token applies correctly. */

.lac-mp-card-hdr {
  /* layout already applied via inline style; this rule only carries hover + focus state */
}
.lac-mp-card-hdr:hover {
  background: var(--adm-bg-elevated, #222d42);
}
.lac-mp-card-title {
  color: var(--adm-text-primary, #f0f4ff);
}

[data-theme="light"] .lac-mp-card-hdr:hover {
  background: #f3f4f6;
}
[data-theme="light"] .lac-mp-card-title {
  color: #111827;
}

/* =============================================================================
   LAC-1.5 W-AN-27 — Statutory Coverage Matrix Widget
   ============================================================================= */

/* ── Scrollable matrix wrapper ──────────────────────────────────────────────── */

.lac-scm-matrix-wrap {
  overflow-x: auto;
  border-radius: var(--adm-radius-md, 8px);
}

/* ── Matrix table base ──────────────────────────────────────────────────────── */

.lac-scm-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 12px;
}

.lac-scm-table th,
.lac-scm-table td {
  padding: 7px 10px;
  border: 1px solid var(--adm-border, rgba(255,255,255,0.07));
  white-space: nowrap;
}

.lac-scm-table th {
  background: var(--adm-bg-elevated, #222d42);
  font-size: 11px;
  font-weight: 600;
  color: var(--adm-text-muted, #64748b);
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ── RAG cell variants ──────────────────────────────────────────────────────── */

.lac-scm-cell--green {
  background: rgba(34,197,94,.12);
  color: #22c55e;
  font-weight: 600;
}

.lac-scm-cell--amber {
  background: rgba(245,158,11,.12);
  color: #f59e0b;
  font-weight: 600;
}

.lac-scm-cell--red {
  background: rgba(239,68,68,.12);
  color: #ef4444;
  font-weight: 600;
}

/* ── Low-data suppression chip ──────────────────────────────────────────────── */

.lac-scm-cell--low-data {
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 3px,
    rgba(100,116,139,.15) 3px,
    rgba(100,116,139,.15) 6px
  );
  color: var(--adm-text-muted, #64748b);
  font-size: 11px;
}

/* ── RAG status badge (inline in cell) ─────────────────────────────────────── */

.lac-scm-rag-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: var(--adm-radius-sm, 4px);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
}
.lac-scm-rag-badge--green  { background: rgba(34,197,94,.15);  color: #22c55e; }
.lac-scm-rag-badge--amber  { background: rgba(245,158,11,.15); color: #f59e0b; }
.lac-scm-rag-badge--red    { background: rgba(239,68,68,.15);  color: #ef4444; }
.lac-scm-rag-badge--unknown { background: rgba(100,116,139,.15); color: var(--adm-text-muted, #64748b); }

/* ── Secondary panels grid (risk + calendar) ────────────────────────────────── */

.lac-scm-secondary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-block-start: 20px;
}

/* MR-147 (2026-08-21): Canonical breakpoint fix — 767px → 768px.
   The 767px breakpoint misses the exact 768px tablet portrait width.
   The 768px rule is also added at the end of this file as the authoritative
   canonical override. This line is retained for the co-located context. */
@media (max-width: 768px) {
  .lac-scm-secondary { grid-template-columns: 1fr; }
}

/* ── Panel wrapper shared by risk + calendar ────────────────────────────────── */

.lac-scm-panel {
  background: var(--adm-bg-elevated, #222d42);
  border-radius: var(--adm-radius-md, 8px);
  padding: 14px 16px;
  overflow: hidden;
}

.lac-scm-panel-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--adm-text-primary, #f0f4ff);
  margin: 0 0 10px;
}

/* ── Non-compliance risk list ───────────────────────────────────────────────── */

.lac-scm-risk-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lac-scm-risk-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px 0;
  border-block-end: 1px solid var(--adm-border, rgba(255,255,255,0.06));
  font-size: 12px;
}

.lac-scm-risk-item:last-child { border-block-end: none; }

.lac-scm-risk-module {
  flex: 1 1 120px;
  color: var(--adm-text-primary, #f0f4ff);
  font-weight: 500;
}

.lac-scm-risk-meta {
  color: var(--adm-text-muted, #64748b);
  font-size: 11px;
  white-space: nowrap;
}

/* ── Severity badges ────────────────────────────────────────────────────────── */

.lac-scm-sev-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: var(--adm-radius-sm, 4px);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
}
.lac-scm-sev-badge--low      { background: rgba(100,116,139,.2); color: var(--adm-text-muted, #64748b); }
.lac-scm-sev-badge--medium   { background: rgba(245,158,11,.15); color: #f59e0b; }
.lac-scm-sev-badge--high     { background: rgba(239,68,68,.15);  color: #ef4444; }
.lac-scm-sev-badge--critical { background: rgba(239,68,68,.3);   color: #ef4444; font-style: italic; }

/* ── Regulatory calendar list ───────────────────────────────────────────────── */

.lac-scm-cal-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lac-scm-cal-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px 0;
  border-block-end: 1px solid var(--adm-border, rgba(255,255,255,0.06));
  font-size: 12px;
}

.lac-scm-cal-item:last-child { border-block-end: none; }

.lac-scm-cal-item--alert {
  background: rgba(239,68,68,.05);
  padding-inline-start: 6px;
  border-inline-start: 2px solid #ef4444;
  margin-inline-start: -6px;
}

.lac-scm-cal-alert-icon {
  color: #ef4444;
  font-size: 12px;
}

.lac-scm-cal-date {
  font-size: 11px;
  font-weight: 600;
  color: var(--adm-text-muted, #64748b);
  white-space: nowrap;
}

/* =============================================================================
   LAC-1.6 W-AN-28 — Certificate Integrity Widget (CCO persona)
   ============================================================================= */

/* ── RAG percentage colour classes ──────────────────────────────────────────── */

.lac-ci-pct--green { color: #22c55e; font-weight: 600; }
.lac-ci-pct--amber { color: #f59e0b; font-weight: 600; }
.lac-ci-pct--red   { color: #ef4444; font-weight: 600; }

/* ── Footer bar ─────────────────────────────────────────────────────────────── */

.lac-ci-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 10px 20px;
  border-block-start: 1px solid var(--adm-border, rgba(255,255,255,.07));
  font-size: 11px;
  color: var(--adm-text-muted, #64748b);
  margin-block-start: 8px;
}

.lac-ci-footer-fingerprint {
  font-family: monospace;
}

/* ── Bloom's depth-level warning banner (CO-ADV-STRUCT2) ────────────────────── */

.lac-ci-depth-warning {
  background: rgba(245,158,11,.08);
  border: 1px solid rgba(245,158,11,.25);
  border-radius: 6px;
  padding: 9px 14px;
  margin-block-end: 14px;
  font-size: 12px;
  color: #f59e0b;
}

.lac-scm-cal-date--urgent { color: #f59e0b; }

.lac-scm-cal-title {
  flex: 1 1 120px;
  color: var(--adm-text-primary, #f0f4ff);
  font-weight: 500;
}

.lac-scm-cal-tags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.lac-scm-cal-tag {
  display: inline-block;
  padding: 1px 5px;
  border-radius: var(--adm-radius-sm, 4px);
  background: rgba(100,116,139,.18);
  color: var(--adm-text-muted, #64748b);
  font-size: 10px;
  font-weight: 500;
  white-space: nowrap;
}

.lac-scm-cal-rate {
  color: var(--adm-text-muted, #64748b);
  font-size: 11px;
  white-space: nowrap;
}

/* ── Light-theme overrides ──────────────────────────────────────────────────── */

[data-theme="light"] .lac-scm-table th {
  background: #f3f4f6;
  color: #6b7280;
  border-color: #e5e7eb;
}
[data-theme="light"] .lac-scm-table th,
[data-theme="light"] .lac-scm-table td {
  border-color: #e5e7eb;
}
[data-theme="light"] .lac-scm-panel {
  background: #f9fafb;
}
[data-theme="light"] .lac-scm-panel-title { color: #111827; }
[data-theme="light"] .lac-scm-risk-module { color: #111827; }
[data-theme="light"] .lac-scm-cal-title   { color: #111827; }
[data-theme="light"] .lac-scm-risk-item,
[data-theme="light"] .lac-scm-cal-item    { border-color: #e5e7eb; }

/* ── Reduced-motion: no animated fills in this widget ───────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .lac-scm-cell--green,
  .lac-scm-cell--amber,
  .lac-scm-cell--red { transition: none; }
}

/* ── W-AN-29 Module Abandonment widget (LAC-1.7) ────────────────────────────── */

.lac-ma-grid         { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 768px) { .lac-ma-grid { grid-template-columns: 1fr; } }
.lac-ma-panel        { background: var(--adm-bg-elevated, #1e2637); border-radius: var(--adm-radius-md, 8px); padding: 16px 18px; }
.lac-ma-panel-title  { font-size: 12px; font-weight: 700; color: var(--adm-text-muted, #64748b); text-transform: uppercase; letter-spacing: .06em; margin: 0 0 12px; }
.lac-ma-list         { list-style: none; margin: 0; padding: 0; }
.lac-ma-row          { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--adm-border, rgba(255,255,255,.06)); font-size: 13px; }
.lac-ma-row:last-child { border-bottom: none; }
.lac-ma-mod-title    { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--adm-text-primary, #f0f4ff); }
.lac-ma-count--amber { background: rgba(245,158,11,.15); color: #f59e0b; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 9999px; white-space: nowrap; }
.lac-ma-count--red   { background: rgba(239,68,68,.15); color: #ef4444; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 9999px; white-space: nowrap; }
.lac-ma-count--low   { background: rgba(100,116,139,.12); color: var(--adm-text-muted, #64748b); font-size: 11px; padding: 2px 8px; border-radius: 9999px; white-space: nowrap; }
.lac-ma-empty        { font-size: 12px; color: var(--adm-text-muted, #64748b); font-style: italic; padding: 8px 0; }
.lac-ma-footer       { display: flex; flex-wrap: wrap; gap: 12px; padding: 10px 0 0; border-top: 1px solid var(--adm-border, rgba(255,255,255,.06)); margin-top: 16px; font-size: 11px; color: var(--adm-text-muted, #64748b); }
.lac-ma-disclaimer   { flex: 1; min-width: 200px; }
.lac-ma-fingerprint  { font-family: monospace; }