/* ClinicPulse prototype styles — works with Bootstrap 5 (LTR and RTL builds). */

:root {
  --cp-primary: #0e6b74;
  --cp-primary-dark: #0a5158;
  --cp-primary-soft: #e3f1f2;
  --cp-navy: #1b2f4b;
  --cp-navy-2: #233b5d;
  --cp-bg: #f3f6f8;
  --cp-surface: #ffffff;
  --cp-border: #dbe3ea;
  --cp-text: #1c2733;
  --cp-muted: #536373;
  --cp-billed: #33578c;
  --cp-collected: #1d7f66;
  --cp-outstanding: #a35a06;
  --cp-new: #0e6b74;
  --cp-returning: #6b4fa0;
  --cp-good: #146c43;
  --cp-bad: #a8261b;
  --cp-focus: #f0a500;
  --cp-radius: .75rem;

  /* Bootstrap theme overrides */
  --bs-primary: #0e6b74;
  --bs-primary-rgb: 14, 107, 116;
  --bs-link-color: #0b5f67;
  --bs-link-color-rgb: 11, 95, 103;
  --bs-link-hover-color: #08454b;
  --bs-link-hover-color-rgb: 8, 69, 75;
  --bs-body-color: #1c2733;
  --bs-body-bg: #f3f6f8;
  --bs-secondary-color: #536373;
  --bs-focus-ring-color: rgba(14, 107, 116, .35);
}

html, body { min-height: 100%; }

body {
  background: var(--cp-bg);
  color: var(--cp-text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.55;
}

html[lang="ar"] body {
  font-family: "Segoe UI", "Noto Sans Arabic", "Geeza Pro", Tahoma, "Arial", sans-serif;
  line-height: 1.75;
}

.text-muted, .text-body-secondary { color: var(--cp-muted) !important; }

/* ---------- Focus and accessibility ---------- */
:focus-visible {
  outline: 3px solid var(--cp-focus);
  outline-offset: 2px;
}
.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: var(--cp-primary);
  box-shadow: 0 0 0 .2rem rgba(14, 107, 116, .25);
}
.btn:focus-visible, .nav-link-cp:focus-visible, a:focus-visible {
  outline: 3px solid var(--cp-focus);
  outline-offset: 2px;
  box-shadow: none;
}
.skip-link {
  position: absolute;
  inset-inline-start: 1rem;
  top: -100px;
  z-index: 2000;
  background: #fff;
  color: var(--cp-navy);
  padding: .5rem 1rem;
  border-radius: .5rem;
  font-weight: 600;
}
.skip-link:focus { top: 1rem; }
h1[tabindex="-1"]:focus { outline: none; }

/* ---------- Buttons ---------- */
.btn-primary {
  --bs-btn-bg: var(--cp-primary);
  --bs-btn-border-color: var(--cp-primary);
  --bs-btn-hover-bg: var(--cp-primary-dark);
  --bs-btn-hover-border-color: var(--cp-primary-dark);
  --bs-btn-active-bg: #084349;
  --bs-btn-active-border-color: #084349;
  --bs-btn-disabled-bg: var(--cp-primary);
  --bs-btn-disabled-border-color: var(--cp-primary);
  --bs-btn-focus-shadow-rgb: 14, 107, 116;
}
.btn-outline-primary {
  --bs-btn-color: var(--cp-primary);
  --bs-btn-border-color: var(--cp-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--cp-primary);
  --bs-btn-hover-border-color: var(--cp-primary);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--cp-primary-dark);
  --bs-btn-active-border-color: var(--cp-primary-dark);
  --bs-btn-focus-shadow-rgb: 14, 107, 116;
}
.btn-outline-secondary {
  --bs-btn-color: #44515f;
  --bs-btn-border-color: #b9c4ce;
  --bs-btn-hover-bg: #eef2f5;
  --bs-btn-hover-color: #1c2733;
  --bs-btn-hover-border-color: #9aa7b3;
  --bs-btn-active-bg: #e2e8ee;
  --bs-btn-active-color: #1c2733;
}
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border-radius: .6rem;
  color: var(--cp-navy);
  border: 1px solid var(--cp-border);
  background: #fff;
}
.btn-icon:hover { background: var(--cp-primary-soft); }
.ic { width: 1.15em; height: 1.15em; vertical-align: -.2em; flex-shrink: 0; }
.btn .ic { margin-inline-end: .3rem; }
.btn-icon .ic { margin: 0; width: 1.3rem; height: 1.3rem; }
[dir="rtl"] .flip-rtl { transform: scaleX(-1); }

/* ---------- App shell ---------- */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 252px;
  flex-shrink: 0;
  background: var(--cp-navy);
  color: #fff;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  padding: 1.1rem .8rem;
  flex-direction: column;
}
.sidebar-offcanvas { background: var(--cp-navy); color: #fff; max-width: 85vw; }
.sidebar-offcanvas .offcanvas-header { border-bottom: 1px solid rgba(255,255,255,.12); }

.brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .25rem .5rem 1rem;
  color: #fff;
  text-decoration: none;
}
.brand-mark {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: .6rem;
  background: #2fa4a9;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.brand-mark .ic { width: 1.3rem; height: 1.3rem; }
.brand-name { font-weight: 700; font-size: 1.1rem; line-height: 1.2; }
.brand-sub { font-size: .75rem; color: #c3d2e1; line-height: 1.3; }

.nav-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .2rem; }
.nav-link-cp {
  display: flex;
  align-items: center;
  gap: .7rem;
  color: #dbe6f1;
  padding: .6rem .75rem;
  border-radius: .55rem;
  text-decoration: none;
  font-weight: 500;
}
.nav-link-cp:hover { background: rgba(255,255,255,.09); color: #fff; }
.nav-link-cp.active { background: #fff; color: var(--cp-navy); font-weight: 650; }
.nav-link-cp .ic { width: 1.25rem; height: 1.25rem; }
.nav-badge {
  margin-inline-start: auto;
  background: #f4b740;
  color: #2a1c00;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
  padding: .05rem .5rem;
  min-width: 1.5rem;
  text-align: center;
}
.sidebar-footer {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: .8rem;
  color: #c3d2e1;
}
.sidebar-footer .btn { --bs-btn-color: #e6eef6; --bs-btn-border-color: rgba(255,255,255,.35); --bs-btn-hover-bg: rgba(255,255,255,.1); --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: rgba(255,255,255,.5); }

.main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  background: #fff;
  border-bottom: 1px solid var(--cp-border);
  padding: .6rem 1rem;
  display: flex;
  align-items: center;
  gap: .6rem;
  position: sticky;
  top: 0;
  z-index: 1020;
}
.topbar .btn { white-space: nowrap; flex-shrink: 0; }
.topbar-context { min-width: 0; }
.topbar-context .ctx-title { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-context .ctx-sub { font-size: .8rem; color: var(--cp-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bell-badge {
  position: absolute;
  top: -.35rem;
  inset-inline-end: -.35rem;
  background: var(--cp-bad);
  color: #fff;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 700;
  min-width: 1.25rem;
  height: 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 .3rem;
}

main.app-main { padding: 1.25rem 1rem 3rem; width: 100%; max-width: 1440px; }
@media (min-width: 768px) { main.app-main { padding: 1.5rem 1.5rem 3rem; } }
@media (min-width: 1200px) { main.app-main { padding: 1.75rem 2.25rem 3rem; } }

/* ---------- Page structure ---------- */
.page-head {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 1.25rem;
}
.page-head h1 { font-weight: 700; color: var(--cp-navy); }
.page-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.back-link {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin-bottom: .5rem;
  font-weight: 500;
  text-decoration: none;
}
.back-link:hover { text-decoration: underline; }
.section-title { font-weight: 700; color: var(--cp-navy); margin-bottom: .75rem; }

.card-cp {
  background: var(--cp-surface);
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-radius);
}
.card-cp > .card-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  padding: .9rem 1rem .4rem;
}
.card-cp > .card-head h2, .card-cp > .card-head h3 { font-size: 1rem; font-weight: 700; margin: 0; color: var(--cp-navy); }
.card-cp > .card-pad { padding: .6rem 1rem 1rem; }

.notice {
  background: #eef6f7;
  border: 1px solid #c4e0e2;
  border-radius: .6rem;
  padding: .7rem .9rem;
  font-size: .9rem;
  color: #18454a;
  display: flex;
  gap: .6rem;
  align-items: flex-start;
}
.notice .ic { margin-top: .2rem; }
.notice-warn { background: #fff7e8; border-color: #f0d6a6; color: #5c3b00; }
.notice-lock { background: #f2effa; border-color: #d8cff0; color: #3d2e66; }

/* ---------- KPI cards ---------- */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: .9rem;
}
.kpi {
  padding: .9rem 1rem;
  height: 100%;
  border-inline-start: 4px solid transparent;
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.kpi-billed { border-inline-start-color: var(--cp-billed); }
.kpi-collected { border-inline-start-color: var(--cp-collected); }
.kpi-outstanding { border-inline-start-color: var(--cp-outstanding); }
.kpi-alert { border-inline-start-color: var(--cp-bad); }
.kpi-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .4rem; }
.kpi-label { font-size: .85rem; font-weight: 650; color: var(--cp-muted); margin: 0; }
.kpi-value { font-size: 1.55rem; font-weight: 750; color: var(--cp-navy); font-variant-numeric: tabular-nums; line-height: 1.25; }
.kpi-sub { font-size: .8rem; color: var(--cp-muted); }
.kpi-delta { font-size: .8rem; margin-top: auto; padding-top: .3rem; }
.delta { font-weight: 650; white-space: nowrap; }
.delta.good { color: var(--cp-good); }
.delta.bad { color: var(--cp-bad); }
.delta.neutral { color: var(--cp-muted); }
.delta-note { color: var(--cp-muted); }

.help-btn {
  border: 0;
  background: transparent;
  color: var(--cp-muted);
  padding: .1rem;
  border-radius: 50%;
  line-height: 1;
  cursor: help;
}
.help-btn:hover { color: var(--cp-primary); }

.split-bar {
  display: flex;
  height: .6rem;
  border-radius: 999px;
  overflow: hidden;
  background: #e7ecf0;
  margin: .35rem 0 .25rem;
}
.split-bar > span { display: block; height: 100%; }

/* ---------- Badges ---------- */
.badge-cp {
  display: inline-block;
  padding: .18em .6em;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 650;
  line-height: 1.5;
  white-space: nowrap;
  border: 1px solid transparent;
}
.st-scheduled { background: #e6eefa; color: #1d4a85; border-color: #c9d9f1; }
.st-completed { background: #e3f3ea; color: #135e3b; border-color: #c4e5d2; }
.st-no_show { background: #fbe9e7; color: #9a2318; border-color: #f2cbc5; }
.st-cancelled { background: #eceff2; color: #46525f; border-color: #d7dde3; }
.rem-pending { background: #fff2dc; color: #7a4300; border-color: #f2d6a2; }
.rem-completed { background: #e3f3ea; color: #135e3b; border-color: #c4e5d2; }
.rem-no_answer { background: #fbe9e7; color: #9a2318; border-color: #f2cbc5; }
.rem-na { background: #eceff2; color: #46525f; border-color: #d7dde3; }
.h-active { background: #e3f3ea; color: #135e3b; border-color: #c4e5d2; }
.h-at_risk { background: #fff2dc; color: #7a4300; border-color: #f2d6a2; }
.h-inactive { background: #eceff2; color: #46525f; border-color: #d0d7de; }
.acc-pending { background: #e6eefa; color: #1d4a85; border-color: #c9d9f1; }
.acc-approved { background: #e3f3ea; color: #135e3b; border-color: #c4e5d2; }
.acc-rejected { background: #fbe9e7; color: #9a2318; border-color: #f2cbc5; }
.pt-new { background: #e1f1f2; color: #0b5359; border-color: #bfdfe1; }
.pt-returning { background: #efe9f8; color: #4f378a; border-color: #dcd0f0; }
.pay-paid { background: #e3f3ea; color: #135e3b; border-color: #c4e5d2; }
.pay-partial { background: #fff2dc; color: #7a4300; border-color: #f2d6a2; }
.pay-unpaid { background: #fbe9e7; color: #9a2318; border-color: #f2cbc5; }
.role-badge { background: #e8edf4; color: #26405f; border-color: #d0dae6; }

/* ---------- Tables ---------- */
.table-cp { margin: 0; font-size: .92rem; }
.table-cp thead th {
  background: #f6f8fa;
  color: #3d4b59;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  border-bottom: 1px solid var(--cp-border);
  white-space: nowrap;
}
html[lang="ar"] .table-cp thead th { text-transform: none; letter-spacing: 0; font-size: .85rem; }
.table-cp td, .table-cp th { padding: .6rem .75rem; vertical-align: middle; }
.table-cp tbody tr:hover { background: #fafcfd; }
.num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.amount-billed { color: var(--cp-billed); }
.amount-collected { color: var(--cp-collected); }
.amount-outstanding { color: var(--cp-outstanding); font-weight: 650; }
.status-select { min-width: 9.5rem; }
.phone { unicode-bidi: isolate; white-space: nowrap; }

/* ---------- Filters ---------- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: flex-end;
  padding: .9rem 1rem;
}
.filter-bar .search-wrap { position: relative; flex: 1 1 240px; }
.filter-bar .search-wrap .ic {
  position: absolute;
  top: 50%;
  inset-inline-start: .75rem;
  transform: translateY(-50%);
  color: var(--cp-muted);
  pointer-events: none;
}
.filter-bar .search-wrap .form-control { padding-inline-start: 2.3rem; }
.filter-bar .filter-item { flex: 0 1 200px; }
.filter-bar label { font-size: .8rem; font-weight: 650; color: var(--cp-muted); margin-bottom: .2rem; }
.result-count { font-size: .85rem; color: var(--cp-muted); padding: 0 1rem .5rem; }

/* ---------- Period controls ---------- */
.period-bar { padding: .9rem 1rem; margin-bottom: 1rem; }
.period-bar legend { font-size: .8rem; font-weight: 650; color: var(--cp-muted); margin-bottom: .3rem; float: none; width: auto; }
.period-modes { display: flex; flex-wrap: wrap; gap: .35rem; }
.period-modes .btn { border-radius: 999px; padding-inline: .9rem; }
.period-summary { font-size: .85rem; color: var(--cp-muted); margin-top: .6rem; }

/* ---------- Charts ---------- */
.chart-wrap { direction: ltr; }
.chart-svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart-svg text { font-size: 11px; fill: #5b6977; font-family: inherit; }
.chart-svg .grid { stroke: #e5eaef; stroke-width: 1; }
.chart-svg .axis { stroke: #c4ced8; stroke-width: 1; }
.legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; list-style: none; padding: 0; margin: 0 0 .5rem; font-size: .82rem; color: #3d4b59; }
.legend li { display: inline-flex; align-items: center; gap: .4rem; }
.swatch { width: .8rem; height: .8rem; border-radius: .2rem; display: inline-block; }
.chart-note { font-size: .78rem; color: var(--cp-muted); }
details.data-table summary { font-size: .82rem; color: var(--bs-link-color); cursor: pointer; margin-top: .5rem; }
details.data-table table { font-size: .82rem; }

.hbars { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.hbar-head { display: flex; justify-content: space-between; gap: .75rem; font-size: .88rem; }
.hbar-head .label { font-weight: 600; overflow-wrap: anywhere; }
.hbar-track { background: #edf1f4; border-radius: 999px; height: .55rem; overflow: hidden; margin-top: .25rem; }
.hbar-fill { height: 100%; border-radius: 999px; background: var(--cp-primary); }
.hbar-fill.billed { background: var(--cp-billed); }
.hbar-fill.collected { background: var(--cp-collected); }
.hbar-variants { font-size: .76rem; color: var(--cp-muted); margin-top: .15rem; }
.hbar-pair .hbar-track { height: .45rem; margin-top: .2rem; }

.defs { font-size: .85rem; margin: 0; }
.defs dt { font-weight: 700; color: var(--cp-navy); }
.defs dd { color: #3d4b59; margin-bottom: .55rem; }

/* ---------- Lists (visits, reminders) ---------- */
.item-list { list-style: none; margin: 0; padding: 0; }
.item-list > li { padding: .75rem 1rem; border-top: 1px solid #edf1f4; }
.item-list > li:first-child { border-top: 0; }
.item-when { font-weight: 650; color: var(--cp-navy); font-size: .9rem; }

.rem-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.rem-item {
  background: #fff;
  border: 1px solid var(--cp-border);
  border-inline-start: 4px solid var(--cp-border);
  border-radius: .6rem;
  padding: .75rem .9rem;
}
.rem-item.state-overdue { border-inline-start-color: var(--cp-bad); }
.rem-item.state-due { border-inline-start-color: #d48806; }
.rem-item.state-upcoming { border-inline-start-color: #5b7fb5; }
.rem-item.state-needsStatus { border-inline-start-color: #6b4fa0; }
.rem-item.state-done { border-inline-start-color: var(--cp-good); }
.rem-meta { font-size: .85rem; color: #3d4b59; }
.rem-actions { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }

.chip-list { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; margin: 0; }
.chip { background: #eef3f6; border: 1px solid #dbe3ea; border-radius: 999px; padding: .2rem .7rem; font-size: .82rem; }
.chip strong { color: var(--cp-navy); }

.detail-list { margin: 0; display: grid; grid-template-columns: minmax(7rem, auto) 1fr; gap: .45rem 1rem; font-size: .92rem; }
.detail-list dt { color: var(--cp-muted); font-weight: 600; }
.detail-list dd { margin: 0; overflow-wrap: anywhere; }

.notes-card { background: #fffdf6; border-color: #eadfb8; }
.notes-text { white-space: pre-wrap; }

.empty-state {
  text-align: center;
  padding: 1.75rem 1rem;
  color: var(--cp-muted);
}
.empty-state .ic { width: 2rem; height: 2rem; color: #9fb0bf; margin-bottom: .4rem; }
.empty-state p { margin-bottom: .6rem; }

/* ---------- Tabs ---------- */
.tabs-cp { display: flex; flex-wrap: wrap; gap: .25rem; border-bottom: 1px solid var(--cp-border); margin-bottom: 1.25rem; }
.tabs-cp a {
  padding: .6rem 1rem;
  text-decoration: none;
  color: #3d4b59;
  font-weight: 600;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
}
.tabs-cp a:hover { color: var(--cp-primary); }
.tabs-cp a[aria-current="page"] { color: var(--cp-primary); border-bottom-color: var(--cp-primary); }

/* ---------- Public pages (login, signup) ---------- */
.public-wrap { min-height: 100vh; background: linear-gradient(160deg, #e7f1f3 0%, #f3f6f8 45%, #eef1f7 100%); }
.public-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  max-width: 1100px;
  margin: 0 auto;
}
.public-top .brand { color: var(--cp-navy); padding: 0; }
.public-top .brand-sub { color: var(--cp-muted); }
.public-card { padding: 1.5rem; }
@media (min-width: 768px) { .public-card { padding: 2rem 2.25rem; } }

.role-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .7rem; }
.role-card {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  height: 100%;
  padding: .85rem 1rem;
  border: 2px solid var(--cp-border);
  border-radius: .7rem;
  background: #fff;
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.role-card:hover { border-color: #9cc6ca; }
.role-name { font-weight: 700; color: var(--cp-navy); }
.role-desc { font-size: .84rem; color: var(--cp-muted); }
.btn-check:checked + .role-card { border-color: var(--cp-primary); background: var(--cp-primary-soft); }
.btn-check:focus-visible + .role-card { outline: 3px solid var(--cp-focus); outline-offset: 2px; }

.req { color: var(--cp-bad); font-weight: 700; }
.opt { color: var(--cp-muted); font-weight: 400; font-size: .85em; }
.form-label { font-weight: 600; font-size: .92rem; }
.balance-output {
  font-weight: 700;
  font-size: 1.1rem;
  padding: .375rem .75rem;
  background: #f6f8fa;
  border: 1px solid var(--cp-border);
  border-radius: .375rem;
  min-height: calc(1.5em + .75rem + 2px);
  font-variant-numeric: tabular-nums;
}
.picked-patient {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1rem;
  padding: .6rem .8rem;
  background: var(--cp-primary-soft);
  border: 1px solid #bfdfe1;
  border-radius: .5rem;
}

/* ---------- Toasts ---------- */
.toast { border: 0; box-shadow: 0 .5rem 1.5rem rgba(20, 40, 60, .18); }
.toast-success { background: #135e3b; color: #fff; }
.toast-error { background: #9a2318; color: #fff; }

/* ---------- Responsive tweaks ---------- */
@media (max-width: 575.98px) {
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .kpi-value { font-size: 1.2rem; }
  .kpi { padding: .75rem .8rem; }
  .page-head { align-items: flex-start; }
  .page-actions { width: 100%; }
  .page-actions .btn { flex: 1 1 auto; }
  .detail-list { grid-template-columns: 1fr; gap: .1rem; }
  .detail-list dd { margin-bottom: .45rem; }
  .filter-bar .filter-item { flex: 1 1 140px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

@media print {
  .sidebar, .topbar, .page-actions, .period-modes { display: none !important; }
  body { background: #fff; }
}