/* =========================================================================
   BLOOMETRICS APP — design system v3
   Shell (sidebar + header), shared components, and the redesigned pages.
   Loaded on every page via includes/dark_mode_head.php.
   Dark mode is driven by html.dark and the same CSS variables.
   ========================================================================= */

:root {
    --bm-blue: #0B6CFF;
    --bm-blue-600: #0956D6;
    --bm-blue-soft: #EAF2FF;
    --bm-navy: #0F2B6B;
    --bm-navy-deep: #08183F;
    --bm-ink: #0F1B2D;
    --bm-text: #2A3852;
    --bm-muted: #6B7A93;
    --bm-line: #E3EAF6;
    --bm-page: #EEF3FB;
    --bm-card: #FFFFFF;
    --bm-card-alt: #F6F9FE;
    --bm-shadow: 0 1px 2px rgba(16, 40, 90, .04), 0 6px 18px -8px rgba(16, 40, 90, .10);
    --bm-shadow-pop: 0 18px 40px -12px rgba(10, 30, 80, .28), 0 2px 8px rgba(10, 30, 80, .08);

    --ok: #16A34A;   --ok-soft: #DDF6E6;   --ok-text: #15803D;
    --warn: #F59E0B; --warn-soft: #FDF0D0; --warn-text: #A16207;
    --bad: #EF4444;  --bad-soft: #FFE1E1;  --bad-text: #C42B2B;

    /* Bloom's Taxonomy — same six colours the dashboard charts have always used */
    --bl-remember: #60A5FA;  --bl-remember-soft: #E0EDFF;  --bl-remember-text: #1D5FD1;
    --bl-understand: #34D399; --bl-understand-soft: #D9F7EA; --bl-understand-text: #0B8A5C;
    --bl-apply: #FBBF24;     --bl-apply-soft: #FEF1CC;     --bl-apply-text: #9A6206;
    --bl-analyze: #F97316;   --bl-analyze-soft: #FFE6D2;   --bl-analyze-text: #C2410C;
    --bl-evaluate: #A78BFA;  --bl-evaluate-soft: #ECE5FF;  --bl-evaluate-text: #6D44D8;
    --bl-create: #F43F5E;    --bl-create-soft: #FFE0E6;    --bl-create-text: #C4213F;

    --sidebar-w: 264px;
    --topbar-h: 72px;
    --font: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

html.dark {
    --bm-blue-soft: #16233B;
    --bm-ink: #EDF1F9;
    --bm-text: #C2CBDC;
    --bm-muted: #8492AC;
    --bm-line: #334155;
    --bm-page: #0f172a;
    --bm-card: #1e293b;
    --bm-card-alt: #182338;
    --bm-shadow: 0 1px 2px rgba(0, 0, 0, .3);
    --bm-shadow-pop: 0 18px 40px -12px rgba(0, 0, 0, .6);

    --ok-soft: #0F3226;   --ok-text: #5EE0B0;
    --warn-soft: #3A2A0C; --warn-text: #F5C463;
    --bad-soft: #3A1620;  --bad-text: #FF8FA8;

    --bl-remember-soft: #16283F;  --bl-remember-text: #8DBBFF;
    --bl-understand-soft: #0F3226; --bl-understand-text: #5EE0B0;
    --bl-apply-soft: #3A2A0C;     --bl-apply-text: #F5C463;
    --bl-analyze-soft: #3A200F;   --bl-analyze-text: #FFA766;
    --bl-evaluate-soft: #241C42;  --bl-evaluate-text: #C1A8FF;
    --bl-create-soft: #3A1620;    --bl-create-text: #FF8FA8;
}

html { font-family: var(--font); }
body { font-family: var(--font); color: var(--bm-text); margin: 0; }
body.app-body { background: var(--bm-page) !important; }
* { box-sizing: border-box; }

/* =========================================================================
   SHELL
   ========================================================================= */
.app-shell {
    display: grid;
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
    grid-template-rows: var(--topbar-h) minmax(0, 1fr);
    height: 100vh;
    width: 100%;
    overflow: hidden;
}
.app-sidebar { grid-column: 1; grid-row: 1 / span 2; }
.app-topbar  { grid-column: 2; grid-row: 1; }
.app-content {
    grid-column: 2 !important;
    grid-row: 2 !important;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--bm-page) !important;
    scrollbar-width: thin;
}
html.dark .app-content { background: var(--bm-page) !important; }

/* ---------- Sidebar ---------- */
.app-sidebar {
    position: relative;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #0B2560 0%, #081B47 48%, #06122E 100%);
    color: #fff;
    z-index: 40;
    overflow: hidden;
}
.sb-brand {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: 24px 20px 14px; text-decoration: none; color: #fff; position: relative; z-index: 2;
}
.sb-brand-mark { width: 56px; height: auto; margin-bottom: 8px; filter: drop-shadow(0 6px 14px rgba(0,0,0,.35)); }
.sb-wordmark { font-size: 24px; font-weight: 800; letter-spacing: -.01em; line-height: 1.1; }
.sb-wordmark b { color: #4C8DFF; font-weight: 800; }

.sb-nav {
    position: relative; z-index: 2;
    display: flex; flex-direction: column; gap: 4px;
    padding: 14px 14px 10px;
    overflow-y: auto; flex: 0 1 auto; min-height: 0;
    scrollbar-width: none;
}
.sb-nav::-webkit-scrollbar { display: none; }
.sb-link {
    display: flex; align-items: center; gap: 14px;
    height: 46px; padding: 0 16px; border-radius: 12px;
    color: rgba(255,255,255,.80); text-decoration: none;
    font-size: 14.5px; font-weight: 500;
    transition: background .15s ease, color .15s ease;
}
.sb-link svg { flex-shrink: 0; opacity: .9; }
.sb-link:hover { background: rgba(255,255,255,.08); color: #fff; }
.sb-link.active {
    background: linear-gradient(135deg, #1A6BF5 0%, #0C55DB 100%);
    color: #fff; font-weight: 600;
    box-shadow: 0 10px 22px -10px rgba(26,107,245,.95), inset 0 1px 0 rgba(255,255,255,.18);
}
.sb-link:focus-visible { outline: 2px solid #8DB7FF; outline-offset: 2px; }

.sb-art {
    position: absolute; left: 0; right: 0; bottom: 0; height: 250px; z-index: 1; pointer-events: none;
    background: url('branding/icon-transparent.png') no-repeat;
    background-size: 250px auto; background-position: 0px 30px; opacity: .75;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 55%);
            mask-image: linear-gradient(180deg, transparent 0%, #000 55%);
}
.app-sidebar::after { /* keeps footer text legible over the artwork */
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 200px; z-index: 1; pointer-events: none;
    background: linear-gradient(180deg, transparent, rgba(6,18,46,.78) 65%);
}
.sb-foot { position: relative; z-index: 3; margin-top: auto; padding: 0 22px 18px; }
.sb-inst { display: flex; align-items: center; gap: 10px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.14); }
.sb-inst strong { display: block; font-size: 11.5px; letter-spacing: .04em; font-weight: 700; }
.sb-inst span { display: block; font-size: 11px; line-height: 1.35; color: rgba(255,255,255,.7); }
.sb-copy { margin: 10px 0 0; font-size: 10.5px; color: rgba(255,255,255,.5); }
.bm-seal-img { border-radius: 50%; object-fit: cover; background: #fff; }
.bm-seal-fallback {
    display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
    background: rgba(255,255,255,.14); color: #fff; flex-shrink: 0;
}

/* ---------- Topbar ---------- */
.app-topbar {
    position: relative; z-index: 30;
    display: flex; align-items: center; gap: 16px;
    padding: 0 28px;
    background: var(--bm-card);
    border-bottom: 1px solid var(--bm-line);
}
.tb-burger {
    display: none; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--bm-line);
    background: var(--bm-card); color: var(--bm-ink); align-items: center; justify-content: center; cursor: pointer;
}
.tb-search { position: relative; flex: 1; max-width: 560px; }
.tb-search input {
    width: 100%; height: 44px; padding: 0 84px 0 44px;
    border: 1px solid var(--bm-line); border-radius: 12px;
    background: var(--bm-card-alt); color: var(--bm-ink);
    font: 500 13.5px var(--font); outline: none; transition: border-color .15s, box-shadow .15s, background .15s;
}
.tb-search input::placeholder { color: var(--bm-muted); }
.tb-search input:focus { border-color: var(--bm-blue); background: var(--bm-card); box-shadow: 0 0 0 3px rgba(11,108,255,.14); }
.tb-search-icon { position: absolute; left: 14px; top: 13px; color: var(--bm-muted); pointer-events: none; }
.tb-search kbd {
    position: absolute; right: 12px; top: 11px; padding: 3px 8px; border-radius: 7px;
    background: var(--bm-card); border: 1px solid var(--bm-line); color: var(--bm-muted);
    font: 600 11px var(--font); pointer-events: none;
}
.search-results {
    position: absolute; top: calc(100% + 8px); left: 0; right: 0; max-height: 420px; overflow-y: auto;
    background: var(--bm-card); border: 1px solid var(--bm-line); border-radius: 14px;
    box-shadow: var(--bm-shadow-pop); padding: 6px; z-index: 60;
}
.search-results[hidden] { display: none; }
.sr-group { padding: 10px 12px 4px; font-size: 11.5px; font-weight: 700; color: var(--bm-muted); }
.sr-item { display: block; padding: 9px 12px; border-radius: 10px; text-decoration: none; color: var(--bm-ink); }
.sr-item:hover { background: var(--bm-blue-soft); }
.sr-item strong { display: block; font-size: 13px; font-weight: 600; }
.sr-item small { display: block; font-size: 12px; color: var(--bm-muted); margin-top: 1px; }
.sr-empty { padding: 16px; margin: 0; color: var(--bm-muted); font-size: 13px; text-align: center; }

.tb-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.tb-pop { position: relative; }
.tb-icon {
    position: relative; width: 44px; height: 44px; border-radius: 12px; border: 1px solid transparent;
    background: transparent; color: var(--bm-text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.tb-icon:hover { background: var(--bm-blue-soft); color: var(--bm-blue); }
.tb-badge {
    position: absolute; top: 4px; right: 3px; min-width: 19px; height: 19px; padding: 0 5px;
    border-radius: 999px; background: #F04438; color: #fff; font: 700 11px/19px var(--font); text-align: center;
    border: 2px solid var(--bm-card);
}
.tb-user {
    display: flex; align-items: center; gap: 12px; padding: 4px 10px 4px 4px; border-radius: 14px;
    border: 1px solid transparent; background: transparent; cursor: pointer; text-align: left; color: var(--bm-ink);
}
.tb-user:hover { background: var(--bm-blue-soft); }
.tb-avatar {
    width: 42px; height: 42px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #1A6BF5, #0A3FA0); color: #fff; font-weight: 700;
}
.tb-avatar img { width: 100%; height: 100%; object-fit: cover; }
.tb-user-text { display: flex; flex-direction: column; line-height: 1.25; }
.tb-user-text strong { font-size: 13.5px; font-weight: 700; }
.tb-user-text small { font-size: 12px; color: var(--bm-muted); font-weight: 500; }
.tb-caret { color: var(--bm-muted); }

.pop-panel {
    position: absolute; top: calc(100% + 10px); right: 0; min-width: 230px;
    background: var(--bm-card); border: 1px solid var(--bm-line); border-radius: 14px;
    box-shadow: var(--bm-shadow-pop); z-index: 70; overflow: hidden;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .14s ease, transform .14s ease, visibility .14s;
}
.pop-panel.open { opacity: 1; visibility: visible; transform: none; }
.pop-menu { padding: 6px; }
.pop-item {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 10px;
    background: none; border: 0; cursor: pointer; text-decoration: none; text-align: left;
    color: var(--bm-text); font: 500 13.5px var(--font);
}
.pop-item:hover { background: var(--bm-blue-soft); color: var(--bm-blue); }
.pop-danger:hover { background: var(--bad-soft); color: var(--bad-text); }
.pop-alerts { width: 360px; }
.pop-head { padding: 14px 16px 10px; font-weight: 700; color: var(--bm-ink); font-size: 14px; border-bottom: 1px solid var(--bm-line); }
.pop-empty { margin: 0; padding: 22px 16px; color: var(--bm-muted); font-size: 13px; text-align: center; }
.alert-row { display: flex; gap: 12px; padding: 12px 16px; text-decoration: none; color: var(--bm-ink); border-bottom: 1px solid var(--bm-line); }
.alert-row:last-child { border-bottom: 0; }
.alert-row:hover { background: var(--bm-card-alt); }
.alert-row strong { display: block; font-size: 13px; font-weight: 600; }
.alert-row small { display: block; margin-top: 2px; font-size: 12px; color: var(--bm-muted); line-height: 1.4; }
.alert-ico {
    width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center; background: var(--bm-blue-soft); color: var(--bm-blue);
}
.tone-warn .alert-ico { background: var(--warn-soft); color: var(--warn-text); }
.tone-bad .alert-ico { background: var(--bad-soft); color: var(--bad-text); }

.app-scrim { display: none; }

/* Narrow screens: sidebar becomes an off-canvas drawer */
@media (max-width: 1100px) {
    .app-shell { grid-template-columns: minmax(0, 1fr); }
    .app-topbar, .app-content { grid-column: 1 !important; }
    .app-sidebar {
        position: fixed; top: 0; bottom: 0; left: 0; width: var(--sidebar-w);
        transform: translateX(-100%); transition: transform .22s ease;
    }
    body.sb-open .app-sidebar { transform: none; }
    body.sb-open .app-scrim { display: block; position: fixed; inset: 0; background: rgba(6,18,46,.55); z-index: 35; }
    .tb-burger { display: inline-flex; }
    .tb-user-text { display: none; }
}

/* =========================================================================
   SHARED COMPONENTS
   ========================================================================= */
.bm-page { padding: 24px 28px 48px; }
.bm-pagehead { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.bm-crumb { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--bm-muted); text-decoration: none; margin-bottom: 8px; }
.bm-crumb:hover { color: var(--bm-blue); }
.bm-title { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -.02em; color: var(--bm-ink); line-height: 1.15; }
.bm-sub { margin: 6px 0 0; font-size: 14px; color: var(--bm-muted); max-width: 720px; line-height: 1.5; }
.bm-head-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }

.bm-card {
    background: var(--bm-card); border: 1px solid var(--bm-line);
    border-radius: 16px; box-shadow: var(--bm-shadow); min-width: 0;
}
.bm-card-pad { padding: 20px 22px; }
.bm-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px 0; }
.bm-card-title { margin: 0; font-size: 16px; font-weight: 700; color: var(--bm-ink); display: inline-flex; align-items: center; gap: 8px; }
.bm-info {
    display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; border-radius: 50%;
    border: 1.5px solid var(--bm-muted); color: var(--bm-muted); font: 700 10px/1 var(--font); cursor: help; position: relative;
}
.bm-info:hover::after, .bm-info:focus::after {
    content: attr(data-tip); position: absolute; top: 24px; left: -8px; z-index: 50; width: 260px; padding: 10px 12px;
    background: var(--bm-ink); color: #fff; border-radius: 10px; font: 500 12px/1.5 var(--font); box-shadow: var(--bm-shadow-pop);
}
html.dark .bm-info:hover::after { background: #0b1220; border: 1px solid var(--bm-line); }

.bm-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 42px; padding: 0 18px; border-radius: 11px; border: 1px solid transparent;
    font: 600 13.5px var(--font); cursor: pointer; text-decoration: none; white-space: nowrap;
    transition: background .15s, border-color .15s, box-shadow .15s, transform .15s;
}
.bm-btn:focus-visible { outline: 2px solid var(--bm-blue); outline-offset: 2px; }
.bm-btn:disabled, .bm-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.bm-btn-primary { background: linear-gradient(135deg, #1A6BF5, #0B58E0); color: #fff; box-shadow: 0 8px 18px -8px rgba(11,108,255,.7); }
.bm-btn-primary:hover:not(:disabled) { background: linear-gradient(135deg, #2A78FF, #0F63F0); }
.bm-btn-navy { background: var(--bm-navy); color: #fff; }
.bm-btn-navy:hover:not(:disabled) { background: #14388A; }
html.dark .bm-btn-navy { background: #1D4ED8; }
.bm-btn-ghost { background: var(--bm-card); color: var(--bm-ink); border-color: var(--bm-line); }
.bm-btn-ghost:hover:not(:disabled) { border-color: var(--bm-blue); color: var(--bm-blue); }
.bm-btn-soft { background: var(--bm-blue-soft); color: var(--bm-blue); }
.bm-btn-soft:hover:not(:disabled) { background: #DCE9FF; }
html.dark .bm-btn-soft:hover:not(:disabled) { background: #1c2e4d; }
.bm-btn-danger { background: var(--bad); color: #fff; }
.bm-btn-block { width: 100%; }
.bm-btn-sm { height: 34px; padding: 0 14px; font-size: 12.5px; border-radius: 9px; }

.bm-label { display: block; margin: 0 0 6px; font-size: 12px; font-weight: 600; color: var(--bm-muted); }
.bm-field, .bm-select, .bm-textarea {
    width: 100%; height: 42px; padding: 0 12px; border: 1px solid var(--bm-line); border-radius: 11px;
    background: var(--bm-card); color: var(--bm-ink); font: 500 13.5px var(--font); outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.bm-textarea { height: auto; padding: 10px 12px; line-height: 1.5; resize: vertical; }
.bm-select { appearance: none; -webkit-appearance: none; padding-right: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7A93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center; }
.bm-select:disabled { background-color: var(--bm-card-alt); color: var(--bm-muted); cursor: not-allowed; }
.bm-field:focus, .bm-select:focus, .bm-textarea:focus { border-color: var(--bm-blue); box-shadow: 0 0 0 3px rgba(11,108,255,.14); }
.bm-select-sm { height: 36px; font-size: 12.5px; border-radius: 9px; }
html.dark .bm-field, html.dark .bm-select, html.dark .bm-textarea { background-color: var(--bm-card-alt) !important; color: var(--bm-ink) !important; border-color: var(--bm-line) !important; }

/* Bloom + status pills */
.pill {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 4px 12px; border-radius: 8px; font-size: 12px; font-weight: 600; white-space: nowrap; line-height: 1.4;
}
.pill-dot::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill.bl-remember   { background: var(--bl-remember-soft);   color: var(--bl-remember-text); }
.pill.bl-understand { background: var(--bl-understand-soft); color: var(--bl-understand-text); }
.pill.bl-apply      { background: var(--bl-apply-soft);      color: var(--bl-apply-text); }
.pill.bl-analyze    { background: var(--bl-analyze-soft);    color: var(--bl-analyze-text); }
.pill.bl-evaluate   { background: var(--bl-evaluate-soft);   color: var(--bl-evaluate-text); }
.pill.bl-create     { background: var(--bl-create-soft);     color: var(--bl-create-text); }
.pill.st-ok      { background: var(--ok-soft);   color: var(--ok-text); }
.pill.st-warn    { background: var(--warn-soft); color: var(--warn-text); }
.pill.st-bad     { background: var(--bad-soft);  color: var(--bad-text); }
.pill.st-neutral { background: var(--bm-card-alt); color: var(--bm-muted); border: 1px solid var(--bm-line); }
.pill.st-info    { background: var(--bm-blue-soft); color: var(--bm-blue); }

/* Tables */
.bm-table-wrap { overflow-x: auto; }
.bm-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.bm-table th {
    padding: 12px 14px; text-align: left; font-size: 12.5px; font-weight: 700; color: var(--bm-muted);
    border-bottom: 1px solid var(--bm-line); background: transparent; white-space: nowrap;
}
.bm-table td { padding: 13px 14px; border-bottom: 1px solid var(--bm-line); color: var(--bm-text); vertical-align: middle; }
.bm-table tbody tr:last-child td { border-bottom: 0; }
.bm-table tbody tr:hover { background: var(--bm-card-alt); }
.bm-table .num { text-align: center; }
html.dark .bm-table th { background: transparent !important; }

.bm-progress { height: 8px; border-radius: 999px; background: var(--bm-card-alt); overflow: hidden; border: 1px solid var(--bm-line); }
.bm-progress > span { display: block; height: 100%; border-radius: 999px; background: var(--ok); }
.bm-progress.warn > span { background: var(--warn); }
.bm-progress.bad > span { background: var(--bad); }

.bm-empty { padding: 36px 20px; text-align: center; color: var(--bm-muted); font-size: 13.5px; line-height: 1.6; }

/* Tabs */
.bm-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--bm-line); }
.bm-tab {
    padding: 12px 16px; margin-bottom: -1px; background: none; border: 0; border-bottom: 2px solid transparent;
    color: var(--bm-muted); font: 600 13.5px var(--font); cursor: pointer;
}
.bm-tab:hover { color: var(--bm-blue); }
.bm-tab.active { color: var(--bm-blue); border-bottom-color: var(--bm-blue); }

/* Toast */
.bm-toast {
    position: fixed; top: 24px; right: 24px; z-index: 9999; max-width: 380px; padding: 13px 18px; border-radius: 12px;
    color: #fff; font: 600 13.5px var(--font); box-shadow: var(--bm-shadow-pop);
    background: #15803D; opacity: 0; transform: translateY(-10px); transition: all .25s ease;
}
.bm-toast.error { background: #C42B2B; }
.bm-toast.show { opacity: 1; transform: none; }

/* Modal */
.bm-modal { position: fixed; inset: 0; z-index: 9990; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(8,24,63,.55); }
.bm-modal.open { display: flex; }
.bm-modal-panel { background: var(--bm-card); border-radius: 18px; width: 100%; max-width: 720px; max-height: 88vh; display: flex; flex-direction: column; box-shadow: var(--bm-shadow-pop); border: 1px solid var(--bm-line); }
.bm-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--bm-line); }
.bm-modal-head h3 { margin: 0; font-size: 17px; font-weight: 700; color: var(--bm-ink); }
.bm-modal-body { padding: 20px 22px; overflow-y: auto; }
.bm-modal-foot { padding: 14px 22px; border-top: 1px solid var(--bm-line); display: flex; justify-content: flex-end; gap: 10px; }
.bm-x { background: none; border: 0; color: var(--bm-muted); cursor: pointer; padding: 4px; border-radius: 8px; }
.bm-x:hover { color: var(--bad); background: var(--bad-soft); }

.bm-spin { width: 40px; height: 40px; border: 4px solid var(--bm-line); border-top-color: var(--bm-blue); border-radius: 50%; animation: bmspin .8s linear infinite; }
@keyframes bmspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .bm-spin { animation-duration: 2s; } * { transition: none !important; } }

/* =========================================================================
   DASHBOARD
   ========================================================================= */
.dash { display: grid; gap: 18px; padding: 22px 26px 44px; }
.dash-row { display: grid; gap: 18px; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: stretch; }
.dash-col { display: grid; gap: 18px; align-content: start; }

.hero {
    position: relative; overflow: hidden; border-radius: 20px; color: #fff; min-height: 136px; padding: 22px 40px;
    display: flex; align-items: center; justify-content: space-between; gap: 28px;
    background:
        radial-gradient(circle at 72% 78%, rgba(31, 128, 255, .50), transparent 46%),
        radial-gradient(circle at 8% 0%, rgba(80, 130, 255, .22), transparent 42%),
        linear-gradient(115deg, #071238 0%, #0A2470 52%, #0B2E86 100%);
    box-shadow: 0 24px 48px -26px rgba(8, 24, 80, .7);
}
.hero-left { position: relative; z-index: 3; max-width: 470px; flex: 0 1 auto; }
.hero .hi { font-size: 26px; font-weight: 500; color: #86BBFF; line-height: 1.2; }
.hero .name { margin: 0 0 10px; font-size: 46px; font-weight: 800; letter-spacing: -.02em; line-height: 1.05; }
.hero .desc { margin: 8px 0 18px; font-size: 13.5px; line-height: 1.55; color: rgba(255,255,255,.78); max-width: 420px; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-cta .bm-btn { height: 44px; }
.bm-btn-outline { background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.55); }
.bm-btn-outline:hover { background: rgba(255,255,255,.14); }
.hero-tag {
    position: relative; z-index: 3; flex: 0 0 auto; text-align: right;
    font-size: 26px; font-weight: 700; line-height: 1.32; letter-spacing: -.01em; color: #EAF2FF;
    display: flex; flex-direction: column; align-items: flex-end;
}
.hero-tag span:nth-child(2) { color: #8FC2FF; }
.hero-tag::after { content: ''; width: 50px; height: 3px; margin-top: 14px; border-radius: 3px; background: #6FB1FF; }

.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.stat { display: flex; align-items: center; gap: 18px; padding: 20px 22px; border-radius: 16px; border: 1px solid var(--bm-line); box-shadow: var(--bm-shadow); background: var(--bm-card); }
.stat .ico { width: 62px; height: 62px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.stat .val { font-size: 32px; font-weight: 800; letter-spacing: -.02em; color: var(--bm-ink); line-height: 1.05; }
.stat .lbl { margin-top: 3px; font-size: 13px; font-weight: 500; color: var(--bm-text); }
.stat .trend { margin-top: 5px; font-size: 12.5px; font-weight: 600; color: var(--bm-muted); display: flex; align-items: center; gap: 4px; }
.stat .trend.up { color: var(--ok-text); }
.stat .trend.down { color: var(--bad-text); }
.stat.t-blue   { background: linear-gradient(180deg, #F2F7FF, #ECF3FF); } .stat.t-blue .ico   { background: #DCE9FF; color: #1D63E9; }
.stat.t-orange { background: linear-gradient(180deg, #FFF8F1, #FFF3E7); } .stat.t-orange .ico { background: #FFE6CF; color: #E8730A; }
.stat.t-violet { background: linear-gradient(180deg, #F7F5FF, #F1EEFF); } .stat.t-violet .ico { background: #E3DCFF; color: #6B46E0; }
.stat.t-green  { background: linear-gradient(180deg, #F3FBF6, #ECF8F1); } .stat.t-green .ico  { background: #D3F1DF; color: #16965A; }
html.dark .stat.t-blue, html.dark .stat.t-orange, html.dark .stat.t-violet, html.dark .stat.t-green { background: var(--bm-card); }
html.dark .stat.t-blue .ico { background: #16283F; color: #8DBBFF; }
html.dark .stat.t-orange .ico { background: #3A200F; color: #FFA766; }
html.dark .stat.t-violet .ico { background: #241C42; color: #C1A8FF; }
html.dark .stat.t-green .ico { background: #0F3226; color: #5EE0B0; }

.bloom-chart { position: relative; height: 262px; margin: 14px 22px 0; }
.bloom-axis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); padding: 8px 22px 0 66px; }
.bloom-axis div { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 500; color: var(--bm-text); }
.bloom-axis .ico { display: inline-flex; }
.bloom-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 14px 22px 20px; padding: 12px 14px; border-radius: 12px; background: var(--bm-card-alt); border: 1px solid var(--bm-line); font-size: 12.5px; color: var(--bm-text); }
.bloom-foot b { color: var(--bm-ink); }

.align-body { display: flex; align-items: center; gap: 22px; padding: 14px 22px 8px; }
.donut-wrap { position: relative; width: 190px; height: 190px; flex-shrink: 0; }
.donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.donut-center b { font-size: 34px; font-weight: 800; color: var(--bm-ink); letter-spacing: -.02em; line-height: 1; }
.donut-center span { margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--bm-text); }
.legend { flex: 1; display: grid; gap: 16px; }
.legend div { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--bm-text); }
.legend i { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.legend em { font-style: normal; margin-left: auto; font-weight: 700; color: var(--bm-ink); }
.tip {
    display: flex; gap: 12px; align-items: flex-start; margin: 10px 22px 20px; padding: 14px 16px; border-radius: 12px;
    background: var(--bm-blue-soft); color: var(--bm-text); font-size: 13px; line-height: 1.55;
}
.tip svg { color: var(--bm-blue); flex-shrink: 0; margin-top: 1px; }
.tip b { color: var(--bm-ink); }

.link-more { font-size: 13px; font-weight: 600; color: var(--bm-blue); text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }
.link-more:hover { text-decoration: underline; }
.file-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.file-cell .fi { width: 32px; height: 32px; border-radius: 8px; background: var(--bm-blue-soft); color: var(--bm-blue); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.file-cell strong { display: block; font-size: 13.5px; font-weight: 600; color: var(--bm-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 230px; }
.file-cell small { display: block; font-size: 11.5px; color: var(--bm-muted); }
.row-menu { position: relative; display: inline-block; }
.row-menu summary { list-style: none; cursor: pointer; width: 32px; height: 32px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: var(--bm-muted); }
.row-menu summary::-webkit-details-marker { display: none; }
.row-menu summary:hover, .row-menu[open] summary { background: var(--bm-blue-soft); color: var(--bm-blue); }
.row-menu .menu { position: absolute; right: 0; top: 36px; z-index: 20; min-width: 190px; padding: 6px; background: var(--bm-card); border: 1px solid var(--bm-line); border-radius: 12px; box-shadow: var(--bm-shadow-pop); }
.row-menu .menu a { display: block; padding: 9px 12px; border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--bm-text); text-decoration: none; }
.row-menu .menu a:hover { background: var(--bm-blue-soft); color: var(--bm-blue); }

.qa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 14px 22px 22px; }
.qa { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 14px; text-decoration: none; border: 1px solid transparent; transition: transform .15s, box-shadow .15s; }
.qa:hover { transform: translateY(-1px); box-shadow: var(--bm-shadow-pop); }
.qa .qi { width: 42px; height: 42px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; }
.qa strong { display: block; font-size: 13.5px; font-weight: 700; color: var(--bm-ink); }
.qa small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.35; color: var(--bm-muted); }
.qa > svg:last-child { margin-left: auto; color: var(--bm-muted); flex-shrink: 0; }
.qa.q-blue   { background: #EEF4FF; } .qa.q-blue .qi   { background: #1D63E9; }
.qa.q-orange { background: #FFF3E7; } .qa.q-orange .qi { background: #F08A24; }
.qa.q-violet { background: #F2EFFF; } .qa.q-violet .qi { background: #6B46E0; }
.qa.q-green  { background: #ECF8F1; } .qa.q-green .qi  { background: #16965A; }
html.dark .qa.q-blue, html.dark .qa.q-orange, html.dark .qa.q-violet, html.dark .qa.q-green { background: var(--bm-card-alt); border-color: var(--bm-line); }

.ann { padding: 8px 22px 18px; display: grid; gap: 0; }
.ann-item { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--bm-line); text-decoration: none; }
.ann-item:last-child { border-bottom: 0; }
.ann-item .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--bm-blue); margin-top: 5px; flex-shrink: 0; }
.ann-item.tone-warn .dot { background: var(--warn); }
.ann-item.tone-bad .dot { background: var(--bad); }
.ann-item strong { display: block; font-size: 13.5px; font-weight: 700; color: var(--bm-ink); }
.ann-item small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--bm-muted); line-height: 1.45; }
.ann-item:hover strong { color: var(--bm-blue); }

.course-bars { padding: 6px 22px 18px; }
.course-row { display: grid; grid-template-columns: 74px minmax(0, 1.2fr) minmax(0, 1.6fr) 62px; gap: 14px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--bm-line); font-size: 13.5px; }
.course-row:last-child { border-bottom: 0; }
.course-row .code { font-weight: 700; color: var(--bm-ink); }
.course-row .ttl { color: var(--bm-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.course-row .pct { text-align: right; font-weight: 700; }
.pct.ok { color: var(--ok-text); } .pct.warn { color: var(--warn-text); } .pct.bad { color: var(--bad-text); }

@media (max-width: 1280px) {
    .dash-row { grid-template-columns: minmax(0, 1fr); }
    .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hero-tag { display: none; }
}
@media (max-width: 720px) { .stat-grid, .qa-grid { grid-template-columns: 1fr; } .hero .name { font-size: 36px; } }

/* =========================================================================
   BLOOM CLASSIFICATION
   ========================================================================= */
.tagline-card { display: flex; align-items: center; gap: 14px; padding: 14px 22px; border-radius: 16px; background: linear-gradient(120deg, #EAF2FF, #F5F9FF); border: 1px solid var(--bm-line); }
.tagline-card em { font-style: italic; font-weight: 600; font-size: 15px; line-height: 1.35; color: #14367F; }
.tagline-card img { width: 38px; height: auto; opacity: .9; }
html.dark .tagline-card { background: var(--bm-card); }
html.dark .tagline-card em { color: #8DBBFF; }

.toolbar { display: block; padding: 16px 18px 18px; margin-bottom: 18px; }
.toolbar .tb-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.toolbar .tb-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.toolbar .tb-filters { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1200px) { .toolbar .tb-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .toolbar .tb-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* One-row filter bars (Classification, Reports): every filter side by side.
   Set the field count with style="--tb-cols:N"; wraps to 3 then 2 per row on narrow screens. */
.toolbar .tb-filters.one-row { grid-template-columns: repeat(var(--tb-cols, 6), minmax(0, 1fr)); align-items: end; }
.toolbar .tb-filters.one-row .fld { min-width: 0; display: flex; flex-direction: column; }
.toolbar .tb-filters.one-row .bm-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toolbar .tb-filters.one-row .bm-select { width: 100%; min-width: 0; text-overflow: ellipsis; }
@media (max-width: 1000px) { .toolbar .tb-filters.one-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .toolbar .tb-filters.one-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.cls-grid { display: grid; gap: 18px; grid-template-columns: minmax(330px, 1fr) minmax(360px, 1.05fr); align-items: start; }
.cls-top { display: grid; gap: 18px; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); align-items: start; margin-bottom: 18px; }
.cls-top + .analytics-row { margin-top: 0; }
.cls-col { display: grid; gap: 18px; align-content: start; min-width: 0; }

.qlist-tools { display: flex; gap: 10px; padding: 14px 18px 12px; position: relative; }
.qlist-tools .srch { position: relative; flex: 1; }
.qlist-tools .srch input { padding-left: 38px; }
.qlist-tools .srch svg { position: absolute; left: 12px; top: 12px; color: var(--bm-muted); pointer-events: none; }
.icon-btn { width: 42px; height: 42px; border-radius: 11px; border: 1px solid var(--bm-line); background: var(--bm-card); color: var(--bm-blue); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; position: relative; }
.icon-btn:hover, .icon-btn.on { background: var(--bm-blue-soft); border-color: var(--bm-blue); }
.icon-btn .dot { position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: #F04438; }
.filter-pop { position: absolute; right: 18px; top: 60px; width: 250px; z-index: 30; padding: 14px; display: none; gap: 10px; background: var(--bm-card); border: 1px solid var(--bm-line); border-radius: 14px; box-shadow: var(--bm-shadow-pop); }
.filter-pop.open { display: grid; }

.qtable { width: 100%; border-collapse: collapse; font-size: 13px; }
.qtable th { white-space: nowrap; padding: 10px 12px; text-align: left; font-size: 12px; font-weight: 700; color: var(--bm-muted); border-top: 1px solid var(--bm-line); border-bottom: 1px solid var(--bm-line); background: var(--bm-card-alt); }
.qtable td { padding: 11px 12px; border-bottom: 1px solid var(--bm-line); vertical-align: middle; }
.qtable tr.qrow { cursor: pointer; }
.qtable tr.qrow:hover { background: var(--bm-card-alt); }
.qtable tr.qrow.sel { background: var(--bm-blue-soft); box-shadow: inset 3px 0 0 var(--bm-blue); }
.qtable .qn { color: var(--bm-muted); width: 34px; }
.qtable .qt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; color: var(--bm-ink); font-weight: 500; }
.qtable input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--bm-blue); cursor: pointer; }
.qtable .lv { text-align: right; white-space: nowrap; }

.pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 18px 16px; font-size: 12.5px; color: var(--bm-muted); flex-wrap: wrap; }
.pager .pg { display: flex; gap: 6px; }
.pager button { min-width: 32px; height: 32px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--bm-line); background: var(--bm-card); color: var(--bm-text); font: 600 12.5px var(--font); cursor: pointer; }
.pager button:hover:not(:disabled) { border-color: var(--bm-blue); color: var(--bm-blue); }
.pager button.on { background: var(--bm-blue); border-color: var(--bm-blue); color: #fff; }
.pager button:disabled { opacity: .4; cursor: not-allowed; }

.qd-nav { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--bm-muted); font-weight: 600; }
.qd-nav button { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--bm-line); background: var(--bm-card); color: var(--bm-text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.qd-nav button:hover:not(:disabled) { border-color: var(--bm-blue); color: var(--bm-blue); }
.qd-nav button:disabled { opacity: .4; cursor: not-allowed; }
.qd-body { padding: 14px 22px 22px; display: grid; gap: 18px; }
.qd-sec h4 { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--bm-ink); display: flex; align-items: center; gap: 7px; }
.qd-text { padding: 14px 16px; border-radius: 12px; background: var(--bm-blue-soft); color: var(--bm-ink); font-size: 14px; line-height: 1.55; font-weight: 500; word-break: break-word; }
.result-box { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--bm-line); border-radius: 14px; background: var(--bm-card-alt); }
.result-ico { width: 46px; height: 46px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.result-main { flex: 1; min-width: 0; }
.result-main strong { display: block; font-size: 17px; font-weight: 800; color: var(--bm-ink); }
.result-main small { font-size: 12.5px; color: var(--bm-text); font-weight: 600; }
.conf-bar { height: 7px; margin-top: 7px; border-radius: 999px; background: var(--bm-line); overflow: hidden; }
.conf-bar span { display: block; height: 100%; border-radius: 999px; background: var(--ok); }
.kv { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.kv > div { padding: 10px 12px; border: 1px solid var(--bm-line); border-radius: 10px; background: var(--bm-card); }
.kv small { display: block; font-size: 11.5px; color: var(--bm-muted); font-weight: 600; margin-bottom: 3px; }
.kv b { font-size: 13.5px; color: var(--bm-ink); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: var(--bm-card-alt); border: 1px solid var(--bm-line); color: var(--bm-text); font-size: 12.5px; font-weight: 600; cursor: default; }
button.chip { cursor: pointer; color: var(--bm-blue); }
.rationale { margin: 0; font-size: 13px; line-height: 1.65; color: var(--bm-text); }
.probs { display: grid; gap: 7px; }
.prob { display: grid; grid-template-columns: 82px 1fr 44px; gap: 10px; align-items: center; font-size: 12px; color: var(--bm-text); }
.prob .bar { height: 7px; border-radius: 999px; background: var(--bm-line); overflow: hidden; }
.prob .bar span { display: block; height: 100%; border-radius: 999px; }
.prob b { text-align: right; color: var(--bm-ink); }
.review-row { display: grid; gap: 12px; }
.review-actions { display: flex; gap: 10px; }
.review-actions .bm-btn { flex: 1; }
.review-note { font-size: 12px; color: var(--bm-muted); line-height: 1.5; }
.review-flag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--bm-blue); }

.sum-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 14px 16px 18px; }
.sum { display: flex; align-items: center; gap: 10px; padding: 12px; min-width: 0; border-radius: 14px; border: 1px solid var(--bm-line); background: var(--bm-card-alt); }
.sum > div { min-width: 0; }
.sum .si { width: 38px; height: 38px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sum b { display: block; font-size: 20px; font-weight: 800; color: var(--bm-ink); line-height: 1.1; }
.sum small { display: block; font-size: 11.5px; color: var(--bm-text); font-weight: 600; line-height: 1.3; }
.sum .sub { color: var(--bm-muted); font-weight: 500; font-size: 11px; }

.qa-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px 16px 18px; }
.qb { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px 14px; min-height: 80px; min-width: 0; border-radius: 14px; border: 1px solid transparent; cursor: pointer; text-decoration: none; text-align: left; font-family: var(--font); transition: transform .15s, box-shadow .15s; }
.qb:hover { transform: translateY(-1px); box-shadow: var(--bm-shadow-pop); }
.qb strong { font-size: 13px; font-weight: 700; color: var(--bm-ink); display: flex; align-items: center; gap: 8px; }
.qb small { font-size: 11.5px; color: var(--bm-muted); line-height: 1.35; }
.qb.g { background: #ECF8F1; } .qb.g strong svg { color: #16965A; }
.qb.o { background: #FFF3E7; } .qb.o strong svg { color: #E8730A; }
.qb.v { background: #F2EFFF; } .qb.v strong svg { color: #6B46E0; }
.qb.b { background: #EAF2FF; } .qb.b strong svg { color: #1D63E9; }
html.dark .qb.g, html.dark .qb.o, html.dark .qb.v, html.dark .qb.b { background: var(--bm-card-alt); border-color: var(--bm-line); }
.menu-pop { position: relative; }
.menu-pop .pop-inline { display: none; position: absolute; left: 0; top: calc(100% + 6px); z-index: 25; min-width: 180px; padding: 6px; background: var(--bm-card); border: 1px solid var(--bm-line); border-radius: 12px; box-shadow: var(--bm-shadow-pop); }
.menu-pop.open .pop-inline { display: block; }

.analytics-row { display: grid; gap: 18px; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); margin-top: 18px; }
.heat { width: 100%; border-collapse: separate; border-spacing: 5px; font-size: 12px; text-align: center; }
.heat th { font-weight: 600; color: var(--bm-muted); padding: 6px 4px; }
.heat td.rowh { text-align: left; font-weight: 600; color: var(--bm-ink); white-space: nowrap; padding-right: 8px; }
.heat td.cell { border-radius: 8px; padding: 12px 4px; font-weight: 700; }
.heat td.qn { color: var(--bm-muted); font-weight: 600; }
.legend-scale { height: 8px; border-radius: 999px; background: linear-gradient(to right, #DC2626, #EF4444, #FB923C, #FACC15, #84CC16, #22C55E); }
.bar-rate { display: flex; align-items: baseline; gap: 10px; }
.bar-rate b { font-size: 34px; font-weight: 800; color: var(--bm-ink); letter-spacing: -.02em; }
.bar-rate span { font-size: 12.5px; color: var(--bm-muted); }

/* The three top cards stay in ONE row at every normal window size; only on phone widths do they stack.
   When a card gets narrow, the tiles inside it stack instead (container query on the card itself). */
.cls-top > .bm-card { container-type: inline-size; }
@container (max-width: 360px) { .sum-grid, .qa-list { grid-template-columns: minmax(0, 1fr); } .sum b { font-size: 19px; } }
@media (max-width: 1000px) { .cls-grid, .analytics-row { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) { .cls-top { grid-template-columns: minmax(0, 1fr); } }

@media print { .app-sidebar, .app-topbar, .no-print { display: none !important; } .app-shell { display: block; height: auto; } .app-content { overflow: visible !important; } }

/* =========================================================================
   ASSESSMENT ANALYSIS (alignment.php)
   The page's own scripts and forms are unchanged; these rules re-skin them.
   ========================================================================= */
.al-hide { display: none !important; }
.last-analysis { text-align: right; line-height: 1.25; padding-right: 6px; }
.last-analysis small { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--bm-muted); }
.last-analysis b { font-size: 13px; color: var(--bm-ink); }

/* filter bar */
.al-filters { border-radius: 16px !important; align-items: end; }
.al-filters label { font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--bm-muted) !important; }
.al-filters select { height: 42px !important; border-radius: 11px !important; border-color: var(--bm-line) !important; font-size: 13.5px !important; font-weight: 500; color: var(--bm-ink) !important; background-color: var(--bm-card) !important; }
.al-filters select:focus { border-color: var(--bm-blue) !important; box-shadow: 0 0 0 3px rgba(11,108,255,.14) !important; }
.al-filters #generateBtn { height: 42px !important; margin-top: 0 !important; border-radius: 11px !important; font-size: 13.5px; }
html.dark .al-filters select { background-color: var(--bm-card-alt) !important; }

/* cards */
.al-card { transition: none !important; transform: none !important; }
.al-card:hover { transform: none !important; box-shadow: var(--bm-shadow) !important; }
.al-card h3 { font-size: 15.5px !important; font-weight: 700 !important; color: var(--bm-ink) !important; }
.al-card table thead, .al-card table thead th { background: var(--bm-card-alt) !important; color: var(--bm-muted) !important; font-weight: 700; }
.al-card table.text-sm th, .al-card table.text-xs th { font-size: 12px; }
.al-card table td { border-color: var(--bm-line); }
.al-card table tbody tr:hover { background: var(--bm-card-alt); }
.al-card .overflow-auto { border-color: var(--bm-line) !important; }
.al-card select { border-color: var(--bm-line) !important; border-radius: 10px !important; background-color: var(--bm-card); color: var(--bm-ink); }
.al-card button.bg-blue-50, .al-card button[class*="bg-[#0B6CFF]/10"] { border-radius: 10px; font-weight: 600; }
tr.question-row { cursor: pointer; }
tr.question-row.sel { background: var(--bm-blue-soft) !important; box-shadow: inset 3px 0 0 var(--bm-blue); }

/* tabs */
.al-tabs { margin: 6px 28px 0; }
.al-tabs .bm-tabs { overflow-x: auto; scrollbar-width: none; }
.al-tabs .bm-tab { white-space: nowrap; }

/* details panel */
.al-detail { padding: 4px 20px 20px; display: grid; gap: 16px; align-content: start; overflow-y: auto; min-height: 0; flex: 1; }
.score-row { display: grid; grid-template-columns: 92px 1fr 48px; gap: 10px; align-items: center; font-size: 12.5px; color: var(--bm-text); }
.score-row .bar { height: 8px; border-radius: 999px; background: var(--bm-line); overflow: hidden; }
.score-row .bar span { display: block; height: 100%; border-radius: 999px; }
.score-row b { text-align: right; color: var(--bm-ink); }
.big-score { display: flex; align-items: center; gap: 14px; }
.big-score b { font-size: 34px; font-weight: 800; letter-spacing: -.02em; color: var(--bm-ink); line-height: 1; }
.al-note { padding: 12px 14px; border-radius: 12px; background: var(--bm-blue-soft); font-size: 13px; line-height: 1.6; color: var(--bm-text); }

@media (max-width: 1280px) { .al-grid > [class*="col-span-4"], .al-grid > [class*="col-span-2"] { grid-column: span 6 / span 6 !important; } .al-filters { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } .al-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }

/* Table filter bars (Courses / Examination): keep long option text from stretching the selects */
#departmentFilter, #courseFilter, #examTypeFilter, #examStatusFilter, #statusFilter { max-width: 240px; min-width: 130px; text-overflow: ellipsis; }

/* =========================================================================
   LEGACY PAGES (Courses, Examination, Reports, Management)
   These pages are still built from Tailwind utility classes. Everything below
   is scoped to body.lg-page and gives them the same look as the redesigned
   pages: cards, tables, inputs, buttons, modals and status pills.
   ========================================================================= */
.lg-page .bm-page-wrap { padding: 0 0 8px; }
.lg-page .lg-body { padding: 4px 28px 36px; }

/* alerts */
.bm-alert { margin: 0 28px 14px; padding: 12px 16px; border-radius: 12px; font-size: 13.5px; font-weight: 500; border: 1px solid transparent; }
.bm-alert.ok  { background: var(--ok-soft);  color: var(--ok-text);  border-color: rgba(22,163,74,.25); }
.bm-alert.err { background: var(--bad-soft); color: var(--bad-text); border-color: rgba(239,68,68,.25); }

/* five-across stat row */
.stat-grid.five { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; padding: 0 28px 18px; }
.stat-grid.five .stat { padding: 16px 16px; gap: 12px; }
.stat-grid.five .stat .ico { width: 48px; height: 48px; }
.stat-grid.five .stat .val { font-size: 26px; }
.stat-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; padding: 0 28px 18px; }
@media (max-width: 1280px) { .stat-grid.five, .stat-grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .stat-grid.five, .stat-grid.four { grid-template-columns: minmax(0, 1fr); } }

/* icon buttons for table actions */
.ibtn { width: 34px; height: 34px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; background: transparent; color: var(--bm-muted); cursor: pointer; text-decoration: none; transition: background .12s, color .12s, border-color .12s; flex-shrink: 0; }
.ibtn:hover { background: var(--bm-blue-soft); color: var(--bm-blue); }
.ibtn.warn:hover { background: var(--warn-soft); color: var(--warn-text); }
.ibtn.danger:hover { background: var(--bad-soft); color: var(--bad-text); }
.ibtn:focus-visible { outline: 2px solid var(--bm-blue); outline-offset: 1px; }

/* cards */
.lg-page .app-content .bg-white.rounded-2xl { border: 1px solid var(--bm-line) !important; box-shadow: var(--bm-shadow) !important; border-radius: 16px; }
.lg-page .hover\:-translate-y-1:hover { transform: none !important; }
.lg-page .hover\:shadow-lg:hover { box-shadow: var(--bm-shadow) !important; }

/* inputs */
.lg-page input[type=text], .lg-page input[type=search], .lg-page input[type=email], .lg-page input[type=password],
.lg-page input[type=number], .lg-page input[type=date], .lg-page select, .lg-page textarea {
    border: 1px solid var(--bm-line) !important; border-radius: 11px !important; background-color: var(--bm-card);
    color: var(--bm-ink); font-family: var(--font); font-size: 13.5px;
}
.lg-page input[type=text], .lg-page input[type=search], .lg-page input[type=email], .lg-page input[type=password],
.lg-page input[type=number], .lg-page input[type=date], .lg-page select { min-height: 42px; }
.lg-page input:focus, .lg-page select:focus, .lg-page textarea:focus { border-color: var(--bm-blue) !important; box-shadow: 0 0 0 3px rgba(11,108,255,.14) !important; outline: none !important; }
.lg-page input::placeholder, .lg-page textarea::placeholder { color: var(--bm-muted); }
html.dark .lg-page input, html.dark .lg-page select, html.dark .lg-page textarea { background-color: var(--bm-card-alt) !important; color: var(--bm-ink) !important; }

/* tables */
.lg-page .app-content table { font-size: 13.5px; }
.lg-page .app-content table thead, .lg-page .app-content table thead th { background: var(--bm-card-alt) !important; color: var(--bm-muted) !important; font-size: 12.5px; font-weight: 700; }
.lg-page .app-content table thead th { border-bottom: 1px solid var(--bm-line); }
.lg-page .app-content table tbody tr { transition: background .12s; }
.lg-page .app-content table tbody tr:hover { background: var(--bm-card-alt); }
.lg-page .app-content table td { color: var(--bm-text); }
.lg-page .app-content .divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: var(--bm-line) !important; }
.lg-page .app-content .border-gray-100, .lg-page .app-content .border-gray-200 { border-color: var(--bm-line) !important; }

/* Tailwind-blue buttons and links get the same shape as .bm-btn */
.lg-page button[class*="bg-[#0B6CFF]"], .lg-page a[class*="bg-[#0B6CFF]"] { border-radius: 11px !important; font-weight: 600; font-family: var(--font); }
.lg-page button[class*="bg-[#0B6CFF]"]:not([class*="/"]):hover, .lg-page a[class*="bg-[#0B6CFF]"]:hover { box-shadow: 0 8px 18px -8px rgba(11,108,255,.7); }

/* modals */
.lg-page .fixed.inset-0[class*="bg-black"] { background: rgba(8, 24, 63, .55) !important; backdrop-filter: blur(2px); }
.lg-page .fixed.inset-0 > .bg-white { border: 1px solid var(--bm-line); border-radius: 18px !important; box-shadow: var(--bm-shadow-pop) !important; }
.lg-page .fixed.inset-0 h2 { color: var(--bm-ink); letter-spacing: -.01em; }

/* Management landing cards */
.mg-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); padding: 0 28px 32px; }
.mg-card { display: flex; gap: 16px; align-items: flex-start; padding: 22px; text-decoration: none; background: var(--bm-card); border: 1px solid var(--bm-line); border-radius: 16px; box-shadow: var(--bm-shadow); transition: transform .15s, box-shadow .15s, border-color .15s; }
.mg-card:hover { transform: translateY(-2px); box-shadow: var(--bm-shadow-pop); border-color: var(--bm-blue); }
.mg-card .mg-ico { width: 52px; height: 52px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mg-card h3 { margin: 0; font-size: 16.5px; font-weight: 700; color: var(--bm-ink); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mg-card h3 svg { color: var(--bm-muted); transition: transform .15s, color .15s; }
.mg-card:hover h3 svg { color: var(--bm-blue); transform: translateX(3px); }
.mg-card p { margin: 6px 0 0; font-size: 13px; line-height: 1.55; color: var(--bm-muted); }
.mg-card.m-blue   .mg-ico { background: #DCE9FF; color: #1D63E9; }
.mg-card.m-green  .mg-ico { background: #D3F1DF; color: #16965A; }
.mg-card.m-violet .mg-ico { background: #E3DCFF; color: #6B46E0; }
.mg-card.m-orange .mg-ico { background: #FFE6CF; color: #E8730A; }
html.dark .mg-card.m-blue .mg-ico { background: #16283F; color: #8DBBFF; }
html.dark .mg-card.m-green .mg-ico { background: #0F3226; color: #5EE0B0; }
html.dark .mg-card.m-violet .mg-ico { background: #241C42; color: #C1A8FF; }
html.dark .mg-card.m-orange .mg-ico { background: #3A200F; color: #FFA766; }

/* Reports table toolbar */
.rp-toolbar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--bm-line); }
.rp-toolbar .srch { position: relative; flex: 1 1 260px; min-width: 220px; }
.rp-toolbar .srch input { width: 100%; padding-left: 40px; }
.rp-toolbar .srch svg { position: absolute; left: 13px; top: 12px; color: var(--bm-muted); pointer-events: none; }
.rp-toolbar select { min-width: 150px; max-width: 220px; }
.rp-actions { display: flex; align-items: center; gap: 8px; white-space: nowrap; }

/* wide Reports table (Instructor column present): icon-only actions when space is tight */
@media (max-width: 1760px) { .rp-wide .rp-actions .lbl { display: none; } .rp-wide .rp-actions .bm-btn { padding: 0 11px; } }
@media (max-width: 1560px) { .rp-wide th, .rp-wide td { padding-left: 11px !important; padding-right: 11px !important; } }

/* Management: keep the three button shapes consistent */
.lg-page .app-content button[class*="border-[#0B6CFF]"], .lg-page .app-content a[class*="border-[#0B6CFF]"] { border-radius: 11px !important; font-weight: 600; font-family: var(--font); background: var(--bm-card); box-shadow: none !important; }
.lg-page .app-content button[class*="border-[#0B6CFF]"]:hover, .lg-page .app-content a[class*="border-[#0B6CFF]"]:hover { background: var(--bm-blue-soft) !important; }
.lg-page .app-content button[class*="border-gray-300"], .lg-page .app-content a[class*="border-gray-300"][class*="rounded-xl"] { border-radius: 11px !important; font-weight: 600; font-family: var(--font); border-color: var(--bm-line) !important; color: var(--bm-text) !important; background: var(--bm-card) !important; }
.lg-page .app-content .bg-green-100.text-green-700 { background: var(--ok-soft) !important; color: var(--ok-text) !important; border-radius: 12px; }
.lg-page .app-content .bg-red-100.text-red-700 { background: var(--bad-soft) !important; color: var(--bad-text) !important; border-radius: 12px; }
.bm-crumb { cursor: default; }
.bm-crumb a:hover { color: var(--bm-blue) !important; }
.lg-page .app-content button[class*="bg-[#0B6CFF]"], .lg-page .app-content a[class*="bg-[#0B6CFF]"], .lg-page .app-content button[class*="border-[#0B6CFF]"], .lg-page .app-content button[class*="border-gray-300"] { white-space: nowrap; }


/* ---- Page tabs (assets/js/page-tabs.js): same look as the Alignment / Reports tabs ---- */
.pg-tabs { margin: 6px 28px 14px; overflow-x: auto; scrollbar-width: none; }
.pg-tabs::-webkit-scrollbar { display: none; }
.pg-tabs .bm-tab { white-space: nowrap; }
@media screen { .pg-hide { display: none !important; } }
@media print { .pg-tabs { display: none; } }


/* ---- Department colour coding (includes/department_colors.php) ---- */
.dept-name { display: inline-flex; align-items: center; gap: 8px; }
.dept-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--dc, #64748B); flex: 0 0 auto; }
.dept-chip { display: inline-flex; align-items: center; gap: 7px; padding: 3px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: var(--dcs, #F1F5F9); color: var(--dct, #475569); }
.dept-chip::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--dc, #64748B); }
html.dark .dept-chip { background: color-mix(in srgb, var(--dc, #64748B) 22%, transparent); color: var(--dc, #94A3B8); }


/* ---- Insights & Recommendations tabs (includes/insights_view.php) ---- */
.ins-wrap { font-size: 13.5px; }
.ins-tabs .bm-tab { display: inline-flex; align-items: center; gap: 8px; }
.ins-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.ins-dot.ins-weak { background: #DC2626; } .ins-dot.ins-strong { background: #16A34A; } .ins-dot.ins-reco { background: #2563EB; }
.ins-count { min-width: 20px; padding: 1px 7px; border-radius: 999px; background: var(--bm-card-alt, #F1F5F9); color: var(--bm-muted, #64748B); font-size: 11.5px; font-weight: 700; text-align: center; }
.bm-tab.active .ins-count { background: var(--bm-blue-soft, #DBEAFE); color: var(--bm-blue, #0B6CFF); }
.ins-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.ins-hint { color: var(--bm-muted, #64748B); font-size: 12.5px; }
.ins-toggle { border: 0; background: transparent; color: var(--bm-blue, #0B6CFF); font: 600 12.5px inherit; cursor: pointer; padding: 4px 8px; border-radius: 8px; }
.ins-toggle:hover { background: var(--bm-blue-soft, #DBEAFE); }
.ins-item { border: 1px solid var(--bm-line, #E5E7EB); border-left-width: 4px; border-radius: 12px; margin-bottom: 8px; background: var(--bm-card, #fff); overflow: hidden; }
.ins-item.ins-weak { border-left-color: #DC2626; } .ins-item.ins-strong { border-left-color: #16A34A; } .ins-item.ins-reco { border-left-color: #2563EB; }
.ins-sum { display: flex; align-items: center; gap: 12px; padding: 11px 14px; cursor: pointer; list-style: none; color: var(--bm-ink, #0F172A); font-weight: 600; }
.ins-sum::-webkit-details-marker { display: none; }
details.ins-item > summary:hover { background: var(--bm-card-alt, #F8FAFC); }
.ins-static .ins-sum { cursor: default; }
.ins-no { flex: 0 0 24px; height: 24px; border-radius: 50%; background: var(--bm-card-alt, #F1F5F9); color: var(--bm-muted, #64748B); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.ins-title { flex: 1; line-height: 1.45; }
.ins-chev { width: 8px; height: 8px; border-right: 2px solid var(--bm-muted, #64748B); border-bottom: 2px solid var(--bm-muted, #64748B); transform: rotate(45deg); transition: transform .15s; margin-right: 4px; flex: 0 0 auto; }
details.ins-item[open] > summary .ins-chev { transform: rotate(-135deg); }
.ins-body { padding: 2px 14px 14px 50px; color: var(--bm-text, #334155); line-height: 1.65; }
.ins-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ins-chip { border: 1px solid var(--bm-line, #E5E7EB); background: var(--bm-card-alt, #F8FAFC); color: var(--bm-blue, #0B6CFF); font: 600 12px inherit; padding: 3px 10px; border-radius: 999px; cursor: pointer; }
.ins-chip:hover { border-color: var(--bm-blue, #0B6CFF); background: var(--bm-blue-soft, #DBEAFE); }
.ins-empty { color: var(--bm-muted, #64748B); padding: 8px 2px; }


/* ---- TOS relevance tab (includes/tos_relevance_view.php) ---- */
.tr-wrap { font-size: 13.5px; }
.tr-lead { color: var(--bm-muted, #64748B); margin: 0 0 14px; }
.tr-engine { display: inline-block; margin-left: 6px; padding: 2px 10px; border-radius: 999px; background: var(--bm-card-alt, #F1F5F9); font-size: 12px; font-weight: 600; }
.tr-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.tr-card { border: 1px solid var(--bm-line, #E5E7EB); border-radius: 14px; padding: 14px 16px; background: var(--bm-card, #fff); }
.tr-card-label { font-size: 12.5px; font-weight: 600; color: var(--bm-muted, #64748B); }
.tr-card-val { font-size: 26px; font-weight: 800; color: var(--bm-ink, #0F172A); line-height: 1.2; margin: 4px 0; }
.tr-card-note { font-size: 12px; color: var(--bm-muted, #64748B); line-height: 1.4; }
.tr-scroll { overflow-x: auto; border: 1px solid var(--bm-line, #E5E7EB); border-radius: 12px; }
.tr-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.tr-table th { text-align: left; padding: 10px 14px; font-size: 12px; font-weight: 700; color: var(--bm-muted, #64748B); background: var(--bm-card-alt, #F8FAFC); white-space: nowrap; }
.tr-table td { padding: 10px 14px; border-top: 1px solid var(--bm-line, #E5E7EB); vertical-align: middle; }
.tr-none { color: var(--bm-muted, #64748B); font-style: italic; }
.tr-bar { display: inline-block; vertical-align: middle; width: 70px; height: 8px; border-radius: 999px; background: var(--bm-line, #E5E7EB); overflow: hidden; margin-right: 6px; }
.tr-bar i { display: block; height: 100%; border-radius: 999px; }
.tr-bar.relevant i { background: #16A34A; } .tr-bar.partial i { background: #F59E0B; } .tr-bar.off i { background: #DC2626; }
.tr-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.tr-chip { border: 1px solid var(--bm-line, #E5E7EB); background: var(--bm-card, #fff); color: var(--bm-text, #334155); font: 600 12.5px inherit; padding: 5px 14px; border-radius: 999px; cursor: pointer; }
.tr-chip.active { background: var(--bm-blue, #0B6CFF); border-color: transparent; color: #fff; }
.tr-foot { margin: 10px 2px 0; font-size: 12.5px; color: var(--bm-muted, #64748B); }
.tr-how { line-height: 1.7; color: var(--bm-text, #334155); max-width: 760px; }
.tr-how ul { padding-left: 1.2rem; margin: 8px 0 0; } .tr-how li { margin-bottom: 8px; }
@media (max-width: 1100px) { .tr-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }


/* =========================================================================
   SIDEBAR: hide / show (toggle) and peek on hover
   -------------------------------------------------------------------------
   Desktop: the menu button in the header hides the sidebar and gives the page
   the full width (remembered per browser). While hidden, moving the mouse to the
   left edge of the screen slides the menu back in; it slides out again when the
   mouse leaves it. Narrow screens keep the off-canvas drawer above.
   ========================================================================= */
@media (min-width: 1101px) {
    .tb-burger { display: inline-flex; }
    .app-shell { transition: grid-template-columns .22s ease; }
    html.sb-collapsed .app-shell { grid-template-columns: 0 minmax(0, 1fr); }
    html.sb-collapsed .app-sidebar {
        position: fixed; top: 0; bottom: 0; left: 0; width: var(--sidebar-w); z-index: 40;
        transform: translateX(-102%); transition: transform .22s ease; visibility: hidden;
    }
    html.sb-collapsed.sb-peek .app-sidebar {
        transform: none; visibility: visible; box-shadow: 10px 0 34px rgba(6, 18, 46, .30);
    }
    html.sb-collapsed .sb-hotzone { display: block; position: fixed; left: 0; top: 0; bottom: 0; width: 12px; z-index: 39; }
}
.sb-hotzone { display: none; }


/* =========================================================================
   MODALS: never taller than the screen.
   -------------------------------------------------------------------------
   Every full-screen overlay (a "fixed inset-0" box that centres its card) keeps a little air around the
   card, and the card is never taller than the screen: when its content is longer, the content scrolls
   inside the card instead of running off the top and bottom of the page. Cards that already set their
   own max-height (max-h-[85vh] and the like) keep it.
   ========================================================================= */
div.fixed.inset-0.items-center.justify-center { box-sizing: border-box; padding: 16px; }
div.fixed.inset-0.items-center.justify-center > div:not([class*="max-h-"]) {
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    max-width: 100%;
    box-sizing: border-box;
}
div.fixed.inset-0.items-center.justify-center > div[class*="max-h-"] { max-width: 100%; }


/* =========================================================================
   SLIDE SWITCH (replaces radio / check boxes that mean "on / off")
   <label class="bm-switch"><input type="checkbox"><span class="track"></span><span class="off">Keep</span><span class="on">Change</span></label>
   ========================================================================= */
.bm-switch { position: relative; display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-size: 12.5px; user-select: none; vertical-align: middle; }
/* the real checkbox stays inside its own label (position: relative above); otherwise the browser scrolls to it, and it stretches the page, when the switch is flipped */
.bm-switch input { position: absolute; top: 0; left: 0; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.bm-switch .track { position: relative; flex: 0 0 auto; width: 40px; height: 22px; border-radius: 999px; background: #cbd5e1; transition: background .18s ease; }
.bm-switch .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, .35); transition: transform .18s ease; }
.bm-switch input:checked + .track { background: var(--bm-blue, #0B6CFF); }
.bm-switch input:checked + .track::after { transform: translateX(18px); }
.bm-switch input:focus-visible + .track { outline: 2px solid var(--bm-blue, #0B6CFF); outline-offset: 2px; }
.bm-switch input:disabled + .track { opacity: .5; cursor: not-allowed; }
.bm-switch .on { display: none; color: var(--bm-blue, #0B6CFF); font-weight: 600; }
.bm-switch .off { color: var(--bm-muted, #64748b); }
.bm-switch input:checked ~ .off { display: none; }
.bm-switch input:checked ~ .on { display: inline; }
html.dark .bm-switch .track { background: #475569; }
html.dark .bm-switch input:checked + .track { background: var(--bm-blue, #0B6CFF); }

/* Two-label variant: Keep on the left, Change on the right; the knob sits on the side that is active */
.bm-switch.two .lbl { color: var(--bm-muted, #64748b); font-weight: 400; transition: color .15s; }
.bm-switch.two .lbl-keep { order: -1; color: var(--bm-ink, #0f172a); font-weight: 600; }
.bm-switch.two input:checked ~ .lbl-keep { color: var(--bm-muted, #64748b); font-weight: 400; }
.bm-switch.two input:checked ~ .lbl-change { color: var(--bm-blue, #0B6CFF); font-weight: 600; }
.bm-switch.two .track { background: #94a3b8; }
.bm-switch.two input:checked + .track { background: var(--bm-blue, #0B6CFF); }

/* Question Management: the search / sort / filter bar lines up with the title and the table below it */
[data-pane="questions"] > .tt-bar { padding: 0 10px; margin: 2px 0 10px; }