/* ============================================================================
   Course-detail light-mode + compaction overrides (shared).

   The course-detail workspace (overview, lessons, tasks, students, progress,
   gradebook, standardized-exams) is built on the Workspace-OS --kw-* tokens but
   the shared Kairos skin repaints several of its components dark: the hero
   cover banner, the stats strip and the .kw-copilot ("Course/Teaching
   Intelligence") panels render as white text on light surfaces — unreadable.

   These rules re-theme those components to the light workspace and tighten a
   few oversized bits. Attribute/descendant specificity + !important out-specify
   the skin's plain selectors, so load order does not matter.
   ========================================================================== */

/* ── Light, compact course hero ─────────────────────────────────────────── */
.kw-hero2 .ch-banner,
.kw-hero2 .ch-banner.has-image{
  background:linear-gradient(135deg, var(--kw-accent-soft), var(--kw-surface-2)) !important;
  min-height:0 !important;
}
.kw-hero2 .ch-banner-shade,
.kw-hero2__shade{ background:none !important; }
.kw-hero2 .ch-banner-fallback{ display:none !important; }
/* Consistent hero banner height across the whole course-detail family (some
   pages ran ~154px, others taller). */
.kw-hero2__top{ min-height:84px !important; padding:16px 20px !important; align-items:center; }
.kw-hero2__id,
.kw-hero2__id .ch-title,
.kw-hero2 .ch-banner-text,
.kw-hero2 .ch-title{ color:var(--kw-text) !important; text-shadow:none !important; }
.kw-hero2__id .ch-eyebrow,
.kw-hero2 .ch-eyebrow{ color:var(--kw-accent) !important; opacity:1 !important; }
.kw-hero2 .ch-title{
  font-size:22px !important;
  line-height:1.05 !important;
  margin:2px 0 8px !important;
  transition:none !important;
}
.kw-hero2 .ch-chip{
  background:var(--kw-surface) !important; border:1px solid var(--kw-border) !important;
  color:var(--kw-text) !important; backdrop-filter:none !important;
}
.kw-hero2 .ch-banner-initials{ color:var(--kw-accent) !important; text-shadow:none !important; opacity:.45; }
/* Cover-fallback layer (initials backdrop) — the exams hero uses it with a dark
   brand gradient; light it so the hero isn't a dark banner on the light page. */
.kw-hero2 .ch-banner-fallback{ background:linear-gradient(135deg, var(--kw-accent-soft), var(--kw-surface-2)) !important; }

/* Stats/ops strip below the hero (the skin darkens it). */
.kw-hero2__ops{ padding:10px 16px !important; background:var(--kw-surface) !important; border-top:1px solid var(--kw-border) !important; }
.kw-hero2__op{ background:var(--kw-surface-2) !important; border:1px solid var(--kw-border) !important; color:var(--kw-text) !important; }
.kw-hero2__op .lbl{ color:var(--kw-muted) !important; }
.kw-hero2__op b{ color:var(--kw-text) !important; }

/* ── Compact, calmer sub-nav tabs + command cards ───────────────────────── */
.course-header .kw-dock{
  gap:4px !important;
  padding:5px !important;
  background:var(--kw-surface) !important;
  border:1px solid var(--kw-border) !important;
}
.course-header .kw-dock-item{
  min-width:62px !important;
  padding:6px 11px !important;
  border:1px solid transparent !important;
  border-radius:14px !important;
  color:var(--kw-muted) !important;
  background:transparent !important;
  box-shadow:none !important;
  outline:none;
}
.course-header .kw-dock-item__ico{ font-size:16px !important; }
.course-header .kw-dock-item:hover{
  color:var(--kw-text) !important;
  background:var(--kw-surface-2) !important;
  border-color:var(--kw-border) !important;
}
.course-header .kw-dock-item.active,
.course-header .kw-dock-item[aria-current="page"]{
  color:var(--kw-accent) !important;
  background:var(--kw-accent-soft) !important;
  border-color:color-mix(in srgb,var(--kw-accent) 24%,var(--kw-border)) !important;
  font-weight:800 !important;
}
.course-header .kw-dock-item:focus-visible{
  outline:2px solid var(--kw-accent);
  outline-offset:2px;
}
.kw-today{ gap:10px !important; margin:14px 0 !important; }
.kw-command-card{ padding:12px 14px !important; }
.kw-command-card__ico{ font-size:15px !important; }
.kw-command-card__value{ font-size:22px !important; margin:4px 0 2px !important; }
.kw-command-card__meta{ font-size:11px !important; line-height:1.4 !important; }

/* ── Readable Course/Teaching Intelligence (.kw-copilot / .kw-ci) ────────── */
.kw-ci .kw-copilot__title,
.kw-ci .kw-copilot__row-t{ color:var(--kw-text) !important; -webkit-text-fill-color:var(--kw-text) !important; }
.kw-ci .kw-copilot__sub,
.kw-ci .kw-copilot__row-s{ color:var(--kw-muted) !important; -webkit-text-fill-color:var(--kw-muted) !important; }
.kw-ci .kw-copilot__head{ background:linear-gradient(135deg,var(--kw-surface-3),var(--kw-surface)) !important; color:var(--kw-text) !important; border-bottom:1px solid var(--kw-border) !important; }
.kw-ci .kw-copilot__logo{ background:var(--kw-accent-soft) !important; color:var(--kw-accent) !important; }
.kw-ci .kw-copilot__val{ color:var(--kw-accent) !important; -webkit-text-fill-color:var(--kw-accent) !important; }

/* ── Course lesson cards (.lesson-card) ─────────────────────────────────────
   The skin darkens the whole card to obsidian glass — dark title on a dark
   card, white chip text, and the primary button loses its fill. Restore a
   light card and tighten it a touch. */
.lesson-card, .draft-lesson-card{
  background:var(--kw-surface) !important; border:1px solid var(--kw-border) !important;
  color:var(--kw-text) !important; padding:13px 15px !important;
}
.lesson-card-title{ color:var(--kw-text) !important; }
.lesson-card-sub, .lesson-card-desc{ color:var(--kw-muted) !important; }
.lesson-card-chips, .lesson-card-actions{ color:var(--kw-text) !important; }
.lesson-card .pill{ background:var(--kw-surface-2) !important; border:1px solid var(--kw-border) !important; color:var(--kw-text) !important; }
.lesson-card .pill.tone-soft{ background:var(--kw-accent-soft) !important; color:var(--kw-accent) !important; }
.lesson-card .btn{ background:var(--kw-surface) !important; border:1px solid var(--kw-border) !important; color:var(--kw-text) !important; }
.lesson-card .btn.primary{ background:var(--kw-accent) !important; border-color:var(--kw-accent) !important; color:#fff !important; }

/* ── Assignment cards (.task-card) ──────────────────────────────────────────
   The card is fine, but its status pills were white-on-transparent (skin), so
   the chip row read as empty space. Make the pills legible; they carry the real
   status (type, lesson-linked, published, sent). */
.task-card{ padding:12px 14px !important; position:relative; overflow:hidden; }
/* Per-assignment accent bar — matches the linked lesson's colour (set via
   --li-accent inline). */
.task-card::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--li-accent, var(--kw-accent)); border-radius:4px 0 0 4px; }
.task-card-title{ color:var(--kw-text) !important; }
.task-card-sub{ color:var(--kw-muted) !important; }
.task-card .pill{ background:var(--kw-surface-2) !important; border:1px solid var(--kw-border) !important; color:var(--kw-text) !important; -webkit-text-fill-color:var(--kw-text) !important; }
.task-card .pill.tone-soft{ background:var(--kw-accent-soft) !important; color:var(--kw-accent) !important; -webkit-text-fill-color:var(--kw-accent) !important; }
.task-card .pill.tone-good{ background:#dff5e8 !important; border-color:#b6e4c8 !important; color:#1a6b3c !important; -webkit-text-fill-color:#1a6b3c !important; }
.task-card .pill.tone-warn{ background:#fff4d6 !important; border-color:#f0dca0 !important; color:#7a5c00 !important; -webkit-text-fill-color:#7a5c00 !important; }
.task-card .pill.tone-danger{ background:#ffeaea !important; border-color:#f3c0c0 !important; color:#8b0000 !important; -webkit-text-fill-color:#8b0000 !important; }
/* Secondary card actions ("Review", "Submissions") are plain .btn — the skin
   paints them dark glass so the label read as invisible on the light card.
   Give the base button a legible light treatment; .primary keeps the fill. */
.task-card .btn{ background:var(--kw-surface) !important; border:1px solid var(--kw-border) !important; color:var(--kw-accent) !important; -webkit-text-fill-color:var(--kw-accent) !important; font-weight:650; }
.task-card .btn:hover{ background:var(--kw-accent-soft) !important; border-color:var(--kw-accent) !important; }
.task-card .btn.primary{ background:var(--kw-accent) !important; border-color:var(--kw-accent) !important; color:#fff !important; -webkit-text-fill-color:#fff !important; }

/* ── Filled hero / command buttons: force readable white text ────────────────
   The skin remaps --kw-on-accent to a near-black (#04121f) meant for its own
   light accent, but the workspace accent is purple — so .kw-dock-btn--primary
   and filled .kw-command-btn rendered DARK text on purple (unreadable, reads as
   "blank"). Force white on the filled variants; ghost variants keep their
   accent-on-light text. */
.kw-dock-btn--primary,
.kw-command-btn:not(.kw-command-btn--ghost){ color:#fff !important; -webkit-text-fill-color:#fff !important; }
.kw-command-btn--ghost{ color:var(--kw-accent) !important; -webkit-text-fill-color:var(--kw-accent) !important; }

/* ── Pills: the skin colours .pill text WHITE (for its dark theme); on the light
   workspace that is white-on-near-white — invisible ("en blanco, no se ve el
   texto"). Restore readable, tone-aware text + a light fill. Card-scoped pills
   (.task-card .pill, .lesson-card .pill) keep their own more-specific rules. */
.pill{ color:var(--kw-text) !important; -webkit-text-fill-color:var(--kw-text) !important; background:var(--kw-surface-2) !important; border:1px solid var(--kw-border) !important; }
.pill.soft, .pill.tone-soft, .pill.pill-info, .pill.pill-accent{ color:var(--kw-accent) !important; -webkit-text-fill-color:var(--kw-accent) !important; background:var(--kw-accent-soft) !important; border-color:color-mix(in srgb, var(--kw-accent) 30%, transparent) !important; }
.pill.pill-neutral{ color:#4d5565 !important; -webkit-text-fill-color:#4d5565 !important; background:#eef1f7 !important; border-color:#e5e9f2 !important; }
.pill.tone-good, .pill.pill-success, .pill.pill-ok{ color:#15803d !important; -webkit-text-fill-color:#15803d !important; background:#e7f6ec !important; border-color:#b6e4c8 !important; }
.pill.tone-warn, .pill.pill-warn, .pill.pill-warning{ color:#9a6700 !important; -webkit-text-fill-color:#9a6700 !important; background:#fff4d6 !important; border-color:#f0dca0 !important; }
.pill.tone-danger, .pill.pill-danger, .pill.pill-error{ color:#b42318 !important; -webkit-text-fill-color:#b42318 !important; background:#ffeaea !important; border-color:#f3c0c0 !important; }

/* ── Search bar ─────────────────────────────────────────────────────────────
   The skin renders .searchbar as dark glass (rgba(255,255,255,.06)) so on the
   light workspace it read as a mismatched grey field. Match the light surface. */
.searchbar{ background:#fff !important; border:1px solid var(--kw-border) !important; box-shadow:0 1px 2px rgba(31,50,76,.04) !important; }
.searchbar input{ background:transparent !important; color:var(--kw-text) !important; -webkit-text-fill-color:var(--kw-text) !important; }
.searchbar input::placeholder{ color:var(--kw-muted) !important; -webkit-text-fill-color:var(--kw-muted) !important; }
/* Filter chips (.kairos-filter-chip) — the skin renders them near-transparent
   glass so they read grey on the light workspace. */
.kairos-filter-chip{ background:#fff !important; border:1px solid var(--kw-border) !important; color:var(--kw-text) !important; }
.kairos-filter-chip.active{ background:var(--kw-accent-soft) !important; color:var(--kw-accent) !important; border-color:var(--kw-accent) !important; }

/* ── Gradebook matrix: the skin darkened the sticky header row + student column
   to obsidian glass while the body cells stayed white — inconsistent and hard to
   read. Light the header + sticky columns to match the body. */
table.gradebook-matrix thead th{ background:#f5f6fb !important; color:#1f2430 !important; }
table.gradebook-matrix .matrix-num-col{ background:#fff !important; }
table.gradebook-matrix .matrix-student-col{ background:#fff !important; }
table.gradebook-matrix thead .matrix-num-col, table.gradebook-matrix thead .matrix-student-col{ background:#f5f6fb !important; }
table.gradebook-matrix .matrix-student-name{ color:#1f2430 !important; -webkit-text-fill-color:#1f2430 !important; }
table.gradebook-matrix .matrix-student-sub{ color:#69707d !important; }
table.gradebook-matrix tbody tr:hover td, table.gradebook-matrix tbody tr:hover th{ background:#f7f5ff !important; }
table.gradebook-matrix td{ background:#fff !important; color:#1f2430 !important; }
table.gradebook-matrix .matrix-asn-title{ color:#1f2430 !important; }

/* Student-averages (Excel-style) table. */
.gb-averages-wrap[hidden]{ display:none !important; }
.gb-averages-wrap{ overflow-x:auto; border:1px solid var(--kw-border,#e5e9f2); border-radius:14px; }
table.gb-averages{ width:100%; border-collapse:collapse; font-size:13px; background:#fff; }
table.gb-averages th, table.gb-averages td{ padding:9px 14px; text-align:left; border-bottom:1px solid #eef0f6; white-space:nowrap; }
table.gb-averages thead th{ background:#f5f6fb; color:#1f2430; font-weight:800; font-size:11.5px; text-transform:uppercase; letter-spacing:.03em; position:sticky; top:0; }
table.gb-averages th.num, table.gb-averages td.num{ text-align:right; font-variant-numeric:tabular-nums; }
table.gb-averages tbody tr:nth-child(even){ background:#fafbff; }
table.gb-averages tbody tr:hover{ background:#f7f5ff; }
table.gb-averages a.gb-avg-name{ color:#1f2430; text-decoration:none; font-weight:700; }
table.gb-averages a.gb-avg-name:hover{ color:var(--kw-accent,#4b2aad); text-decoration:underline; }
table.gb-averages .gb-avg-val.tone-good{ color:#15803d; font-weight:800; } table.gb-averages .gb-avg-val.tone-warn{ color:#9a6700; font-weight:800; } table.gb-averages .gb-avg-val.tone-danger{ color:#b42318; font-weight:800; }
table.gb-averages .gb-avg-val--none{ color:#9aa2b1; }
.gb-print-btn{ display:inline-flex; align-items:center; gap:6px; border:1px solid var(--kw-border,#e5e9f2); background:#fff; color:var(--kw-accent,#4b2aad); border-radius:10px; padding:7px 12px; font:inherit; font-size:12.5px; font-weight:750; cursor:pointer; }
.gb-print-btn:hover{ background:var(--kw-accent-soft,#f1edff); border-color:var(--kw-accent,#4b2aad); }

/* ── Socrates/guide FAB modal → light (family pages only) ───────────────────
   socrates-fab.css ships the modal as dark glass for the dark portal shell;
   on the light course-detail family the guide name, section title and the
   suggestion cards rendered dark-on-dark / near-invisible. This sheet is only
   linked on family pages, so the override stays scoped: dark pages elsewhere
   keep the dark modal. */
.k-socrates-modal{ background:#fff !important; border:1px solid #e5e9f2 !important; box-shadow:0 24px 64px rgba(31,50,76,.18) !important; color:#1f2430 !important; }
.k-socrates-modal .k-socrates-head{ border-bottom:1px solid #eef0f6 !important; }
.k-socrates-modal .k-socrates-name,
.k-socrates-modal .k-socrates-hello{ color:#1f2430 !important; -webkit-text-fill-color:#1f2430 !important; }
.k-socrates-modal .k-socrates-role,
.k-socrates-modal .k-socrates-voice,
.k-socrates-modal .k-socrates-note{ color:#69707d !important; -webkit-text-fill-color:#69707d !important; }
.k-socrates-modal .k-socrates-section-title{ color:#69707d !important; -webkit-text-fill-color:#69707d !important; }
.k-socrates-modal .k-socrates-does{ background:#fbfbfe !important; border:1px solid #e5e9f2 !important; border-radius:12px !important; }
.k-socrates-modal .k-socrates-does summary{ color:#1f2430 !important; }
.k-socrates-modal .k-socrates-does li{ color:#69707d !important; }
.k-socrates-modal .k-socrates-card{ background:#fbfbfe !important; border:1px solid #e5e9f2 !important; color:#1f2430 !important; }
.k-socrates-modal .k-socrates-card span{ color:#1f2430 !important; -webkit-text-fill-color:#1f2430 !important; }
.k-socrates-modal .k-socrates-card:hover{ background:#f1edff !important; border-color:#4b2aad !important; }
.k-socrates-modal .k-socrates-input{ background:#fff !important; border:1px solid #e5e9f2 !important; color:#1f2430 !important; -webkit-text-fill-color:#1f2430 !important; }
.k-socrates-modal .k-socrates-input::placeholder{ color:#9aa2b1 !important; -webkit-text-fill-color:#9aa2b1 !important; }
.k-socrates-modal .k-socrates-send{ background:#4b2aad !important; color:#fff !important; -webkit-text-fill-color:#fff !important; border-color:#4b2aad !important; }
.k-socrates-modal .k-socrates-close{ color:#69707d !important; background:#f5f6fb !important; border:1px solid #e5e9f2 !important; }
.k-socrates-modal .k-socrates-expand{ color:#4b2aad !important; background:#f5f2ff !important; border:1px solid #ddd4fb !important; }
.k-socrates-modal .k-socrates-deeper{ color:#4b2aad !important; }
.k-socrates-modal .k-socrates-answers{ color:#1f2430 !important; }

/* ── Generic confirm / attendance / invite dialog (.popup-box family) → light ─
   tetra-kairos-skin.css paints .modal-box / .att-box / .invite-box / .popup-box
   dark (#161130) with muted text for the dark portal. On the light family the
   "Remove lesson from course" confirm (and the attendance / invite dialogs)
   rendered as a dark navy box with a near-invisible title and buttons. This
   sheet is only linked on family pages, so the override stays scoped. */
.modal-box, .att-box, .invite-box, .popup-box{
  background:#fff !important; border:1px solid #e5e9f2 !important;
  box-shadow:0 24px 64px rgba(31,50,76,.18) !important; color:#1f2430 !important;
}
.modal-box h2, .att-head h2, .invite-box h2, .popup-box h2{ color:#1f2430 !important; -webkit-text-fill-color:#1f2430 !important; }
.modal-box p, .invite-box p, .popup-box p{ color:#69707d !important; }
.modal-box input, .att-field input, .att-field select, .att-status-sel{
  background:#fff !important; border:1px solid #e5e9f2 !important; color:#1f2430 !important; -webkit-text-fill-color:#1f2430 !important;
}
.att-field > span{ color:#69707d !important; }
/* Dialog action buttons: neutral Cancel + readable soft-danger destructive. */
.popup-actions .btn, .popup-box .btn{
  background:#f5f6fb !important; border:1px solid #e5e9f2 !important; color:#1f2430 !important; -webkit-text-fill-color:#1f2430 !important;
}
.popup-actions .btn:hover, .popup-box .btn:hover{ background:#eceefb !important; }
.popup-actions .btn.danger, .popup-box .btn.danger{
  background:#fdecea !important; border:1px solid #f4c7c2 !important; color:#b42318 !important; -webkit-text-fill-color:#b42318 !important;
}
.popup-actions .btn.danger:hover, .popup-box .btn.danger:hover{ background:#fbdcd8 !important; }
.popup-actions .btn.primary, .popup-box .btn.primary,
.popup-actions .btn.btn-primary, .popup-box .btn.btn-primary{
  background:#4b2aad !important; border-color:#4b2aad !important; color:#fff !important; -webkit-text-fill-color:#fff !important;
}

/* ── Loading skeletons → light shimmer (family pages) ────────────────────────
   The skin (section 17) ships skeletons as a dark shimmer (translucent white on
   the dark shell), so on the light family the gradebook matrix loader and the
   lessons / tasks list loaders rendered as dark bars. Restore a light shimmer.
   Scoped to this sheet, so dark pages elsewhere keep the dark skeleton. */
.skel-line, .skel-bar, .skel-pill, .skel-avatar, .att-skeleton, .lassign0-skel-line{
  background:linear-gradient(90deg,#eef1f8 0%,#e3ddf7 50%,#eef1f8 100%) !important;
  background-size:200% 100% !important;
}
.skel-content-card, .skel-interv-row, .skel-card, .lassign0-skel-card{
  background:#f6f7fb !important; border-color:#e7e9f2 !important;
}
.matrix-skeleton{ background:#fff !important; border-color:#e7e9f2 !important; }
.skel-row > div{ border-color:#f1f3fa !important; }
.skel-row.head > div{ background:#fafafe !important; }

/* ── Gradebook "Sort assignments" control → light ────────────────────────────
   The page ships .sort-wrap as a transparent label+select row; the skin turns
   it into a dark rgba(0,0,0,.25) pill with a dark <select>, so on the light
   gradebook it read as a dark chip. Restore the transparent row + light drop. */
.sort-wrap{ background:transparent !important; border:none !important; box-shadow:none !important; color:#69707d !important; }
.sort-wrap label{ color:#69707d !important; }
.sort-wrap select{ background:#fff !important; border:1px solid #e5e9f2 !important; color:#1f2430 !important; }

/* ── Lesson-instance hero + Socrates Lesson Studio → light ──────────────────
   The skin resolves --kw-surface/--tet-surface dark on this page, so the
   lesson hero rendered as a dark navy block with a DARK title, and the
   lassign0 "Lesson Studio" modal as dark glass with faint labels. Light both;
   the per-lesson gradient survives as a 5px top stripe on the hero. */
.workspace-header, .studio-header{
  background:#fff !important; border:1px solid #e5e9f2 !important; color:#1f2430 !important;
}
.workspace-header::before{
  content:""; position:absolute; left:0; top:0; right:0; height:5px;
  background:var(--lesson-grad, linear-gradient(135deg,#4b2aad,#7c3aed)) !important;
}
.workspace-header .lesson-title{ color:#1f2430 !important; -webkit-text-fill-color:#1f2430 !important; }
.workspace-header .workspace-eyebrow{ color:#4b2aad !important; -webkit-text-fill-color:#4b2aad !important; }
.workspace-header .lesson-objective{ color:#69707d !important; }
.workspace-header .meta-chip{ background:#f5f6fb !important; border:1px solid #e5e9f2 !important; color:#1f2430 !important; -webkit-text-fill-color:#1f2430 !important; }
.workspace-header .hero-action{ background:#fff !important; border:1px solid #e7e9f2 !important; color:#4b2aad !important; -webkit-text-fill-color:#4b2aad !important; }
.workspace-header .hero-action.primary{ background:#4b2aad !important; color:#fff !important; -webkit-text-fill-color:#fff !important; }
.workspace-header .lesson-crumb, .back-row a{ color:#69707d !important; }

/* Socrates Lesson Studio modal (lassign0) — light panel, readable labels. */
.lassign0-modal{ background:#fff !important; border:1px solid #e5e9f2 !important; color:#1f2430 !important; box-shadow:0 28px 72px rgba(31,50,76,.22) !important; }
.lassign0-modal .lassign0-head{ border-bottom:1px solid #eef0f6 !important; background:#fbfbfe !important; }
.lassign0-modal h1, .lassign0-modal h2, .lassign0-modal h3, .lassign0-modal summary,
.lassign0-modal label, .lassign0-modal p, .lassign0-modal span{ color:#1f2430; }
.lassign0-modal .lassign0-grouplabel{ color:#69707d !important; }
.lassign0-modal .lassign0-sc-note{ color:#69707d !important; }
.lassign0-modal select, .lassign0-modal textarea, .lassign0-modal input[type="text"], .lassign0-modal input[type="number"]{
  background:#fff !important; border:1px solid #e5e9f2 !important; color:#1f2430 !important; -webkit-text-fill-color:#1f2430 !important;
}
.lassign0-modal .lassign0-generate{ background:#4b2aad !important; color:#fff !important; -webkit-text-fill-color:#fff !important; }

/* ── Task/Assignment detail Overview surfaces → light ───────────────────────
   The page's own CSS is light (.overview-card #fcfcff, metric tiles, donut,
   tabs), but the skin repaints .overview-card / tiles / tabs dark glass — the
   Assignment Detail Overview reads as dark cards with faint labels. Re-light
   the surfaces the skin darkened. */
.overview-card{ background:#fcfcff !important; border:1px solid #e7e9f2 !important; color:#1f2430 !important; }
.overview-card h3{ color:#69707d !important; -webkit-text-fill-color:#69707d !important; }
.metric-tile, .metric-tiles .metric-tile{ background:#fff !important; border:1px solid #eef0f6 !important; color:#1f2430 !important; }
.metric-tile .label, .metric-tile .k, .metric-tile small{ color:#69707d !important; -webkit-text-fill-color:#69707d !important; }
.metric-tile .value, .metric-tile .v, .metric-tile strong{ color:#1f2430 !important; -webkit-text-fill-color:#1f2430 !important; }
.status-donut-center .num{ color:#0f172a !important; -webkit-text-fill-color:#0f172a !important; }
.status-donut-center .lbl, .status-legend{ color:#69707d !important; }
.workspace-tabs{ background:transparent !important; }
.workspace-tab{ color:#69707d !important; -webkit-text-fill-color:#69707d !important; background:transparent !important; }
.workspace-tab.active{ color:#4b2aad !important; -webkit-text-fill-color:#4b2aad !important; background:#ece5ff !important; }
.next-action-card{ color:#1f2430 !important; }
.next-action-card .lead{ color:#1f2430 !important; -webkit-text-fill-color:#1f2430 !important; }
.next-action-card .copy{ color:#525968 !important; }
/* Studio metrics bar under the assignment title (the "— assigned — submitted"
   strip) + the status donut's centre hole — the skin darkened both. Do NOT
   touch .status-donut itself (JS sets its conic-gradient inline). */
.studio-metrics{ background:#fcfcff !important; border:1px solid #f1f3fa !important; }
.studio-metric{ background:#fff !important; border:1px solid #e7e9f2 !important; color:#69707d !important; }
.studio-metric strong{ color:#1f2430 !important; -webkit-text-fill-color:#1f2430 !important; }
.studio-metric.good strong{ color:#15803d !important; -webkit-text-fill-color:#15803d !important; }
.studio-metric.warn strong{ color:#9a6700 !important; -webkit-text-fill-color:#9a6700 !important; }
.studio-metric.danger strong{ color:#b42318 !important; -webkit-text-fill-color:#b42318 !important; }
.studio-metric.soft strong{ color:#4b2aad !important; -webkit-text-fill-color:#4b2aad !important; }
.status-donut::after{ background:#fff !important; box-shadow:inset 0 0 0 1px #f1f3fa !important; }

/* Studio-header action buttons (task-detail: Review submissions / Save grading /
   Confirm grade / Edit assignment / Open source / Send reminder). The page's
   inline rule sets color:#4b2aad, but the skin's -webkit-text-fill-color wins for
   text fill, so the non-primary buttons render near-white. Only .workspace-header
   .hero-action was covered above — the studio header uses .studio-actions. */
.studio-actions .hero-action{ background:#fff !important; border-color:#e7e9f2 !important; color:#4b2aad !important; -webkit-text-fill-color:#4b2aad !important; }
.studio-actions .hero-action.primary{ background:#4b2aad !important; border-color:#4b2aad !important; color:#fff !important; -webkit-text-fill-color:#fff !important; }
.studio-actions .hero-action[disabled],
.studio-actions .hero-action[aria-disabled="true"]{ background:#fff !important; color:#69707d !important; -webkit-text-fill-color:#69707d !important; }
/* Header metric strip labels (— assigned / submitted / needs grading / confirmed):
   the skin faded the label text-fill; re-assert (the strong values keep their own
   colour rules above). */
.studio-metric{ -webkit-text-fill-color:#69707d !important; }
.studio-metric strong{ -webkit-text-fill-color:#1f2430 !important; }
.studio-metric.good strong{ -webkit-text-fill-color:#15803d !important; }
.studio-metric.warn strong{ -webkit-text-fill-color:#9a6700 !important; }
.studio-metric.danger strong{ -webkit-text-fill-color:#b42318 !important; }
.studio-metric.soft strong{ -webkit-text-fill-color:#4b2aad !important; }

/* Task-detail OTHER tabs (Questions/Submissions/Grades/Paper-OCR/Settings) —
   same skin-darkening on panels whose page rule is parent-scoped and doesn't
   reach here. Re-light every surface + its labels/values. */
.inspector-panel, .preview-panel, .submissions-panel{ background:#fff !important; border:1px solid #e7e9f2 !important; color:#1f2430 !important; }
.inspector-panel h3, .submissions-panel h2{ color:#1f2430 !important; -webkit-text-fill-color:#1f2430 !important; }
.inspector-row{ border:1px solid #f1f3fa !important; background:#fff !important; }
.inspector-row .k, .settings-table .k{ color:#69707d !important; -webkit-text-fill-color:#69707d !important; }
.inspector-row .v, .settings-table .v{ color:#1f2430 !important; -webkit-text-fill-color:#1f2430 !important; }
.submissions-toolbar, .route-card, .small-preview{ background:#fcfcff !important; border:1px solid #f1f3fa !important; color:#1f2430 !important; }
.route-card .label, .small-preview .lbl{ color:#1f2430 !important; -webkit-text-fill-color:#1f2430 !important; }
.route-card .sub, .small-preview .sub, .submissions-head .sub{ color:#69707d !important; -webkit-text-fill-color:#69707d !important; }
.grades-metric-tile{ background:#fff !important; border:1px solid #e7e9f2 !important; }
.grades-metric-tile .lbl{ color:#69707d !important; -webkit-text-fill-color:#69707d !important; }
.grades-metric-tile .num{ color:#1f2430 !important; -webkit-text-fill-color:#1f2430 !important; }
.grades-metric-tile .sub{ color:#69707d !important; -webkit-text-fill-color:#69707d !important; }
.delivery-mode-chip{ background:#fff !important; border:1px solid #e7e9f2 !important; color:#1f2430 !important; -webkit-text-fill-color:#1f2430 !important; }
.route-card .cta{ background:#fff !important; border:1px solid #e5e9f2 !important; color:#4b2aad !important; -webkit-text-fill-color:#4b2aad !important; }
.route-card .cta.primary{ background:#4b2aad !important; color:#fff !important; -webkit-text-fill-color:#fff !important; }

/* Task-detail submissions board: the shared glass skin can leave inherited
   dark-mode text fill on table content even after the panel is re-lit. Keep
   this operational board compact and force readable light-mode contrast. */
.submissions-panel{
  padding:14px 16px !important;
  gap:8px !important;
}
.submissions-head{ align-items:center !important; }
.submissions-head h2,
.submissions-name,
.submissions-note,
.submissions-table td{
  color:#1f2430 !important;
  -webkit-text-fill-color:#1f2430 !important;
}
.submissions-head .sub,
.submissions-sub,
.submissions-note.muted{
  color:#69707d !important;
  -webkit-text-fill-color:#69707d !important;
}
.submissions-table-wrap{
  background:#fff !important;
  border-color:#e7e9f2 !important;
}
table.submissions-table th{
  background:#f7f8fc !important;
  color:#525968 !important;
  -webkit-text-fill-color:#525968 !important;
}
table.submissions-table th,
table.submissions-table td{
  padding:8px 10px !important;
  border-bottom-color:#eceef5 !important;
  line-height:1.3 !important;
}
.submissions-table .pill,
.submissions-table .action-primary,
.submissions-table .action-secondary,
.submissions-table .action-warning,
.submissions-toolbar .toolbar-label,
.submissions-toolbar .action-secondary{
  -webkit-text-fill-color:currentColor !important;
}
.submissions-toolbar{
  padding:7px 9px !important;
  gap:6px !important;
}
.submissions-toolbar[hidden]{ display:none !important; }
.submissions-table .row-actions{ gap:5px !important; }
.submissions-table .row-actions a,
.submissions-table .row-actions button{
  padding:6px 8px !important;
  min-height:30px !important;
  font-size:11.5px !important;
}

/* Shell overflow "Más" nav item: its label/icon rendered dark (#182337) on the
   dark rail — invisible. Sibling nav links use rgba(255,255,255,.8); match it. */
.k-sidebar .k-nav-more, .k-sidebar .k-nav-more .k-nav-label, .k-sidebar .k-nav-more .k-nav-icon{ color:rgba(255,255,255,.8) !important; -webkit-text-fill-color:rgba(255,255,255,.8) !important; }
.k-sidebar .k-nav-more:hover, .k-sidebar .k-nav-more:hover .k-nav-label{ color:#fff !important; -webkit-text-fill-color:#fff !important; }

/* Assignment Builder sticky command bar — page CSS is a light frosted bar; the
   skin repaints it navy. Restore the light frost (text/pills are already dark). */
.k-cmdbar{ background:rgba(255,255,255,.94) !important; border:1px solid #e7e9f2 !important; }

/* Kairos orbital brand mark — replaces the 🧠 emoji in "Powered by Socrates"
   and the Socrates action buttons. Static, inherits the surrounding colour. */
.k-orbital-mark{ display:inline-flex; align-items:center; vertical-align:middle; color:var(--kw-accent,#4b2aad); }
.k-orbital-mark svg{ display:block; }
.hero-action .k-orbital-mark, .lassign0-trigger .k-orbital-mark, button .k-orbital-mark{ color:currentColor; }

/* Legacy grades-summary runtime mount stays hidden because the same aggregate
   metrics already live in the assignment hero. The non-hidden rule preserves
   backwards compatibility for any older page still using this shared sheet. */
#kGradesSummaryTable:not([hidden]){ display:block !important; }
#kGradesSummaryTable[hidden]{ display:none !important; }

/* Task-detail context chips (kStudioChips): six loud purple .pill.soft in a row
   read as noise. Calm them to neutral so the row is quiet and consistent; the
   review-state pill (.pill.good/.warn/.danger) stays as the ONE colour signal. */
.studio-chips .pill.soft{ background:#f5f6fb !important; color:#525968 !important; -webkit-text-fill-color:#525968 !important; border:1px solid #e5e9f2 !important; }

/* Shared "No X selected" empty state — .no-course (students/tasks/progress/
   lessons/gradebook/overview) and .no-assignment (task-detail) are authored
   #fff but the shared skin repaints them dark. Re-light them so the empty
   state matches the light course-detail workspace. */
.no-course, .no-assignment{
  background:#fff !important; background-image:none !important;
  border:1px solid #e7e9f2 !important; box-shadow:0 8px 24px rgba(31,36,48,.05) !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
}
.no-course h2, .no-assignment h2{ color:#1f2430 !important; }
.no-course p, .no-assignment p{ color:#69707d !important; }

/* Print: only the gradebook panel, clean. */
@media print{
  body *{ visibility:hidden !important; }
  #kGbPrintArea, #kGbPrintArea *{ visibility:visible !important; }
  #kGbPrintArea{ position:absolute; left:0; top:0; width:100%; }
  .gb-view-toggle, .gb-print-btn, #kMatrixBadge{ display:none !important; }
  .matrix-wrap, .by-student-wrap, .gb-averages-wrap{ overflow:visible !important; max-height:none !important; }
}