:root {
  --header-h: 72px;

  --bg-page: #f8fafc;

  /* header bar (THEME APPLIES HERE ONLY) */
  --header-bg: rgba(255,255,255,0.9);
  --header-text: #0f172a;

  /* pane surfaces (fixed) */
  --ui-surface-bg: #ffffff;
  --ui-surface-text: #0f172a;

  /* card surfaces */
  --bg-card: #ffffff;
  --border-card: rgba(0,0,0,0.12);

  --pane-border: rgba(0,0,0,0.15);
  --radius-card: .75rem;

  --text-main: #0f172a;
  --text-dim: #64748b;

  --accent: #2563eb;
  --accent-bg: #dbeafe;
  --accent-border: #93c5fd;

  --list-header-bg: #2563eb;
  --list-header-text: #ffffff;

  --success-bg: #dcfce7;
  --success-text: #065f46;

  --flow-bg: #000000;
  --flow-text: #ffffff;

  --scrollbar-track: #f1f5f9;
  --scrollbar-thumb: #cbd5e1;
  --scrollbar-thumb-hover: #94a3b8;

  font-size: 18px;
  color-scheme: light;
}

body {
  margin:0;
  background:var(--bg-page);
  color:var(--text-main);
  font-family: "Inter","Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",Arial,sans-serif;
  padding-top: var(--header-h);
  height:100vh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

/* ================= HEADER ================= */
.header-bar {
  position:fixed;
  inset:0 0 auto 0;
  height:var(--header-h);
  background:var(--header-bg);
  color:var(--header-text);
  border-bottom:1px solid var(--pane-border);
  z-index:1000;
  display:flex;
  align-items:center;
}
.header-inner {
  width:100%;
  padding:0 .5rem;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  flex-wrap:nowrap;
  color:var(--header-text);
}
.header-left {
  display:flex;
  flex-direction:column;
  line-height:1.2;
  color:var(--header-text);
}
.header-title {
  font-size:1.3rem;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:.5rem;
  color:var(--header-text);
}
.header-sub {
  font-size:.9rem;
  font-weight:400;
  margin-top:.2rem;
  max-width:70vw;
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow:hidden;
  color:var(--header-text);
}
.header-right {
  display:flex;
  flex-wrap:nowrap;
  align-items:flex-start;
  gap:.5rem;
  font-size:.9rem;
  color:var(--header-text);
}
.header-right .btn-sm {
  font-size:.85rem;
  line-height:1.2;
  padding:.5rem .6rem;
  border-radius:.5rem;
  display:flex;
  align-items:center;
  gap:.4rem;
  background:#ffffffdd;
  border:1px solid rgba(0,0,0,0.2);
  color:#000;
}
.header-right .btn-icon {
  width:36px;
  height:36px;
  min-width:36px;
  min-height:36px;
  font-size:.9rem;
  padding:0;
  border-radius:.5rem;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#ffffffdd;
  border:1px solid rgba(0,0,0,0.2);
  color:#000;
}

/* search */
.search-wrap {
  display:flex;
  align-items:center;
  gap:.25rem;
}
.search-wrap input[type="text"] {
  background:#ffffffdd;
  border:1px solid rgba(0,0,0,0.2);
  border-radius:.5rem;
  color:#000;
  font-size:.85rem;
  padding:.5rem .6rem;
  min-width:160px;
}
.search-wrap button.clear-btn {
  background:#ffffffdd;
  border:1px solid rgba(0,0,0,0.2);
  border-radius:.5rem;
  font-size:.85rem;
  line-height:1.2;
  padding:.5rem .6rem;
  color:#000;
  white-space:nowrap;
}

/* ================= LAYOUT BODY ================= */
.main-area {
  position:relative;
  height:calc(100vh - var(--header-h));
  width:100%;
  padding:.5rem;
  padding-top:.75rem;
  display:flex;
  align-items:stretch;
  justify-content:stretch;
  gap:.5rem;
  box-sizing:border-box;
  overflow:hidden;
}

/* Topic pane (left) */
.topic-pane {
  width:280px;
  min-width:240px;
  max-width:320px;

  background:var(--ui-surface-bg);
  color:var(--ui-surface-text);

  border:1px solid var(--pane-border);
  border-radius:var(--radius-card);
  box-shadow:0 8px 24px rgba(0,0,0,.15);

  display:flex;
  flex-direction:column;

  overflow-y:auto;
}
.topic-pane::-webkit-scrollbar {
  width:8px;
}
.topic-pane::-webkit-scrollbar-track {
  background:var(--scrollbar-track);
  border-radius:4px;
}
.topic-pane::-webkit-scrollbar-thumb {
  background:var(--scrollbar-thumb);
  border-radius:4px;
}
.topic-pane::-webkit-scrollbar-thumb:hover {
  background:var(--scrollbar-thumb-hover);
}
.topic-pane-header {
  padding:.75rem .75rem .5rem;
  font-size:.9rem;
  font-weight:600;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--pane-border);
  color:var(--ui-surface-text);
}
.badge-mini {
  font-size:.7rem;
  border-radius:.4rem;
  padding:.3rem .5rem;
  line-height:1.2;
  background:var(--accent-bg);
  border:1px solid var(--accent-border);
  color:var(--accent);
}
.topic-pane-body {
  padding:.5rem .5rem 1rem;
  font-size:.9rem;
  color:var(--ui-surface-text);
}

/* topic list item */
.topic-item {
  border:1px solid var(--pane-border);
  border-radius:.5rem;
  padding:.7rem .7rem;
  margin-bottom:.5rem;
  cursor:pointer;
  line-height:1.3;
  font-size:.9rem;
  background:rgba(255,255,255,0.15);
  color:var(--ui-surface-text);
}
.topic-item.active,
.topic-item:hover {
  background:var(--accent-bg);
  border-color:var(--accent-border);
  color:var(--accent);
  box-shadow:0 4px 12px rgba(0,0,0,.2);
}
.topic-item .topic-title {
  font-weight:600;
  font-size:.95rem;
}
.topic-item .topic-desc {
  font-size:.8rem;
  opacity:0.8;
}

/* Detail pane (right) */
.detail-pane {
  flex:1;
  min-width:0;

  background:var(--ui-surface-bg);
  color:var(--ui-surface-text);

  border:1px solid var(--pane-border);
  border-radius:var(--radius-card);
  box-shadow:0 8px 24px rgba(0,0,0,.15);

  overflow-y:auto;
}
.detail-pane::-webkit-scrollbar {
  width:8px;
}
.detail-pane::-webkit-scrollbar-track {
  background:var(--scrollbar-track);
  border-radius:4px;
}
.detail-pane::-webkit-scrollbar-thumb {
  background:var(--scrollbar-thumb);
  border-radius:4px;
}
.detail-pane::-webkit-scrollbar-thumb:hover {
  background:var(--scrollbar-thumb-hover);
}
.detail-pane-inner {
  padding:1rem 1rem 4rem;
  font-size:1rem;
  line-height:1.45;
  color:var(--text-main);
}

/* only one section at a time */
.content-section { display:none; }
.content-section.active { display:block; }

/* section title */
.section-title {
  font-size:1.2rem;
  font-weight:600;
  color:var(--text-main);
  margin:.5rem 0 1rem;
  display:flex;
  align-items:center;
  gap:.5rem;
}
.section-title .badge-topic {
  background:var(--accent-bg);
  border:1px solid var(--accent-border);
  color:var(--accent);
  font-size:.8rem;
  border-radius:.5rem;
  line-height:1.2;
  padding:.35rem .5rem;
}

/* console-card base */
.console-card {
  background:var(--bg-card);
  border:1px solid var(--border-card);
  border-radius:var(--radius-card);
  box-shadow:0 12px 32px rgba(0,0,0,.12);
  color:var(--text-main);
  margin-bottom:1rem;
}
.console-card-header {
  padding:.9rem 1rem;
  border-bottom:1px solid var(--border-card);
  font-size:1rem;
  font-weight:600;
  color:var(--text-main);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:.5rem;
}
.console-card-body {
  padding:1rem;
  font-size:1rem;
  color:var(--text-main);
  line-height:1.45;
}

/* info card pill */
.info-card .status-pill {
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  background:var(--accent-bg);
  border:1px solid var(--accent-border);
  color:var(--accent);
  border-radius:.5rem;
  font-size:.8rem;
  line-height:1.2;
  padding:.4rem .6rem;
}

/* checklist card */
.check-card .complete-pill {
  display:none;
  align-items:center;
  gap:.4rem;
  background:var(--success-bg);
  color:var(--success-text);
  font-weight:600;
  border-radius:.5rem;
  font-size:.8rem;
  line-height:1.2;
  padding:.4rem .6rem;
  border:1px solid transparent;
}
.checklist-item {
  display:flex;
  align-items:flex-start;
  gap:.6rem;
  padding:.6rem 0;
  border-bottom:1px solid var(--border-card);
  font-size:1rem;
  line-height:1.4;
}
.checklist-item:last-child { border-bottom:0; }
.checklist-item input[type="checkbox"] {
  margin-top:.25rem;
  width:1.1rem;
  height:1.1rem;
}

/* flow card */
.flow-card {
  background:var(--flow-bg);
  color:var(--flow-text);
  font-family:"JetBrains Mono","Courier New",monospace;
  box-shadow:0 16px 40px rgba(0,0,0,.8);
  border:2px solid #fff;
}
.flow-card .console-card-header {
  border-bottom:1px solid rgba(255,255,255,.3);
  color:#fff;
}
.flow-card .console-card-body {
  color:#fff;
  font-size:1rem;
  line-height:1.5;
  white-space:pre-line;
}
.flow-step {
  font-size:1rem;
  line-height:1.45;
  padding:.6rem 0;
  border-left:4px solid #fff;
  padding-left:.75rem;
  margin-bottom:.6rem;
}

/* list card */
.list-card .console-card-header {
  background:var(--list-header-bg);
  color:var(--list-header-text);
  border-bottom:0;
  border-radius:var(--radius-card) var(--radius-card) 0 0;
  font-size:1rem;
}
.list-card .console-card-body {
  background:var(--bg-card);
  border-radius:0 0 var(--radius-card) var(--radius-card);
  font-size:1rem;
}
.list-card ul,
.list-card ol {
  margin:0;
  padding-left:1.25rem;
  font-size:1rem;
}

/* quiz card */
.quiz-card .quiz-status {
  font-size:.8rem;
  color:var(--text-dim);
  font-weight:400;
}
.quiz-card .answers .answer-option {
  background:var(--bg-card);
  border:2px solid var(--border-card);
  border-radius:.5rem;
  padding:.7rem .8rem;
  margin-bottom:.6rem;
  display:flex;
  align-items:flex-start;
  gap:.6rem;
  cursor:pointer;
  font-size:1rem;
  line-height:1.4;
}
.quiz-card .answers .answer-option.correct {
  border-color:#16a34a;
  box-shadow:0 0 0 3px rgba(16,185,129,.35);
}
.quiz-card .answers .answer-option.wrong {
  border-color:#dc2626;
  box-shadow:0 0 0 3px rgba(220,38,38,.35);
}
.quiz-controls {
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin-top:1rem;
}
.quiz-controls button {
  font-size:.9rem;
  line-height:1.2;
  padding:.6rem .8rem;
  border-radius:.5rem;
  border:1px solid var(--border-card);
  background:var(--bg-card);
  color:var(--text-main);
}

/* image card */
.image-card img {
  max-width:100%;
  height:auto;
  border-radius:.5rem;
  border:1px solid var(--border-card);
  display:block;
  background:#ccc;
}
.image-card .img-fallback {
  width:100%;
  min-height:200px;
  border-radius:.5rem;
  border:1px solid var(--border-card);
  background:repeating-linear-gradient(
    45deg,
    #f0f0f0 0px,
    #f0f0f0 10px,
    #ffffff 10px,
    #ffffff 20px
  );
  display:flex;
  align-items:center;
  justify-content:center;
  color:#555;
  font-size:.9rem;
  text-align:center;
  padding:1rem;
}
.image-card .img-caption {
  font-size:.8rem;
  color:var(--text-dim);
  margin-top:.5rem;
  line-height:1.3;
}

/* theme color chips */
.theme-chip-row {
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
}
.theme-chip {
  width:32px;
  height:32px;
  border-radius:.5rem;
  border:2px solid #00000033;
  cursor:pointer;
  box-shadow:0 2px 4px rgba(0,0,0,.4);
}

/* === INTERACTIVE TABLE HIGHLIGHT STYLES === */
.active-head {
  background-color: rgba(0, 123, 255, 0.15) !important;
  font-weight: 600;
}
.active-row {
  background-color: rgba(0, 123, 255, 0.08);
}
tr.active-row > td {
  background-color: rgba(0, 123, 255, 0.08);
}
.active-col {
  background-color: rgba(0, 123, 255, 0.12);
}
.active-cell {
  background-color: rgba(40, 167, 69, 0.20) !important;
  font-weight: 700;
  box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.3) inset;
}
/* ====== MODERN GLASS HEADER UPGRADE ====== */
/* ====== MODERN GLASS HEADER UPGRADE (theme-aware) ====== */

/* We now use CSS vars given by applyTheme():
   --header-bg    (transparent color / tint)
   --header-text  (text color)
*/
.header-bar {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  /* Use theme-driven bg instead of hardcoded white.
     We layer a subtle radial highlight on top of that tint. */
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 60%),
    var(--header-bg);

  color: var(--header-text);

  border-bottom: 1px solid rgba(255,255,255,0.4);
  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
  border-radius: 0 0 1rem 1rem;

  position: fixed;
  inset: 0 0 auto 0;
  height: var(--header-h);
  z-index: 1000;

  display: flex;
  align-items: center;
}

/* keep layout but give breathing room */
.header-inner {
  width: 100%;
  padding: .75rem 1rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: nowrap;
  color: var(--header-text);
}

.header-left {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  color: var(--header-text);
}

/* Module title row (and optional badge) */
.header-title {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: .02em;
  color: var(--header-text);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem;
}

.header-title .unit-badge {
  font-size: .7rem;
  font-weight: 600;
  line-height: 1.2;
  padding: .3rem .5rem;
  border-radius: .5rem;
  /* badge should adapt to light/dark text but still stay visible */
  background: rgba(0,0,0,0.08);
  border: 1px solid rgba(0,0,0,0.3);
  color: #0f172a;
  text-transform: uppercase;
}

/* Subline text under title */
.header-sub {
  font-size: .9rem;
  font-weight: 400;
  margin-top: .4rem;
  max-width: 70vw;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  line-height: 1.3;
  color: var(--header-text);
  opacity: .8;
}

/* Right-side control cluster "capsule" */
.header-right {
  background: rgba(255,255,255,0.28);
  border: 1px solid rgba(255,255,255,0.7);
  box-shadow: 0 12px 32px rgba(0,0,0,0.18);
  border-radius: .75rem;
  padding: .5rem .6rem;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: .5rem;

  /* make sure inner text/icons react to theme text color */
  color: var(--header-text);
}

/* All small header controls */
.header-right .btn-sm,
.header-right .btn-icon,
.search-wrap input[type="text"],
.search-wrap button.clear-btn {
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(0,0,0,0.15);
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
  border-radius: .6rem;
  color: #000;
  transition: all .18s ease;
  font-size: .85rem;
  line-height: 1.2;
  padding: .5rem .6rem;
  display: flex;
  align-items: center;
  gap: .4rem;
}

/* icon-only button */
.header-right .btn-icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  justify-content: center;
  padding: 0;
  line-height: 1;
  font-size: .9rem;
}

/* hover effect */
.header-right .btn-sm:hover,
.header-right .btn-icon:hover,
.search-wrap button.clear-btn:hover {
  transform: translateY(-1px) scale(1.03);
  box-shadow: 0 10px 20px rgba(0,0,0,0.18);
}

/* search field tweaks */
.search-wrap {
  display: flex;
  align-items: center;
  gap: .25rem;
}
.search-wrap input[type="text"] {
  min-width: 160px;
  font-size: .8rem;
  line-height: 1.2;
  padding: .55rem .6rem;
  border-radius: .6rem;
  box-shadow:
    0 6px 16px rgba(0,0,0,0.1) inset,
    0 4px 16px rgba(0,0,0,0.15);
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(0,0,0,0.15);
  color: #000;
}
/* ===== POLISH: Taller bar + better padding + compact buttons ===== */

/* slightly taller header */
:root {
  --header-h: 80px; /* previously ~72px, +10% */
}

.header-bar {
  height: var(--header-h);
}

/* extra padding on extreme left */
.header-inner {
  padding-left: 2rem; /* adds breathing space before title */
  padding-right: 1rem;
  align-items: center;
}

/* visually center title block vertically */
.header-left {
  justify-content: center;
}

/* smaller control capsule and buttons */
.header-right {
  padding: .35rem .4rem;
  gap: .4rem;
  border-radius: .65rem;
}

/* all small buttons = reduced by ~50% size */
.header-right .btn-sm,
.header-right .btn-icon,
.search-wrap input[type="text"],
.search-wrap button.clear-btn {
  transform: scale(0.85);               /* shrinks entire element visually */
  transform-origin: center center;
  padding: .35rem .4rem;
  min-height: 30px;
  line-height: 1.1;
  font-size: .75rem;
}

/* keep hover lift subtle after scale */
.header-right .btn-sm:hover,
.header-right .btn-icon:hover,
.search-wrap button.clear-btn:hover {
  transform: scale(0.88) translateY(-1px);
}

/* search bar compact */
.search-wrap input[type="text"] {
  min-width: 130px;
  padding: .4rem .5rem;
  font-size: .75rem;
}

/* adjust icons for smaller button size */
.header-right .btn-icon i,
.header-right .btn-sm i {
  font-size: .8rem;
}

/* optional: theme dropdown button same size */
.header-right .btn-icon.dropdown-toggle {
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;
  line-height: 1;
}