/* =====================================================================
IEM back-office — Material Design 3 theme (2026-09-16)
Shared by /admin, /subject, /subjectm, /seminar
Loads after bootstrap.min.css; AdminLTE.css is NOT loaded any more —
the legacy AdminLTE class names used by the pages (.box, .content-header,
.btn-app, …) are re-implemented here in MD3 terms so the 130+ page
files did not have to change.
===================================================================== */
/* ---------- 1. tokens (MD3 light scheme, seed #3b6fb6) ---------- */
:root {
--md-primary: #3b6fb6;
--md-on-primary: #ffffff;
--md-primary-container: #d8e3ff;
--md-on-primary-container: #0b1c3a;
--md-secondary: #565e71;
--md-on-secondary: #ffffff;
--md-secondary-container: #dae2f9;
--md-on-secondary-container: #131c2b;
--md-tertiary: #6b5778;
--md-tertiary-container: #f2daff;
--md-on-tertiary-container: #251431;
--md-error: #ba1a1a;
--md-on-error: #ffffff;
--md-error-container: #ffdad6;
--md-on-error-container: #410002;
--md-success: #1f7a45;
--md-success-container: #c9efd5;
--md-on-success-container: #05301a;
--md-warning: #7a4f00;
--md-warning-container: #ffe0a8;
--md-on-warning-container: #2a1a00;
--md-info: #00639a;
--md-info-container: #cde5ff;
--md-on-info-container: #001d33;
--md-surface: #f8f9fc;
--md-surface-dim: #d9dadf;
--md-surface-bright: #f8f9fc;
--md-surface-container-lowest: #ffffff;
--md-surface-container-low: #f2f3f8;
--md-surface-container: #eceef3;
--md-surface-container-high: #e6e8ee;
--md-surface-container-highest: #e0e2e8;
--md-on-surface: #1a1c1e;
--md-on-surface-variant: #44474e;
--md-outline: #74777f;
--md-outline-variant: #c4c6d0;
--md-inverse-surface: #2f3033;
--md-inverse-on-surface: #f1f0f4;
/* shape */
--md-shape-xs: 4px;
--md-shape-sm: 8px;
--md-shape-md: 12px;
--md-shape-lg: 16px;
--md-shape-xl: 28px;
--md-shape-full: 999px;
/* elevation (soft) */
--md-e1: 0 1px 2px rgba(26, 28, 30, .08), 0 1px 3px 1px rgba(26, 28, 30, .05);
--md-e2: 0 1px 2px rgba(26, 28, 30, .10), 0 2px 6px 2px rgba(26, 28, 30, .08);
--md-e3: 0 4px 8px 3px rgba(26, 28, 30, .10), 0 1px 3px rgba(26, 28, 30, .12);
/* state layers */
--md-hover: 8%;
--md-focus: 12%;
--md-press: 12%;
--md-drawer-w: 280px;
--md-top-h: 64px;
--md-font: "Roboto", "Noto Sans TC", -apple-system, "Segoe UI", "PingFang TC", "Microsoft JhengHei", sans-serif;
--md-motion: 180ms cubic-bezier(.2, 0, 0, 1);
}
/* ---------- 2. base ---------- */
html { -webkit-text-size-adjust: 100%; }
body.bo {
margin: 0;
color-scheme: light;
background: var(--md-surface);
color: var(--md-on-surface);
font-family: var(--md-font);
font-size: 14px;
line-height: 20px;
-webkit-font-smoothing: antialiased;
letter-spacing: .01em;
}
.bo *, .bo *::before, .bo *::after { box-sizing: border-box; }
.bo a { color: var(--md-primary); text-decoration: none; transition: color var(--md-motion); }
.bo a:hover, .bo a:focus { color: var(--md-on-primary-container); text-decoration: none; }
.bo h1, .bo h2, .bo h3, .bo h4, .bo h5, .bo h6 { font-family: inherit; color: var(--md-on-surface); font-weight: 500; margin: 0 0 8px; }
.bo h1 { font-size: 24px; line-height: 32px; }
.bo h2 { font-size: 22px; line-height: 28px; }
.bo h3 { font-size: 18px; line-height: 24px; }
.bo h4 { font-size: 16px; line-height: 24px; }
.bo h5, .bo h6 { font-size: 14px; line-height: 20px; }
.bo p { margin: 0 0 10px; }
.bo img { max-width: 100%; height: auto; }
.bo hr { border: 0; border-top: 1px solid var(--md-outline-variant); margin: 16px 0; }
.bo ::selection { background: var(--md-primary-container); }
.bo input:focus-visible, .bo textarea:focus-visible, .bo select:focus-visible { outline: 2px solid var(--md-primary); outline-offset: 2px; }
.bo button:focus, .bo button:focus-visible, .bo a:focus, .bo a:focus-visible, .bo .btn:focus, .bo .btn:focus-visible, .bo .btn:active:focus { outline: none !important; box-shadow: none; } /* no rings on buttons / links */
/* ---------- 3. app shell: navigation drawer + top app bar ---------- */
.bo-shell { display: flex; min-height: 100vh; }
.bo-side {
width: var(--md-drawer-w);
flex: 0 0 var(--md-drawer-w);
background: var(--md-surface-container-low);
position: sticky; top: 0; height: 100vh;
display: flex; flex-direction: column;
overflow: hidden;
z-index: 40;
}
.bo-brand {
display: flex; align-items: center;
height: var(--md-top-h);
padding: 0 16px 0 28px;
color: var(--md-on-surface);
flex: 0 0 auto;
}
.bo-brand-text { font-size: 17px; line-height: 24px; font-weight: 500; letter-spacing: .02em; color: var(--md-on-surface); white-space: nowrap; }
.bo-brand:hover { color: var(--md-on-surface); }
.bo-menu { flex: 1 1 auto; overflow-y: auto; padding: 6px 14px 20px; scrollbar-width: thin; display: flex; flex-direction: column; gap: 4px; }
.bo-menu::-webkit-scrollbar { width: 6px; }
.bo-menu::-webkit-scrollbar-thumb { background: var(--md-outline-variant); border-radius: 3px; }
.bo-menu-label {
display: block; padding: 22px 16px 8px;
font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
color: var(--md-on-surface-variant);
}
.bo-item, .bo-group-btn {
display: flex; align-items: center; gap: 12px;
width: 100%; min-height: 48px; padding: 0 16px 0 16px;
border: 0; background: transparent; text-align: left;
border-radius: var(--md-shape-full);
color: var(--md-on-surface-variant);
font: inherit; font-weight: 500; letter-spacing: .01em;
cursor: pointer;
transition: background-color var(--md-motion), color var(--md-motion);
position: relative;
}
.bo-item > i, .bo-group-btn > i:first-child { width: 22px; text-align: center; font-size: 17px; color: var(--md-on-surface-variant); flex: 0 0 22px; }
.bo-item > span, .bo-group-btn > span { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bo .bo-item { color: var(--md-on-surface-variant); }
.bo .bo-item:hover, .bo-group-btn:hover { background: color-mix(in srgb, var(--md-on-surface) var(--md-hover), transparent); color: var(--md-on-surface); }
.bo-menu .bo-group-btn:focus, .bo-menu .bo-item:focus { outline: none; } /* drawer items never show a focus ring (mouse or keyboard) */
.bo .bo-item.is-active { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.bo-item.is-active > i { color: var(--md-on-secondary-container); }
.bo-group.is-active > .bo-group-btn { color: var(--md-on-surface); }
.bo-group.is-active > .bo-group-btn > i:first-child { color: var(--md-primary); }
.bo-caret { font-size: 14px !important; width: auto !important; flex: 0 0 auto !important; transition: transform var(--md-motion); }
.bo-group.is-open > .bo-group-btn .bo-caret { transform: rotate(180deg); }
.bo-sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 280ms cubic-bezier(.2, 0, 0, 1); }
.bo-sub-in { min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 4px; padding: 0; opacity: 0; transform: translateY(-4px); transition: opacity 200ms, transform 240ms cubic-bezier(.2, 0, 0, 1), padding 280ms; }
.bo-group.is-open > .bo-sub { grid-template-rows: 1fr; }
.bo-group.is-open > .bo-sub > .bo-sub-in { opacity: 1; transform: none; padding: 4px 0 8px; }
.bo-group { display: flex; flex-direction: column; }
.bo-sub .bo-item { min-height: 42px; padding-left: 52px; font-weight: 400; font-size: 13.5px; }
.bo-sub .bo-sub .bo-item { padding-left: 66px; }
.bo-sub .bo-group-btn { min-height: 40px; padding-left: 50px; font-weight: 400; font-size: 13.5px; }
.bo-sub .bo-group-btn > i:first-child { display: none; }
.bo-side-foot { padding: 10px 24px 14px; font-size: 11.5px; color: var(--md-on-surface-variant); border-top: 1px solid var(--md-outline-variant); }
.bo-side-foot:empty { display: none; }
.bo-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.bo-top {
height: var(--md-top-h);
display: flex; align-items: center; gap: 8px;
padding: 0 20px 0 12px;
background: var(--md-surface);
position: sticky; top: 0; z-index: 30;
transition: background-color var(--md-motion), box-shadow var(--md-motion);
}
.bo-top.is-scrolled { background: var(--md-surface-container); }
.bo-burger { display: none; width: 44px; height: 44px; border: 0; background: transparent; border-radius: 50%; cursor: pointer; align-items: center; justify-content: center; flex-direction: column; gap: 5px; }
.bo-burger span { display: block; width: 20px; height: 2px; background: var(--md-on-surface); border-radius: 1px; }
.bo-burger:hover { background: color-mix(in srgb, var(--md-on-surface) var(--md-hover), transparent); }
.bo-top-title { font-size: 22px; line-height: 28px; font-weight: 400; color: var(--md-on-surface); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 8px; }
.bo-top-crumb { font-size: 13px; color: var(--md-on-surface-variant); padding-left: 10px; white-space: nowrap; }
.bo-top-crumb i { margin: 0 8px; font-size: 11px; opacity: .7; }
.bo-top-right { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.bo .bo-top-link {
display: inline-flex; align-items: center; gap: 8px;
height: 40px; padding: 0 16px; border-radius: var(--md-shape-full);
color: var(--md-primary); font-weight: 500; font-size: 14px;
transition: background-color var(--md-motion);
}
.bo .bo-top-link:hover { background: color-mix(in srgb, var(--md-primary) var(--md-hover), transparent); color: var(--md-primary); }
.bo-top-link i { font-size: 15px; }
.bo-user { position: relative; margin-left: 4px; }
.bo-user-btn {
display: inline-flex; align-items: center; gap: 10px;
height: 44px; padding: 0 12px 0 4px; border: 0; background: transparent;
border-radius: var(--md-shape-full); cursor: pointer; font: inherit; color: var(--md-on-surface);
transition: background-color var(--md-motion);
}
.bo-user-btn:hover, .bo-user.is-open .bo-user-btn { background: color-mix(in srgb, var(--md-on-surface) var(--md-hover), transparent); }
.bo-avatar {
width: 36px; height: 36px; border-radius: 50%;
background: var(--md-primary-container); color: var(--md-on-primary-container);
display: inline-flex; align-items: center; justify-content: center;
font-weight: 500; font-size: 15px;
}
.bo-user-name { font-weight: 500; max-width: 140px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bo-user-menu {
position: absolute; right: 0; top: calc(100% + 6px); min-width: 200px;
background: var(--md-surface-container); border-radius: var(--md-shape-xs);
box-shadow: var(--md-e2); padding: 8px 0; display: none; z-index: 50;
}
.bo-user.is-open .bo-user-menu { display: block; }
.bo .bo-user-menu a { display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 16px; color: var(--md-on-surface); font-size: 14px; }
.bo-user-menu a i { width: 20px; text-align: center; color: var(--md-on-surface-variant); }
.bo .bo-user-menu a:hover { background: color-mix(in srgb, var(--md-on-surface) var(--md-hover), transparent); color: var(--md-on-surface); }
.bo-user-menu .bo-user-head { padding: 6px 16px 10px; border-bottom: 1px solid var(--md-outline-variant); margin-bottom: 6px; }
.bo-user-head strong { display: block; font-weight: 500; }
.bo-user-head small { color: var(--md-on-surface-variant); }
.bo-content { flex: 1 1 auto; padding: 8px 24px 32px; }
.bo-foot {
display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
padding: 14px 24px; font-size: 12.5px; color: var(--md-on-surface-variant);
border-top: 1px solid var(--md-outline-variant);
}
.bo-version { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: var(--md-shape-sm); background: var(--md-surface-container-high); color: var(--md-on-surface-variant); font-weight: 500; }
.bo-version:hover { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.bo-backdrop { display: none; position: fixed; inset: 0; background: rgba(26, 28, 30, .32); z-index: 39; }
@media (max-width: 1023px) {
.bo-side { position: fixed; left: 0; top: 0; transform: translateX(-100%); transition: transform var(--md-motion); box-shadow: none; border-radius: 0 var(--md-shape-lg) var(--md-shape-lg) 0; }
.bo.is-drawer-open .bo-side { transform: none; box-shadow: var(--md-e3); }
.bo.is-drawer-open .bo-backdrop { display: block; }
.bo-burger { display: inline-flex; }
.bo-top { padding-left: 8px; }
.bo-top-title { font-size: 18px; }
.bo-top-crumb { display: none; }
.bo-content { padding: 4px 16px 28px; }
.bo-top-link span { display: none; }
.bo-top-link { padding: 0; width: 40px; justify-content: center; }
.bo-user-name { display: none; }
}
/* ---------- 4. legacy page skeleton (.content-wrapper / .content-header) ---------- */
.bo .content-wrapper { margin: 0; padding: 0; background: transparent; min-height: 0; }
.bo .content-header { padding: 8px 0 16px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.bo .content-header > h1 { font-size: 24px; line-height: 32px; font-weight: 400; margin: 0; color: var(--md-on-surface); }
.bo .content-header > h1 small { font-size: 14px; color: var(--md-on-surface-variant); margin-left: 8px; }
.bo .content-header .breadcrumb { display: none; } /* placeholder "Home / Forms / Editors" crumbs in every page */
.bo .content { padding: 0; }
.bo section.content > .row { margin-left: -8px; margin-right: -8px; }
.bo section.content > .row > [class*="col-"] { padding-left: 8px; padding-right: 8px; }
/* ---------- 5. cards (.box / .panel / .nav-tabs-custom) ---------- */
.bo .box, .bo .panel, .bo .nav-tabs-custom {
position: relative;
background: var(--md-surface-container-lowest);
border: 1px solid var(--md-outline-variant);
border-radius: var(--md-shape-lg);
box-shadow: none;
margin-bottom: 20px;
overflow: visible;
}
.bo .box.box-solid, .bo .box.box-info, .bo .box.box-primary, .bo .box.box-default, .bo .box.box-success, .bo .box.box-warning, .bo .box.box-danger { border-top-color: var(--md-outline-variant); border-top-width: 1px; }
.bo .box-header, .bo .panel-heading {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
padding: 16px 20px 12px;
background: transparent; border: 0; color: var(--md-on-surface);
}
.bo .box-header.with-border, .bo .panel-heading { border-bottom: 1px solid var(--md-outline-variant); padding-bottom: 14px; }
.bo .box-header > .fa, .bo .box-header > .ion { color: var(--md-on-surface-variant); }
.bo .box-title, .bo .panel-title { font-size: 16px; line-height: 24px; font-weight: 500; margin: 0; color: var(--md-on-surface); }
.bo .box-header .box-tools, .bo .box-header .pull-right { margin-left: auto; position: static; display: flex; align-items: center; gap: 6px; }
.bo .btn-box-tool { width: 36px; height: 36px; border-radius: 50%; border: 0; background: transparent; color: var(--md-on-surface-variant); display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.bo .btn-box-tool:hover { background: color-mix(in srgb, var(--md-on-surface) var(--md-hover), transparent); }
.bo .box-body, .bo .panel-body { padding: 16px 20px 20px; }
.bo .box-body.pad { padding: 16px 20px 20px; }
.bo .box-body.no-padding { padding: 0; }
.bo .box-footer, .bo .panel-footer { padding: 12px 20px 16px; border-top: 1px solid var(--md-outline-variant); background: transparent; border-radius: 0 0 var(--md-shape-lg) var(--md-shape-lg); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.bo .box-footer:empty { display: none; }
.bo .box-body > .col-md-12, .bo .box-body > .row > .col-md-12 { padding-left: 0; padding-right: 0; }
.bo .box-body > .row { margin-left: -8px; margin-right: -8px; }
.bo .box-body > .row > [class*="col-"] { padding-left: 8px; padding-right: 8px; }
.bo .box.collapsed-box .box-body, .bo .box.collapsed-box .box-footer { display: none; }
.bo .panel-info > .panel-heading, .bo .panel-danger > .panel-heading, .bo .panel-default > .panel-heading { background: transparent; color: var(--md-on-surface); }
.bo .panel-danger { border-color: var(--md-error-container); }
.bo .panel-danger > .panel-heading { color: var(--md-error); }
/* ---------- 6. buttons (MD3 common buttons) ---------- */
.bo .btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
height: 40px; padding: 0 24px;
border-radius: var(--md-shape-full) !important;
border: 1px solid transparent;
font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: .01em;
background: var(--md-surface-container-highest); color: var(--md-on-surface);
box-shadow: none; text-shadow: none; white-space: nowrap;
transition: background-color var(--md-motion), color var(--md-motion), box-shadow var(--md-motion), border-color var(--md-motion);
cursor: pointer; vertical-align: middle;
}
.bo .btn:hover, .bo .btn:focus { color: var(--md-on-surface); background: color-mix(in srgb, var(--md-on-surface) var(--md-hover), var(--md-surface-container-highest)); outline: none; }
.bo .btn:active, .bo .btn.active { box-shadow: none; }
.bo .btn .fa, .bo .btn .glyphicon { font-size: 16px; }
.bo .btn.disabled, .bo .btn[disabled] { opacity: .38; cursor: default; }
/* filled */
.bo .btn-primary { background: var(--md-primary); color: var(--md-on-primary); }
.bo .btn-primary:hover, .bo .btn-primary:focus, .bo .btn-primary:active, .bo .btn-primary.active, .bo .btn-primary:active:focus { background: color-mix(in srgb, var(--md-on-primary) var(--md-hover), var(--md-primary)); color: var(--md-on-primary); box-shadow: var(--md-e1); }
.bo .btn-danger { background: var(--md-error); color: var(--md-on-error); }
.bo .btn-danger:hover, .bo .btn-danger:focus, .bo .btn-danger:active { background: color-mix(in srgb, #fff var(--md-hover), var(--md-error)); color: var(--md-on-error); }
.bo .btn-success { background: var(--md-success); color: #fff; }
.bo .btn-success:hover, .bo .btn-success:focus, .bo .btn-success:active { background: color-mix(in srgb, #fff var(--md-hover), var(--md-success)); color: #fff; }
/* tonal */
.bo .btn-info { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.bo .btn-info:hover, .bo .btn-info:focus, .bo .btn-info:active { background: color-mix(in srgb, var(--md-on-secondary-container) var(--md-hover), var(--md-secondary-container)); color: var(--md-on-secondary-container); }
.bo .btn-warning { background: var(--md-warning-container); color: var(--md-on-warning-container); }
.bo .btn-warning:hover, .bo .btn-warning:focus, .bo .btn-warning:active { background: color-mix(in srgb, var(--md-on-warning-container) var(--md-hover), var(--md-warning-container)); color: var(--md-on-warning-container); }
/* outlined */
.bo .btn-default, .bo .btn-secondary, .bo .btn-link {
background: transparent; border-color: var(--md-outline); color: var(--md-primary);
}
.bo .btn-default:hover, .bo .btn-default:focus, .bo .btn-default:active, .bo .btn-secondary:hover, .bo .btn-secondary:focus, .bo .btn-link:hover {
background: color-mix(in srgb, var(--md-primary) var(--md-hover), transparent); color: var(--md-primary); border-color: var(--md-outline);
}
.bo .btn-link { border-color: transparent; text-decoration: none; }
/* sizes */
.bo .btn-xs, .bo .btn-sm, .bo .btn-group-xs > .btn, .bo .btn-group-sm > .btn { height: 32px; padding: 0 14px; font-size: 13px; }
.bo .btn-lg { height: 48px; padding: 0 28px; font-size: 15px; }
.bo .btn-block { display: flex; width: 100%; }
.bo .btn-block + .btn-block { margin-top: 8px; }
.bo .btn-flat { border-radius: var(--md-shape-full) !important; }
/* AdminLTE "app" buttons -> tonal buttons with icon */
.bo .btn-app {
min-width: 0; height: 40px; padding: 0 20px 0 16px; margin: 0 8px 8px 0;
background: var(--md-secondary-container); color: var(--md-on-secondary-container);
border: 0; flex-direction: row; font-size: 14px; line-height: 20px; position: static; text-align: left;
}
.bo .btn-app > .fa, .bo .btn-app > .glyphicon, .bo .btn-app > .ion { display: inline; font-size: 16px; }
.bo .btn-app:hover { background: color-mix(in srgb, var(--md-on-secondary-container) var(--md-hover), var(--md-secondary-container)); color: var(--md-on-secondary-container); }
.bo .btn-app > .badge { position: static; margin-left: 6px; }
/* button groups / rows of buttons inside tables */
.bo .btn + .btn { margin-left: 6px; }
.bo td .btn, .bo th .btn { height: 34px; padding: 0 16px; font-size: 13px; }
.bo td .btn + .btn { margin-left: 4px; }
.bo .btn-group > .btn { border-radius: var(--md-shape-full) !important; margin-left: 0 !important; }
.bo .btn-group > .btn + .btn { margin-left: 4px !important; }
/* ---------- 7. forms (MD3 outlined text fields) ---------- */
.bo label, .bo .control-label, .bo .col-form-label {
font-size: 13px; line-height: 18px; font-weight: 500; color: var(--md-on-surface-variant); margin-bottom: 6px; padding-top: 0;
}
.bo .form-horizontal .control-label, .bo .form-horizontal .col-form-label { padding-top: 12px; text-align: left; }
.bo .form-group { margin-bottom: 18px; }
.bo .form-control {
height: 44px; padding: 0 14px;
background: var(--md-surface-container-lowest);
border: 1px solid var(--md-outline);
border-radius: var(--md-shape-sm);
color: var(--md-on-surface); font-size: 14px; line-height: 20px;
box-shadow: none;
transition: border-color var(--md-motion), box-shadow var(--md-motion), background-color var(--md-motion);
}
.bo .form-control::placeholder { color: var(--md-outline); opacity: 1; }
.bo .form-control:hover { border-color: var(--md-on-surface); }
.bo .form-control:focus { border-color: var(--md-primary); box-shadow: 0 0 0 1px var(--md-primary) inset; outline: none; }
.bo .form-control[disabled], .bo .form-control[readonly], .bo fieldset[disabled] .form-control { background: var(--md-surface-container); border-color: var(--md-outline-variant); color: var(--md-on-surface-variant); opacity: 1; }
.bo textarea.form-control { height: auto; min-height: 120px; padding: 12px 14px; line-height: 22px; resize: vertical; }
.bo select.form-control {
appearance: none; -webkit-appearance: none;
padding-right: 40px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 10px center;
}
.bo select[multiple].form-control { height: auto; padding: 8px; background-image: none; }
.bo input[type="file"].form-control, .bo input[type="file"] { height: auto; padding: 9px 12px; line-height: 22px; font-size: 13px; }
.bo input[type="file"]::file-selector-button {
height: 32px; margin-right: 12px; padding: 0 14px; border: 1px solid var(--md-outline); border-radius: var(--md-shape-full);
background: transparent; color: var(--md-primary); font: inherit; font-weight: 500; font-size: 13px; cursor: pointer;
}
.bo input[type="file"]::file-selector-button:hover { background: color-mix(in srgb, var(--md-primary) var(--md-hover), transparent); }
.bo .input-sm, .bo .form-control.input-sm { height: 36px; font-size: 13px; }
.bo .input-group { display: flex; align-items: stretch; width: 100%; }
/* every piece keeps its own 1px outline; neighbours overlap by 1px; only the two ends are rounded */
.bo .input-group > .form-control, .bo .input-group > .input-group-addon, .bo .input-group > .input-group-btn > .btn { border-radius: 0 !important; margin-left: -1px; position: relative; }
.bo .input-group > :first-child, .bo .input-group > .input-group-btn:first-child > .btn { margin-left: 0; border-top-left-radius: var(--md-shape-sm) !important; border-bottom-left-radius: var(--md-shape-sm) !important; }
.bo .input-group > :last-child, .bo .input-group > .input-group-btn:last-child > .btn { border-top-right-radius: var(--md-shape-sm) !important; border-bottom-right-radius: var(--md-shape-sm) !important; }
.bo .input-group .form-control { flex: 1 1 auto; width: auto; z-index: 1; }
.bo .input-group .form-control:focus { z-index: 2; }
.bo .input-group-addon {
display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 0 12px;
background: var(--md-surface-container); border: 1px solid var(--md-outline);
color: var(--md-on-surface-variant); font-size: 14px; line-height: 1;
}
.bo .input-group-btn { display: flex; }
.bo .input-group-btn > .btn { height: 44px; }
.bo .input-group-sm > .input-group-btn > .btn { height: 36px; }
.bo .has-feedback .form-control { padding-right: 42px; }
.bo .form-control-feedback { height: 44px; line-height: 44px; width: 42px; color: var(--md-on-surface-variant); }
.bo .help-block { color: var(--md-on-surface-variant); font-size: 12.5px; margin: 6px 0 0; }
.bo .has-error .form-control { border-color: var(--md-error); }
.bo .has-error .control-label, .bo .has-error .help-block { color: var(--md-error); }
/* checkbox / radio */
.bo .checkbox, .bo .radio { margin: 8px 0; }
.bo .checkbox label, .bo .radio label { font-weight: 400; color: var(--md-on-surface); font-size: 14px; padding-left: 28px; min-height: 22px; line-height: 22px; }
.bo input[type="checkbox"], .bo input[type="radio"] {
appearance: none; -webkit-appearance: none;
width: 18px; height: 18px; margin: 0; vertical-align: -4px;
border: 2px solid var(--md-on-surface-variant); border-radius: 2px; background: var(--md-surface-container-lowest); cursor: pointer;
display: inline-block; position: relative; transition: background-color var(--md-motion), border-color var(--md-motion);
}
.bo .checkbox input[type="checkbox"], .bo .radio input[type="radio"], .bo .checkbox-inline input[type="checkbox"], .bo .radio-inline input[type="radio"] { position: absolute; margin-left: -28px; margin-top: 2px; }
.bo input[type="radio"] { border-radius: 50%; }
.bo input[type="checkbox"]:checked, .bo input[type="radio"]:checked { border-color: var(--md-primary); background: var(--md-primary); }
.bo input[type="checkbox"]:checked::after { content: ""; position: absolute; left: 4px; top: 0; width: 6px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.bo input[type="radio"]:checked { background: var(--md-surface-container-lowest); }
.bo input[type="radio"]:checked::after { content: ""; position: absolute; left: 3px; top: 3px; width: 8px; height: 8px; border-radius: 50%; background: var(--md-primary); }
.bo input[type="checkbox"]:focus-visible, .bo input[type="radio"]:focus-visible { outline: 2px solid var(--md-primary); outline-offset: 2px; }
.bo .checkbox-inline, .bo .radio-inline { padding-left: 28px; font-weight: 400; }
/* plain (non .form-control) inputs some legacy pages still use */
.bo input[type="text"]:not(.form-control):not([class*="wysihtml5"]), .bo input[type="password"]:not(.form-control), .bo input[type="number"]:not(.form-control), .bo input[type="date"]:not(.form-control), .bo input[type="email"]:not(.form-control), .bo textarea:not(.form-control):not(.cke_source) {
height: 40px; padding: 0 12px; border: 1px solid var(--md-outline); border-radius: var(--md-shape-sm); background: var(--md-surface-container-lowest); font: inherit; color: var(--md-on-surface);
}
.bo textarea:not(.form-control):not(.cke_source) { height: auto; min-height: 100px; padding: 10px 12px; }
.bo select:not(.form-control) { height: 40px; padding: 0 32px 0 12px; border: 1px solid var(--md-outline); border-radius: var(--md-shape-sm); background: var(--md-surface-container-lowest); font: inherit; color: var(--md-on-surface); }
.bo input[type="submit"]:not(.btn), .bo input[type="button"]:not(.btn), .bo button:not(.btn):not(.bo-group-btn):not(.bo-burger):not(.bo-user-btn):not(.btn-box-tool):not(.close):not(.bo-eye):not([class*="wysihtml5"]):not([class*="cke_"]):not(.bo-btn):not(.copyButton):not(.bo-dialog-btn):not(.bo-snackbar-close):not(.bo-theme):not(.bo-eye):not(.md-field-trail):not(.bo-icon-btn):not([class*="tox-"]):not([class*="mce-"]):not([class*="ui-"]):not(.select2-selection__choice__remove) {
display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 24px; border: 0; border-radius: var(--md-shape-full);
background: var(--md-primary); color: #fff; font: inherit; font-weight: 500; cursor: pointer;
}
/* ---------- 8. tables (MD3 data table) ---------- */
.bo .table { width: 100%; margin-bottom: 0; background: transparent; border-collapse: separate; border-spacing: 0; }
.bo .table > thead > tr > th, .bo .table > thead > th, .bo .table > thead th, .bo .table thead > th {
padding: 12px 16px; border: 0; border-bottom: 1px solid var(--md-outline-variant);
font-size: 13px; line-height: 18px; font-weight: 500; color: var(--md-on-surface-variant);
vertical-align: middle; text-align: left; white-space: nowrap; background: transparent;
}
.bo .table > tbody > tr > td, .bo .table > tbody > tr > th, .bo .table > tfoot > tr > td {
padding: 12px 16px; border: 0; border-bottom: 1px solid var(--md-outline-variant);
vertical-align: middle; font-size: 14px; line-height: 20px; color: var(--md-on-surface);
}
.bo .table > tbody > tr:last-child > td { border-bottom: 0; }
.bo .table-bordered, .bo .table-bordered > thead > tr > th, .bo .table-bordered > tbody > tr > td, .bo .table-bordered > tbody > tr > th, .bo .table-bordered > tfoot > tr > td { border-left: 0; border-right: 0; border-top: 0; }
.bo .table-bordered { border: 1px solid var(--md-outline-variant); border-radius: var(--md-shape-md); overflow: hidden; }
.bo .table-striped > tbody > tr:nth-of-type(odd) { background: transparent; }
.bo .table-hover > tbody > tr:hover, .bo .table > tbody > tr:hover { background: color-mix(in srgb, var(--md-on-surface) 4%, transparent); }
.bo .table.bg-info, .bo .table .bg-info, .bo .bg-info { background: transparent !important; color: inherit !important; }
.bo .table a { font-weight: 500; }
.bo .table td .fa-files-o, .bo .table td .fa-clone, .bo .table td .fa-copy { color: var(--md-on-surface-variant); }
.bo table:not(.table) { width: 100%; border-collapse: collapse; }
.bo table:not(.table) th, .bo table:not(.table) td { padding: 10px 12px; border-bottom: 1px solid var(--md-outline-variant); text-align: left; vertical-align: middle; }
.bo table:not(.table) th { font-size: 13px; font-weight: 500; color: var(--md-on-surface-variant); }
.bo .table-responsive { border: 0; margin: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.bo .box-body > .table-responsive, .bo .box-body > table.table { margin: -4px 0 0; }
.bo .table .btn-xs { height: 32px; }
/* quick-copy link button (dir pages): circular icon button */
.bo .table td a.btn-circle, .bo .table td .btn-circle, .bo .btn.btn-circle { width: 36px; height: 36px; padding: 0; border-radius: 50% !important; background: transparent; border: 0; color: var(--md-on-surface-variant); }
.bo .btn.btn-circle:hover { background: color-mix(in srgb, var(--md-on-surface) var(--md-hover), transparent); }
/* ---------- 9. feedback: alerts / callouts / labels / badges / progress ---------- */
.bo .alert {
border: 0; border-radius: var(--md-shape-md); padding: 14px 18px; margin-bottom: 16px;
background: var(--md-surface-container); color: var(--md-on-surface); box-shadow: none;
}
.bo .alert h4 { font-size: 15px; font-weight: 500; margin: 0 0 4px; display: flex; align-items: center; gap: 8px; }
.bo .alert h4 .icon { font-size: 14px; }
.bo .alert .close { color: inherit; opacity: .6; text-shadow: none; font-size: 20px; }
.bo .alert-info, .bo .callout-info { background: var(--md-info-container); color: var(--md-on-info-container); }
.bo .alert-success, .bo .callout-success { background: var(--md-success-container); color: var(--md-on-success-container); }
.bo .alert-warning, .bo .callout-warning { background: var(--md-warning-container); color: var(--md-on-warning-container); }
.bo .alert-danger, .bo .callout-danger { background: var(--md-error-container); color: var(--md-on-error-container); }
.bo .callout { border: 0; border-left: 4px solid var(--md-primary); border-radius: var(--md-shape-sm); padding: 12px 16px; margin-bottom: 16px; background: var(--md-surface-container); }
.bo .label {
display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--md-shape-sm);
font-size: 12px; font-weight: 500; letter-spacing: .02em; background: var(--md-secondary-container); color: var(--md-on-secondary-container);
}
.bo .label-primary { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.bo .label-info { background: var(--md-info-container); color: var(--md-on-info-container); }
.bo .label-success { background: var(--md-success-container); color: var(--md-on-success-container); }
.bo .label-warning { background: var(--md-warning-container); color: var(--md-on-warning-container); }
.bo .label-danger { background: var(--md-error-container); color: var(--md-on-error-container); }
.bo .label-default { background: var(--md-surface-container-highest); color: var(--md-on-surface-variant); }
.bo .badge { background: var(--md-primary); color: #fff; border-radius: var(--md-shape-full); font-weight: 500; padding: 3px 8px; }
.bo .progress { height: 8px; border-radius: var(--md-shape-full); background: var(--md-surface-container-highest); box-shadow: none; margin-bottom: 12px; overflow: hidden; }
.bo .progress-bar { background: var(--md-primary); box-shadow: none; }
.bo .progress-bar-striped, .bo .progress-bar-animated { background-image: none; }
.bo .progress-bar-success { background: var(--md-success); }
.bo .progress-bar-danger { background: var(--md-error); }
.bo .progress-bar-warning { background: var(--md-warning); }
.bo .text-danger { color: var(--md-error) !important; }
.bo .text-muted { color: var(--md-on-surface-variant) !important; }
.bo .text-primary { color: var(--md-primary) !important; }
/* ---------- 10. dialogs / menus / tabs / pagination / misc bootstrap ---------- */
.bo .modal-content { border: 0; border-radius: var(--md-shape-xl); box-shadow: var(--md-e3); background: var(--md-surface-container-high); }
.bo .modal-header { border: 0; padding: 24px 24px 8px; }
.bo .modal-title { font-size: 22px; line-height: 28px; font-weight: 400; }
.bo .modal-header .close { margin: -4px -4px 0 0; width: 40px; height: 40px; border-radius: 50%; opacity: .7; text-shadow: none; font-size: 22px; }
.bo .modal-header .close:hover { opacity: 1; background: color-mix(in srgb, var(--md-on-surface) var(--md-hover), transparent); }
.bo .modal-body { padding: 8px 24px 16px; color: var(--md-on-surface-variant); }
.bo .modal-body .form-control { background: var(--md-surface-container-lowest); }
.bo .modal-footer { border: 0; padding: 8px 24px 24px; display: flex; justify-content: flex-end; gap: 8px; }
.bo .modal-footer .btn + .btn { margin-left: 0; }
.bo .modal-backdrop { background: #1a1c1e; }
.bo .modal-backdrop.in { opacity: .32; }
.bo .dropdown-menu { border: 0; border-radius: var(--md-shape-xs); box-shadow: var(--md-e2); background: var(--md-surface-container); padding: 8px 0; }
.bo .dropdown-menu > li > a { padding: 0 16px; height: 44px; display: flex; align-items: center; gap: 12px; color: var(--md-on-surface); }
.bo .dropdown-menu > li > a:hover, .bo .dropdown-menu > li > a:focus { background: color-mix(in srgb, var(--md-on-surface) var(--md-hover), transparent); color: var(--md-on-surface); }
.bo .nav-tabs { border-bottom: 1px solid var(--md-outline-variant); display: flex; gap: 4px; }
.bo .nav-tabs > li { float: none; margin: 0; }
.bo .nav-tabs > li > a { border: 0 !important; border-radius: 0; margin: 0; padding: 12px 18px; height: 48px; color: var(--md-on-surface-variant); font-weight: 500; position: relative; display: flex; align-items: center; }
.bo .nav-tabs > li > a:hover { background: color-mix(in srgb, var(--md-on-surface) var(--md-hover), transparent); color: var(--md-on-surface); }
.bo .nav-tabs > li.active > a, .bo .nav-tabs > li.active > a:hover, .bo .nav-tabs > li.active > a:focus { color: var(--md-primary); background: transparent; }
.bo .nav-tabs > li.active > a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--md-primary); }
.bo .nav-tabs-custom > .nav-tabs { margin: 0; padding: 0 12px; }
.bo .nav-tabs-custom > .tab-content { padding: 16px 20px 20px; }
.bo .pagination { display: inline-flex; gap: 4px; margin: 12px 0; }
.bo .pagination > li > a, .bo .pagination > li > span { border: 0; border-radius: var(--md-shape-full) !important; min-width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 0 10px; color: var(--md-on-surface-variant); background: transparent; margin: 0; }
.bo .pagination > li > a:hover { background: color-mix(in srgb, var(--md-on-surface) var(--md-hover), transparent); color: var(--md-on-surface); }
.bo .pagination > .active > a, .bo .pagination > .active > a:hover, .bo .pagination > .active > span { background: var(--md-primary); color: #fff; }
.bo .well { background: var(--md-surface-container); border: 0; border-radius: var(--md-shape-md); box-shadow: none; }
.bo .list-group-item { border-color: var(--md-outline-variant); }
.bo .list-group-item:first-child { border-top-left-radius: var(--md-shape-md); border-top-right-radius: var(--md-shape-md); }
.bo .list-group-item:last-child { border-bottom-left-radius: var(--md-shape-md); border-bottom-right-radius: var(--md-shape-md); }
.bo .img-circle { border-radius: 50%; }
.bo .profile-user-img { width: 120px; height: 120px; object-fit: cover; border-radius: 50%; margin: 0 auto 12px; display: block; border: 3px solid var(--md-primary-container); }
.bo .box-profile .profile-username { text-align: center; font-size: 18px; font-weight: 500; margin: 0; }
.bo .close { text-shadow: none; }
/* ---------- 11. third-party editors / pickers (light touch) ---------- */
.bo .daterangepicker { border: 0 !important; border-radius: var(--md-shape-lg); box-shadow: var(--md-e3); font-family: inherit; }
.bo .daterangepicker .calendar-table { border: 0; border-radius: var(--md-shape-md); }
.bo .daterangepicker td.active, .bo .daterangepicker td.active:hover { background: var(--md-primary); border-radius: 50%; }
.bo .daterangepicker td.in-range { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.bo .daterangepicker td.available:hover, .bo .daterangepicker th.available:hover { background: var(--md-surface-container-high); border-radius: 50%; }
.bo .daterangepicker .drp-buttons .btn { height: 36px; }
.bo .datepicker { border-radius: var(--md-shape-lg); box-shadow: var(--md-e3); border: 0; font-family: inherit; padding: 8px; }
.bo .datepicker table tr td.active, .bo .datepicker table tr td.active:hover, .bo .datepicker table tr td.active.active { background: var(--md-primary) !important; background-image: none; border-radius: 50%; text-shadow: none; }
.bo .datepicker table tr td, .bo .datepicker table tr th { border-radius: 50%; width: 34px; height: 34px; }
.bo .wysihtml5-toolbar { padding: 8px 8px 4px; border: 1px solid var(--md-outline); border-bottom: 0; border-radius: var(--md-shape-sm) var(--md-shape-sm) 0 0; background: var(--md-surface-container-low); margin: 0; }
.bo .wysihtml5-toolbar > li { margin: 0 4px 4px 0; }
.bo .wysihtml5-toolbar .btn { height: 32px; padding: 0 12px; background: transparent; border: 1px solid transparent; color: var(--md-on-surface-variant); }
.bo .wysihtml5-toolbar .btn:hover, .bo .wysihtml5-toolbar .btn.wysihtml5-command-active { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.bo .wysihtml5-toolbar + .wysihtml5-sandbox, .bo .wysihtml5-sandbox { border: 1px solid var(--md-outline) !important; border-radius: 0 0 var(--md-shape-sm) var(--md-shape-sm) !important; width: 100% !important; }
.bo .cke_chrome { border: 1px solid var(--md-outline) !important; border-radius: var(--md-shape-sm) !important; overflow: hidden; box-shadow: none !important; }
.bo .cke_top, .bo .cke_bottom { background: var(--md-surface-container-low) !important; border-color: var(--md-outline-variant) !important; box-shadow: none !important; }
.bo .cke_button:hover, .bo .cke_button_on { background: var(--md-secondary-container) !important; border-color: transparent !important; box-shadow: none !important; }
/* ---------- 12. legacy inline-style neutralisers (old pages hard-code colours) ---------- */
.bo [style*="background-color: black"], .bo [style*="background-color:black"], .bo [style*="background: black"], .bo [style*="background:black"] {
background: var(--md-surface-container-high) !important; color: var(--md-on-surface) !important; border-radius: var(--md-shape-md);
}
.bo [style*="background-color: black"] *, .bo [style*="background-color:black"] * { color: var(--md-on-surface) !important; }
.bo [style*="background-color:#ccc"], .bo [style*="background-color: #ccc"] { background: var(--md-surface-container) !important; border-radius: var(--md-shape-md) !important; }
.bo [style*="#66CC99 dashed"], .bo [style*="#66cc99 dashed"] { border: 1px dashed var(--md-outline) !important; border-radius: var(--md-shape-md); padding: 14px !important; }
.bo [style*="color: white; text-align:center"] { color: var(--md-on-surface) !important; }
.bo [style*="color:red"], .bo [style*="color: red"] { color: var(--md-error) !important; }
.bo font[color], .bo font[size] { font-size: inherit; color: inherit; }
.bo .fa-dashboard::before { content: "\f0e4"; }
/* ---------- 13. dashboard (admin/index.php, subject/index.php) ---------- */
.bo-hero { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 8px 0 20px; }
.bo-hero h1 { font-size: 28px; line-height: 36px; font-weight: 400; margin: 0 0 4px; }
.bo-hero p { margin: 0; color: var(--md-on-surface-variant); }
.bo-hero-date { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: var(--md-shape-full); background: var(--md-surface-container); color: var(--md-on-surface-variant); font-size: 13px; }
.bo-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.bo-span-3 { grid-column: span 3; } .bo-span-4 { grid-column: span 4; } .bo-span-6 { grid-column: span 6; } .bo-span-8 { grid-column: span 8; } .bo-span-12 { grid-column: span 12; }
@media (max-width: 1279px) { .bo-span-3 { grid-column: span 6; } .bo-span-4 { grid-column: span 6; } .bo-span-8 { grid-column: span 12; } }
@media (max-width: 767px) { .bo-grid > * { grid-column: span 12 !important; } }
.bo-stat { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: var(--md-shape-lg); background: var(--md-surface-container-low); color: var(--md-on-surface); transition: background-color var(--md-motion); }
.bo a.bo-stat, .bo a.bo-stat:hover { color: var(--md-on-surface); }
a.bo-stat:hover { background: var(--md-surface-container-high); }
.bo-stat-icon { width: 48px; height: 48px; border-radius: var(--md-shape-md); display: inline-flex; align-items: center; justify-content: center; font-size: 20px; background: var(--md-primary-container); color: var(--md-on-primary-container); flex: 0 0 48px; }
.bo-stat-icon.t2 { background: var(--md-tertiary-container); color: var(--md-on-tertiary-container); }
.bo-stat-icon.t3 { background: var(--md-success-container); color: var(--md-on-success-container); }
.bo-stat-icon.t4 { background: var(--md-warning-container); color: var(--md-on-warning-container); }
.bo-stat-val { font-size: 26px; line-height: 32px; font-weight: 500; }
.bo-stat-lbl { font-size: 13px; color: var(--md-on-surface-variant); }
.bo-card { background: var(--md-surface-container-lowest); border: 1px solid var(--md-outline-variant); border-radius: var(--md-shape-lg); padding: 18px 20px 20px; }
.bo-card-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px; }
.bo-card-title h2 { font-size: 16px; line-height: 24px; font-weight: 500; margin: 0; }
.bo-card-title a { font-size: 13px; font-weight: 500; }
.bo-quick { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.bo .bo-quick a { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px 14px 12px; border-radius: var(--md-shape-md); background: var(--md-surface-container-low); color: var(--md-on-surface); font-weight: 500; font-size: 13.5px; transition: background-color var(--md-motion); }
.bo .bo-quick a:hover { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.bo-quick a i { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--md-surface-container-highest); color: var(--md-primary); font-size: 15px; }
.bo .bo-quick a:hover i { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.bo-list { list-style: none; margin: 0; padding: 0; }
.bo-list li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--md-outline-variant); font-size: 14px; }
.bo-list li:last-child { border-bottom: 0; }
.bo-list .bo-when { color: var(--md-on-surface-variant); font-size: 12.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bo-list .bo-what { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bo-list a.bo-what { color: var(--md-on-surface); }
.bo-list a.bo-what:hover { color: var(--md-primary); }
.bo-chip { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--md-shape-sm); font-size: 12px; font-weight: 500; background: var(--md-secondary-container); color: var(--md-on-secondary-container); white-space: nowrap; }
.bo-chip.c1 { background: var(--md-error-container); color: var(--md-on-error-container); }
.bo-chip.c2 { background: var(--md-success-container); color: var(--md-on-success-container); }
.bo-chip.c3 { background: var(--md-info-container); color: var(--md-on-info-container); }
.bo-chip.c4 { background: var(--md-warning-container); color: var(--md-on-warning-container); }
.bo-chip.c5 { background: var(--md-tertiary-container); color: var(--md-on-tertiary-container); }
.bo-timeline { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 2px solid var(--md-outline-variant); }
.bo-timeline li { position: relative; padding: 0 0 16px 16px; }
.bo-timeline li::before { content: ""; position: absolute; left: -25px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--md-primary); border: 3px solid var(--md-surface-container-lowest); box-shadow: 0 0 0 2px var(--md-primary-container); }
.bo-timeline li:last-child { padding-bottom: 0; }
.bo-timeline strong { font-weight: 500; margin-right: 8px; }
.bo-timeline small { color: var(--md-on-surface-variant); }
.bo-timeline p { margin: 4px 0 0; color: var(--md-on-surface-variant); font-size: 13.5px; }
.bo-empty { padding: 28px 16px; text-align: center; color: var(--md-on-surface-variant); }
.bo-empty i { font-size: 28px; display: block; margin-bottom: 8px; opacity: .5; }
/* ---------- 14. generic MD3 buttons for new markup ---------- */
.bo-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 24px; border-radius: var(--md-shape-full); border: 1px solid transparent; font: inherit; font-weight: 500; font-size: 14px; cursor: pointer; transition: background-color var(--md-motion), color var(--md-motion), box-shadow var(--md-motion); }
.bo-btn-primary { background: var(--md-primary); color: #fff; }
.bo-btn-primary:hover { background: color-mix(in srgb, #fff var(--md-hover), var(--md-primary)); color: #fff; box-shadow: var(--md-e1); }
.bo-btn-tonal { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.bo-btn-tonal:hover { background: color-mix(in srgb, var(--md-on-secondary-container) var(--md-hover), var(--md-secondary-container)); color: var(--md-on-secondary-container); }
.bo-btn-ghost { background: transparent; border-color: var(--md-outline); color: var(--md-primary); }
.bo-btn-ghost:hover { background: color-mix(in srgb, var(--md-primary) var(--md-hover), transparent); color: var(--md-primary); }
.bo-btn-block { display: flex; width: 100%; }
.bo-btn-block + .bo-btn-block { margin-top: 10px; }
/* ---------- 15. login page — tonal side panel + plain form column ---------- */
.bo-login-body { min-height: 100vh; background: var(--md-surface); }
.bo-login { min-height: 100vh; display: grid; grid-template-columns: minmax(320px, 42%) minmax(0, 1fr); }
.bo-login-panel { background: var(--md-primary-container); color: var(--md-on-primary-container); padding: 56px 56px 40px; display: flex; flex-direction: column; }
.bo .bo-login-org { margin: 0 0 auto; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; opacity: .8; }
.bo .bo-login-panel-title { font-size: clamp(28px, 3vw, 40px); line-height: 1.25; font-weight: 500; margin: 48px 0 18px; color: inherit; letter-spacing: -.01em; }
.bo .bo-login-panel-sub { margin: 0; font-size: 20px; line-height: 28px; font-weight: 500; color: inherit; }
.bo .bo-login-panel-desc { margin: 0; font-size: 14.5px; line-height: 24px; max-width: 34em; opacity: .85; }
.bo .bo-login-panel-foot { margin: auto 0 0; padding-top: 40px; font-size: 12.5px; opacity: .7; }
.bo-login-main { position: relative; display: flex; align-items: center; justify-content: center; padding: 72px 40px 48px; }
.bo-login-main > .bo-theme { position: absolute; top: 20px; right: 20px; }
.bo-login-form { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 8px; }
.bo .bo-login-title { font-size: 34px; line-height: 42px; font-weight: 400; margin: 0 0 26px; color: var(--md-on-surface); }
.bo .bo-login-sub { margin: 0 0 26px; color: var(--md-on-surface-variant); font-size: 15px; }
.bo-login-error { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--md-shape-md); background: var(--md-error-container); color: var(--md-on-error-container); font-size: 13.5px; margin-bottom: 12px; }
/* M3 outlined text field with floating label */
.md-field { position: relative; display: block; margin: 0 0 14px; }
.bo .md-field input[type] { width: 100%; height: 56px !important; padding: 0 16px !important; border: 1px solid var(--md-outline) !important; border-radius: var(--md-shape-xs) !important; background: transparent !important; font: inherit; font-size: 16px; color: var(--md-on-surface); outline: none; box-shadow: none; transition: border-color var(--md-motion), box-shadow var(--md-motion); }
.bo .md-field input[type]:hover { border-color: var(--md-on-surface) !important; }
.bo .md-field input[type]:focus { border-color: var(--md-primary) !important; box-shadow: 0 0 0 1px var(--md-primary) inset; }
.md-field-label { position: absolute; left: 12px; top: 28px; transform: translateY(-50%); padding: 0 4px; font-size: 16px; line-height: 16px; color: var(--md-on-surface-variant); background: var(--md-surface); pointer-events: none; transition: top 160ms cubic-bezier(.2, 0, 0, 1), font-size 160ms cubic-bezier(.2, 0, 0, 1), color 160ms; }
.md-field input:focus + .md-field-label, .md-field input:not(:placeholder-shown) + .md-field-label { top: 0; font-size: 12px; }
.md-field input:focus + .md-field-label { color: var(--md-primary); }
.md-field-trail { position: absolute; right: 8px; top: 8px; }
.bo .md-field:has(.md-field-trail) input[type] { padding-right: 52px !important; }
.md-field-help { display: block; padding: 6px 16px 0; font-size: 12px; line-height: 16px; color: var(--md-on-surface-variant); }
.bo-eye { width: 40px; height: 40px; border: 0; background: transparent; border-radius: 50%; color: var(--md-on-surface-variant); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.bo-eye:hover { background: color-mix(in srgb, var(--md-on-surface) var(--md-hover), transparent); }
.bo-login-form .bo-btn-primary { margin-top: 8px; height: 48px; font-size: 15px; }
.bo-btn-text { background: transparent; color: var(--md-primary); height: 44px; }
.bo-btn-text:hover { background: color-mix(in srgb, var(--md-primary) var(--md-hover), transparent); color: var(--md-primary); }
.bo-login-links { display: flex; gap: 14px; justify-content: center; margin-top: 8px; font-size: 13px; }
:root[data-theme="dark"] .md-field-label { background: var(--md-surface); }
@media (max-width: 899px) {
.bo-login { grid-template-columns: 1fr; }
.bo-login-panel { padding: 28px 24px; }
.bo-login-org { margin: 0 0 12px; }
.bo-login-panel-title { margin: 0 0 8px; font-size: 24px; }
.bo-login-panel-sub { font-size: 16px; line-height: 24px; margin: 0; }
.bo-login-panel-desc, .bo-login-panel-foot { display: none; }
.bo-login-main { padding: 36px 20px 32px; align-items: flex-start; }
.bo-login-main > .bo-theme { top: 12px; right: 12px; }
.bo-login-title { font-size: 28px; line-height: 36px; }
}
/* ---------- 16. print ---------- */
@media print { .bo-side, .bo-top, .bo-foot, .bo-backdrop { display: none !important; } .bo-content { padding: 0; } }
/* ---------- 17. MD3 dialog + snackbar (bo.js) ---------- */
.bo-scrim { position: fixed; inset: 0; z-index: 1100; background: rgba(26, 28, 30, 0); display: flex; align-items: center; justify-content: center; padding: 24px; transition: background-color 160ms ease; }
.bo-scrim.is-open { background: rgba(26, 28, 30, .32); }
.bo-scrim.is-closing { background: rgba(26, 28, 30, 0); }
.bo-dialog { width: min(100%, 400px); background: var(--md-surface-container-high); border-radius: var(--md-shape-xl); padding: 24px; box-shadow: var(--md-e3); opacity: 0; transform: translateY(12px) scale(.98); transition: opacity 160ms ease, transform 200ms cubic-bezier(.2, 0, 0, 1); }
.bo-scrim.is-open .bo-dialog { opacity: 1; transform: none; }
.bo-scrim.is-closing .bo-dialog { opacity: 0; transform: translateY(6px) scale(.98); }
.bo-dialog-icon { color: var(--md-secondary); font-size: 24px; text-align: center; margin-bottom: 12px; }
.bo-dialog.is-danger .bo-dialog-icon { color: var(--md-error); }
.bo-dialog-title { font-size: 22px; line-height: 28px; font-weight: 400; text-align: center; margin: 0 0 8px; color: var(--md-on-surface); }
.bo-dialog-text { font-size: 14px; line-height: 20px; color: var(--md-on-surface-variant); text-align: center; margin: 0 0 16px; word-break: break-word; }
.bo-dialog-field { display: block; margin: 4px 0 20px; }
.bo-dialog-field input { width: 100%; height: 52px; padding: 0 16px; border: 1px solid var(--md-outline); border-radius: var(--md-shape-sm); background: var(--md-surface-container-lowest); font: inherit; font-size: 15px; color: var(--md-on-surface); outline: none; transition: border-color var(--md-motion), box-shadow var(--md-motion); }
.bo-dialog-field input:focus { border-color: var(--md-primary); box-shadow: 0 0 0 1px var(--md-primary) inset; }
.bo-dialog-field input.is-invalid { border-color: var(--md-error); }
.bo-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }
.bo-dialog-btn { height: 40px; padding: 0 20px; border: 0; border-radius: var(--md-shape-full); background: transparent; color: var(--md-primary); font: inherit; font-weight: 500; font-size: 14px; cursor: pointer; transition: background-color var(--md-motion); }
.bo-dialog-btn:hover { background: color-mix(in srgb, var(--md-primary) var(--md-hover), transparent); }
.bo-dialog-btn.is-primary { background: var(--md-primary); color: #fff; padding: 0 24px; }
.bo-dialog-btn.is-primary:hover { background: color-mix(in srgb, #fff var(--md-hover), var(--md-primary)); }
.bo-dialog.is-danger .bo-dialog-btn.is-primary { background: var(--md-error); }
.bo-snackbar-stack { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 1200; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; width: min(100% - 32px, 560px); }
.bo-snackbar { pointer-events: auto; display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 8px 10px 16px; border-radius: var(--md-shape-xs); background: var(--md-inverse-surface); color: var(--md-inverse-on-surface); font-size: 14px; line-height: 20px; box-shadow: var(--md-e3); opacity: 0; transform: translateY(12px); transition: opacity 180ms ease, transform 200ms cubic-bezier(.2, 0, 0, 1); max-width: 100%; }
.bo-snackbar.is-open { opacity: 1; transform: none; }
.bo-snackbar.is-error { background: var(--md-error-container); color: var(--md-on-error-container); }
.bo-snackbar-text { flex: 1 1 auto; word-break: break-word; }
.bo-snackbar-close { width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; opacity: .8; }
.bo-snackbar-close:hover { background: rgba(255, 255, 255, .12); opacity: 1; }
/* content entrance (subtle, no overlay) */
@keyframes bo-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* fill-mode backwards (not both): a transform animation that stays "in effect" turns the element into the containing
block for position:fixed children, which trapped Bootstrap modals inside the card (clipped, under the backdrop) */
.bo-content > * { animation: bo-in 220ms cubic-bezier(.2, 0, 0, 1) backwards; }
@media (prefers-reduced-motion: reduce) { .bo-content > * { animation: none; } .bo-dialog, .bo-snackbar, .bo-side { transition: none; } }
/* ---------- 18. page-specific legacy bits ---------- */
.bo .copyButton { width: 34px; height: 34px; padding: 0; margin-left: 4px; border: 0; border-radius: 50%; background: transparent; color: var(--md-on-surface-variant); display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; cursor: pointer; }
.bo .copyButton:hover { background: color-mix(in srgb, var(--md-on-surface) var(--md-hover), transparent); color: var(--md-primary); }
.bo .copyButton svg { width: 18px; height: 18px; fill: currentColor; }
.bo .custom-tooltip { display: none; position: absolute; margin-left: 8px; padding: 6px 12px; background: var(--md-inverse-surface); color: var(--md-inverse-on-surface); border-radius: var(--md-shape-xs); font-size: 12px; z-index: 5; }
.bo .box-body { overflow-x: auto; }
/* overflow-x:auto also clips vertically — while a popup inside the card is open, let it escape */
.bo .box-body:has(.bootstrap-datetimepicker-widget, .open > .dropdown-menu, .select2-container--open) { overflow: visible; }
/* break only when a word really overflows (word-break:break-word let tables squeeze text columns to one character) */
.bo .table td { overflow-wrap: break-word; }
.bo .table td:has(> .btn) { white-space: nowrap; }
.bo .table td .btn, .bo .table td .btn + .btn { margin: 2px 4px 2px 0; }
.bo .table td:has(.copyButton) { white-space: nowrap; font-size: 12.5px; color: var(--md-on-surface-variant); }
/* editors keep their own chrome */
.bo .tox-tinymce { border: 1px solid #c4c6d0 !important; border-radius: var(--md-shape-sm) !important; background: #fff; color-scheme: light; }
.bo .tox .tox-toolbar__primary, .bo .tox .tox-menubar, .bo .tox .tox-statusbar, .bo .tox .tox-toolbar-overlord, .bo .tox .tox-editor-header { background: #f2f3f8 !important; }
.bo .tox:not(.tox-tinymce-inline) .tox-editor-header { box-shadow: none !important; border-bottom: 1px solid #c4c6d0 !important; }
.bo .tox .tox-tbtn { border-radius: var(--md-shape-sm) !important; color: #1a1c1e !important; }
.bo .tox .tox-tbtn svg { fill: #1a1c1e !important; }
.bo .tox .tox-tbtn:hover, .bo .tox .tox-tbtn--enabled { background: #dae2f9 !important; }
.bo .tox .tox-mbtn { color: #1a1c1e !important; }
.bo .tox .tox-mbtn:hover, .bo .tox .tox-mbtn--active { background: #dae2f9 !important; }
.bo .tox .tox-statusbar, .bo .tox .tox-statusbar a, .bo .tox .tox-statusbar__path-item { color: #44474e !important; }
.bo .tox .tox-edit-area, .bo .tox .tox-edit-area__iframe { background: #fff !important; }
.bo .tox .tox-tbtn__select-label { color: #1a1c1e !important; }
.bo .cke_chrome, .bo .wysihtml5-sandbox, .bo .wysihtml5-toolbar { color-scheme: light; background: #fff; }
/* ---------- 19. student systems ---------- */
.bo-student-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.bo-student-head .bo-avatar { width: 44px; height: 44px; font-size: 18px; }
.bo-student-head strong { display: block; font-size: 16px; font-weight: 500; }
.bo-student-head small { color: var(--md-on-surface-variant); font-size: 12.5px; }
.bo-student-list { margin: 0; }
.bo-student-list > div { display: flex; gap: 12px; padding: 8px 0; border-top: 1px solid var(--md-outline-variant); font-size: 14px; }
.bo-student-list dt { flex: 0 0 48px; font-weight: 500; color: var(--md-on-surface-variant); }
.bo-student-list dd { margin: 0; flex: 1 1 auto; color: var(--md-on-surface); }
.bo .box-body .col-md-4 .bo-student { padding: 4px 0 8px; }
.bo-notice { background: var(--md-error-container); color: var(--md-on-error-container); border-radius: var(--md-shape-lg); padding: 16px 18px; }
.bo-notice-title { font-weight: 500; display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.bo-notice ul { margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 22px; }
.bo-card-sub { font-size: 12.5px; color: var(--md-on-surface-variant); }
.bo-tasks { display: flex; flex-direction: column; gap: 10px; }
.bo-task { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--md-shape-md); background: var(--md-surface-container-low); border: 1px solid transparent; }
.bo-task.is-open { background: var(--md-surface-container-lowest); border-color: var(--md-primary-container); }
.bo-task.is-closed { opacity: .78; }
.bo-task-icon { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--md-surface-container-highest); color: var(--md-on-surface-variant); flex: 0 0 40px; font-size: 15px; }
.bo-task.is-open .bo-task-icon { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.bo-task.is-done .bo-task-icon { background: var(--md-success-container); color: var(--md-on-success-container); }
.bo-task-body { flex: 1 1 auto; min-width: 0; }
.bo-task-name { font-weight: 500; font-size: 15px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bo-task-time { font-size: 12.5px; color: var(--md-on-surface-variant); margin-top: 4px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.bo-task-arrow { opacity: .6; }
@media (max-width: 600px) { .bo-task { flex-wrap: wrap; } .bo-task > .btn { width: 100%; } }
.bo-file { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--md-outline-variant); border-radius: var(--md-shape-md); background: var(--md-surface-container-low); margin-bottom: 16px; }
.bo-file-icon { width: 40px; height: 40px; border-radius: var(--md-shape-sm); background: var(--md-primary-container); color: var(--md-on-primary-container); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 40px; }
.bo-file-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.bo-file-label { font-size: 12px; color: var(--md-on-surface-variant); }
.bo-file-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bo-dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 28px 16px; border: 2px dashed var(--md-outline); border-radius: var(--md-shape-lg); background: var(--md-surface-container-lowest); cursor: pointer; text-align: center; transition: border-color var(--md-motion), background-color var(--md-motion); font-weight: 400; color: var(--md-on-surface); margin: 0; }
.bo-dropzone:hover, .bo-dropzone.is-over { border-color: var(--md-primary); background: var(--md-primary-container); }
.bo-dropzone > i { font-size: 30px; color: var(--md-primary); }
.bo-dropzone-text { font-size: 14px; font-weight: 500; }
.bo-dropzone-hint { font-size: 12.5px; color: var(--md-on-surface-variant); }
.bo-dropzone input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.bo-dropzone-file { margin-top: 10px; display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--md-on-surface); }
.bo-dropzone-file::before { content: "\f15b"; font-family: FontAwesome; color: var(--md-primary); }
.bo-upload-done { display: none; align-items: center; gap: 8px; margin-top: 12px; padding: 10px 14px; border-radius: var(--md-shape-md); background: var(--md-success-container); color: var(--md-on-success-container); font-weight: 500; }
.bo-upload-done.is-shown { display: flex; }
.bo .box-footer[align="right"] { justify-content: flex-end; }
.bo-status { margin: 8px 0 0; display: flex; align-items: center; gap: 10px; }
/* event.php legacy tables (bgcolor / font tags) */
.bo table[bgcolor] { background: var(--md-surface-container-lowest) !important; border: 1px solid var(--md-outline-variant) !important; border-radius: var(--md-shape-md); overflow: hidden; margin-bottom: 14px; padding: 0 !important; }
.bo table[bgcolor] td { background: transparent !important; border-bottom: 1px solid var(--md-outline-variant); padding: 10px 12px; }
.bo table[bgcolor] tr:last-child td { border-bottom: 0; }
.bo table[bgcolor] td[bgcolor="#66CC99"] { background: var(--md-secondary-container) !important; color: var(--md-on-secondary-container); font-weight: 500; }
.bo table[bgcolor] font[color] { color: var(--md-on-surface-variant) !important; }
.bo table[bgcolor] font[color="red"], .bo table[bgcolor] font[color="#FF0000"] { color: var(--md-error) !important; font-weight: 500; }
/* popup (eventchoose.php) */
.bo-popup { padding: 20px; background: var(--md-surface); }
.bo-popup-title { font-size: 18px; font-weight: 500; margin: 0 0 14px; display: flex; align-items: center; gap: 8px; }
.bo-popup-form { display: flex; flex-direction: column; gap: 12px; }
.bo-popup-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 500; color: var(--md-on-surface-variant); }
.bo-popup-field select { height: 44px; padding: 0 12px; border: 1px solid var(--md-outline); border-radius: var(--md-shape-sm); background: var(--md-surface-container-lowest); font: inherit; color: var(--md-on-surface); }
.bo-popup input[type="submit"], .bo-popup input[type="button"] { margin-right: 8px; }
.bo-popup br { display: none; }
.bo-dropzone-file[hidden] { display: none; }
/* ---------- 20. dark scheme (MD3 dark tokens) — toggled from the top app bar, stored in localStorage ---------- */
:root[data-theme="dark"] {
--md-primary: #adc6ff; --md-on-primary: #002e69; --md-primary-container: #2a5aa0; --md-on-primary-container: #d8e3ff;
--md-secondary: #bec6dc; --md-on-secondary: #283141; --md-secondary-container: #3e4758; --md-on-secondary-container: #dae2f9;
--md-tertiary: #d9bde3; --md-tertiary-container: #533f5d; --md-on-tertiary-container: #f2daff;
--md-error: #ffb4ab; --md-on-error: #690005; --md-error-container: #93000a; --md-on-error-container: #ffdad6;
--md-success: #8fd9a5; --md-success-container: #1f5b37; --md-on-success-container: #c9efd5;
--md-warning: #f5bd60; --md-warning-container: #5c3b00; --md-on-warning-container: #ffe0a8;
--md-info: #8fcdff; --md-info-container: #004a75; --md-on-info-container: #cde5ff;
--md-surface: #111318; --md-surface-dim: #111318; --md-surface-bright: #37393e;
--md-surface-container-lowest: #0c0e13; --md-surface-container-low: #1a1c20; --md-surface-container: #1e2025; --md-surface-container-high: #282a2f; --md-surface-container-highest: #33353a;
--md-on-surface: #e2e2e8; --md-on-surface-variant: #c4c6d0; --md-outline: #8e9099; --md-outline-variant: #44474e;
--md-inverse-surface: #e2e2e8; --md-inverse-on-surface: #2f3033;
--md-e1: 0 1px 2px rgba(0, 0, 0, .5), 0 1px 3px 1px rgba(0, 0, 0, .3);
--md-e2: 0 1px 2px rgba(0, 0, 0, .55), 0 2px 6px 2px rgba(0, 0, 0, .35);
--md-e3: 0 4px 8px 3px rgba(0, 0, 0, .4), 0 1px 3px rgba(0, 0, 0, .5);
}
:root[data-theme="dark"] body.bo { color-scheme: dark; }
:root[data-theme="dark"] .bo .box, :root[data-theme="dark"] .bo .panel, :root[data-theme="dark"] .bo .nav-tabs-custom, :root[data-theme="dark"] .bo-card { background: var(--md-surface-container-low); }
:root[data-theme="dark"] .bo .form-control, :root[data-theme="dark"] .bo-input, :root[data-theme="dark"] .bo-dialog-field input, :root[data-theme="dark"] .bo-dropzone { background: var(--md-surface-container); }
:root[data-theme="dark"] .bo .btn-primary, :root[data-theme="dark"] .bo-btn-primary, :root[data-theme="dark"] .bo-dialog-btn.is-primary { color: var(--md-on-primary); }
:root[data-theme="dark"] .bo .btn-primary:hover, :root[data-theme="dark"] .bo-btn-primary:hover { background: color-mix(in srgb, #000 var(--md-hover), var(--md-primary)); color: var(--md-on-primary); }
:root[data-theme="dark"] .bo .btn-danger { background: var(--md-error-container); color: var(--md-on-error-container); }
:root[data-theme="dark"] .bo .btn-success { background: var(--md-success-container); color: var(--md-on-success-container); }
:root[data-theme="dark"] .bo .label-default, :root[data-theme="dark"] .bo .badge { color: var(--md-on-surface); }
:root[data-theme="dark"] .bo .badge { background: var(--md-primary-container); }
:root[data-theme="dark"] .bo .pagination > .active > a { color: var(--md-on-primary); }
:root[data-theme="dark"] .bo-login-side { background: var(--md-primary-container); }
:root[data-theme="dark"] .bo-login-body { background: var(--md-surface); }
:root[data-theme="dark"] .bo-avatar { background: var(--md-primary-container); color: var(--md-on-primary-container); }
:root[data-theme="dark"] .bo-timeline li::before { border-color: var(--md-surface-container-low); }
:root[data-theme="dark"] .bo .table-hover > tbody > tr:hover, :root[data-theme="dark"] .bo .table > tbody > tr:hover { background: color-mix(in srgb, var(--md-on-surface) 6%, transparent); }
:root[data-theme="dark"] .bo .dropdown-menu, :root[data-theme="dark"] .bo .daterangepicker, :root[data-theme="dark"] .bo .datepicker { background: var(--md-surface-container-high); color: var(--md-on-surface); }
:root[data-theme="dark"] .bo .daterangepicker .calendar-table, :root[data-theme="dark"] .bo .daterangepicker td, :root[data-theme="dark"] .bo .daterangepicker th, :root[data-theme="dark"] .bo .datepicker table tr td, :root[data-theme="dark"] .bo .datepicker table tr th { background: transparent; color: var(--md-on-surface); }
:root[data-theme="dark"] .bo .daterangepicker td.off { color: var(--md-outline); }
:root[data-theme="dark"] .bo .daterangepicker td.available:hover, :root[data-theme="dark"] .bo .datepicker table tr td.day:hover { background: var(--md-surface-container-highest); }
:root[data-theme="dark"] .bo .modal-content { color: var(--md-on-surface); }
:root[data-theme="dark"] .bo .close { color: var(--md-on-surface); }
:root[data-theme="dark"] .bo .copyButton, :root[data-theme="dark"] .bo .custom-tooltip { color: var(--md-on-surface-variant); }
:root[data-theme="dark"] .bo [style*="background-color: black"], :root[data-theme="dark"] .bo [style*="background-color:#ccc"] { background: var(--md-surface-container-high) !important; }
:root[data-theme="dark"] .bo-login-logo { background: #fff; } /* the logo artwork is dark-on-transparent */
/* theme toggle: plain M3 icon button — moon in light mode, sun in dark mode */
.bo-theme { width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--md-on-surface-variant); display: inline-flex; align-items: center; justify-content: center; font-size: 17px; cursor: pointer; transition: background-color var(--md-motion), color var(--md-motion); }
.bo-theme:hover { background: color-mix(in srgb, var(--md-on-surface) var(--md-hover), transparent); color: var(--md-on-surface); }
.bo-theme .fa-sun-o { display: none; }
:root[data-theme="dark"] .bo-theme .fa-moon-o { display: none; }
:root[data-theme="dark"] .bo-theme .fa-sun-o { display: inline; }
/* profile page: big initial avatar instead of the placeholder photo */
.bo-avatar-big { width: 96px; height: 96px; font-size: 36px; margin: 8px auto 14px; display: flex; }
/* ---------- 21. dashboard: quick-action editor (native