/* Modern styling for Student Average Calculator plugin */
:root{
	--sac-bg: #ffffff;
	--sac-panel: #fafcff;
	--sac-primary: #2d9cdb;
	--sac-primary-dark: #2387c6;
	--sac-success: #2ecc71;
	--sac-danger: #e74c3c;
	--sac-muted: #6b7280;
	--sac-border: #e6eef8;
	--sac-radius: 10px;
}

/* container */
.sac-container{
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Naskh Arabic", sans-serif;
	background: var(--sac-bg);
	padding: 18px;
	border-radius: var(--sac-radius);
	border: 1px solid var(--sac-border);
	box-shadow: 0 6px 20px rgba(20,30,60,0.04);
	max-width: 980px;
	margin: 14px auto;
}

/* layout of selection row */
.sac-container form:first-of-type{ display: flex; gap: 10px; align-items:center; flex-wrap:wrap; margin-bottom:12px; }
.sac-container select[name="level"], .sac-container select[name="type"]{
	padding: 1px 12px; border-radius:8px; border:1px solid var(--sac-border); background:#fff; min-width:160px;
}

/* inputs */
.sac-o, .sac-c, .sac-t, .sac-subject-avg{
	border: 1px solid var(--sac-border);
	padding: 8px 10px;
	border-radius: 8px;
	box-sizing: border-box;
	width: 8ch;
	min-width: 6ch;
	text-align: center;
	font-family: monospace;
	transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
.sac-subject-avg[readonly]{ background: #f7fff8; color: #0b6623; border-color: rgba(46,204,113,0.12); }

.sac-invalid{ border-color: var(--sac-danger) !important; box-shadow: 0 4px 18px rgba(231,76,60,0.08) !important; background:#fff7f7 !important; }
.sac-valid{ border-color: var(--sac-success) !important; box-shadow: 0 6px 20px rgba(46,204,113,0.06) !important; background:#f7fff8 !important; }

/* buttons unified */
button[name="calc"], button[name="load"]{
	background-color: var(--sac-primary);
	color: #fff; border: none; padding: 10px 14px; border-radius: 8px; cursor:pointer; font-weight:600;
}
button[name="calc"]:hover, button[name="load"]:hover{ background:var(--sac-primary-dark); }
button[name="calc"]:focus, button[name="load"]:focus{ outline: 3px solid rgba(45,156,219,0.16); outline-offset:2px; }

/* table modern */
.sac-results{ width:100%; border-collapse:separate; border-spacing:0; margin-top:14px; box-shadow: 0 2px 10px rgba(12,20,40,0.03); border-radius:8px; overflow:hidden; }
.sac-results th{ background:#f4f8fb; padding:12px 14px; text-align:left; color:var(--sac-muted); font-weight:600; }
.sac-results td{ background:#fff; padding:12px 14px; border-top:1px solid #f1f5f9; }
.sac-results tr:first-child td{ border-top:0; }

.sac-selection{ font-weight:700; margin:8px 0 12px; padding:8px 12px; background:#eef6ff; border:1px solid #dbeeff; display:inline-block; border-radius:6px; }

/* responsive */
@media (max-width:700px){
	.sac-container{ padding:12px; }
	.sac-container form:first-of-type{ flex-direction:column; align-items:stretch; }
	.sac-results th, .sac-results td{ padding:10px; font-size:14px; }
}

/* Select styling for Arabic text and RTL support */
.sac-select{
	min-width: 180px;
	padding: 1px 12px;
	border-radius: 8px;
	border: 1px solid var(--sac-border);
	background: #fff;
	color: #0b1720;
	font-size: 15px;
	direction: rtl; /* ensure Arabic reads right-to-left inside the select */
	text-align: right; /* align selected text to right */
	-moz-appearance: menulist; /* keep native appearance where possible */
	-webkit-appearance: menulist-button;
}
.sac-select option{ direction: rtl; text-align: right; }

/* ensure select placeholder (empty option) is visible */
.sac-select option[value=""]{ color: #6b7280; }