/* قِمَّة — واجهات المدرسة (تعتمد على متغيرات الثيم الحالية) */
.sc-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.sc-tab{padding:8px 16px;border-radius:999px;border:1px solid var(--border,#d9e0ea);background:var(--card,#fff);color:var(--text,#1f2937);font-weight:600;font-size:var(--fs-sm,.9rem);text-decoration:none}
.sc-tab:hover{border-color:var(--primary)}
.sc-tab.is-active{background:var(--primary);border-color:var(--primary);color:#fff}
.sc-card{background:var(--card,#fff);border:1px solid var(--border,#e2e8f0);border-radius:16px;padding:22px;margin-bottom:22px}
.sc-card>h3{margin:0 0 14px;font-size:1.05rem}
.sc-card>p.sc-hint{margin:-6px 0 14px;color:var(--muted,#64748b);font-size:var(--fs-sm,.9rem)}
.sc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;align-items:end}
.sc-grid .form-group{margin-bottom:0}
.sc-grid .sc-wide{grid-column:1/-1}
.sc-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.sc-inline{display:inline-flex;gap:6px;align-items:center;margin:0}
.sc-btn-sm{padding:5px 12px !important;font-size:var(--fs-sm,.85rem) !important}
.sc-danger{border-color:var(--danger,#c0392b) !important;color:var(--danger,#c0392b) !important}
.sc-muted{color:var(--muted,#64748b);font-size:var(--fs-sm,.9rem)}
.sc-split{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media (max-width:860px){.sc-split{grid-template-columns:1fr}}
.sc-chips{display:flex;flex-wrap:wrap;gap:8px}
.sc-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;background:var(--surface-2,#eef2f7);font-size:var(--fs-sm,.85rem)}
.sc-chip form{margin:0}
.sc-chip button{border:0;background:none;color:var(--danger,#c0392b);cursor:pointer;font-size:1rem;line-height:1;padding:0}
.sc-kpi{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px;margin-bottom:22px}
.sc-kpi>a{display:block}
.sc-kpi>a>div,.sc-kpi>div{background:var(--card,#fff);border:1px solid var(--border,#e2e8f0);border-radius:14px;padding:16px}
.sc-kpi>a>div:hover{border-color:var(--primary)}
.sc-kpi strong{display:block;font-size:1.35rem;margin-bottom:4px}
.sc-kpi span{color:var(--muted,#64748b);font-size:var(--fs-sm,.85rem)}
.sc-pwd{display:flex;gap:6px}
.sc-pwd .form-control{flex:1}
.sc-ttgrid th,.sc-ttgrid td{vertical-align:top;min-width:120px}
.sc-ttcell{font-size:var(--fs-sm,.88rem)}
.sc-ttcell.is-filled{background:var(--surface-2,#f4f7fb)}
.sc-ttcell strong{display:block}
.sc-break td{background:var(--surface-2,#eef2f7)}
.sc-celledit{margin-top:6px}
.sc-celledit summary{cursor:pointer;color:var(--primary);font-weight:700}
.sc-celledit form{display:grid;gap:6px;margin-top:6px;min-width:190px}
.sc-ttcell.is-busy{background:rgba(220,38,38,.08)}
.sc-ttgrid .sc-today{background:rgba(37,99,235,.07)}
.sc-iconbtn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;border:1px solid var(--border,#d9e0ea);background:var(--card,#fff);color:var(--text,#1f2937);cursor:pointer;padding:0;text-decoration:none}
.sc-iconbtn:hover{border-color:var(--primary);color:var(--primary)}
.sc-iconbtn.is-danger:hover{border-color:#dc2626;color:#dc2626}
.sc-icons{display:inline-flex;gap:6px;align-items:center;flex-wrap:nowrap}
.sc-modal{border:0;border-radius:18px;padding:0;width:min(640px,94vw);max-height:90vh;background:var(--card,#fff);color:var(--text,#1f2937);box-shadow:0 20px 60px rgba(15,23,42,.35)}
.sc-modal::backdrop{background:rgba(15,23,42,.5)}
.sc-modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border,#e2e8f0);position:sticky;top:0;background:inherit}
.sc-modal-head h3{margin:0;font-size:1.05rem}
.sc-modal-x{border:0;background:transparent;font-size:1.6rem;line-height:1;cursor:pointer;color:var(--muted,#64748b)}
.sc-modal-body{padding:20px;overflow:auto;max-height:calc(90vh - 64px)}
.sc-modes{display:grid;gap:10px}
.sc-mode{display:flex;gap:12px;align-items:flex-start;border:1.5px solid var(--border,#d9e0ea);border-radius:14px;padding:12px 14px;cursor:pointer}
.sc-mode input{margin-top:5px}
.sc-mode strong{display:block}
.sc-mode em{display:block;font-style:normal;color:var(--muted,#64748b);font-size:var(--fs-sm,.85rem)}
.sc-mode:has(input:checked){border-color:var(--primary);background:rgba(37,99,235,.06)}
.sc-mode-limited:has(input:checked){border-color:#d97706;background:rgba(217,119,6,.08)}
.sc-mode-blocked:has(input:checked){border-color:#dc2626;background:rgba(220,38,38,.07)}
.sc-bar{height:8px;border-radius:99px;background:var(--border,#e2e8f0);overflow:hidden;min-width:90px}
.sc-bar>i{display:block;height:100%;background:#16a34a}
.sc-bar.is-overdue>i{background:#dc2626}
.sc-bar.is-partial>i{background:#d97706}
.sc-pagehead{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-bottom:18px}
.sc-pagehead h2{margin:0;font-size:1.25rem}
.sc-pagehead .sc-meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.sc-strip{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;background:var(--card,#fff);border:1px solid var(--border,#e2e8f0);border-radius:14px;padding:10px 16px;margin-bottom:18px}
.sc-strip form{display:inline-flex;gap:10px;align-items:center;margin:0}
.sc-sub{border:1px solid var(--border,#e2e8f0);border-radius:16px;margin-bottom:16px;overflow:hidden;background:var(--card,#fff)}
.sc-sub>summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1.4fr repeat(4,minmax(90px,1fr)) auto;gap:12px;align-items:center;padding:14px 18px}
.sc-sub>summary::-webkit-details-marker{display:none}
.sc-sub[open]>summary{border-bottom:1px solid var(--border,#e2e8f0);background:rgba(148,163,184,.08)}
.sc-sub .sc-subbody{padding:14px 18px}
.sc-sub small{display:block;color:var(--muted,#64748b);font-size:.78rem}
.sc-sub b{display:block}
@media (max-width:860px){.sc-sub>summary{grid-template-columns:1fr 1fr}}
.sc-tabs a.sc-tab{white-space:nowrap}
.sc-chev{transition:transform .15s}
.sc-sub[open] .sc-chev{transform:rotate(180deg)}


/* Mobile table readability: preserve column widths and scroll the table instead of
   forcing Arabic words into narrow vertical fragments. */
.ql-wrap,
.q-table-wrap {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto !important;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
}
.ql-table,
.q-table-wrap > table.data-table {
  width: max-content;
  min-width: 760px;
  table-layout: auto;
}
.ql-table th,
.ql-table td,
.q-table-wrap > table.data-table th,
.q-table-wrap > table.data-table td {
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
  vertical-align: middle;
}
.ql-table td:first-child,
.q-table-wrap > table.data-table td:first-child {
  min-width: 130px;
  white-space: normal;
  overflow-wrap: anywhere;
}
.ql-table td:last-child,
.q-table-wrap > table.data-table td:last-child {
  min-width: 100px;
}
@media (max-width: 650px) {
  .ql-wrap,
  .q-table-wrap {
    border-radius: 12px;
    scrollbar-width: thin;
  }
  .ql-table { min-width: 820px; }
  .q-table-wrap > table.data-table { min-width: 700px; }
  .ql-table th,
  .ql-table td,
  .q-table-wrap > table.data-table th,
  .q-table-wrap > table.data-table td {
    padding: 10px 12px;
    line-height: 1.5;
  }
}



/* V5: theme-aware modal and popup surfaces.
   Prefer the active theme tokens; retain legacy fallbacks for older pages. */
:where(dialog, .modal, .modal-content, .modal-dialog, .popup, .popup-content,
       .logout-modal-box, .sc-modal, .ce-dlg, .q-modal, .q-popover, .swal2-popup) {
  color: var(--theme-text, var(--text, var(--text-color, #1f2937)));
  background-color: var(--theme-surface, var(--surface, var(--card, var(--white, #ffffff))));
  border-color: var(--theme-border, var(--border, #dbe2ea));
}
:where(dialog, .modal, .modal-content, .modal-dialog, .popup, .popup-content,
       .logout-modal-box, .sc-modal, .ce-dlg, .q-modal, .q-popover, .swal2-popup)
:where(h1, h2, h3, h4, p, label, li, small, strong, span:not(.badge):not(.btn)) {
  color: inherit;
}
:where(dialog, .modal, .modal-content, .popup-content, .logout-modal-box, .sc-modal, .ce-dlg, .q-modal, .swal2-popup)
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) {
  color: var(--theme-text, var(--text, #1f2937));
  background-color: var(--theme-bg, var(--bg, var(--white, #ffffff)));
  border-color: var(--theme-border, var(--border, #dbe2ea));
}
:where(dialog, .modal, .modal-content, .popup-content, .logout-modal-box, .sc-modal, .ce-dlg, .q-modal, .swal2-popup)
:where(input, select, textarea)::placeholder {
  color: var(--theme-muted, var(--muted, #64748b));
  opacity: 1;
}
:where(dialog, .modal, .modal-content, .popup-content, .logout-modal-box, .sc-modal, .ce-dlg, .q-modal, .swal2-popup)
:where(.modal-header, .modal-footer, .sc-modal-head, .ce-dlg-head) {
  border-color: var(--theme-border, var(--border, #dbe2ea));
}
:where(dialog, .sc-modal, .ce-dlg)::backdrop {
  background: rgba(15, 23, 42, .52);
}
:where(.modal-backdrop, .popup-overlay, .q-modal-overlay) {
  background-color: var(--modal-backdrop, rgba(15, 23, 42, .52));
}
:where(.logout-modal-box) {
  background-color: var(--theme-surface, var(--surface, var(--white, #fff)));
  color: var(--theme-text, var(--text, #1f2937));
  border-color: var(--theme-border, var(--border, rgba(100,116,139,.2)));
}
:where(.logout-modal-box) :where(h3) {
  color: var(--theme-primary-dark, var(--primary-dark, var(--theme-primary, var(--primary, #334155))));
}
:where(.logout-modal-box) :where(p) {
  color: var(--theme-muted, var(--muted, #64748b));
}
:where(.logout-modal-box) :where(.btn:not(.btn-primary):not(.q-pop-danger)) {
  background-color: var(--theme-surface, var(--surface, #fff));
  color: var(--theme-primary, var(--primary, #334155));
  border-color: var(--theme-border, var(--border, #dbe2ea));
}
:where(.logout-modal-box) :where(.btn-primary) {
  background-color: var(--theme-primary, var(--primary, #334155));
  border-color: var(--theme-primary, var(--primary, #334155));
  color: var(--theme-primary-contrast, #fff);
}