:root {
	--ms-navy: #0b1f3a;
	--ms-navy-2: #163a66;
	--ms-blue: #1d4e89;
	--ms-blue-soft: #e7f0fa;
	--ms-surface: #f4f6f8;
	--ms-card: #ffffff;
	--ms-text: #122033;
	--ms-muted: #5c6b7a;
	--ms-line: #e4e9ef;
	--ms-radius: 16px;
	--ms-shadow: 0 12px 32px rgba(11, 31, 58, 0.08);
	/* Unread / pending counts — vivid on purpose so they cut through the navy UI */
	--ms-alert: #e11d48;
	--ms-alert-glow: rgba(225, 29, 72, 0.45);
}

/* Frappe notification pill/dot defaults to muted gray; force a loud numeric badge. */
@keyframes ms-alert-pulse {
	0%, 100% { box-shadow: 0 0 0 0 var(--ms-alert-glow); }
	50% { box-shadow: 0 0 0 6px transparent; }
}
body.masarat-desk .notification-count:not(.hidden),
.notification-count:not(.hidden) {
	background: var(--ms-alert) !important;
	color: #fff !important;
	font-weight: 800 !important;
	font-variant-numeric: tabular-nums;
	border: 2px solid #fff;
	animation: ms-alert-pulse 1.6s ease-out infinite;
}
/* Desktop navbar bell normally hides the digit as an 8px gray dot — show the number instead. */
body.masarat-desk .desktop-notification-icon .notification-count:not(.hidden),
.desktop-notification-icon .notification-count:not(.hidden) {
	top: -4px !important;
	right: -6px !important;
	inset-inline-end: -6px;
	min-width: 18px !important;
	width: auto !important;
	height: 18px !important;
	padding: 0 5px !important;
	border-radius: 999px !important;
	font-size: 11px !important;
	line-height: 14px !important;
	color: #fff !important;
	background: var(--ms-alert) !important;
	border: 2px solid #fff !important;
	overflow: visible !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
}
/* Sidebar pending pills (beat navy link color inheritance). */
body.masarat-desk .desk-sidebar .msa-pending,
body.masarat-desk .body-sidebar .msa-pending,
body.masarat-desk .item-anchor .msa-pending {
	background: var(--ms-alert) !important;
	color: #fff !important;
	border: 2px solid rgba(255, 255, 255, 0.95);
	font-weight: 800;
	animation: ms-alert-pulse 1.6s ease-out infinite;
}

/* DEC-UI-NAV-001: the school rail is retired; the native Frappe sidebar shows the school navigation
   (masarat/sidebar/masarat). These rules style the module landing pages. */
.msa-footnote { color: var(--ms-muted); font-size: .85rem; }
.msa-destination:focus-visible { outline: 3px solid var(--ms-blue); outline-offset: 2px; }
.msa-landing-search { display: block; width: 100%; max-width: 420px; min-height: 40px; margin-block: 16px 0; padding: 8px 12px; border: 1px solid var(--ms-line); border-radius: 10px; background: var(--card-bg, #fff); color: var(--text-color); }
.msa-landing-search:focus-visible { outline: 3px solid var(--ms-blue); outline-offset: 2px; }
.msa-destination[hidden] { display: none; }
/* Below 992px Frappe keeps only the last crumb (the title). On school routes Back stays beside it. */
@media (max-width: 991px) {
	body.msa-school-route .page-head .navbar-breadcrumbs li:first-child:has(> button.es-breadcrumbs__item) { display: flex; }
}
.msa-heading { padding: 24px; border: 1px solid var(--ms-line); border-radius: 18px; background: linear-gradient(115deg, var(--ms-blue-soft), var(--card-bg, #fff)); }
.msa-heading h2 { font-size: 1.6rem; font-weight: 750; color: var(--ms-navy); margin-block: 8px; }
.msa-heading p, .msa-sections > p { color: var(--ms-muted); margin-bottom: 0; line-height: 1.8; }
.msa-eyebrow { font-size: .85rem; color: var(--ms-blue); font-weight: 650; }
.msa-approve-banner {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
	padding: 20px 22px; border-radius: 18px; border: 1px solid #a5d6a7;
	background: linear-gradient(115deg, #e8f5e9, var(--card-bg, #fff));
}
.msa-approve-copy { min-width: min(100%, 280px); flex: 1; }
.msa-approve-copy strong { display: block; font-size: 1.15rem; font-weight: 750; color: #1b5e20; margin-block: 6px; }
.msa-approve-copy p { margin: 0; color: var(--ms-muted); line-height: 1.7; }
.msa-approve-counts { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 18px; }
.msa-approve-counts li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 8px; font-size: .95rem; color: var(--ms-navy, #0b1f3a); }
.msa-approve-counts b { font-size: 1.35rem; font-weight: 800; color: var(--ms-alert); font-variant-numeric: tabular-nums; }
.msa-approve-counts small { flex-basis: 100%; color: var(--ms-muted); font-size: .8rem; }
.msa-approve-btn {
	display: inline-flex !important; align-items: center; gap: 8px; min-height: 48px;
	padding: 12px 20px !important; font-size: 1rem !important; font-weight: 700 !important;
	border-radius: 12px !important; background: #2e7d32 !important; border-color: #2e7d32 !important;
}
.msa-approve-btn:hover { background: #1b5e20 !important; border-color: #1b5e20 !important; }
/* Queue buttons beside «فتح الاعتماد» (public/js/pending_badges.js): outlined, and gone while nothing waits. */
.msa-approve-btn.is-queue { background: #fff !important; color: #1b5e20 !important; border: 2px solid #2e7d32 !important; }
.msa-approve-btn.is-queue:hover { background: #e8f5e9 !important; }
.msa-approve-btn.msa-is-empty, .msa-approve-counts li.msa-is-empty { display: none !important; }
.msa-sections h2 { font-size: 1.15rem; font-weight: 700; }
.msa-destinations { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 14px; margin-block: 16px; }
.msa-destination { display: flex; flex-direction: column; align-items: start; gap: 10px; border: 1px solid var(--ms-line); background: var(--card-bg, #fff); border-radius: 16px; padding: 20px; min-width: 0; color: var(--text-color); text-decoration: none !important; }
.msa-destination:hover { border-color: var(--ms-blue); box-shadow: var(--ms-shadow); }
.msa-destination strong { font-size: 1rem; }
.msa-destination > span:not(.msa-destination-icon) { font-size: .85rem; color: var(--ms-muted); line-height: 1.8; }
.msa-destination-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--ms-blue-soft); color: var(--ms-blue); }
.msa-footnote { margin-block: 12px; }
.msa-empty { padding: 24px; } .msa-empty a { display: block; margin-top: 12px; }
/* Numbered path on HR / finance landings: one order, stay in Masarat. */
.msa-path {
	display: flex; flex-wrap: wrap; align-items: stretch; gap: 16px 20px;
	margin-block: 16px 8px; padding: 16px 18px; border-radius: 16px;
	border: 1px solid var(--ms-line); background: var(--card-bg, #fff);
}
.msa-path-copy { flex: 1 1 220px; min-width: 0; }
.msa-path-copy strong { display: block; font-size: 1.05rem; font-weight: 750; color: var(--ms-navy); margin-bottom: 6px; }
.msa-path-copy p { margin: 0; color: var(--ms-muted); line-height: 1.7; font-size: .92rem; }
.msa-path-steps { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.msa-path-step {
	display: inline-flex; align-items: center; gap: 8px; min-height: 40px;
	padding: 8px 12px; border-radius: 12px; border: 1px solid var(--ms-line);
	background: var(--ms-blue-soft); color: var(--ms-navy); text-decoration: none !important; font-weight: 650;
}
.msa-path-step:hover { border-color: var(--ms-blue); box-shadow: var(--ms-shadow); }
.msa-path-step b {
	display: grid; place-items: center; width: 26px; height: 26px; border-radius: 999px;
	background: var(--ms-blue); color: #fff; font-size: .85rem; font-variant-numeric: tabular-nums;
}
@media (max-width: 1100px) {
	.msa-heading { padding: 18px; } .msa-heading h2 { font-size: 1.3rem; }
}

html,
body,
button,
input,
textarea,
select,
.widget,
.desk-sidebar {
	font-family: "Noto Sans Arabic", "Noto Kufi Arabic", "Segoe UI", sans-serif;
}

html[dir="rtl"] .form-control,
html[dir="rtl"] .like-disabled-input,
html[dir="rtl"] input,
html[dir="rtl"] textarea {
	unicode-bidi: plaintext;
	text-align: start;
}

/* Login page: masarat/public/css/masarat-login.css (loaded by www/login.html only).
 * The brand panel below is shared by the registration and teacher-application pages. */
.masarat-brand {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 8px;
	padding: 56px 48px;
	background: linear-gradient(165deg, var(--ms-navy) 0%, var(--ms-navy-2) 58%, var(--ms-blue) 100%);
	color: #f7f4ef;
}

.masarat-mark {
	width: 72px;
	height: 72px;
	margin-bottom: 12px;
}

.masarat-wordmark {
	margin: 0;
	font-size: 56px;
	line-height: 1.1;
	font-weight: 700;
}

.masarat-kicker {
	margin: 0;
	letter-spacing: 0.28em;
	font-size: 13px;
	opacity: 0.8;
	font-family: "Noto Sans Arabic", sans-serif;
}

.masarat-tagline {
	margin: 18px 0 0;
	max-width: 16em;
	font-size: 20px;
	line-height: 1.7;
	opacity: 0.92;
}

.navbar {
	background: #fff;
	border-bottom: 1px solid var(--ms-line);
}

.layout-main {
	background: var(--ms-surface);
}

body.masarat-desk .desk-sidebar {
	background: linear-gradient(180deg, var(--ms-navy) 0%, #102848 55%, var(--ms-navy-2) 100%);
	color: #e8eef6;
	border-inline-start: 0;
}

body.masarat-desk .desk-sidebar .standard-sidebar-label,
body.masarat-desk .desk-sidebar .sidebar-item-label,
body.masarat-desk .desk-sidebar .item-anchor,
body.masarat-desk .desk-sidebar .sidebar-item-label a {
	color: #d7e2ef;
	font-family: "Noto Kufi Arabic", "Noto Sans Arabic", sans-serif;
	font-size: 13px;
}

body.masarat-desk .desk-sidebar .standard-sidebar-item,
body.masarat-desk .desk-sidebar .sidebar-item-container {
	border-radius: 12px;
	margin: 2px 10px;
}

body.masarat-desk .desk-sidebar .standard-sidebar-item.selected,
body.masarat-desk .desk-sidebar .sidebar-item-container:hover,
body.masarat-desk .desk-sidebar .desk-sidebar-item.selected {
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.06));
	border-radius: 12px;
}

body.masarat-desk .page-head .sidebar-toggle-btn {
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

body.masarat-home {
	background: var(--ms-surface);
}

body.masarat-home .layout-main {
	background: linear-gradient(180deg, #eef3f8 0%, var(--ms-surface) 220px);
}

body.masarat-home .layout-main-section {
	background: transparent;
	border: 0;
	box-shadow: none;
	padding-top: 8px;
}

body.masarat-home .page-head,
body.masarat-home .page-head .title-area {
	background: transparent;
}

body.masarat-home .page-title .title-text {
	font-family: "Noto Kufi Arabic", "Noto Sans Arabic", sans-serif;
	font-weight: 700;
	color: var(--ms-navy);
}

body.masarat-home .ce-header,
body.masarat-home .widget-group-title {
	font-family: "Noto Kufi Arabic", "Noto Sans Arabic", sans-serif;
	color: var(--ms-navy);
	letter-spacing: 0;
}

body.masarat-home .widget.number-widget-box {
	position: relative;
	overflow: hidden;
	min-height: 118px;
	padding: 18px 18px 16px;
	border: 1px solid rgba(29, 78, 137, 0.08);
	border-radius: 18px;
	background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
	box-shadow: 0 10px 28px rgba(11, 31, 58, 0.06);
}

body.masarat-home .widget.number-widget-box::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 14px;
	bottom: 14px;
	width: 4px;
	border-radius: 4px;
	background: linear-gradient(180deg, #3b82c4 0%, var(--ms-navy) 100%);
}

body.masarat-home .widget.number-widget-box .widget-head,
body.masarat-home .widget.number-widget-box .widget-title,
body.masarat-home .widget.number-widget-box .widget-label {
	color: var(--ms-muted);
	font-size: 13px;
	font-weight: 600;
}

body.masarat-home .widget.number-widget-box .number,
body.masarat-home .widget.number-widget-box .number-text {
	color: var(--ms-navy) !important;
	font-family: "Noto Kufi Arabic", "Noto Sans Arabic", sans-serif;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.2;
}

body.masarat-home .widget.dashboard-widget-box,
body.masarat-home .widget.chart-widget,
body.masarat-home .widget.shortcut-widget-box,
body.masarat-home .widget.links-widget-box {
	border: 1px solid rgba(29, 78, 137, 0.08);
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 10px 28px rgba(11, 31, 58, 0.05);
}

body.masarat-home .widget.shortcut-widget-box {
	min-height: 64px;
	padding: 8px 12px;
}

body.masarat-home .widget.shortcut-widget-box:hover {
	border-color: rgba(29, 78, 137, 0.28);
}

@media (max-width: 1024px) {
	body.masarat-home .page-head {
		background: #eef3f8;
		z-index: 2;
	}

	body.masarat-home .layout-main-section {
		padding-inline: 8px;
		padding-top: 56px;
	}

	body.masarat-home .widget.number-widget-box .number {
		font-size: 26px;
	}
}

@media (max-width: 420px) {
	body.masarat-home .widget.number-widget-box {
		min-height: 96px;
		padding: 14px 14px 12px;
	}

	/* Two cards per row leave little room: wrap the title instead of cutting it to "الطلاب — جميع…". */
	body.masarat-home .widget.number-widget-box .widget-title,
	body.masarat-home .widget.number-widget-box .widget-title .ellipsis {
		white-space: normal;
		overflow: visible;
		text-overflow: clip;
		line-height: 1.5;
	}

	body.masarat-home .widget.number-widget-box .number,
	body.masarat-home .widget.number-widget-box .number-text {
		font-size: 24px;
	}
}

.layout-main-section,
.widget.number-widget-box,
.widget.shortcut-widget-box,
.widget.links-widget-box,
.widget.dashboard-widget-box,
.widget.quick-list-widget-box {
	border: 1px solid var(--ms-line);
	border-radius: var(--ms-radius);
	box-shadow: var(--ms-shadow);
	background: var(--ms-card);
}

.widget.number-widget-box .number,
.widget.number-widget-box .number-text {
	color: var(--ms-navy);
	font-weight: 700;
}

.widget .widget-title,
.widget-group-title,
.ce-header {
	color: var(--ms-navy);
}

.list-row-empty,
.empty-state,
.no-result {
	color: var(--ms-muted);
}

.form-page .form-layout,
.layout-main-section .form-layout {
	border-radius: var(--ms-radius);
}

.masarat-portal {
	max-width: 880px;
	margin: 0 auto;
	padding: 32px 16px 64px;
	color: var(--ms-text);
}

.masarat-portal-head h1 {
	margin: 8px 0;
	color: var(--ms-navy);
}

.masarat-portal-card {
	background: var(--ms-card);
	border: 1px solid var(--ms-line);
	border-radius: var(--ms-radius);
	box-shadow: var(--ms-shadow);
	padding: 20px 22px;
	margin-top: 16px;
}

.masarat-portal-card h2 {
	margin-top: 0;
	color: var(--ms-navy);
	font-size: 22px;
}

.masarat-portal-denied {
	border-color: #f0c7c7;
}

.masarat-stored {
	color: var(--ms-muted);
	font-size: 13px;
}

/* ===================== Desk sidebar and drawer (D1) =====================
   Desk only (body.masarat-desk is set by masarat.js on the Arabic desk). Frappe gives the side
   column col-lg-2 (about 138px at 1024px); the workspace sidebar gets a fixed readable width
   instead, the main column takes the rest, and long Arabic labels wrap instead of being cut. */
@media (min-width: 992px) {
	body.masarat-desk .layout-side-section:has(.desk-sidebar) {
		flex: 0 0 232px;
		max-width: 232px;
	}

	body.masarat-desk .layout-side-section:has(.desk-sidebar) + .layout-main-section-wrapper {
		flex: 1 1 0;
		max-width: none;
		min-width: 0;
	}

	/* Wide pages (attendance sheets, timetables): keep the main column shrinkable so
	   inner overflow:auto/scroll cards get a real scrollport instead of growing the page. */
	body.masarat-desk .layout-main-section,
	body.masarat-desk .layout-main-section-wrapper .page-container,
	body.masarat-desk .page-body,
	body.masarat-desk .page-wrapper {
		min-width: 0;
		max-width: 100%;
	}
}

body.masarat-desk .desk-sidebar {
	/* Frappe draws sidebar icons with these variables; #383838 vanished on the dark blue. */
	--icon-stroke: #e3ecf7;
	--icon-fill: transparent;
	--icon-fill-bg: transparent;
	padding-block: 8px;
}

body.masarat-desk .desk-sidebar .standard-sidebar-item,
body.masarat-desk .desk-sidebar .sidebar-item-container {
	margin: 2px 6px;
}

body.masarat-desk .desk-sidebar .desk-sidebar-item {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 36px;
	padding-inline: 8px 4px;
	border-radius: 10px;
}

body.masarat-desk .desk-sidebar .item-anchor {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1 1 auto;
	min-width: 0;
	padding-block: 6px;
	text-decoration: none;
}

body.masarat-desk .desk-sidebar .sidebar-item-icon {
	flex: none;
	margin: 0;
}

body.masarat-desk .desk-sidebar .sidebar-item-icon .icon,
body.masarat-desk .desk-sidebar .drop-icon .icon,
body.masarat-desk .desk-sidebar .drop-icon .es-icon {
	stroke: #e3ecf7;
	color: #e3ecf7;
}

body.masarat-desk .desk-sidebar .sidebar-item-label {
	flex: 1 1 auto;
	min-width: 0;
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
	line-height: 1.4;
	color: #e3ecf7;
}

body.masarat-desk .desk-sidebar .drop-icon {
	flex: none;
	display: inline-grid;
	place-items: center;
	min-width: 28px;
	min-height: 28px;
	border-radius: 8px;
}

body.masarat-desk .desk-sidebar .desk-sidebar-item:hover,
body.masarat-desk .desk-sidebar .sidebar-item-container:hover > .desk-sidebar-item {
	background: rgba(255, 255, 255, 0.1);
}

body.masarat-desk .desk-sidebar .desk-sidebar-item.selected {
	background: rgba(255, 255, 255, 0.18);
	box-shadow: inset -3px 0 0 #8cc4ff;
}

html[dir="ltr"] body.masarat-desk .desk-sidebar .desk-sidebar-item.selected {
	box-shadow: inset 3px 0 0 #8cc4ff;
}

body.masarat-desk .desk-sidebar .desk-sidebar-item.selected .sidebar-item-label {
	color: #ffffff;
	font-weight: 700;
}

body.masarat-desk .desk-sidebar a:focus-visible,
body.masarat-desk .desk-sidebar button:focus-visible,
body.masarat-desk .desk-sidebar [tabindex]:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
	border-radius: 8px;
}

/* Phone and tablet drawer: Frappe's .overlay-sidebar is white with the blue block inside it. */
@media (max-width: 991px) {
	body.masarat-desk .overlay-sidebar {
		width: min(86vw, 340px) !important;
		padding: 0 !important;
		background: linear-gradient(180deg, var(--ms-navy) 0%, #102848 55%, var(--ms-navy-2) 100%) !important;
		overscroll-behavior: contain;
	}

	body.masarat-desk .overlay-sidebar .desk-sidebar {
		min-height: 100%;
		background: transparent;
		padding-bottom: 24px;
	}

	body.masarat-desk .overlay-sidebar .desk-sidebar-item {
		min-height: 44px;
	}

	body.masarat-desk .overlay-sidebar .item-anchor {
		min-height: 44px;
	}

	body.masarat-desk .overlay-sidebar .drop-icon {
		min-width: 44px;
		min-height: 44px;
	}

	body.masarat-desk .overlay-sidebar .masarat-drawer-head {
		position: sticky;
		top: 0;
		z-index: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
		padding: 8px 12px;
		background: var(--ms-navy);
		color: #ffffff;
		font-weight: 700;
	}
}

body.masarat-desk .masarat-drawer-head {
	display: none;
}

body.masarat-desk .masarat-drawer-close {
	display: inline-grid;
	place-items: center;
	min-width: 44px;
	min-height: 44px;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 10px;
	background: transparent;
	color: #ffffff;
	font-size: 22px;
	line-height: 1;
}

body.masarat-desk .masarat-drawer-close:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}

/* ===================== Dashboard indicators, chart, phone layout (D3–D5) ===================== */
body.masarat-home .masarat-scope-note {
	display: block;
	color: var(--ms-muted);
	font-size: 13px;
	line-height: 1.7;
}

body.masarat-home .widget.number-widget-box .widget-body:focus-visible {
	outline: 3px solid rgba(29, 78, 137, 0.45);
	outline-offset: 4px;
	border-radius: 12px;
}

body.masarat-home .widget.number-widget-box .widget-body {
	cursor: pointer;
}

body.masarat-home .masarat-chart-summary {
	margin: 4px 16px 14px;
	color: var(--ms-text);
	font-size: 14px;
	line-height: 1.8;
	unicode-bidi: plaintext;
}

body.masarat-home .masarat-chart-summary b {
	font-weight: 700;
}

body.masarat-home .masarat-chart-swatch {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	margin-inline-end: 5px;
	vertical-align: middle;
}

@media (max-width: 575px) {
	/* frappe-charts places one legend item too many per row (n > s instead of n >= s), so on phones the last
	   status is cut off. The summary below the chart carries the same labels, numbers and colours. */
	body.masarat-home .widget.dashboard-widget-box svg.frappe-chart .chart-legend {
		display: none;
	}
}

body.masarat-home .masarat-chart-error {
	margin: 12px 16px;
	padding: 10px 12px;
	border: 1px solid #f3c6c2;
	border-radius: 10px;
	background: #fdecea;
	color: #7a1c14;
	font-size: 14px;
}

@media (max-width: 575px) {
	/* One indicator card per row: two per row cut the titles and wrapped the fee amount (checked at 360/393). */
	body.masarat-home .widget.number-widget-box {
		min-height: 0;
		padding: 12px 12px 10px;
	}

	body.masarat-home .widget.number-widget-box .widget-title,
	body.masarat-home .widget.dashboard-widget-box .widget-title {
		white-space: normal;
		overflow: visible;
		text-overflow: clip;
		line-height: 1.4;
	}

	body.masarat-home .layout-main-section {
		padding-top: 48px;
	}

	body.masarat-home .ce-block {
		margin-bottom: 0;
	}

	body.masarat-home .widget.shortcut-widget-box {
		min-height: 52px;
	}
}

/* Indicator and chart titles carry the scope ("المعتمدة", "جميع الفترات"): wrap them at every width instead of cutting. */
body.masarat-home .widget.number-widget-box .widget-title,
body.masarat-home .widget.dashboard-widget-box .widget-title {
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
	line-height: 1.4;
}

/* Round 2: short scope line with per-indicator details, chart scope line, two indicator cards per phone row. */
body.masarat-home .masarat-scope-details {
	margin-top: 2px;
	color: var(--ms-muted);
	font-size: 13px;
	line-height: 1.7;
}

body.masarat-home .masarat-scope-details > summary {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	color: var(--ms-blue);
	font-weight: 600;
	cursor: pointer;
}

body.masarat-home .masarat-scope-details > summary:focus-visible {
	outline: 2px solid var(--ms-blue);
	outline-offset: 2px;
	border-radius: 6px;
}

body.masarat-home .masarat-scope-more > span {
	display: block;
}

body.masarat-home .masarat-chart-scope {
	margin-top: 2px;
	color: var(--ms-muted);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.5;
}

body.masarat-home .number-widget-box .card-actions a[data-masarat-button] {
	display: inline-grid;
	place-items: center;
	min-width: 32px;
	min-height: 32px;
	border-radius: 8px;
	cursor: pointer;
}

body.masarat-home .number-widget-box .card-actions a[data-masarat-button]:focus-visible {
	outline: 2px solid var(--ms-blue);
	outline-offset: 2px;
}

/* Titles now wrap instead of being cut, so two cards fit per row from 360px; below that, one per row. */
@media (min-width: 360px) and (max-width: 575px) {
	body.masarat-home .ce-block.col-xs-12:has(> .ce-block__content .number-widget-box),
	body.masarat-home .ce-block.col-xs-12:has(.number-widget-box) {
		flex: 0 0 50%;
		max-width: 50%;
	}

	body.masarat-home .widget.number-widget-box .number,
	body.masarat-home .widget.number-widget-box .number-text {
		white-space: nowrap;
	}
}

/* ===================== Desk sidebar collapse (desktop) =====================
   The button is added by masarat.js under the workspace sidebar. The sidebar column already has
   the page height on Workspaces, so the list scrolls and the button stays at the bottom. */
body.masarat-desk .masarat-collapse-btn {
	display: none;
}

@media (min-width: 992px) {
	body.masarat-desk .layout-side-section:has(> .list-sidebar > .desk-sidebar) {
		overflow: hidden;
		transition: flex-basis 0.25s ease, max-width 0.25s ease;
	}

	body.masarat-desk .layout-side-section > .list-sidebar:has(> .desk-sidebar) {
		display: flex;
		flex-direction: column;
		height: 100%;
		background: var(--ms-navy-2);
	}

	body.masarat-desk .list-sidebar > .desk-sidebar {
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
		scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
	}

	body.masarat-desk .masarat-collapse-btn {
		flex: none;
		display: flex;
		align-items: center;
		gap: 8px;
		min-height: 44px;
		margin: 6px;
		padding-inline: 12px;
		border: 1px solid rgba(255, 255, 255, 0.22);
		border-radius: 10px;
		background: rgba(255, 255, 255, 0.06);
		color: #e3ecf7;
		font-family: "Noto Kufi Arabic", "Noto Sans Arabic", sans-serif;
		font-size: 13px;
		white-space: nowrap;
		overflow: hidden;
	}

	body.masarat-desk .masarat-collapse-btn:hover {
		background: rgba(255, 255, 255, 0.14);
	}

	body.masarat-desk .masarat-collapse-btn:focus-visible {
		outline: 2px solid #ffffff;
		outline-offset: 2px;
	}

	body.masarat-desk .masarat-collapse-icon {
		flex: none;
		transition: transform 0.25s ease;
	}

	/* The arrow points to the screen edge the menu folds into, and back out when folded. */
	html[dir="rtl"] body.masarat-desk:not(.masarat-sidebar-collapsed) .masarat-collapse-icon,
	html:not([dir="rtl"]) body.masarat-desk.masarat-sidebar-collapsed .masarat-collapse-icon {
		transform: scaleX(-1);
	}

	/* Folded: icon rail */
	body.masarat-desk.masarat-sidebar-collapsed .layout-side-section:has(> .list-sidebar > .desk-sidebar) {
		flex: 0 0 64px;
		max-width: 64px;
		padding-inline: 0; /* Bootstrap's 15px column gutters would leave about 10px for each icon */
	}

	body.masarat-desk.masarat-sidebar-collapsed .desk-sidebar .sidebar-item-label,
	body.masarat-desk.masarat-sidebar-collapsed .desk-sidebar .section-title,
	body.masarat-desk.masarat-sidebar-collapsed .desk-sidebar .sidebar-item-control,
	body.masarat-desk.masarat-sidebar-collapsed .desk-sidebar .sidebar-child-item,
	body.masarat-desk.masarat-sidebar-collapsed .masarat-collapse-label {
		display: none !important;
	}

	body.masarat-desk.masarat-sidebar-collapsed .desk-sidebar .standard-sidebar-item,
	body.masarat-desk.masarat-sidebar-collapsed .desk-sidebar .sidebar-item-container {
		margin-inline: 6px;
	}

	body.masarat-desk.masarat-sidebar-collapsed .desk-sidebar .desk-sidebar-item {
		justify-content: center;
		min-height: 44px;
		margin-inline: 0;
		padding-inline: 0;
	}

	body.masarat-desk.masarat-sidebar-collapsed .desk-sidebar .item-anchor {
		flex: none;
		justify-content: center;
		width: 100%;
		min-height: 44px;
		padding-inline: 0;
	}

	body.masarat-desk.masarat-sidebar-collapsed .desk-sidebar .standard-sidebar-label {
		display: flex;
		justify-content: center;
		width: 100%;
		min-height: 32px;
	}

	body.masarat-desk.masarat-sidebar-collapsed .masarat-collapse-btn {
		justify-content: center;
		padding-inline: 0;
	}
}

/* —— Public registration / teacher apply (Saudi private-school shell) —— */
.masarat-reg-shell {
	min-height: 100vh;
	display: grid;
	grid-template-columns: minmax(240px, 38%) 1fr;
	background: var(--ms-surface);
	color: var(--ms-text);
}
.masarat-reg-shell .masarat-brand {
	min-height: 100%;
}
.masarat-reg-main {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 28px 20px 40px;
}
.masarat-reg-panel {
	width: min(440px, 100%);
	margin: 0 auto;
	background: var(--ms-card);
	border: 1px solid var(--ms-line);
	border-radius: var(--ms-radius);
	box-shadow: var(--ms-shadow);
	padding: 28px 22px 22px;
}
.masarat-reg-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}
.masarat-reg-langs a {
	font-size: 0.85rem;
	font-weight: 650;
	color: var(--ms-blue);
	text-decoration: none;
	margin-inline-start: 10px;
}
.masarat-reg-langs a[aria-current="true"] {
	color: var(--ms-navy);
	text-decoration: underline;
}
.masarat-reg-panel h1 {
	margin: 0 0 8px;
	font-size: clamp(1.25rem, 2.4vw, 1.55rem);
	font-weight: 750;
	color: var(--ms-navy);
	line-height: 1.35;
}
.masarat-reg-panel .hint {
	margin: 0 0 1.1rem;
	color: var(--ms-muted);
	font-size: 0.92rem;
	line-height: 1.7;
}
.masarat-reg-panel label {
	display: block;
	margin: 0.7rem 0 0.3rem;
	font-size: 0.88rem;
	font-weight: 700;
	color: var(--ms-navy);
}
.masarat-reg-panel input,
.masarat-reg-panel textarea {
	width: 100%;
	min-height: 46px;
	padding: 0.6rem 0.85rem;
	border: 1px solid #d5dde6;
	border-radius: 12px;
	background: #fbfcfd;
	color: var(--ms-text);
}
.masarat-reg-panel textarea { min-height: 88px; resize: vertical; }
.masarat-reg-panel input:focus,
.masarat-reg-panel textarea:focus {
	outline: 0;
	border-color: var(--ms-blue);
	box-shadow: 0 0 0 3px rgba(29, 78, 137, 0.16);
}
.masarat-reg-panel .chk {
	display: flex;
	gap: 0.55rem;
	align-items: flex-start;
	margin: 1rem 0 0.25rem;
	font-size: 0.9rem;
	line-height: 1.55;
	color: var(--ms-text);
}
.masarat-reg-panel .chk input {
	width: auto;
	min-height: auto;
	margin-top: 0.25rem;
}
.masarat-reg-panel .chk a { color: var(--ms-blue); font-weight: 650; }
.masarat-reg-panel button[type="submit"],
.masarat-reg-panel .btn-primary {
	width: 100%;
	margin-top: 1.05rem;
	min-height: 46px;
	border: 0;
	border-radius: 12px;
	background: var(--ms-navy);
	color: #fff;
	font-weight: 700;
	cursor: pointer;
}
.masarat-reg-panel button[type="submit"]:hover { background: var(--ms-blue); }
.masarat-reg-panel button[disabled] { opacity: 0.65; cursor: wait; }
.masarat-reg-panel .msg {
	display: none;
	margin-top: 1rem;
	padding: 0.85rem 0.95rem;
	border-radius: 12px;
	font-size: 0.92rem;
	line-height: 1.6;
}
.masarat-reg-panel .msg.ok {
	display: block;
	background: #e8f5ee;
	border: 1px solid #b7dfc6;
	color: #14532d;
}
.masarat-reg-panel .msg.err {
	display: block;
	background: #fdeeee;
	border: 1px solid #f0c2c2;
	color: #7f1d1d;
}
.masarat-reg-panel .links {
	margin-top: 1.25rem;
	font-size: 0.9rem;
	text-align: center;
	color: var(--ms-muted);
}
.masarat-reg-panel .links a { color: var(--ms-blue); font-weight: 650; }
.masarat-track-row {
	display: flex;
	gap: 0.5rem;
	align-items: stretch;
	margin: 0.5rem 0 0.25rem;
}
.masarat-track-row input {
	flex: 1;
	min-width: 0;
	font-family: ui-monospace, monospace;
	font-size: 0.85rem;
	direction: ltr;
}
.masarat-track-row button {
	flex: 0 0 auto;
	min-height: 42px;
	padding: 0 0.9rem;
	border: 0;
	border-radius: 10px;
	background: var(--ms-navy);
	color: #fff;
	font-weight: 650;
	cursor: pointer;
}
.masarat-reg-status {
	margin-top: 1.5rem;
	padding-top: 1.1rem;
	border-top: 1px solid var(--ms-line);
}
@media (max-width: 800px) {
	.masarat-reg-shell { grid-template-columns: 1fr; }
}
@media (max-width: 400px) {
	.masarat-reg-main { padding: 16px 12px 28px; }
	.masarat-reg-panel { padding: 20px 16px 16px; border-radius: 14px; }
}

/* Registration forms in steps (public/js/masarat-stepper.js). Without JavaScript the fieldsets stay one page. */
.masarat-reg-panel fieldset.ms-step { margin: 0; padding: 0; border: 0; min-width: 0; }
.masarat-reg-panel fieldset.ms-step + fieldset.ms-step { margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--ms-line); }
.masarat-reg-panel fieldset.ms-step > legend { font-size: 1rem; font-weight: 750; color: var(--ms-navy); margin: 0 0 .2rem; padding: 0; }
.masarat-reg-panel form.ms-stepped fieldset.ms-step + fieldset.ms-step { margin-top: 0; padding-top: 0; border-top: 0; }
/* With steps the legend repeats the step title shown above it; keep it for screen readers only. */
.masarat-reg-panel form.ms-stepped fieldset.ms-step > legend {
	position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.masarat-reg-panel fieldset.ms-step[hidden] { display: none; }
.ms-stepper { margin: 0 0 1rem; }
.ms-stepper-dots { display: flex; gap: 6px; margin: 0 0 .7rem; padding: 0; list-style: none; counter-reset: none; }
.ms-stepper-dots li {
	flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px;
	cursor: pointer; text-align: center; position: relative;
}
/* The line joining two dots, behind them. */
.ms-stepper-dots li + li::before {
	/* From the previous dot (inline-start side, 6px gap) to this one, leaving 16px around each dot. */
	content: ""; position: absolute; top: 15px; inset-inline-start: calc(-50% + 10px); width: calc(100% - 26px);
	height: 2px; background: var(--ms-line);
}
.ms-stepper-dots li.is-done + li::before, .ms-stepper-dots li.is-done + li.is-current::before { background: var(--ms-blue); }
.ms-dot {
	width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; position: relative; z-index: 1;
	font-weight: 750; font-size: .9rem; color: var(--ms-muted); background: #fff; border: 2px solid var(--ms-line);
	transition: background .2s, color .2s, border-color .2s;
}
.ms-stepper-dots li.is-current .ms-dot { color: #fff; background: var(--ms-navy); border-color: var(--ms-navy); box-shadow: 0 0 0 4px rgba(29, 78, 137, .14); }
.ms-stepper-dots li.is-done .ms-dot { color: #fff; background: var(--ms-blue); border-color: var(--ms-blue); font-size: 0; }
.ms-stepper-dots li.is-done .ms-dot::after { content: "✓"; font-size: .95rem; }
.ms-dot-label { font-size: .74rem; line-height: 1.35; color: var(--ms-muted); font-weight: 600; overflow-wrap: anywhere; }
.ms-stepper-dots li.is-current .ms-dot-label { color: var(--ms-navy); font-weight: 750; }
.ms-stepper-bar { height: 4px; border-radius: 4px; background: var(--ms-line); overflow: hidden; display: none; }
.ms-stepper-bar span { display: block; height: 100%; background: var(--ms-blue); border-radius: 4px; transition: width .25s; }
.ms-stepper-count { margin: 0; font-size: .82rem; color: var(--ms-muted); font-weight: 650; }
.ms-step-nav { display: flex; gap: 10px; margin-top: 1.1rem; }
.ms-step-nav > button { flex: 1 1 0; min-height: 46px; margin-top: 0 !important; border-radius: 12px; font-weight: 700; cursor: pointer; }
.ms-step-nav > button[hidden] { display: none; }
.ms-step-nav .ms-next { border: 0; background: var(--ms-navy); color: #fff; }
.ms-step-nav .ms-next:hover { background: var(--ms-blue); }
.ms-step-nav .ms-prev { flex: 0 0 34%; border: 1px solid #d5dde6; background: #fff; color: var(--ms-navy); }
.ms-step-nav .ms-prev:hover { background: var(--ms-blue-soft); }
.masarat-reg-panel [aria-invalid="true"] { border-color: #c62828 !important; box-shadow: 0 0 0 3px rgba(198, 40, 40, .12) !important; }
.ms-field-err { display: block; margin: .35rem 0 0; color: #b42318; font-size: .84rem; font-weight: 600; line-height: 1.5; }
.masarat-reg-panel .chk + .ms-field-err { margin-top: 0; }
.ms-review { display: grid; gap: 10px; margin: 0 0 .5rem; }
.ms-review:empty { display: none; }
.ms-review-group { border: 1px solid var(--ms-line); border-radius: 12px; padding: 10px 12px; background: #fbfcfd; }
.ms-review-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 4px; }
.ms-review-head strong { font-size: .88rem; color: var(--ms-navy); }
.ms-review-head .ms-edit {
	border: 0; background: none; padding: 2px 4px; color: var(--ms-blue); font-weight: 700; font-size: .84rem; cursor: pointer;
	width: auto; min-height: 0; margin: 0;
}
.ms-review dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; font-size: .86rem; }
.ms-review dt { color: var(--ms-muted); font-weight: 600; }
.ms-review dd { margin: 0; color: var(--ms-text); font-weight: 650; overflow-wrap: anywhere; }
.masarat-reg-panel .ms-review-hint { margin-bottom: .6rem; }
/* Narrow phones: the titles under the dots would wrap to four lines; show the bar and the "step x of y" line instead. */
@media (max-width: 380px) {
	.ms-dot-label { display: none; }
	.ms-stepper-dots { margin-bottom: .5rem; }
}

/* Registration pages on a phone (owner request 2026-11-02: «متوافق مع الموبايل»): a slim brand bar instead of the
   tall brand block, the form card from edge to edge, 16px fields (iOS zooms into smaller ones), and the step
   buttons fixed at the bottom of the screen within reach of the thumb. */
@media (max-width: 800px) {
	.masarat-reg-shell { min-height: 100dvh; align-content: start; grid-template-rows: auto 1fr; }
	.masarat-reg-shell .masarat-brand {
		min-height: 0; padding: 10px 16px; flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px;
		position: sticky; top: 0; z-index: 5;
	}
	.masarat-reg-shell .masarat-mark { width: 38px; height: 38px; margin: 0; border-radius: 10px; }
	.masarat-reg-shell .masarat-wordmark { font-size: 22px; line-height: 1; margin: 0; }
	.masarat-reg-shell .masarat-kicker { display: none; }
	.masarat-reg-shell .masarat-tagline {
		margin: 0; margin-inline-start: auto; font-size: .78rem; opacity: .85; text-align: end; line-height: 1.4; max-width: 50%;
	}
	.masarat-reg-main { padding: 0; justify-content: flex-start; }
	.masarat-reg-panel {
		width: 100%; border: 0; border-radius: 0; box-shadow: none; padding: 16px 16px 0; min-height: 100%;
	}
	.masarat-reg-panel h1 { font-size: 1.3rem; }
	.masarat-reg-panel .hint { font-size: .86rem; line-height: 1.65; margin-bottom: .9rem; }
	.masarat-reg-panel input, .masarat-reg-panel textarea { font-size: 16px; min-height: 48px; }
	.masarat-reg-panel .ms-step-nav {
		position: sticky; bottom: 0; z-index: 4; margin: 1rem -16px 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
		background: rgba(255, 255, 255, .96); border-top: 1px solid var(--ms-line);
		backdrop-filter: blur(6px);
	}
	.masarat-reg-panel .ms-step-nav > button { min-height: 50px; font-size: 1rem; }
	.masarat-reg-panel .links { padding-bottom: 20px; }
	.ms-stepper { margin-bottom: .8rem; }
}
/* The count line repeats the titles under the dots; it shows only where those titles are hidden. */
.ms-stepper-count { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 380px) {
	.ms-stepper-count { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
	.ms-stepper-bar { display: none; }
}

/* Registration language direction (overrides global Arabic-default website RTL assets when ?lang=en). */
html[dir="ltr"] .masarat-reg-shell,
html[dir="ltr"] .masarat-reg-panel {
	direction: ltr;
	text-align: left;
}
html[dir="ltr"] .masarat-reg-panel label,
html[dir="ltr"] .masarat-reg-panel .hint,
html[dir="ltr"] .masarat-reg-panel h1 {
	text-align: left;
}
html[dir="rtl"] .masarat-reg-shell,
html[dir="rtl"] .masarat-reg-panel {
	direction: rtl;
	text-align: right;
}

/* Student Attendance Tool roster (public/js/student_attendance_tool.js): the approved attendance statuses and
   colours on Desk. Rows use the section's full width; below 640px each row stacks and the statuses are 2×2. */
/* Frappe 16 caps a form section at 900px for reading; this tool's roster uses the page width instead. */
body[data-route^="Form/Student Attendance Tool"] .form-layout .section-body { max-width: none; }
.msa-att { display: grid; gap: 12px; container-type: inline-size; }
.msa-att-counters { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.msa-att-counter { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; border: 1px solid var(--ms-line); border-radius: 12px; background: var(--card-bg, #fff); min-width: 0; }
.msa-att-counter span { color: var(--ms-muted); font-size: .85rem; }
.msa-att-counter b { font-size: 1.5rem; line-height: 1; font-variant-numeric: tabular-nums; }
.msa-att-counter.is-total { background: #eef5fb; }
.msa-att-counter.is-done { background: #f4f6f8; }
.msa-att-counter.is-unmarked { background: #f7f8fa; }
.msa-att-counter.is-unmarked b { color: #5c6b7a; }
.msa-att-counter.is-present b { color: #0b6b45; }
.msa-att-counter.is-late { background: #fff8e8; }
.msa-att-counter.is-late b { color: #7a4e00; }
.msa-att-counter.is-absent b { color: #b42318; }
.msa-att-counter.is-excused { background: #eef5fb; }
.msa-att-counter.is-excused b { color: #1d5f93; }

/* DEF-019: datepicker year header must show four digits, never a clipped "26 →". */
.datepicker--nav-title,
.datepicker--cell-year {
	max-width: none !important;
	overflow: visible !important;
	text-overflow: clip !important;
	white-space: nowrap;
	font-variant-numeric: lining-nums tabular-nums;
}
.msa-att-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.msa-att-search { flex: 1 1 220px; min-width: 0; max-width: 420px; }
.msa-att-rule { margin: 0; color: var(--ms-muted); font-size: .82rem; }
.msa-att-rows { border: 1px solid var(--ms-line); border-radius: 14px; overflow: hidden; }
.msa-att-row { display: grid; grid-template-columns: 44px minmax(160px, 1fr) auto; gap: 12px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--ms-line); }
.msa-att-row:first-child { border-top: 0; }
.msa-att-row[hidden] { display: none; }
.msa-att-row.is-locked { background: #fafcfe; }
.msa-att-num { color: var(--ms-muted); font-variant-numeric: tabular-nums; }
.msa-att-name { font-weight: 650; min-width: 0; overflow-wrap: anywhere; }
.msa-att-pills { display: flex; flex-wrap: wrap; gap: 6px; border: 0; margin: 0; padding: 0; min-width: 0; }
.msa-att-pill { position: relative; display: inline-flex; align-items: center; gap: 4px; min-height: 36px; margin: 0; padding: 0 12px; border: 1px solid transparent; border-radius: 999px; font-weight: 700; font-size: .85rem; white-space: nowrap; cursor: pointer; }
.msa-att-pill input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: inherit; }
.msa-att-pill:has(input:focus-visible) { outline: 3px solid var(--ms-blue); outline-offset: 2px; }
.msa-att-pill[data-s='present'] { background: #e7f6ee; color: #0b6b45; border-color: #9ed9bc; }
.msa-att-pill[data-s='late'] { background: #fff4d6; color: #7a4e00; border-color: #e6c36a; }
.msa-att-pill[data-s='absent'] { background: #fde8e8; color: #9f2d2d; border-color: #f0b4b4; }
.msa-att-pill[data-s='excused'] { background: #e7f1fb; color: #1d5f93; border-color: #b7d4f0; }
.msa-att-pill[data-s='present']:has(input:checked) { background: #0f766e; color: #fff; border-color: #0f766e; }
.msa-att-pill[data-s='absent']:has(input:checked) { background: #b42318; color: #fff; border-color: #b42318; }
.msa-att-pill:has(input:disabled) { cursor: not-allowed; }
.msa-att-pill:has(input:disabled:not(:checked)) { opacity: .5; border-style: dashed; }
.msa-att-empty { margin: 0; padding: 16px; color: var(--ms-muted); }
@container (max-width: 640px) {
	.msa-att-counters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.msa-att-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
	.msa-att-num { display: none; }
	.msa-att-pills { display: grid; grid-template-columns: 1fr 1fr; }
	.msa-att-pill { min-height: 44px; justify-content: center; }
	.msa-att-search, .msa-att-toolbar .btn { max-width: none; width: 100%; }
}

/* «متابعة اليوم» on the overview (masarat.daily_watch) */
.msa-daily { margin: 0 0 18px; padding: 14px 16px; border: 1px solid var(--border-color); border-radius: 12px; background: var(--card-bg); }
.msa-daily h2 { font-size: 1.05rem; margin: 0 0 8px; }
.msa-daily-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.msa-daily-list a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; background: var(--bg-light-gray, var(--subtle-fg)); color: var(--text-color); text-decoration: none; }
.msa-daily-list b { min-width: 34px; text-align: center; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.msa-daily-list li.is-danger b { color: var(--red-600, #c0392b); }
.msa-daily-list li.is-warning b { color: var(--orange-600, #b7650b); }
.msa-daily-list li.is-info b { color: var(--blue-600, #1d4e89); }
.msa-daily-ok { margin: 0; color: var(--text-muted); }

/* ===================== Frappe 16 sidebar in the teacher portal's colours (owner 2026-11-03) =====================
   Frappe 16 draws the desk sidebar as .body-sidebar (the .desk-sidebar rules above were for Frappe 15 and no longer
   match). Same navy gradient, light text and active marker as public/teacher_portal/teacher_portal.css (.tp-sidebar). */
body.masarat-desk .body-sidebar {
	--masarat-side-ink: #d7e2ef;
	--masarat-side-ink-strong: #ffffff;
	--masarat-side-muted: #8fa6c2;
	--icon-stroke: #e3ecf7;
	--icon-fill: transparent;
	--icon-fill-bg: transparent;
	background: linear-gradient(180deg, #0b1f3a 0%, #102848 55%, #163a66 100%);
	border-inline-end-color: transparent;
	color: var(--masarat-side-ink);
}

body.masarat-desk .body-sidebar .item-anchor,
body.masarat-desk .body-sidebar .sidebar-item-label,
body.masarat-desk .body-sidebar .nav-item,
body.masarat-desk .body-sidebar .nav-item a,
body.masarat-desk .body-sidebar .sidebar-header,
body.masarat-desk .body-sidebar .sidebar-header *,
body.masarat-desk .body-sidebar .sidebar-user-button,
body.masarat-desk .body-sidebar .avatar-name-email,
body.masarat-desk .body-sidebar .standard-items-band * {
	color: var(--masarat-side-ink);
}

body.masarat-desk .body-sidebar .sidebar-item-icon .icon,
body.masarat-desk .body-sidebar .drop-icon .icon,
body.masarat-desk .body-sidebar .drop-icon .es-icon,
body.masarat-desk .body-sidebar .standard-items-band .icon,
body.masarat-desk .body-sidebar .sidebar-header .icon {
	stroke: #e3ecf7;
	color: #e3ecf7;
}

body.masarat-desk .body-sidebar .section-break,
body.masarat-desk .body-sidebar .section-break .sidebar-item-label {
	color: var(--masarat-side-muted) !important;
	font-weight: 700;
}

body.masarat-desk .body-sidebar .standard-sidebar-item:hover,
body.masarat-desk .body-sidebar .nav-item:hover,
body.masarat-desk .body-sidebar .sidebar-user-button:hover,
body.masarat-desk .body-sidebar .standard-items-band :is(a, button):hover {
	background: rgba(255, 255, 255, 0.1);
}

body.masarat-desk .body-sidebar .active-sidebar,
body.masarat-desk .body-sidebar .standard-sidebar-item.active-sidebar {
	background: rgba(255, 255, 255, 0.18);
	box-shadow: inset -3px 0 0 #8cc4ff;
}

html[dir="ltr"] body.masarat-desk .body-sidebar .active-sidebar {
	box-shadow: inset 3px 0 0 #8cc4ff;
}

body.masarat-desk .body-sidebar .active-sidebar .item-anchor,
body.masarat-desk .body-sidebar .active-sidebar .sidebar-item-label {
	color: var(--masarat-side-ink-strong);
	font-weight: 700;
}

body.masarat-desk .body-sidebar .divider {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.12);
}

body.masarat-desk .body-sidebar :is(a, button, [tabindex]):focus-visible {
	outline: 2px solid #8cc4ff;
	outline-offset: 2px;
}

/* The search box and keyboard hints on the dark sidebar. */
body.masarat-desk .body-sidebar :is(input, .search-bar, .awesomplete input) {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.16);
	color: #ffffff;
}

body.masarat-desk .body-sidebar .keyboard-shortcut {
	color: var(--masarat-side-muted);
}

/* A10 (2026-11-10c): HR subgroup labels are child URL links, not Section Breaks — Frappe opens a
   new top-level section for every Section Break, which leaked «الموظفون» / «الإجازات» out of HR. */
body.masarat-desk .body-sidebar a.item-anchor[href="#masarat-hr-group"] {
	pointer-events: none;
	cursor: default;
	opacity: 0.72;
	font-weight: 700;
	font-size: 0.72rem;
	letter-spacing: 0.02em;
	margin-top: 0.45rem;
	padding-top: 0.35rem;
	padding-bottom: 0.1rem;
}
body.masarat-desk .body-sidebar a.item-anchor[href="#masarat-hr-group"] .sidebar-item-icon {
	display: none;
}
body.masarat-desk .body-sidebar .nested-container > .sidebar-item-container:first-child a.item-anchor[href="#masarat-hr-group"] {
	margin-top: 0.15rem;
}
/* Early Leave («انصراف مبكر») in the desk attendance tool. */
.msa-att-pill[data-s='early'] { background: #eef0ff; color: #3b3f8f; border-color: #a9aee8; }
.msa-att-pill[data-s='early'].is-active, .msa-att-pill[data-s='early']:has(input:checked) { background: #4a4fb0; color: #fff; border-color: #4a4fb0; }
.msa-att-counter.is-early { background: #eef0ff; }