/* Jusoor (جسور) v1.0.2 — RTL Arabic UI in the design language of Raqeeb, Ameen and Resalah.
   Colours: the 12 header families (HDR) of the unified system; panel head = family × 0.70, band = × 0.85.
   Sizes in rem so the layout scales with the root font size (15px on phones, up to 26px on 4K). */
:root {
  --brand: #0f3460;
  --brand-ctl: #0b2443;   /* controls on the brand bar: brand × 0.70 */
  --brand-nav: #0c294b;   /* bottom bar: brand × 0.80 */
  --brand-edge: #081d35;  /* outer ring: brand × 0.55 */
  --brand-line: #b9c6d6;
  --on-dark-muted: #c9d3e3;
  --canvas: #f1f3f6;
  --card: #ffffff;
  --ink: #1a202c;
  --muted: #4a5568;
  --line: #dde3ec;
  --ok: #1b7842;
  --bad: #c0392b;
  --warn: #9c5617;
  --badge: #9c5617;
  --f: #0f3460;
  --f-head: #0b2443;
  --f-band: #0d2c52;
  --f-deep: #081a30;
  --f-tint: #f3f5f8;
  --f-tint2: #e6ebf1;
  --f-line: #b7c2d0;
  --nav-h: 4.7rem;
}

* { box-sizing: border-box; }
html { font-size: clamp(15px, 0.35vw + 12px, 26px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: system-ui, -apple-system, "SF Arabic", "Segoe UI", "Noto Sans Arabic", Tahoma, Arial, sans-serif;
  direction: rtl;
  line-height: 1.6;
  -webkit-tap-highlight-color: transparent;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { -webkit-appearance: none; appearance: none; }
.ic { display: inline-flex; align-items: center; justify-content: center; line-height: 0; flex: none; }
.ic svg { width: 1.3em; height: 1.3em; }
.num { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; white-space: nowrap; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); }
.bad { color: var(--bad); }

/* ---- Top bar: rounded brand bar, white brand tile, ring controls ---- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  padding: calc(env(safe-area-inset-top, 0px) + 0.6rem) 0.8rem 0.4rem;
  background: var(--canvas);
}
.topbar-inner {
  display: flex; align-items: center; gap: 0.6rem;
  min-height: 4.3rem; padding: 0.55rem 0.7rem;
  background: var(--brand); color: #fff;
  border: 2px solid var(--brand-edge); border-radius: 1.5rem;
  box-shadow: 0 0.35rem 1rem rgba(8, 29, 53, 0.18);
}
.brand { display: flex; align-items: center; gap: 0.65rem; min-width: 0; flex: 1; }
.logo { display: inline-flex; width: 2.9rem; height: 2.9rem; border-radius: 0.8rem; background: #fff; color: var(--brand); align-items: center; justify-content: center; flex: none; }
.logo svg { width: 1.75rem; height: 1.75rem; }
.brand-text { min-width: 0; }
.app-name { font-size: 1.3rem; font-weight: 800; line-height: 1.25; }
.school-name { font-size: max(0.93rem, 14px); color: var(--on-dark-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-actions { display: flex; align-items: center; gap: 0.45rem; flex: none; }
.provider-chip {
  display: inline-flex; align-items: center; gap: 0.35rem; flex: none;
  height: 2.5rem; padding: 0 0.85rem; border-radius: 999px;
  background: var(--brand-ctl); color: #fff; border: 2px solid #fff;
  font-size: 0.86rem; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.provider-chip .dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: #f2b705; }
.provider-chip.live .dot { background: #48c78e; }
.ring-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 2.9rem; height: 2.9rem; border-radius: 50%; flex: none;
  background: var(--brand-ctl); color: #fff; border: 2px solid #fff; cursor: pointer;
}
.ring-btn .ic svg { width: 1.45rem; height: 1.45rem; }
.provider-ring .state-dot {
  position: absolute; top: -0.1rem; inset-inline-end: -0.1rem; width: 0.85rem; height: 0.85rem; border-radius: 50%;
  background: #f2b705; border: 2px solid var(--brand);
}
.provider-ring.live .state-dot { background: #48c78e; }
.count-badge {
  position: absolute; top: -0.35rem; inset-inline-end: -0.3rem;
  min-width: 1.45rem; height: 1.45rem; padding: 0 0.3rem; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--badge); color: #fff; border: 2px solid var(--brand); font-size: 0.74rem; font-weight: 800;
}

/* ---- Layout ---- */
.layout { display: block; }
.main { padding: 0.6rem 0.8rem calc(var(--nav-h) + 6.2rem + env(safe-area-inset-bottom, 0px)); }
.main > * + * { margin-top: 0.95rem; }
.screen-title { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin: 0.35rem 0.2rem 0; }
.screen-title h1 { margin: 0; font-size: 1.12rem; font-weight: 800; color: var(--ink); }
.screen-title .sub { font-size: 0.86rem; color: var(--muted); }

/* ---- Bottom bar: rounded brand bar with ring items, white active item ---- */
.nav {
  position: fixed; z-index: 30; inset-inline: 0.8rem; bottom: calc(0.6rem + env(safe-area-inset-bottom, 0px));
  display: grid; grid-template-columns: var(--nav-cols, repeat(var(--nav-count, 5), 1fr)); gap: 0.35rem;
  height: var(--nav-h); padding: 0.42rem;
  background: var(--brand-nav); border: 2px solid var(--brand-edge); border-radius: 1.6rem;
  box-shadow: 0 0.4rem 1.2rem rgba(8, 29, 53, 0.25);
}
.nav-item {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.12rem;
  min-width: 0; border-radius: 1.05rem; border: 2px solid #fff;
  background: var(--brand-ctl); color: #fff; font-size: 0.74rem; font-weight: 700; cursor: pointer; padding: 0.1rem 0.15rem;
}
.nav-item span:last-child { white-space: normal; text-align: center; line-height: 1.12; word-break: normal; overflow-wrap: normal; max-width: 100%; }
.nav-item .ic svg { width: 1.45rem; height: 1.45rem; }
.nav-item.active { background: linear-gradient(180deg, #ffffff 0%, #e4ebf4 100%); color: var(--brand); }

/* ---- Floating action: pill with a white icon tile (Resalah) ---- */
.fab {
  position: fixed; z-index: 29; inset-inline-end: 1.1rem; bottom: calc(var(--nav-h) + 1.35rem + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; gap: 0.6rem;
  height: 3.4rem; padding: 0 0.45rem 0 1.25rem; padding-inline-start: 0.45rem; padding-inline-end: 1.25rem;
  border-radius: 999px; border: 2px solid #fff; background: var(--brand); color: #fff;
  font-size: 1.02rem; font-weight: 800; cursor: pointer;
  box-shadow: 0 0 0 0.3rem rgba(255, 255, 255, 0.85), 0 0.6rem 1.4rem rgba(8, 29, 53, 0.28);
}
.fab .fab-ic { display: inline-flex; width: 2.5rem; height: 2.5rem; border-radius: 0.8rem; background: #fff; color: var(--brand); align-items: center; justify-content: center; }

@media (min-width: 900px) {
  .layout { display: grid; grid-template-columns: 14rem 1fr; gap: 0.6rem; padding: 0 0.8rem; }
  .nav {
    position: sticky; top: 6.2rem; inset-inline: auto; bottom: auto; align-self: start;
    display: flex; flex-direction: column; gap: 0.5rem; height: auto; padding: 0.7rem;
  }
  .nav-item { flex-direction: row; justify-content: flex-start; gap: 0.7rem; padding: 0.65rem 0.9rem; font-size: 1rem; }
  .main { padding: 0.6rem 0 6rem; }
  .fab { bottom: 1.6rem; }
}

/* ---- Panels: head (family × 0.70) → band (× 0.85) → tinted body, ringed in the head colour ---- */
.panel { border-radius: 1.35rem; overflow: hidden; background: var(--f-tint); border: 2px solid var(--f-head); }
.panel-head { display: flex; align-items: center; gap: 0.6rem; min-height: 3.3rem; padding: 0.55rem 1rem; background: var(--f-head); color: #fff; }
.panel-head h2 { margin: 0; font-size: 1.08rem; font-weight: 800; flex: 1; min-width: 0; }
.panel-head .ic svg { width: 1.45rem; height: 1.45rem; }
.panel-sub { font-size: 0.86rem; color: rgba(255, 255, 255, 0.82); white-space: nowrap; }
.panel-band { margin: 0; padding: 0.5rem 1rem; background: var(--f-band); color: #fff; font-size: 0.9rem; }
.panel-body { padding: 0.85rem 1rem; }
.panel.flat .panel-body { padding: 0.7rem; }
.panel-head .btn.link { color: #fff; }
.panel-head .chev { display: inline-flex; color: #fff; }

/* ---- Home: hero stats (Resalah), outlined indicators (Ameen), circle tiles (Raqeeb) ---- */
.stats.hero {
  display: grid; grid-template-columns: repeat(3, 1fr); align-items: center;
  border-radius: 1.4rem; padding: 0.9rem 0.6rem 1rem; background: var(--f); color: #fff;
  box-shadow: 0 0.35rem 1rem rgba(0, 0, 0, 0.08);
}
.hero-title { grid-column: 1 / -1; text-align: center; font-weight: 800; font-size: 1.02rem; margin-bottom: 0.35rem; }
.hero-cell { display: grid; justify-items: center; gap: 0.1rem; padding: 0.2rem 0.3rem; border-inline-start: 1.5px solid rgba(255, 255, 255, 0.45); background: none; border-top: 0; border-bottom: 0; border-inline-end: 0; color: #fff; cursor: pointer; }
.hero-cell:first-of-type { border-inline-start: 0; }
.hero-val { font-size: 1.55rem; font-weight: 800; line-height: 1.2; }
.hero-label { font-size: 0.86rem; text-align: center; }

.indicators { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }
@media (max-width: 340px) { .indicators { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .indicators { max-width: 46rem; } }
.indicator {
  display: grid; grid-template-rows: 3rem auto auto; justify-items: center; align-items: center; gap: 0.3rem; text-align: center;
  min-width: 0; min-height: 7.4rem; padding: 0.6rem 0.25rem 0.55rem; border-radius: 1.15rem;
  border: 2px solid var(--f-line); background: var(--f-tint); color: var(--f); cursor: pointer;
}
.indicator .ind-val { font-size: 1.25rem; font-weight: 800; line-height: 1.2; white-space: nowrap; }
.indicator .ind-val.long { font-size: 0.98rem; }
.ind-ring { position: relative; display: inline-grid; place-items: center; width: 2.95rem; height: 2.95rem; }
.ind-ring .ring { position: absolute; inset: 0; line-height: 0; }
.ind-ring .ring svg { width: 100%; height: 100%; }
.ind-ring .ring-track { stroke: var(--f-line); }
.ind-ring .ring-bar { stroke: var(--f); }
.ind-ring .ring-val { position: relative; font-size: 0.8rem; font-weight: 800; white-space: nowrap; }
.indicator .ind-title { font-size: 0.8rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 0.25rem; line-height: 1.25; }
.indicator .ind-title .ic svg { width: 1rem; height: 1rem; }
.indicator .ind-status { font-size: 0.72rem; display: inline-flex; align-items: center; gap: 0.25rem; color: var(--f); opacity: 0.92; line-height: 1.25; }
.indicator .ind-status::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--dot, var(--ok)); flex: none; }
.indicator.warn { --dot: #b45309; }
.indicator.bad { --dot: var(--bad); }
.indicator.idle { --dot: #94a3b8; }

.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.85rem 0.45rem; padding: 0.15rem 0; }
@media (min-width: 900px) { .tiles { max-width: 46rem; } }
.tile { display: grid; justify-items: center; gap: 0.45rem; border: 0; background: none; cursor: pointer; padding: 0; color: var(--ink); min-width: 0; }
.tile-circle {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 3.55rem; height: 3.55rem; border-radius: 50%; background: var(--f); color: #fff;
  box-shadow: 0 0.3rem 0.75rem rgba(0, 0, 0, 0.14);
}
.tile-circle .ic svg { width: 1.75rem; height: 1.75rem; }
.tile-label { font-size: 0.84rem; font-weight: 600; text-align: center; line-height: 1.3; max-width: 5.3rem; word-break: normal; overflow-wrap: normal; }
.tile-badge {
  position: absolute; top: -0.25rem; inset-inline-end: -0.3rem;
  min-width: 1.55rem; height: 1.55rem; padding: 0 0.3rem; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--f-deep); color: #fff; border: 2px solid #fff; font-size: 0.76rem; font-weight: 800;
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  min-height: 2.95rem; padding: 0.45rem 1.05rem; border-radius: 0.95rem; border: 2px solid transparent;
  background: #fff; cursor: pointer; font-weight: 700; font-size: 0.95rem;
}
.btn.small { min-height: 2.4rem; padding: 0.3rem 0.8rem; font-size: 0.86rem; border-radius: 0.8rem; }
.btn.block { width: 100%; }
.btn.primary { background: var(--brand); color: #fff; border-color: var(--brand); }
.btn.primary:active { background: var(--brand-ctl); }
.btn.ghost { background: #fff; border-color: var(--brand-line); color: var(--brand); }
.btn.danger { background: var(--bad); border-color: var(--bad); color: #fff; }
.btn.danger-ghost { background: #fff; border-color: #e8b4ae; color: var(--bad); }
.btn.link { background: none; border: 0; color: var(--brand); padding: 0.25rem 0.4rem; min-height: 0; text-decoration: underline; }
.link-btn { background: none; border: 0; padding: 0; color: var(--brand); text-decoration: underline; cursor: pointer; font: inherit; }
html[data-contrast='dark'] .link-btn { color: #9ec9ff; }
.btn.on-dark { background: rgba(255, 255, 255, 0.12); color: #fff; border-color: #fff; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.icon-btn { border: 0; background: none; padding: 0.5rem; border-radius: 0.7rem; cursor: pointer; color: var(--muted); }
.row { display: flex; align-items: center; gap: 0.6rem; }
.row.wrap { flex-wrap: wrap; }
.row.end { justify-content: flex-end; }
.row + .row, .form .row { margin-top: 0.8rem; }

/* ---- Forms (no resize handles anywhere) ---- */
.form { display: grid; gap: 0.8rem; }
.field { display: grid; gap: 0.35rem; }
.field-label { font-weight: 700; font-size: max(0.95rem, 14px); }
.field-hint { font-size: 0.82rem; color: var(--muted); }
.field-hint.bad { color: var(--bad); }
input[type=text], input[type=search], input[type=password], input[type=tel], select, textarea {
  width: 100%; min-height: 2.95rem; padding: 0.6rem 0.8rem; border-radius: 0.85rem;
  border: 1.5px solid var(--line); background: #fff; outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(15, 52, 96, 0.14); }
textarea { resize: none; line-height: 1.7; }
textarea.msg { min-height: 9.5rem; font-size: 1.04rem; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.mini-label { margin: 0.7rem 0 0.4rem; font-size: 0.84rem; color: var(--muted); font-weight: 700; }
.note { font-size: 0.86rem; color: var(--muted); margin: 0.4rem 0; }
.note.warn { color: var(--warn); }
.note.bad { color: var(--bad); }

/* ---- Chips and segmented ---- */
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chips.scroll { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 0.25rem; scrollbar-width: thin; }
.chip {
  flex: none; border: 1.5px solid var(--line); background: #fff; color: var(--ink);
  border-radius: 999px; padding: 0.35rem 0.95rem; font-size: 0.88rem; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.chip.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.chip.fam { border-color: var(--f-line); color: var(--f); background: #fff; }
.chip.fam.active { background: var(--f); border-color: var(--f); color: #fff; }
.chip.fam.static { cursor: default; }
.chip.warn { border-color: #e4c1ae; color: var(--warn); }
.chip.warn.active { background: var(--warn); border-color: var(--warn); color: #fff; }
.chip.var { border-style: dashed; color: var(--brand); }
.chip.tpl { background: #fff; }
.segmented { display: flex; background: #fff; border: 1.5px solid var(--line); border-radius: 1rem; padding: 0.25rem; gap: 0.25rem; }
.segmented button { flex: 1; border: 0; background: none; border-radius: 0.75rem; padding: 0.55rem 0.35rem; cursor: pointer; font-weight: 700; color: var(--muted); }
.segmented button.on { background: var(--brand); color: #fff; }
.segmented.small button { padding: 0.45rem 0.35rem; font-size: 0.9rem; }

/* ---- Toolbar and table-like lists ---- */
.toolbar { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.search { flex: 1 1 14rem; display: flex; align-items: center; gap: 0.35rem; border: 1.5px solid var(--line); border-radius: 0.95rem; padding: 0 0.65rem; background: #fff; }
.search input { border: 0; box-shadow: none !important; padding-inline: 0.25rem; }
.class-list { display: grid; gap: 0.95rem; }
@media (min-width: 1300px) { .class-list { grid-template-columns: repeat(2, 1fr); align-items: start; } }
@media (min-width: 2400px) { .class-list { grid-template-columns: repeat(3, 1fr); } }
.class-block { border-radius: 1.35rem; overflow: hidden; border: 2px solid var(--f-head); background: #fff; }
.class-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.55rem 1rem; min-height: 3.3rem; background: var(--f-head); color: #fff; }
.class-head h3 { margin: 0; font-size: 1.02rem; font-weight: 800; }
.muted-on-dark { font-size: 0.82rem; color: rgba(255, 255, 255, 0.82); }
.rows { list-style: none; margin: 0; padding: 0; }
.rows li:nth-child(odd) .row-btn { background: #fff; }
.rows li:nth-child(even) .row-btn { background: var(--f-tint); }
.row-btn { width: 100%; display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 1rem; border: 0; border-top: 1px solid var(--f-tint2); text-align: start; cursor: pointer; min-height: 3.4rem; }
.rows li:first-child .row-btn { border-top: 0; }
.row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.row-title { font-weight: 700; overflow-wrap: anywhere; }
.row-sub { font-size: 0.82rem; color: var(--muted); overflow-wrap: anywhere; }
.row-side { display: flex; align-items: center; gap: 0.35rem; flex: none; }
.tag { display: inline-block; margin-inline-start: 0.35rem; font-size: 0.72rem; font-weight: 700; padding: 0.05rem 0.5rem; border-radius: 999px; background: #fdebd3; color: #7a4a00; vertical-align: middle; }
.badge { display: inline-block; font-size: 0.78rem; font-weight: 700; padding: 0.12rem 0.65rem; border-radius: 999px; background: #eceef1; color: var(--muted); white-space: nowrap; }
.badge.ok { background: #e2f2e8; color: var(--ok); }
.badge.bad { background: #f8e2df; color: var(--bad); }
.badge.warn { background: #f8ecdf; color: var(--warn); }
.empty { text-align: center; padding: 2.2rem 1rem; color: var(--muted); display: grid; justify-items: center; gap: 0.6rem; }

/* ---- Banners ---- */
.banner { display: flex; gap: 0.5rem; align-items: flex-start; padding: 0.65rem 0.8rem; border-radius: 0.9rem; font-size: 0.9rem; }
.banner.warn { background: #fbf0e2; color: #7a4a00; border: 1.5px solid #ebd9bb; }
.banner.error { background: #fbe9e7; color: #962c22; border: 1.5px solid #e4b2b3; }
.banner.info { background: #eef2f8; color: var(--brand); border: 1.5px solid var(--brand-line); }
.welcome .steps { margin: 0 0 0.8rem; padding-inline-start: 1.3rem; }
.welcome .steps li { margin: 0.25rem 0; }

/* ---- Key/value ---- */
.kv { display: flex; justify-content: space-between; gap: 0.8rem; padding: 0.5rem 0; border-bottom: 1px dashed var(--f-line); }
.kv span { color: var(--muted); }
.kv strong { text-align: end; overflow-wrap: anywhere; }

/* ---- Compose ---- */
.picker { margin-top: 0.8rem; display: grid; gap: 0.8rem; }
.grade-group { display: grid; gap: 0.5rem; }
.grade-head { display: flex; justify-content: space-between; align-items: center; }
.pick-list { list-style: none; margin: 0; padding: 0; max-height: 22rem; overflow: auto; border: 1.5px solid var(--line); border-radius: 0.95rem; background: #fff; }
.pick-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.8rem; border-top: 1px solid var(--f-tint2); cursor: pointer; }
.pick-list li:first-child .pick-item { border-top: 0; }
.pick-list li:nth-child(even) .pick-item { background: var(--f-tint); }
.pick-item input { width: 1.3rem; height: 1.3rem; accent-color: var(--brand); }
.recip-info { margin-top: 0.8rem; display: grid; gap: 0.35rem; font-size: 0.94rem; }
.nophone summary { cursor: pointer; color: var(--warn); }
.nophone ul { margin: 0.35rem 0; padding-inline-start: 1.2rem; font-size: 0.86rem; color: var(--muted); }
.mode-box { display: grid; gap: 0.5rem; margin-top: 0.6rem; }
.mode-box.inline { display: flex; flex-wrap: wrap; gap: 1rem; }
.radio { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; }
.radio input { width: 1.2rem; height: 1.2rem; accent-color: var(--brand); }
.counter { display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; margin-top: 0.6rem; font-size: 0.86rem; color: var(--muted); }
.counter .warn { color: var(--warn); font-weight: 700; }
.preview { display: grid; justify-items: start; }
.phone-mock { width: min(100%, 26rem); background: #fff; border: 1.5px solid var(--line); border-radius: 1.2rem; padding: 1rem; }
.bubble { background: #eef1f6; border-radius: 1.1rem 1.1rem 1.1rem 0.3rem; padding: 0.65rem 0.95rem; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.75; }
.bubble.static { margin: 0.6rem 0; }
.sendbar {
  position: sticky; bottom: calc(var(--nav-h) + 1.3rem + env(safe-area-inset-bottom, 0px)); z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
  padding: 0.6rem 0.8rem; border-radius: 1.2rem; background: #fff; border: 2px solid var(--brand);
  box-shadow: 0 0.4rem 1.4rem rgba(15, 52, 96, 0.16);
}
@media (min-width: 900px) { .sendbar { bottom: 1rem; } }
.totals { display: flex; flex-wrap: wrap; gap: 0.25rem 0.8rem; align-items: baseline; font-size: 0.9rem; color: var(--muted); }
.totals strong { color: var(--ink); font-size: 1.02rem; }

/* ---- Import ---- */
.import { display: grid; gap: 0.95rem; }
.callout { border-radius: 1rem; padding: 0.8rem 0.95rem; background: var(--f-tint); border: 2px solid var(--f-line); }
.callout h4 { margin: 0 0 0.35rem; color: var(--f); }
.callout p { margin: 0.25rem 0; font-size: 0.92rem; }
.callout-lite { margin-top: 0.6rem; padding: 0.6rem; border-radius: 0.8rem; background: #fff; border: 1.5px dashed var(--f-line); }
.callout-lite p { margin: 0 0 0.5rem; font-size: 0.88rem; }
.file-name { display: flex; align-items: center; gap: 0.35rem; margin: 0; color: var(--muted); }
.import-summary, .result-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
@media (min-width: 900px) { .import-summary { grid-template-columns: repeat(6, 1fr); } }
.sum-tile { border-radius: 1rem; padding: 0.6rem; background: var(--f-tint); border: 2px solid var(--f-line); display: grid; text-align: center; }
.sum-tile strong { font-size: 1.4rem; color: var(--f); line-height: 1.2; }
.sum-tile span { font-size: 0.8rem; color: var(--muted); }
.table-scroll { overflow-x: auto; border-radius: 0.9rem; border: 1.5px solid var(--line); background: #fff; }
.map-table { border-collapse: collapse; min-width: 100%; font-size: 0.86rem; }
.map-table th, .map-table td { padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--f-tint2); text-align: start; white-space: nowrap; max-width: 16rem; overflow: hidden; text-overflow: ellipsis; }
.map-table thead tr:first-child th { background: var(--f-head); padding: 0.4rem; }
.map-table select { min-height: 2.4rem; padding: 0.25rem 0.4rem; font-size: 0.84rem; min-width: 9rem; }
.map-table select.mapped { border-color: var(--warn); background: #fff7ee; }
.map-table tr.orig th { background: var(--f-tint2); color: var(--ink); font-weight: 700; }
.map-table tbody tr:nth-child(even) td { background: var(--f-tint); }
.sticky-actions { position: sticky; bottom: 0; background: #fff; padding: 0.8rem 0 calc(0.5rem + env(safe-area-inset-bottom, 0px)); display: grid; gap: 0.6rem; border-top: 1.5px solid var(--line); }
.loading { display: grid; justify-items: center; gap: 0.6rem; padding: 2.5rem; color: var(--muted); }
.spinner { width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 0.25rem solid #dde5ef; border-top-color: var(--brand); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Data tables: light row first, then darker, never two equal rows in a row ---- */
table.data { width: 100%; table-layout: auto; border-collapse: collapse; font-size: 0.88rem; }
table.data th { background: var(--f-head); color: #fff; padding: 0.5rem 0.65rem; text-align: start; white-space: nowrap; }
table.data td { padding: 0.5rem 0.65rem; vertical-align: top; overflow-wrap: break-word; word-break: normal; border-bottom: 1px solid var(--f-tint2); }
table.data tbody tr:nth-child(odd) td { background: #ffffff; }
table.data tbody tr:nth-child(even) td { background: var(--f-tint); }

/* ---- Log (rows inside a panel) ---- */
.log-list { display: grid; gap: 0; }
.log-card { width: 100%; text-align: start; display: grid; gap: 0.3rem; padding: 0.7rem 1rem; border: 0; border-top: 1px solid var(--f-tint2); background: #fff; cursor: pointer; }
.log-list > .log-card:first-child { border-top: 0; }
.log-list > .log-card:nth-child(even) { background: var(--f-tint); }
.log-top { display: flex; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; }
.log-top .muted { font-size: 0.82rem; }
.log-text { margin: 0; font-size: 0.88rem; color: var(--muted); white-space: pre-wrap; overflow-wrap: anywhere; }
.log-panel .panel-body { padding: 0; }
.campaign { display: grid; gap: 0.6rem; }

/* ---- Overlays ---- */
.overlay { position: fixed; inset: 0; z-index: 50; background: rgba(10, 20, 35, 0.5); display: flex; align-items: flex-end; justify-content: center; }
.sheet { width: 100%; max-height: 92vh; overflow: auto; background: var(--canvas); border-radius: 1.5rem 1.5rem 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); animation: up 0.18s ease-out; }
.sheet.full { height: 100vh; max-height: 100vh; border-radius: 0; }
@keyframes up { from { transform: translateY(1.5rem); opacity: 0.6; } to { transform: none; opacity: 1; } }
@media (min-width: 900px) {
  .overlay { align-items: center; }
  .sheet { width: min(44rem, 92vw); border-radius: 1.4rem; }
  .sheet.full { width: min(80rem, 94vw); height: auto; max-height: 92vh; border-radius: 1.4rem; }
}
.sheet-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.85rem 1rem; background: var(--brand); color: #fff; border-bottom: 2px solid var(--brand-edge); }
.sheet-head h3 { margin: 0; font-size: 1.08rem; font-weight: 800; }
.sheet-head .icon-btn { color: #fff; border: 2px solid #fff; border-radius: 50%; padding: 0.35rem; background: var(--brand-ctl); }
.sheet-body { padding: 1rem; }
.confirm p { margin-top: 0; }
.confirm-grid { margin-bottom: 0.9rem; }
.progress-box { display: grid; gap: 0.8rem; padding: 0.5rem 0; }
.progress { height: 0.8rem; border-radius: 999px; background: #e6ecf3; overflow: hidden; }
.progress-fill { height: 100%; width: 0; background: var(--warn); transition: width 0.2s; }
.progress-label { text-align: center; margin: 0; font-weight: 700; }
.result { display: grid; gap: 0.8rem; }

/* ---- Login ---- */
.login-wrap { min-height: 100vh; min-height: 100svh; display: grid; align-content: start; gap: 1rem; padding: calc(env(safe-area-inset-top, 0px) + 0.6rem) 0.8rem 2rem; }
.login-wrap .topbar { position: static; padding: 0; background: none; }
.login-card { max-width: 30rem; width: 100%; justify-self: center; }
.login-card .btn.block { margin-top: 0.4rem; }
.pw-rules { margin: 0.2rem 0 0; padding-inline-start: 1.2rem; font-size: 0.84rem; color: var(--muted); }

/* ---- Toasts ---- */
.toasts { position: fixed; inset-inline: 0; bottom: calc(var(--nav-h) + 5.6rem + env(safe-area-inset-bottom, 0px)); z-index: 80; display: grid; justify-items: center; gap: 0.5rem; pointer-events: none; padding: 0 1rem; }
.toast { background: #1a202c; color: #fff; padding: 0.65rem 1rem; border-radius: 0.9rem; font-size: 0.92rem; max-width: 34rem; box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.2); transition: opacity 0.4s, transform 0.4s; }
.toast.error { background: var(--bad); }
.toast.info { background: var(--brand); }
.toast.hide { opacity: 0; transform: translateY(0.5rem); }
@media (min-width: 900px) { .toasts { bottom: 1.5rem; } }

.about .note { margin: 0.5rem 0 0; }
.provider-card { display: grid; gap: 0.35rem; }
.copyright { text-align: center; font-size: max(0.8rem, 14px); color: var(--muted); margin-top: 1.2rem; overflow-wrap: anywhere; }

/* ---- School identity band: Ministry chain (right), Ministry logo (centre), school logo and dates (left) ---- */
.identity {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 0.5rem;
  padding: 0.45rem 0.7rem 0.62rem; background: #ffffff; border: 1.5px solid var(--line); border-radius: 1.15rem;
  font-family: "Traditional Arabic", "Noto Naskh Arabic", "Geeza Pro", "Times New Roman", serif;
}
.identity::after {
  content: ""; position: absolute; inset-inline: 0.75rem; bottom: 0.3rem; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, #0f3460, #0e7490);
}
.id-chain { display: grid; justify-items: center; text-align: center; font-size: 0.72rem; line-height: 1.4; color: #243746; }
.id-chain strong { color: #0f3460; font-size: 0.82rem; font-weight: 800; }
.id-moe { display: block; height: 2.95rem; width: auto; }
.id-side { display: grid; justify-items: center; gap: 0.1rem; }
.id-school { display: block; height: 2.1rem; width: auto; margin-bottom: 0.1rem; }
.id-date { font-size: 0.68rem; color: #5b6b78; white-space: nowrap; }
.login-wrap .identity { max-width: 30rem; margin: 0.6rem auto 0; }
.logo-row { align-items: center; gap: 0.6rem; }
.logo-preview { height: 3rem; width: auto; border-radius: 0.5rem; background: #fff; border: 1px solid var(--line); padding: 0.2rem; }
.logo svg { width: 2.3rem; height: 2.3rem; }

/* ---- Settings rows (Raqeeb): icon tile, title and live example, control ---- */
.set-list { display: grid; gap: 0.5rem; }
.set-row {
  display: flex; align-items: center; gap: 0.8rem; width: 100%; text-align: start;
  padding: 0.75rem 0.8rem; border: 0; border-radius: 1.05rem; background: #ffffff; cursor: pointer; color: var(--ink);
}
.set-list > .set-row:nth-child(odd) { background: var(--f-tint2); }
.set-ic { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 3rem; height: 3rem; border-radius: 0.95rem; background: var(--f); color: #ffffff; }
.set-ic .ic svg { width: 1.5rem; height: 1.5rem; }
.set-text { flex: 1; min-width: 0; display: grid; gap: 0.12rem; }
.set-text strong { font-size: 1rem; font-weight: 800; }
.set-text span { font-size: 0.84rem; color: var(--muted); line-height: 1.45; }
.set-control { display: inline-flex; align-items: center; gap: 0.35rem; flex: none; color: var(--muted); }
.set-chip { display: inline-flex; align-items: center; padding: 0.25rem 0.85rem; border: 2px solid var(--f-line); border-radius: 999px; background: #ffffff; color: var(--f); font-weight: 800; font-size: 0.88rem; white-space: nowrap; }
.switch { position: relative; flex: none; width: 3.1rem; height: 1.75rem; border-radius: 999px; background: var(--f-tint2); border: 2px solid var(--f-line); }
.switch::after {
  content: ""; position: absolute; top: 50%; inset-inline-start: 0.1rem; width: 1.45rem; height: 1.45rem; border-radius: 50%;
  background: #ffffff; box-shadow: 0 0.15rem 0.4rem rgba(0, 0, 0, 0.25); transform: translateY(-50%); transition: inset-inline-start 0.15s ease;
}
.switch.on { background: var(--f-line); }
.switch.on::after { inset-inline-start: calc(100% - 1.6rem); background: var(--f); }

/* ---- v1.0.2: messages, contacts, dial pad, workspace, settings additions ------------------------------ */
.no-resize { resize: none; }
.nowrap { white-space: nowrap; }
.small { font-size: 0.82rem; }
.center { text-align: center; }
.pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.clamp1, .clamp2 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.clamp1 { -webkit-line-clamp: 1; }
.clamp2 { -webkit-line-clamp: 2; }
.row.between { justify-content: space-between; }
.row.center { justify-content: center; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.check { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; }
.check input { width: 1.25rem; height: 1.25rem; accent-color: var(--brand); }
.mini-select { width: auto; min-width: 9rem; padding: 0.4rem 0.7rem; border-radius: 0.8rem; font-size: 0.88rem; }
.progress .bar { height: 100%; width: 0; background: var(--brand); transition: width 0.25s; }
.banner.info { background: #eef4fb; color: #0f3460; border: 1.5px solid #c9d8ea; }
.star { color: #b7770d; }
ol.steps { margin: 0; padding-inline-start: 1.3rem; display: grid; gap: 0.35rem; }

/* Segmented tabs above lists */
.seg { display: flex; gap: 0.3rem; background: var(--card); border: 1.5px solid var(--line); border-radius: 1rem; padding: 0.25rem; margin-bottom: 0.7rem; overflow-x: auto; }
.seg-btn { flex: 1 0 auto; border: 0; background: none; border-radius: 0.75rem; padding: 0.55rem 0.7rem; cursor: pointer; font-weight: 700; color: var(--muted); white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; }
.seg-btn.active { background: var(--brand); color: #fff; }
.dot-badge, .nav-badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 1.35rem; height: 1.35rem; padding: 0 0.3rem;
  border-radius: 999px; background: #e67e22; color: #fff; font-size: 0.72rem; font-weight: 800; border: 2px solid #fff; line-height: 1;
}
.nav-item { position: relative; }
.nav-item .nav-badge { position: absolute; top: 0.15rem; inset-inline-start: 50%; margin-inline-start: 0.4rem; }

/* Clickable table rows */
table.data tr.click { cursor: pointer; }
table.data tr.click:active td { filter: brightness(0.96); }
table.data tr.unread td { font-weight: 700; }
table.data tr.on td { background: var(--f-tint2) !important; }
table.data tr.done td { opacity: 0.6; }
table.data td.row-actions { white-space: nowrap; display: flex; gap: 0.3rem; flex-wrap: wrap; }
.threads td { vertical-align: middle; }
.threads .av-cell { width: 3rem; }
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--f); color: #fff; font-weight: 800; font-size: 1.05rem; }
.th-name { font-weight: 700; display: flex; align-items: center; gap: 0.3rem; }
.th-side { text-align: end; }
.th-side .count-badge { position: static; display: inline-flex; margin-top: 0.2rem; }

/* Delivery states */
.state { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.8rem; font-weight: 700; border-radius: 999px; padding: 0.1rem 0.55rem; background: #eceef1; color: var(--muted); white-space: nowrap; }
.state.ok, .state.s-delivered { background: #e7f5ed; color: #1b7741; }
.state.s-read { background: #e3f2fb; color: #026fa7; }
.state.warn, .state.s-pending, .state.s-unknown { background: #fdf1e6; color: #9c5617; }
.state.bad, .state.s-failed { background: #fbeaea; color: #c0392b; }
.state.idle { background: #eceef1; color: var(--muted); }

/* Thread (chat) */
.thread { display: flex; flex-direction: column; min-height: calc(92vh - 4rem); }
.thread-head { display: flex; align-items: center; gap: 0.6rem; padding-bottom: 0.5rem; border-bottom: 1.5px solid var(--line); }
.th-info { flex: 1; min-width: 0; display: grid; }
.th-actions { display: flex; gap: 0.1rem; }
.bubbles { flex: 1; overflow-y: auto; padding: 0.7rem 0.2rem; display: flex; flex-direction: column; gap: 0.45rem; min-height: 14rem; }
.bubbles .bubble { max-width: 82%; border-radius: 1.1rem; padding: 0.5rem 0.8rem 0.35rem; background: #fff; border: 1.5px solid var(--line); line-height: 1.7; white-space: normal; }
.bubbles .bubble.in { align-self: flex-start; border-start-start-radius: 0.3rem; }
.bubbles .bubble.out { align-self: flex-end; background: var(--brand); color: #fff; border-color: var(--brand); border-start-end-radius: 0.3rem; }
.bubbles .bubble.failed { background: #fbeaea; color: #7a1f17; border-color: #e6b8b2; }
.b-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.b-who { font-size: 0.78rem; font-weight: 800; opacity: 0.85; margin-bottom: 0.15rem; }
.b-meta { display: flex; flex-wrap: wrap; gap: 0.15rem 0.55rem; align-items: center; font-size: 0.72rem; opacity: 0.85; margin-top: 0.2rem; }
.bubble.out .state { background: rgba(255, 255, 255, 0.18); color: #fff; }
.b-copy { border: 0; background: none; color: inherit; opacity: 0.7; cursor: pointer; padding: 0; display: inline-flex; }
.day-sep { align-self: center; font-size: 0.76rem; color: var(--muted); background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 0.1rem 0.7rem; }
.composer { border-top: 1.5px solid var(--line); padding-top: 0.5rem; display: grid; gap: 0.35rem; position: sticky; bottom: 0; background: var(--canvas); }
.composer-row { display: flex; align-items: flex-end; gap: 0.4rem; }
.composer-box { flex: 1; min-height: 2.8rem; max-height: 10rem; border-radius: 1.2rem; padding: 0.6rem 0.9rem; line-height: 1.6; }
.send-btn { flex: none; width: 2.9rem; height: 2.9rem; border-radius: 50%; border: 0; background: var(--brand); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }

/* Dial pad */
.dialer { display: grid; gap: 0.6rem; }
.dial-display { min-height: 2.8rem; text-align: center; font-size: 1.7rem; font-weight: 800; letter-spacing: 0.06em; color: var(--ink); overflow-wrap: anywhere; }
.dial-pad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.55rem; max-width: 20rem; margin: 0 auto; width: 100%; }
.dial-key { aspect-ratio: 1.45; border-radius: 1.1rem; border: 1.5px solid var(--line); background: var(--card); cursor: pointer; display: grid; place-items: center; align-content: center; gap: 0.05rem; }
.dial-key:active { background: #fdf1e6; }
.dial-key .dk { font-size: 1.45rem; font-weight: 800; color: var(--ink); }
.dial-key .dl { font-size: 0.66rem; color: var(--muted); letter-spacing: 0.08em; min-height: 0.8rem; }
.dial-actions { display: flex; align-items: center; justify-content: center; gap: 1.6rem; }
.dial-call { width: 4rem; height: 4rem; border-radius: 50%; border: 0; background: #e67e22; color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 0.35rem 0.9rem rgba(230, 126, 34, 0.35); }
.dial-sugg table { margin: 0; }

/* Notes, person sheet, picker */
.notes { display: grid; gap: 0.6rem; }
.note-add { display: grid; gap: 0.4rem; }
.phones-table td { vertical-align: middle; }
.picker-list { max-height: 55vh; overflow: auto; }
.pick-mark { width: 2rem; color: var(--brand); }
.bulk-bar { padding: 0.45rem 0.7rem; border-radius: 0.9rem; background: var(--card); border: 1.5px dashed var(--line); align-items: center; margin-bottom: 0.6rem; }

/* Copy boxes, swatches, pickers */
.copy-box { display: flex; align-items: center; gap: 0.5rem; border: 1.5px solid var(--line); border-radius: 0.9rem; padding: 0.4rem 0.6rem; background: var(--card); }
.copy-box .copy-label { font-size: 0.8rem; color: var(--muted); white-space: nowrap; }
.copy-box code { flex: 1; min-width: 0; overflow-wrap: anywhere; font-family: Consolas, monospace; font-size: 0.86rem; direction: ltr; text-align: left; }
.pay-box { border: 2px solid #f2b705; background: #fffbf0; border-radius: 1rem; padding: 0.7rem; display: grid; gap: 0.5rem; }
.kv.total strong { font-size: 1.1rem; color: var(--brand); }
.swatch { display: inline-block; width: 1.15rem; height: 1.15rem; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15); margin-inline-start: -0.25rem; }
.swatch-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem; }
.swatch-btn { display: grid; justify-items: center; gap: 0.35rem; border: 1.5px solid var(--line); background: var(--card); border-radius: 1rem; padding: 0.7rem 0.3rem; cursor: pointer; font-size: 0.82rem; color: var(--ink); }
.swatch-btn .swatch { width: 2rem; height: 2rem; margin: 0; }
.swatch-btn.on { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand); }
.set-chip.on { background: #e7f5ed; color: #1b7741; }
.icon-picker { display: grid; gap: 0.6rem; }
.icon-style-opt { display: flex; align-items: center; gap: 0.8rem; text-align: start; border: 1.5px solid var(--line); background: var(--card); border-radius: 1.1rem; padding: 0.7rem; cursor: pointer; color: var(--ink); }
.icon-style-opt.on { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand); }
.icon-style-demo { display: flex; gap: 0.35rem; flex: none; }
.icon-style-demo .tile-circle { width: 2.6rem; height: 2.6rem; }
.icon-style-demo .tile-circle .ic svg { width: 1.3rem; height: 1.3rem; }
.icon-style-text { display: grid; gap: 0.15rem; min-width: 0; }
.icon-style-text span { font-size: 0.82rem; color: var(--muted); }
.icon-style-text .badge { margin-inline-start: 0.4rem; }

/* Evidence workspace */
.files-head { display: grid; gap: 0.6rem; margin-bottom: 0.7rem; }
.usage { background: var(--card); border: 1.5px solid var(--line); border-radius: 1rem; padding: 0.7rem 0.8rem; display: grid; gap: 0.4rem; }
.file-preview { max-width: 100%; max-height: 50vh; border-radius: 0.9rem; display: block; margin: 0 auto; }
.manual-send { display: grid; gap: 0.7rem; }

/* ---- Icon styles (Raqeeb's seven, for tiles and settings rows) ---------------------------------------- */
html[data-icons='duo'] .tile-circle, html[data-icons='duo'] .set-ic,
.icon-style-opt[data-icons='duo'] .tile-circle {
  border-radius: 1.05rem; background: var(--f-tint2); color: var(--f); box-shadow: none; border: 1.5px solid var(--f-line);
}
html[data-icons='duo'] .tile-circle svg :is(path, rect, circle, polyline, ellipse),
html[data-icons='duo'] .set-ic svg :is(path, rect, circle, polyline, ellipse),
.icon-style-opt[data-icons='duo'] .tile-circle svg :is(path, rect, circle, polyline, ellipse) { fill: color-mix(in srgb, var(--f) 22%, transparent); }

html[data-icons='gradient'] .tile-circle, html[data-icons='gradient'] .set-ic,
.icon-style-opt[data-icons='gradient'] .tile-circle {
  border-radius: 1.05rem; background: linear-gradient(145deg, var(--f) 0%, var(--f-deep) 100%); color: #fff;
  box-shadow: 0 0.35rem 0.85rem color-mix(in srgb, var(--f) 45%, transparent);
}
html[data-icons='gradient'] .tile-circle svg :is(path, rect, circle, ellipse),
html[data-icons='gradient'] .set-ic svg :is(path, rect, circle, ellipse),
.icon-style-opt[data-icons='gradient'] .tile-circle svg :is(path, rect, circle, ellipse) { fill: rgba(255, 255, 255, 0.3); }

html[data-icons='glass'] .tile-circle, html[data-icons='glass'] .set-ic,
.icon-style-opt[data-icons='glass'] .tile-circle {
  border-radius: 1.15rem; color: var(--f-deep);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.85) 0%, color-mix(in srgb, var(--f) 28%, rgba(255, 255, 255, 0.55)) 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.9); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 0.35rem 0.9rem color-mix(in srgb, var(--f) 30%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}

html[data-icons='material'] .tile-circle, html[data-icons='material'] .set-ic,
.icon-style-opt[data-icons='material'] .tile-circle { background: var(--f-tint2); color: var(--f-deep); box-shadow: none; }
html[data-icons='material'] .tile:nth-child(4n+1) .tile-circle, .icon-style-opt[data-icons='material'] .tile-circle:nth-child(4n+1) { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }
html[data-icons='material'] .tile:nth-child(4n+2) .tile-circle, .icon-style-opt[data-icons='material'] .tile-circle:nth-child(4n+2) { border-radius: 1.2rem; }
html[data-icons='material'] .tile:nth-child(4n+3) .tile-circle, .icon-style-opt[data-icons='material'] .tile-circle:nth-child(4n+3) { border-radius: 50% 50% 50% 50% / 38% 38% 62% 62%; }
html[data-icons='material'] .tile:nth-child(4n) .tile-circle, .icon-style-opt[data-icons='material'] .tile-circle:nth-child(4n) { border-radius: 42% 58% 42% 58% / 58% 42% 58% 42%; }
html[data-icons='material'] .set-ic { border-radius: 1.2rem 0.6rem 1.2rem 0.6rem; }

html[data-icons='3d'] .tile-circle, html[data-icons='3d'] .set-ic,
.icon-style-opt[data-icons='3d'] .tile-circle {
  border-radius: 1.05rem; background: radial-gradient(120% 120% at 30% 20%, color-mix(in srgb, var(--f) 70%, #fff) 0%, var(--f) 45%, var(--f-deep) 100%); color: #fff;
  box-shadow: inset 0 -0.25rem 0.5rem rgba(0, 0, 0, 0.25), inset 0 0.2rem 0.35rem rgba(255, 255, 255, 0.35), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.2);
}
html[data-icons='3d'] .tile-circle .ic, html[data-icons='3d'] .set-ic .ic,
.icon-style-opt[data-icons='3d'] .tile-circle .ic { filter: drop-shadow(0 2px 1.5px rgba(0, 0, 0, 0.35)); }

html[data-icons='3dtint'] .tile-circle, html[data-icons='3dtint'] .set-ic,
.icon-style-opt[data-icons='3dtint'] .tile-circle { background: none; box-shadow: none; color: var(--f); }
html[data-icons='3dtint'] .tile-circle svg, html[data-icons='3dtint'] .set-ic svg,
.icon-style-opt[data-icons='3dtint'] .tile-circle svg {
  stroke-width: 2.4; filter: drop-shadow(-1px -1px 0 rgba(255, 255, 255, 0.8)) drop-shadow(0 3px 2px color-mix(in srgb, var(--f-deep) 55%, transparent));
}
html[data-icons='3dtint'] .tile-circle svg :is(path, rect, circle, ellipse),
.icon-style-opt[data-icons='3dtint'] .tile-circle svg :is(path, rect, circle, ellipse) { fill: color-mix(in srgb, var(--f) 18%, transparent); }
html[data-icons='3dtint'] .tile-circle .ic svg { width: 2.2rem; height: 2.2rem; }

/* ---- Aleem colour styles (navy, burgundy, dark green) with gold accents ------------------------------- */
html[data-style='navy'] .nav-item.active, html[data-style='burgundy'] .nav-item.active, html[data-style='green'] .nav-item.active { box-shadow: inset 0 -3px 0 #f2b705; }
html[data-style='navy'] .fab .fab-ic, html[data-style='burgundy'] .fab .fab-ic, html[data-style='green'] .fab .fab-ic { color: var(--brand); box-shadow: 0 0 0 2px #f2b705; }
html[data-style='navy'] .ring-btn, html[data-style='burgundy'] .ring-btn, html[data-style='green'] .ring-btn { border-color: #f2b705; }
html[data-style='navy'] .logo, html[data-style='burgundy'] .logo, html[data-style='green'] .logo { box-shadow: 0 0 0 2px #f2b705; }

/* ---- Dark contrast ----------------------------------------------------------------------------------------- */
html[data-contrast='dark'] {
  --canvas: #0b1015; --card: #131a22; --ink: #e6edf3; --muted: #9fb0bd; --line: #24303c;
  --f-tint: #151d26; --f-tint2: #1b2530; --brand-line: #34465a;
  color-scheme: dark;
}
html[data-contrast='dark'] body { background: var(--canvas); color: var(--ink); }
html[data-contrast='dark'] :is(.btn.ghost, .chip, .chip.fam, .chip.tpl, .segmented, .search, .table-scroll, .pick-list, .phone-mock, .dial-key, .copy-box, .swatch-btn, .icon-style-opt, .usage, .seg, .day-sep, .bubbles .bubble.in, .bulk-bar) { background: var(--card); color: var(--ink); border-color: var(--line); }
html[data-contrast='dark'] :is(input, select, textarea) { background: #0f151c; color: var(--ink); border-color: var(--line); }
html[data-contrast='dark'] table.data tbody tr:nth-child(odd) td { background: #131a22; }
html[data-contrast='dark'] table.data tbody tr:nth-child(even) td { background: #182029; }
html[data-contrast='dark'] table.data td { border-color: #24303c; color: var(--ink); }
html[data-contrast='dark'] .panel { background: #10161d; }
html[data-contrast='dark'] .sheet { background: var(--canvas); }
html[data-contrast='dark'] .bubble { background: #182029; color: var(--ink); }
html[data-contrast='dark'] .banner.info { background: #10233a; color: #cfe0f5; border-color: #24405f; }
html[data-contrast='dark'] .pay-box { background: #241d07; }
html[data-contrast='dark'] .badge, html[data-contrast='dark'] .state { background: #1b2530; color: var(--muted); }
html[data-contrast='dark'] .nav-item.active { background: linear-gradient(180deg, #e6edf3 0%, #c9d3df 100%); }
html[data-contrast='dark'] .composer { background: var(--canvas); }
html[data-contrast='dark'] .indicator { background: var(--card); color: var(--f-light, var(--ink)); border-color: color-mix(in srgb, var(--f-light, #9fb0bd) 45%, transparent); }
html[data-contrast='dark'] .indicator .ind-status { color: var(--f-light, var(--muted)); }
html[data-contrast='dark'] .ind-ring .ring-bar { stroke: var(--f-light, var(--ink)); }
html[data-contrast='dark'] .ind-ring .ring-track { stroke: #24303c; }
html[data-contrast='dark'][data-icons='3dtint'] .tile-circle,
html[data-contrast='dark'][data-icons='duo'] .tile-circle .ic,
html[data-contrast='dark'][data-icons='material'] .tile-circle .ic { color: var(--f-light, var(--ink)); }
html[data-contrast='dark'] .tile-label, html[data-contrast='dark'] .screen-title h1 { color: var(--ink); }
/* Light surfaces turned dark: lists, settings rows, class blocks, log, pickers, sticky bars. */
html[data-contrast='dark'] :is(.class-block, .log-card, .set-row, .pick-list, .phone-mock, .callout-lite, .sticky-actions, .table-scroll, .identity) { background: var(--card); color: var(--ink); border-color: var(--line); }
html[data-contrast='dark'] .rows li:nth-child(odd) .row-btn { background: #131a22; }
html[data-contrast='dark'] .rows li:nth-child(even) .row-btn { background: #182029; }
html[data-contrast='dark'] .row-btn { color: var(--ink); border-top-color: #24303c; }
html[data-contrast='dark'] .set-list > .set-row:nth-child(odd) { background: #182029; }
html[data-contrast='dark'] table.data tbody tr:nth-child(odd) td { background: #131a22; }
html[data-contrast='dark'] .btn.danger-ghost { background: var(--card); }
html[data-contrast='dark'] .bubbles .bubble { background: #182029; color: var(--ink); border-color: var(--line); }
html[data-contrast='dark'] :is(.id-chain, .id-date) { color: var(--muted); }
html[data-contrast='dark'] .id-chain strong { color: var(--ink); }

/* ---- v1.0.2: template groups, lateness ---- */
.tpl-group + .tpl-group { margin-top: 0.7rem; }
.chips.scroll + .chips.scroll { margin-top: 0.35rem; }
[data-testid="late-start"] { white-space: nowrap; }

/* ---- Fahes report fixes (v1.0.2) ---- */
/* Fields at 16px at least: Safari on iPhone zooms into smaller ones and stays zoomed. */
input, select, textarea { font-size: max(1rem, 16px); }
/* Large text (200%): long brand lines wrap instead of widening the page. */
.app-name, .brand-text { overflow-wrap: anywhere; }
/* Wide screens: the page grows with the screen instead of staying a narrow column. */
@media (min-width: 1280px) {
  .login-wrap.split { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; width: min(92vw, 1760px); margin-inline: auto; padding-inline: 0; align-items: start; }
  .login-wrap.split > .topbar, .login-wrap.split > .copyright { grid-column: 1 / -1; }
  .login-wrap.split > .identity { max-width: none; margin: 0; align-self: stretch; padding: 1.6rem 1.4rem 1.8rem; }
  /* The identity panel beside the login card carries content in proportion to its size. */
  .login-wrap.split > .identity .id-chain { font-size: 1rem; line-height: 1.6; }
  .login-wrap.split > .identity .id-chain strong { font-size: 1.2rem; }
  .login-wrap.split > .identity .id-moe { height: 5.2rem; }
  .login-wrap.split > .identity .id-school { height: 4.6rem; }
  .login-wrap.split > .identity .id-date { font-size: 0.95rem; }
  .login-wrap.split > .login-card { max-width: none; }
}
@media (min-width: 1600px) {
  .layout { width: min(94vw, 2200px); margin-inline: auto; }
  .tiles { max-width: none; grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .indicators { max-width: none; grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .login-wrap:not(.split) .login-card { max-width: 40rem; }
}

/* ---- Home fits the phone, copyright included (no floating button over the tiles) ---- */
.main.home { padding-bottom: calc(var(--nav-h) + 1.4rem + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 520px) {
  .main.home > * + * { margin-top: 0.7rem; }
  .main.home .identity { padding: 0.35rem 0.6rem 0.5rem; }
  .main.home .id-moe { height: 2.4rem; }
  .main.home .id-school { height: 1.7rem; }
  .main.home .screen-title { margin-top: 0.1rem; }
  .main.home .indicator { grid-template-rows: 2.3rem auto auto; min-height: 5.7rem; gap: 0.15rem; padding: 0.45rem 0.2rem 0.4rem; border-radius: 1rem; }
  .main.home .indicator .ind-val { font-size: 1.12rem; }
  .main.home .ind-ring { width: 2.35rem; height: 2.35rem; }
  .main.home .indicators { gap: 0.4rem; }
  .main.home .tiles { gap: 0.55rem 0.35rem; }
  .main.home .tile { gap: 0.3rem; }
  .main.home .tile-circle { width: 3.05rem; height: 3.05rem; }
  .main.home .tile-circle .ic svg { width: 1.5rem; height: 1.5rem; }
  .main.home .tile-label { font-size: 0.8rem; line-height: 1.22; }
  .main.home .copyright { margin-top: 0.4rem; line-height: 1.45; }
}

/* ---- v1.0.3: calendar ---- */
.ring-btn.small { width: 2.5rem; height: 2.5rem; }
.flip svg { transform: scaleX(-1); }
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.75rem; }
.cal-title { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.15rem; }
.cal-title strong { font-size: 1.15rem; }
.cal-week, .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.3rem; }
.cal-week span { text-align: center; font-size: 0.875rem; color: var(--muted); padding-bottom: 0.2rem; }
.cal-cell { min-height: 3.6rem; border: 1px solid var(--line); border-radius: 0.7rem; background: var(--card); display: flex; flex-direction: column; align-items: stretch; gap: 0.15rem; padding: 0.3rem 0.25rem; cursor: pointer; font: inherit; color: inherit; text-align: center; }
.cal-cell.empty { border: 0; background: none; cursor: default; }
.cal-cell.weekend { background: var(--canvas); }
.cal-cell.holiday { border-color: #1b7741; }
.cal-cell.today { border: 2px solid var(--brand); box-shadow: 0 0 0 2px rgba(15, 52, 96, 0.12); }
.cal-cell:focus-visible { outline: 3px solid var(--brand); outline-offset: 1px; }
.cal-num { font-weight: 700; font-size: 1rem; }
.cal-ev { display: flex; flex-direction: column; gap: 0.15rem; }
.cal-ev-item { display: block; border-radius: 0.35rem; background: var(--f, #0f3460); color: #fff; font-size: 0.875rem; line-height: 1.35; padding: 0 0.25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-marks { display: flex; justify-content: center; gap: 0.2rem; flex-wrap: wrap; }
.cal-mark { display: inline-flex; align-items: center; justify-content: center; min-width: 1.35rem; height: 1.35rem; border-radius: 0.7rem; font-size: 0.875rem; padding: 0 0.25rem; font-variant-numeric: tabular-nums; }
.cal-mark.abs { background: #fdf0ef; color: #a93226; }
.cal-mark.late { background: #fff1d6; color: #7a4a00; }
.cal-legend { margin-top: 0.6rem; display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
@media (max-width: 699px) {
  .cal-ev-item { font-size: 0; height: 0.45rem; padding: 0; border-radius: 0.25rem; }
  .cal-cell { min-height: 3.3rem; padding: 0.25rem 0.15rem; }
}
html[data-contrast='dark'] .cal-cell { background: #131a22; border-color: #24303c; }
html[data-contrast='dark'] .cal-cell.weekend { background: #182029; }
html[data-contrast='dark'] .cal-mark.abs { background: #3a1714; color: #f5b7b1; }
html[data-contrast='dark'] .cal-mark.late { background: #3a2a0a; color: #f8d58a; }

/* ---- v1.0.3: posts, media store, opt-in ---- */
.tiles.more { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.thumb-cell { width: 3.6rem; }
.thumb { width: 3.2rem; height: 3.2rem; border-radius: 0.6rem; object-fit: cover; display: block; background: var(--canvas); border: 1px solid var(--line); }
.thumb.icon { display: inline-flex; align-items: center; justify-content: center; color: var(--muted); }
.media-preview { display: block; max-width: 100%; max-height: 60vh; margin: 0 auto; border-radius: 0.9rem; border: 1px solid var(--line); background: var(--canvas); }
.img-preview canvas { display: block; width: 100%; max-width: 540px; height: auto; margin: 0 auto; border-radius: 0.9rem; border: 1px solid var(--line); box-shadow: 0 6px 20px rgba(15, 52, 96, 0.08); }
.post-image { display: flex; flex-direction: column; gap: 0.5rem; }
.counter.bad { color: var(--bad); font-weight: 700; }
.banner.ok { background: #edfaf3; color: #1b7741; border: 1px solid #b7dfc6; }
html[data-contrast='dark'] .banner.ok { background: #0f2a1b; color: #9fe0b8; border-color: #1e5a37; }
html[data-contrast='dark'] .thumb { background: #182029; border-color: #24303c; }
.loading.small { min-height: 3rem; }