:root {
  --navy: #223f6b;
  --navy-dark: #142a49;
  --navy-deep: #0b1c34;
  --orange: #f49f0f;
  --green: #4fbb37;
  --pink: #e51c6f;
  --ink: #152238;
  --muted: #6f7d91;
  --paper: #ffffff;
  --soft: #f4f7fb;
  --line: #e1e7ef;
  --display: "RB", "Segoe UI", Tahoma, "Noto Sans Arabic", sans-serif;
  --body: "RB", "Segoe UI", Tahoma, "Noto Sans Arabic", sans-serif;
  --ease: cubic-bezier(0.2, 0.75, 0.25, 1);
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

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

body {
  margin: 0;
  color: var(--ink);
  background: var(--soft);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  color: inherit;
  font: inherit;
}

button {
  cursor: pointer;
}

svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.admin-shell {
  display: grid;
  /*
   * The panel is 244px wide and the column it sits in is a little wider, which
   * is the gutter between it and the page. It used to be 42px, which on a wide
   * screen read as wasted margin beside tables that wanted the room.
   */
  grid-template-columns: 264px minmax(0, 1fr);
  min-height: 100svh;
  transition: grid-template-columns 0.32s var(--ease);
}

.admin-sidebar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: grid;
  grid-template-rows: auto 1fr auto;
  width: 244px;
  height: 100svh;
  padding: 22px 17px;
  color: var(--paper);
  background:
    radial-gradient(circle at 0 0, rgba(79, 187, 55, 0.16), transparent 26%),
    radial-gradient(circle at 100% 100%, rgba(229, 28, 111, 0.16), transparent 32%),
    var(--navy-deep);
  overflow: hidden;
  transition: width 0.32s var(--ease), padding 0.32s var(--ease), transform 0.32s var(--ease);
}

.sidebar-top {
  display: flex;
  min-height: 62px;
  align-items: flex-start;
  gap: 10px;
  padding: 0 3px 19px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* The buttons that used to hold this edge now live in the foot of the panel. */
.sidebar-top .sidebar-toggle {
  margin-inline-start: auto;
}

.admin-brand {
  display: inline-grid;
  min-width: 0;
  justify-items: start;
  gap: 7px;
}

.admin-brand-mark {
  display: grid;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.09);
  box-shadow: 0 13px 30px rgba(0, 0, 0, 0.18);
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 800;
}

.admin-brand-mark span {
  color: var(--orange);
}

.admin-brand-mark-logo {
  width: auto;
  min-width: 46px;
  padding: 0 11px;
}

.admin-brand-logo {
  width: auto;
  height: 24px;
}

.admin-brand-copy small:only-child {
  margin-top: 0;
}

.admin-brand-copy,
.account-copy {
  display: grid;
  min-width: 0;
}

.admin-brand-copy strong {
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 800;
}

.admin-brand-copy small {
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.48);
  font-size: 0.59rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/*
 * The foot of the panel. It lands in the third row the sidebar grid reserves,
 * so it sits against the bottom however short the navigation above it is, and
 * carries a rule along its top to match the one under the brand.
 */
.sidebar-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 16px 3px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/*
 * Language and logout wear the pills the public site uses in its header: a
 * rounded outline over a translucent ground. The language one is squeezed down
 * to hold just the two-letter code, the way it is there.
 */
.portal-bell,
.portal-language,
.portal-logout {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
  padding: 10px 15px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.08);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

/*
 * The bell, wearing the same pill as the language and logout buttons beside it.
 * Drawn wherever those controls are - the bar on a phone, the foot of the panel
 * on a desktop - and both copies open the one list.
 */
.portal-bell {
  position: relative;
  min-width: 36px;
  min-height: 36px;
  justify-content: center;
  padding: 0 10px;
  color: rgba(255, 255, 255, 0.82);
}

.portal-bell svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.portal-bell:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.34);
}

/*
 * The bell rocking as one arrives. This is the half of the signal that works
 * with the phone on silent, or before the page has been touched and the browser
 * will let it make a sound at all.
 */
.portal-bell.is-ringing svg {
  animation: portal-bell-ring 1.1s ease-in-out;
  transform-origin: 50% 12%;
}

@keyframes portal-bell-ring {
  0%, 100% { transform: rotate(0); }
  8% { transform: rotate(16deg); }
  20% { transform: rotate(-13deg); }
  32% { transform: rotate(10deg); }
  44% { transform: rotate(-7deg); }
  56% { transform: rotate(4deg); }
  68% { transform: rotate(-2deg); }
}

@media (prefers-reduced-motion: reduce) {
  .portal-bell.is-ringing svg {
    animation: none;
  }
}

/* How many are unread, on the bell itself so it is seen without opening it. */
.portal-bell-count {
  position: absolute;
  top: -6px;
  inset-inline-end: -6px;
  /* A flex box, so the number sits in the exact middle of the circle whatever the font's line height. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #C2334D;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* A hidden count stays hidden: the flex display above would otherwise show it. */
.portal-bell-count[hidden] {
  display: none;
}

/*
 * The list itself. Pinned rather than hung off the bell, because the bell moves
 * between the bar and the panel foot and the list should not move with it.
 */
.notif-panel {
  position: fixed;
  /* Physical left, not inset-inline-start: the translate below is physical
   * too, and in Arabic the logical side flips to the right and the -50% then
   * pushes the list off the left edge of the screen. */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 70;
  width: min(380px, calc(100vw - 32px));
  max-height: min(70vh, 560px);
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 24px 64px rgba(11, 28, 52, 0.32);
  overflow: hidden;
}

.notif-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
  border-bottom: 1px solid var(--line);
}

.notif-head strong {
  flex: 1;
  color: var(--navy);
  font-size: 0.92rem;
}

.notif-clear {
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  cursor: pointer;
}

.notif-clear:hover {
  color: var(--navy);
}

.notif-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--navy);
  cursor: pointer;
}

.notif-close svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
}

.notif-list {
  overflow-y: auto;
}

/*
 * A line is a link with a delete beside it: the row is the thing that stripes
 * and highlights, so that pressing the cross never reads as opening the line.
 */
.notif-row {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--line);
}

.notif-row:last-child {
  border-bottom: 0;
}

.notif-row:hover {
  background: var(--soft);
}

.notif-item {
  display: block;
  flex: 1;
  min-width: 0;
  padding: 12px 4px 12px 14px;
  color: inherit;
  text-decoration: none;
}

.notif-delete {
  display: flex;
  align-items: center;
  padding-inline-end: 8px;
}

.notif-delete button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--muted);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease;
}

/* Shown on hover on a desktop; always there on a touch screen, which has none. */
.notif-row:hover .notif-delete button,
.notif-delete button:focus-visible {
  opacity: 1;
}

@media (hover: none) {
  .notif-delete button {
    opacity: 1;
  }
}

.notif-delete button:hover {
  color: #C2334D;
  background: rgba(194, 51, 77, 0.1);
}

.notif-delete svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
}

.notif-clear.is-danger:hover {
  color: #C2334D;
}

.notif-item strong {
  display: block;
  color: var(--navy);
  font-size: 0.83rem;
}

.notif-item span {
  display: block;
  margin-top: 2px;
  color: var(--ink);
  font-size: 0.79rem;
  line-height: 1.5;
}

.notif-item small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
}

/* Not read yet: marked down the leading edge, the way an open warning is. */
.notif-row.is-unread {
  background: rgba(244, 154, 32, 0.07);
  box-shadow: inset 3px 0 0 var(--orange);
}

[dir="rtl"] .notif-row.is-unread {
  box-shadow: inset -3px 0 0 var(--orange);
}

/*
 * The panel a notification led to, marked for a moment on arrival. A phone
 * scrolls a long way to get here and the eye needs telling where it landed.
 */
.notif-landed {
  animation: notif-landed 2.4s ease-out;
}

@keyframes notif-landed {
  0%, 55% {
    box-shadow: 0 0 0 3px var(--orange);
  }
  100% {
    box-shadow: 0 0 0 3px rgba(244, 154, 32, 0);
  }
}

/* Scrolled to by script, so the fixed bar on a phone cannot sit over it. */
[id] {
  scroll-margin-top: 78px;
}

.notif-empty {
  margin: 0;
  padding: 26px 14px;
  color: var(--muted);
  font-size: 0.8rem;
  text-align: center;
}

.portal-language {
  min-width: 36px;
  min-height: 36px;
  justify-content: center;
  padding: 0 11px;
  color: var(--orange);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

/* The long label is kept for the script to write into, but never drawn. */
.portal-language i,
.portal-language [data-language-label] {
  display: none;
}

.portal-language:hover,
.portal-logout:hover {
  color: var(--paper);
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.14);
}

.portal-language:hover {
  color: var(--orange);
}

.portal-logout svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}

/*
 * The phone top bar. Off by default: above the drawer breakpoint the panel is
 * always on show and carries the wordmark at its own head.
 */
.portal-topbar {
  display: none;
}

.sidebar-toggle,
.mobile-panel-toggle {
  display: grid;
  width: 39px;
  height: 39px;
  flex: 0 0 auto;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.07);
  transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.sidebar-toggle:hover {
  color: var(--paper);
  background: rgba(255, 255, 255, 0.13);
}

.sidebar-toggle svg,
.mobile-panel-toggle svg {
  width: 19px;
}

.expand-icon {
  display: none;
}

.admin-nav {
  min-height: 0;
  /* The 3px hover nudge on a nav item needs somewhere to go: without this padding
     the item overflows the right edge, and because overflow-y is auto the x-axis
     computes to auto as well, so a horizontal scrollbar flickers in on hover. */
  padding: 21px 3px 21px 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

.nav-group + .nav-group {
  margin-top: 22px;
}

.nav-group h2 {
  margin: 0 12px 8px;
  color: rgba(255, 255, 255, 0.35);
  font-family: var(--display);
  font-size: 0.59rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.nav-group a {
  position: relative;
  display: flex;
  min-height: 45px;
  align-items: center;
  gap: 13px;
  margin: 3px 0;
  padding: 0 13px;
  border-radius: 13px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.84rem;
  font-weight: 700;
  white-space: nowrap;
  transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.nav-group a:hover {
  color: var(--paper);
  background: rgba(255, 255, 255, 0.07);
  transform: translateX(3px);
}

.nav-group a.is-active {
  color: var(--navy-deep);
  background: var(--orange);
  box-shadow: 0 13px 28px rgba(244, 159, 15, 0.18);
}

.nav-group a svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

.nav-group a i {
  position: absolute;
  right: 12px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--navy);
}

.sidebar-account {
  display: grid;
  grid-template-columns: 39px minmax(0, 1fr) 36px;
  align-items: center;
  gap: 10px;
  padding: 15px 4px 1px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-language {
  display: flex;
  width: 100%;
  min-height: 48px;
  align-items: center;
  gap: 12px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 13px;
  color: rgba(255, 255, 255, 0.66);
  background: rgba(255, 255, 255, 0.055);
  text-align: left;
}

.sidebar-language:hover {
  color: var(--paper);
  background: rgba(255, 255, 255, 0.1);
}

.sidebar-language svg {
  width: 20px;
  flex: 0 0 auto;
}

.sidebar-language > span {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

.sidebar-language strong {
  color: var(--orange);
  font-size: 0.72rem;
}

.sidebar-language small {
  font-size: 0.72rem;
  font-weight: 700;
}

.account-avatar {
  display: grid;
  width: 39px;
  height: 39px;
  place-items: center;
  border-radius: 12px;
  color: var(--paper);
  background: var(--pink);
  font-family: var(--display);
  font-size: 0.82rem;
  font-weight: 800;
}

.account-copy strong {
  overflow: hidden;
  font-size: 0.76rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-copy small {
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.42);
  font-size: 0.64rem;
}

.sidebar-account > a {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 11px;
  color: rgba(255, 255, 255, 0.5);
  transition: color 0.2s ease, background 0.2s ease;
}

.sidebar-account > a:hover {
  color: var(--paper);
  background: rgba(229, 28, 111, 0.18);
}

.sidebar-account svg {
  width: 18px;
}

.admin-stage {
  min-width: 0;
  min-height: 100svh;
}

.admin-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  min-height: 82px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 15px clamp(24px, 4vw, 58px);
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(18px);
}

.admin-header > div,
.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-context {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
}

.mobile-panel-toggle {
  display: none;
  color: var(--navy);
  border-color: var(--line);
  background: var(--paper);
}

.language-switch,
.website-link,
.logout-link {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  font-size: 0.72rem;
  font-weight: 800;
}

.language-switch {
  padding: 0 13px;
}

.language-switch i {
  width: 1px;
  height: 14px;
  background: currentColor;
  opacity: 0.2;
}

.website-link {
  padding: 0 16px;
  color: var(--navy);
}

.website-link svg {
  width: 16px;
}

.logout-link {
  padding: 0 18px;
  color: var(--paper);
  border-color: var(--navy);
  background: var(--navy);
}

.admin-content {
  width: 100%;
  max-width: none;
  /*
   * The side gutters grow with the viewport but stop earlier than they used to:
   * a wide monitor should spend its width on the table, not on margins. A phone
   * keeps the 18px it needs to stay off the edge of the glass.
   */
  padding: 32px clamp(18px, 1.5vw, 28px) 60px;
}

.content-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 32px;
}

.content-kicker,
.panel-heading span,
.quick-panel > span {
  color: var(--orange);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.content-kicker {
  display: inline-block;
  font-size: 0.95rem;
  letter-spacing: 0.11em;
}

.content-heading h1 {
  margin: 8px 0 9px;
  color: var(--navy);
  font-family: var(--display);
  font-size: clamp(2.3rem, 5vw, 4.4rem);
  font-weight: 800;
  letter-spacing: -0.055em;
  line-height: 0.98;
}

.content-heading p {
  max-width: 720px;
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.65;
}

.live-indicator {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  border: 1px solid rgba(79, 187, 55, 0.18);
  border-radius: 999px;
  color: #337c26;
  background: rgba(79, 187, 55, 0.08);
  font-size: 0.7rem;
  font-weight: 800;
}

.live-indicator span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 5px rgba(79, 187, 55, 0.12);
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px;
  margin-bottom: 26px;
}

/* The overview carries two figures, not four: in and not in. */
.metrics-grid-pair {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.metric-card,
.data-panel,
.quick-panel {
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--paper);
  box-shadow: 0 18px 45px rgba(20, 42, 73, 0.06);
}

.metric-card {
  position: relative;
  min-height: 170px;
  padding: 25px;
  overflow: hidden;
}

.metric-card::after {
  position: absolute;
  right: -35px;
  bottom: -45px;
  width: 120px;
  height: 120px;
  border: 22px solid currentColor;
  border-radius: 50%;
  content: "";
  opacity: 0.05;
}

.metric-dot {
  display: block;
  width: 10px;
  height: 10px;
  margin-bottom: 24px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 7px color-mix(in srgb, currentColor 12%, transparent);
}

.metric-card strong {
  display: block;
  color: var(--navy);
  font-family: var(--display);
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: -0.05em;
  line-height: 1;
}

.metric-card p {
  margin: 9px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.metric-orange { color: var(--orange); }
.metric-green { color: var(--green); }
.metric-pink { color: var(--pink); }
.metric-navy { color: var(--navy); }
/* Money still owed reads in the same red a standing warning does. */
.metric-red { color: #C2334D; }

/*
 * The overview queue: one line per thing waiting for a person, each one a link
 * to the screen that settles it. The number leads, because the number is what
 * decides whether the line is worth opening.
 */
.overview-attention {
  margin-bottom: 18px;
}

.attention-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.attention-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 13px;
  margin-bottom: 9px;
  color: var(--navy);
  text-decoration: none;
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.attention-list li:last-child .attention-row {
  margin-bottom: 0;
}

.attention-row:hover,
.attention-row:focus-visible {
  border-color: var(--navy);
  background: var(--soft);
  outline: none;
  transform: translateX(2px);
}

[dir="rtl"] .attention-row:hover,
[dir="rtl"] .attention-row:focus-visible {
  transform: translateX(-2px);
}

.attention-row strong {
  flex: none;
  min-width: 46px;
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  text-align: center;
}

.attention-row span {
  flex: 1;
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.45;
}

.attention-row svg {
  flex: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--muted);
}

[dir="rtl"] .attention-row svg {
  transform: scaleX(-1);
}

/* Red is for what a family is waiting on, or for money. Amber is the office queue. */
.attention-row.is-red strong {
  color: #C2334D;
}

.attention-row.is-red {
  border-color: rgba(194, 51, 77, 0.3);
  background: rgba(194, 51, 77, 0.04);
}

.attention-row.is-amber strong {
  color: var(--orange);
}

@media (max-width: 560px) {
  .attention-row strong {
    min-width: 38px;
    font-size: 1.25rem;
  }
}

.overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(270px, 0.7fr);
  gap: 18px;
}

/* Overview with the side panel removed: the remaining panel spans the row. */
.overview-grid.is-single {
  grid-template-columns: minmax(0, 1fr);
}

.data-panel {
  min-width: 0;
  padding: 24px;
}

.panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 21px;
}

.panel-heading h2,
.quick-panel h2 {
  margin: 5px 0 0;
  color: var(--navy);
  font-family: var(--display);
  font-size: 1.3rem;
  letter-spacing: -0.03em;
}

.panel-heading > a {
  color: var(--navy);
  font-size: 0.74rem;
  font-weight: 800;
}

.quick-panel {
  padding: 28px;
  color: var(--paper);
  background:
    radial-gradient(circle at 100% 0, rgba(244, 159, 15, 0.2), transparent 35%),
    var(--navy);
}

.quick-panel > span {
  color: var(--orange);
}

.quick-panel h2 {
  margin-bottom: 28px;
  color: var(--paper);
  font-size: 1.75rem;
  line-height: 1.15;
}

.quick-panel > a {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.quick-panel > a svg {
  width: 22px;
  flex: 0 0 auto;
  color: var(--orange);
}

.quick-panel > a span {
  display: grid;
  gap: 3px;
}

.quick-panel > a strong {
  font-size: 0.82rem;
}

.quick-panel > a small {
  color: rgba(255, 255, 255, 0.48);
  font-size: 0.67rem;
}

.table-panel-heading {
  align-items: end;
}

.table-heading-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 9px;
}

.add-record-button,
.primary-action,
.secondary-action,
.bulk-delete-button,
.inline-delete-button {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 15px;
  border: 0;
  border-radius: 12px;
  font-size: 0.72rem;
  font-weight: 800;
}

.add-record-button,
.primary-action {
  color: var(--navy-deep);
  background: var(--orange);
  box-shadow: 0 10px 24px rgba(244, 159, 15, 0.18);
}

.add-record-button:hover,
.primary-action:hover {
  transform: translateY(-2px);
}

.add-record-button svg {
  width: 17px;
}

.secondary-action {
  color: var(--navy);
  border: 1px solid var(--line);
  background: var(--paper);
}

.bulk-delete-button,
.inline-delete-button {
  color: #a30e4e;
  border: 1px solid rgba(229, 28, 111, 0.22);
  background: rgba(229, 28, 111, 0.07);
}

.bulk-delete-button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.inline-delete-button {
  min-height: 34px;
  padding: 0 11px;
  border-radius: 9px;
  font-size: 0.66rem;
}

.bulk-delete-button:not(:disabled):hover,
.inline-delete-button:hover {
  color: #7e0b3c;
  background: rgba(229, 28, 111, 0.13);
}

.table-search {
  position: relative;
  display: flex;
  width: min(340px, 100%);
  align-items: center;
}

.table-search svg {
  position: absolute;
  left: 15px;
  width: 18px;
  color: #8490a1;
}

.table-search input {
  width: 100%;
  height: 44px;
  padding: 0 15px 0 43px;
  border: 1px solid var(--line);
  border-radius: 13px;
  outline: none;
  background: var(--soft);
}

.table-search input:focus {
  border-color: rgba(34, 63, 107, 0.42);
  background: var(--paper);
  box-shadow: 0 0 0 4px rgba(34, 63, 107, 0.06);
}

.record-count {
  flex: 0 0 auto;
  padding: 9px 12px;
  border-radius: 10px;
  color: var(--muted);
  background: var(--soft);
  font-size: 0.7rem;
}

.table-scroll {
  width: 100%;
  overflow-x: auto;
}

/* Only a table that actually overruns its panel invites being dragged. */
.table-scroll.is-pannable {
  cursor: grab;
}

.table-scroll.is-panning {
  cursor: grabbing;
  user-select: none;
}

/* Controls inside the table keep their own pointer. */
.table-scroll.is-pannable a,
.table-scroll.is-pannable button,
.table-scroll.is-pannable input,
.table-scroll.is-pannable select,
.table-scroll.is-pannable label {
  cursor: pointer;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
}

th,
td {
  padding: 15px 14px;
  border-bottom: 1px solid var(--line);
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}

th {
  color: #8792a3;
  background: #fafbfd;
  font-size: 0.63rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sort-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

.sort-button span {
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  opacity: 0.35;
  transform: rotate(45deg) translateY(-2px);
}

th[aria-sort="ascending"] .sort-button,
th[aria-sort="descending"] .sort-button {
  color: var(--navy);
}

th[aria-sort="ascending"] .sort-button span {
  opacity: 1;
  transform: rotate(225deg) translate(-1px, -1px);
}

th[aria-sort="descending"] .sort-button span {
  opacity: 1;
}

.selection-column,
.actions-column {
  width: 1%;
  text-align: center;
}

.selection-column input {
  width: 16px;
  height: 16px;
  accent-color: var(--navy);
}

th:first-child {
  border-radius: 12px 0 0 12px;
}

th:last-child {
  border-radius: 0 12px 12px 0;
}

td {
  color: #536176;
}

td strong {
  color: var(--ink);
}

tbody tr {
  transition: background 0.2s ease;
}

tbody tr:hover {
  background: rgba(34, 63, 107, 0.025);
}

tbody tr.scan-match {
  background: rgba(79, 187, 55, 0.14);
  box-shadow: inset 0 0 0 1px rgba(79, 187, 55, 0.36);
}

tbody tr.is-openable {
  cursor: pointer;
}

tbody tr.is-openable:hover {
  background: rgba(244, 159, 15, 0.07);
}

tbody tr:has([data-record-select]:checked) {
  background: rgba(34, 63, 107, 0.07);
}

.status-pill {
  display: inline-flex;
  padding: 6px 9px;
  border-radius: 999px;
  color: var(--navy);
  background: rgba(34, 63, 107, 0.08);
  font-size: 0.64rem;
  font-weight: 800;
}

.status-active,
.status-present,
.status-attended,
.status-paid,
.status-approved,
.status-admin {
  color: #2f7d22;
  background: rgba(79, 187, 55, 0.11);
}

.status-absent,
.status-missed,
.status-not-paid,
.status-inactive,
.status-rejected,
.status-written {
  color: #a30e4e;
  background: rgba(229, 28, 111, 0.09);
}

.status-late,
.status-left-early,
.status-half-paid,
.status-partial-paid,
.status-paused,
.status-pending,
.status-oral {
  color: #925b00;
  background: rgba(244, 159, 15, 0.12);
}

.empty-value {
  color: #b2bac5;
}

.empty-row,
.search-empty td {
  padding: 60px 20px;
  color: var(--muted);
  text-align: center;
  font-weight: 700;
}

.database-alert {
  padding: 18px 20px;
  border: 1px solid rgba(229, 28, 111, 0.18);
  border-radius: 16px;
  color: #a30e4e;
  background: rgba(229, 28, 111, 0.08);
  font-weight: 700;
}

.form-notice {
  margin-bottom: 18px;
  padding: 15px 18px;
  border-radius: 14px;
  font-size: 0.78rem;
  font-weight: 800;
}

/* A plain explanation above a record, such as where a number comes from. */
.record-hint {
  margin: 0 0 18px;
  padding: 14px 18px;
  border: 1px solid rgba(34, 63, 107, 0.14);
  border-radius: 14px;
  color: #223f6b;
  background: rgba(34, 63, 107, 0.05);
  font-size: 0.86rem;
  line-height: 1.5;
}

.record-hint strong {
  font-weight: 800;
}

/* Transient status messages, floated above the page and self-dismissing. */
.toast-stack {
  position: fixed;
  z-index: 90;
  right: 24px;
  bottom: 24px;
  display: grid;
  gap: 10px;
  width: min(380px, calc(100vw - 32px));
  pointer-events: none;
}

html[dir="rtl"] .toast-stack {
  right: auto;
  left: 24px;
}

.toast {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 24px;
  align-items: start;
  gap: 12px;
  padding: 15px 16px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--paper);
  box-shadow: 0 18px 44px rgba(20, 42, 73, 0.18);
  pointer-events: auto;
  animation: toastIn 0.32s var(--ease) both;
}

.toast.is-leaving {
  animation: toastOut 0.28s var(--ease) both;
}

.toast p {
  margin: 0;
  font-size: 0.79rem;
  font-weight: 700;
  line-height: 1.5;
}

.toast-icon svg {
  width: 21px;
  height: 21px;
}

.toast-success {
  border-color: rgba(79, 187, 55, 0.32);
}

.toast-success .toast-icon {
  color: #2f7d22;
}

.toast-error {
  border-color: rgba(229, 28, 111, 0.32);
}

.toast-error .toast-icon {
  color: #a30e4e;
}

.toast-close {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  color: var(--muted);
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
}

.toast-close:hover {
  color: var(--navy);
  background: rgba(20, 42, 73, 0.07);
}

.toast-close svg {
  width: 14px;
  height: 14px;
}

@keyframes toastIn {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes toastOut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(10px); }
}

@media (prefers-reduced-motion: reduce) {
  .toast,
  .toast.is-leaving {
    animation-duration: 0.01s;
  }
}

@media (max-width: 700px) {
  .toast-stack {
    right: 16px;
    bottom: 16px;
  }

  html[dir="rtl"] .toast-stack {
    left: 16px;
  }
}

.success-notice {
  color: #2f7d22;
  border: 1px solid rgba(79, 187, 55, 0.2);
  background: rgba(79, 187, 55, 0.09);
}

.error-notice {
  color: #a30e4e;
  border: 1px solid rgba(229, 28, 111, 0.2);
  background: rgba(229, 28, 111, 0.08);
}

.record-editor {
  margin-bottom: 18px;
}

.record-form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.admin-field {
  display: grid;
  /* A taller neighbour in the same row (the payment amount with its buttons)
     must not stretch this field's box. */
  align-content: start;
  min-width: 0;
  gap: 7px;
}

.admin-field > span {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.admin-field input,
.admin-field select,
.admin-field textarea {
  width: 100%;
  min-height: 45px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  outline: none;
  background: var(--soft);
}

.admin-field textarea {
  min-height: 105px;
  resize: vertical;
}

.admin-field input:focus,
.admin-field select:focus,
.admin-field textarea:focus {
  border-color: rgba(34, 63, 107, 0.45);
  background: var(--paper);
  box-shadow: 0 0 0 4px rgba(34, 63, 107, 0.06);
}

.admin-field input:disabled {
  color: #7f8998;
  background: #edf1f6;
}

.admin-field select:disabled,
.admin-field textarea:disabled {
  color: #7f8998;
  background: #edf1f6;
}

.admin-field-ar input,
.admin-field-ar textarea {
  text-align: right;
  font-family: var(--body);
  line-height: 1.65;
}

.admin-field-en input,
.admin-field-en textarea {
  direction: ltr;
  text-align: left;
}

.admin-image-preview {
  display: grid;
  min-height: 120px;
  place-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
}

.admin-image-preview img {
  display: block;
  width: 100%;
  max-height: 210px;
  object-fit: contain;
  border-radius: 8px;
}

.admin-file-input {
  padding: 6px !important;
  font-size: 0.76rem !important;
  background: var(--paper) !important;
}

.admin-file-input::file-selector-button {
  /* Logical margin so the gap sits correctly in Arabic too. */
  margin-inline-end: 9px;
  padding: 5px 10px;
  border: 0;
  border-radius: 7px;
  color: var(--paper);
  background: var(--navy);
  font-size: 0.7rem;
  font-weight: 700;
  cursor: pointer;
}

.admin-file-input::file-selector-button:hover {
  background: var(--navy-dark);
}

/* Locked with the rest of the record until Edit is pressed, so it has to look
   locked too - the custom button styling above otherwise reads as clickable. */
.admin-file-input:disabled {
  background: #edf1f6 !important;
}

.admin-file-input:disabled::file-selector-button,
.admin-file-input:disabled::file-selector-button:hover {
  color: #eef2f7;
  background: #aab4c2;
  cursor: not-allowed;
}

.admin-field-help {
  color: var(--muted);
  font-size: 0.63rem;
  line-height: 1.4;
}

.record-fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.read-only-status {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  padding: 0 11px;
  border-radius: 999px;
  color: var(--muted);
  background: var(--soft);
  font-size: 0.66rem;
  font-weight: 800;
}

.read-only-status.is-editing {
  color: #925b00;
  background: rgba(244, 159, 15, 0.12);
}

.edit-record-button {
  color: var(--paper);
  border-color: var(--navy);
  background: var(--navy);
}

.record-form-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
}

/* Kept at the far end, away from Edit and Save, so it is not hit by mistake. */
.record-form-actions .linked-delete-button {
  margin-inline-start: auto;
}

.student-qr-panel {
  display: grid;
  gap: 12px;
  margin-top: 20px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--soft);
}

.student-qr-head {
  display: grid;
  gap: 3px;
}

.student-qr-head strong {
  color: var(--navy);
  font-family: var(--display);
  font-size: 0.94rem;
}

.student-qr-head span {
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.5;
}

.student-qr-box {
  display: grid;
  width: min(176px, 100%);
  min-height: 176px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
}

.student-qr-box canvas {
  width: 100%;
  max-width: 170px;
  height: auto;
}

.student-qr-box img {
  width: 100%;
  max-width: 170px;
  height: auto;
}

.qr-download-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.qr-scan-button svg {
  width: 16px;
  height: 16px;
}

.qr-scan-modal {
  position: fixed;
  inset: 0;
  z-index: 130;
  /* Centred on every screen, phone to desktop. */
  display: grid;
  place-items: center;
  padding: 16px;
}

.qr-scan-modal[hidden] {
  display: none;
}

.qr-scan-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 28, 52, 0.62);
  backdrop-filter: blur(3px);
}

.qr-scan-dialog {
  position: relative;
  z-index: 1;
  width: min(560px, 100%);
  max-height: calc(100dvh - 32px);
  margin: 0;
  overflow-y: auto;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--paper);
  box-shadow: 0 22px 55px rgba(20, 42, 73, 0.22);
}

.qr-scan-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.qr-scan-head strong {
  color: var(--navy);
  font-family: var(--display);
  font-size: 1rem;
}

.qr-scan-head p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 0.76rem;
}

.qr-scan-reader {
  overflow: hidden;
  /* Short enough that the result line and the image button stay on screen;
     with no camera the empty box used to fill the whole window. */
  max-height: 46vh;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #0b1c34;
}

.qr-scan-reader video {
  width: 100% !important;
  max-height: 46vh;
  object-fit: cover;
}

.qr-scan-reader > div {
  border: 0 !important;
}

.qr-scan-upload {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

.qr-scan-upload .secondary-action {
  min-height: 34px;
  padding: 0 12px;
  font-size: 0.72rem;
}

.qr-scan-result {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(34, 63, 107, 0.16);
  border-radius: 11px;
  color: var(--navy);
  background: rgba(34, 63, 107, 0.06);
  font-size: 0.76rem;
  font-weight: 700;
}

.qr-scan-result.is-error {
  border-color: rgba(229, 28, 111, 0.2);
  color: #a30e4e;
  background: rgba(229, 28, 111, 0.08);
}

.qr-scan-actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.qr-scan-toast {
  position: absolute;
  right: 18px;
  bottom: 18px;
  max-width: min(420px, calc(100% - 36px));
  padding: 11px 13px;
  border: 1px solid rgba(79, 187, 55, 0.36);
  border-radius: 12px;
  color: #155826;
  background: rgba(79, 187, 55, 0.16);
  box-shadow: 0 10px 30px rgba(11, 28, 52, 0.2);
  font-size: 0.73rem;
  font-weight: 700;
  line-height: 1.45;
  z-index: 2;
}

.qr-scan-toast.is-error {
  border-color: rgba(229, 28, 111, 0.28);
  color: #8f1244;
  background: rgba(229, 28, 111, 0.14);
}

.profile-heading {
  align-items: center;
}

/* Reads as a button rather than a caption: it is the way back to the table. */
.back-to-table {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
  padding: 7px 13px 7px 10px;
  border: 1px solid var(--navy);
  border-radius: 999px;
  background: var(--navy);
  color: var(--paper);
  font-size: 0.72rem;
  font-weight: 800;
  box-shadow: 0 8px 20px rgba(34, 63, 107, 0.22);
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
}

.back-to-table svg {
  width: 14px;
  height: 14px;
}

.back-to-table:hover {
  border-color: var(--navy-deep);
  background: var(--navy-deep);
  transform: translateX(-2px);
}

/* QR export buttons sit next to the ID badge in the profile header. */
.profile-heading-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.profile-qr {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* The QR itself is not shown here, only exported, so clip it out of view while
   keeping it rendered. */
.profile-qr-canvas {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  pointer-events: none;
}

.profile-qr .secondary-action {
  min-height: 38px;
  gap: 7px;
  padding: 0 13px;
  font-size: 0.72rem;
}

.profile-qr .secondary-action svg {
  width: 15px;
  height: 15px;
}

.profile-id {
  padding: 10px 13px;
  border-radius: 11px;
  color: var(--navy);
  background: var(--paper);
  box-shadow: 0 8px 28px rgba(20, 42, 73, 0.08);
  font-size: 0.72rem;
  font-weight: 800;
}

.profile-main-card {
  margin-bottom: 25px;
}

.record-panel-heading {
  margin-bottom: 24px;
}

/* The parent behind a parent link: their account, then each child. */
.parent-account-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin: 0;
}

.parent-account-facts > div {
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--soft);
}

.parent-account-facts .parent-account-email,
.parent-account-facts .parent-account-wide {
  grid-column: 1 / -1;
}

.parent-account-facts dt {
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.parent-account-facts dd {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-weight: 700;
}

.parent-account-email dd {
  font-size: 1.05rem;
}

.parent-account-facts a,
.parent-child-phones a {
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.parent-children-title {
  margin: 24px 0 10px;
  color: var(--ink);
  font-size: 0.95rem;
}

.parent-children {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.parent-children li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
}

/* The child this particular link row belongs to. */
.parent-children li.is-current {
  border-color: var(--orange);
}

.parent-children li > a {
  display: grid;
  gap: 3px;
  color: var(--ink);
}

.parent-children li > a:hover strong {
  color: var(--navy);
  text-decoration: underline;
}

.parent-children small {
  color: var(--muted);
  font-weight: 700;
}

.parent-child-phones {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 700;
}

.record-header-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
}

.record-header-tools .primary-action,
.record-header-tools .secondary-action {
  min-height: 38px;
  padding: 0 15px;
}

.website-content-record {
  padding: 0;
  overflow: hidden;
}

.website-content-record .record-panel-heading {
  margin: 0;
  padding: 25px 28px;
  border-bottom: 1px solid var(--line);
}

.website-content-editor {
  display: grid;
  gap: 18px;
  padding: 24px 28px 28px;
  background: #f8fafd;
}

.content-editor-section {
  min-width: 0;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: var(--paper);
  box-shadow: 0 10px 28px rgba(20, 42, 73, 0.035);
}

.content-section-heading,
.language-card-heading {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  margin-bottom: 20px;
}

.content-section-heading h3,
.language-card-heading h3 {
  margin: 0;
  color: var(--navy);
  font-family: var(--display);
  font-size: 0.98rem;
}

.content-section-heading p,
.language-card-heading p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.5;
}

.content-section-number,
.language-card-heading > span {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 10px;
  color: var(--navy);
  background: rgba(34, 63, 107, 0.08);
  font-size: 0.67rem;
  font-weight: 900;
}

.website-settings-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) minmax(170px, 1fr) minmax(110px, 0.55fr) minmax(140px, 0.7fr);
  gap: 14px;
}

.content-language-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.language-content-card {
  position: relative;
  overflow: hidden;
}

.language-content-card::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--navy);
  content: "";
}

.language-content-ar::before {
  right: 0;
  left: auto;
  background: var(--orange);
}

.language-content-en .language-card-heading > span {
  color: var(--paper);
  background: var(--navy);
}

.language-content-ar .language-card-heading > span {
  color: var(--navy-deep);
  background: var(--orange);
  font-family: var(--body);
  font-size: 0.9rem;
}

.language-fields {
  display: grid;
  gap: 14px;
}

.website-content-editor .admin-field > span {
  color: #536176;
  font-size: 0.68rem;
}

.website-content-editor .admin-field input,
.website-content-editor .admin-field select,
.website-content-editor .admin-field textarea {
  border-color: #d8e0ea;
  background: #f7f9fc;
}

.website-content-editor .admin-field input:disabled,
.website-content-editor .admin-field select:disabled,
.website-content-editor .admin-field textarea:disabled {
  color: #536176;
  border-color: #e0e6ee;
  background: #f0f4f8;
  opacity: 1;
}

.website-content-editor .website-field-description textarea {
  min-height: 132px;
  line-height: 1.65;
}

.program-points-grid {
  display: grid;
  gap: 11px;
}

.program-point-row {
  display: grid;
  grid-template-columns: 38px repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: 13px;
  padding: 14px;
  border: 1px solid #e7ebf1;
  border-radius: 14px;
  background: #fafbfd;
}

.program-point-number {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  margin-bottom: 6px;
  border-radius: 50%;
  color: var(--paper);
  background: var(--navy);
  font-size: 0.68rem;
  font-weight: 900;
}

.record-information-section {
  background: transparent;
  box-shadow: none;
}

.record-information-grid {
  display: grid;
  grid-template-columns: 0.55fr 1fr 1fr;
  gap: 14px;
}

.linked-records-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin: 0 2px 15px;
}

.linked-records-heading span {
  color: var(--pink);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.linked-records-heading h2 {
  margin: 5px 0 0;
  color: var(--navy);
  font-family: var(--display);
}

.linked-records-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
}

.linked-records {
  display: grid;
  gap: 10px;
}

/* Profile workspace: a strip of section tabs joined to the pane beneath it. The
   selected tab carries the pane's own background and reaches its top edge, so the
   two form one surface instead of a chip sitting above a separate card. */
.profile-workspace {
  border: 1px solid var(--line);
  border-radius: 19px;
  background: var(--paper);
  box-shadow: 0 13px 35px rgba(20, 42, 73, 0.045);
  overflow: hidden;
}

.profile-tabs {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: 4px;
  /* Zero bottom padding: a tab has to touch the pane to look joined to it. */
  padding: 11px 12px 0;
  background: rgba(34, 63, 107, 0.03);
  overflow-x: auto;
  /* Never let the strip grow a vertical scrollbar of its own. */
  overflow-y: hidden;
  /* A visible scrollbar would sit between the tabs and the pane and break the join,
     so it is hidden; the strip is moved with the wheel, arrow keys, or by selecting
     a tab, which scrolls it into view. */
  scrollbar-width: none;
}

.profile-tabs::-webkit-scrollbar {
  display: none;
}

.profile-panels {
  min-width: 0;
}

/* Panels sit inside the workspace, so they drop their own card chrome. */
.profile-panels > [data-profile-panel],
.profile-panels > .data-panel {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.profile-tab {
  display: flex;
  flex: 0 0 auto;
  min-height: 40px;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  color: var(--navy);
  border: 0;
  /* Curved on top only, so the bottom edge can run into the pane. */
  border-radius: 11px 11px 0 0;
  background: transparent;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease;
}

.workspace-tabs .profile-tab svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}

/* A strip with no single pane beneath it closes itself off on all four sides
   instead of running into the card below. */
.workspace-tabs-standalone {
  align-items: center;
  margin-bottom: 18px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 19px;
  background: var(--paper);
  box-shadow: 0 13px 35px rgba(20, 42, 73, 0.045);
}

.workspace-tabs-standalone .profile-tab {
  border-radius: 11px;
}

.workspace-tabs-standalone .profile-tab.is-active {
  background: rgba(34, 63, 107, 0.09);
}

/* A tab that navigates is a link, so it drops the underline a link would carry. */
a.profile-tab {
  text-decoration: none;
}

.profile-tab:hover {
  background: rgba(34, 63, 107, 0.06);
}

.profile-tab.is-active {
  color: var(--navy-deep);
  background: var(--paper);
  font-weight: 800;
}

/* Icon-only variant: thirteen labels will not fit on one line, so each tab shows
   its icon and reveals the name on hover, on keyboard focus, and while selected. */
.profile-tabs-icons .profile-tab {
  gap: 0;
  /* Tight enough that all thirteen fit a laptop screen without scrolling. */
  padding: 0 8px;
}

.profile-tabs-icons .profile-tab svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.profile-tabs-icons .profile-tab > span {
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  white-space: nowrap;
  transition: max-width 0.25s var(--ease), opacity 0.2s ease, margin 0.25s var(--ease);
}

/* The count is always readable next to the icon, so it stays compact. */
.profile-tabs-icons .profile-tab > i {
  min-width: 18px;
  height: 18px;
  margin-inline-start: 7px;
  padding: 0 4px;
  font-size: 0.6rem;
}

.profile-tabs-icons .profile-tab:hover > span,
.profile-tabs-icons .profile-tab:focus-visible > span,
.profile-tabs-icons .profile-tab.is-active > span {
  max-width: 140px;
  margin-inline-start: 8px;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .profile-tabs-icons .profile-tab > span,
  .profile-tabs-icons .profile-tab > i {
    transition: none;
  }
}

.profile-tab i {
  display: grid;
  /* min-width alone pinned the box, so 720 and 10480 were cut off inside it:
     max-content lets the pill grow with the number and keeps 22px as the floor. */
  width: max-content;
  min-width: 22px;
  height: 20px;
  flex: 0 0 auto;
  place-items: center;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(34, 63, 107, 0.09);
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 800;
}

.profile-tab.is-active i {
  color: var(--paper);
  background: rgba(11, 28, 52, 0.35);
}

.profile-tab:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}

/* A linked section is now a panel, so it carries the usual data-panel padding. */
.linked-section {
  border: 1px solid var(--line);
  border-radius: 17px;
  background: var(--paper);
  box-shadow: 0 13px 35px rgba(20, 42, 73, 0.045);
  overflow: hidden;
}

.linked-section[data-profile-panel] {
  padding: 22px 24px 24px;
}

.linked-section[data-profile-panel] .linked-section-body {
  padding: 0;
}

.linked-section > summary,
.linked-row > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  cursor: pointer;
  list-style: none;
}

.linked-section > summary {
  min-height: 72px;
  padding: 15px 20px;
}

.linked-section > summary::-webkit-details-marker,
.linked-row > summary::-webkit-details-marker {
  display: none;
}

.linked-section > summary > span {
  display: grid;
  gap: 4px;
}

.linked-section > summary strong {
  color: var(--navy);
  font-size: 0.86rem;
}

.linked-section > summary small {
  color: var(--muted);
  font-size: 0.64rem;
}

.linked-section > summary i {
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  border-radius: 9px;
  color: var(--navy);
  background: var(--soft);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 800;
}

.linked-section[open] > summary {
  border-bottom: 1px solid var(--line);
}

.linked-section-body {
  padding: 18px 20px 21px;
}

.linked-section-actions {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 14px;
}

.linked-record-form {
  padding: 19px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fbfcfe;
}

.linked-record-form.is-new {
  margin-bottom: 14px;
  border-color: rgba(244, 159, 15, 0.35);
  background: rgba(244, 159, 15, 0.035);
}

.linked-row + .linked-row {
  margin-top: 8px;
}

.linked-row {
  border: 1px solid var(--line);
  border-radius: 13px;
  overflow: hidden;
}

.linked-row > summary {
  min-height: 50px;
  padding: 10px 14px;
  color: var(--navy);
  background: var(--soft);
  font-size: 0.74rem;
  font-weight: 800;
}

.linked-row > summary span {
  color: var(--muted);
  font-size: 0.63rem;
}

.linked-row .linked-record-form {
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
}

/* A teacher's enrollments: one line per student, opening to their subjects. */
.linked-group + .linked-group {
  margin-top: 8px;
}

.linked-group {
  border: 1px solid var(--line);
  border-radius: 13px;
  overflow: hidden;
}

.linked-group > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 54px;
  padding: 10px 14px;
  color: var(--navy);
  background: var(--paper);
  font-size: 0.8rem;
  font-weight: 800;
  cursor: pointer;
}

.linked-group > summary span {
  color: var(--muted);
  font-size: 0.68rem;
  text-align: end;
}

.linked-group-rows {
  padding: 10px;
  border-top: 1px solid var(--line);
  background: var(--soft);
}

.linked-empty {
  margin: 0;
  padding: 28px;
  color: var(--muted);
  text-align: center;
  font-size: 0.75rem;
  font-weight: 700;
}

.sidebar-scrim {
  display: none;
}

.admin-shell.is-sidebar-collapsed {
  grid-template-columns: 86px minmax(0, 1fr);
}

.admin-shell.is-sidebar-collapsed .admin-sidebar {
  width: 86px;
  padding-right: 12px;
  padding-left: 12px;
}

.admin-shell.is-sidebar-collapsed .admin-brand,
.admin-shell.is-sidebar-collapsed .sidebar-footer,
.admin-shell.is-sidebar-collapsed .admin-brand-copy,
.admin-shell.is-sidebar-collapsed .nav-group h2,
.admin-shell.is-sidebar-collapsed .nav-group a span,
.admin-shell.is-sidebar-collapsed .nav-group a i,
.admin-shell.is-sidebar-collapsed .account-copy,
.admin-shell.is-sidebar-collapsed .sidebar-account > a,
.admin-shell.is-sidebar-collapsed .sidebar-language span,
.admin-shell.is-sidebar-collapsed .collapse-icon {
  display: none;
}

.admin-shell.is-sidebar-collapsed .expand-icon {
  display: block;
}

.admin-shell.is-sidebar-collapsed .sidebar-top {
  display: grid;
  justify-items: center;
}

.admin-shell.is-sidebar-collapsed .sidebar-toggle {
  width: 46px;
}

.admin-shell.is-sidebar-collapsed .nav-group a {
  justify-content: center;
  padding: 0;
}

.admin-shell.is-sidebar-collapsed .sidebar-account {
  grid-template-columns: 1fr;
  justify-items: center;
}

.admin-shell.is-sidebar-collapsed .sidebar-language {
  justify-content: center;
  padding: 0;
}

.admin-shell.is-sidebar-collapsed .nav-group a:hover {
  transform: translateY(-2px);
}

.language-switch:hover,
.website-link:hover {
  border-color: rgba(34, 63, 107, 0.25);
  transform: translateY(-2px);
}

html[dir="rtl"] body {
  font-family: var(--body);
  text-align: right;
}

html[dir="rtl"] .content-heading h1,
html[dir="rtl"] .panel-heading h2,
html[dir="rtl"] .quick-panel h2,
html[dir="rtl"] .admin-brand-copy strong,
html[dir="rtl"] .metric-card strong {
  font-family: var(--display);
}

html[dir="rtl"] .admin-brand-copy small,
html[dir="rtl"] .nav-group h2,
html[dir="rtl"] .content-kicker,
html[dir="rtl"] .panel-heading span,
html[dir="rtl"] th {
  letter-spacing: 0;
}

html[dir="rtl"] .nav-group a:hover {
  transform: translateX(-3px);
}

html[dir="rtl"] .nav-group a i {
  right: auto;
  left: 12px;
}

html[dir="rtl"] .website-link svg,
html[dir="rtl"] .sidebar-toggle svg,
html[dir="rtl"] .sidebar-account > a svg {
  transform: scaleX(-1);
}

html[dir="rtl"] .table-search svg {
  right: 15px;
  left: auto;
}

html[dir="rtl"] .table-search input {
  padding-right: 43px;
  padding-left: 15px;
}

html[dir="rtl"] th,
html[dir="rtl"] td {
  text-align: center;
}

html[dir="rtl"] th:first-child {
  border-radius: 0 12px 12px 0;
}

html[dir="rtl"] th:last-child {
  border-radius: 12px 0 0 12px;
}

.website-studio {
  display: grid;
  gap: 22px;
  padding-bottom: 30px;
}

.website-studio-hero {
  position: relative;
  display: flex;
  align-items: end;
  justify-content: space-between;
  min-height: 230px;
  padding: 38px;
  overflow: hidden;
  border-radius: 26px;
  color: var(--paper);
  background:
    radial-gradient(circle at 82% 18%, rgba(244, 159, 15, 0.34), transparent 25%),
    radial-gradient(circle at 15% 100%, rgba(79, 187, 55, 0.2), transparent 32%),
    linear-gradient(135deg, var(--navy-deep), var(--navy));
  box-shadow: 0 24px 60px rgba(11, 28, 52, 0.18);
}

.website-studio-hero::after {
  position: absolute;
  top: -80px;
  right: 18%;
  width: 210px;
  height: 210px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 50%;
  box-shadow: 0 0 0 38px rgba(255, 255, 255, 0.035), 0 0 0 76px rgba(255, 255, 255, 0.025);
  content: "";
}

.website-studio-hero > div {
  position: relative;
  z-index: 1;
}

.website-studio-hero > div:first-child {
  max-width: 670px;
}

.website-studio-hero span,
.website-collection-heading small {
  font-size: 0.67rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.website-studio-hero h2 {
  max-width: 610px;
  margin: 12px 0 10px;
  font-family: var(--display);
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1.02;
  letter-spacing: -0.05em;
}

.website-studio-hero p {
  max-width: 610px;
  margin: 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.86rem;
  line-height: 1.7;
}

.website-studio-total {
  display: grid;
  min-width: 130px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 19px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
}

.website-studio-total strong {
  font-family: var(--display);
  font-size: 2.4rem;
}

.website-studio-total span {
  color: rgba(255, 255, 255, 0.62);
  letter-spacing: 0;
  text-transform: none;
}

.studio-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.studio-switch-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--paper);
  box-shadow: 0 10px 30px rgba(20, 42, 73, 0.04);
}

.studio-switch-copy {
  flex: 1 1 220px;
  min-width: 0;
}

.studio-switch-copy small {
  color: var(--orange);
  font-size: 0.63rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.studio-switch-copy h3 {
  margin: 6px 0 4px;
  font-family: var(--display);
  font-size: 1.02rem;
}

.studio-switch-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.6;
}

.switch-control {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.switch-control input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.switch-track {
  display: inline-block;
  position: relative;
  width: 50px;
  height: 28px;
  border-radius: 999px;
  background: rgba(20, 42, 73, 0.18);
  transition: background 0.25s var(--ease);
}

.switch-track i {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 3px 8px rgba(20, 42, 73, 0.25);
  transition: transform 0.25s var(--ease);
}

.switch-control input:checked + .switch-track {
  background: var(--green);
}

.switch-control input:checked + .switch-track i {
  transform: translateX(22px);
}

.switch-control input:focus-visible + .switch-track {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

.switch-label {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.studio-date-field {
  display: grid;
  gap: 5px;
}

.studio-date-field span {
  color: var(--muted);
  font-size: 0.63rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.studio-date-field input {
  padding: 10px 12px;
  color: var(--navy);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
}

.studio-date-field input:focus {
  border-color: var(--orange);
  outline: none;
}

.stat-auto-badge {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 9px;
  color: #1f7a12;
  border-radius: 999px;
  background: rgba(79, 187, 55, 0.12);
  font-size: 0.6rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.studio-review-card {
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease);
}

.studio-review-card:hover {
  border-color: var(--orange);
  transform: translateY(-2px);
}

.studio-review-action {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.inline-approve-button,
.inline-reject-button {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  padding: 0 11px;
  border-radius: 9px;
  font-size: 0.66rem;
  font-weight: 800;
}

.inline-approve-button {
  color: #1f7a12;
  border: 1px solid rgba(79, 187, 55, 0.28);
  background: rgba(79, 187, 55, 0.1);
}

.inline-approve-button:hover {
  background: rgba(79, 187, 55, 0.18);
}

.inline-reject-button {
  color: var(--navy);
  border: 1px solid var(--line);
  background: var(--paper);
}

.inline-reject-button:hover {
  background: rgba(20, 42, 73, 0.05);
}

.website-studio-nav {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.website-studio-nav a {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
  box-shadow: 0 10px 30px rgba(20, 42, 73, 0.04);
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease);
}

.website-studio-nav a:hover {
  border-color: color-mix(in srgb, var(--studio-color) 45%, var(--line));
  transform: translateY(-3px);
}

.website-studio-nav a > span {
  width: max-content;
  padding: 5px 7px;
  border-radius: 7px;
  color: var(--studio-color);
  background: color-mix(in srgb, var(--studio-color) 11%, white);
  font-size: 0.62rem;
  font-weight: 900;
}

.website-studio-nav strong {
  overflow: hidden;
  color: var(--navy);
  font-family: var(--display);
  font-size: 0.79rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.website-studio-nav small {
  color: var(--muted);
  font-size: 0.65rem;
}

.studio-nav-navy { --studio-color: var(--navy); }
.studio-nav-orange { --studio-color: var(--orange); }
.studio-nav-green { --studio-color: var(--green); }
.studio-nav-pink { --studio-color: var(--pink); }
.studio-nav-violet { --studio-color: #7557c5; }

.website-collection {
  --collection-color: var(--navy);
  scroll-margin-top: 24px;
  padding: 26px;
  border: 1px solid var(--line);
  border-top: 4px solid var(--collection-color);
  border-radius: 22px;
  background: var(--paper);
  box-shadow: 0 14px 40px rgba(20, 42, 73, 0.055);
}

.collection-orange { --collection-color: var(--orange); }
.collection-green { --collection-color: var(--green); }
.collection-pink { --collection-color: var(--pink); }
.collection-violet { --collection-color: #7557c5; }

.website-collection-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 22px;
}

.collection-title {
  display: flex;
  align-items: flex-start;
  gap: 15px;
}

.collection-number {
  display: grid;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 14px;
  color: var(--collection-color);
  background: color-mix(in srgb, var(--collection-color) 10%, white);
  font-size: 0.72rem;
  font-weight: 900;
}

.website-collection-heading small {
  color: var(--collection-color);
}

.website-collection-heading h2 {
  margin: 4px 0 5px;
  color: var(--navy-deep);
  font-family: var(--display);
  font-size: 1.2rem;
}

.website-collection-heading p {
  max-width: 650px;
  margin: 0;
  color: var(--muted);
  font-size: 0.73rem;
  line-height: 1.55;
}

.collection-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
}

.collection-actions > span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
}

.collection-actions a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 39px;
  padding: 0 14px;
  border-radius: 11px;
  color: var(--paper);
  background: var(--collection-color);
  font-size: 0.69rem;
  font-weight: 800;
}

.collection-actions svg {
  width: 16px;
  height: 16px;
}

.website-collection-empty {
  padding: 32px;
  border: 1px dashed color-mix(in srgb, var(--collection-color) 30%, var(--line));
  border-radius: 15px;
  color: var(--muted);
  text-align: center;
}

.content-block-grid,
.slide-card-grid,
.partner-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.content-block-card {
  display: grid;
  gap: 9px;
  min-width: 0;
  padding: 17px;
  border: 1px solid #e5eaf1;
  border-radius: 15px;
  background: #f8fafd;
}

.content-block-meta,
.content-block-card footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.content-block-meta > span {
  color: var(--navy);
  font-size: 0.6rem;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.content-block-card > strong {
  overflow: hidden;
  color: var(--navy-deep);
  font-family: var(--display);
  font-size: 0.85rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.content-block-card p {
  min-height: 22px;
  margin: 0;
  overflow: hidden;
  color: var(--muted);
  font-family: var(--body);
  font-size: 0.75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.content-block-card footer {
  padding-top: 9px;
  border-top: 1px solid #e5eaf1;
}

.content-block-card footer small {
  color: var(--muted);
  font-size: 0.62rem;
}

.content-block-card footer a,
.slide-preview-card a {
  color: var(--navy);
  font-size: 0.67rem;
  font-weight: 800;
}

.slide-preview-card {
  position: relative;
  min-height: 230px;
  overflow: hidden;
  border-radius: 17px;
  background: var(--navy-deep);
}

.slide-preview-card > img {
  width: 100%;
  height: 100%;
  min-height: 230px;
  object-fit: cover;
  opacity: 0.72;
  transition: transform 0.4s var(--ease);
}

.slide-preview-card:hover > img {
  transform: scale(1.04);
}

.slide-preview-card > div {
  position: absolute;
  inset: auto 0 0;
  display: grid;
  gap: 5px;
  padding: 48px 18px 17px;
  color: var(--paper);
  background: linear-gradient(transparent, rgba(11, 28, 52, 0.92));
}

.slide-preview-card strong {
  font-family: var(--display);
}

.slide-preview-card p {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-family: var(--body);
}

.slide-preview-card a {
  width: max-content;
  margin-top: 4px;
  color: #ffd586;
}

.stat-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.stat-preview-card {
  display: grid;
  gap: 5px;
  padding: 20px;
  border-radius: 17px;
  color: var(--navy-deep);
  background:
    radial-gradient(circle at 100% 0, rgba(79, 187, 55, 0.18), transparent 40%),
    #f5faf4;
  transition: transform 0.25s var(--ease);
}

.stat-preview-card:hover {
  transform: translateY(-4px);
}

.stat-preview-card > small {
  color: #3e8e2e;
  font-size: 0.61rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.stat-preview-card strong {
  margin: 10px 0 3px;
  font-family: var(--display);
  font-size: 2.25rem;
  line-height: 1;
}

.stat-preview-card sup {
  color: var(--green);
  font-size: 1rem;
}

.stat-preview-card p,
.stat-preview-card > span {
  margin: 0;
  color: var(--muted);
  font-size: 0.7rem;
}

.gallery-preview-grid {
  display: grid;
  grid-auto-rows: 150px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.gallery-preview-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-radius: 15px;
  background: var(--navy-deep);
}

.gallery-preview-card.gallery-layout-wide {
  grid-column: span 2;
}

.gallery-preview-card.gallery-layout-tall {
  grid-row: span 2;
}

.gallery-preview-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.84;
  transition: transform 0.4s var(--ease), opacity 0.4s var(--ease);
}

.gallery-preview-card:hover img {
  opacity: 0.68;
  transform: scale(1.05);
}

.gallery-preview-card > span {
  position: absolute;
  inset: auto 0 0;
  display: grid;
  gap: 2px;
  padding: 34px 13px 12px;
  color: var(--paper);
  background: linear-gradient(transparent, rgba(11, 28, 52, 0.88));
}

.gallery-preview-card strong {
  overflow: hidden;
  font-size: 0.72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gallery-preview-card small {
  color: rgba(255, 255, 255, 0.64);
  font-size: 0.6rem;
}

.partner-preview-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.partner-preview-card {
  display: grid;
  min-height: 145px;
  place-items: center;
  align-content: center;
  gap: 7px;
  padding: 18px;
  border: 1px solid #e9e4f7;
  border-radius: 17px;
  text-align: center;
  background: #faf8ff;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.partner-preview-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(117, 87, 197, 0.12);
}

.partner-preview-card img {
  width: 72px;
  height: 48px;
  object-fit: contain;
}

.partner-preview-card > span {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 15px;
  color: #7557c5;
  background: #ece6fa;
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 900;
}

.partner-preview-card strong {
  color: var(--navy-deep);
  font-size: 0.76rem;
}

.partner-preview-card small {
  color: var(--muted);
  font-family: var(--body);
  font-size: 0.68rem;
}

@media (max-width: 1120px) {
  .website-studio-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .studio-controls {
    grid-template-columns: 1fr;
  }

  .content-block-grid,
  .slide-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .partner-preview-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

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

  .content-language-grid {
    grid-template-columns: 1fr;
  }

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

  .quick-panel {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 20px;
  }

  .quick-panel > span,
  .quick-panel h2 {
    grid-column: 1 / -1;
  }
}

@media (max-width: 820px) {
  .website-studio-hero,
  .website-collection-heading {
    align-items: flex-start;
  }

  .website-studio-hero {
    display: grid;
    gap: 28px;
    padding: 30px;
  }

  .website-studio-total {
    width: max-content;
  }

  .website-collection-heading {
    display: grid;
  }

  .collection-actions {
    justify-content: space-between;
  }

  .stat-card-grid,
  .gallery-preview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-shell,
  .admin-shell.is-sidebar-collapsed {
    display: block;
  }

  /*
   * The panel opens the way the menu on the public site does: the whole screen,
   * the same deep navy with a pink and a green bloom in opposite corners, and
   * the same drop-and-fade rather than a slide in from the edge. The bar stays
   * above it, so the button that opened it is the button that closes it.
   */
  .admin-sidebar,
  .admin-shell.is-sidebar-collapsed .admin-sidebar {
    position: fixed;
    inset: 0;
    width: auto;
    height: 100svh;
    /* Head and foot are hidden here, so the nav is the only row and it takes
       the whole height - otherwise it lands in the first `auto` track, hugs its
       own content, and has no room left to centre itself in. */
    grid-template-rows: minmax(0, 1fr);
    /* Clear of the bar (68px) above, the home indicator below. */
    padding: 84px 28px max(20px, env(safe-area-inset-bottom));
    /* Nothing in the panel scrolls, so a swipe on it must not reach the page. */
    overscroll-behavior: none;
    touch-action: none;
    background:
      radial-gradient(circle at 85% 15%, rgba(229, 28, 111, 0.3), transparent 30%),
      radial-gradient(circle at 10% 90%, rgba(79, 187, 55, 0.2), transparent 30%),
      var(--navy-deep);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px);
    transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s ease;
  }

  .admin-shell.is-mobile-sidebar-open .admin-sidebar {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  /* While the panel is open the page under it stays where it is. */
  html.is-mobile-nav-open,
  html.is-mobile-nav-open body {
    overflow: hidden;
    overscroll-behavior: none;
  }

  .admin-shell.is-sidebar-collapsed .admin-brand-copy,
  .admin-shell.is-sidebar-collapsed .account-copy {
    display: grid;
  }

  /* On phones the collapsed class means "drawer closed", not "rail", so the
     brand and its actions stay visible inside the opened drawer. */
  .admin-shell.is-sidebar-collapsed .admin-brand {
    display: inline-grid;
  }

  /* The bar carries these now, so the foot of the panel stands down here. */
  .sidebar-footer,
  .admin-shell.is-sidebar-collapsed .sidebar-footer {
    display: none;
  }

  .admin-shell.is-sidebar-collapsed .sidebar-language span {
    display: flex;
  }

  .admin-shell.is-sidebar-collapsed .nav-group a i,
  .admin-shell.is-sidebar-collapsed .collapse-icon {
    display: block;
  }

  .admin-shell.is-sidebar-collapsed .nav-group a span {
    display: inline;
  }

  .admin-shell.is-sidebar-collapsed .sidebar-account > a {
    display: grid;
  }

  .admin-shell.is-sidebar-collapsed .expand-icon {
    display: none;
  }

  .admin-shell.is-sidebar-collapsed .nav-group a {
    justify-content: flex-start;
    padding: 0 13px;
  }

  .admin-shell.is-sidebar-collapsed .sidebar-account {
    grid-template-columns: 39px minmax(0, 1fr) 36px;
    justify-items: stretch;
  }

  .sidebar-toggle {
    display: none;
  }

  /*
   * Pinned to the top of the screen, laid out like the bar on the public site:
   * wordmark at the leading edge, panel button at the trailing one, on a pale
   * blurred strip. It sits under the open drawer, which is z-index 30.
   */
  .portal-topbar {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    /* Above the panel (30), so the button that opened it also closes it. */
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 68px;
    /* max() keeps the wordmark clear of a phone notch in standalone mode. */
    padding: max(12px, env(safe-area-inset-top)) 16px 12px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 8px 30px rgba(14, 34, 60, 0.1);
    backdrop-filter: blur(18px);
  }

  .portal-topbar-brand {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
  }

  .portal-topbar-brand {
    position: relative;
  }

  .portal-topbar-logo {
    display: block;
    width: auto;
    height: 22px;
    transition: opacity 0.3s ease;
  }

  /* The white cut waits on top of the colour one and fades in with the panel. */
  .portal-topbar-logo-white {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
  }

  .admin-shell.is-mobile-sidebar-open .portal-topbar-logo-white {
    opacity: 1;
  }

  .admin-shell.is-mobile-sidebar-open .portal-topbar-logo-color {
    opacity: 0;
  }

  .portal-topbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  /*
   * The bar is pale where the panel is dark, so the pills take the ink the
   * public site gives them once its own header has a background behind it.
   */
  .portal-topbar .portal-bell,
  .portal-topbar .portal-language,
  .portal-topbar .portal-logout {
    color: var(--navy);
    border-color: rgba(34, 63, 107, 0.18);
    background: rgba(34, 63, 107, 0.05);
  }

  /* Its lit state is dark too, where on the panel it goes white. */
  .portal-topbar .portal-bell:hover {
    color: var(--navy);
    border-color: rgba(34, 63, 107, 0.3);
    background: rgba(34, 63, 107, 0.1);
  }

  .portal-topbar .portal-logout {
    padding: 9px 13px;
    font-size: 0.76rem;
  }

  /*
   * Open, the panel is the ground behind the bar, so the bar stops painting one
   * of its own and everything on it turns light - exactly how the public header
   * sits over its own menu.
   */
  .admin-shell.is-mobile-sidebar-open .portal-topbar {
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }

  .admin-shell.is-mobile-sidebar-open .portal-topbar .portal-bell,
  .admin-shell.is-mobile-sidebar-open .portal-topbar .portal-language,
  .admin-shell.is-mobile-sidebar-open .portal-topbar .portal-logout,
  .admin-shell.is-mobile-sidebar-open .mobile-panel-toggle {
    color: var(--paper);
    border-color: rgba(255, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.1);
  }

  /* No longer floating over the page: the bar holds it now. */
  .mobile-panel-toggle {
    position: static;
    display: grid;
    flex: 0 0 auto;
    color: var(--navy);
    border-color: var(--line);
    background: var(--paper);
  }

  /* The bars become a cross while the panel is open, as on the public site. */
  .panel-close-icon,
  .admin-shell.is-mobile-sidebar-open .panel-open-icon {
    display: none;
  }

  .admin-shell.is-mobile-sidebar-open .panel-close-icon {
    display: block;
  }

  /*
   * The head of the panel goes entirely - the bar overhead already carries the
   * wordmark, and the word naming the portal was repeating what the bar says.
   * Hiding the wrapper beats the rules that would otherwise put the brand back
   * while the panel counts as collapsed.
   */
  .sidebar-top,
  .admin-shell.is-sidebar-collapsed .sidebar-top {
    display: none;
  }

  /* The public menu labels no groups, so neither does this one. */
  .nav-group h2 {
    display: none;
  }

  .nav-group + .nav-group {
    margin-top: 0;
  }

  /* The panel covers the screen, so there is nothing left behind it to dim. */
  .sidebar-scrim {
    display: none;
  }

  /*
   * With the whole screen to work in, the links take the scale the public menu
   * uses - display face, generous rows, a hairline between each. Smaller than
   * the 3rem there, because these lists run to seven or eight entries under
   * their own headings rather than six flat ones.
   */
  /*
   * The whole list always fits the screen - no scrolling, whatever the phone.
   * The panel's height is shared out between the links (capped, so a short
   * list keeps its generous rows and sits centred like the public menu), and
   * each label is sized off the height of its own row (cqh) as well as the
   * width of the screen, so a long list on a short phone simply runs smaller.
   * The groups step aside so every link is a row of the one column.
   */
  .admin-nav {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    counter-reset: portal-nav;
  }

  .nav-group {
    display: contents;
  }

  /* parent.css gives its rows a 48px floor, which a family with many
     children would push past the bottom of the screen. */
  .nav-group a,
  .parent-page .nav-group a {
    flex: 1 1 0;
    min-height: 0;
    max-height: 92px;
    container-type: size;
    margin: 0;
    align-items: center;
    gap: 16px;
    padding: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0;
    color: var(--paper);
    font-family: var(--display);
    font-weight: 700;
    overflow: hidden;
    /* The count steps on the link, not on its ::before: container-type gives each
       link style containment, which restarts any counter stepped inside it, so a
       count kept in the ::before read 01 on every row. */
    counter-increment: portal-nav;
  }

  .nav-group a span {
    overflow: hidden;
    font-size: min(8vw, 3rem, 52cqh);
    line-height: 1.15;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  /*
   * The public menu counts its entries off in small orange figures. The count
   * is drawn by the stylesheet rather than written into every portal's markup,
   * so it stays right however the lists are ordered or added to.
   */
  .nav-group a::before {
    content: counter(portal-nav, decimal-leading-zero);
    color: var(--orange);
    font-family: var(--body);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.15em;
  }

  /* The figure takes the place the icon and the active dot held. */
  .nav-group a svg,
  .nav-group a i {
    display: none;
  }

  /* No pill and no slide: the public menu marks its place in colour alone. */
  .nav-group a:hover,
  .nav-group a.is-active {
    color: var(--orange);
    background: none;
    box-shadow: none;
    transform: none;
  }


  .admin-content {
    /*
     * Clear of the bar (68px) with a hairline of breathing room under it. The
     * title carries its own optical space above the cap line, so anything more
     * here reads as an empty white band rather than as breathing room.
     */
    padding: 76px 18px 55px;
  }

  /*
   * The parent portal keeps a sticky header of its own. It has to come to rest
   * under the bar rather than at the top of the screen, or it slides in behind
   * it and disappears.
   */
  .admin-header {
    top: 68px;
  }

  .content-heading {
    align-items: flex-start;
  }

  /* The block padding above already sets the gap; the margin only doubles it. */
  .content-heading h1 {
    margin-top: 0;
  }

  .table-panel-heading {
    display: grid;
    grid-template-columns: 1fr auto;
  }

  .table-search {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
  }

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

  .program-point-row {
    grid-template-columns: 34px 1fr;
  }

  .program-point-row .website-field {
    grid-column: 2;
  }
}

@media (max-width: 580px) {
  .website-studio-hero {
    min-height: 0;
    padding: 25px;
    border-radius: 20px;
  }

  .website-studio-nav,
  .studio-controls,
  .content-block-grid,
  .slide-card-grid,
  .stat-card-grid,
  .partner-preview-grid {
    grid-template-columns: 1fr;
  }

  .website-collection {
    padding: 19px;
  }

  .collection-title {
    display: grid;
  }

  .collection-actions {
    align-items: stretch;
  }

  .collection-actions a {
    justify-content: center;
  }

  .gallery-preview-grid {
    grid-template-columns: 1fr;
  }

  .gallery-preview-card.gallery-layout-wide {
    grid-column: span 1;
  }

  .gallery-preview-card.gallery-layout-tall {
    grid-row: span 1;
  }

  .content-heading {
    display: grid;
    gap: 18px;
  }

  .live-indicator {
    width: max-content;
  }

  .metrics-grid {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  .metric-card {
    min-height: 145px;
    padding: 20px;
  }

  .metric-card strong {
    font-size: 2rem;
  }

  .data-panel {
    padding: 18px;
    border-radius: 18px;
  }

  .quick-panel {
    display: block;
  }

  .panel-heading {
    align-items: flex-start;
  }

  .record-panel-heading,
  .record-header-tools {
    align-items: stretch;
  }

  .record-panel-heading {
    display: grid;
  }

  .record-header-tools {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .website-content-record .record-panel-heading {
    padding: 20px;
  }

  .website-content-editor {
    padding: 16px;
  }

  .content-editor-section {
    padding: 18px;
  }

  .website-settings-grid,
  .record-information-grid {
    grid-template-columns: 1fr;
  }

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

  .program-point-row .website-field {
    grid-column: 1;
  }

  .program-point-number {
    margin-bottom: 0;
  }

  .table-panel-heading {
    grid-template-columns: 1fr;
  }

  .record-count {
    width: max-content;
  }

  .table-heading-actions {
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .record-form-grid,
  .compact-grid {
    grid-template-columns: 1fr;
  }

  .linked-section-body {
    padding: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* Overview metric sub-value (e.g. net expected this month) */
.metric-sub {
  display: block;
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Admin/manager warning workflow board */
.warning-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  align-items: start;
}
/* Warning cards as tiles: the stage panel is full width, so they sit side by side. */
.warning-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.warning-tiles .warning-card {
  margin: 0;
}

@media (max-width: 760px) {
  .warning-tiles {
    grid-template-columns: minmax(0, 1fr);
  }
}

.warning-column-hint {
  margin: -4px 0 12px;
  color: var(--muted);
  font-size: 0.75rem;
}
.warning-card {
  border: 1px solid rgba(11, 28, 52, 0.08);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 12px;
  background: rgba(255, 255, 255, 0.6);
}
.warning-card-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
.warning-card-top strong { color: var(--navy); }
.warning-card-top small { color: var(--muted); font-size: 0.72rem; }
.warning-reason { margin: 6px 0; color: var(--navy); font-weight: 600; }
.warning-meta { display: block; color: var(--muted); font-size: 0.72rem; margin-top: 2px; }
.warning-action-form { margin-top: 10px; display: grid; gap: 8px; }
.warning-type-choice { display: flex; gap: 14px; font-size: 0.8rem; font-weight: 600; color: var(--navy); }
.warning-type-choice label { display: inline-flex; align-items: center; gap: 5px; }
/* Running tally on a flag, so the admin sees the student's history before issuing. */
.warning-history {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 10px 0 4px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(34, 63, 107, 0.04);
}

.warning-history span {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.warning-history b {
  color: var(--navy);
  font-size: 0.82rem;
}

.warning-history small {
  flex: 1 0 100%;
  color: var(--muted);
  font-size: 0.63rem;
  line-height: 1.45;
}

.warning-inline-fields { display: flex; gap: 8px; }
.warning-action-form input[type="number"],
.warning-action-form input[type="text"] {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid rgba(11, 28, 52, 0.16);
  border-radius: 10px;
  font: inherit;
}
.warning-card-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Teacher behaviour flag view */
.behaviour-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
  align-items: start;
}
.behaviour-flag-form { display: grid; gap: 14px; }
.behaviour-flag-form label { display: grid; gap: 6px; font-size: 0.8rem; font-weight: 700; color: var(--navy); }
.behaviour-flag-form select,
.behaviour-flag-form input[type="text"],
.behaviour-flag-form textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(11, 28, 52, 0.16);
  border-radius: 10px;
  font: inherit;
}
.behaviour-flag-list { display: grid; gap: 10px; }
.behaviour-flag-item {
  border: 1px solid rgba(11, 28, 52, 0.08);
  border-radius: 12px;
  padding: 10px 12px;
}
.behaviour-flag-item > div { display: flex; justify-content: space-between; gap: 10px; }
.behaviour-flag-item strong { color: var(--navy); }
.behaviour-flag-item small { color: var(--muted); font-size: 0.72rem; }
.behaviour-flag-item p { margin: 6px 0; color: var(--navy); }

/* Teacher absence requests: the teacher's form and list, and the manager's cards */
.absence-form-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.absence-request-form input[type="date"],
.absence-request-form input[type="time"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(11, 28, 52, 0.16);
  border-radius: 10px;
  font: inherit;
}
.absence-request-form :is(.date-dmy-text, .time-field-text) {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(11, 28, 52, 0.16);
  border-radius: 10px;
  font: inherit;
}

/*
 * Date, time and month boxes (date-time-fields.js): a typed box with a button
 * at its end that opens our own calendar or clock. The real input is hidden
 * inside the wrapper and is what the form posts.
 */
:is(.date-dmy, .time-field, .month-field) {
  position: relative;
  display: block;
}
/* The wrapper is a span inside the field's label, so it would otherwise take the
   small bold caption style of the label's own span. */
:is(.admin-field, label) > :is(.date-dmy, .time-field, .month-field, .datetime-field) {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: normal;
  text-transform: none;
}
:is(.date-dmy-text, .time-field-text, .month-field-text) {
  width: 100%;
  padding-inline-end: 46px !important;
  text-align: start;
  font-variant-numeric: tabular-nums;
}
:is(.date-dmy-picker, .time-field-picker, .month-field-picker) {
  position: absolute;
  inset-block: 5px;
  inset-inline-end: 5px;
  width: 36px;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
:is(.date-dmy-picker, .time-field-picker, .month-field-picker)::before {
  content: "";
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E") center / contain no-repeat;
}
.time-field-picker::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}
:is(.date-dmy-picker, .time-field-picker, .month-field-picker):hover,
:is(.date-dmy-picker, .time-field-picker, .month-field-picker)[aria-expanded="true"] {
  color: var(--navy);
  background: rgba(34, 63, 107, 0.08);
}
:is(.date-dmy-picker, .time-field-picker, .month-field-picker):focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 1px;
}
:is(.date-dmy-picker, .time-field-picker, .month-field-picker):disabled,
:is(.date-dmy, .time-field, .month-field).is-readonly > button,
:is(.date-dmy-text, .time-field-text, .month-field-text):read-only + button {
  pointer-events: none;
  opacity: 0.45;
}
/* A date and a time posted as one value: side by side, the date wider. */
.datetime-field {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 8px;
}

/* The popover the buttons open. On a phone it rises from the bottom instead. */
.dt-popover {
  position: fixed;
  z-index: 2000;
  width: 304px;
  max-width: calc(100vw - 24px);
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 22px 48px rgba(11, 28, 52, 0.2), 0 2px 6px rgba(11, 28, 52, 0.06);
  font-family: var(--body);
  animation: dt-pop 0.16s var(--ease);
}
.dt-popover[hidden],
.dt-backdrop[hidden] { display: none; }
@keyframes dt-pop {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
.dt-popover.is-sheet {
  inset: auto 0 0 0;
  width: auto;
  max-width: none;
  padding: 16px 16px max(16px, env(safe-area-inset-bottom));
  border-radius: 22px 22px 0 0;
  animation: dt-sheet 0.2s var(--ease);
}
@keyframes dt-sheet {
  from { transform: translateY(100%); }
  to { transform: none; }
}
.dt-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1999;
  background: rgba(11, 28, 52, 0.35);
}

.dt-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 8px;
}
.dt-title {
  flex: 1;
  min-height: 36px;
  padding: 6px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--navy);
  font: 800 0.98rem/1.2 var(--display);
  text-align: center;
  cursor: pointer;
}
button.dt-title:hover { background: var(--soft); }
.dt-title.is-static { cursor: default; }
.dt-nav {
  width: 36px;
  height: 36px;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--navy);
  cursor: pointer;
}
.dt-nav:hover { background: var(--soft); }
.dt-nav::before {
  content: "";
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* The arrows point the way the month moves: flipped for "next", and the other
   way round in Arabic. */
.dt-next::before,
.dt-popover[dir="rtl"] .dt-prev::before { transform: scaleX(-1); }
.dt-popover[dir="rtl"] .dt-next::before { transform: none; }

.dt-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.dt-weekday {
  padding: 4px 0 6px;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
}
.dt-day,
.dt-cell,
.dt-time {
  min-height: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: 700 0.86rem/1 var(--body);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background 0.12s var(--ease), color 0.12s var(--ease);
}
.dt-day {
  aspect-ratio: 1;
  border-radius: 10px;
}
.dt-day.is-outside { color: #b3bdca; }
.dt-day:hover:not(:disabled),
.dt-cell:hover:not(:disabled),
.dt-time:hover { background: var(--soft); }
.dt-day.is-today,
.dt-cell.is-today { box-shadow: inset 0 0 0 1.5px var(--orange); }
.dt-day.is-selected,
.dt-cell.is-selected,
.dt-time.is-selected {
  background: var(--navy) !important;
  color: var(--paper);
  box-shadow: 0 6px 14px rgba(20, 42, 73, 0.22);
}
.dt-day:disabled,
.dt-cell:disabled {
  color: #c7cfda;
  text-decoration: line-through;
  cursor: not-allowed;
}
.dt-day:focus-visible,
.dt-cell:focus-visible,
.dt-time:focus-visible,
.dt-footer-btn:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 1px;
}
.dt-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.dt-cell {
  min-height: 46px;
  padding: 6px;
  border-radius: 12px;
  font-size: 0.82rem;
}

/* Times: the center's day in quarter hours, morning / afternoon / evening. */
.dt-times {
  max-height: 280px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-inline-end: 2px;
}
.dt-popover.is-sheet .dt-times { max-height: 46vh; }
.dt-times-group {
  display: block;
  margin: 8px 2px 6px;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
}
.dt-times-group:first-child { margin-top: 0; }
.dt-times-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
}
.dt-time {
  min-height: 38px;
  padding: 4px 2px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 0.78rem;
  white-space: nowrap;
}
.dt-popover[dir="rtl"] .dt-time { direction: ltr; }

.dt-footer {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.dt-footer-btn {
  min-height: 34px;
  padding: 6px 14px;
  border: 0;
  border-radius: 10px;
  background: var(--soft);
  color: var(--navy);
  font: 800 0.8rem/1 var(--body);
  cursor: pointer;
}
.dt-footer-btn.is-primary {
  background: rgba(244, 159, 15, 0.16);
  color: #9a5f00;
}
.dt-footer-btn:hover:not(:disabled) { filter: brightness(0.96); }
.dt-footer-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/*
 * Pick lists (select-sheet.js). The select stays in the form but takes no
 * pointer: a press where it is drawn opens this list - a popover under the
 * field on a computer, a sheet from the bottom on a phone, like the date picker.
 */
html.ks-on select:not([multiple]):not([size]):not([data-native-select]) {
  pointer-events: none;
}
html.ks-on :has(> select:not([multiple]):not([size]):not([data-native-select]):not(:disabled)) {
  cursor: pointer;
}
select.is-ks-open {
  border-color: var(--navy) !important;
  box-shadow: 0 0 0 3px rgba(34, 63, 107, 0.14) !important;
}
html.ks-locked,
html.ks-locked body {
  overflow: hidden;
}
.ks-popover {
  position: fixed;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  max-width: calc(100vw - 24px);
  max-height: min(420px, calc(100vh - 24px));
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 22px 48px rgba(11, 28, 52, 0.2), 0 2px 6px rgba(11, 28, 52, 0.06);
  font-family: var(--body);
  animation: dt-pop 0.16s var(--ease);
}
.ks-popover[hidden],
.ks-backdrop[hidden] { display: none; }
.ks-popover.is-sheet {
  inset: auto 0 0 0;
  width: auto;
  max-width: none;
  max-height: 78svh;
  padding: 8px 14px max(14px, env(safe-area-inset-bottom));
  border-radius: 22px 22px 0 0;
  animation: dt-sheet 0.22s var(--ease);
}
/* The grip that says "this is a sheet". */
.ks-popover.is-sheet::before {
  align-self: center;
  width: 40px;
  height: 4px;
  margin: 2px 0 8px;
  border-radius: 4px;
  background: var(--line);
  content: "";
}
.ks-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1999;
  background: rgba(11, 28, 52, 0.35);
  animation: ks-fade 0.2s ease;
}
@keyframes ks-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.ks-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 4px 8px;
}
.ks-title {
  overflow: hidden;
  color: var(--navy);
  font-size: 0.95rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ks-popover:not(.is-sheet) .ks-head {
  display: none;
}
.ks-close {
  position: relative;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: var(--soft);
  cursor: pointer;
}
.ks-close::before,
.ks-close::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: var(--navy);
  content: "";
  transform: translate(-50%, -50%) rotate(45deg);
}
.ks-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.ks-search {
  flex: 0 0 auto;
  width: 100%;
  min-height: 42px;
  margin-bottom: 8px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--soft);
  color: var(--ink);
  font: inherit;
}
.ks-search:focus {
  border-color: var(--navy);
  outline: none;
  background: var(--paper);
}
.ks-list {
  display: grid;
  gap: 2px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.ks-group {
  display: grid;
  gap: 2px;
}
.ks-group[hidden] { display: none; }
.ks-group + .ks-group,
.ks-option + .ks-group {
  margin-top: 6px;
}
.ks-group-label {
  padding: 8px 12px 4px;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ks-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 42px;
  padding: 8px 12px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--ink);
  font: 600 0.88rem/1.35 var(--body);
  text-align: start;
  cursor: pointer;
}
.ks-option[hidden] { display: none; }
.ks-popover.is-sheet .ks-option {
  min-height: 50px;
  font-size: 0.98rem;
}
.ks-option:hover:not(:disabled),
.ks-option:focus-visible {
  outline: none;
  background: var(--soft);
}
.ks-option.is-placeholder {
  color: var(--muted);
  font-weight: 500;
}
.ks-option.is-selected {
  background: rgba(34, 63, 107, 0.08);
  color: var(--navy);
  font-weight: 800;
}
/* A tick on the chosen row. */
.ks-option.is-selected::after {
  flex: 0 0 auto;
  width: 6px;
  height: 11px;
  margin-inline-end: 4px;
  border: solid var(--orange);
  border-width: 0 2.5px 2.5px 0;
  content: "";
  transform: rotate(45deg) translate(-1px, -1px);
}
.ks-option:disabled {
  color: #c7cfda;
  cursor: not-allowed;
}
.ks-empty {
  margin: 4px 0 8px;
  color: var(--muted);
  font-size: 0.85rem;
  text-align: center;
}
.ks-empty[hidden] { display: none; }

/* Payment form: Full / Half under the amount, and where the month stands. */
.billing-amount-buttons {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.billing-amount-buttons[hidden],
fieldset:disabled .billing-amount-buttons { display: none; }
.billing-amount-buttons .secondary-action {
  min-height: 34px;
  padding: 6px 14px;
  font-size: 0.78rem;
}
.billing-month-status {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.74rem;
}

/* Filled in by the form itself (a billing month's period end, paid amount and
   last payment date): readable, but plainly not a box to type in. */
.admin-field input[readonly] {
  color: #5b6677;
  background: #edf1f6;
  cursor: default;
}
.admin-field input[readonly]:focus {
  border-color: var(--line);
  box-shadow: none;
}

.absence-form-hint { margin: -6px 0 0; color: var(--muted); font-size: 0.72rem; }
.absence-kind { display: grid; gap: 6px; }
.absence-kind-label { color: var(--navy); font-size: 0.78rem; font-weight: 800; }
.absence-request-form [hidden] { display: none !important; }
/* What will be sent, said back in one line under the fields. */
.absence-summary {
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(79, 187, 55, 0.1);
  color: #2d7a1d;
  font-size: 0.82rem;
  font-weight: 700;
}
.absence-summary.is-error {
  background: rgba(229, 28, 111, 0.08);
  color: var(--pink);
}
.absence-item > div:first-child { align-items: center; }
.absence-period { margin: 6px 0 2px; color: var(--navy); font-weight: 800; }
.absence-decision {
  margin-top: 8px;
  padding: 8px 10px;
  border-inline-start: 3px solid var(--green);
  border-radius: 8px;
  background: rgba(79, 187, 55, 0.07);
}
.absence-decision-rejected {
  border-inline-start-color: var(--pink);
  background: rgba(229, 28, 111, 0.06);
}
.absence-decision p { margin: 4px 0 0; color: var(--navy); white-space: normal; }
.absence-withdraw-form { margin-top: 8px; }

/* Parent behaviour + expiation panel */
.parent-behaviour { margin-top: 22px; }
.parent-warning-list { display: grid; gap: 14px; }
.parent-warning-card {
  border: 1px solid rgba(11, 28, 52, 0.08);
  border-left: 4px solid var(--orange);
  border-radius: 14px;
  padding: 14px 16px;
}
.parent-warning-resolved { border-left-color: var(--green); opacity: 0.85; }
.parent-warning-assigned { border-left-color: var(--navy); }
.parent-warning-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.parent-warning-top small { color: var(--muted); font-size: 0.74rem; }
.parent-warning-reason { margin: 8px 0; color: var(--navy); font-weight: 600; }
.parent-warning-note { display: block; color: var(--muted); font-size: 0.76rem; margin-top: 4px; }
.parent-expiation-form { margin-top: 10px; display: grid; gap: 10px; }
.parent-expiation-form label { display: grid; gap: 6px; font-size: 0.8rem; font-weight: 700; color: var(--navy); }
.parent-expiation-form select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(11, 28, 52, 0.16);
  border-radius: 10px;
  font: inherit;
}
.parent-warning-expiation {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(11, 28, 52, 0.04);
  display: grid;
  gap: 2px;
}
.parent-warning-expiation span { color: var(--muted); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.parent-warning-expiation strong { color: var(--navy); }
.parent-warning-expiation small { color: var(--muted); font-size: 0.76rem; }

/* Pager under a table view. Long tables render one page at a time. */
.table-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 14px 18px 4px;
}

.pager-step {
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 7px 15px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  background: var(--paper);
  transition: border-color 0.16s ease, color 0.16s ease;
}

.pager-step:hover {
  border-color: var(--navy);
  color: var(--navy);
}

.pager-step.is-disabled {
  opacity: 0.42;
  pointer-events: none;
}

.pager-status {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
}

/* The notes field on the new-parent form spans the full row. */
.new-parent-form .new-parent-notes {
  grid-column: 1 / -1;
}

/* Toolbar buttons keep their label on one line; the row can wrap instead. */
.table-heading-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.table-heading-actions > a,
.table-heading-actions > button {
  white-space: nowrap;
}

.new-parent-button svg {
  width: 16px;
  height: 16px;
}

/* One QR button that opens a small format menu (PNG / JPG). */
.qr-download {
  position: relative;
}

.qr-download-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.qr-download-caret {
  width: 14px;
  height: 14px;
  opacity: 0.7;
}

.qr-download-toggle[aria-expanded="true"] .qr-download-caret {
  transform: rotate(180deg);
}

.qr-download-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  min-width: 100%;
  display: flex;
  flex-direction: column;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--paper);
  box-shadow: 0 16px 34px rgba(11, 28, 52, 0.14);
}

.qr-download-menu button {
  border: 0;
  border-radius: 8px;
  padding: 9px 14px;
  font-family: var(--body);
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--ink);
  text-align: left;
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
}

.qr-download-menu button:hover,
.qr-download-menu button:focus-visible {
  background: var(--soft);
  color: var(--navy);
}

html[dir="rtl"] .qr-download-menu {
  right: auto;
  left: 0;
}

html[dir="rtl"] .qr-download-menu button {
  text-align: right;
}

/* Optional parent block on the new-student form. */
/*
 * The one and only sight of a generated password. A panel rather than a toast,
 * because a message that fades is no way to hand over a credential.
 */
.new-parent-credentials {
  margin-bottom: 18px;
  padding: 20px 22px;
  border: 1px solid rgba(244, 159, 15, 0.35);
  border-left: 4px solid var(--orange);
  border-radius: 16px;
  background: rgba(244, 159, 15, 0.07);
}

.new-parent-credentials > div > span {
  color: var(--orange);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.new-parent-credentials h2 {
  margin: 4px 0 0;
  color: var(--navy);
  font-family: var(--display);
  font-size: 1.2rem;
}

.new-parent-credentials dl {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 32px;
  margin: 14px 0 0;
}

.new-parent-credentials dt {
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.new-parent-credentials dd {
  margin: 3px 0 0;
  color: var(--navy);
  font-size: 0.92rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

/* The password itself, set apart so it can be read off the screen at a glance. */
.new-parent-credentials dd.is-secret {
  padding: 5px 11px;
  border: 1px dashed rgba(11, 28, 52, 0.22);
  border-radius: 9px;
  background: var(--paper);
  font-family: "Cascadia Mono", Consolas, monospace;
  font-size: 1rem;
  letter-spacing: 0.06em;
  user-select: all;
}

.new-parent-credentials p {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 0.76rem;
}

.new-student-parent {
  margin: 26px 0 4px;
  padding: 6px 18px 18px;
  border: 1px dashed var(--line);
  border-radius: 13px;
}

/* Add teacher: one tick per subject, in as many columns as fit. */
.teacher-subject-picks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.teacher-subject-pick {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--soft);
  cursor: pointer;
  font-size: 0.86rem;
}
.teacher-subject-pick:has(input:checked) {
  border-color: rgba(34, 63, 107, 0.45);
  background: var(--paper);
}
.teacher-subject-pick input {
  width: 17px;
  height: 17px;
  accent-color: var(--navy);
}

.new-student-parent legend {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 8px;
  font-family: var(--display);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ink);
}

.new-student-parent legend span {
  border-radius: 999px;
  padding: 3px 9px;
  font-family: var(--body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--soft);
}

.new-student-parent .admin-field-help {
  margin: 0 0 14px;
}

/* Weekly school-schedule planner -------------------------------------------- */

.schedule-planner {
  --schedule-slot: 26px;
  /* The note popover is placed against this box, so it has to be the offset parent. */
  position: relative;
  display: grid;
  gap: 16px;
}

.schedule-toolbar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.schedule-hint {
  margin: 0;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 600;
}

.schedule-hint.is-good {
  color: #337c26;
}

.schedule-hint.is-warn {
  color: var(--pink);
}

.schedule-download {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.schedule-download svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The grid scrolls sideways on narrow screens rather than squeezing seven days. */
.schedule-grid {
  overflow-x: auto;
  padding-bottom: 4px;
}

.schedule-head,
.schedule-body {
  display: grid;
  grid-template-columns: 62px repeat(7, minmax(96px, 1fr));
  min-width: 760px;
}

.schedule-head {
  gap: 4px;
  margin-bottom: 6px;
}

.schedule-head-day {
  padding: 9px 6px;
  border-radius: 10px;
  color: var(--paper);
  background: var(--navy);
  font-size: 0.72rem;
  font-weight: 800;
  text-align: center;
}

.schedule-head-day i {
  display: none;
  font-style: normal;
}

.schedule-body {
  gap: 4px;
  align-items: start;
}

.schedule-axis {
  position: relative;
  /* The 1px lines up the hour labels with the day columns' inner edge. */
  padding-top: 1px;
  height: calc(var(--schedule-slots) * var(--schedule-slot));
}

.schedule-axis-label {
  position: absolute;
  right: 8px;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 700;
  white-space: nowrap;
}

.schedule-day {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  overflow: hidden;
  touch-action: none;
}

.schedule-slot {
  display: block;
  height: var(--schedule-slot);
  border-bottom: 1px solid #f1f5fa;
}

.schedule-slot.is-hour {
  border-bottom-color: var(--line);
}

.schedule-planner.is-editing .schedule-day {
  cursor: crosshair;
}

.schedule-blocks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.schedule-block {
  position: absolute;
  left: 3px;
  right: 3px;
  padding: 5px 7px;
  border-radius: 9px;
  color: var(--paper);
  background: var(--navy);
  box-shadow: 0 6px 16px rgba(20, 42, 73, 0.18);
  font-size: 0.63rem;
  line-height: 1.3;
  overflow: hidden;
  pointer-events: auto;
}

.schedule-block strong {
  display: block;
  font-weight: 800;
}

.schedule-block small {
  display: block;
  margin-top: 2px;
  color: #ffd58f;
  font-size: 0.6rem;
}

.schedule-block-remove {
  position: absolute;
  top: 3px;
  right: 3px;
  display: none;
  width: 17px;
  height: 17px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--navy);
  background: var(--paper);
  font-size: 0.75rem;
  line-height: 1;
  cursor: pointer;
}

.schedule-planner.is-editing .schedule-block-remove {
  display: block;
}

.schedule-preview {
  position: absolute;
  left: 3px;
  right: 3px;
  padding: 4px 6px;
  border: 2px dashed var(--orange);
  border-radius: 9px;
  color: var(--navy);
  background: rgba(244, 159, 15, 0.16);
  font-size: 0.6rem;
  font-weight: 800;
  pointer-events: none;
}

.schedule-kept-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.68rem;
}

/* Scoped to the planner: the availability grid has no long day label to
   swap out, so hiding its <b> would leave the header row blank. */
@media (max-width: 900px) {
  .schedule-planner .schedule-head-day b {
    display: none;
  }

  .schedule-planner .schedule-head-day i {
    display: block;
  }
}

.schedule-note-editor {
  position: absolute;
  z-index: 4;
  display: grid;
  gap: 7px;
  width: 240px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  box-shadow: 0 18px 40px rgba(20, 42, 73, 0.22);
}

.schedule-note-editor label {
  color: var(--muted);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.schedule-note-editor input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--ink);
  background: var(--paper);
  font-family: inherit;
  font-size: 0.76rem;
}

.schedule-note-editor div {
  display: flex;
  gap: 7px;
}

.schedule-note-editor button {
  flex: 1;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--navy);
  background: var(--soft);
  font-family: inherit;
  font-size: 0.7rem;
  font-weight: 800;
  cursor: pointer;
}

.schedule-note-editor button[data-note-save] {
  border-color: transparent;
  color: var(--paper);
  background: var(--navy);
}

/* An hour or less cannot hold two lines, so the note joins the time on one row. */
.schedule-block.is-compact {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 3px 6px;
  line-height: 1.2;
}

.schedule-block.is-compact strong {
  flex: 0 0 auto;
  font-size: 0.58rem;
}

.schedule-block.is-compact small {
  flex: 1 1 auto;
  min-width: 0;
  margin-top: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The remove button would otherwise sit on top of a one-line session's text. */
.schedule-planner.is-editing .schedule-block.is-compact {
  padding-right: 23px;
}

/* Teacher website profile ---------------------------------------------------- */

.website-state {
  padding: 7px 13px;
  border-radius: 999px;
  color: var(--muted);
  background: var(--soft);
  font-size: 0.68rem;
  font-weight: 800;
}

.website-state.is-live {
  color: #337c26;
  background: rgba(79, 187, 55, 0.12);
}

.website-profile-lead {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 0.82rem;
}














.website-profile-note {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.6;
}

.website-profile-chips {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Subjects are the one thing on the card with no field of its own here. */
.website-profile-subjects {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 20px;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--soft);
}

.website-profile-subjects > span {
  color: var(--muted);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.website-profile-subjects strong {
  color: var(--ink);
  font-size: 0.86rem;
}

.website-profile-subjects b {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
}

.website-profile-subjects em {
  margin-inline-start: auto;
  color: var(--muted);
  font-size: 0.68rem;
}

/* The photo field is much taller than a select, and a stretched row would leave
   its neighbours floating in the middle of all that space. */
.website-profile-form .record-form-grid {
  align-items: start;
}

/* ---------------------------------------------------------------------------
   Schedule check

   Three stacked panels: the filter form, the shared-availability heatmap, and
   the wide student table. Everything is scoped to this page so the student
   planner, which shares the .schedule-* grid classes, keeps its own behaviour.
   --------------------------------------------------------------------------- */

/* Filter form -------------------------------------------------------------- */

.schedule-filter-note {
  max-width: 34ch;
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.6;
  text-align: end;
}

.schedule-check-filters {
  display: grid;
  gap: 18px;
}

/* The three controls have very different heights - a 48px segmented row beside
   a 200px checklist - so they hang from a shared top edge rather than trying
   to find a baseline none of them share. */
.schedule-check-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 18px;
  align-items: start;
}

.schedule-check-filters fieldset.admin-field {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  gap: 9px;
}

/* The field label, with room for the "3 selected" chip on the same line. */
.filter-field-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 17px;
}

/* Nested one level deeper than .admin-field > span, so it restates the label
   look here instead of inheriting body text at full size. */
.filter-field-head > span {
  color: var(--navy);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.filter-count {
  padding: 2px 9px;
  border-radius: 999px;
  color: var(--navy-deep);
  background: rgba(244, 159, 15, 0.22);
  font-size: 0.61rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Checklists: grade and school -------------------------------------------- */

.filter-checklist-box {
  display: grid;
  align-content: start;
  gap: 2px;
  /* Grows with a short list and caps before it can stretch the page, so two
     schools do not sit in the same tall box as twelve grades. */
  min-height: 132px;
  max-height: 214px;
  overflow-y: auto;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--soft);
  scrollbar-width: thin;
  scrollbar-color: rgba(34, 63, 107, 0.25) transparent;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.filter-checklist-box::-webkit-scrollbar {
  width: 9px;
}

.filter-checklist-box::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background: rgba(34, 63, 107, 0.24);
  background-clip: content-box;
}

.filter-checklist-box:focus-within {
  border-color: rgba(34, 63, 107, 0.45);
  background: var(--paper);
  box-shadow: 0 0 0 4px rgba(34, 63, 107, 0.06);
}

.filter-checklist-box label,
.filter-radio-row label {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  color: var(--navy);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.filter-checklist-box label:hover,
.filter-radio-row label:hover {
  background: rgba(34, 63, 107, 0.07);
}

/* A ticked row is tinted and flagged in the gutter, so the chosen few stay
   findable while the rest of a long list scrolls past. */
.filter-checklist-box label:has(input:checked) {
  background: rgba(34, 63, 107, 0.09);
  font-weight: 800;
}

.filter-checklist-box label:not(.filter-checklist-all):has(input:checked)::before {
  position: absolute;
  inset-block: 7px;
  inset-inline-start: 0;
  width: 3px;
  border-radius: 3px;
  background: var(--orange);
  content: "";
}

/*
 * These are checkboxes and radios, not text boxes. Without the reset they
 * inherit .admin-field input - full width, 45px tall, padded and bordered -
 * which is what turned each option into a large empty grey block.
 */
.filter-checklist-box input,
.filter-radio-row input {
  flex: none;
  width: 17px;
  height: 17px;
  min-height: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
}

/* Drawn by hand rather than left to accent-color, so the tick carries the
   same radius and navy as the panel around it. */
.filter-checklist-box input {
  position: relative;
  appearance: none;
  border: 1.5px solid #c4cfdd;
  border-radius: 6px;
  background: var(--paper);
  transition: border-color 0.12s ease, background 0.12s ease;
}

.filter-checklist-box input:checked {
  border-color: var(--navy);
  background: var(--navy);
}

.filter-checklist-box input:checked::after {
  position: absolute;
  top: 2px;
  left: 4.5px;
  width: 4px;
  height: 8px;
  border: solid var(--paper);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  content: "";
}

.filter-checklist-box input:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

.filter-checklist-box label span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.filter-checklist-box label small {
  display: block;
  color: var(--muted);
  font-size: 0.65rem;
  font-weight: 700;
}

/* "All" heads the list and stays put while the options scroll under it. */
.filter-checklist-all {
  position: sticky;
  top: -7px;
  z-index: 1;
  margin: -7px -7px 4px;
  padding: 12px 16px 10px !important;
  border-bottom: 1px solid var(--line);
  border-radius: 13px 13px 0 0 !important;
  background: var(--soft);
}

.filter-checklist-box:focus-within .filter-checklist-all {
  background: var(--paper);
}

.filter-checklist-all:hover {
  background: rgba(34, 63, 107, 0.07) !important;
}

/* Category: one segmented control ----------------------------------------- */

/* Three short, mutually exclusive options, so it reads as a single switch.
   A radio dot next to a filled pill says the same thing twice, so the input
   is hidden and the label carries the whole hit area. */
.filter-radio-row {
  display: flex;
  gap: 4px;
  align-items: center;
  min-height: 48px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--soft);
}

.filter-radio-row input {
  position: absolute;
  width: 1px;
  height: 1px;
  border: 0;
  background: none;
  opacity: 0;
  pointer-events: none;
}

.filter-radio-row label {
  flex: 1 1 0;
  justify-content: center;
  gap: 0;
  min-width: 0;
  padding: 9px 6px;
  font-size: 0.76rem;
  font-weight: 800;
  text-align: center;
}

.filter-radio-row label:has(input:checked) {
  color: var(--paper);
  background: var(--navy);
  box-shadow: 0 7px 16px rgba(20, 42, 73, 0.18);
}

.filter-radio-row label:has(input:focus-visible) {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

/* The buttons take a row of their own: dropped into the field grid they land
   in whatever column happens to be left over, which reads as a mistake. */
.schedule-check-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  padding-top: 17px;
  border-top: 1px solid var(--line);
}

.schedule-check-actions .secondary-action {
  background: var(--soft);
}

/* Nothing chosen yet ------------------------------------------------------- */

.schedule-check-empty {
  display: grid;
  justify-items: center;
  gap: 6px;
  max-width: 47ch;
  margin: 0 auto;
  padding: 34px 6px 38px;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.75;
  text-align: center;
}

.schedule-check-empty-mark {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 6px;
  border-radius: 18px;
  color: var(--navy);
  background: rgba(34, 63, 107, 0.07);
}

.schedule-check-empty-mark svg {
  width: 26px;
  height: 26px;
  stroke-width: 1.7;
}

.schedule-check-empty strong {
  color: var(--navy);
  font-family: var(--display);
  font-size: 1.2rem;
  letter-spacing: -0.02em;
}

/* Shared availability heatmap ---------------------------------------------- */

/* Same seven-column shape as the student planner, but read-only and filled by
   headcount rather than blocks: green where every matched student is free. */
.schedule-availability .schedule-day {
  /* The planner draws blocks over an empty column; here the slots are the fill
     itself, so the column padding must not space them apart. */
  display: block;
  border-color: transparent;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(20, 42, 73, 0.06);
}

.schedule-availability .schedule-slot {
  border-bottom: 1px solid rgba(255, 255, 255, 0.55);
  transition: filter 0.12s ease;
}

.schedule-availability .schedule-slot.is-hour {
  border-bottom-color: rgba(255, 255, 255, 0.85);
}

/* Every slot carries its headcount as a title, so it darkens under the cursor
   to show it is worth pointing at. */
.schedule-availability .schedule-slot:hover {
  filter: brightness(0.92);
}

.schedule-availability .schedule-slot.is-free {
  background: #4ea653;
}

.schedule-availability .schedule-slot.is-some {
  background: #ffd7a1;
}

.schedule-availability .schedule-slot.is-all {
  background: #eef2f7;
}

.schedule-availability-legend {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin: 0;
  color: var(--navy);
  font-size: 0.68rem;
  font-weight: 800;
}

/* Swatch and wording travel together, so neither can be read against the
   wrong neighbour once the row wraps. */
.schedule-availability-legend .legend-item {
  display: inline-flex;
  font-size: 0.68rem;
  letter-spacing: 0.01em;
  text-transform: none;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--soft);
  white-space: nowrap;
}

.schedule-availability-legend i {
  width: 11px;
  height: 11px;
  flex: none;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(20, 42, 73, 0.1);
}

.schedule-availability-legend .is-free { background: #4ea653; }
.schedule-availability-legend .is-some { background: #ffd7a1; }
.schedule-availability-legend .is-all { background: #eef2f7; }

/* The windows spelled out, for the days the heatmap shows as usable. */
.schedule-free-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 10px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.schedule-free-summary li {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--soft);
}

/* A day nobody shares is outlined rather than filled, so the usable days
   carry the weight. */
.schedule-free-summary li:has(.empty-value) {
  border-style: dashed;
  background: var(--paper);
}

.schedule-free-summary strong {
  color: var(--navy);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.schedule-free-summary .empty-value {
  font-size: 0.72rem;
}

.schedule-free-windows {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.schedule-free-window {
  padding: 3px 9px;
  border-radius: 999px;
  color: #2f7a33;
  background: rgba(78, 166, 83, 0.16);
  font-size: 0.72rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* Matching students table -------------------------------------------------- */

/* Seven day columns on top of the student details, so the table scrolls
   sideways rather than crushing the day columns. */
.schedule-check-table th,
.schedule-check-table td {
  vertical-align: top;
  white-space: nowrap;
}

/* One chip per school block, stacked: the cells cannot wrap, so laying them
   out inline would push the table far wider than the screen. */
.schedule-check-slot {
  display: block;
  width: fit-content;
  margin-bottom: 3px;
  padding: 2px 8px;
  border-radius: 7px;
  color: var(--navy);
  background: rgba(34, 63, 107, 0.08);
  font-size: 0.68rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.65;
}

.schedule-check-table .table-cell-detail {
  display: block;
  color: var(--muted);
  font-size: 0.65rem;
  font-weight: 700;
}

@media (max-width: 900px) {
  .schedule-filter-note {
    display: none;
  }
}

@media (max-width: 720px) {
  .filter-checklist-box {
    min-height: 120px;
    max-height: 182px;
  }

  .schedule-check-actions .primary-action,
  .schedule-check-actions .secondary-action {
    flex: 1 1 auto;
  }
}

/*
 * A row, a cell or a column that belongs to one language only. Reading in
 * Arabic should mean Arabic throughout, not Arabic beside its English source,
 * so each half is marked and the other is put away. The engine sets is-arabic
 * on the body, so this follows the language without any script of its own.
 */
body.is-arabic [data-lang="en"],
body:not(.is-arabic) [data-lang="ar"] {
  display: none;
}

/*
 * The overview scanning station and the card a scan produces.
 *
 * The card is read at arm's length, often on a phone held in one hand while the
 * student is standing there, so it favours large status words and short rows
 * over a dense table.
 */
.scan-station {
  display: grid;
  gap: 20px;
  margin-bottom: 26px;
}

.scan-station-cta {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 34px 22px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--paper);
  box-shadow: 0 16px 36px rgba(20, 42, 73, 0.06);
  text-align: center;
}

.scan-station-button {
  min-height: 54px;
  padding-inline: 30px;
  font-size: 1.02rem;
}

.scan-station-hint,
.scan-station-empty {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.6;
}

.scan-station-empty {
  padding: 26px 22px;
  border: 1px dashed var(--line);
  border-radius: 20px;
  text-align: center;
}

.scan-dossier {
  display: grid;
  gap: 16px;
}

.dossier-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--paper);
}

.dossier-photo {
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
}

.dossier-identity {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.dossier-identity strong {
  color: var(--navy);
  font-family: var(--display);
  font-size: 1.25rem;
  letter-spacing: -0.03em;
}

.dossier-name-ar {
  color: var(--ink);
  font-size: 0.95rem;
}

.dossier-meta {
  color: var(--muted);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/*
 * The day's headline. Its colour carries the answer on its own, but the status
 * word is always spelled out beside it - colour alone is not a label.
 */
.dossier-daily {
  display: grid;
  gap: 3px;
  padding: 18px;
  border: 1px solid var(--line);
  /* Logical, so the accent stays on the leading edge in Arabic too. */
  border-inline-start: 5px solid var(--muted);
  border-radius: 18px;
  background: var(--paper);
}

/* Arrive / check out straight from the scanned card. */
.dossier-daily .dossier-action {
  justify-self: start;
  margin-top: 12px;
}

.dossier-action-error {
  margin: 8px 0 0;
  color: #a30e4e;
  font-size: 0.78rem;
  font-weight: 700;
}

.dossier-not-arrived {
  margin-top: 14px;
}

.dossier-daily strong {
  color: var(--navy);
  font-family: var(--display);
  font-size: 1.4rem;
  letter-spacing: -0.03em;
  text-transform: capitalize;
}

.dossier-daily span {
  color: var(--muted);
  font-size: 0.85rem;
}

.dossier-daily-note {
  margin: 6px 0 0;
  color: var(--ink);
  font-size: 0.88rem;
  line-height: 1.55;
}

.dossier-daily.status-present { border-inline-start-color: var(--green); }
.dossier-daily.status-late,
.dossier-daily.status-left_early { border-inline-start-color: var(--orange); }
.dossier-daily.status-absent { border-inline-start-color: var(--pink); }
.dossier-daily.status-excused { border-inline-start-color: var(--navy); }
.dossier-daily.status-unmarked { border-inline-start-color: var(--line); }

/* Shown when the scanned student cannot be checked in today, with the reasons. */
.dossier-standing {
  display: grid;
  gap: 6px;
  padding: 16px 18px;
  border: 1px solid var(--pink);
  border-inline-start: 5px solid var(--pink);
  border-radius: 18px;
  background: var(--paper);
}

.dossier-standing strong {
  color: var(--pink);
  font-family: var(--display);
  font-size: 1.2rem;
}

.dossier-standing-reasons {
  margin: 0;
  padding-inline-start: 18px;
  color: var(--ink);
  font-size: 0.9rem;
  line-height: 1.55;
}

.dossier-section {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--paper);
}

.dossier-section.has-warnings {
  border-color: rgba(229, 28, 111, 0.4);
  background: rgba(229, 28, 111, 0.04);
}

.dossier-section-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 12px;
  color: var(--navy);
  font-family: var(--display);
  font-size: 1.1rem;
  letter-spacing: -0.02em;
}

.dossier-count {
  min-width: 24px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--soft);
  color: var(--muted);
  font-family: var(--body);
  font-size: 0.76rem;
  font-weight: 700;
  text-align: center;
}

.dossier-tally {
  margin: -4px 0 12px;
  color: var(--muted);
  font-size: 0.82rem;
}

.dossier-empty {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.dossier-list,
.dossier-notes {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dossier-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 14px;
}

.dossier-row-main {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.dossier-row-main strong {
  color: var(--ink);
  font-size: 0.95rem;
}

.dossier-row-sub {
  color: var(--muted);
  font-size: 0.78rem;
}

.dossier-pill {
  flex: 0 0 auto;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: capitalize;
}

.pill-attended {
  background: rgba(79, 187, 55, 0.16);
  color: #2f7a20;
}

.pill-missed {
  background: rgba(229, 28, 111, 0.14);
  color: #b01355;
}

/* No session row at all: an open question, not a verdict either way. */
.pill-not_recorded {
  background: var(--soft);
  color: var(--muted);
}

.dossier-notes li {
  padding: 12px 13px;
  border: 1px solid var(--line);
  border-radius: 14px;
}

.dossier-notes li strong {
  color: var(--navy);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
}

.dossier-notes li p {
  margin: 5px 0 0;
  color: var(--ink);
  font-size: 0.92rem;
  line-height: 1.55;
}

.dossier-warnings li {
  border-color: rgba(229, 28, 111, 0.32);
  background: var(--paper);
}

.dossier-warnings li strong {
  color: var(--pink);
  text-transform: capitalize;
}

@media (max-width: 820px) {
  .scan-station-cta {
    padding: 26px 16px;
  }

  .scan-station-button {
    width: 100%;
  }

  /* At phone width the pill drops under the subject rather than squeezing it. */
  .dossier-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }
}

/*
 * Fragments that used to be one joined string are separate nodes now, so the
 * translator can reach each one. The separator moves into CSS rather than into
 * the text, which keeps it out of the dictionary lookup entirely.
 */
.dossier-meta,
.dossier-tally,
.dossier-warnings li strong,
.dossier-warnings li .dossier-row-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 7px;
}

.dossier-meta > span + span::before,
.dossier-warnings li strong > span + span::before,
.dossier-warnings li .dossier-row-sub > span + span::before {
  margin-inline-end: 7px;
  color: var(--line);
  content: "\00b7";
}

.dossier-tally-part {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}

.dossier-tally-part + .dossier-tally-part::before {
  margin-inline-end: 3px;
  color: var(--line);
  content: "\00b7";
}

.dossier-tally-part b {
  color: var(--navy);
  font-size: 0.95rem;
}

.dossier-notes li strong {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 7px;
}

.dossier-notes li strong > span + span::before {
  margin-inline-end: 7px;
  color: var(--line);
  content: "\00b7";
}

/*
 * Reading a code out of a picture is not a fallback on this deployment - over
 * plain HTTP it is the only route a browser allows - so the drop target is
 * given a visible edge rather than being left as a bare button.
 */
.qr-scan-upload {
  display: grid;
  /* The earlier flex rule's flex-end would push the grid column to the right. */
  justify-content: center;
  justify-items: center;
  gap: 8px;
  padding: 14px;
  border: 1px dashed var(--line);
  border-radius: 16px;
  text-align: center;
}

.qr-scan-drop-hint {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.5;
}

.qr-scan-modal.is-dropping .qr-scan-upload {
  border-color: var(--orange);
  border-style: solid;
  background: rgba(244, 159, 15, 0.08);
}

/* The whole dialog accepts the drop, so the whole dialog acknowledges it. */
.qr-scan-modal.is-dropping .qr-scan-dialog {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

/* ── Copy from a sibling ─────────────────────────────────────────────────── */

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

/* A button that reads as a sentence, for an aside inside body text. */
.link-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--navy);
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  text-decoration: underline;
}

/* Says why there is no Add button: the one record is already there. */
.linked-single-note {
  margin: 0;
  padding: 9px 13px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: var(--soft);
  color: var(--muted);
  font-size: 0.76rem;
}

.sibling-copy-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  padding: 12px 14px;
  border: 1px dashed var(--line);
  border-radius: 14px;
  background: var(--soft);
}

.sibling-copy-bar .secondary-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.sibling-copy-bar small {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.5;
}

/*
 * A field the picker filled, marked for a moment so it is obvious what changed
 * on a form this long - and which boxes are still the admin's to fill in.
 */
.admin-field input.is-copied,
.admin-field select.is-copied,
.admin-field textarea.is-copied {
  border-color: var(--orange);
  background: rgba(244, 159, 15, 0.07);
}

.sibling-parent-note {
  margin: 12px 0 0;
  padding: 11px 13px;
  border-radius: 12px;
  background: rgba(34, 63, 107, 0.06);
  color: var(--navy);
  font-size: 0.78rem;
  line-height: 1.6;
}

.sibling-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 24px;
}

.sibling-modal[hidden] {
  display: none;
}

.sibling-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: rgba(11, 28, 52, 0.62);
  backdrop-filter: blur(5px);
  cursor: pointer;
}

.sibling-dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: min(560px, 100%);
  max-height: calc(100svh - 48px);
  padding: 24px;
  border-radius: 22px;
  background: var(--paper);
  box-shadow: 0 40px 90px rgba(10, 27, 51, 0.4);
}

.sibling-dialog header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.sibling-dialog header strong {
  color: var(--navy);
  font-family: var(--display);
  font-size: 1.15rem;
}

.sibling-dialog header p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.55;
}

.sibling-search input {
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  font: inherit;
}

.sibling-search input:focus-visible {
  border-color: var(--navy);
  outline: none;
}

.sibling-results {
  display: grid;
  gap: 6px;
  overflow-y: auto;
  min-height: 120px;
}

/* One row per student: the name leads, the context follows. */
.sibling-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  cursor: pointer;
  text-align: start;
}

.sibling-row:hover,
.sibling-row:focus-visible {
  outline: none;
  border-color: var(--orange);
  background: rgba(244, 159, 15, 0.07);
}

.sibling-row-main {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.sibling-row-main strong {
  color: var(--navy);
  font-size: 0.86rem;
}

.sibling-row-main small {
  color: var(--muted);
  font-size: 0.72rem;
}

.sibling-row-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
}

.sibling-row-meta i {
  color: var(--muted);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 700;
}

/* Says the family already has a login, so picking this one joins it. */
.sibling-has-parent {
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(34, 63, 107, 0.1);
  color: var(--navy);
  font-size: 0.64rem;
  font-style: normal;
  font-weight: 800;
}

.sibling-empty {
  margin: 0;
  padding: 18px 4px;
  color: var(--muted);
  font-size: 0.8rem;
  text-align: center;
}

.sibling-empty.is-error {
  color: #C2334D;
  font-weight: 700;
}

@media (max-width: 560px) {
  .sibling-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }
}


/* ── Parent agreement ────────────────────────────────────────────────────── */

/*
 * The dialog a parent meets before the portal opens, and the shell it sits over.
 *
 * The backdrop is the portal with nothing in it - it says where you are without
 * being a way in. It carries no records, so the block does not rely on the
 * dialog staying put; closing it would reveal an empty page.
 */
.agreement-page {
  min-height: 100vh;
  overflow: hidden;
  background: var(--soft);
}

.agreement-backdrop {
  position: fixed;
  inset: 0;
  display: flex;
  pointer-events: none;
  user-select: none;
  filter: blur(2px);
  opacity: 0.55;
}

.agreement-backdrop-stage {
  flex: 1;
  background: var(--soft);
}

.agreement-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 24px 18px;
  background: rgba(11, 28, 52, 0.66);
  backdrop-filter: blur(4px);
  overflow-y: auto;
}

/* Kept for the preview page, which is a page rather than a dialog. */
.agreement-shell {
  display: grid;
  gap: 14px;
  justify-items: center;
  padding: 32px 20px 48px;
}

.agreement-card {
  width: min(760px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: 34px;
  border-radius: 24px;
  background: var(--paper);
  box-shadow: 0 40px 90px rgba(6, 17, 34, 0.45);
}

/* Says plainly that there is no way past it. */
.agreement-note {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 0.74rem;
}

.agreement-head > span {
  color: var(--orange);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.agreement-head h1 {
  margin: 8px 0 0;
  color: var(--navy);
  font-family: var(--display);
  font-size: clamp(1.5rem, 4vw, 2rem);
  line-height: 1.2;
}

.agreement-intro {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.7;
}

/* Which children this acceptance covers, named so there is no doubt. */
.agreement-children {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 20px 0 0;
  padding: 12px 15px;
  border-radius: 14px;
  background: rgba(34, 63, 107, 0.06);
  color: var(--muted);
  font-size: 0.8rem;
}

.agreement-children strong {
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--navy);
  color: var(--paper);
  font-size: 0.78rem;
}

/*
 * The document itself scrolls inside the card rather than the page, so the
 * accept button stays in view and a parent can always see what they are
 * agreeing to while they agree to it.
 */
.agreement-body {
  max-height: min(46vh, 460px);
  margin: 22px 0;
  padding: 4px 16px 4px 0;
  overflow-y: auto;
}

/* On the read-it-later screen there is nothing to agree to, so nothing to keep
   in view - the document runs at its natural length. */
.agreement-body.is-open {
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: visible;
}

.agreement-clause + .agreement-clause {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.agreement-clause h2 {
  display: flex;
  gap: 8px;
  margin: 0 0 7px;
  color: var(--navy);
  font-family: var(--display);
  font-size: 1.05rem;
}

.agreement-clause h2 i {
  color: var(--orange);
  font-style: normal;
}

.agreement-clause p {
  margin: 0;
  color: var(--ink);
  font-size: 0.88rem;
  line-height: 1.75;
  white-space: pre-line;
}

.agreement-form {
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.agreement-tick {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  color: var(--navy);
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.6;
  cursor: pointer;
}

.agreement-tick input {
  width: 20px;
  height: 20px;
  margin-top: 1px;
  flex-shrink: 0;
  accent-color: var(--orange);
}

.agreement-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.agreement-foot {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.72rem;
}

/* The only other control on the page: which language to read it in. */
.agreement-language {
  position: fixed;
  top: 18px;
  inset-inline-end: 18px;
}

.agreement-page:has(.agreement-shell) {
  overflow: auto;
  background: var(--navy);
}

.agreement-preview-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 11px 20px;
  background: var(--orange);
  color: var(--navy);
  font-size: 0.78rem;
}

.agreement-preview-banner strong {
  font-weight: 800;
}

/* ── The admin side ──────────────────────────────────────────────────────── */

/* The versions table, listed the way the other sections of Users list theirs. */
.agreement-table-panel {
  margin-bottom: 18px;
}

.agreement-row {
  cursor: pointer;
}

.agreement-row:hover {
  background: var(--soft);
}

/* The version open underneath, marked so the table says where you are. */
.agreement-row.is-open {
  background: rgba(244, 159, 15, 0.09);
  box-shadow: inset 3px 0 0 var(--orange);
}

.agreement-row a {
  color: var(--navy);
  font-weight: 800;
  text-decoration: none;
}

.agreement-row a:hover {
  text-decoration: underline;
}

/* The one being read, lifted off the row. */
.agreement-detail {
  display: grid;
  gap: 18px;
  min-width: 0;
}

/*
 * A version that cannot be edited is shown as the document it is: the two
 * languages beside each other, numbered, with room to read - not a column of
 * greyed-out form fields.
 */
.agreement-read {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: agreement-clause;
}

.agreement-read-clause {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 30px;
  padding: 18px 0 18px 42px;
  border-top: 1px solid var(--line);
  position: relative;
  counter-increment: agreement-clause;
}

.agreement-read-clause:first-child {
  border-top: 0;
  padding-top: 4px;
}

/* The clause number, in the margin where a numbered document keeps it. */
.agreement-read-clause::before {
  content: counter(agreement-clause);
  position: absolute;
  inset-inline-start: 0;
  top: 18px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: rgba(244, 159, 15, 0.14);
  color: #9A6200;
  font-size: 0.78rem;
  font-weight: 800;
}

.agreement-read-clause:first-child::before {
  top: 4px;
}

.agreement-read-side {
  min-width: 0;
}

.agreement-read-side h3 {
  margin: 0 0 6px;
  color: var(--navy);
  font-family: var(--display);
  font-size: 1rem;
}

.agreement-read-side p {
  margin: 0;
  color: var(--ink);
  font-size: 0.86rem;
  line-height: 1.8;
}

.agreement-read-intro {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 30px;
  margin-bottom: 18px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--soft);
}

.agreement-read-intro p {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.7;
}

@media (max-width: 860px) {
  .agreement-read-clause,
  .agreement-read-intro {
    grid-template-columns: 1fr;
  }
}

.agreement-review-note,
.agreement-locked-note {
  margin: 0 0 16px;
  padding: 12px 15px;
  border-radius: 12px;
  font-size: 0.8rem;
  line-height: 1.6;
}

.agreement-review-note {
  background: rgba(244, 159, 15, 0.12);
  color: var(--navy);
}

.agreement-locked-note {
  background: rgba(34, 63, 107, 0.07);
  color: var(--muted);
}

.secondary-action.is-danger {
  border-color: rgba(194, 51, 77, 0.35);
  color: #C2334D;
}

.agreement-decision p {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.7;
}

.agreement-review-form .admin-field {
  max-width: 520px;
  margin-bottom: 14px;
}

@media (max-width: 620px) {
  .agreement-card {
    padding: 22px 18px;
  }

  .agreement-body {
    max-height: none;
    padding-inline-end: 0;
  }
}


/* ── Agreement: update flag, dates, and the signed list ──────────────────── */

/*
 * A changed agreement is the easiest thing in the world to click past, so it
 * says so in the one place a parent is looking: above the title.
 */
.agreement-flag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(244, 159, 15, 0.16);
  color: #9A6200;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.agreement-flag svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.agreement-effective {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
}

.agreement-effective strong {
  color: var(--navy);
  font-weight: 800;
}

/* Created, last edited, published - the history of one version at a glance. */
.agreement-dates {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin: 0 0 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.agreement-dates dt {
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.agreement-dates dd {
  margin: 3px 0 0;
  color: var(--navy);
  font-size: 0.82rem;
  font-weight: 700;
}

.agreement-version-edited {
  display: block;
  color: var(--muted);
  font-size: 0.66rem;
}

.agreement-decision-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Agreed / not yet agreed, on the signed list. */
.status-accepted {
  background: rgba(46, 138, 92, 0.14);
  color: #2E8A5C;
}

.status-waiting {
  background: rgba(244, 159, 15, 0.16);
  color: #9A6200;
}

/* Some children covered, some not - neither of the other two answers. */
.status-partly {
  display: inline-flex;
  gap: 5px;
  background: rgba(34, 63, 107, 0.12);
  color: var(--navy);
}

/* ── Agreement editor: one language per column, all clauses on one form ──── */

/*
 * Grouped by language, not by field: reading down a column is reading the
 * agreement in one language, which is how it reaches a family. The Arabic
 * column carries dir="rtl" on the markup, so its labels and text align on the
 * side they belong to without anything here flipping them.
 */
.agreement-bilingual {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.agreement-lang {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--soft);
}

.agreement-lang h4 {
  margin: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  color: var(--navy);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.agreement-lang .admin-field input,
.agreement-lang .admin-field textarea {
  background: var(--paper);
}

.agreement-effective-field {
  max-width: 560px;
  margin-top: 16px;
}

.agreement-clause-list {
  display: grid;
  gap: 14px;
}

/* One clause, numbered, with its own way out. */
.agreement-clause-card {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
}

.agreement-clause-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.agreement-clause-card > header strong {
  color: var(--navy);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.link-button.is-danger {
  color: #C2334D;
  font-size: 0.75rem;
}

.agreement-clause-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.agreement-add-clause {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-style: dashed;
}

.agreement-add-clause svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
}

@media (max-width: 860px) {
  .agreement-bilingual {
    grid-template-columns: 1fr;
  }
}

/* ── Teacher of the month (homepage studio) ─────────────────────────────── */
.studio-month-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 22px;
  padding: 22px;
  border: 1px solid rgba(244, 159, 15, 0.35);
  border-radius: 18px;
  background: linear-gradient(135deg, #fffaf0, var(--paper) 60%);
  box-shadow: 0 10px 30px rgba(244, 159, 15, 0.08);
}

.studio-month-form {
  display: grid;
  gap: 16px;
  align-content: start;
}

.studio-month-fields {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px;
}

.studio-month-fields .studio-date-field {
  flex: 1 1 180px;
}

.studio-date-field select {
  padding: 10px 12px;
  color: var(--navy);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
}

.studio-date-field select:focus {
  border-color: var(--orange);
  outline: none;
}

.studio-month-warning {
  margin-top: 8px !important;
  color: #a35a00 !important;
  font-weight: 700;
}

.studio-month-schedule h4 {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 0.63rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.studio-month-schedule ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.studio-month-schedule li {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
}

.studio-month-schedule li.is-current {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(244, 159, 15, 0.12);
}

.studio-month-when {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 800;
}

.studio-month-when b {
  display: inline-block;
  margin-inline-start: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  color: var(--navy-deep);
  background: #ffd166;
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.studio-month-who {
  display: grid;
  min-width: 0;
}

.studio-month-who strong {
  overflow: hidden;
  color: var(--navy);
  font-size: 0.85rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-month-who small {
  color: #a35a00;
  font-size: 0.68rem;
}

.studio-month-actions {
  display: flex;
  gap: 6px;
}

.studio-month-actions form {
  margin: 0;
}

.studio-month-actions .secondary-action {
  padding: 6px 12px;
  font-size: 0.72rem;
}

.studio-month-empty {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
}

.studio-month-tag {
  color: #a35a00 !important;
  font-weight: 800;
}

@media (max-width: 900px) {
  .studio-month-panel {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .studio-month-schedule li {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Attendance table filtered to the record a scan just saved. */
.scan-filter-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  padding: 10px 14px;
  border: 1px solid rgba(79, 187, 55, 0.35);
  border-radius: 12px;
  background: rgba(79, 187, 55, 0.08);
  color: #2f7d22;
  font-size: 0.8rem;
  font-weight: 700;
}

.scan-filter-note a {
  color: var(--navy);
  text-decoration: underline;
}

/*
 * The notification drawer (admin and manager; roles in notification_drawer_roles()). The bell's list becomes a
 * full-height panel at the trailing edge of the screen with the page dimmed
 * behind it: filters by kind, Today / Yesterday groups, an icon per kind.
 * Only [data-notif-style="drawer"] panels are touched, so a portal joins by
 * having its role added in notification_drawer_roles() and these rules loaded.
 */
html.notif-is-open body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 69;
  background: rgba(11, 28, 52, 0.38);
  animation: notif-fade 0.2s ease;
}

html.notif-is-open,
html.notif-is-open body {
  overflow: hidden;
  overscroll-behavior: none;
}

/* Scrolling the drawer's own list never carries on into the page behind it. */
.notif-panel[data-notif-style="drawer"],
.notif-panel[data-notif-style="drawer"] * {
  overscroll-behavior: contain;
}

/* Nothing behind an open drawer or phone menu takes a press. */
html.notif-is-open .admin-content,
html.notif-is-open .admin-sidebar,
html.is-mobile-nav-open .admin-content {
  pointer-events: none;
}

/* The drawer's palette: the same tokens the new admin design uses. */
.notif-panel[data-notif-style="drawer"] {
  --v2-navy: #223f6b;
  --v2-navy-dark: #142a49;
  --v2-ink: #152238;
  --v2-text: #3d4a5c;
  --v2-muted: #5b6a80;
  --v2-line: #e1e7ef;
  --v2-line-soft: #edf1f6;
  --v2-soft: #f4f7fb;
  --v2-green: #2f7d22;
  --v2-green-bg: #e9f6e5;
  --v2-orange: #8a5300;
  --v2-orange-bg: #fff4e0;
  --v2-pink: #b0124f;
  --v2-pink-bg: #fde7f0;
  --v2-grey: #3d4a5c;
  --v2-grey-bg: #eef0f3;
  --v2-radius: 20px;
}

.notif-panel[data-notif-style="drawer"] {
  top: 0;
  bottom: 0;
  left: auto;
  right: 0;
  transform: none;
  width: min(440px, 100vw);
  max-height: none;
  border-radius: 22px 0 0 22px;
  box-shadow: -24px 0 64px rgba(11, 28, 52, 0.28);
  animation: notif-slide 0.24s ease;
}

[dir="rtl"] .notif-panel[data-notif-style="drawer"] {
  left: 0;
  right: auto;
  border-radius: 0 22px 22px 0;
  animation-name: notif-slide-rtl;
}

@keyframes notif-fade { from { opacity: 0; } }
@keyframes notif-slide { from { transform: translateX(40px); opacity: 0; } }
@keyframes notif-slide-rtl { from { transform: translateX(-40px); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  html.notif-is-open body::after,
  .notif-panel[data-notif-style="drawer"] {
    animation: none;
  }
}

/* Two lines: the title, its count and the close button; then the two actions. */
[data-notif-style="drawer"] .notif-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "title count close"
    "read clear clear";
  align-items: center;
  gap: 10px 12px;
  padding: 22px 22px 12px;
  border-bottom: 0;
}

[data-notif-style="drawer"] .notif-head > strong {
  grid-area: title;
  color: var(--v2-ink);
  font-size: 1.35rem;
  font-weight: 800;
}

[data-notif-style="drawer"] .notif-head-count { grid-area: count; justify-self: start; }
[data-notif-style="drawer"] .notif-close { grid-area: close; }
[data-notif-style="drawer"] .notif-head form:first-of-type { grid-area: read; }
[data-notif-style="drawer"] .notif-head form:nth-of-type(2) { grid-area: clear; justify-self: start; }

.notif-head-count {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--v2-pink-bg);
  color: var(--v2-pink);
  font-size: 0.75rem;
  font-weight: 800;
}

[data-notif-style="drawer"] .notif-clear {
  padding: 6px 10px;
  border-radius: 8px;
  color: var(--v2-navy);
  font-size: 0.78rem;
}

[data-notif-style="drawer"] .notif-clear:hover {
  background: var(--v2-soft);
}

[data-notif-style="drawer"] .notif-close {
  width: 34px;
  height: 34px;
  border-radius: 10px;
}

/* Filters: one chip per kind that is actually in the list, with its count. */
.notif-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 22px 14px;
  border-bottom: 1px solid var(--v2-line);
}

.notif-chip {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--v2-line);
  border-radius: 999px;
  background: #fff;
  color: var(--v2-text);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}

.notif-chip b {
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--v2-soft);
  color: var(--v2-muted);
  font-size: 0.7rem;
  text-align: center;
}

.notif-chip.is-on {
  border-color: var(--v2-navy);
  background: var(--v2-navy);
  color: #fff;
}

.notif-chip.is-on b {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

[data-notif-style="drawer"] .notif-list {
  flex: 1;
  padding: 4px 12px 24px;
}

.notif-day {
  position: sticky;
  top: 0;
  z-index: 1;
  margin: 0;
  padding: 14px 10px 6px;
  background: #fff;
  color: var(--v2-muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* One line: icon, text, unread dot; the × appears on hover. */
[data-notif-style="drawer"] .notif-row {
  position: relative;
  margin: 2px 0;
  border: 0;
  border-radius: 14px;
  box-shadow: none;
}

[data-notif-style="drawer"] .notif-row.is-unread {
  background: #f4f7ff;
  box-shadow: none;
}

[data-notif-style="drawer"] .notif-row:hover {
  background: var(--v2-soft);
}

[data-notif-style="drawer"] .notif-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 10px;
}

.notif-icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--v2-grey-bg);
  color: var(--v2-grey);
}

.notif-icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.notif-kind-warnings .notif-icon { background: var(--v2-pink-bg); color: var(--v2-pink); }
.notif-kind-absences .notif-icon { background: var(--v2-orange-bg); color: var(--v2-orange); }
.notif-kind-payments .notif-icon { background: var(--v2-green-bg); color: var(--v2-green); }
.notif-kind-attendance .notif-icon { background: #e8eef8; color: var(--v2-navy); }

.notif-text {
  display: grid;
  flex: 1;
  gap: 3px;
  min-width: 0;
}

[data-notif-style="drawer"] .notif-item strong {
  color: var(--v2-ink);
  font-size: 0.9rem;
  line-height: 1.35;
}

[data-notif-style="drawer"] .notif-text > span {
  margin: 0;
  color: var(--v2-text);
  font-size: 0.84rem;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

[data-notif-style="drawer"] .notif-item small {
  margin-top: 2px;
  color: var(--v2-muted);
  font-size: 0.74rem;
  font-weight: 600;
}

.notif-dot {
  flex: none;
  width: 9px;
  height: 9px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--v2-pink);
}

[data-notif-style="drawer"] .notif-delete {
  position: absolute;
  top: 8px;
  inset-inline-end: 6px;
  padding: 0;
}

[data-notif-style="drawer"] .notif-row:hover .notif-dot {
  visibility: hidden;
}

.notif-empty-state {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 64px 20px;
  color: var(--v2-muted);
  text-align: center;
}

.notif-empty-state svg {
  width: 44px;
  height: 44px;
  padding: 12px;
  border-radius: 50%;
  background: var(--v2-soft);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  box-sizing: content-box;
}

/* A phone: the whole screen, square corners. */
@media (max-width: 560px) {
  .notif-panel[data-notif-style="drawer"],
  [dir="rtl"] .notif-panel[data-notif-style="drawer"] {
    width: 100vw;
    border-radius: 0;
  }
}

/*
 * The bell and the language in the top-right corner (admin and manager pages).
 * On a phone the top bar already carries them; on a desktop it was hidden and
 * they sat at the foot of the sidebar, crowded against each other. Here the
 * same bar is shown on a desktop too, as a slim row with only those two.
 */
@media (min-width: 821px) {
  .portal-topbar.is-corner {
    position: sticky;
    top: 0;
    z-index: 25;
    display: flex;
    justify-content: flex-end;
    min-height: 0;
    padding: 18px 32px 0;
    background: transparent;
    box-shadow: none;
    pointer-events: none;
  }

  .portal-topbar.is-corner .portal-topbar-brand,
  .portal-topbar.is-corner .mobile-panel-toggle {
    display: none;
  }

  .portal-topbar.is-corner .portal-topbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px;
    border: 1px solid #e1e7ef;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 8px 24px rgba(14, 34, 60, 0.08);
    backdrop-filter: blur(12px);
    pointer-events: auto;
  }

  .portal-topbar.is-corner .portal-bell,
  .portal-topbar.is-corner .portal-language {
    min-height: 38px;
    border-color: transparent;
    background: #f4f7fb;
    color: #223f6b;
  }

  .portal-topbar.is-corner .portal-bell:hover,
  .portal-topbar.is-corner .portal-language:hover {
    background: #e8eef8;
    color: #142a49;
  }

  /* The bar takes the page's first strip; the content starts just under the pill, never beside it. */
  .portal-topbar.is-corner ~ .admin-content {
    margin-top: -14px;
  }
}

/* Log out, alone at the foot of the panel - also when it is folded to a rail, and on a phone. */
.corner-footer,
.admin-shell.is-sidebar-collapsed .corner-footer {
  display: flex;
}

.corner-logout {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.72);
  font-weight: 700;
  text-decoration: none;
}

.corner-logout:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.corner-logout svg {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.admin-shell.is-sidebar-collapsed .corner-logout {
  justify-content: center;
  padding: 0;
}

.admin-shell.is-sidebar-collapsed .corner-logout span {
  display: none;
}

@media (max-width: 820px) {
  .corner-footer,
  .admin-shell.is-sidebar-collapsed .corner-footer {
    display: flex;
  }

  .admin-shell.is-sidebar-collapsed .corner-logout {
    justify-content: flex-start;
    padding: 0 14px;
  }

  .admin-shell.is-sidebar-collapsed .corner-logout span {
    display: inline;
  }
}

/*
 * Bell and language docked in the page header (admin.js moves them there on a
 * desktop). The corner row above the page then stands down, so the header -
 * title on one side, its buttons and these two on the other - is the first
 * line. :has() hides the row before the script has run, so nothing jumps.
 */
@media (min-width: 821px) {
  html.corner-docked .portal-topbar.is-corner,
  body:has(main .v2-head, main .v2-profile, main .content-heading) .portal-topbar.is-corner {
    display: none;
  }

  html.corner-docked .portal-topbar.is-corner ~ .admin-content,
  body:has(main .v2-head, main .v2-profile, main .content-heading) .portal-topbar.is-corner ~ .admin-content {
    margin-top: 0;
  }
}

.corner-controls {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  padding: 4px;
  border: 1px solid #e1e7ef;
  border-radius: 999px;
  background: #fff;
}

.corner-controls .portal-bell,
.corner-controls .portal-language {
  min-height: 36px;
  border-color: transparent;
  background: #f4f7fb;
  color: #223f6b;
}

.corner-controls .portal-bell:hover,
.corner-controls .portal-language:hover {
  border-color: transparent;
  background: #e8eef8;
  color: #142a49;
}

/* A header with no buttons of its own gets a row just for these two, at the far side. */
.corner-row {
  margin-inline-start: auto;
}

/*
 * The icon box in a drawer notification. The older ".notif-item span" rule
 * (block, with a top margin, for the text lines) also matched this span and
 * pushed the drawing to the top-left of its square; this puts it back in the
 * exact middle.
 */
[data-notif-style="drawer"] .notif-item .notif-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  line-height: 0;
}

[data-notif-style="drawer"] .notif-item .notif-icon svg {
  display: block;
}

/* The text column keeps its own spacing, without the older per-line margin. */
[data-notif-style="drawer"] .notif-item .notif-text {
  display: grid;
  margin: 0;
}

/*
 * Log out on a phone: the last numbered row of the menu (09...), the same size
 * as the links above it, in place of the small one at the foot of the panel.
 * On a desktop that row is hidden and the foot keeps Log out.
 */
.nav-phone-logout {
  display: none !important;
}

@media (max-width: 820px) {
  .nav-group a.nav-phone-logout {
    display: flex !important;
  }

  .corner-footer,
  .admin-shell.is-sidebar-collapsed .corner-footer {
    display: none !important;
  }
}

/*
 * The notification drawer in the menu's clothes: the same deep navy with the
 * pink and green glows the phone menu opens on, white type, small orange
 * figures counting the rows off (01, 02...) and thin lines between them.
 */
.notif-panel[data-notif-style="drawer"] {
  color: #fff;
  background:
    radial-gradient(circle at 85% 12%, rgba(229, 28, 111, 0.3), transparent 32%),
    radial-gradient(circle at 10% 92%, rgba(79, 187, 55, 0.2), transparent 32%),
    var(--navy-deep, #0b1c34);
  box-shadow: -24px 0 64px rgba(0, 0, 0, 0.45);
}

[data-notif-style="drawer"] .notif-head > strong {
  color: #fff;
  font-family: var(--display);
  font-size: 1.9rem;
  letter-spacing: -0.02em;
}

[data-notif-style="drawer"] .notif-head-count {
  background: var(--orange);
  color: var(--navy-deep, #0b1c34);
}

[data-notif-style="drawer"] .notif-clear {
  padding: 6px 0;
  color: rgba(255, 255, 255, 0.7);
  background: none;
}

[data-notif-style="drawer"] .notif-clear:hover {
  color: #fff;
  background: none;
}

[data-notif-style="drawer"] .notif-clear.is-danger:hover {
  color: #ff8fb4;
}

[data-notif-style="drawer"] .notif-close {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

/* Filters: outlined pills on the dark ground, the chosen one in orange. */
[data-notif-style="drawer"] .notif-filters {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

[data-notif-style="drawer"] .notif-chip {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.82);
}

[data-notif-style="drawer"] .notif-chip b {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

[data-notif-style="drawer"] .notif-chip.is-on {
  border-color: var(--orange);
  background: var(--orange);
  color: var(--navy-deep, #0b1c34);
}

[data-notif-style="drawer"] .notif-chip.is-on b {
  background: rgba(11, 28, 52, 0.18);
  color: var(--navy-deep, #0b1c34);
}

/* The list: rows counted off like the menu's links, a line between each. */
[data-notif-style="drawer"] .notif-list {
  padding: 6px 22px 28px;
  counter-reset: notif-row;
}

[data-notif-style="drawer"] .notif-day {
  padding: 18px 0 8px;
  background: transparent;
  color: var(--orange);
  letter-spacing: 0.15em;
}

[data-notif-style="drawer"] .notif-row,
[data-notif-style="drawer"] .notif-row.is-unread,
[data-notif-style="drawer"] .notif-row:hover {
  margin: 0;
  border-radius: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: transparent;
  counter-increment: notif-row;
}

[data-notif-style="drawer"] .notif-row:hover .notif-item {
  background: rgba(255, 255, 255, 0.04);
}

[data-notif-style="drawer"] .notif-item {
  gap: 14px;
  padding: 16px 0;
}

/* The small orange figure in front of each row, as in the menu (01, 02...). */
[data-notif-style="drawer"] .notif-item::before {
  content: counter(notif-row, decimal-leading-zero);
  flex: none;
  width: 18px;
  padding-top: 12px;
  color: var(--orange);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.15em;
}

[data-notif-style="drawer"] .notif-icon {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.notif-kind-warnings[class] .notif-icon { color: #ff8fb4; }
.notif-kind-absences[class] .notif-icon { color: #ffc56b; }
.notif-kind-payments[class] .notif-icon { color: #8fe07a; }
.notif-kind-attendance[class] .notif-icon { color: #9ec3ff; }

[data-notif-style="drawer"] .notif-panel .notif-icon,
[data-notif-style="drawer"] .notif-row .notif-icon {
  background: rgba(255, 255, 255, 0.1);
}

[data-notif-style="drawer"] .notif-item strong {
  color: #fff;
  font-family: var(--display);
  font-size: 1.05rem;
}

[data-notif-style="drawer"] .notif-text > span {
  color: rgba(255, 255, 255, 0.72);
}

[data-notif-style="drawer"] .notif-item small {
  color: rgba(255, 255, 255, 0.5);
}

/* Unread: the title stays bright and an orange dot marks it. */
[data-notif-style="drawer"] .notif-row:not(.is-unread) .notif-item strong {
  color: rgba(255, 255, 255, 0.78);
}

[data-notif-style="drawer"] .notif-dot {
  background: var(--orange);
  box-shadow: 0 0 0 4px rgba(244, 159, 15, 0.18);
}

[data-notif-style="drawer"] .notif-delete button {
  color: rgba(255, 255, 255, 0.6);
}

[data-notif-style="drawer"] .notif-delete button:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

[data-notif-style="drawer"] .notif-empty-state {
  color: rgba(255, 255, 255, 0.7);
}

[data-notif-style="drawer"] .notif-empty-state svg {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}