/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Self-hosted so Arabic text renders identically across browsers instead of
   depending on OS/browser font-substitution, which differs between Safari
   and Chrome (and across a visitor's installed fonts). Arabic-only unicode
   range, so Latin text is unaffected and keeps using the system font. */
@font-face {
  font-family: "Noto Sans Arabic";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/assets/noto-sans-arabic-variable-202219d7.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

:root {
  --brand: #0f766e;
  --brand-dark: #134e4a;
  --brand-light: #e6fffa;
  --accent: #d6a23a;
  --accent-light: #fffbeb;
  --info: #2563eb;
  --info-bg: #eff6ff;
  --warning: #b45309;
  --warning-bg: #fffbeb;
  --ink: #17201e;
  --muted: #667085;
  --border: #dde5e2;
  --border-strong: #c7d4d0;
  --bg: #f7f8f5;
  --surface: #ffffff;
  --surface-soft: #fbfcfa;
  --surface-raised: rgba(255, 255, 255, .86);
  --glass-surface: rgba(255, 255, 255, .68);
  --glass-surface-strong: rgba(255, 255, 255, .82);
  --glass-surface-soft: rgba(255, 255, 255, .52);
  --glass-border: rgba(255, 255, 255, .72);
  --glass-border-outer: rgba(151, 174, 168, .42);
  --glass-highlight: rgba(255, 255, 255, .88);
  --glass-blur: 22px;
  --glass-saturate: 155%;
  --glass-shadow: 0 1px 0 rgba(255, 255, 255, .78) inset,
                  0 18px 44px rgba(20, 70, 64, .10),
                  0 2px 8px rgba(20, 70, 64, .05);
  --danger: #b42318;
  --danger-bg: #fef3f2;
  --success: #0f766e;
  --success-bg: #e6fffa;
  --sidebar-bg: #134e4a;
  --sidebar-compact: 76px;
  --sidebar-width: 260px;
  --radius: 8px;
  --shadow-sm: 0 1px 2px rgba(23, 32, 30, 0.06), 0 8px 18px rgba(23, 32, 30, 0.04);
  --shadow: 0 16px 40px rgba(23, 32, 30, 0.10);
  --shadow-lg: 0 24px 60px rgba(23, 32, 30, .12);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: "Noto Sans Arabic", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background:
    linear-gradient(180deg, #fbfcfa 0, #f3f7f4 260px, var(--bg) 620px),
    var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

.app-icon {
  width: 1.12em;
  height: 1.12em;
  display: inline-block;
  flex: 0 0 auto;
  vertical-align: -.16em;
}

.nav__icon,
.mobile-nav__icon,
.topbar__menu-icon,
.notif-bell__icon,
.notif__icon,
.notif-live__icon,
.stat-card__icon,
.certificate-card__seal,
.certificate__seal {
  color: currentColor;
}

/* ---------- App shell ---------- */
.shell {
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  min-height: 100vh;
  transition: grid-template-columns .18s ease;
}

.shell--collapsed { grid-template-columns: var(--sidebar-compact) minmax(0, 1fr); }

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

.shell__content {
  position: relative;
  isolation: isolate;
  /* Bottom padding clears the fixed .feedback-trigger corner button so it
     never overlaps a page's own trailing action buttons. */
  padding: 1.5rem clamp(1rem, 2vw, 2rem) 4rem;
  max-width: 1480px;
  width: 100%;
  margin: 0 auto;
}

.shell__content::before {
  content: "";
  position: fixed;
  inset: 0 0 auto var(--sidebar-width);
  height: 220px;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(520px 180px at 18% 0%, rgba(15, 118, 110, .12), transparent 70%),
    radial-gradient(420px 160px at 80% 10%, rgba(214, 162, 58, .10), transparent 72%);
}

.shell--collapsed .shell__content::before {
  inset-inline-start: var(--sidebar-compact);
}

.shell__overlay { display: none; }

.mobile-nav {
  display: none;
}

/* Sidebar */
.sidebar {
  background:
    linear-gradient(180deg, #103f3c 0%, var(--sidebar-bg) 52%, #0d3835 100%);
  color: #ccfbf1;
  padding: 1.1rem 0.9rem;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
}

.sidebar__mobile-footer { display: none; }

.sidebar__brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .4rem .6rem 1.1rem;
  border-bottom: 1px solid rgba(255,255,255,.10);
  margin-bottom: .8rem;
}
.sidebar__brand:hover { text-decoration: none; }
.sidebar__logo {
  width: 46px; height: 46px; border-radius: 12px;
  display: grid; place-items: center;
  overflow: hidden;
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
}
.sidebar__logo img { display: block; width: 100%; height: 100%; }
.sidebar__name { font-weight: 800; font-size: 1.22rem; color: #fff; }
.shell--collapsed .sidebar {
  padding-inline: .55rem;
}
.shell--collapsed .sidebar__brand {
  justify-content: center;
  padding-inline: 0;
}
.shell--collapsed .sidebar__name,
.shell--collapsed .nav__label,
.shell--collapsed .nav__section {
  display: none;
}
.shell--collapsed .nav__item {
  justify-content: center;
  gap: 0;
  padding-inline: .45rem;
}
.shell--collapsed .nav__icon {
  width: 2.25rem;
}

.nav { display: flex; flex-direction: column; gap: .15rem; }
.nav__section {
  color: #99f6e4;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  padding: .9rem .7rem .35rem;
  opacity: .8;
}
.nav__item {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .6rem .7rem;
  border-radius: 8px;
  color: #ccfbf1;
  text-decoration: none;
  font-size: .93rem;
  font-weight: 600;
  transition: background .12s, color .12s, transform .12s;
}
.nav__item:hover { background: rgba(255,255,255,.08); text-decoration: none; color: #fff; transform: translateX(1px); }
[dir="rtl"] .nav__item:hover { transform: translateX(-1px); }
.nav__item--active {
  background: rgba(15, 118, 110, .92);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 8px 18px rgba(0,0,0,.14);
}
.nav__icon {
  width: 1.4rem;
  display: inline-grid;
  place-items: center;
}

.nav__icon .app-icon {
  width: 1.12rem;
  height: 1.12rem;
}

/* Topbar */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .8rem 1.5rem;
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(12px);
}
.topbar__start { display: flex; align-items: center; gap: .8rem; min-width: 0; }
.topbar__titles { min-width: 0; }
.topbar__menu {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 1.15rem;
  cursor: pointer;
  color: var(--ink);
}
.topbar__menu:hover {
  background: var(--brand-light);
  border-color: #a7f3d0;
}
.topbar__menu-icon {
  display: inline-grid;
  place-items: center;
  line-height: 1;
}

.topbar__menu-icon .app-icon {
  width: 1.2rem;
  height: 1.2rem;
}
.topbar__title { overflow: hidden; font-weight: 800; font-size: 1.15rem; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.topbar__subtitle { overflow: hidden; color: var(--muted); font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }

.topbar__end { display: flex; align-items: center; gap: 1rem; }
.topbar__user { display: flex; align-items: center; gap: .6rem; min-width: 0; flex-shrink: 1; }
.topbar__user-link {
  display: flex; align-items: center; gap: .6rem; min-width: 0;
  color: inherit; text-decoration: none; border-radius: 8px;
}
.topbar__user-link:hover { text-decoration: none; }
.topbar__user-link:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.topbar__avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--brand-light); color: var(--brand-dark);
  display: grid; place-items: center; font-weight: 800;
  flex-shrink: 0;
}
.topbar__userinfo { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.topbar__username {
  overflow: hidden;
  max-width: 12rem;
  font-weight: 700;
  font-size: .9rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.topbar__role { color: var(--muted); font-size: .78rem; }
.notif-bell {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  position: relative;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: background .12s, border-color .12s, transform .12s;
}
.notif-bell:hover {
  background: var(--brand-light);
  border-color: #99f6e4;
  color: var(--brand-dark);
  text-decoration: none;
  transform: translateY(-1px);
}
.notif-bell__icon {
  display: inline-grid;
  place-items: center;
  line-height: 1;
}

.notif-bell__icon .app-icon {
  width: 1.15rem;
  height: 1.15rem;
}
.notif-bell__count {
  min-width: 1.25rem;
  height: 1.25rem;
  display: grid;
  place-items: center;
  position: absolute;
  inset-block-start: -.38rem;
  inset-inline-end: -.38rem;
  padding: 0 .28rem;
  color: #fff;
  background: var(--danger);
  border: 2px solid #fff;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 800;
  line-height: 1;
}
.topbar__logout {
  flex-shrink: 0;
  background: none; border: 1px solid var(--border); color: var(--danger);
  border-radius: 8px; padding: .4rem .7rem; cursor: pointer; font-size: .85rem; font-weight: 700;
}
.topbar__logout:hover { background: var(--danger-bg); }
.topbar-search { display: inline-flex; flex-shrink: 0; align-items: center; gap: .4rem; min-height: 38px; padding: .4rem .55rem; color: var(--muted); cursor: pointer; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font: inherit; font-size: .78rem; }
.topbar-search:hover { color: var(--brand); border-color: rgba(15, 118, 110, .35); }
.topbar-search .app-icon { width: 1rem; height: 1rem; }
.topbar-search kbd { padding: .1rem .28rem; color: var(--muted); border: 1px solid var(--border); border-radius: 4px; background: var(--surface-soft); font-size: .66rem; }

.command-palette { width: min(620px, calc(100% - 1.5rem)); max-height: min(680px, calc(100vh - 2rem)); padding: 0; color: var(--ink); border: 0; border-radius: 14px; box-shadow: 0 30px 80px rgba(15, 23, 42, .32); }
.command-palette::backdrop { background: rgba(15, 23, 42, .45); backdrop-filter: blur(3px); }
.command-palette__panel { overflow: hidden; }
.command-palette__head { display: flex; align-items: center; gap: .65rem; padding: .8rem 1rem; border-bottom: 1px solid var(--border); }
.command-palette__head > .app-icon { width: 1.1rem; color: var(--brand); }
.command-palette__head input { flex: 1; min-width: 0; padding: .35rem 0; border: 0; outline: 0; font: inherit; font-size: 1rem; background: transparent; }
.command-palette__head button { width: 30px; height: 30px; color: var(--muted); cursor: pointer; border: 0; border-radius: 6px; background: var(--surface-soft); font-size: 1.15rem; }
.command-palette__results { max-height: 430px; overflow-y: auto; padding: .55rem; color: var(--muted); font-size: .85rem; }
.command-palette__status { margin: 0; padding: .85rem .7rem; }
.command-palette__status--error { color: var(--danger); }
.command-palette__results h3 { margin: .45rem .45rem .25rem; color: var(--muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; }
.command-result { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .65rem .7rem; color: var(--ink); border-radius: 8px; text-decoration: none; }
.command-result:hover, .command-result:focus { outline: none; color: var(--brand); background: var(--brand-light); text-decoration: none; }
.command-result > span:first-child { min-width: 0; }
.command-result strong, .command-result small { overflow: hidden; display: block; white-space: nowrap; text-overflow: ellipsis; }
.command-result small { margin-top: .1rem; color: var(--muted); font-size: .74rem; }
.command-result__type { flex-shrink: 0; padding: .2rem .4rem; color: var(--muted); border-radius: 999px; background: var(--surface-soft); font-size: .66rem; }
.command-palette__hint { margin: 0; padding: .55rem 1rem; color: var(--muted); border-top: 1px solid var(--border); font-size: .7rem; }
.btn--active { color: var(--brand); border-color: var(--brand); background: var(--brand-light); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* transform: translateZ(0) forces its own compositing layer -- without it,
   Safari can detach a `position: fixed` + `backdrop-filter` element during
   momentum scrolling and let it drift to a mid-screen position before
   snapping back once scrolling settles. */
.feedback-trigger { position: fixed; z-index: 24; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; inset-inline-end: 1rem; bottom: 1rem; color: var(--brand); cursor: pointer; border: 1px solid rgba(15, 118, 110, .3); border-radius: 50%; background: rgba(255, 255, 255, .94); box-shadow: var(--shadow-sm); transform: translateZ(0); -webkit-transform: translateZ(0); }
.feedback-trigger .app-icon { width: 1.15rem; height: 1.15rem; }
.feedback-trigger:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
.feedback-dialog { width: min(430px, calc(100% - 1.5rem)); padding: 0; color: var(--ink); border: 0; border-radius: 14px; box-shadow: 0 28px 70px rgba(15, 23, 42, .28); }
.feedback-dialog::backdrop { background: rgba(15, 23, 42, .45); }
.feedback-dialog__form { display: grid; gap: 1rem; padding: 1.1rem; }
.feedback-dialog__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.feedback-dialog__head h2 { margin: 0; font-size: 1.05rem; }
.feedback-dialog__head p { margin: .15rem 0 0; color: var(--muted); font-size: .8rem; }
.feedback-dialog__head button { width: 30px; height: 30px; cursor: pointer; border: 0; border-radius: 6px; background: var(--surface-soft); font-size: 1.1rem; }
.feedback-dialog fieldset { padding: 0; border: 0; }
.feedback-dialog legend, .feedback-dialog label { color: var(--ink); font-size: .8rem; font-weight: 700; }
.feedback-ratings { display: grid; grid-template-columns: repeat(5, 1fr); gap: .4rem; margin-top: .45rem; }
.feedback-ratings input { position: absolute; opacity: 0; }
.feedback-ratings span { display: grid; place-items: center; min-height: 40px; cursor: pointer; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.feedback-ratings input:checked + span { color: #fff; border-color: var(--brand); background: var(--brand); }
.feedback-ratings label:has(input:focus-visible) span { outline: 3px solid #38bdf8; outline-offset: 3px; }
.feedback-dialog textarea { display: block; width: 100%; margin-top: .35rem; }
.feedback-dialog__thanks { display: grid; justify-items: center; gap: 1rem; padding: 2rem 1.25rem; color: var(--success); text-align: center; font-weight: 800; }
.feedback-dialog__thanks[hidden] { display: none; }
.feedback-dialog__thanks p { margin: 0; }
.feedback-dialog__error { margin: 0; padding: .65rem .75rem; color: var(--danger); border: 1px solid rgba(180, 35, 24, .24); border-radius: var(--radius); background: var(--danger-bg); font-size: .82rem; }

/* Privacy controls stay available on every Firebase-enabled surface. */
.analytics-consent {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  width: min(720px, calc(100% - 2rem));
  margin: 1rem auto;
  padding: 1rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
}
.analytics-consent[hidden] { display: none; }
.analytics-consent__copy { min-width: 0; }
.analytics-consent__copy h2 { margin: 0; font-size: 1rem; font-weight: 800; }
.analytics-consent__copy p { margin: .25rem 0 0; color: var(--muted); font-size: .85rem; line-height: 1.55; }
.analytics-consent__actions { display: flex; flex: 0 0 auto; gap: .5rem; }
.topbar__privacy {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
}
.topbar__privacy:hover { color: var(--ink); background: var(--surface-muted, rgba(15, 118, 110, .08)); }
.landing-footer__links button {
  padding: 0;
  color: #667570;
  font: inherit;
  font-weight: 600;
  background: none;
  border: 0;
  cursor: pointer;
}
.landing-footer__links button:hover { color: var(--brand); }
.analytics-dialog {
  width: min(480px, calc(100% - 1.5rem));
  padding: 0;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
}
.analytics-dialog::backdrop { background: rgba(15, 23, 42, .45); }
.analytics-dialog__card { display: grid; gap: 1.25rem; padding: 1.25rem; }
.analytics-dialog__card h2 { margin: 0; font-size: 1.1rem; }
.analytics-dialog__card p { margin: .35rem 0 0; color: var(--muted); font-size: .88rem; }
.analytics-dialog__status { font-weight: 700; }
.analytics-dialog__actions { display: flex; flex-wrap: wrap; gap: .5rem; }

@media (max-width: 860px) {
  .feedback-trigger { bottom: calc(5.3rem + env(safe-area-inset-bottom)); }
  .topbar-search span, .topbar-search kbd { display: none; }

  .analytics-consent {
    align-items: stretch;
    flex-direction: column;
    gap: .8rem;
  }
  .analytics-consent__actions { display: grid; grid-template-columns: 1fr 1fr; }
  .analytics-consent__actions .btn { width: 100%; }
  .analytics-dialog__actions { display: grid; }
  .analytics-dialog__actions .btn { width: 100%; }
}

@media (max-width: 420px) {
  .analytics-consent__actions { grid-template-columns: 1fr; }
}

/* Mobile primary navigation */
.mobile-nav {
  position: fixed;
  inset-inline: .75rem;
  bottom: max(.65rem, env(safe-area-inset-bottom));
  z-index: 28;
  padding: .35rem;
  background: rgba(255, 255, 255, .94);
  border: 1px solid rgba(199, 212, 208, .9);
  border-radius: 14px;
  box-shadow: 0 18px 42px rgba(23, 32, 30, .20);
  backdrop-filter: blur(16px);
  /* Own compositing layer -- see .feedback-trigger comment above. Without
     this, iOS Safari can let the bar drift mid-screen during a scroll fling
     before it snaps back to the viewport edge. */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

.mobile-nav__item {
  display: grid;
  grid-template-rows: 1.3rem auto;
  place-items: center;
  gap: .12rem;
  min-width: 0;
  min-height: 50px;
  padding: .35rem .2rem;
  color: var(--muted);
  text-align: center;
  text-decoration: none;
  border-radius: 10px;
  transition: background .12s, color .12s, transform .12s;
}

.mobile-nav__more {
  border: 0;
  font: inherit;
  cursor: pointer;
}

.mobile-nav__item:hover {
  color: var(--brand-dark);
  background: var(--brand-light);
  text-decoration: none;
}

.mobile-nav__item--active {
  color: #fff;
  background: var(--brand);
  box-shadow: 0 8px 16px rgba(15, 118, 110, .22);
}

.mobile-nav__icon {
  display: inline-grid;
  place-items: center;
  line-height: 1;
}

.mobile-nav__icon .app-icon {
  width: 1.08rem;
  height: 1.08rem;
}

.mobile-nav__label {
  overflow: hidden;
  max-width: 100%;
  font-size: .68rem;
  font-weight: 800;
  line-height: 1.12;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Language switcher */
.lang-switch {
  display: inline-flex;
  flex-shrink: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.lang-switch__link {
  padding: .3rem .55rem;
  font-size: .78rem;
  font-weight: 700;
  color: var(--muted);
  text-decoration: none;
  background: #fff;
}
.lang-switch__link:hover { background: var(--brand-light); text-decoration: none; }
.lang-switch__link--active { background: var(--brand); color: #fff; }

@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .shell--collapsed { grid-template-columns: 1fr; }
  .shell--collapsed .sidebar {
    padding: 1.1rem 0.9rem;
  }
  .shell--collapsed .sidebar__brand {
    justify-content: flex-start;
    padding: .4rem .6rem 1.1rem;
  }
  .shell--collapsed .sidebar__name,
  .shell--collapsed .nav__label,
  .shell--collapsed .nav__section {
    display: initial;
  }
  .shell--collapsed .nav__section {
    display: block;
  }
  .shell--collapsed .nav__item {
    justify-content: flex-start;
    gap: .7rem;
    padding: .6rem .7rem;
  }
  .shell--collapsed .nav__icon {
    width: 1.4rem;
  }
  .sidebar {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset-inline-start: 0;
    top: 0;
    width: var(--sidebar-width);
    z-index: 40;
    transform: translateX(-100%);
    transition: transform .2s ease;
  }
  .sidebar .nav { flex: 1; }
  .sidebar__mobile-footer {
    display: grid;
    gap: .75rem;
    margin-top: 1rem;
    padding: .9rem .6rem .25rem;
    border-top: 1px solid rgba(255,255,255,.12);
  }
  .sidebar__user {
    display: flex;
    align-items: center;
    gap: .65rem;
    min-width: 0;
  }
  .sidebar__avatar {
    width: 38px;
    height: 38px;
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    color: var(--brand-dark);
    background: #ccfbf1;
    border-radius: 50%;
    font-weight: 800;
  }
  .sidebar__user > div:last-child {
    min-width: 0;
    display: grid;
    line-height: 1.3;
  }
  .sidebar__user strong {
    overflow: hidden;
    color: #fff;
    font-size: .88rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .sidebar__user span {
    color: #99f6e4;
    font-size: .75rem;
  }
  .sidebar__mobile-actions {
    display: flex;
    align-items: stretch;
    gap: .5rem;
  }
  .sidebar__mobile-actions .lang-switch {
    flex: 1;
    border-color: rgba(255,255,255,.18);
  }
  .sidebar__mobile-actions .lang-switch__link {
    flex: 1;
    display: grid;
    min-height: 44px;
    place-items: center;
  }
  .sidebar__mobile-actions .button_to { flex: 1; }
  .sidebar__logout {
    width: 100%;
    min-height: 40px;
    padding: .4rem .65rem;
    color: #fff;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 8px;
    background: rgba(255,255,255,.08);
    font: inherit;
    font-size: .78rem;
    font-weight: 700;
  }
  [dir="rtl"] .sidebar { transform: translateX(100%); }
  .shell--open .sidebar { transform: translateX(0); }
  .shell--open .shell__overlay {
    display: block;
    position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 30;
  }
}


/* ---------- Auth pages ---------- */
.auth {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background:
    radial-gradient(1200px 500px at 100% -10%, rgba(15, 118, 110, 0.12), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(214, 162, 58, 0.10), transparent 55%),
    var(--bg);
}

.auth__card {
  width: 100%;
  max-width: 420px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 2rem 1.75rem;
}

.auth__brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  justify-content: center;
  margin-bottom: 1.25rem;
}

.auth__logo {
  width: 56px;
  height: 56px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(15, 118, 110, 0.28);
}
.auth__logo img { display: block; width: 100%; height: 100%; }

.auth__brand-name { font-size: 1.22rem; font-weight: 800; }

.auth__title {
  margin: 0 0 .25rem;
  font-size: 1.35rem;
  font-weight: 800;
  text-align: center;
}

.auth__subtitle {
  margin: 0 0 1.5rem;
  color: var(--muted);
  text-align: center;
  font-size: .95rem;
}

.auth__footer {
  margin-top: 1.25rem;
  text-align: center;
  font-size: .9rem;
  color: var(--muted);
}

.auth__separator {
  margin-inline: .5rem;
  color: var(--border);
}

/* ---------- Public landing page ---------- */
.landing {
  --landing-deep: #0b3835;
  --landing-teal: #0f766e;
  --landing-mint: #dff8f1;
  min-height: 100vh;
  overflow: hidden;
  background: #fcfdfb;
  color: var(--ink);
}

.landing a:hover { text-decoration: none; }

.landing-flash {
  width: min(1120px, calc(100% - 3rem));
  margin: 1rem auto 0;
  padding: .85rem 1rem;
  border: 1px solid #a9d8cf;
  border-radius: var(--radius);
  color: var(--brand-dark);
  background: var(--brand-light);
  font-size: .9rem;
  font-weight: 650;
}

.landing-flash--alert {
  border-color: #f2b8b2;
  color: var(--danger);
  background: var(--danger-bg);
}

.trial-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.trial-banner > span:first-child { min-width: 0; }
.trial-banner .button_to { flex: 0 0 auto; }

.landing--motion-ready .landing-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .65s ease, transform .65s cubic-bezier(.22, 1, .36, 1);
}

.landing--motion-ready .landing-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.landing--motion-ready .feature-grid .landing-reveal:nth-child(2),
.landing--motion-ready .role-grid .landing-reveal:nth-child(2) { transition-delay: .08s; }
.landing--motion-ready .feature-grid .landing-reveal:nth-child(3),
.landing--motion-ready .role-grid .landing-reveal:nth-child(3) { transition-delay: .16s; }
.landing--motion-ready .feature-grid .landing-reveal:nth-child(4) { transition-delay: .08s; }
.landing--motion-ready .feature-grid .landing-reveal:nth-child(5) { transition-delay: .16s; }
.landing--motion-ready .feature-grid .landing-reveal:nth-child(6) { transition-delay: .24s; }

.landing-nav {
  width: min(1280px, calc(100% - 3rem));
  min-height: 78px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  align-items: center;
  gap: clamp(.75rem, 1.1vw, 1.1rem);
  position: relative;
  z-index: 10;
}

.landing-brand {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  width: max-content;
  color: var(--ink);
  font-size: 1.18rem;
  font-weight: 800;
  letter-spacing: -.02em;
}

.landing-brand__logo {
  display: block;
  width: 48px;
  height: 48px;
  overflow: hidden;
  border-radius: 13px;
  box-shadow: 0 8px 20px rgba(15, 118, 110, .18);
}

.landing-brand__logo img { display: block; width: 100%; height: 100%; }
.landing-nav > .landing-brand { min-width: 44px; min-height: 44px; }

.landing-nav__links {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  gap: clamp(.65rem, 1vw, 1.1rem);
}

.landing-nav__links a {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
  padding-inline: .25rem;
  color: #475467;
  font-size: .9rem;
  font-weight: 650;
  line-height: 1.2;
  white-space: nowrap;
}
.landing-nav__links a:hover { color: var(--brand); }

.landing-nav__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
  min-width: max-content;
  gap: .5rem;
}

.landing-nav__actions .landing-btn { white-space: nowrap; }
.landing-nav__actions .landing-btn--small { min-height: 44px; padding-inline: .8rem; }
.landing-nav__actions .lang-switch__link {
  display: inline-grid;
  min-width: 44px;
  min-height: 44px;
  place-items: center;
}

.landing-btn {
  min-height: 49px;
  padding: .75rem 1.2rem;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  font-weight: 750;
  font-size: .94rem;
  border: 1px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.landing-btn:hover { transform: translateY(-2px); }
.landing-btn--small { min-height: 40px; padding: .48rem 1rem; border-radius: 10px; font-size: .87rem; }
.landing-btn--outline { color: var(--brand-dark); border-color: #b7d3ce; background: rgba(255,255,255,.7); }
.landing-btn--outline:hover { border-color: var(--brand); background: #fff; }
.landing-btn--primary { background: var(--brand); color: #fff; box-shadow: 0 12px 26px rgba(15,118,110,.22); }
.landing-btn--primary:hover { background: var(--brand-dark); box-shadow: 0 15px 32px rgba(15,118,110,.28); }
.landing-btn--ghost { color: var(--ink); background: #fff; border-color: var(--border); }
.landing-btn--ghost:hover { border-color: #9ebbb6; box-shadow: var(--shadow-sm); }
.landing-btn--light { color: var(--brand-dark); background: #fff; box-shadow: 0 16px 34px rgba(0,0,0,.18); }

.landing-hero {
  width: min(1180px, calc(100% - 3rem));
  margin: 0 auto;
  min-height: 650px;
  padding: 5.1rem 0 6.7rem;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(560px, 1.1fr);
  align-items: center;
  gap: 4rem;
  position: relative;
}

.landing-hero::before {
  content: "";
  position: absolute;
  width: 650px;
  height: 650px;
  inset-block-start: -210px;
  inset-inline-start: -390px;
  border: 1px solid rgba(15,118,110,.08);
  border-radius: 50%;
  box-shadow: 0 0 0 90px rgba(15,118,110,.025), 0 0 0 180px rgba(15,118,110,.018);
  pointer-events: none;
}

.landing-hero__copy { position: relative; z-index: 2; }

/* Single-column hero for content pages (e.g. About) that have no product preview. */
.landing-hero--about { grid-template-columns: 1fr; min-height: auto; padding-bottom: 3rem; text-align: center; }
.landing-hero--about .landing-hero__copy { max-width: 760px; margin: 0 auto; }
.landing-hero--about .landing-eyebrow { justify-content: center; }

.landing-eyebrow {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: 1.15rem;
  color: var(--brand);
  font-size: .76rem;
  line-height: 1.3;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .11em;
}

.landing-eyebrow > span { width: 24px; height: 2px; background: var(--accent); border-radius: 2px; }

.landing-hero h1 {
  max-width: 670px;
  margin: 0;
  color: #12211f;
  font-size: clamp(3.1rem, 5.2vw, 5.15rem);
  line-height: .99;
  letter-spacing: -.058em;
  font-weight: 820;
}

.landing-hero h1 em { color: var(--brand); font-style: normal; }
.landing-hero__lead { max-width: 610px; margin: 1.6rem 0 0; color: #5a6966; font-size: 1.1rem; line-height: 1.75; }
.landing-hero__actions { display: flex; align-items: center; gap: .75rem; margin-top: 2rem; }

.landing-trust { display: flex; flex-wrap: wrap; gap: 1rem 1.35rem; margin-top: 1.7rem; color: #60706d; font-size: .76rem; font-weight: 650; }
.landing-trust span { display: inline-flex; align-items: center; gap: .35rem; }
.landing-trust .app-icon { color: var(--brand); width: .95rem; height: .95rem; }

.product-preview { position: relative; min-height: 470px; direction: ltr; }
.product-preview__glow { position: absolute; inset: 5% -12% -8% 0; background: radial-gradient(circle at 50% 48%, rgba(36,177,158,.27), rgba(15,118,110,.08) 43%, transparent 70%); filter: blur(8px); }

.product-window {
  --preview-default-rotate-y: -3deg;
  position: absolute;
  inset: 2rem -2.6rem 1rem 0;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid rgba(19,78,74,.14);
  border-radius: 18px;
  background: #f5f8f6;
  box-shadow: 0 35px 70px rgba(19,78,74,.2), 0 8px 24px rgba(19,78,74,.12);
  transform: perspective(1200px)
    rotateY(var(--preview-rotate-y, var(--preview-default-rotate-y)))
    rotateX(var(--preview-rotate-x, 1deg));
  transform-origin: center left;
  transition: transform .18s ease-out;
}

[dir="rtl"] .product-window { --preview-default-rotate-y: 3deg; transform-origin: center right; }

.product-window__rail { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: .75rem .5rem; background: linear-gradient(180deg, #123f3b, #0b3431); }
.product-window__mini-logo { width: 37px; height: 37px; overflow: hidden; border-radius: 9px; margin-bottom: .65rem; }
.product-window__mini-logo img { display: block; width: 100%; height: 100%; }
.product-window__rail-icon { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 8px; color: #91bbb5; }
.product-window__rail-icon.is-active { color: #fff; background: rgba(22,150,137,.8); }
.product-window__rail-icon .app-icon { width: 15px; height: 15px; }

.product-window__body { min-width: 0; padding: 1rem; }
.product-window__topbar { display: flex; justify-content: space-between; align-items: center; padding-bottom: .9rem; }
.product-window__topbar > div { display: flex; flex-direction: column; }
.product-window__topbar strong { font-size: .86rem; line-height: 1.35; }
.product-window__topbar span { color: #788480; font-size: .56rem; }
.product-window__avatar { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; color: #fff !important; background: var(--brand); font-size: .7rem !important; font-weight: 800; }

.preview-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.preview-stats > div { min-height: 74px; padding: .65rem .7rem; display: grid; grid-template-columns: 1fr auto; align-items: end; border: 1px solid #e1e9e6; border-radius: 9px; background: #fff; box-shadow: 0 4px 12px rgba(23,32,30,.035); }
.preview-stats span { grid-column: 1/-1; color: #798581; font-size: .53rem; }
.preview-stats strong { font-size: 1.2rem; line-height: 1; }
.preview-stats small { color: var(--brand); font-size: .5rem; font-weight: 700; }

.preview-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: .65rem; margin-top: .65rem; }
.preview-card { min-width: 0; min-height: 205px; padding: .85rem; border: 1px solid #e1e9e6; border-radius: 9px; background: #fff; }
.preview-card__heading { min-height: 30px; display: flex; justify-content: space-between; align-items: flex-start; }
.preview-card__heading strong { font-size: .66rem; }
.preview-card__heading > span { color: #89938f; font-size: .49rem; }
.preview-card--chart svg { width: 100%; height: 135px; overflow: visible; }
.preview-chart__grid { stroke: #edf1ef; stroke-width: 1; }
.preview-chart__area { fill: url(#landing-chart-fill); }
.preview-chart__line { fill: none; stroke: var(--brand); stroke-width: 3; stroke-linecap: round; }
.preview-count { min-width: 19px; height: 19px; display: grid; place-items: center; border-radius: 6px; color: #a54f0b !important; background: #fff4df; font-weight: 800; }
.preview-student { display: grid; grid-template-columns: 25px 1fr 6px; gap: .45rem; align-items: center; padding: .55rem 0; border-bottom: 1px solid #edf1ef; }
.preview-student:last-child { border-bottom: 0; }
.preview-student__avatar { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 7px; color: var(--brand-dark); background: var(--brand-light); font-size: .57rem; font-weight: 800; }
.preview-student > span:nth-child(2) { display: flex; min-width: 0; flex-direction: column; }
.preview-student strong { overflow: hidden; font-size: .51rem; white-space: nowrap; text-overflow: ellipsis; }
.preview-student small { overflow: hidden; color: #89938f; font-size: .42rem; white-space: nowrap; text-overflow: ellipsis; }
.preview-student i { width: 5px; height: 5px; border-radius: 50%; background: #d88824; }

.preview-float { position: absolute; z-index: 3; display: flex; align-items: center; gap: .55rem; min-width: 160px; padding: .7rem .8rem; border: 1px solid rgba(15,118,110,.13); border-radius: 10px; background: rgba(255,255,255,.94); box-shadow: 0 16px 34px rgba(19,78,74,.15); backdrop-filter: blur(8px); }
.preview-float > .app-icon { width: 26px; height: 26px; padding: 5px; border-radius: 7px; color: var(--brand); background: var(--brand-light); }
.preview-float > span { display: flex; flex-direction: column; font-size: .59rem; font-weight: 800; }
.preview-float small { color: #89938f; font-size: .47rem; font-weight: 500; }
.preview-float--top { inset-block-start: 0; inset-inline-end: -1.5rem; }
.preview-float--bottom { inset-block-end: -.3rem; inset-inline-start: -1.8rem; }
.preview-float--bottom > .app-icon { color: #a06e0c; background: #fff6df; }

.landing-proof { padding: 2.3rem 1.5rem; border-top: 1px solid #e7ece9; border-bottom: 1px solid #e7ece9; background: #fff; text-align: center; }
.landing-proof p { margin: 0 0 1.1rem; color: #89938f; font-size: .7rem; font-weight: 750; text-transform: uppercase; letter-spacing: .12em; }
.landing-proof > div { display: flex; justify-content: center; flex-wrap: wrap; gap: 2rem 4.5rem; }
.landing-proof span { display: inline-flex; align-items: center; gap: .55rem; color: #52615e; font-size: .9rem; font-weight: 750; }
.landing-proof .app-icon { color: #87a09b; width: 1.15rem; height: 1.15rem; }

.landing-section { width: min(1120px, calc(100% - 3rem)); margin: 0 auto; padding: 7.5rem 0; }
.landing-section__intro { max-width: 670px; margin: 0 auto 3.2rem; text-align: center; }
.landing-section__intro .landing-eyebrow { justify-content: center; }
.landing-section__intro h2, .landing-workflow h2, .landing-cta h2 { margin: 0; font-size: clamp(2rem, 3.5vw, 3.2rem); line-height: 1.12; letter-spacing: -.045em; }
.landing-section__intro > p { max-width: 620px; margin: 1rem auto 0; color: #667570; font-size: 1rem; line-height: 1.75; }

.landing-tour { padding-top: 6.5rem; }
.tour-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.tour-card { padding: 1.5rem; border: 1px solid #dfe8e4; border-radius: 18px; background: #fff; box-shadow: 0 16px 42px rgba(23,32,30,.06); }
.tour-card__top { display: flex; align-items: center; justify-content: space-between; color: var(--brand); }
.tour-card__top > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--brand); font-size: .78rem; font-weight: 800; }
.tour-card__top .app-icon { width: 24px; height: 24px; }
.tour-card h3 { margin: 1.25rem 0 .45rem; font-size: 1.05rem; }
.tour-card > p { min-height: 4.6rem; margin: 0; color: #667570; font-size: .84rem; line-height: 1.7; }
.tour-card__screen { min-height: 120px; margin-top: 1.35rem; padding: 1rem 1.25rem; border: 1px solid #dce8e4; border-radius: 12px; background: #f4f8f6; }

.tour-card__screen--organize { display: flex; align-items: center; }
.mini-avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(145deg, #b9ddd5, #e5f0ed); border: 2px solid #f4f8f6; box-shadow: 0 4px 10px rgba(15,118,110,.12); margin-inline-start: -14px; }
.mini-avatar:first-child { margin-inline-start: 0; }
.mini-avatar--add { display: grid; place-items: center; background: var(--brand); color: #fff; font-weight: 800; font-size: 1.1rem; }

.tour-card__screen--run { display: flex; flex-direction: column; justify-content: center; gap: .65rem; }
.mini-check { display: flex; align-items: center; gap: .6rem; }
.mini-check i { position: relative; flex: none; width: 18px; height: 18px; border-radius: 6px; border: 1.5px solid #b9ddd5; background: #fff; }
.mini-check span { flex: 1; height: 8px; border-radius: 4px; background: #d9e8e3; }
.mini-check--done i { background: var(--brand); border-color: var(--brand); }
.mini-check--done i::after { content: ""; position: absolute; inset: 0; margin: auto; width: 8px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translate(1px, -1px); }
.mini-check--done span { background: #b9ddd5; }

.tour-card__screen--understand { display: flex; align-items: flex-end; gap: .5rem; height: 120px; }
.mini-bar { flex: 1; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, #b9ddd5, #e5f0ed); }
.mini-bar:nth-child(1) { height: 28px; }
.mini-bar:nth-child(2) { height: 46px; }
.mini-bar:nth-child(3) { height: 36px; }
.mini-bar:nth-child(4) { height: 64px; }
.mini-bar:nth-child(5) { height: 52px; background: linear-gradient(180deg, var(--brand), #14988a); }

.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.feature-card { position: relative; min-height: 270px; padding: 1.65rem; overflow: hidden; border: 1px solid #e1e9e6; border-radius: 16px; background: #fff; transition: transform .2s ease, box-shadow .2s ease; }
.feature-card::after { content: ""; position: absolute; width: 130px; height: 130px; inset-block-start: -74px; inset-inline-end: -65px; border-radius: 50%; background: var(--card-soft); opacity: .72; }
.feature-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(23,32,30,.08); }
.feature-card__icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; color: var(--card-color); background: var(--card-soft); }
.feature-card__icon .app-icon { width: 21px; height: 21px; }
.feature-card h3 { margin: 1.25rem 0 .55rem; font-size: 1.05rem; line-height: 1.35; }
.feature-card p { margin: 0; color: #697773; font-size: .87rem; line-height: 1.7; }
.feature-card__detail { position: absolute; inset-inline: 1.65rem; inset-block-end: 1.35rem; color: var(--card-color); font-size: .67rem; font-weight: 750; }
.feature-card--teal { --card-color: #0f766e; --card-soft: #e5f7f2; }
.feature-card--blue { --card-color: #2563a5; --card-soft: #eaf3fc; }
.feature-card--gold { --card-color: #a16c0c; --card-soft: #fff5dc; }
.feature-card--green { --card-color: #37764c; --card-soft: #eaf6ed; }
.feature-card--purple { --card-color: #7958a6; --card-soft: #f2ecfa; }
.feature-card--rose { --card-color: #a85263; --card-soft: #faedf0; }

.landing-workflow { min-height: 650px; padding: 6.5rem max(1.5rem, calc((100vw - 1120px) / 2)); display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 7rem; color: #fff; background: radial-gradient(circle at 78% 40%, rgba(32,152,139,.24), transparent 25%), linear-gradient(135deg, #0d4541, #092f2d); }
.landing-workflow__copy > p { max-width: 560px; margin: 1.1rem 0 2.2rem; color: #bad4cf; line-height: 1.8; }
.landing-eyebrow--light { color: #bce9e1; }
.workflow-steps { display: grid; gap: 1.2rem; }
.workflow-step { display: grid; grid-template-columns: 37px 1fr; gap: .85rem; align-items: start; }
.workflow-step > span { width: 35px; height: 35px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.18); border-radius: 10px; color: #fff; background: rgba(255,255,255,.07); font-size: .8rem; font-weight: 800; }
.workflow-step strong { font-size: .93rem; }
.workflow-step p { margin: .18rem 0 0; color: #a9c9c3; font-size: .78rem; line-height: 1.55; }

.workflow-visual { position: relative; min-height: 410px; display: grid; place-items: center; }
.workflow-visual__ring { position: absolute; border: 1px solid rgba(166,225,216,.21); border-radius: 50%; }
.workflow-visual__ring--one { width: 250px; height: 250px; }
.workflow-visual__ring--two { width: 385px; height: 385px; border-style: dashed; }
.workflow-visual__center { position: relative; z-index: 2; width: 125px; height: 125px; display: grid; place-content: center; justify-items: center; gap: .45rem; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; background: rgba(255,255,255,.08); box-shadow: 0 0 60px rgba(57,205,185,.15); backdrop-filter: blur(8px); }
.workflow-visual__center img { width: 64px; height: 64px; border-radius: 17px; }
.workflow-visual__center strong { font-size: .76rem; }
.workflow-orbit { position: absolute; z-index: 3; width: 72px; height: 72px; display: grid; place-content: center; justify-items: center; gap: .25rem; border: 1px solid rgba(255,255,255,.13); border-radius: 17px; background: #164f4a; box-shadow: 0 15px 30px rgba(0,0,0,.2); }
.workflow-orbit .app-icon { width: 21px; height: 21px; color: #73d1c4; }
.workflow-orbit small { color: #d5ebe7; font-size: .58rem; font-weight: 700; }
.workflow-orbit--one { inset-block-start: 20px; inset-inline-start: 28%; }
.workflow-orbit--two { inset-block-end: 35px; inset-inline-start: 16%; }
.workflow-orbit--three { inset-block-start: 44%; inset-inline-end: 7%; }

.landing-roles { padding-bottom: 8rem; }
.role-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.role-card { padding: 1.8rem; border-top: 3px solid var(--brand); border-radius: 4px 4px 14px 14px; background: #f3f7f5; transition: transform .2s ease, box-shadow .2s ease; }
.role-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(23,32,30,.08); }
.role-card > span { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 11px; color: var(--brand); background: #fff; box-shadow: var(--shadow-sm); }
.role-card h3 { margin: 1.2rem 0 .45rem; font-size: 1rem; }
.role-card p { margin: 0; color: #667570; font-size: .83rem; line-height: 1.7; }

.faq-list { max-width: 760px; margin: 0 auto; display: grid; gap: .75rem; }
.faq-item { padding: 1.1rem 1.4rem; border: 1px solid #dfe8e4; border-radius: 14px; background: #fff; transition: border-color .2s ease, box-shadow .2s ease; }
.faq-item:hover { border-color: var(--brand); box-shadow: 0 8px 24px rgba(23,32,30,.06); }
.faq-item summary { cursor: pointer; font-weight: 700; font-size: .98rem; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; float: inline-end; color: var(--brand); font-weight: 400; }
.faq-item[open] summary::after { content: "\2013"; }
.faq-item p { margin: .85rem 0 0; color: #667570; font-size: .9rem; line-height: 1.7; }

.landing-cta { margin: 0 1.5rem 1.5rem; padding: 5.8rem 1.5rem; position: relative; overflow: hidden; border-radius: 24px; color: #fff; background: radial-gradient(circle at 15% 20%, rgba(93,215,197,.25), transparent 28%), radial-gradient(circle at 85% 80%, rgba(214,162,58,.18), transparent 25%), var(--brand-dark); text-align: center; }
.landing-cta::before, .landing-cta::after { content: ""; position: absolute; width: 310px; height: 310px; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; }
.landing-cta::before { inset: -180px auto auto -90px; box-shadow: 0 0 0 60px rgba(255,255,255,.025); }
.landing-cta::after { inset: auto -100px -200px auto; box-shadow: 0 0 0 60px rgba(255,255,255,.025); }
.landing-cta > div { position: relative; z-index: 2; max-width: 760px; margin: auto; }
.landing-cta__mark { display: block; width: 68px; height: 68px; margin: 0 auto 1.5rem; overflow: hidden; border-radius: 18px; box-shadow: 0 12px 30px rgba(0,0,0,.22); }
.landing-cta__mark img { display: block; width: 100%; height: 100%; }
.landing-cta p { max-width: 630px; margin: 1rem auto 1.6rem; color: #c4ddd8; line-height: 1.75; }

.landing-start { padding-top: 6.5rem; padding-bottom: 5rem; }
.start-steps { max-width: 880px; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; }
.start-steps li { position: relative; padding: 0 1.25rem; text-align: center; }
.start-steps li:not(:last-child)::after { content: ""; position: absolute; inset-block-start: 21px; inset-inline-start: calc(50% + 30px); width: calc(100% - 60px); border-top: 1px dashed #a8c7c0; }
.start-steps li > span { position: relative; z-index: 1; width: 42px; height: 42px; margin: auto; display: grid; place-items: center; border: 1px solid #9bc5bc; border-radius: 50%; color: var(--brand); background: #fff; font-size: .8rem; font-weight: 800; }
.start-steps h3 { margin: 1rem 0 .4rem; font-size: 1rem; }
.start-steps p { margin: 0; color: #667570; font-size: .82rem; line-height: 1.65; }
.confidence-grid { margin-top: 3.5rem; padding: 1.25rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; border-radius: 16px; background: #f3f8f6; }
.confidence-grid > div { display: flex; align-items: flex-start; gap: .7rem; }
.confidence-grid .app-icon { flex: 0 0 auto; width: 20px; height: 20px; color: var(--brand); }
.confidence-grid span { display: grid; gap: .22rem; }
.confidence-grid strong { font-size: .78rem; }
.confidence-grid small { color: #6b7975; font-size: .7rem; line-height: 1.45; }

.landing-contact {
  width: min(1120px, calc(100% - 3rem));
  margin: 7rem auto;
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(520px, 1.2fr);
  gap: 5rem;
  align-items: start;
}

.landing-contact__copy { position: sticky; top: 2rem; }
.landing-contact h2 { margin: 0; font-size: clamp(2rem, 3.5vw, 3.2rem); line-height: 1.12; letter-spacing: -.045em; }
.landing-contact__copy > p { margin: 1rem 0 1.8rem; color: #667570; line-height: 1.75; }
.landing-contact__promise { display: flex; align-items: flex-start; gap: .75rem; padding: 1rem; border-radius: 12px; color: var(--brand-dark); background: var(--brand-light); }
.landing-contact__promise .app-icon { flex: 0 0 auto; margin-top: .15rem; color: var(--brand); }
.landing-contact__promise span { display: grid; gap: .2rem; color: #56706b; font-size: .82rem; line-height: 1.55; }
.landing-contact__promise strong { color: var(--brand-dark); font-size: .9rem; }

.landing-contact__form { padding: 2rem; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); box-shadow: 0 20px 50px rgba(23,32,30,.08); }
.landing-contact__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.landing-contact__form .field { display: grid; gap: .4rem; }
.landing-contact__form label { color: #3d4c49; font-size: .82rem; font-weight: 700; }
.landing-contact__form .input { min-height: 48px; background: #fbfcfa; }
.landing-contact__form textarea.input { min-height: 130px; resize: vertical; }
.landing-contact__message { grid-column: 1 / -1; }
.landing-contact__form .landing-btn { margin-top: 1.2rem; width: 100%; cursor: pointer; }
.landing-contact__privacy { margin: .75rem 0 0; color: var(--muted); font-size: .72rem; text-align: center; }

.landing-footer { min-height: 115px; width: min(1120px, calc(100% - 3rem)); margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.landing-footer .landing-brand { font-size: 1rem; }
.landing-footer .landing-brand__logo { width: 40px; height: 40px; border-radius: 11px; }
.landing-footer p { color: #7b8884; font-size: .78rem; }
.landing-footer__links { display: flex; gap: 1.1rem; font-size: .82rem; }
.landing-footer__links a { color: #667570; font-weight: 600; }
.landing-footer__links a:hover { color: var(--brand); }

.callout--info { padding: 1rem; border: 1px solid #b9d9d2; border-radius: var(--radius); color: var(--brand-dark); background: var(--brand-light); }
.callout--info strong, .callout--info span { display: block; }
.callout--info span { margin-top: .25rem; color: var(--muted); font-size: .82rem; line-height: 1.55; }

@media (max-width: 1200px) {
  .landing-nav { grid-template-columns: auto 1fr; }
  .landing-nav__links { display: none; }
}

@media (max-width: 1050px) {
  .landing-hero { grid-template-columns: 1fr; gap: 3rem; padding-top: 4rem; }
  .landing-hero__copy { max-width: 730px; text-align: center; margin: auto; }
  .landing-hero .landing-eyebrow, .landing-hero__actions, .landing-trust { justify-content: center; }
  .product-preview { width: min(720px, 100%); margin: auto; }
  .product-window { inset-inline: 1.5rem; }
  .preview-float--top { inset-inline-end: 0; }
  .preview-float--bottom { inset-inline-start: 0; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .landing-workflow { grid-template-columns: 1fr; gap: 3rem; }
  .landing-workflow__copy { max-width: 700px; }
  .workflow-visual { width: min(520px, 100%); margin: auto; }
  .landing-contact { grid-template-columns: 1fr; gap: 2.5rem; }
  .landing-contact__copy { position: static; max-width: 700px; }
  .confidence-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .landing-nav { width: min(100% - 1.5rem, 1180px); min-height: 70px; gap: .5rem; }
  .landing-brand { font-size: 1rem; }
  .landing-nav > .landing-brand { gap: .5rem; font-size: .95rem; }
  .landing-brand__logo { width: 40px; height: 40px; border-radius: 11px; }
  .landing-nav__actions .lang-switch { display: none; }
  .landing-nav__center-action { display: none; }
  .landing-nav__actions { gap: .3rem; }
  .landing-nav__actions .landing-btn--small {
    min-width: 44px;
    min-height: 44px;
    padding-inline: .55rem;
    font-size: .82rem;
  }
  .landing-hero { width: min(100% - 1.5rem, 1180px); padding: 3.3rem 0 4.5rem; }
  .landing-hero h1 { font-size: clamp(2.65rem, 13vw, 4rem); }
  .landing-hero__lead { font-size: .98rem; }
  .landing-hero__actions { align-items: stretch; flex-direction: column; }
  .landing-hero__actions .landing-btn { width: 100%; }
  .landing-trust { gap: .7rem 1rem; }
  .product-preview { min-height: 360px; }
  .product-window { inset: 1.2rem 0 .5rem; grid-template-columns: 42px 1fr; transform: none; }
  [dir="rtl"] .product-window { transform: none; }
  .product-window__rail { gap: .7rem; padding-inline: .3rem; }
  .product-window__mini-logo { width: 31px; height: 31px; }
  .product-window__rail-icon { width: 25px; height: 25px; }
  .product-window__body { padding: .7rem; }
  .preview-stats > div { min-height: 62px; padding: .5rem; }
  .preview-stats strong { font-size: .95rem; }
  .preview-grid { grid-template-columns: 1fr; }
  .preview-card--chart { min-height: 150px; }
  .preview-card--chart svg { height: 90px; }
  .preview-card--attention { display: none; }
  .preview-float { min-width: 140px; padding: .55rem .65rem; }
  .preview-float--top { inset-block-start: 0; }
  .preview-float--bottom { inset-block-end: -1rem; }
  .landing-proof > div { gap: 1rem 1.7rem; }
  .landing-proof span { font-size: .8rem; }
  .landing-section { width: min(100% - 1.5rem, 1120px); padding: 5rem 0; }
  .landing-section__intro { margin-bottom: 2.2rem; }
  .tour-grid, .start-steps, .confidence-grid { grid-template-columns: 1fr; }
  .tour-card > p { min-height: 0; }
  .start-steps { gap: 1.5rem; }
  .start-steps li:not(:last-child)::after { display: none; }
  .feature-grid, .role-grid { grid-template-columns: 1fr; }
  .feature-card { min-height: 250px; }
  .landing-workflow { padding: 5rem 1.25rem; }
  .workflow-visual { min-height: 330px; transform: scale(.82); }
  .workflow-visual__ring--two { width: 360px; height: 360px; }
  .landing-cta { margin: 0 .75rem .75rem; padding: 4.5rem 1.2rem; border-radius: 18px; }
  .landing-contact { width: min(100% - 1.5rem, 1120px); margin: 5rem auto; }
  .landing-contact__form { padding: 1.2rem; }
  .landing-contact__fields { grid-template-columns: 1fr; }
  .landing-contact__message { grid-column: auto; }
  .landing-footer { width: calc(100% - 2rem); padding: 1.5rem 0; flex-direction: column; text-align: center; }
  .trial-banner { align-items: stretch; flex-direction: column; }
  .trial-banner .btn { width: 100%; }
}

@media (max-width: 380px) {
  .landing-brand__wordmark { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .landing-btn, .feature-card, .product-window, .landing-reveal { transition: none; }
}

/* ---------- Forms ---------- */
.field { margin-bottom: 1rem; }

.field label {
  display: block;
  margin-bottom: .4rem;
  font-size: .88rem;
  font-weight: 600;
  color: var(--ink);
}

/* Native time controls break their segment order inside an RTL document. */
.input--time,
.input--numeric {
  direction: ltr;
  text-align: left;
  unicode-bidi: isolate;
}

.input {
  width: 100%;
  min-height: 44px;
  padding: .68rem .85rem;
  font-size: 1rem;
  font-family: inherit;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: border-color .15s, box-shadow .15s;
}

input.input,
select.input { height: 44px; }

.input::placeholder { color: #9ca3af; }

.input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.16);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  width: 100%;
  min-height: 44px;
  padding: .75rem 1rem;
  font-size: 1rem;
  font-weight: 700;
  font-family: inherit;
  line-height: 1;
  color: #fff;
  background: var(--brand);
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(15, 118, 110, 0.16);
  transition: background .15s, border-color .15s, box-shadow .15s, transform .02s;
}

.btn:hover {
  background: var(--brand-dark);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(15, 118, 110, 0.18);
}
.button_to,
.button_to:hover,
.button_to .btn,
.button_to .btn:hover { text-decoration: none; }
.button_to {
  display: inline-flex;
  align-items: stretch;
  margin: 0;
}
.button_to .btn { width: auto; }
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.18);
}
.btn:active { transform: translateY(1px); }
.btn:disabled,
.btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .6;
  pointer-events: none;
}

/* ---------- Flash messages ---------- */
.flash {
  padding: .7rem .9rem;
  border-radius: 8px;
  margin-bottom: 1rem;
  font-size: .9rem;
  border: 1px solid transparent;
}

.flash--alert {
  color: var(--danger);
  background: var(--danger-bg);
  border-color: #fecaca;
}

.flash--notice {
  color: var(--success);
  background: var(--success-bg);
  border-color: #a7f3d0;
}
.offline-banner { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; justify-content: center; gap: .45rem; padding: .5rem .75rem; color: #78350f; background: #fef3c7; border-bottom: 1px solid #fcd34d; font-size: .8rem; font-weight: 700; }
.offline-banner[hidden] { display: none; }
.offline-banner .app-icon { width: 1rem; height: 1rem; }

.sync-status { position: fixed; inset-inline-end: 1rem; bottom: 1rem; z-index: 70; width: min(26rem, calc(100vw - 2rem)); padding: .8rem; border: 1px solid var(--border); border-radius: .85rem; background: var(--surface); box-shadow: 0 .7rem 2rem rgb(17 59 54 / 18%); }
.sync-status[hidden] { display: none; }
.sync-status__summary { display: flex; align-items: center; gap: .55rem; }
.sync-status__summary .app-icon { width: 1rem; height: 1rem; flex: none; }
.sync-status__summary strong { flex: 1; font-size: .85rem; }
.sync-status__list { display: grid; gap: .5rem; margin: .65rem 0 0; padding: .65rem 0 0; border-top: 1px solid var(--border); list-style: none; }
.sync-status__item { display: flex; align-items: center; justify-content: space-between; gap: .6rem; font-size: .8rem; }
.sync-status__item--conflict { color: var(--danger, #b42318); }
.sync-status__actions { display: flex; gap: .35rem; flex: none; }

@media (max-width: 640px) {
  .sync-status { inset-inline: .7rem; bottom: calc(4.5rem + env(safe-area-inset-bottom)); width: auto; }
  .sync-status__item { align-items: flex-start; flex-direction: column; }
}

/* Feedback dashboard */
.feedback-dashboard .stat-grid { margin-bottom: 1rem; }
.feedback-distribution { margin-bottom: 1rem; }
.feedback-distribution__rows { display: grid; gap: .45rem; margin-top: .75rem; }
.feedback-distribution__row { display: grid; grid-template-columns: 3rem minmax(8rem, 1fr) 2.5rem; align-items: center; gap: .65rem; font-size: .8rem; }
.feedback-distribution__track { height: .55rem; overflow: hidden; border-radius: 999px; background: var(--surface-soft); border: 1px solid var(--border); }
.feedback-distribution__track span { display: block; height: 100%; border-radius: inherit; background: var(--warning, #d97706); }
.feedback-filters { align-items: end; }
.feedback-filters__actions { display: flex; flex-direction: row; gap: .4rem; }

/* Activation funnel */
.funnel-periods { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.funnel { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; gap: .75rem; }
.funnel__stage { display: grid; grid-template-columns: minmax(9rem, 1fr) minmax(6rem, 2fr) minmax(5rem, auto); align-items: center; gap: .75rem; }
.funnel__label { display: flex; flex-direction: column; gap: .1rem; font-size: .85rem; }
.funnel__count { color: var(--muted); font-size: .78rem; }
.funnel__track { height: .7rem; overflow: hidden; border-radius: 999px; background: var(--surface-soft); border: 1px solid var(--border); }
.funnel__track span { display: block; height: 100%; border-radius: inherit; background: var(--brand); }
.funnel__figures { text-align: end; display: flex; flex-direction: column; gap: .1rem; }
.funnel__figures small { color: var(--muted); font-size: .75rem; }

@media (max-width: 640px) {
  .funnel__stage { grid-template-columns: 1fr auto; }
  .funnel__track { grid-column: 1 / -1; }
}
.feedback-row--low > td { background: color-mix(in srgb, var(--danger-bg) 65%, var(--surface)); }
.feedback-rating { display: inline-flex; align-items: center; gap: .2rem; min-width: 3.2rem; padding: .3rem .5rem; border-radius: 999px; color: #92400e; background: #fef3c7; font-size: .8rem; }
.feedback-rating--1, .feedback-rating--2 { color: var(--danger); background: var(--danger-bg); }
.feedback-rating--4, .feedback-rating--5 { color: #166534; background: #dcfce7; }
.feedback-comment { max-width: 34rem; margin: 0 0 .25rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.feedback-table small { display: block; margin-top: .25rem; color: var(--muted); }
.feedback-page-link { display: block; max-width: 17rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: ltr; text-align: start; }
.feedback-status-form { display: flex; align-items: center; gap: .35rem; }
.feedback-status-form .toolbar__input { min-width: 7.5rem; }

@media (max-width: 720px) {
  .feedback-status-form { justify-content: flex-end; flex-wrap: wrap; }
  .feedback-page-link { margin-inline-start: auto; }
}

/* System administration controls */
.account-access-card, .center-operations { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.account-access-card__facts { display: flex; flex-wrap: wrap; gap: .65rem; margin: 0; }
.account-access-card__facts div { min-width: 8rem; padding: .55rem .7rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-soft); }
.account-access-card__facts dt { color: var(--muted); font-size: .7rem; }
.account-access-card__facts dd { margin: .15rem 0 0; color: var(--brand); font-weight: 750; }
.center-operations__activity { margin: .55rem 0 0; font-size: .8rem; }
.admin-audit-preview { margin-bottom: 1rem; }
.audit-details { display: block; max-width: 22rem; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; direction: ltr; }
.audit-event-card { margin-bottom: 1rem; }
.audit-event-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin: 0; }
.audit-event-facts div { min-width: 0; padding: .75rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-soft); }
.audit-event-facts dt { color: var(--muted); font-size: .75rem; font-weight: 700; }
.audit-event-facts dd { margin: .25rem 0 0; overflow-wrap: anywhere; font-weight: 650; }
.audit-event-metadata pre { max-width: 100%; margin: .75rem 0 0; padding: .85rem; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-soft); direction: ltr; text-align: start; white-space: pre-wrap; overflow-wrap: anywhere; }
.admin_users-index .table small { display: block; color: var(--muted); font-size: .7rem; }
.card:has(.action-menu) { overflow: visible; }
.card:has(.action-menu) .table { overflow: visible; }
.action-menu { position: relative; display: inline-block; text-align: start; }
.action-menu__trigger {
  display: inline-flex;
  min-width: 7rem;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: .65rem;
  padding: .55rem .75rem;
  color: var(--brand-dark);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  font-size: .88rem;
  font-weight: 700;
  list-style: none;
}
.action-menu__trigger::-webkit-details-marker { display: none; }
.action-menu__trigger::after { content: ""; width: .45rem; height: .45rem; border-inline-end: 2px solid currentColor; border-block-end: 2px solid currentColor; transform: translateY(-.15rem) rotate(45deg); transition: transform .15s ease; }
.action-menu[open] > .action-menu__trigger { color: var(--brand-dark); background: var(--brand-light); border-color: var(--brand); }
.action-menu[open] > .action-menu__trigger::after { transform: translateY(.1rem) rotate(225deg); }
.action-menu__panel {
  position: absolute;
  inset-block-start: calc(100% + .35rem);
  inset-inline-end: 0;
  z-index: 20;
  display: grid;
  width: max-content;
  min-width: 12rem;
  max-width: min(18rem, calc(100vw - 2rem));
  gap: .3rem;
  padding: .4rem;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.action-menu--drop-up .action-menu__panel { inset-block-start: auto; inset-block-end: calc(100% + .35rem); }
.action-menu__panel .button_to,
.action-menu__panel .action-menu__item { width: 100%; }
.action-menu__item { justify-content: flex-start; min-height: 44px; padding: .65rem .75rem; font-size: .88rem; text-align: start; white-space: normal; }
.action-menu__item:focus-visible { box-shadow: inset 0 0 0 2px rgba(15, 118, 110, 0.45); }
.action-menu__danger { margin-block-start: .15rem; padding-block-start: .45rem; border-block-start: 1px solid var(--border); }
.action-menu__danger .button_to,
.action-menu__danger .btn { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .action-menu__trigger::after { transition: none; }
}

@media (max-width: 760px) {
  .account-access-card, .center-operations { align-items: stretch; flex-direction: column; }
  .account-access-card__facts { display: grid; grid-template-columns: 1fr; }
  .center-operations .row-actions { justify-content: stretch; }
  .center-operations .row-actions .btn, .center-operations .row-actions form { width: 100%; }
  .audit-event-facts { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .table tr:has(.action-menu[open]) { overflow: visible; }
  .table td.row-actions > .action-menu { flex-basis: 100%; width: 100%; }
  .action-menu__trigger { width: 100%; }
  .action-menu__panel { position: static; width: 100%; min-width: 0; max-width: none; margin-block-start: .35rem; box-shadow: var(--shadow-sm); }
  .action-menu--drop-up .action-menu__panel { inset-block-start: auto; inset-block-end: auto; }
}

/* System health */
.health-overview { display: flex; align-items: center; gap: .85rem; margin-bottom: 1rem; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.health-overview__icon { display: grid; width: 2.6rem; height: 2.6rem; flex: none; place-items: center; border-radius: 50%; }
.health-overview__icon .app-icon { width: 1.3rem; height: 1.3rem; }
.health-overview h2, .health-overview p { margin: 0; }
.health-overview p { margin-top: .2rem; color: var(--muted); font-size: .8rem; }
.health-overview--healthy { border-color: #86efac; background: #f0fdf4; }
.health-overview--healthy .health-overview__icon { color: #166534; background: #dcfce7; }
.health-overview--warning { border-color: #fcd34d; background: #fffbeb; }
.health-overview--warning .health-overview__icon { color: #92400e; background: #fef3c7; }
.health-overview--critical { border-color: #fda29b; background: var(--danger-bg); }
.health-overview--critical .health-overview__icon { color: var(--danger); background: #fee4e2; }
.system-health .stat-grid { margin-bottom: 1rem; }
.health-alerts, .health-infrastructure { margin-bottom: 1rem; }
.health-alert-list { display: grid; gap: .6rem; margin-top: .75rem; }
.health-alert { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .75rem; padding: .75rem; border-inline-start: 4px solid var(--border-strong); border-radius: var(--radius); background: var(--surface-soft); }
.health-alert--critical { border-inline-start-color: var(--danger); background: color-mix(in srgb, var(--danger-bg) 70%, var(--surface)); }
.health-alert--warning { border-inline-start-color: #d97706; background: #fffbeb; }
.health-alert__severity { padding: .2rem .45rem; border-radius: 999px; color: var(--muted); background: var(--surface); font-size: .67rem; font-weight: 800; }
.health-alert__body h3, .health-alert__body p { margin: 0; }
.health-alert__body h3 { font-size: .88rem; }
.health-alert__body p { margin-top: .18rem; color: var(--muted); font-size: .76rem; }
.health-empty { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: 1.5rem; color: #166534; }
.health-empty .app-icon { width: 1.2rem; height: 1.2rem; }
.health-infrastructure__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: .65rem; margin: .75rem 0 0; }
.health-infrastructure__grid div { padding: .7rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-soft); }
.health-infrastructure__grid dt { color: var(--muted); font-size: .7rem; }
.health-infrastructure__grid dd { margin: .2rem 0 0; color: var(--brand); font-size: 1.05rem; font-weight: 800; }
.health-settings > summary { cursor: pointer; }
.health-settings__form { margin-top: 1rem; }

@media (max-width: 640px) {
  .health-alert { grid-template-columns: 1fr; align-items: stretch; }
  .health-alert .btn { width: 100%; }
}
.draft-status { margin-inline-end: auto; color: var(--muted); font-size: .76rem; }

.confirm-dialog {
  width: min(440px, calc(100% - 2rem));
  padding: 0;
  color: var(--ink);
  border: 0;
  border-radius: 14px;
  box-shadow: 0 28px 70px rgba(15, 23, 42, .28);
}
.confirm-dialog::backdrop { background: rgba(15, 23, 42, .48); backdrop-filter: blur(3px); }
.confirm-dialog__card { display: grid; grid-template-columns: auto 1fr; gap: .9rem; padding: 1.25rem; }
.confirm-dialog__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: var(--danger);
  border-radius: 50%;
  background: var(--danger-bg);
}
.confirm-dialog__icon .app-icon { width: 1.25rem; height: 1.25rem; }
.confirm-dialog__icon--warning { color: var(--warning); background: var(--warning-bg); }
.confirm-dialog h2 { margin: .1rem 0 .35rem; font-size: 1.05rem; }
.confirm-dialog p { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.5; }
.confirm-dialog__actions { display: flex; justify-content: flex-end; gap: .5rem; grid-column: 1 / -1; margin-top: .45rem; }

@media (max-width: 480px) {
  .confirm-dialog__actions { flex-direction: column-reverse; }
  .confirm-dialog__actions .btn { width: 100%; }
}

/* ---------- App page layout ---------- */
.page {
  max-width: none;
  margin: 0 auto;
  padding: 0;
}

.page__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: .9rem;
  border-bottom: 1px solid rgba(221, 229, 226, .75);
  margin-bottom: 1.1rem;
}

.page__header > div:first-child {
  position: relative;
  min-width: 0;
  padding-inline-start: .85rem;
}

.page__header > div:first-child::before {
  content: "";
  position: absolute;
  inset-block: .18rem;
  inset-inline-start: 0;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--brand), var(--accent));
}

.page__header > div:has(.btn) {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: flex-end;
}

.settings-toc {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  margin-bottom: 1.25rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--border);
}
.settings-toc a {
  color: var(--brand-dark);
  font-weight: 700;
  font-size: .88rem;
  text-decoration: none;
}
.settings-toc a:hover { text-decoration: underline; }

.settings-section-break {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 2rem 0 1.25rem;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.settings-section-break::before,
.settings-section-break::after {
  content: "";
  flex: 1;
  border-top: 1px dashed var(--border);
}

.page__title { margin: 0; font-size: clamp(1.28rem, 1rem + .7vw, 1.6rem); font-weight: 800; line-height: 1.2; }
.page__subtitle { max-width: 72ch; margin: .25rem 0 0; color: var(--muted); font-size: .9rem; line-height: 1.45; }
.page-actions,
.page__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: flex-end;
}

/* ---------- Filter / toolbar ---------- */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  align-items: end;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(251, 252, 250, .92)),
    var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .85rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(10px);
}
.toolbar .field { margin-bottom: 0; }
.toolbar .field--grow { flex: 1; min-width: 180px; }
.toolbar__input {
  width: 100%;
  height: 40px;
  padding: .55rem .75rem;
  font-size: 1rem;
  line-height: 1.4;
  font-family: inherit;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}
.toolbar__input--auto { width: auto; }
.table__select { width: 32px; }
.toolbar__input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(4,120,87,.12); }
.toolbar__label { display:block; font-size:.78rem; font-weight:600; color:var(--ink); margin-bottom:.3rem; }
.toolbar--auto-filter .toolbar__manual-submit { display: none; }
.toolbar .btn {
  height: 40px;
  min-height: 40px;
  padding: .55rem 1rem;
  font-size: 1rem;
}

/* ---------- Fees ---------- */
.fees-toolbar { gap: .75rem 1rem; padding: 1rem; }
.fees-toolbar__month { min-width: 180px; }
.fees-toolbar__actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.fees-statements { margin-bottom: 1.25rem; }

@media (max-width: 640px) {
  .fees-toolbar > .field,
  .fees-toolbar__actions,
  .fees-toolbar__actions .btn { width: 100%; }
}

select.input,
select.toolbar__input {
  appearance: none;
  padding-inline-end: 2.4rem;
  background-color: var(--surface);
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%23667085' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  background-size: 16px 16px;
  cursor: pointer;
}

/* WebKit clips a native <select>'s displayed text when appearance:none is
   combined with dir="rtl" (reproduced on current Safari/WebKit), regardless
   of padding or the custom arrow -- it's an engine bug in how it lays out
   the value box, not a spacing issue. Falling back to the native control for
   RTL sidesteps it; the browser's own arrow replaces the custom svg one. */
[dir="rtl"] select.input,
[dir="rtl"] select.toolbar__input {
  appearance: auto;
  background-image: none;
  padding-inline-start: .85rem;
  padding-inline-end: .85rem;
}

select.input:hover,
select.toolbar__input:hover {
  border-color: #a7f3d0;
}

.bulk-select,
.toolbar-select {
  position: relative;
  display: inline-grid;
  min-width: 130px;
}

.bulk-select::after,
.toolbar-select::after {
  content: "";
  position: absolute;
  top: 50%;
  inset-inline-end: .85rem;
  width: 7px;
  height: 7px;
  border-right: 1.7px solid #667085;
  border-bottom: 1.7px solid #667085;
  pointer-events: none;
  transform: translateY(-70%) rotate(45deg);
}

.bulk-select select.toolbar__input,
.toolbar-select select.toolbar__input {
  width: 100%;
  padding-inline: .85rem 2.4rem;
  background-image: none;
}

/* RTL selects fall back to the native control (see above), which already
   draws its own arrow -- suppress the custom chevron so only one shows. */
[dir="rtl"] .bulk-select::after,
[dir="rtl"] .toolbar-select::after {
  display: none;
}

[dir="rtl"] .bulk-select select.toolbar__input,
[dir="rtl"] .toolbar-select select.toolbar__input {
  padding-inline: .85rem;
}

.schedule-days {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}

.schedule-day {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .4rem .65rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
  font-size: .86rem;
  font-weight: 700;
}

.schedule-day:has(input:checked) {
  color: var(--brand-dark);
  background: var(--brand-light);
  border-color: #99f6e4;
}

.schedule-slots {
  display: grid;
  gap: .6rem;
  padding: 0;
  border: 0;
}

.schedule-slots__list {
  display: grid;
  gap: .6rem;
}

.schedule-slots__add {
  justify-self: start;
}

.schedule-slot {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  align-items: end;
  gap: .6rem;
  padding: .75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
}

@media (max-width: 720px) {
  .schedule-slot {
    grid-template-columns: 1fr 1fr;
  }

  .schedule-slot__remove {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

.schedule-card {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .85rem;
}

.schedule-card > div,
.table-stack {
  display: grid;
  gap: .15rem;
  min-width: 0;
}

.schedule-card span,
.table-stack span {
  color: var(--muted);
  font-size: .8rem;
}

.schedule-card strong,
.table-stack strong {
  color: var(--ink);
  font-size: .92rem;
}

/* Data card list actions */
.row-actions { display: flex; gap: .4rem; justify-content: flex-end; }

/* A table cell must keep its native display mode on desktop. Applying flex
   directly to <td> removes it from the table's column and border layout. */
@media (min-width: 641px) {
  .table th.table-actions-heading,
  .table td.row-actions,
  .table td.table-actions-cell {
    text-align: end;
    white-space: nowrap;
  }

  .table td.row-actions {
    display: table-cell;
  }

  .table td.row-actions .btn + .btn {
    margin-inline-start: .3rem;
  }

  /* Beats the max-width:860px ".row-actions .btn { width: 100% }" rule below,
     which is meant for stacked mobile action bars, not inline table cells. */
  .table td.row-actions .btn {
    width: auto;
  }
}

.count-pill {
  display: inline-block;
  background: var(--brand-light);
  color: var(--brand-dark);
  border-radius: 999px;
  padding: .1rem .55rem;
  font-size: .8rem;
  font-weight: 700;
  margin-inline-start: .4rem;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 1.25rem 1.5rem;
}

.card:has(> .table:only-child),
.card:has(> form:only-child > .table),
.card:has(> form:only-child > .bulk-bar + .table),
.card:has(> .table-wrap:only-child) {
  overflow: hidden;
  padding: 0;
}

.card > form > .bulk-bar {
  margin: .85rem .85rem 0;
}

.card:hover,
.student-overview__panel:hover,
.planner-panel:hover,
.notifications-card:hover {
  border-color: var(--border-strong);
}

.card + .card { margin-top: 1rem; }
.card__head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .75rem; }
.card__title { margin: 0 0 .75rem; font-size: 1.05rem; }
.card__head .card__title { margin: 0; }
.chip-list, .record-summary { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.chip--link { text-decoration: none; }
.chip--link:hover { text-decoration: none; }
.table__ltr { text-align: start; }
.record-summary { margin-bottom: 1rem; }
.portion-list { display: grid; gap: .5rem; }
.portion-list__item { width: 100%; justify-content: space-between; }
.quran-portion-summary { display: grid; min-width: 0; gap: .15rem; }
.quran-portion-summary__primary { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem; }
.quran-portion-summary__range { color: var(--muted); font-size: .78rem; line-height: 1.45; }
.quran-portion-summary-list { display: grid; gap: .45rem; }
.quran-portion-summary-list__badges { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .45rem; }
.metric-chip-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem; }
.record-notes { color: var(--ink); }
.record-notes > :first-child { margin-top: 0; }
.record-notes > :last-child { margin-bottom: 0; }
.field--separated, .record-step--separated { margin-top: 1rem; }
.field__hint { margin: 0 0 .5rem; color: var(--muted); font-size: .85rem; }
.field__hint--spacious { margin-bottom: .75rem; }
.field__hint--section { margin-bottom: 1rem; }
.empty-action--compact { padding: .75rem; min-height: 0; }
.empty-action--compact .table__empty { padding: 0; }
.errors__hint { margin: .2rem 0 .5rem; }
.danger-zone { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; padding: 1rem 1.1rem; background: var(--danger-bg); border: 1px solid #fecaca; border-radius: var(--radius); }
.danger-zone h2 { margin: 0; color: var(--danger); font-size: 1rem; }
.danger-zone p { margin: .2rem 0 0; color: var(--muted); font-size: .84rem; }
@media (max-width: 640px) {
  .danger-zone { align-items: stretch; flex-direction: column; }
  .danger-zone .button_to, .danger-zone .btn { width: 100%; }
}

/* Workflow UX: accessibility, operations, saved views and communications */
.skip-link {
  position: fixed; inset-inline-start: 1rem; top: -5rem; z-index: 10000;
  padding: .7rem 1rem; border-radius: .55rem; background: #fff; color: #0f766e;
  box-shadow: 0 8px 30px rgb(15 23 42 / 20%); font-weight: 700;
}
.skip-link:focus { top: 1rem; }
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid #38bdf8; outline-offset: 3px;
}
.undo-notice { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.undo-notice form { margin: 0; }
.saved-views { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem; align-items: center; margin-block: .75rem; }
.saved-views__list, .saved-view-form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.saved-views__hint { margin: 0; color: var(--muted); font-size: .85rem; }
.saved-view-chip { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); overflow: hidden; }
.saved-view-chip a { padding: .4rem .25rem .4rem .7rem; color: var(--text); text-decoration: none; }
.saved-view-chip a:hover { text-decoration: none; }
[dir="rtl"] .saved-view-chip a { padding: .4rem .7rem .4rem .25rem; }
.saved-view-chip form { display: inline-flex; margin: 0; }
.saved-view-chip__delete { border: 0; background: transparent; color: var(--muted); padding: .4rem .55rem; cursor: pointer; }
.import-columns, .context-help { margin-block: 1rem; border: 1px solid #bae6fd; border-radius: .8rem; background: #f0f9ff; color: #0c4a6e; }
.import-columns { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem; }
.import-columns h2 { margin: 0 0 .25rem; font-size: 1rem; }
.import-columns p { margin: 0; color: #075985; }
.context-help summary { display: flex; gap: .6rem; align-items: center; padding: .85rem 1rem; cursor: pointer; font-weight: 700; }
.context-help__body { padding: 0 1rem 1rem; line-height: 1.65; }
.daily-briefing {
  margin-block: 1rem 1.25rem;
  overflow: hidden;
  border: 1px solid rgba(180, 83, 9, .28);
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--warning-bg), var(--surface) 72%);
  box-shadow: var(--shadow-sm);
}
.daily-briefing--complete {
  border-color: rgba(15, 118, 110, .26);
  background: linear-gradient(135deg, var(--brand-light), var(--surface) 72%);
}
.daily-briefing__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.15rem 1.25rem;
}
.daily-briefing__head h2 { margin: .18rem 0; font-size: 1.16rem; }
.daily-briefing__head p { max-width: 690px; margin: 0; color: var(--muted); font-size: .86rem; }
.daily-briefing__head .btn { flex: 0 0 auto; }
.daily-briefing__eyebrow { color: var(--warning); font-size: .7rem; font-weight: 800; letter-spacing: .05em; }
.daily-briefing--complete .daily-briefing__eyebrow { color: var(--brand); }
.daily-briefing__summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-block: 1px solid rgba(180, 83, 9, .16);
  background: rgba(255, 255, 255, .58);
}
.daily-briefing--complete .daily-briefing__summary { border-color: rgba(15, 118, 110, .15); }
.daily-briefing__metric {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: .5rem;
  padding: .7rem .8rem;
  color: var(--ink);
  border-inline-end: 1px solid var(--border);
  text-decoration: none;
}
.daily-briefing__metric:last-child { border-inline-end: 0; }
.daily-briefing__metric:hover { color: var(--brand-dark); background: rgba(255, 255, 255, .74); text-decoration: none; }
.daily-briefing__metric strong { color: var(--brand); font-size: 1.1rem; }
.daily-briefing__metric span { min-width: 0; color: var(--muted); font-size: .72rem; font-weight: 700; line-height: 1.3; }
.daily-briefing__metric--focus { background: rgba(255, 251, 235, .88); }
.daily-briefing__metric--focus strong { color: var(--warning); }
.daily-briefing__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .65rem 1.25rem;
  color: var(--muted);
  font-size: .76rem;
}
.daily-briefing__footer a { font-weight: 800; white-space: nowrap; }
.attention-item__actions { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: end; }
.communication-search { position: relative; z-index: 20; display: grid; grid-template-columns: minmax(220px, .8fr) minmax(300px, 1.2fr); gap: 1.25rem; align-items: center; }
.communication-search__intro, .communication-section-head { display: flex; align-items: flex-start; gap: .75rem; }
.communication-search__intro p, .communication-section-head p, .communication-contacts p { margin: .2rem 0 0; color: var(--muted); }
.communication-search__step { display: inline-grid; place-items: center; flex: 0 0 30px; width: 30px; height: 30px; color: #fff; font-weight: 800; border-radius: 50%; background: var(--brand); }
.communication-search__form .field { margin: 0; }
.communication-search__form + .filter-chips { display: none; }
.communication-contacts { display: grid; gap: 1rem; }
.communication-contacts__student { display: flex; align-items: center; gap: .75rem; }
.communication-avatar { display: grid; place-items: center; flex: 0 0 46px; width: 46px; height: 46px; color: var(--brand-dark); font-size: 1.15rem; font-weight: 800; border-radius: 50%; background: var(--brand-light); }
.guardian-contact-list { display: grid; gap: .65rem; }
.guardian-contact { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .75rem; border: 1px solid var(--border); border-radius: .75rem; background: var(--surface-soft); }
.guardian-contact__identity { display: grid; min-width: 0; }
.guardian-contact__identity small { color: var(--muted); overflow-wrap: anywhere; }
.guardian-contact__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .4rem; }
.communication-section-head { margin: 1.25rem 0 .75rem; }
.communication-section-head h2 { margin: 0; font-size: 1.05rem; }
.communication-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.communication-template { display: grid; gap: .8rem; }
.communication-template textarea { resize: vertical; line-height: 1.6; }
.communication-empty { display: grid; justify-items: center; gap: .35rem; padding: 2rem; color: var(--muted); text-align: center; }
.communication-empty strong { color: var(--ink); }
.communication-empty__icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: .25rem; color: var(--brand); font-size: 1.5rem; border-radius: 50%; background: var(--brand-light); }
.communication-empty--compact { justify-items: start; padding: 1rem; text-align: start; background: var(--surface-soft); }
.report-ranking { list-style: none; padding: 0; margin: 1rem 0 0; }
.report-ranking li { display: flex; justify-content: space-between; padding: .65rem 0; border-bottom: 1px solid var(--border); }

@media (max-width: 900px) {
  .daily-briefing__summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .daily-briefing__metric { border-block-end: 1px solid var(--border); }
  .daily-briefing__metric:nth-child(2n) { border-inline-end: 0; }
  .daily-briefing__metric:last-child { grid-column: 1 / -1; border-block-end: 0; }
  .communication-search { grid-template-columns: 1fr; }
  .communication-grid { grid-template-columns: 1fr; }
  .import-columns { align-items: stretch; flex-direction: column; }
}
@media (max-width: 640px) {
  .daily-briefing__head { align-items: stretch; flex-direction: column; padding: 1rem; }
  .daily-briefing__head .btn { width: 100%; }
  .daily-briefing__summary { grid-template-columns: 1fr; }
  .daily-briefing__metric,
  .daily-briefing__metric:nth-child(2n) { border-inline-end: 0; }
  .daily-briefing__metric:last-child { grid-column: auto; }
  .daily-briefing__footer { align-items: flex-start; flex-direction: column; padding-inline: 1rem; }
  .saved-view-form { width: 100%; }
  .saved-view-form .toolbar__input { flex: 1; min-width: 0; }
  .form-actions--sticky { bottom: calc(4.6rem + env(safe-area-inset-bottom)); z-index: 30; }
  .guardian-contact { align-items: stretch; flex-direction: column; }
  .guardian-contact__actions, .guardian-contact__actions .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
.record-step .card__heading { display: flex; align-items: center; gap: .55rem; }
.step-badge {
  width: 26px;
  height: 26px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand-light);
  color: var(--brand-dark);
  font-size: .82rem;
  font-weight: 800;
  flex: 0 0 auto;
}

/* ---------- Next halaqa planner ---------- */
.planner-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: .75rem;
  margin-bottom: 1rem;
}

.planner-summary__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  min-height: 72px;
  padding: .9rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: inherit;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
}

.planner-summary__item:hover {
  border-color: #a7f3d0;
  box-shadow: var(--shadow);
  text-decoration: none;
}

.planner-summary__item--alert:hover { border-color: #fecaca; }
.planner-summary__label { color: var(--muted); font-size: .84rem; font-weight: 700; }
.planner-summary__item strong { color: var(--ink); font-size: 1.65rem; line-height: 1; }

.planner-panel,
.planner-note {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  margin-bottom: 1rem;
}

.planner-panel { padding: 1rem; }
.planner-panel--missing {
  padding: 0;
  overflow: hidden;
  border-color: #bfe5de;
  background: linear-gradient(180deg, #fbfffe 0, var(--surface) 150px);
}

.planner-panel__head,
.planner-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.planner-panel__head { margin-bottom: .8rem; }
.planner-panel--missing .planner-panel__head {
  margin: 0;
  padding: 1rem 1.15rem;
  border-bottom: 1px solid #d9eee9;
  background: rgba(236, 253, 249, .58);
}
.planner-panel__heading,
.planner-panel__title-row {
  display: flex;
  align-items: center;
}
.planner-panel__heading { gap: .75rem; min-width: 0; }
.planner-panel__title-row { flex-wrap: wrap; gap: .45rem; }
.planner-panel__icon {
  display: grid;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  place-items: center;
  color: var(--brand-dark);
  background: #d7f7f0;
  border: 1px solid #a7e8dc;
  border-radius: 10px;
}
.planner-panel__icon .app-icon { width: 19px; height: 19px; }
.planner-panel__head h2 { margin: 0; font-size: 1rem; font-weight: 800; }
.planner-panel__head p { margin: .2rem 0 0; color: var(--muted); font-size: .86rem; }
.planner-panel__dismiss {
  flex: 0 0 auto;
  padding: .45rem .7rem;
  color: var(--muted);
  background: rgba(255,255,255,.7);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: .8rem;
  font-weight: 700;
  text-decoration: none;
}
.planner-panel__dismiss:hover { color: var(--brand-dark); border-color: #9edbd0; text-decoration: none; }
.planner-note { padding: .75rem 1rem; color: var(--ink); }

.missing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .8rem;
  padding: 1rem;
}

.missing-student {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: .9rem;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .85rem;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(15, 118, 110, .05);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.missing-student:hover { border-color: #a7dcd3; box-shadow: 0 7px 18px rgba(15,118,110,.08); transform: translateY(-1px); }
.missing-student__identity { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.missing-student__avatar {
  display: grid;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  place-items: center;
  color: var(--brand-dark);
  background: var(--brand-light);
  border-radius: 50%;
  font-size: .9rem;
  font-weight: 800;
}
.missing-student__details { min-width: 0; }

.missing-student__name {
  display: block;
  color: var(--ink);
  font-weight: 800;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.missing-student__name:hover { color: var(--brand); text-decoration: none; }
.missing-student__halaqah {
  display: flex;
  align-items: center;
  gap: .28rem;
  margin-top: .18rem;
  color: var(--muted);
  font-size: .78rem;
}
.missing-student__halaqah .app-icon { width: 12px; height: 12px; }
.missing-student__actions { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; }
.missing-student__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  min-width: 0;
  min-height: 36px;
  padding: .45rem .55rem;
  color: var(--brand-dark);
  background: var(--surface);
  border: 1px solid #cbdedb;
  border-radius: 8px;
  font-size: .8rem;
  font-weight: 750;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
}
.missing-student__action:hover { color: var(--brand-dark); background: var(--brand-light); border-color: #91d5ca; text-decoration: none; }
.missing-student__action--primary { color: #fff; background: var(--brand); border-color: var(--brand); }
.missing-student__action--primary:hover { color: #fff; background: var(--brand-dark); border-color: var(--brand-dark); }
.missing-student__action .app-icon { flex: 0 0 auto; width: 15px; height: 15px; }

@media (max-width: 1100px) {
  .missing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.assignment-row--overdue td { background: var(--danger-bg); }
.assignment-row--today td { background: var(--warning-bg); }
.assignment-form-card { max-width: 920px; }
.readonly-field {
  min-height: 42px;
  display: flex;
  align-items: center;
  padding: .55rem .75rem;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: #f9fafb;
  font-weight: 700;
}

/* ---------- Dashboard ---------- */
.welcome-card {
  background:
    linear-gradient(135deg, rgba(214, 162, 58, .16), transparent 34%),
    linear-gradient(135deg, var(--brand), var(--brand-dark));
  color: #fff;
  border-radius: var(--radius);
  padding: 1.5rem 1.75rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow);
  border: 1px solid rgba(255,255,255,.14);
}
.welcome-card__title { margin: 0; font-size: 1.4rem; font-weight: 800; }
.welcome-card__subtitle { margin: .35rem 0 0; opacity: .9; }
.dashboard-hero { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.dashboard-hero__context { display: grid; justify-items: end; gap: .35rem; font-size: .82rem; text-align: end; }
.dashboard-hero__role { padding: .15rem .6rem; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; font-weight: 700; }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-bottom: 1.25rem;
}
/* Avoid a single orphaned card stranded alone in the last row. */
@media (min-width: 861px) {
  .stat-grid:has(> :nth-child(6)):not(:has(> :nth-child(7))) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stat-grid:has(> :nth-child(4)):not(:has(> :nth-child(5))) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.dashboard-summary {
  margin-bottom: 1.25rem;
  background: linear-gradient(180deg, var(--brand-light), var(--surface) 65%);
  border-color: #b5d8d0;
}
.dashboard-summary__head {
  flex-wrap: wrap;
  margin-bottom: .75rem;
}
.dashboard-summary__head .badge { flex-shrink: 0; background: var(--surface); border: 1px solid var(--border); }
.dashboard-summary__body {
  margin: .2rem 0 0;
  color: var(--muted);
  font-size: .9rem;
}
.dashboard-summary__actions {
  margin-top: .85rem;
}

.stat-card {
  display: flex;
  align-items: center;
  gap: .9rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(251, 252, 250, .96)),
    var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  box-shadow: var(--shadow-sm);
  color: inherit;
  text-decoration: none;
  min-width: 0;
}
.stat-card__icon {
  width: 44px; height: 44px; border-radius: 8px;
  background: var(--brand-light);
  display: grid; place-items: center; font-size: 1.3rem; flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(15, 118, 110, .08);
}
.stat-card__icon .app-icon {
  width: 1.35rem;
  height: 1.35rem;
  stroke-width: 1.8;
}
.stat-card:nth-child(3n + 2) .stat-card__icon { background: var(--info-bg); }
.stat-card:nth-child(3n) .stat-card__icon { background: var(--accent-light); }
.stat-card__body { flex: 1; min-width: 0; }
.stat-card__label { color: var(--muted); font-size: .85rem; }
.stat-card__value {
  overflow-wrap: anywhere;
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.12;
  margin-top: .15rem;
}
.stat-card__subtitle {
  margin-top: .25rem;
  color: var(--muted);
  font-size: .8rem;
  line-height: 1.35;
}
.stat-card__arrow { color: var(--brand); opacity: 0; transition: opacity .12s; }
.stat-card__arrow::before { content: "→"; }
[dir="rtl"] .stat-card__arrow::before { content: "←"; }
.stat-card--link { cursor: pointer; transition: transform .12s, box-shadow .12s, border-color .12s; }
.stat-card--link:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
  border-color: #a7f3d0;
  text-decoration: none;
}
.stat-card--link:hover .stat-card__arrow { opacity: 1; }

/* ---------- Dashboard analytics ---------- */
.analytics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.analytics:has(> .card:only-child) { grid-template-columns: 1fr; }
.analytics .card { margin: 0; display: flex; flex-direction: column; }
.analytics .card > .table__empty,
.analytics .card > .chart__empty { margin-block: auto; }
.analytics__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .9rem;
}
.analytics__title { margin: 0; font-size: 1.05rem; font-weight: 800; }
.analytics__meta { color: var(--muted); font-size: .82rem; text-decoration: none; }
a.analytics__meta:hover { color: var(--brand); text-decoration: none; }
@media (max-width: 820px) { .analytics { grid-template-columns: 1fr; } }

.upcoming-halaqas {
  container-type: inline-size;
  margin-bottom: 1.25rem;
}

.upcoming-halaqas__list {
  display: grid;
  gap: .5rem;
}

.upcoming-halaqah {
  display: grid;
  grid-template-columns: minmax(150px, .55fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: .85rem;
  padding: .55rem .75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-soft);
}

.upcoming-halaqah__time,
.upcoming-halaqah__body {
  display: grid;
  gap: .15rem;
}

.upcoming-halaqah__time strong,
.upcoming-halaqah__name {
  color: var(--ink);
  font-weight: 800;
  text-decoration: none;
}

.upcoming-halaqah__name:hover {
  color: var(--brand);
  text-decoration: none;
}

.upcoming-halaqah__time span,
.upcoming-halaqah__meta {
  color: var(--muted);
  font-size: .82rem;
}

.upcoming-halaqah__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .8rem;
}

.upcoming-halaqah__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .45rem;
}

@container (max-width: 640px) {
  .upcoming-halaqah { grid-template-columns: 1fr; align-items: stretch; }
  .upcoming-halaqah__actions { justify-content: stretch; }
  .upcoming-halaqah__actions .btn { flex: 1 1 0; }
}

.top-students { list-style: none; margin: 0; padding: 0; }
.top-students li {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .35rem 0;
  border-bottom: 1px solid var(--border);
}
.top-students li:last-child { border-bottom: none; }
.top-students__rank { width: 26px; text-align: center; font-weight: 800; }
.top-students__name { min-width: 0; font-weight: 700; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.top-students__name:hover { color: var(--brand); text-decoration: none; }
.top-students__halaqah { color: var(--muted); font-size: .82rem; flex: 1; }
.top-students__points { color: var(--brand); font-weight: 700; font-size: .88rem; }

.config-list { list-style: none; margin: 0; padding: 0; }
.config-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .4rem 0;
  border-bottom: 1px solid var(--border);
  font-size: .92rem;
}
.config-list li:last-child { border-bottom: none; }

.quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-bottom: 1.5rem;
}
.quick-actions {
  padding: .2rem 0 .35rem;
}
.quick-actions .btn {
  min-height: 40px;
}

.quick-actions .btn--secondary {
  background: rgba(255, 255, 255, .82);
}
.super-admin-alerts {
  display: grid;
  gap: .6rem;
}
.super-admin-alert {
  display: grid;
  gap: .45rem;
  padding: .5rem 0;
  border-bottom: 1px solid var(--border);
}
.super-admin-alert:last-child { border-bottom: none; padding-bottom: 0; }
.super-admin-alert__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.super-admin-alert .config-list li span:last-child {
  color: var(--muted);
  font-size: .82rem;
}
.dashboard-actions { margin-bottom: 1.25rem; padding: 1rem 1.1rem; background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.dashboard-actions__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; }
.dashboard-actions__head h2 { margin: 0; font-size: 1rem; }
.dashboard-actions__head p { margin: .15rem 0 0; color: var(--muted); font-size: .82rem; }
.dashboard-actions__today { font-size: .85rem; font-weight: 800; white-space: nowrap; }
.dashboard-actions .quick-actions { margin: 0; padding: 0; }
.setup-checklist {
  margin-bottom: 1rem;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(15, 118, 110, .25);
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--brand-light), var(--surface));
  box-shadow: var(--shadow-sm);
}
.setup-checklist__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.setup-checklist__head h2 { margin: 0; font-size: 1rem; }
.setup-checklist__head p { margin: .2rem 0 0; color: var(--muted); font-size: .8rem; }
.setup-checklist__head > strong { color: var(--brand); font-size: .8rem; white-space: nowrap; }
.setup-checklist__progress { height: 6px; margin: .75rem 0; overflow: hidden; border-radius: 999px; background: rgba(15, 118, 110, .12); }
.setup-checklist__progress span { display: block; height: 100%; border-radius: inherit; background: var(--brand); transition: width .2s ease; }
.setup-checklist__steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .55rem; margin: 0; padding: 0; list-style: none; }
.setup-checklist__steps li { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: .45rem; padding: .65rem; border: 1px solid var(--border); border-radius: 9px; background: rgba(255, 255, 255, .8); }
.setup-checklist__steps li .btn { grid-column: 1 / -1; justify-content: center; margin-top: .15rem; }
.setup-checklist__check { display: grid; place-items: center; width: 23px; height: 23px; color: var(--brand); font-size: .75rem; font-weight: 800; border-radius: 50%; background: var(--brand-light); }
.setup-checklist__steps strong,
.setup-checklist__steps small { display: block; }
.setup-checklist__steps strong { font-size: .78rem; line-height: 1.3; }
.setup-checklist__steps small { margin-top: .15rem; color: var(--muted); font-size: .7rem; line-height: 1.35; }
.setup-checklist__step--complete { opacity: .68; }
.setup-checklist__step--complete .setup-checklist__check { color: #fff; background: var(--success); }
.setup-checklist__step--current { border-color: rgba(15, 118, 110, .45) !important; box-shadow: 0 0 0 2px rgba(15, 118, 110, .08); }
.setup-checklist__later { grid-column: 1 / -1; padding-inline-start: 1.8rem; }
.activation-summary { margin-bottom: 1rem; }
.activation-summary__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.activation-summary__head p { margin: .25rem 0 0; }
.activation-summary__head > strong { color: var(--brand); font-size: .82rem; }
.activation-summary__steps { margin: .9rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; }
.activation-summary__steps li { padding: .42rem .65rem; display: flex; align-items: center; gap: .35rem; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); font-size: .74rem; }
.activation-summary__steps li.is-complete { color: var(--brand-dark); border-color: #b5d8d0; background: var(--brand-light); }

@media (max-width: 1050px) {
  .setup-checklist__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .setup-checklist__head { flex-direction: column; gap: .4rem; }
  .setup-checklist__steps { grid-template-columns: 1fr; }
}
.attendance-meter-row { display: flex; align-items: center; gap: .75rem; margin-bottom: .6rem; }
.attendance-meter-row:last-child { margin-bottom: 0; }
.attendance-meter-row__label { flex: 0 0 70px; }
.attendance-meter-row__bar { flex: 1; min-width: 0; }
.attendance-meter-row__count { flex: 0 0 32px; text-align: end; font-weight: 700; }

.section-title { font-size: 1.15rem; font-weight: 800; margin: 0 0 .9rem; }

.ward-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: .9rem;
}
.ward-card {
  display: grid;
  gap: .85rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  color: inherit;
  box-shadow: var(--shadow-sm);
}
.ward-card__header {
  display: flex;
  align-items: center;
  gap: .8rem;
  min-width: 0;
}
.ward-card__avatar {
  flex: 0 0 auto;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--brand-light); color: var(--brand-dark);
  display: grid; place-items: center; font-weight: 800; font-size: 1.1rem;
}
.ward-card__identity { min-width: 0; }
.ward-card__name {
  display: inline-block;
  max-width: 100%;
  font-weight: 800;
  color: var(--ink);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.ward-card__name:hover { color: var(--brand); text-decoration: none; }
.ward-card__meta,
.ward-card__empty,
.ward-card__subline {
  color: var(--muted);
  font-size: .82rem;
}
.ward-card__metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .5rem;
  margin: 0;
}
.ward-card__metrics div {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .55rem .6rem;
  min-width: 0;
}
.ward-card__metrics dt {
  color: var(--muted);
  font-size: .72rem;
  margin: 0 0 .18rem;
}
.ward-card__metrics dd {
  color: var(--ink);
  font-size: .98rem;
  font-weight: 800;
  margin: 0;
}
.ward-card__section {
  border-top: 1px solid var(--border);
  padding-top: .75rem;
  min-width: 0;
}
.ward-card__label {
  color: var(--muted);
  font-size: .76rem;
  font-weight: 800;
  margin-bottom: .25rem;
}
.ward-card__assignment {
  display: block;
  color: var(--ink);
  font-size: .9rem;
  font-weight: 700;
  margin-top: .15rem;
  overflow-wrap: anywhere;
  text-decoration: none;
}
a.ward-card__assignment:hover { color: var(--brand); }
.ward-card__subline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .35rem;
}
.ward-card__footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: .75rem;
  border-top: 1px solid var(--border);
  padding-top: .75rem;
}
.ward-card__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .45rem;
}

.assignment-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.assignment-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  padding: .45rem 0;
  border-bottom: 1px solid var(--border);
}
.assignment-list li > div {
  min-width: 0;
}
.assignment-list li:last-child { border-bottom: none; }
.assignment-list__name {
  color: var(--ink);
  font-weight: 800;
  text-decoration: none;
}
.assignment-list__name:hover { color: var(--brand); }
.assignment-list__meta {
  color: var(--muted);
  font-size: .8rem;
  margin-inline-start: .4rem;
}
.assignment-list__content {
  color: var(--ink);
  font-size: .86rem;
  margin-top: .2rem;
}

.attention-card { container-type: inline-size; margin-bottom: 1rem; border-inline-start: 4px solid var(--warning); }
.attention-card__hint { margin: .2rem 0 0; color: var(--muted); font-size: .82rem; }
.attention-list { display: grid; margin-top: .8rem; }
.attention-item { display: grid; grid-template-columns: minmax(150px, .65fr) minmax(240px, 1.35fr) auto; gap: .8rem; align-items: center; padding: .75rem 0; border-bottom: 1px solid var(--border); }
.attention-item:last-child { border-bottom: 0; }
.attention-item__student { min-width: 0; }
.attention-item__name { display: block; color: var(--ink); font-weight: 800; overflow-wrap: anywhere; }
.attention-item__student > span { color: var(--muted); font-size: .8rem; }
.attention-item__signals { display: flex; flex-wrap: wrap; gap: .35rem; }
.attention-item--two-column { grid-template-columns: minmax(0, 1fr) auto; }
.attention-item--two-column > .btn { justify-self: end; }
@container (max-width: 640px) {
  .attention-item { grid-template-columns: 1fr; align-items: stretch; }
  .attention-item__actions { justify-content: flex-start; }
  .attention-item__actions .btn { flex: 1 1 auto; width: auto; }
}
@media (max-width: 720px) {
  .attention-item { grid-template-columns: 1fr; align-items: stretch; }
  .attention-item__actions { justify-content: flex-start; }
  .attention-item__actions .btn { flex: 1 1 auto; width: auto; }
  .attention-item--two-column > .btn { width: 100%; justify-self: stretch; }
}

.assignment-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
}
.assignment-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .85rem;
}
.assignment-card__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
}
.assignment-card__meta {
  margin: .25rem 0 0;
  color: var(--muted);
  font-size: .85rem;
}
.assignment-card__portions {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.assignment-portion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  background: #f9fafb;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .55rem .7rem;
  color: var(--ink);
  font-size: .9rem;
}
.assignment-card__notes {
  margin: .8rem 0 0;
  color: var(--ink);
  white-space: pre-line;
}
.assignment-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .9rem;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: .75rem;
}
.detail-grid > div {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  min-width: 0;
}
.detail-grid__label {
  color: var(--muted);
  font-size: .82rem;
  font-weight: 700;
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .9rem;
}
.section-head h2 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
}

.timeline {
  display: grid;
  gap: .75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.timeline__item {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: .7rem;
  align-items: start;
}
.timeline__marker {
  width: 10px;
  height: 10px;
  margin-top: .45rem;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-light);
}
.timeline__item--attendance .timeline__marker { background: var(--info); box-shadow: 0 0 0 4px var(--info-bg); }
.timeline__item--assignment .timeline__marker { background: var(--warning); box-shadow: 0 0 0 4px var(--warning-bg); }
.timeline__item--certificate .timeline__marker { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-light); }
.timeline__body {
  min-width: 0;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--border);
}
.timeline__item:last-child .timeline__body { border-bottom: 0; padding-bottom: 0; }
.timeline__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  color: var(--muted);
  font-size: .8rem;
}
.timeline__kind {
  font-weight: 800;
  color: var(--brand-dark);
}
.timeline__title {
  display: block;
  margin-top: .18rem;
  color: var(--ink);
  font-weight: 800;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.timeline__title:hover { color: var(--brand); text-decoration: none; }
.timeline__meta {
  margin: .12rem 0 0;
  color: var(--muted);
  font-size: .84rem;
}

/* ---------- Buttons (extra variants) ---------- */
.btn--inline { width: auto; }

.btn--secondary {
  background: var(--surface);
  color: var(--brand-dark);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.btn--secondary:hover {
  background: var(--brand-light);
  color: var(--brand-dark);
  border-color: #a7f3d0;
  text-decoration: none;
}

.btn--sm {
  min-height: 36px;
  padding: .45rem .8rem;
  font-size: .88rem;
}

.btn--danger {
  background: var(--surface);
  color: var(--danger);
  border: 1px solid #fecaca;
}
.btn--danger:hover {
  background: var(--danger-bg);
  color: var(--danger);
  text-decoration: none;
}

/* Checkbox chip grid (multi-select) */
.check-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.check-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .7rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  font-size: .88rem;
  background: #fff;
  transition: background .12s, border-color .12s;
}
.check-chip:has(input:checked) {
  background: var(--brand-light);
  border-color: #a7f3d0;
  color: var(--brand-dark);
  font-weight: 600;
}

/* ---------- Searchable multi-select ---------- */
.msel { position: relative; }
.msel__tags {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: .5rem;
}
.msel__tag {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: var(--brand-light);
  color: var(--brand-dark);
  border: 1px solid #a7f3d0;
  border-radius: 999px;
  padding: .2rem .3rem .2rem .7rem;
  font-size: .85rem;
  font-weight: 600;
}
.msel__tag button {
  border: none;
  background: rgba(4,120,87,.15);
  color: var(--brand-dark);
  border-radius: 50%;
  width: 18px; height: 18px;
  line-height: 1;
  cursor: pointer;
  font-size: .9rem;
}
.msel__tag button:hover { background: rgba(4,120,87,.3); }
.msel__search { margin-bottom: .5rem; }
.msel__count { font-size: .8rem; color: var(--muted); }
.msel__list {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  max-height: 220px;
  overflow-y: auto;
  padding: .5rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-top: .4rem;
}
.msel__empty { color: var(--muted); font-size: .9rem; width: 100%; margin: .3rem; }

/* ---------- Autocomplete (server-backed) ---------- */
.acs { position: relative; }
.acs__field { position: relative; }
.acs__control {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem;
  width: 100%;
  min-height: 44px;
  padding: .25rem .45rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: border-color .15s, box-shadow .15s;
}
.acs__control:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.16);
}
.acs__input.input {
  flex: 1 1 9rem;
  width: auto;
  min-width: 7rem;
  min-height: 34px;
  height: 34px;
  padding: .35rem .4rem;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.acs__input.input:focus {
  border: 0;
  box-shadow: none;
}
.acs__results {
  position: absolute;
  z-index: 30;
  inset-inline: 0;
  top: calc(100% + 4px);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
  max-height: 240px;
  overflow-y: auto;
  padding: .3rem;
}
.acs__result {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .1rem;
  width: 100%;
  text-align: start;
  border: none;
  background: none;
  padding: .5rem .6rem;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
}
.acs__result:hover,
.acs__result--active { background: var(--brand-light); }
.acs__result mark { color: inherit; background: #fde68a; border-radius: 2px; padding: 0 .08em; }
.acs__result span { color: var(--muted); font-size: .8rem; direction: ltr; }
.acs__empty,
.acs__hint,
.acs__error,
.acs__loading { padding: .6rem; color: var(--muted); font-size: .9rem; }
.acs__error { color: #b91c1c; }
.acs__loading::before {
  content: "";
  display: inline-block;
  width: .8rem;
  height: .8rem;
  margin-inline-end: .45rem;
  vertical-align: -.08rem;
  border: 2px solid rgba(4,120,87,.2);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: ui-spin .7s linear infinite;
}
.acs__tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.acs__tags--empty { display: none; }

/* ---------- Interaction feedback ---------- */
@keyframes ui-spin { to { transform: rotate(360deg); } }
.btn--loading { cursor: wait; opacity: .8; }
.btn--loading::after {
  content: "";
  display: inline-block;
  width: .8rem;
  height: .8rem;
  margin-inline-start: .45rem;
  vertical-align: -.08rem;
  border: 2px solid currentColor;
  border-inline-end-color: transparent;
  border-radius: 50%;
  animation: ui-spin .7s linear infinite;
}
form[aria-busy="true"] { cursor: progress; }
.flash--dismissible { position: relative; padding-inline-end: 2.75rem; transition: opacity .18s, transform .18s; }
.flash--leaving { opacity: 0; transform: translateY(-4px); }
.flash__dismiss {
  position: absolute;
  inset-inline-end: .65rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.75rem;
  height: 1.75rem;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.2rem;
}
.flash__dismiss:hover { background: rgba(15,23,42,.08); }
.filter-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
  margin: -.5rem 0 1rem;
}
.filter-chip,
.filter-chips__clear {
  padding: .32rem .65rem;
  color: var(--brand-dark);
  background: var(--brand-light);
  border: 1px solid #a7f3d0;
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  font-size: .78rem;
}
.filter-chips__clear { color: var(--muted); background: transparent; border-color: transparent; text-decoration: underline; }
.filtered-results { display: block; min-width: 0; }

/* ---------- Searchable surah picker ---------- */
.surah-picker { position: relative; }
.surah-picker__search,
.surah-picker__results { display: none; }
.surah-picker--enhanced .surah-picker__search { display: block; }
.surah-picker--enhanced .surah-picker__native { display: none; }
.surah-picker--enhanced .surah-picker__results {
  position: absolute;
  z-index: 40;
  inset-inline: 0;
  top: calc(100% + 4px);
  display: block;
  max-height: 280px;
  overflow-y: auto;
  padding: .35rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
}
.surah-picker--enhanced .surah-picker__results[hidden] { display: none; }
.surah-picker__result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: .6rem .7rem;
  color: var(--ink);
  text-align: start;
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
}
.surah-picker__result:hover,
.surah-picker__result--active { background: var(--brand-light); }
.surah-picker__result span { color: var(--muted); font-size: .78rem; white-space: nowrap; }
.surah-picker__hint,
.surah-picker__empty { padding: .65rem .7rem; color: var(--muted); font-size: .85rem; }

/* ---------- Assign existing (halaqah) ---------- */
.assign-existing {
  display: flex;
  align-items: flex-end;
  gap: .6rem;
  background: var(--brand-light);
  border: 1px solid #a7f3d0;
  border-radius: 8px;
  padding: .75rem;
  margin-bottom: 1rem;
}
.assign-existing .field { margin-bottom: 0; }
.assign-existing .acs { flex: 1; }
.assign-existing > .btn { min-height: 44px; }

/* ---------- Surah portion rows ---------- */
.portion-row {
  display: grid;
  grid-template-columns: 2fr 1.3fr 1fr 1fr 1fr auto;
  gap: .6rem;
  align-items: end;
  padding: .6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: .5rem;
  background: #fff;
}
.portion-row__unit-label { min-width: 0; }
.portion-row__unit-label .readonly-field { min-height: 44px; display: flex; align-items: center; font-weight: 750; }
.portion-row--unit { grid-template-columns: minmax(200px, 2fr) minmax(150px, 1.3fr) minmax(150px, 1fr) auto; }
.portion-row--unit .portion-row__range-field { display: none; }
.portion-hint { color: var(--muted); font-weight: 500; font-size: .75rem; }

.portion-quick {
  display: grid;
  grid-template-columns: minmax(130px, .8fr) minmax(240px, 1.5fr) minmax(150px, 1fr) auto;
  gap: .55rem;
  align-items: end;
  padding: .65rem;
  margin: .45rem 0 .65rem;
  background: var(--accent-light);
  border: 1px solid #fde68a;
  border-radius: 8px;
}
.portion-quick__field { min-width: 0; }
.portion-quick__selection { position: relative; }
.portion-quick__apply { white-space: nowrap; }
.portion-quick__summary {
  grid-column: 1 / -1;
  min-height: 1.2rem;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 600;
}

.quick-picker { position: relative; }
.quick-picker__trigger {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: 0 .75rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  font-weight: 650;
  list-style: none;
}
.quick-picker__trigger::-webkit-details-marker { display: none; }
.quick-picker__trigger:focus-visible { outline: 3px solid rgba(15, 118, 110, .24); border-color: var(--brand); }
.quick-picker[open] .quick-picker__trigger { border-color: var(--brand); border-end-start-radius: 0; border-end-end-radius: 0; }
.quick-picker__value { min-width: 0; display: flex; align-items: center; flex: 1; overflow: hidden; }
.quick-picker__caret { flex: 0 0 auto; color: var(--brand); font-size: 1.1rem; transition: transform .15s ease; }
.quick-picker[open] .quick-picker__caret { transform: rotate(180deg); }
.quick-picker__panel {
  position: absolute;
  z-index: 45;
  inset-inline: 0;
  top: 100%;
  padding: .65rem;
  background: var(--surface);
  border: 1px solid var(--brand);
  border-radius: 0 0 10px 10px;
  box-shadow: var(--shadow);
}
.quick-picker__search { margin-bottom: .55rem; }
.quick-picker__options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .35rem;
  max-height: 260px;
  overflow-y: auto;
  padding-inline-end: .2rem;
}
.quick-picker__option {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .5rem .6rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  font-size: .88rem;
}
.quick-picker__option:hover { background: var(--brand-light); border-color: #a7f3d0; }
.quick-picker__option:has(input:checked) { color: var(--brand-dark); background: var(--brand-light); border-color: var(--brand); font-weight: 700; }
.quick-picker__option input { width: 18px; height: 18px; accent-color: var(--brand); }
.quick-picker__empty { margin: .5rem; color: var(--muted); font-size: .88rem; }
.quick-picker__tags {
  min-width: 0;
  display: flex;
  flex: 1;
  gap: .35rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.quick-picker__tags::-webkit-scrollbar { display: none; }
.quick-picker__tags:empty { display: none; }
.quick-picker__tag {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: .35rem;
  padding: .22rem .3rem .22rem .6rem;
  color: var(--brand-dark);
  background: var(--brand-light);
  border: 1px solid #a7f3d0;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 700;
}
.quick-picker__tag button {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--brand-dark);
  background: rgba(15, 118, 110, .12);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.quick-picker__tag button:hover { background: rgba(15, 118, 110, .24); }
.portion-quick__apply:disabled { opacity: .5; cursor: not-allowed; }

.btn-add-row {
  display: block;
  width: 100%;
  margin-top: .6rem;
  padding: .6rem;
  border: 1.5px dashed #a7f3d0;
  border-radius: 8px;
  background: var(--brand-light);
  color: var(--brand-dark);
  font-weight: 700;
  font-size: .9rem;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.btn-add-row:hover { background: #d1fae5; border-color: var(--brand); }
.portion-remove {
  border: 1px solid #fecaca;
  background: var(--danger-bg);
  color: var(--danger);
  border-radius: 8px;
  width: 44px; height: 44px;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
}
.portion-remove:hover { background: #fee2e2; }

@media (max-width: 560px) {
  .portion-row { grid-template-columns: 1fr 1fr; }
  .portion-row__surah { grid-column: 1 / -1; }
  .portion-row--unit .portion-row__unit-label { grid-column: 1 / -1; }
  .portion-quick { grid-template-columns: 1fr; }
  .portion-quick__apply { width: 100%; }
  .quick-picker__panel { position: static; }
  .quick-picker__options { grid-template-columns: 1fr; max-height: 240px; }
  form:has(.quick-picker[open]) .form-actions--sticky { position: static; }
}

/* ---------- Full-width record form sections ---------- */
.record-form-stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}
.record-form-stack .card { margin: 0; }
.record-step:has(.quick-picker[open]) {
  position: relative;
  z-index: 1;
}
.card__heading {
  margin: 0 0 1rem;
  font-size: 1.1rem;
  font-weight: 800;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--border);
}
/* ---------- Bulk action bar ---------- */
.bulk-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  background: var(--brand-light);
  border: 1px solid #a7f3d0;
  border-radius: 8px;
  padding: .6rem .9rem;
  margin-bottom: .9rem;
}
.bulk-bar[hidden] { display: none; }

/* ---------- Pagination ---------- */
.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  justify-content: center;
  align-items: center;
  margin-top: 1.25rem;
}
.pagination__btn, .pagination__page {
  display: inline-grid;
  place-items: center;
  min-width: 36px;
  height: 36px;
  padding: 0 .6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
}
.pagination__btn:hover, .pagination__page:hover { background: var(--brand-light); text-decoration: none; }
.pagination__page--active { background: var(--brand); color: #fff; border-color: var(--brand); }
.pagination__btn--disabled { color: #cbd5e1; background: #f9fafb; cursor: default; }
.pagination__btn--disabled:hover { background: #f9fafb; }

/* ---------- Settings switch ---------- */
.switch-row {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  cursor: pointer;
}
.switch-row span { display: flex; flex-direction: column; }
.switch-row small { color: var(--muted); font-size: .82rem; }
.switch-row--compact { margin-top: .6rem; }

.field-hint { display: block; margin-top: .35rem; color: var(--muted); font-size: .82rem; }
.field-error { display: block; margin-top: .35rem; color: var(--danger); font-size: .8rem; font-weight: 650; }
.input--error { border-color: var(--danger); }
.input--error:focus { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(220, 38, 38, .12); }
.label-optional { color: var(--muted); font-size: .76rem; font-weight: 500; }

/* ---------- Student CSV import ---------- */
.student-import-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .75rem;
  padding: 0;
  margin: 0 0 1rem;
  list-style: none;
}
.student-import-step {
  display: flex;
  align-items: center;
  gap: .65rem;
  min-width: 0;
  padding: .75rem;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}
.student-import-step--active { color: var(--ink); border-color: rgba(15, 118, 110, .35); }
.student-import-step__number {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  color: var(--brand);
  font-weight: 800;
  border-radius: 50%;
  background: var(--brand-light);
}
.student-import-step strong,
.student-import-step small { display: block; }
.student-import-step strong { font-size: .84rem; }
.student-import-step small { margin-top: .1rem; font-size: .75rem; line-height: 1.3; }
.student-import-layout {
  display: grid;
  grid-template-columns: minmax(240px, .75fr) minmax(360px, 1.25fr);
  gap: 1rem;
  align-items: stretch;
}
.student-import-card {
  display: grid;
  align-content: start;
  gap: 1rem;
  margin: 0;
}
.student-import-card > .page__subtitle { margin: 0; }
.student-import-card .card__title { margin: .15rem 0 0; }
.student-import-card__eyebrow {
  color: var(--brand);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.student-import-download { justify-content: center; width: 100%; }
.student-import-requirements {
  padding: .85rem 1rem;
  border-inline-start: 3px solid var(--brand);
  border-radius: 10px;
  background: var(--surface-soft);
}
.student-import-requirements strong { display: block; margin-bottom: .2rem; font-size: .82rem; }
.student-import-requirements p { margin: 0; color: var(--muted); font-size: .8rem; line-height: 1.45; }
.student-import-upload { display: grid; gap: .75rem; }
.student-import-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.student-import-dropzone {
  display: grid;
  place-items: center;
  min-height: 180px;
  padding: 1.25rem;
  text-align: center;
  cursor: pointer;
  border: 2px dashed var(--border);
  border-radius: 12px;
  background: var(--surface-soft);
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.student-import-dropzone:hover,
.student-import-dropzone--dragging,
.student-import-file-input:focus-visible + .student-import-dropzone { border-color: var(--brand); background: var(--brand-light); }
.student-import-dropzone--dragging { transform: scale(1.01); }
.student-import-dropzone--selected { border-style: solid; border-color: var(--brand); }
.student-import-dropzone__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: .5rem;
  color: var(--brand);
  font-size: 1.5rem;
  font-weight: 700;
  border-radius: 50%;
  background: var(--brand-light);
}
.student-import-dropzone__prompt { color: var(--brand); font-size: .95rem; font-weight: 750; }
.student-import-dropzone__hint { margin-top: .2rem; color: var(--muted); font-size: .8rem; }
.student-import-dropzone__file { margin-top: .65rem; color: var(--ink); font-size: .85rem; font-weight: 700; overflow-wrap: anywhere; }
.student-import-dropzone__file:empty { display: none; }
.student-import-submit { justify-content: center; width: 100%; }
.student-import-submit:disabled { opacity: .5; cursor: not-allowed; }
.student-import-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 180px)); gap: .75rem; margin-bottom: 1rem; }
.student-import-summary__item { padding: .75rem 1rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.student-import-summary__item strong { display: block; font-size: 1.35rem; line-height: 1; }
.student-import-summary__item span { color: var(--muted); font-size: .78rem; }
.student-import-summary__item--valid strong { color: var(--success); }
.student-import-summary__item--invalid strong { color: var(--danger); }
.student-import-row--invalid { background: var(--danger-bg); }
.student-import-preview {
  display: grid;
  gap: 1rem;
}
.student-import-table-wrap {
  min-width: 0;
  overflow-x: auto;
  border-radius: var(--radius);
}
.student-import-actions {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.student-import-actions form,
.student-import-actions .chart__empty { margin: 0; }

@media (max-width: 640px) {
  .student-import-steps { grid-template-columns: 1fr; }
  .student-import-step small { display: none; }
  .student-import-layout { grid-template-columns: 1fr; }
  .student-import-summary { grid-template-columns: repeat(2, 1fr); }
  .student-import-actions form,
  .student-import-actions .btn { width: 100%; }
}

/* ---------- Settings logo upload ---------- */
.table-wrap { max-width: 100%; overflow-x: auto; }
.permissions-table { min-width: 560px; }
.permissions-table th:not(:first-child),
.permissions-table td { width: 130px; text-align: center; }
.permissions-table input[type="checkbox"] { width: 1.15rem; height: 1.15rem; accent-color: var(--brand); }
@media (max-width: 640px) {
  .permissions-table { display: table; }
  .permissions-table thead { display: table-header-group; }
  .permissions-table tbody { display: table-row-group; }
  .permissions-table tr { display: table-row; border: 0; }
  .permissions-table th, .permissions-table td { display: table-cell; padding: .65rem; }
  .permissions-table td:not([data-label]) { display: table-cell; }
}

.logo-field { display: flex; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.logo-field__preview {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface-alt, #f8fafc);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.logo-field__image { width: 100%; height: 100%; object-fit: contain; }
.logo-field__placeholder { color: var(--muted); font-size: 1.8rem; display: flex; }
.logo-field__controls { flex: 1; min-width: 220px; }
.file-input-row { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.file-input-row__name { color: var(--muted); font-size: .85rem; }

.copy-field { display: flex; align-items: center; gap: .5rem; }
.copy-field .input { flex: 1; min-width: 0; }

.calendar-subscription-list { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.calendar-subscription-list li {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: .75rem 1rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-soft);
}
.calendar-subscription-list span { color: var(--muted); font-size: .85rem; }

/* ---------- Tables ---------- */
.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: .93rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.card > .table:only-child,
.card > form:only-child > .table,
.card > form:only-child > .bulk-bar + .table {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.table th, .table td {
  padding: .55rem .85rem;
  text-align: start;
  border-bottom: 1px solid var(--border);
}

.table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: linear-gradient(180deg, #f9fafb, #f4f7f5);
  color: var(--muted);
  font-weight: 800;
  font-size: .82rem;
  text-transform: none;
}

.table tbody tr {
  transition: background .12s, box-shadow .12s;
}
.table tbody tr:hover { background: #fbfdfc; }
.table tbody tr:last-child td { border-bottom: none; }
.table__empty { text-align: center; color: var(--muted); padding: 2rem 0; }
.member-identity { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.member-identity__avatar {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--brand-light);
  color: var(--brand-dark);
  font-weight: 800;
  font-size: .82rem;
}
.empty-action {
  display: grid;
  place-items: center;
  gap: .75rem;
  min-height: 180px;
  padding: 1.5rem;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(230, 255, 250, .55), rgba(255, 255, 255, .2)),
    var(--surface);
}
.empty-action::before {
  content: "＋";
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: var(--brand-dark);
  background: var(--brand-light);
  border: 1px solid #a7f3d0;
  border-radius: 50%;
  font-size: 1.4rem;
  font-weight: 800;
}
.empty-action .table__empty { padding-bottom: 0; }

.student-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: .85rem;
  margin-bottom: 1rem;
}
.student-overview__panel {
  display: grid;
  align-content: start;
  gap: .45rem;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 1rem;
}
.student-overview__label {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 800;
}
.student-overview__title,
.student-overview__link {
  color: var(--ink);
  font-weight: 800;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.student-overview__title:hover,
.student-overview__link:hover { color: var(--brand); text-decoration: none; }
.student-overview__meta,
.student-overview__actions,
.student-overview__stack {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .45rem;
}
.student-overview__actions { margin-top: .35rem; }
.student-overview__stack {
  align-items: flex-start;
  flex-direction: column;
}
.student-overview__empty {
  color: var(--muted);
  font-size: .9rem;
  margin: 0;
}
.student-attention {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .75rem;
  margin-bottom: 1rem;
  padding: .8rem 1rem;
  border: 1px solid #fde68a;
  border-radius: 10px;
  background: var(--warning-bg);
}
.student-attention > div:first-child { display: grid; gap: .1rem; margin-inline-end: auto; }
.student-attention > div:first-child strong { font-size: .88rem; }
.student-attention > div:first-child span { color: var(--muted); font-size: .78rem; }
.student-attention__signals { display: flex; flex-wrap: wrap; gap: .35rem; }
.timeline-filters { display: flex; flex-wrap: wrap; gap: .3rem; }
.timeline-filter {
  padding: .3rem .52rem;
  color: var(--muted);
  font-size: .75rem;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
}
.timeline-filter:hover,
.timeline-filter--active,
.timeline-filter--active:hover { color: var(--brand); border-color: rgba(15, 118, 110, .35); background: var(--brand-light); text-decoration: none; }
.guardian-chip { gap: .5rem; }
.guardian-chip__contact { color: var(--brand); font-size: .75rem; font-weight: 700; }

@media (max-width: 640px) {
  .student-attention { align-items: stretch; flex-direction: column; }
  .student-attention .btn { width: 100%; }
  .timeline-filters { width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: .2rem; }
  .timeline-filter { flex: 0 0 auto; }
}

.today-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.workspace-progress {
  display: grid;
  grid-template-columns: minmax(220px, .45fr) 1fr;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 1rem;
  border: 1px solid rgba(15, 118, 110, .25);
  border-radius: var(--radius);
  background: var(--brand-light);
}
.workspace-progress strong,
.workspace-progress span { display: block; }
.workspace-progress strong { color: var(--ink); font-size: .95rem; }
.workspace-progress > div > span { margin-top: .15rem; color: var(--muted); font-size: .78rem; }
.workspace-progress__track { height: 10px; overflow: hidden; border-radius: 999px; background: rgba(15, 118, 110, .15); }
.workspace-progress__track span { height: 100%; border-radius: inherit; background: var(--brand); }
.workspace-roster { display: grid; gap: .55rem; }
.workspace-student {
  display: grid;
  grid-template-columns: auto minmax(180px, 1fr) minmax(220px, auto) auto;
  align-items: center;
  gap: .75rem;
  padding: .75rem .85rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.workspace-student--complete { border-color: rgba(16, 185, 129, .32); background: linear-gradient(90deg, rgba(236, 253, 245, .7), var(--surface)); }
.workspace-student__number { display: grid; place-items: center; width: 30px; height: 30px; color: var(--muted); font-size: .78rem; font-weight: 800; border-radius: 50%; background: var(--surface-soft); }
.workspace-student__identity { min-width: 0; }
.workspace-student__name { display: block; color: var(--ink); font-weight: 800; text-decoration: none; }
.workspace-student__name:hover { text-decoration: none; }
.workspace-student__identity span { display: block; overflow: hidden; margin-top: .15rem; color: var(--muted); font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
.workspace-student__states { display: flex; flex-wrap: wrap; gap: .35rem; }

@media (max-width: 760px) {
  .workspace-progress { grid-template-columns: 1fr; }
  .workspace-student { grid-template-columns: auto 1fr; }
  .workspace-student__states,
  .workspace-student__actions { grid-column: 2; }
  .workspace-student__actions .btn { width: 100%; }
}
.today-card {
  min-width: 0;
}
.today-card--wide {
  grid-column: 1 / -1;
}
.today-list {
  display: grid;
  gap: .7rem;
}
.today-row {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr) auto;
  align-items: center;
  gap: .8rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .85rem;
  background: var(--surface-soft);
}
.today-row__time {
  display: grid;
  gap: .15rem;
  color: var(--muted);
  font-size: .82rem;
}
.today-row__time strong {
  color: var(--brand);
  font-size: 1rem;
}
.today-row__body { min-width: 0; }
.today-row__title,
.today-mini-list__title {
  color: var(--ink);
  font-weight: 800;
  text-decoration: none;
}
.today-mini-list__subtle-link {
  color: inherit;
  text-decoration: none;
}
.today-row__title:hover,
.today-mini-list__title:hover,
.today-mini-list__subtle-link:hover { color: var(--brand); text-decoration: none; }
.today-row__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  color: var(--muted);
  font-size: .82rem;
  margin-top: .2rem;
}
.today-row__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .45rem;
}
.today-mini-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.today-mini-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .7rem 0;
  border-bottom: 1px solid var(--border);
}
.today-mini-list li:last-child { border-bottom: none; }
.today-mini-list span {
  display: block;
  color: var(--muted);
  font-size: .82rem;
  margin-top: .15rem;
}
.today-mini-list--columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1rem;
}

/* Responsive tables: turn rows into readable cards on small screens */
@media (max-width: 640px) {
  .table {
    display: block;
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    white-space: normal;
  }
  .table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .table tbody {
    display: grid;
    gap: .75rem;
  }
  .table tr {
    display: grid;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 9px;
    box-shadow: var(--shadow-sm);
  }
  .table th,
  .table td {
    border-bottom: 1px solid var(--border);
  }
  .table td {
    display: grid;
    grid-template-columns: minmax(7rem, 38%) minmax(0, 1fr);
    gap: .75rem;
    align-items: start;
    min-width: 0;
    padding: .65rem .8rem;
    overflow-wrap: anywhere;
    white-space: normal;
  }
  .table td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: .78rem;
    font-weight: 800;
  }
  .table td:not([data-label]) {
    display: block;
  }
  .table td:not([data-label])::before {
    display: none;
  }
  .table td.row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    align-items: stretch;
    justify-content: stretch;
  }
  .table td.row-actions::before {
    flex: 0 0 100%;
  }
  .table td.row-actions > * {
    flex: 1 1 140px;
  }
  .table td.row-actions .btn {
    width: 100%;
  }
  .table--people td.row-actions::before {
    display: none;
  }
  .table--people td.row-actions > * {
    flex: 1 1 auto;
  }
  .table--people td.row-actions .btn {
    width: auto;
    min-width: 84px;
  }
  .table td.assignment-actions-cell .row-actions {
    grid-column: 1 / -1;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: stretch;
    margin-top: .1rem;
  }
  .table td.assignment-actions-cell .row-actions > * {
    flex: 1 1 140px;
  }
  .table td.assignment-actions-cell .btn {
    width: 100%;
  }
  .table tbody tr:hover { background: var(--surface); }
  .table tbody tr:last-child td { border-bottom: 1px solid var(--border); }
  .table tbody tr td:last-child { border-bottom: 0; }
  .table-stack {
    min-width: 0;
  }
  .page__header { align-items: stretch; }
  .toolbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
  .toolbar .field { width: 100%; }
  .toolbar .field--grow,
  .toolbar .field:has(input[type="text"]),
  .toolbar .field:has(input[type="search"]),
  .toolbar .field:last-child { grid-column: 1 / -1; }
  .analytics { grid-template-columns: 1fr; }
  .stat-card__value { font-size: 1.35rem; }
  .assign-existing { flex-direction: column; align-items: stretch; }
  .planner-panel__head,
  .planner-note {
    align-items: stretch;
    flex-direction: column;
  }
  .planner-panel--missing .planner-panel__head { align-items: flex-start; }
  .missing-grid { grid-template-columns: 1fr; padding: .75rem; }
  .missing-student { padding: .8rem; }
  .segmented {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }
  .segmented__option {
    display: grid;
    min-height: 36px;
    place-items: center;
    text-align: center;
  }
}

/* ---------- Badges & chips ---------- */
.badge {
  display: inline-block;
  padding: .15rem .6rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  background: #eef2ff;
  color: #4338ca;
  white-space: nowrap;
}

.badge--new { background: var(--brand-light); color: var(--brand); }
.badge--minor { background: var(--info-bg); color: var(--info); }
.badge--major { background: #fff7ed; color: #c2410c; }

.badge--present { background: var(--brand-light); color: var(--brand); }
.badge--absent { background: var(--danger-bg); color: var(--danger); }
.badge--late { background: var(--warning-bg); color: var(--warning); }
.badge--excused { background: var(--info-bg); color: var(--info); }
.badge--fee-due { background: var(--warning-bg); color: var(--warning); }
.badge--auto-review { background: var(--info-bg); color: var(--info); }

.grade {
  font-weight: 800;
  font-size: 1.05rem;
}
.grade--high { color: var(--brand); }
.grade--mid { color: var(--warning); }
.grade--low { color: var(--danger); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .6rem;
  border-radius: 8px;
  background: #f3f4f6;
  font-size: .82rem;
  color: var(--ink);
}
.chip .app-icon {
  width: 1rem;
  height: 1rem;
  color: var(--brand);
}
.chip strong { color: var(--ink); font-size: .95rem; }

/* ---------- Forms (grid) ---------- */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
.form-grid .field { margin-bottom: 0; }
.form-grid .field--full { grid-column: 1 / -1; }

@media (max-width: 560px) {
  .form-grid { grid-template-columns: 1fr; }
}

textarea.input { resize: vertical; min-height: 90px; }

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.25rem;
}

.form-actions--sticky {
  position: sticky;
  bottom: 0;
  z-index: 5;
  align-items: center;
  background: rgba(247, 248, 245, .94);
  border-top: 1px solid var(--border);
  padding: .85rem 0;
  backdrop-filter: blur(8px);
}

.form-disclosure {
  margin-top: 1rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-soft);
}
.form-disclosure > summary,
.record-step--optional > summary {
  display: flex;
  align-items: center;
  gap: .65rem;
  cursor: pointer;
  list-style: none;
}
.form-disclosure > summary { padding: .8rem .9rem; }
.form-disclosure > summary::-webkit-details-marker,
.record-step--optional > summary::-webkit-details-marker { display: none; }
.form-disclosure > summary::after,
.record-step--optional > summary::after {
  content: "+";
  margin-inline-start: auto;
  color: var(--brand);
  font-size: 1.25rem;
  font-weight: 700;
}
.form-disclosure[open] > summary::after,
.record-step--optional[open] > summary::after { content: "−"; }
.form-disclosure > summary span { color: var(--ink); font-size: .88rem; font-weight: 700; }
.form-disclosure > summary small,
.record-step--optional > summary small { display: block; margin-top: .1rem; color: var(--muted); font-size: .76rem; font-weight: 500; }
.form-disclosure__content {
  padding: .9rem;
  border-top: 1px solid var(--border);
}
.record-step--optional > summary { margin: 0; }
.record-step--optional[open] > summary { padding-bottom: .8rem; border-bottom: 1px solid var(--border); }
.record-step__content { padding-top: 1rem; }
.session-primary-grade { max-width: 560px; }
.grade-mode-options { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-bottom: .8rem; }
.grade-mode-options .switch-row { align-items: center; }

.errors {
  background: var(--danger-bg);
  border: 1px solid #fecaca;
  color: var(--danger);
  border-radius: 10px;
  padding: .75rem 1rem;
  margin-bottom: 1rem;
  font-size: .9rem;
}
.errors ul { margin: .3rem 0 0; padding-inline-start: 1.2rem; }

/* ---------- Segmented control (attendance roster) ---------- */
.segmented {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .35rem;
}

.segmented__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.segmented__option {
  cursor: pointer;
  user-select: none;
  padding: .35rem .7rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #fff;
  font-size: .85rem;
  color: var(--muted);
  transition: background .12s, color .12s, border-color .12s;
}

.segmented__option:hover { border-color: #cbd5e1; }

.segmented__option--present:has(.segmented__input:checked) {
  background: var(--brand-light); color: var(--brand); border-color: #a7f3d0;
}
.segmented__option--absent:has(.segmented__input:checked) {
  background: var(--danger-bg); color: var(--danger); border-color: #fecaca;
}
.segmented__option--late:has(.segmented__input:checked) {
  background: var(--warning-bg); color: var(--warning); border-color: #fde68a;
}
.segmented__option--excused:has(.segmented__input:checked) {
  background: var(--info-bg); color: var(--info); border-color: #bfdbfe;
}

.segmented__option:has(.segmented__input:focus-visible) {
  box-shadow: 0 0 0 3px rgba(4, 120, 87, 0.15);
}

.attendance-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .85rem;
}
.attendance-tools .card__title { margin: 0; }
.attendance-tools__actions { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: flex-end; }
.attendance-summary {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: .9rem;
  padding: .65rem;
  border-radius: 10px;
  background: var(--surface-soft);
}
.attendance-summary__item {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .32rem .55rem;
  color: var(--muted);
  font-size: .78rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
}
.attendance-summary__item strong { color: var(--ink); font-size: .9rem; }
.attendance-summary__item--present strong { color: var(--success); }
.attendance-summary__item--absent strong { color: var(--danger); }
.attendance-summary__item--late strong { color: var(--warning); }
.attendance-summary__item--excused strong { color: var(--info); }
.attendance-save { justify-content: flex-end; }
.attendance-save__summary { margin-inline-end: auto; color: var(--muted); font-size: .82rem; font-weight: 700; }

@media (max-width: 640px) {
  .attendance-tools { align-items: stretch; flex-direction: column; }
  .attendance-tools__actions { display: grid; grid-template-columns: repeat(2, 1fr); }
  .attendance-tools__actions .btn { width: 100%; }
  .attendance-save__summary { width: 100%; text-align: center; }
}

/* ---------- Charts & meters ---------- */
.chart {
  width: 100%;
  height: 160px;
  display: block;
}

.chart-figure { margin: 0; }

.chart__empty { color: var(--muted); font-size: .9rem; margin: 0; }

.meter {
  height: 10px;
  background: #f3f4f6;
  border-radius: 999px;
  overflow: hidden;
}

.meter__fill {
  width: 0;
  height: 100%;
  background: var(--brand);
  border-radius: 999px;
  transition: width .2s;
}
.meter--info .meter__fill { background: var(--info); }
.meter--warning .meter__fill { background: var(--warning); }
.meter--danger .meter__fill { background: var(--danger); }
.meter--accent .meter__fill { background: var(--accent); }

/* ---------- Certificates ---------- */
.certificate-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}

.certificate-card {
  display: flex;
  flex-direction: column;
  min-height: 270px;
  text-decoration: none;
  color: inherit;
  background:
    linear-gradient(180deg, rgba(255, 251, 235, .68), rgba(255, 255, 255, .82) 42%),
    #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem 1.25rem;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform .12s, box-shadow .12s, border-color .12s;
}
.certificate-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: #fde68a; text-decoration: none; }
.certificate-card__seal {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  align-self: center;
  color: var(--warning);
  background: #fff;
  border: 1px solid #fde68a;
  border-radius: 50%;
  box-shadow: 0 10px 22px rgba(214, 162, 58, .14);
  font-size: 2rem;
}
.certificate-card__seal .app-icon {
  width: 1.55rem;
  height: 1.55rem;
}
.certificate-card__type { color: var(--brand); font-weight: 700; font-size: .85rem; margin-top: .4rem; }
.certificate-card__title { overflow-wrap: anywhere; font-weight: 800; margin-top: .3rem; }
.certificate-card__student { color: var(--ink); margin-top: .35rem; }
.certificate-card__date { color: var(--muted); font-size: .82rem; margin-top: .5rem; }
.certificate-card__actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: auto;
  padding-top: 1rem;
}

.certificate { max-width: 640px; margin: 0 auto; }
.certificate__border {
  border: 3px double var(--brand);
  border-radius: 16px;
  padding: 2.5rem 2rem;
  text-align: center;
  background:
    radial-gradient(600px 200px at 50% -10%, rgba(4,120,87,0.08), transparent 70%),
    #fff;
  box-shadow: var(--shadow);
}
.certificate__seal {
  display: inline-grid;
  place-items: center;
  color: var(--warning);
  font-size: 3rem;
}
.certificate__seal .app-icon {
  width: 2.65rem;
  height: 2.65rem;
}
.certificate__eyebrow { color: var(--brand); font-weight: 700; letter-spacing: .04em; margin: .5rem 0 0; }
.certificate__title { font-size: 1.6rem; font-weight: 800; margin: .5rem 0 1.5rem; }
.certificate__awarded { color: var(--muted); margin: 0; }
.certificate__student { font-size: 1.4rem; font-weight: 800; color: var(--ink); margin: .3rem 0; }
.certificate__reference { color: var(--brand-dark); font-weight: 600; margin: .3rem 0; }
.certificate__desc { color: var(--ink); margin: 1rem 0 0; }
.certificate__footer {
  display: flex; justify-content: space-between; gap: 1rem;
  margin-top: 2rem; color: var(--muted); font-size: .85rem;
}

/* ---------- Leaderboard ---------- */
.leaderboard-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: .75rem;
  margin-bottom: 1rem;
}

.leaderboard-summary__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  min-height: 68px;
  padding: .85rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.leaderboard-summary__item span { color: var(--muted); font-size: .84rem; font-weight: 700; }
.leaderboard-summary__item strong { color: var(--ink); font-size: 1.2rem; }

.podium {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1rem;
}
.podium__place {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1rem;
  text-align: center;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.podium__place--1 { border-color: #fcd34d; background: linear-gradient(180deg,var(--accent-light),#fff); transform: translateY(-6px); }
.podium__place--2 { border-color: #e5e7eb; }
.podium__place--3 { border-color: #fed7aa; }
.podium__medal { font-size: 2rem; }
.podium__name { display: block; font-weight: 800; margin-top: .3rem; color: var(--ink); text-decoration: none; }
.podium__name:hover { color: var(--brand); text-decoration: none; }
.podium__meta { color: var(--muted); font-size: .82rem; margin-top: .15rem; }
.podium__halaqah { color: var(--muted); text-decoration: none; }
.podium__halaqah:hover { color: var(--brand); text-decoration: none; }
.podium__points { color: var(--brand); font-weight: 700; font-size: .9rem; margin-top: .2rem; }

.leaderboard-row--1 td { background: var(--accent-light); }
.leaderboard-row--2 td { background: #f9fafb; }
.leaderboard-row--3 td { background: #fff7ed; }
.leaderboard-row__student { color: var(--ink); font-weight: 800; text-decoration: none; }
.leaderboard-row__student:hover { color: var(--brand); text-decoration: none; }
.leaderboard-row__halaqah { color: var(--ink); text-decoration: none; }
.leaderboard-row__halaqah:hover { color: var(--brand); text-decoration: none; }
.badge-icon {
  width: 1.5rem;
  height: 1.5rem;
  display: inline-grid;
  place-items: center;
  margin-inline-end: .2rem;
  color: var(--brand);
  background: var(--brand-light);
  border-radius: 999px;
  vertical-align: middle;
}

.badge-icon .app-icon {
  width: .9rem;
  height: .9rem;
}

.badge-tile__icon {
  display: grid;
  place-items: center;
  color: var(--brand);
}

.badge-tile__icon .app-icon {
  width: 1.55rem;
  height: 1.55rem;
}

/* ---------- Student progress ---------- */
.progress-summary { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.progress-summary__label { color: var(--muted); font-size: .85rem; }
.progress-summary__points { color: var(--brand); font-size: 2rem; font-weight: 800; }
.progress-badges, .progress-certificates { display: flex; flex-wrap: wrap; gap: .6rem; }
.progress-badge { min-width: 80px; padding: .5rem .75rem; text-align: center; background: var(--surface-soft); border: 1px solid var(--border); border-radius: 10px; }
.progress-badge__name { margin-top: .2rem; font-size: .78rem; font-weight: 700; }
.progress-stats, .progress-chart-card, .progress-target-form { margin-top: 1rem; }
.progress-target-form .btn { min-height: 40px; }
.progress-section__title { margin: 0 0 .75rem; font-size: 1.05rem; }
.progress-section__title--spacious { margin-bottom: 1rem; }
.progress-error-row { display: flex; align-items: center; gap: .75rem; margin-bottom: .6rem; }
.progress-error-row:last-child { margin-bottom: 0; }
.progress-error-row__label { flex: 0 0 90px; color: var(--ink); font-size: .9rem; }
.progress-error-row__meter { flex: 1; min-width: 0; }
.progress-error-row__count { flex: 0 0 32px; text-align: end; font-weight: 700; }
.progress-attendance { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .6rem; }
.progress-attendance__item { display: flex; flex-direction: column; gap: .35rem; align-items: flex-start; }
.progress-attendance__count { font-size: 1.3rem; font-weight: 800; }
.progress-certificate { text-decoration: none; }
.progress-certificate:hover { text-decoration: none; }
.plan-section { margin-top: 1rem; }
.plan-card { display: grid; gap: .9rem; padding: 1rem; background: var(--surface-soft); border: 1px solid var(--border); border-radius: var(--radius); }
.plan-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.plan-card__head > div { display: grid; gap: .2rem; }
.plan-card__head span, .plan-card__metrics span, .plan-history__item span { color: var(--muted); font-size: .8rem; }
.plan-progress { width: 100%; height: .65rem; overflow: hidden; appearance: none; background: var(--border); border: 0; border-radius: 999px; }
.plan-progress::-webkit-progress-bar { background: var(--border); border-radius: 999px; }
.plan-progress::-webkit-progress-value { background: linear-gradient(90deg, var(--brand), var(--accent)); border-radius: 999px; }
.plan-progress::-moz-progress-bar { background: linear-gradient(90deg, var(--brand), var(--accent)); border-radius: 999px; }
.plan-card__metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }
.plan-card__metrics div { display: grid; padding: .65rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.plan-card__metrics strong { color: var(--brand); font-size: 1.15rem; }
.plan-card__notes { margin: 0; white-space: pre-wrap; }
.plan-card__actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.plan-form { margin-top: .75rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.plan-history { margin-top: 1rem; border-top: 1px solid var(--border); padding-top: .75rem; }
.plan-history summary { cursor: pointer; color: var(--brand); font-weight: 800; }
.plan-history__list { display: grid; margin-top: .6rem; }
.plan-history__item { display: flex; align-items: center; gap: .75rem; padding: .65rem 0; border-bottom: 1px solid var(--border); }
.plan-history__item:last-child { border-bottom: 0; }
.plan-history__item > div:first-child { display: grid; flex: 1; min-width: 0; }
@media (max-width: 640px) {
  .plan-card__head, .plan-history__item { align-items: stretch; flex-direction: column; }
  .plan-card__metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan-card__actions .button_to, .plan-card__actions .btn { width: 100%; }
}
.progress-health { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 1rem; align-items: center; margin-top: 1rem; padding: 1rem 1.2rem; background: var(--surface); border: 1px solid var(--border); border-inline-start: 4px solid var(--brand); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.progress-health__title { margin: 0; font-size: 1rem; }
.progress-health__hint, .progress-section__hint { margin: .2rem 0 0; color: var(--muted); font-size: .85rem; }
.progress-health__status { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.progress-health__followups { min-width: 90px; text-align: center; }
.progress-health__followups strong { display: block; color: var(--brand); font-size: 1.4rem; }
.progress-health__followups span { color: var(--muted); font-size: .78rem; }
.intervention-list { display: grid; gap: .65rem; margin-top: 1rem; }
.intervention { display: flex; gap: .75rem; align-items: center; padding: .8rem; background: var(--surface-soft); border: 1px solid var(--border); border-radius: var(--radius); }
.intervention--resolved { opacity: .72; }
.intervention__body { flex: 1; min-width: 0; }
.intervention__body p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.intervention__meta { margin-top: .25rem; color: var(--muted); font-size: .78rem; }
@media (max-width: 640px) {
  .progress-health { grid-template-columns: 1fr; align-items: start; }
  .progress-health__followups { text-align: start; }
  .progress-health__followups strong { display: inline; margin-inline-end: .3rem; }
  .intervention { align-items: stretch; flex-direction: column; }
}
.muted-text { color: var(--muted); }

/* ---------- Notifications ---------- */
.notifications-actions {
  display: inline-flex;
  align-items: center;
}
.notifications-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) repeat(2, minmax(150px, 1fr)) auto;
}
.notifications-toolbar .field,
.notifications-toolbar .field--grow {
  min-width: 0;
}
.notifications-toolbar .toolbar__input,
.notifications-toolbar .btn {
  min-height: 44px;
}
.notifications-card {
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.notif-list { list-style: none; margin: 0; padding: 0; }
.notif-list:empty { display: none; }
.notif {
  display: grid;
  grid-template-areas: "icon body action";
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: flex-start;
  gap: 1rem;
  padding: .7rem 1rem;
  border-bottom: 1px solid var(--border);
  background: #fff;
  transition: background .12s;
}
.notif--selectable {
  grid-template-areas: "select icon body action";
  grid-template-columns: 44px 42px minmax(0, 1fr) auto;
}
.notif:last-child { border-bottom: none; }
.notif:hover { background: #fbfdfc; }
.notif--unread {
  background: var(--brand-light);
  border-inline-start: 4px solid var(--brand);
}
.notif__select {
  grid-area: select;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  cursor: pointer;
}
.notif__select:hover { background: rgba(15, 118, 110, .08); }
.notif__select:has(input:focus-visible) {
  outline: 3px solid rgba(15, 118, 110, .24);
  outline-offset: 1px;
}
.notif__select input,
.notifications-bulk__select input {
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--brand);
}
.notif__icon {
  grid-area: icon;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  background: var(--brand-light);
  border: 1px solid #ccfbf1;
  border-radius: 10px;
  font-size: 1.25rem;
  line-height: 1;
}
.notif__icon .app-icon {
  width: 1.18rem;
  height: 1.18rem;
}
.notif__body { grid-area: body; min-width: 0; }
.notif__meta {
  display: flex;
  align-items: center;
  gap: .45rem;
  flex-wrap: wrap;
  margin-bottom: .18rem;
}
.notif__dot {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  color: var(--brand-dark);
  font-size: .76rem;
  font-weight: 800;
}
.notif__dot::before {
  content: "";
  width: .42rem;
  height: .42rem;
  background: var(--brand);
  border-radius: 999px;
}
.notif__title { overflow-wrap: anywhere; font-weight: 800; line-height: 1.35; }
.notif__text { max-width: 70ch; margin-top: .15rem; color: var(--ink); font-size: .9rem; overflow-wrap: anywhere; white-space: pre-wrap; }
.notif__time { margin-top: .35rem; color: var(--muted); font-size: .78rem; overflow-wrap: anywhere; }
.notif__action { grid-area: action; min-width: 0; }
.notif__action,
.notif__action .button_to,
.notif__action .btn,
.notif__action .btn:hover { text-decoration: none; }
.message-thread { display: flex; flex-direction: column; gap: 1rem; }
.message-thread__list {
  list-style: none;
  margin: 0;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.message-bubble {
  max-width: 70%;
  padding: .6rem .85rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
}
.message-bubble--mine {
  align-self: flex-end;
  background: var(--brand-light);
  border-color: #ccfbf1;
}
.message-bubble__meta {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  margin-bottom: .2rem;
  font-size: .78rem;
  color: var(--muted);
}
.message-bubble__meta strong { color: var(--ink); font-weight: 750; }
.message-bubble__body { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.message-thread__composer {
  display: flex;
  gap: .6rem;
  align-items: flex-end;
}
.message-thread__composer .input { flex: 1; min-height: 44px; resize: vertical; }

.notif-live {
  margin-bottom: 1rem;
  padding: 1rem;
  background:
    linear-gradient(135deg, rgba(15,118,110,.10), rgba(214,162,58,.10)),
    var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.notif-live__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .85rem;
}
.notif-live__label {
  color: var(--brand);
  font-size: .78rem;
  font-weight: 800;
}
.notif-live__title {
  margin-top: .1rem;
  font-weight: 800;
}
.notif-live__items {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
}
.notif-live__item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .6rem .75rem;
  font: inherit;
  color: var(--ink);
  text-align: start;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}
.notif-live__item:hover {
  border-color: #99f6e4;
  background: var(--brand-light);
  text-decoration: none;
}
.notif-live__item .button_to,
.notif-live__item:hover .button_to { text-decoration: none; }
.notif-live__icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  background: var(--accent-light);
  border-radius: 9px;
}
.notif-live__icon .app-icon {
  width: 1.05rem;
  height: 1.05rem;
}
.notif-live__copy {
  min-width: 0;
  display: grid;
  gap: .1rem;
}
.notif-live__item-title {
  overflow: hidden;
  color: var(--ink);
  font-size: .9rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.notif-live__time {
  color: var(--muted);
  font-size: .76rem;
}
.notif-live__empty {
  margin: 0;
  color: var(--muted);
}
.notifications-bulk {
  justify-content: space-between;
  margin: .85rem;
}
.notifications-bulk__select {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding-inline: .25rem;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 700;
}
.notifications-bulk__select:has(input:focus-visible) {
  outline: 3px solid rgba(15, 118, 110, .24);
  outline-offset: 1px;
}
.notifications-bulk__count {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--brand-dark);
  font-size: .86rem;
  font-weight: 700;
}

/* ---------- Responsive polish ---------- */
@media (max-width: 860px) {
  .mobile-nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  }

  .shell__content::before,
  .shell--collapsed .shell__content::before {
    inset-inline-start: 0;
  }

  .topbar {
    align-items: flex-start;
    padding: .7rem .9rem;
  }

  .topbar__start {
    min-width: 0;
    flex: 1;
  }

  .topbar__title {
    overflow: hidden;
    max-width: 46vw;
    font-size: 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .topbar__subtitle {
    overflow: hidden;
    max-width: 46vw;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .topbar__end {
    gap: .45rem;
    justify-content: flex-end;
    min-width: 0;
  }

  .topbar__user,
  .topbar__logout,
  .topbar .lang-switch {
    display: none;
  }

  .topbar__menu,
  .notif-bell {
    width: 36px;
    height: 36px;
  }

  .shell__content {
    /* Must clear both fixed elements stacked at this corner: .mobile-nav
       plus .feedback-trigger sitting above it at bottom: 5.3rem with its
       own ~2.75rem height (see the .feedback-trigger rule just above),
       whose top edge lands at ~8.05rem -- 6.25rem left its last ~1.8rem
       uncovered, letting page content show through underneath it. */
    padding: 1rem .9rem calc(8.5rem + env(safe-area-inset-bottom));
    max-width: 100%;
  }

  .dashboard-hero { align-items: flex-start; flex-direction: column; gap: .8rem; }
  .dashboard-hero__context { justify-items: start; text-align: start; }
  .dashboard-actions__head { align-items: flex-start; }
  .dashboard-summary__head { flex-direction: column; align-items: flex-start; gap: .5rem; }

  .page__header {
    align-items: stretch;
    flex-direction: column;
    gap: .75rem;
    margin-bottom: 1rem;
    padding-bottom: .8rem;
  }

  .page__header > div:has(.btn) {
    justify-content: stretch;
  }

  .page__title {
    font-size: 1.25rem;
    line-height: 1.25;
  }

  .page__subtitle {
    font-size: .84rem;
  }

  .page-actions,
  .page__actions,
  .row-actions,
  .form-actions,
  .bulk-bar,
  .quick-actions {
    justify-content: stretch;
  }

  .page-actions > *,
  .page__actions > *,
  .row-actions > *,
  .form-actions > *,
  .bulk-bar > *,
  .quick-actions > * {
    flex: 1 1 150px;
    min-width: 0;
  }

  .page-actions .btn,
  .page__actions .btn,
  .row-actions .btn,
  .form-actions .btn,
  .bulk-bar .btn,
  .quick-actions .btn {
    width: 100%;
  }

  .card,
  .planner-panel,
  .planner-note,
  .toolbar,
  .notifications-card,
  .notif-live {
    border-radius: 8px;
  }

  .card {
    padding: 1rem;
  }

  .toolbar {
    padding: .8rem;
  }

  .planner-summary,
  .leaderboard-summary,
  .ward-grid,
  .missing-grid,
  .certificate-grid,
  .schedule-card {
    grid-template-columns: 1fr;
  }

  .stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .6rem;
  }

  .stat-card {
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
    padding: .8rem;
  }

  .stat-card__icon {
    width: 34px;
    height: 34px;
    font-size: 1.05rem;
  }

  .stat-card__label {
    font-size: .78rem;
  }

  .stat-card__value {
    font-size: 1.3rem;
  }

  .stat-card--link {
    position: relative;
  }

  .stat-card__arrow {
    position: absolute;
    inset-inline-end: .8rem;
    inset-block-start: .8rem;
  }

  .upcoming-halaqah {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .upcoming-halaqah__actions {
    justify-content: stretch;
  }

  .upcoming-halaqah__actions .btn {
    flex: 1 1 0;
  }

  .podium {
    grid-template-columns: 1fr;
  }

  .podium__place--1 {
    transform: none;
  }

  .certificate-card {
    min-height: 0;
    padding: 1.15rem 1rem;
  }

  .certificate__border {
    padding: 1.5rem 1rem;
  }

  .certificate__footer {
    align-items: center;
    flex-direction: column;
    gap: .35rem;
    margin-top: 1.25rem;
  }

  .pagination {
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: .15rem;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .pagination__btn,
  .pagination__page {
    flex: 0 0 auto;
  }

  .form-actions--sticky {
    bottom: calc(5.25rem + env(safe-area-inset-bottom));
    margin-inline: -.9rem;
    padding: .75rem .9rem;
  }

  .assignment-list li,
  .config-list li,
  .top-students li {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .assignment-list li .btn {
    margin-inline-start: auto;
  }

  .notifications-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .notifications-toolbar .field--grow,
  .notifications-toolbar .field:last-child {
    grid-column: auto;
  }

  .notif-live__items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .notif {
    grid-template-areas:
      "icon body"
      ". action";
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .notif--selectable {
    grid-template-areas:
      "select icon body"
      ". . action";
    grid-template-columns: 44px 42px minmax(0, 1fr);
  }

  .notif__action .button_to,
  .notif__action .btn {
    width: 100%;
  }

  .notifications-bulk > * {
    flex: 0 1 auto;
  }

  .notifications-bulk__count {
    flex: 1 1 8rem;
  }
}

@media (max-width: 640px) {
  .topbar {
    display: flex;
    align-items: center;
    position: sticky;
    gap: .4rem;
  }

  .topbar__end {
    width: auto;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    justify-content: flex-end;
    padding-inline-start: 0;
  }

  .topbar-search,
  .notif-bell {
    width: 42px;
    height: 42px;
    min-height: 42px;
    padding: 0;
    justify-content: center;
  }

  .topbar__title,
  .topbar__subtitle {
    max-width: min(52vw, 16rem);
  }

  .count-pill {
    margin-inline-start: .25rem;
    vertical-align: .1rem;
  }

  .table {
    font-size: .86rem;
  }

  .table th,
  .table td {
    padding: .6rem .65rem;
  }

  .notif {
    grid-template-areas:
      "icon body"
      ". action";
    grid-template-columns: 36px minmax(0, 1fr);
    gap: .75rem;
    padding: .9rem;
  }

  .notif--selectable {
    grid-template-areas:
      "select icon body"
      ". . action";
    grid-template-columns: 44px 36px minmax(0, 1fr);
  }

  .notif__icon {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
    font-size: 1.05rem;
  }

  .notif__action {
    width: 100%;
    margin-inline-start: 0;
  }

  .notif__action .btn {
    width: 100%;
  }

  .notif-live__head {
    align-items: stretch;
    flex-direction: column;
    gap: .65rem;
  }

  .notif-live__head .btn {
    width: 100%;
  }

  .notif-live__items {
    grid-template-columns: 1fr;
  }

  .notif-live__item-title {
    white-space: normal;
  }

  .notifications-toolbar {
    grid-template-columns: minmax(0, 1fr);
  }

  .notifications-toolbar .field,
  .notifications-toolbar .field--grow,
  .notifications-toolbar .field:last-child {
    grid-column: 1;
  }

  .notifications-bulk {
    align-items: stretch;
  }

  .notifications-bulk__select,
  .notifications-bulk__count,
  .notifications-bulk .btn {
    flex-basis: 100%;
  }

  .ward-grid {
    grid-template-columns: 1fr;
  }

  .ward-card {
    padding: .95rem;
  }

  .ward-card__metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ward-card__footer {
    align-items: stretch;
    flex-direction: column;
  }

  .ward-card__actions {
    justify-content: stretch;
  }

  .ward-card__actions .btn {
    flex: 1 1 140px;
  }

  .today-grid,
  .today-mini-list--columns {
    grid-template-columns: 1fr;
  }

  .today-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .today-row__actions {
    justify-content: stretch;
  }

  .today-row__actions .btn,
  .today-mini-list .btn {
    flex: 1 1 150px;
  }

  .today-mini-list li {
    align-items: stretch;
    flex-direction: column;
  }

  .assignment-list li {
    align-items: stretch;
    flex-direction: column;
    gap: .55rem;
  }

  .assignment-list li .btn {
    width: 100%;
    margin-inline-start: 0;
  }
}

@media (max-width: 420px) {
  .notif {
    grid-template-areas:
      "body"
      "action";
    grid-template-columns: minmax(0, 1fr);
  }

  .notif--selectable {
    grid-template-areas:
      "select body"
      "action action";
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .notif__icon {
    display: none;
  }
}

@media (max-width: 480px) {
  .topbar {
    padding: .65rem .75rem;
  }

  .shell__content {
    padding-inline: .7rem;
  }

  .form-actions--sticky {
    margin-inline: -.7rem;
    padding-inline: .7rem;
  }

  .mobile-nav {
    inset-inline: .45rem;
    padding: .28rem;
    border-radius: 12px;
  }

  .mobile-nav__item {
    min-height: 48px;
    border-radius: 9px;
  }

  .mobile-nav__label {
    font-size: .64rem;
  }

  .btn {
    font-size: .95rem;
  }

  .planner-summary__item,
  .leaderboard-summary__item {
    min-height: 0;
    padding: .75rem .85rem;
  }

  .stat-card {
    align-items: flex-start;
    padding: .9rem;
  }

  .stat-card__icon {
    width: 38px;
    height: 38px;
  }

  .stat-card__label {
    line-height: 1.25;
  }

  .portion-row {
    grid-template-columns: 1fr;
  }

  .portion-row__surah,
  .portion-row__type,
  .portion-row__ayah,
  .portion-row__grade {
    grid-column: 1 / -1;
  }

  .portion-remove {
    width: 100%;
  }
}

/* Touch layouts retain the compact desktop rhythm while meeting the 44px
   target-size requirement for controls that are intentionally dense. */
@media (max-width: 860px) {
  .btn--sm,
  .toolbar__input,
  .topbar__menu,
  .topbar-search,
  .notif-bell,
  .topbar__logout,
  .sidebar__logout,
  .lang-switch__link,
  .feedback-ratings span,
  .filter-chip,
  .filter-chips__clear,
  .saved-view-chip__delete,
  .segmented__option,
  .acs__input.input,
  .acs__result {
    min-height: 44px;
  }

  .btn--sm,
  .topbar__menu,
  .topbar-search,
  .notif-bell,
  .lang-switch__link,
  .saved-view-chip__delete {
    min-width: 44px;
  }

  .feedback-trigger,
  .portion-remove,
  .saved-view-chip > a,
  .chip--link {
    min-width: 44px;
    min-height: 44px;
  }

  .saved-view-chip > a,
  .chip--link {
    display: inline-flex;
    align-items: center;
  }

  .command-palette__head button,
  .feedback-dialog__head button,
  .flash__dismiss,
  .msel__tag button {
    min-width: 44px;
    min-height: 44px;
  }
}

/* ---------- Liquid Glass material system ----------
   Solid surfaces above remain the fallback. Browsers with backdrop-filter get
   the enhanced material while form controls and dense tables stay opaque. */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  body {
    background:
      radial-gradient(900px 520px at 16% -8%, rgba(42, 180, 160, .17), transparent 67%),
      radial-gradient(720px 460px at 92% 7%, rgba(224, 177, 76, .14), transparent 66%),
      linear-gradient(180deg, #f8fbf9 0, #eef5f1 52%, #f6f7f3 100%);
    background-attachment: fixed;
  }

  .shell__content::before {
    height: 360px;
    background:
      radial-gradient(580px 240px at 15% 0%, rgba(15, 118, 110, .16), transparent 72%),
      radial-gradient(480px 220px at 82% 5%, rgba(214, 162, 58, .13), transparent 74%);
  }

  .topbar,
  .mobile-nav,
  .form-actions--sticky,
  .feedback-trigger,
  .analytics-consent,
  .sync-status {
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    background:
      linear-gradient(135deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .54)),
      rgba(245, 250, 248, .44);
    border-color: var(--glass-border-outer);
    box-shadow: var(--glass-shadow);
  }

  .topbar {
    border-bottom-color: rgba(151, 174, 168, .34);
    box-shadow: 0 1px 0 var(--glass-highlight) inset, 0 10px 30px rgba(20, 70, 64, .07);
  }

  .sidebar {
    background:
      linear-gradient(155deg, rgba(255, 255, 255, .10), transparent 28%),
      radial-gradient(340px 280px at 16% 4%, rgba(54, 211, 187, .19), transparent 68%),
      linear-gradient(180deg, rgba(13, 66, 62, .98), rgba(11, 54, 51, .98));
    border-inline-end: 1px solid rgba(255, 255, 255, .13);
    box-shadow: 1px 0 0 rgba(255, 255, 255, .05) inset, 16px 0 42px rgba(9, 53, 49, .10);
  }

  .nav__item--active {
    background:
      linear-gradient(135deg, rgba(76, 218, 196, .34), rgba(15, 118, 110, .56)),
      rgba(15, 118, 110, .70);
    border: 1px solid rgba(255, 255, 255, .18);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .14) inset, 0 10px 24px rgba(0, 0, 0, .14);
  }

  .topbar__menu,
  .topbar-search,
  .notif-bell,
  .lang-switch,
  .topbar__logout,
  .btn--secondary {
    background: linear-gradient(145deg, rgba(255, 255, 255, .82), rgba(255, 255, 255, .52));
    border-color: rgba(151, 174, 168, .45);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .88) inset, 0 5px 14px rgba(20, 70, 64, .06);
  }

  .lang-switch__link { background: transparent; }

  .lang-switch__link--active {
    color: #fff;
    background: linear-gradient(145deg, rgba(20, 139, 129, .96), rgba(13, 91, 85, .96));
    box-shadow: 0 1px 0 rgba(255, 255, 255, .22) inset;
  }

  .card,
  .stat-card,
  .toolbar,
  .planner-panel,
  .planner-note,
  .planner-summary__item,
  .student-overview__panel,
  .ward-card,
  .assignment-card,
  .certificate-card,
  .notifications-card,
  .notif-live,
  .leaderboard-summary__item,
  .progress-health,
  .auth__card {
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    background:
      linear-gradient(145deg, var(--glass-surface-strong), var(--glass-surface-soft)),
      rgba(244, 249, 247, .42);
    border-color: var(--glass-border-outer);
    border-radius: 14px;
    box-shadow: var(--glass-shadow);
  }

  .card:hover,
  .student-overview__panel:hover,
  .planner-panel:hover,
  .notifications-card:hover {
    border-color: rgba(119, 157, 148, .58);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .86) inset, 0 22px 48px rgba(20, 70, 64, .13);
  }

  .welcome-card {
    position: relative;
    overflow: hidden;
    background:
      radial-gradient(520px 180px at 96% 0%, rgba(255, 218, 132, .24), transparent 68%),
      linear-gradient(135deg, rgba(19, 132, 122, .94), rgba(10, 68, 64, .96));
    border-color: rgba(255, 255, 255, .23);
    border-radius: 16px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .20) inset, 0 22px 50px rgba(12, 76, 69, .20);
  }

  .stat-card__icon,
  .ward-card__metrics div,
  .daily-briefing__metric,
  .today-row,
  .assignment-portion,
  .notif-live__item,
  .plan-card,
  .plan-card__metrics div {
    background-color: rgba(255, 255, 255, .66);
    border-color: rgba(151, 174, 168, .34);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .78) inset;
  }

  .command-palette,
  .feedback-dialog,
  .analytics-dialog,
  .confirm-dialog {
    -webkit-backdrop-filter: blur(30px) saturate(165%);
    backdrop-filter: blur(30px) saturate(165%);
    background:
      linear-gradient(145deg, rgba(255, 255, 255, .88), rgba(244, 249, 247, .68)),
      rgba(255, 255, 255, .62);
    border: 1px solid rgba(255, 255, 255, .78);
    border-radius: 18px;
    box-shadow: 0 1px 0 #fff inset, 0 32px 90px rgba(12, 54, 50, .28);
  }

  .command-palette::backdrop,
  .feedback-dialog::backdrop,
  .analytics-dialog::backdrop,
  .confirm-dialog::backdrop {
    -webkit-backdrop-filter: blur(7px) saturate(125%);
    backdrop-filter: blur(7px) saturate(125%);
    background: rgba(14, 39, 37, .34);
  }

  .form-actions--sticky {
    padding-inline: .75rem;
    border: 1px solid rgba(151, 174, 168, .34);
    border-radius: 14px;
  }

  .mobile-nav__item--active {
    background:
      linear-gradient(145deg, rgba(27, 153, 142, .98), rgba(11, 91, 85, .98));
    border: 1px solid rgba(255, 255, 255, .24);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .24) inset, 0 9px 20px rgba(15, 118, 110, .24);
  }
}

@media (prefers-reduced-transparency: reduce) {
  :root {
    --glass-surface: #fff;
    --glass-surface-strong: #fff;
    --glass-surface-soft: #f8faf9;
  }

  .topbar,
  .mobile-nav,
  .form-actions--sticky,
  .feedback-trigger,
  .analytics-consent,
  .sync-status,
  .card,
  .stat-card,
  .toolbar,
  .planner-panel,
  .planner-note,
  .student-overview__panel,
  .ward-card,
  .assignment-card,
  .certificate-card,
  .notifications-card,
  .notif-live,
  .auth__card,
  .command-palette,
  .feedback-dialog,
  .analytics-dialog,
  .confirm-dialog {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--surface);
  }
}

@media (forced-colors: active) {
  .topbar,
  .mobile-nav,
  .sidebar,
  .card,
  .stat-card,
  .toolbar,
  .planner-panel,
  .student-overview__panel,
  .ward-card,
  .assignment-card,
  .certificate-card,
  .notifications-card,
  .notif-live,
  .auth__card,
  .analytics-consent,
  .analytics-dialog {
    background: Canvas;
    border: 1px solid CanvasText;
    box-shadow: none;
  }
}