/* ============================================================
   カルテア Kartea — 治療院向け顧客管理SaaS（架空・操作デモ）
   Light refined B2B SaaS. Vanilla CSS, no frameworks.
   ============================================================ */

/* hidden must always win — .modal-wrap's display:flex was overriding it,
   leaving an invisible full-screen backdrop that swallowed every click */
[hidden] { display: none !important; }

:root {
  /* surfaces */
  --paper: #F6F6F3;           /* app background */
  --panel: #FFFFFF;           /* cards, bars */
  --panel-2: #FBFBF9;         /* table header, wells */
  --line: #E8E6E0;
  --line-strong: #D8D5CD;
  /* ink */
  --ink: #21201B;
  --ink-2: rgba(33, 32, 27, .64);
  --ink-3: rgba(33, 32, 27, .44);
  /* brand & status */
  --brand: #0E7A6E;           /* teal — primary actions, 通院中 */
  --brand-ink: #0A5F56;
  --brand-weak: #E3F1EF;
  --blue: #3B66B8;            /* 予約あり */
  --blue-weak: #E9EFFA;
  --amber: #A8802D;           /* 休眠・要フォロー */
  --amber-weak: #F7F0DE;
  --rose: #B5544D;            /* キャンセル・注意 */
  --rose-weak: #F8E9E7;
  --violet: #6B5CA5;          /* スタッフ2色目 */
  --violet-weak: #EDEAF6;
  /* type */
  --sans: "Inter", "Zen Kaku Gothic New", sans-serif;
  --jp: "Zen Kaku Gothic New", sans-serif;
  /* shape */
  --r-card: 12px;
  --r-ctl: 8px;
  --shadow-1: 0 1px 2px rgba(40, 34, 16, .05);
  --shadow-2: 0 8px 28px rgba(40, 34, 16, .1);
  --side-w: 216px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

html { height: 100%; }
body {
  height: 100%;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "tnum";
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
kbd {
  font-family: var(--sans);
  font-size: 10.5px;
  color: var(--ink-3);
  background: var(--panel);
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 1px 6px;
}

::selection { background: var(--brand-weak); }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--r-ctl);
}

/* ---------- layout ---------- */
.app { display: grid; grid-template-columns: var(--side-w) 1fr; min-height: 100vh; }

.side {
  display: flex;
  flex-direction: column;
  gap: 26px;
  background: var(--panel);
  border-right: 1px solid var(--line);
  padding: 18px 14px;
  position: sticky;
  top: 0;
  height: 100vh;
}
.side__brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px; }
.side__name { font-weight: 700; font-size: 15px; letter-spacing: .04em; }
.side__nav { display: grid; gap: 2px; }
.side__nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  border-radius: var(--r-ctl);
  padding: 9px 10px;
  transition: background-color .15s ease, color .15s ease;
}
.side__nav a:hover { background: var(--panel-2); color: var(--ink); }
.side__nav a.is-active { background: var(--brand-weak); color: var(--brand-ink); }
.side__foot { margin-top: auto; display: grid; gap: 10px; padding: 0 8px; }
.side__reset {
  font-size: 11.5px;
  color: var(--ink-3);
  text-align: left;
  transition: color .15s ease;
}
.side__reset:hover { color: var(--rose); }
.side__back { font-size: 11.5px; color: var(--ink-3); }
.side__back:hover { color: var(--brand-ink); }

.frame { display: flex; flex-direction: column; min-width: 0; }

.topbar {
  display: flex;
  align-items: center;
  gap: 18px;
  height: 56px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  padding-inline: 22px;
  position: sticky;
  top: 0;
  z-index: 40;
}
.topbar__tenant { display: flex; align-items: center; gap: 10px; }
.topbar__clinic { font-weight: 700; font-size: 13.5px; }
.topbar__search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  min-width: 250px;
  font-size: 12px;
  color: var(--ink-3);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  padding: 7px 10px;
  transition: border-color .15s ease, background-color .15s ease;
}
.topbar__search:hover { border-color: var(--line-strong); background: var(--panel); }
.topbar__search span { margin-right: auto; }
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: var(--brand);
}
.avatar--staff2 { background: var(--violet); }

.view { padding: 26px 26px 60px; max-width: 1240px; width: 100%; margin-inline: auto; }
.view:focus { outline: none; }

/* ---------- shared bits ---------- */
.page-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.page-head h1 { font-size: 19px; font-weight: 700; letter-spacing: .02em; }
.page-head__sub { font-size: 12px; color: var(--ink-3); }
.page-head__actions { margin-left: auto; display: flex; gap: 10px; }

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-1);
}
.card__head { display: flex; align-items: baseline; gap: 10px; padding: 16px 18px 0; }
.card__title { font-size: 13px; font-weight: 700; }
.card__sub { font-size: 11.5px; color: var(--ink-3); }
.card__link { margin-left: auto; font-size: 11.5px; color: var(--brand-ink); font-weight: 500; }
.card__link:hover { text-decoration: underline; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .04em;
  border-radius: 999px;
  padding: 2.5px 9px;
  white-space: nowrap;
}
.badge--demo { color: var(--amber); background: var(--amber-weak); }
.badge--tsuin { color: var(--brand-ink); background: var(--brand-weak); }
.badge--yoyaku { color: var(--blue); background: var(--blue-weak); }
.badge--kyumin { color: var(--amber); background: var(--amber-weak); }
.badge--shinki { color: var(--violet); background: var(--violet-weak); }
.badge--cancel { color: var(--rose); background: var(--rose-weak); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: var(--r-ctl);
  padding: 8px 16px;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn--primary { color: #fff; background: var(--brand); }
.btn--primary:hover { background: var(--brand-ink); }
.btn--ghost { color: var(--ink-2); border: 1px solid var(--line); background: var(--panel); }
.btn--ghost:hover { border-color: var(--line-strong); color: var(--ink); }
.btn--small { font-size: 11.5px; padding: 5px 11px; }

.input, .select, .textarea {
  width: 100%;
  font-size: 13px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  padding: 8px 11px;
  transition: border-color .15s ease;
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--line-strong); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--brand); }
.field { display: grid; gap: 5px; }
.field > label { font-size: 11.5px; font-weight: 600; color: var(--ink-2); }

.empty {
  text-align: center;
  color: var(--ink-3);
  font-size: 12.5px;
  padding: 34px 16px;
}

/* ---------- dashboard ---------- */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 14px; }
.kpi { padding: 16px 18px 14px; }
.kpi__label { font-size: 11.5px; font-weight: 600; color: var(--ink-2); }
.kpi__row { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; }
.kpi__value { font-size: 26px; font-weight: 700; letter-spacing: -.01em; }
.kpi__unit { font-size: 12px; color: var(--ink-3); }
.kpi__delta { font-size: 11px; font-weight: 600; margin-left: auto; white-space: nowrap; }
.kpi__delta.is-up { color: var(--brand-ink); }
.kpi__delta.is-down { color: var(--rose); }
.kpi__spark { margin-top: 8px; }
.kpi__spark polyline { fill: none; stroke: var(--brand); stroke-width: 1.6; opacity: .85; }
.kpi__spark .spark-fill { fill: var(--brand-weak); stroke: none; opacity: .8; }

.dash-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 14px; }
.dash-col { display: grid; gap: 14px; align-content: start; }

.chart { padding: 4px 18px 16px; }
.chart svg { width: 100%; height: auto; display: block; }
.chart .bar { fill: #DCE8E6; transition: fill .15s ease; cursor: pointer; }
.chart .bar.is-now { fill: var(--brand); }
.chart .bar:hover { fill: var(--brand-ink); }
.chart .axis { font-size: 9.5px; fill: var(--ink-3); font-family: var(--sans); }
.chart__tip {
  position: fixed;
  z-index: 80;
  pointer-events: none;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  background: var(--ink);
  border-radius: 6px;
  padding: 4px 9px;
  transform: translate(-50%, -130%);
  white-space: nowrap;
}

.today-list { display: grid; }
.today {
  display: grid;
  grid-template-columns: 74px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 18px;
  border-top: 1px solid var(--line);
  cursor: pointer;
  transition: background-color .12s ease;
}
.today:first-of-type { border-top: 0; }
.today:hover { background: var(--panel-2); }
.today__time { font-weight: 700; font-size: 13px; }
.today__time small { display: block; font-weight: 500; font-size: 10.5px; color: var(--ink-3); }
.today__who { min-width: 0; }
.today__name { font-weight: 600; font-size: 13px; }
.today__menu { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.follow {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  padding: 11px 18px;
  border-top: 1px solid var(--line);
  cursor: pointer;
  transition: background-color .12s ease;
}
.follow:first-of-type { border-top: 0; }
.follow:hover { background: var(--panel-2); }
.follow__name { font-weight: 600; font-size: 13px; }
.follow__why { grid-column: 1 / -1; font-size: 11.5px; color: var(--ink-3); }

.recent { padding: 11px 18px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-2); display: grid; gap: 2px; cursor: pointer; }
.recent:first-of-type { border-top: 0; }
.recent:hover { background: var(--panel-2); }
.recent b { color: var(--ink); font-weight: 600; }
.recent__meta { font-size: 10.5px; color: var(--ink-3); }

/* ---------- customers ---------- */
.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.toolbar .input { width: 260px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-2);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 13px;
  transition: all .12s ease;
}
.chip:hover { border-color: var(--line-strong); }
.chip.is-on { color: var(--brand-ink); background: var(--brand-weak); border-color: transparent; }
.toolbar__count { margin-left: auto; font-size: 11.5px; color: var(--ink-3); }

.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; min-width: 760px; }
.table th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--ink-3);
  background: var(--panel-2);
  border-bottom: 1px solid var(--line);
  padding: 9px 14px;
  white-space: nowrap;
}
.table th:first-child { padding-left: 18px; }
.table td { border-bottom: 1px solid var(--line); padding: 10px 14px; white-space: nowrap; }
.table td:first-child { padding-left: 18px; }
.table tbody tr { cursor: pointer; transition: background-color .1s ease; }
.table tbody tr:hover { background: var(--panel-2); }
.table tbody tr:last-child td { border-bottom: 0; }
.cust { display: flex; align-items: center; gap: 10px; }
.cust__avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 700;
  color: var(--brand-ink);
  background: var(--brand-weak);
  flex: none;
}
.cust__name { font-weight: 600; }
.cust__kana { font-size: 10.5px; color: var(--ink-3); display: block; line-height: 1.3; }
.td-sub { color: var(--ink-2); font-size: 12.5px; }
.td-num { font-feature-settings: "tnum"; }

/* ---------- drawer (customer detail) ---------- */
.drawer-wrap { position: fixed; inset: 0; z-index: 100; }
.drawer-backdrop { position: absolute; inset: 0; background: rgba(33, 32, 27, .32); opacity: 0; transition: opacity .25s ease; }
.drawer {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(440px, 94vw);
  background: var(--panel);
  border-left: 1px solid var(--line);
  box-shadow: var(--shadow-2);
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.3, .9, .3, 1);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.drawer-wrap.is-open .drawer-backdrop { opacity: 1; }
.drawer-wrap.is-open .drawer { transform: none; }
.drawer__head { display: flex; align-items: flex-start; gap: 12px; padding: 20px 20px 14px; border-bottom: 1px solid var(--line); }
.drawer__avatar { width: 42px; height: 42px; font-size: 15px; }
.drawer__name { font-size: 16px; font-weight: 700; line-height: 1.4; }
.drawer__kana { font-size: 11px; color: var(--ink-3); }
.drawer__close { margin-left: auto; color: var(--ink-3); font-size: 20px; line-height: 1; padding: 4px; }
.drawer__close:hover { color: var(--ink); }
.drawer__stats { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); }
.drawer__stat { padding: 12px 8px; text-align: center; border-left: 1px solid var(--line); }
.drawer__stat:first-child { border-left: 0; }
.drawer__stat b { display: block; font-size: 16px; font-weight: 700; }
.drawer__stat span { font-size: 10.5px; color: var(--ink-3); }
.drawer__body { padding: 16px 20px 28px; display: grid; gap: 18px; align-content: start; }
.drawer__row { display: grid; grid-template-columns: 84px 1fr; gap: 10px; font-size: 12.5px; }
.drawer__row dt { color: var(--ink-3); }
.drawer__section > h3 { font-size: 12px; font-weight: 700; margin-bottom: 8px; }
.karte { display: grid; gap: 8px; }
.karte__item {
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  background: var(--panel-2);
  padding: 9px 12px;
  font-size: 12.5px;
}
.karte__meta { font-size: 10.5px; color: var(--ink-3); display: flex; gap: 8px; margin-bottom: 2px; }
.karte-form { display: grid; gap: 8px; }
.karte-form .textarea { min-height: 64px; resize: vertical; }
.karte-form .btn { justify-self: end; }

/* ---------- calendar ---------- */
.cal-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.cal-head__title { font-size: 15px; font-weight: 700; min-width: 200px; }
.cal-head__nav { display: flex; gap: 6px; }
.cal-head__legend { margin-left: auto; display: flex; gap: 14px; font-size: 11px; color: var(--ink-2); }
.cal-head__legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; }
.legend-1 i { background: var(--brand); }
.legend-2 i { background: var(--violet); }

.cal-scroll { overflow-x: auto; }
.cal {
  display: grid;
  grid-template-columns: 52px repeat(7, minmax(108px, 1fr));
  min-width: 830px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
.cal__corner { border-bottom: 1px solid var(--line); background: var(--panel-2); }
.cal__day {
  text-align: center;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-2);
  background: var(--panel-2);
  border-bottom: 1px solid var(--line);
  border-left: 1px solid var(--line);
  padding: 8px 4px;
}
.cal__day b { display: block; font-size: 15px; color: var(--ink); font-weight: 700; }
.cal__day.is-today { color: var(--brand-ink); }
.cal__day.is-today b { color: var(--brand-ink); }
.cal__times { display: grid; }
.cal__time {
  height: 46px;
  font-size: 10px;
  color: var(--ink-3);
  text-align: right;
  padding: 2px 7px 0 0;
  border-top: 1px solid var(--line);
}
.cal__times .cal__time:first-child { border-top: 0; }
.cal__col { position: relative; border-left: 1px solid var(--line); display: grid; }
.cal__slot { height: 46px; border-top: 1px solid var(--line); cursor: pointer; transition: background-color .12s ease; }
.cal__col .cal__slot:first-child { border-top: 0; }
.cal__slot:hover { background: var(--brand-weak); }
.cal__col.is-today-col { background: #FCFCF7; }
.appt {
  position: absolute;
  left: 4px;
  right: 4px;
  border-radius: 7px;
  background: var(--brand-weak);
  border: 1px solid rgba(14, 122, 110, .35);
  color: var(--brand-ink);
  font-size: 10.5px;
  line-height: 1.35;
  padding: 4px 8px;
  overflow: hidden;
  cursor: pointer;
  transition: filter .12s ease;
}
.appt:hover { filter: brightness(.96); }
.appt--staff2 {
  background: var(--violet-weak);
  border-color: rgba(107, 92, 165, .35);
  color: var(--violet);
}
.appt b { display: block; font-size: 11px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- modal ---------- */
.modal-wrap { position: fixed; inset: 0; z-index: 110; display: flex; align-items: center; justify-content: center; padding: 18px; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(33, 32, 27, .32); opacity: 0; transition: opacity .2s ease; }
.modal {
  position: relative;
  width: min(420px, 100%);
  background: var(--panel);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-2);
  padding: 22px;
  transform: translateY(10px);
  opacity: 0;
  transition: transform .22s ease, opacity .22s ease;
}
.modal-wrap.is-open .modal-backdrop { opacity: 1; }
.modal-wrap.is-open .modal { transform: none; opacity: 1; }
.modal h2 { font-size: 15px; font-weight: 700; margin-bottom: 16px; }
.modal .form { display: grid; gap: 12px; }
.modal .form__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }

/* ---------- reports ---------- */
.report-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.report-note { font-size: 11px; color: var(--ink-3); margin-top: 14px; }
.hbar-list { padding: 10px 18px 16px; display: grid; gap: 10px; }
.hbar { display: grid; grid-template-columns: 96px 1fr 44px; align-items: center; gap: 10px; font-size: 12px; }
.hbar__track { display: block; height: 9px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); overflow: hidden; }
.hbar__fill { display: block; height: 100%; border-radius: 999px; background: var(--brand); opacity: .8; }
.hbar__num { text-align: right; color: var(--ink-2); font-size: 11.5px; }
.repeat-box { padding: 14px 18px 18px; display: grid; gap: 10px; }
.repeat-row { display: grid; grid-template-columns: 110px 1fr auto; gap: 10px; align-items: center; font-size: 12px; }
.donut-wrap { display: flex; align-items: center; gap: 20px; padding: 12px 18px 18px; }
.donut-legend { display: grid; gap: 6px; font-size: 12px; color: var(--ink-2); }
.donut-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 7px; }

/* ---------- command palette ---------- */
.palette-wrap { position: fixed; inset: 0; z-index: 130; }
.palette-backdrop { position: absolute; inset: 0; background: rgba(33, 32, 27, .38); }
.palette {
  position: relative;
  width: min(560px, 92vw);
  margin: 12vh auto 0;
  background: var(--panel);
  border-radius: 14px;
  box-shadow: var(--shadow-2);
  overflow: hidden;
}
.palette__input {
  width: 100%;
  font-size: 15px;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 16px 18px;
  background: var(--panel);
}
.palette__input:focus { outline: none; }
.palette__list { max-height: 320px; overflow-y: auto; padding: 6px; }
.palette__item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  border-radius: 8px;
  padding: 9px 12px;
  cursor: pointer;
}
.palette__item .cust__avatar { width: 26px; height: 26px; font-size: 10.5px; }
.palette__item small { color: var(--ink-3); font-size: 11px; margin-left: auto; }
.palette__item.is-sel { background: var(--brand-weak); }
.palette__hint { font-size: 10.5px; color: var(--ink-3); border-top: 1px solid var(--line); padding: 8px 16px; }

/* ---------- toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 6px);
  z-index: 140;
  font-size: 12.5px;
  font-weight: 600;
  color: #fff;
  background: var(--ink);
  border-radius: 10px;
  padding: 11px 20px;
  box-shadow: var(--shadow-2);
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
}
.toast.is-shown { opacity: 1; transform: translate(-50%, 0); }

.app-foot {
  margin-top: auto;
  padding: 18px 26px 22px;
  font-size: 10.5px;
  color: var(--ink-3);
  text-align: center;
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .side {
    position: static;
    height: auto;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .side__brand { padding: 0 6px 0 0; flex: none; }
  .side__name { white-space: nowrap; }
  .side__nav { display: flex; gap: 2px; }
  .side__nav a { white-space: nowrap; padding: 7px 10px; }
  .side__foot { display: none; }
  .topbar { flex-wrap: wrap; height: auto; padding-block: 9px; gap: 8px 14px; }
  .topbar__clinic { white-space: nowrap; }
  .topbar__search { min-width: 0; margin-left: 0; order: 3; }
  .topbar__search span { display: none; }
  .topbar__user { margin-left: auto; }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .kpi__row { flex-wrap: wrap; }
  .kpi__delta { margin-left: 0; width: 100%; }
  .dash-grid { grid-template-columns: 1fr; }
  .report-grid { grid-template-columns: 1fr; }
  .toolbar .input { width: 100%; }
  .toolbar__count { margin-left: 0; }
}

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