@font-face {
  font-family: "Noto Sans Arabic";
  src: url("/fonts/arabic-regular.woff") format("woff");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans Arabic";
  src: url("/fonts/arabic-bold.woff") format("woff");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Noto Kufi Arabic";
  src: url("/fonts/kufi-bold.woff") format("woff");
  font-weight: 700;
  font-display: swap;
}
:root {
  color-scheme: light;
  --page: #f5f7f3;
  --paper: #fff;
  --ink: #18362e;
  --muted: #52685e;
  --line: #dce6dd;
  --green: #176353;
  --forest: #113f36;
  --lime: #e2efcc;
  --soft-green: #eef5eb;
  --font: "Noto Sans Arabic", Tahoma, sans-serif;
  --display: "Noto Kufi Arabic", var(--font);
  background: var(--page);
  color: var(--ink);
  font-family: var(--font);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-width: 0; font-size: .9rem; }
p, h1, h2, h3, dl, dd { margin: 0; }
h1, h2 { font-family: var(--display); }
button, input, select, textarea { color: inherit; font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .55; }
a { color: var(--green); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid #668d42; outline-offset: 2px; }
.topbar { background: var(--forest); color: #fff; }
.topbar-inner, .main {
  width: min(100%, 1220px);
  padding-inline: 28px;
  margin-inline: auto;
}
.topbar-inner {
  min-height: 70px;
  padding-block: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.brand { display: flex; align-items: center; gap: 11px; line-height: 1.4; }
.brand strong { display: block; font: 700 1.25rem/1.3 var(--display); }
.brand div > span { display: block; margin-top: 3px; font-size: .76rem; color: #deece3; }
.brand-symbol {
  inline-size: 42px; block-size: 42px; border-radius: 12px; background: var(--lime);
  display: grid; place-items: center; flex: none;
}
.brand-symbol i {
  position: relative; width: 17px; height: 21px; border: 2px solid var(--forest);
  border-radius: 3px;
}
.brand-symbol i::after {
  content: ""; position: absolute; width: 8px; height: 5px; left: 2px; top: 4px;
  border-left: 2px solid var(--forest); border-bottom: 2px solid var(--forest); transform: rotate(-45deg);
}
.demo-tag {
  font-weight: 700; white-space: nowrap; font-size: .75rem; color: #e6f1dc;
  padding: 4px 9px; border-radius: 7px; border: 1px solid #b6d1ba66; background: #ffffff10;
}
.main { padding-block: 23px 18px; }
.page-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 19px; }
.page-head h1 { font-size: clamp(1.42rem, 3.1vw, 2.04rem); line-height: 1.5; }
.page-head p { margin-top: 4px; color: var(--muted); line-height: 1.85; }
.page-actions, .toolbar-pair { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.page-actions { flex: none; }
.compact-field { display: grid; gap: 4px; color: var(--muted); font-size: .76rem; font-weight: 700; }
.compact-field :is(select, input), textarea, input[type="file"] {
  border: 1px solid #cddbd0; border-radius: 8px; padding: 6px 9px;
  min-height: 39px; background: #fff; color: var(--ink); width: 100%;
}
.compact-field :is(select, input) { font-weight: 400; }
.button {
  min-height: 39px; padding: 7px 13px; border: 1px solid transparent; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .82rem; font-weight: 700; line-height: 1.55; white-space: nowrap;
}
.button.small { min-height: 34px; padding: 5px 11px; font-size: .76rem; }
.button.primary { color: #fff; background: var(--green); }
.button.primary:enabled:hover { background: var(--forest); }
.button.secondary { border-color: #cfddd1; background: var(--paper); color: var(--forest); }
.button.secondary:enabled:hover { background: var(--soft-green); }
.role-content { display: grid; gap: 18px; }
.section-gap { display: grid; gap: 9px; }
.section-title {
  display: flex; justify-content: space-between; align-items: baseline;
  flex-wrap: wrap; gap: 3px 14px;
}
.section-title h2, .panel h2 { font-size: 1.02rem; line-height: 1.7; }
.section-title > span { color: var(--muted); font-size: .76rem; }
.class-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 10px; }
.class-card {
  display: grid; gap: 8px; width: 100%; min-width: 0; padding: 13px;
  color: var(--ink); background: var(--paper); border: 1px solid var(--line);
  border-radius: 11px; text-align: start;
}
.class-card.clickable:hover { border-color: #78a28d; }
.class-card[aria-pressed="true"] {
  border-color: #74a589; box-shadow: inset 0 0 0 1px #74a589; background: #f8fcf5;
}
.class-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; }
.class-top strong { font-size: .88rem; }
.class-ratio { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 8px; flex-wrap: wrap; }
.class-ratio bdi { font-size: 1.27rem; font-weight: 700; line-height: 1.5; }
.class-ratio > span, .class-card small { color: var(--muted); font-size: .74rem; }
.meter {
  display: block; height: 6px; border-radius: 10px; background: #e7eee7; overflow: hidden;
}
.meter > span { display: block; height: 100%; background: #2b7964; border-radius: inherit; }
.status-pill {
  width: max-content; max-width: 100%; flex: none; padding: 2px 7px; border-radius: 6px;
  background: #eaeff4; color: #35546b; font-size: .68rem; font-weight: 700; line-height: 1.7;
}
.status-pill.closed { background: #e5f1df; color: #315627; }
.status-pill.waiting { background: #f9efd6; color: #775219; }
.status-pill.replied { background: #e7eff6; color: #2c5074; }
.status-pill.new { background: #f1edec; color: #635250; }
.panel {
  border: 1px solid var(--line); border-radius: 12px; min-width: 0;
  background: var(--paper); box-shadow: 0 3px 12px #193a2207;
}
.panel-head, .panel-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px 12px; padding: 12px 16px; flex-wrap: wrap;
}
.panel-head { border-bottom: 1px solid var(--line); min-height: 66px; }
.panel-head p, .muted, .panel-help { color: var(--muted); font-size: .77rem; line-height: 1.75; }
.panel-help { margin: 0 16px 5px; }
.segments {
  display: flex; flex-wrap: wrap; gap: 3px; padding: 3px;
  border-radius: 8px; background: #edf3ec;
}
.segments button {
  border: 0; background: transparent; padding: 5px 9px; min-height: 34px;
  color: var(--muted); font-size: .78rem; font-weight: 700; border-radius: 6px;
}
.segments button[aria-pressed="true"] { background: #fff; color: var(--forest); box-shadow: 0 1px 4px #16322216; }
.roster-list, .case-list { margin: 0; padding: 0; list-style: none; }
.roster-list li {
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px 10px; padding: 7px 16px; border-top: 1px solid #edf1ec; min-height: 48px;
}
.student-name { font-weight: 700; line-height: 1.65; }
.mark-controls { display: flex; gap: 6px; flex: none; }
.mark {
  min-height: 34px; padding: 4px 11px; border: 1px solid #d3ddd4; border-radius: 7px;
  background: #fff; color: var(--muted); font-weight: 700; font-size: .76rem;
}
.mark.present[aria-pressed="true"] { background: #e5f1df; color: #28582d; border-color: #a6c79e; }
.mark.absent[aria-pressed="true"] { background: #f9e9e4; color: #883f34; border-color: #e4bcb4; }
.panel-footer { background: #f8faf6; border-radius: 0 0 12px 12px; border-top: 1px solid var(--line); }
.responsive-table { overflow: auto; }
table { width: 100%; border-collapse: collapse; text-align: start; min-width: 460px; }
th, td { text-align: start; padding: 8px 12px; border-top: 1px solid #edf1ec; font-size: .79rem; }
thead th { background: #f3f7f1; color: var(--muted); }
tbody th, .strong { font-weight: 700; }
.school-summary {
  display: grid; grid-template-columns: minmax(215px, 1fr) 1.45fr; gap: 14px;
  background: linear-gradient(132deg, #21594c, #123c34 72%);
  border-radius: 13px; padding: 19px 20px; color: white;
}
.summary-main h2 { font-size: 1rem; color: #f3fae9; line-height: 1.65; }
.summary-main p { color: #e0eee4; font-size: .75rem; line-height: 1.8; }
.summary-value { display: block; font-size: 1.93rem; font-weight: 700; line-height: 1.4; }
.summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-self: stretch; }
.summary-grid > div { border: 1px solid #deede24d; border-radius: 8px; padding: 8px 10px; background: #ffffff12; }
.summary-grid dt { color: #eaf4e8; font-size: .72rem; line-height: 1.75; }
.summary-grid dd { font-size: 1.42rem; font-weight: 700; overflow-wrap: anywhere; }
.summary-grid small { color: #eaf4e8; font-size: .73rem; font-weight: 400; }
.parent-summary .summary-main { align-self: center; }
.parent-summary .summary-main h2 { font-size: 1.2rem; }
.case-list li {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(125px, max-content) max-content;
  align-items: center; gap: 8px 12px; padding: 10px 16px; border-top: 1px solid #edf1ec;
}
.case-list li:first-child { border-top: 0; }
.case-facts {
  display: flex; flex-wrap: wrap; gap: 0 10px; color: var(--muted);
  font-size: .72rem; line-height: 1.85;
}
.case-excerpt { margin-top: 1px; color: var(--muted); font-size: .73rem; line-height: 1.8; overflow-wrap: anywhere; }
.director-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.director-grid > div { padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--paper); }
.director-grid dt { color: var(--muted); font-size: .75rem; }
.director-grid dd { font-weight: 700; font-size: 1.6rem; line-height: 1.5; }
.director-bottom { display: grid; grid-template-columns: 1.45fr 1fr; gap: 13px; align-items: stretch; }
.message {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px;
  margin-bottom: 12px; padding: 9px 12px; border-radius: 7px; font-size: .81rem;
}
.message.success { background: #e5f1df; color: #2c572d; }
.message.error { background: #f8e9e4; color: #823e34; }
.empty { padding: 22px 16px; color: var(--muted); text-align: center; font-size: .83rem; }
.footer { padding-top: 17px; color: var(--muted); font-size: .73rem; }
.case-dialog {
  width: min(610px, calc(100% - 26px)); max-height: min(90vh, 860px); padding: 0;
  border: 1px solid var(--line); border-radius: 13px; background: #fff; color: var(--ink);
  box-shadow: 0 14px 50px #173e3045; overflow: auto;
}
.case-dialog::backdrop { background: #142e27a0; }
.dialog-head {
  position: sticky; top: 0; z-index: 1; display: flex; align-items: start; justify-content: space-between;
  gap: 10px; padding: 14px 16px; background: #f6f9f4; border-bottom: 1px solid var(--line);
}
.dialog-head h2 { margin-top: 3px; font-size: 1.08rem; }
.dialog-head p { color: var(--muted); font-size: .77rem; }
.close-button {
  border: 1px solid #d0ded0; color: var(--forest); background: white;
  border-radius: 7px; font: 1.5rem/1.05 Arial, sans-serif; width: 36px; height: 36px;
}
.dialog-content { padding: 12px 16px 16px; display: grid; gap: 12px; }
.dialog-content .message { margin: 0; }
.case-thread { display: grid; gap: 7px; }
.case-thread > div { padding: 8px 10px; border-radius: 8px; background: #f3f7f1; }
.thread-heading { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 2px 8px; }
.thread-heading time { color: var(--muted); font-size: .72rem; }
.case-thread h3, .case-form label, .case-form legend { font-size: .81rem; font-weight: 700; }
.case-thread p, .case-thread a {
  font-size: .81rem; line-height: 1.9; overflow-wrap: anywhere; white-space: pre-wrap;
}
.case-thread .resolved-entry { background: #eaf4e4; }
.case-form { display: grid; gap: 6px; }
.case-form.review { border-top: 1px solid var(--line); padding-top: 12px; }
.case-form textarea { display: block; resize: vertical; min-height: 58px; }
.case-form label small { font-weight: 400; color: var(--muted); }
.case-form fieldset { margin: 0 0 3px; padding: 0; border: 0; }
.case-form legend { padding: 0; margin-bottom: 3px; }
.review-options { display: flex; gap: 5px 15px; flex-wrap: wrap; }
.review-options label { display: flex; align-items: center; gap: 6px; min-height: 30px; cursor: pointer; }
.review-options input { accent-color: var(--green); }
.case-actions { display: flex; justify-content: end; margin-top: 3px; }
.field-error { color: #8b3b32; font-size: .76rem; }
@media (max-width: 920px) {
  .page-head { align-items: start; flex-direction: column; gap: 9px; }
  .director-bottom { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  body { font-size: .85rem; }
  .topbar-inner, .main { padding-inline: 13px; }
  .topbar-inner { min-height: 58px; }
  .brand-symbol { width: 36px; height: 36px; border-radius: 9px; }
  .main { padding-block: 15px; }
  .page-head { margin-bottom: 13px; }
  .page-actions { flex: auto; }
  .page-actions :is(input, select), .case-form textarea { font-size: 1rem; }
  .page-actions select { max-width: 195px; }
  .role-content { gap: 12px; }
  .class-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .class-card { padding: 8px 9px; gap: 5px; }
  .panel-head, .panel-toolbar { padding: 9px 12px; }
  .roster-list li, .case-list li { padding-inline: 12px; }
  .school-summary { grid-template-columns: 1fr; padding: 12px; gap: 9px; }
  .summary-grid { gap: 5px; }
  .summary-grid > div { padding: 5px 6px; }
  .summary-grid dd { font-size: 1.23rem; }
  .case-list li { grid-template-columns: minmax(0, 1fr) max-content; gap: 4px 7px; }
  .case-list li > div { grid-column: 1 / -1; }
  .case-list li > button { justify-self: end; }
  .director-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dialog-head, .dialog-content { padding-inline: 11px; }
}

.account-bar { display: flex; align-items: center; gap: 12px; }
.account-name { display: grid; gap: 1px; line-height: 1.4; }
.account-name span { color: #d8ece2; font-size: .73rem; }
.account-button {
  background: #ffffff10; border-color: #b6d1ba77; color: #f5fdf8;
  min-height: 36px; padding-inline: 10px;
}
.account-button:enabled:hover { background: #ffffff24; }
.workspace-label { font-size: .77rem; font-weight: 700; color: var(--green) !important; }
.workspace-label span { color: #739485; padding-inline: 2px; }
.workspace-error { padding-bottom: 0; }
.retry-button { margin-top: 10px; }
.login-main { padding-block: 26px 30px; }
.login-intro {
  overflow: hidden; isolation: isolate; position: relative;
  padding: clamp(20px, 4vw, 43px); border-radius: 17px; margin-bottom: 24px;
  background: linear-gradient(125deg, #0d3b32 16%, #205e4f 100%); color: #f8fbf5;
}
.login-intro::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none; inset: 0;
  background: repeating-radial-gradient(circle at 12% 105%, transparent 0 26px, #d6ebcb18 27px 28px, transparent 29px 52px);
  mask-image: linear-gradient(90deg, #000 12%, transparent 54%);
}
.login-intro h1 { font-size: clamp(1.58rem, 4vw, 2.4rem); line-height: 1.6; }
.login-intro p { max-width: 60ch; color: #e0efe7; line-height: 1.85; }
.login-school { font-size: .8rem; font-weight: 700; color: #d5e8b7 !important; margin-bottom: 5px; }
.login-accounts { display: grid; gap: 19px; }
.account-group { display: grid; gap: 8px; }
.account-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 265px), 1fr)); gap: 9px; }
.account-card {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px; min-height: 69px;
  text-align: start; background: var(--paper); border: 1px solid var(--line); border-radius: 11px;
  box-shadow: 0 2px 5px #15352306;
}
.account-card:enabled:hover { border-color: #75a18d; background: #fbfdfa; }
.account-icon, .child-avatar {
  display: grid; place-items: center; flex: none; inline-size: 34px; block-size: 34px;
  color: #245947; background: #e7f1e5; border-radius: 9px; font: 700 .94rem/1.3 var(--display);
}
.account-icon.instruction { color: #485e33; background: #e9f0dc; }
.account-icon.deputy { color: #345968; background: #e7f0f1; }
.account-icon.director { color: #5d4d2d; background: #f1ebda; }
.account-icon.parent { color: #6b4c4a; background: #f3e9e7; }
.account-card-text { display: grid; gap: 2px; min-width: 0; }
.account-card-text strong { line-height: 1.5; }
.account-card-text > span, .account-enter { font-size: .75rem; color: var(--muted); }
.account-enter { margin-inline-start: auto; flex: none; color: var(--green); font-weight: 700; }
.children-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 15px; }
.children-list button {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 8px; align-items: center;
  border: 1px solid var(--line); border-radius: 9px; padding: 7px 10px; background: white; text-align: start;
}
.children-list button[aria-pressed="true"], .drill-button[aria-pressed="true"] {
  border-color: #79a58b; background: #eef6eb;
}
.children-list .child-avatar { grid-row: 1 / 3; }
.children-list small { color: var(--muted); font-size: .72rem; }
.assignment-list {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 8px; padding: 12px;
}
.assignment-field {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; align-items: end;
  min-width: 0; padding: 10px; border-radius: 9px; background: #f6f9f4;
}
.assignment-field .button { min-height: 39px; }
.drill-roster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.drill-roster li { min-width: 0; }
.drill-roster li:nth-child(even) { border-inline-start: 1px solid #edf1ec; }
.drill-meter { width: clamp(28px, 5vw, 70px); margin-inline-start: auto; }
.attendance-chart {
  display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 3px;
  list-style: none; margin: 0; padding: 12px 12px 15px;
}
.attendance-chart li { display: grid; gap: 4px; text-align: center; font-size: .66rem; }
.chart-column {
  align-items: end; display: grid; grid-template-rows: 100%; justify-self: center; width: min(67%, 34px); height: 112px;
  border-radius: 4px; overflow: hidden; background: #edf3ed;
}
.chart-column > span { display: block; background: linear-gradient(#43a189, #236853); border-radius: 4px 4px 0 0; }
.chart-percentage { color: var(--ink); font-weight: 700; white-space: nowrap; line-height: 1.4; }
.attendance-chart time { color: var(--muted); line-height: 1.4; }
.absence-chart { display: grid; gap: 10px; padding: 13px 16px 15px; color: var(--muted); }
.chart-total strong { font-size: 1.45rem; color: var(--ink); line-height: 1.25; }
.stacked-chart { display: flex; border-radius: 5px; height: 12px; overflow: hidden; background: #edf3ed; }
:is(.stacked-chart, .chart-legend) .excused { background: #44806a; }
:is(.stacked-chart, .chart-legend) .unexcused { background: #8f554b; }
:is(.stacked-chart, .chart-legend) .open { background: #b18439; }
.chart-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.chart-legend li { display: flex; align-items: center; gap: 7px; }
.chart-legend i { display: block; width: 8px; height: 8px; border-radius: 2px; }
.chart-legend strong { margin-inline-start: auto; color: var(--ink); }
@media (max-width: 620px) {
  .account-name > strong { font-size: .75rem; }
  .account-name > span { font-size: .65rem; }
  .account-bar { gap: 5px; }
  .account-button { font-size: .68rem; padding-inline: 5px; }
  .login-main { padding-block: 15px 22px; }
  .login-intro { margin-bottom: 16px; }
  .login-accounts { gap: 13px; }
  .drill-roster { grid-template-columns: 1fr; }
  .drill-roster li:nth-child(even) { border-inline-start: 0; }
  .attendance-chart { padding-inline: 8px; }
  .attendance-chart li { font-size: .6rem; }
  .chart-column { height: 93px; }
}

@media (max-width: 375px) {
  .brand { gap: 6px; }
  .brand strong { font-size: 1rem; }
  .brand div > span { font-size: .65rem; }
  .brand-symbol { inline-size: 32px; block-size: 32px; }
  .topbar-inner { gap: 5px; }
  .account-name span { display: none; }
}