@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&display=swap');
/* AlKhubara unified visual and accessibility layer — RTL, desktop & mobile */
:root{--kh-green:#125e49;--kh-ink:#173a30;--kh-line:#dce7df;--kh-muted:#60766a;--kh-bg:#f5f7f6;--kh-focus:#d3e9db}
html{font-family:'Cairo',Tahoma,Arial,sans-serif;font-synthesis:none;-webkit-text-size-adjust:100%}
body,button,input,select,textarea{font-family:'Cairo',Tahoma,Arial,sans-serif!important}
body{color:var(--kh-ink);line-height:1.7}
h1,h2,h3{line-height:1.45;overflow-wrap:anywhere}
a{overflow-wrap:anywhere;text-underline-offset:3px}
button,input,select,textarea{max-width:100%;box-sizing:border-box}
button{transition:filter .16s ease,box-shadow .16s ease;touch-action:manipulation}
button:hover:not(:disabled){filter:brightness(.96)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--kh-focus)!important;outline-offset:2px}
button:disabled{cursor:not-allowed;opacity:.52}
input,select,textarea{min-height:43px}
input[type="checkbox"],input[type="radio"]{min-height:auto}
input[readonly]{background:#f2f5f2;color:#365448}
[hidden]{display:none!important}
.panel,.card,main{min-width:0}
.fields,.grid{min-width:0}
.fields>*{min-width:0}
.tablewrap,.wrap,.table-container,.kh-table-container{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
table{max-width:100%;border-collapse:collapse}
table th,table td{vertical-align:middle}
table tbody tr:hover{background:#f6faf7}
.toolbar{row-gap:10px}
.error,[role="alert"]{overflow-wrap:anywhere}
@media(max-width:680px){
 body{font-size:14px}
 main{padding:14px!important}
 .panel,.card{padding:15px!important;border-radius:12px}
 .toolbar{flex-wrap:wrap}
 h1{font-size:clamp(20px,5vw,25px)}
 h2{font-size:clamp(17px,4vw,21px)}
 table{font-size:12px}
 th,td{padding:9px 7px}
 button{min-height:42px}
 input,select,textarea{font-size:16px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
@media print{button,.toolbar,.tabs,nav{display:none!important}body{background:#fff!important;color:#111}main{max-width:100%;padding:0!important}.panel,.card{break-inside:avoid;box-shadow:none!important}}

/* Daily-use improvements: readable records, actions and forms */
:root{--kh-primary:#12684e;--kh-primary-dark:#0b523f;--kh-warning:#b86c29;--kh-danger:#b43c34}
body{font-size:14px;letter-spacing:0}
p{max-width:100%;overflow-wrap:break-word}
.panel,.card{box-shadow:0 3px 14px rgba(17,57,42,.035)}
.panel>h2:first-child,.card>h2:first-child{letter-spacing:-.15px}
label{color:#355749}
input:not([type="checkbox"]):not([type="radio"]),select,textarea{border:1px solid #c7d7ce;border-radius:9px;background-color:#fff;transition:border-color .15s,box-shadow .15s}
input:not([type="checkbox"]):not([type="radio"]):focus,select:focus,textarea:focus{border-color:var(--kh-primary)!important;box-shadow:0 0 0 3px rgba(18,104,78,.10)!important;outline:none!important}
input::placeholder,textarea::placeholder{color:#85988e}
button,.action{font-weight:750}
button:active:not(:disabled){transform:translateY(1px)}
button.danger{border:1px solid #e9c8c5!important;background:#fff3f2!important;color:#ad4038!important}
button.danger:hover:not(:disabled){background:#fce5e2!important}
table{width:100%;border-spacing:0}
table th{font-weight:800;color:#3a5f4d;background:#edf5ef}
table tbody tr:nth-child(even){background:#fafcfb}
table tbody tr:hover{background:#eaf5ed!important}
table td{overflow-wrap:break-word}
table button{font-size:12px!important;min-height:36px!important;margin:2px!important;padding:5px 10px!important;white-space:nowrap}
.wrap,.tablewrap,.kh-table-container{border-radius:9px}
[role="status"],[aria-live]{overflow-wrap:anywhere}
.status:not(:empty),#message:not(:empty),#formStatus:not(:empty),#listStatus:not(:empty){line-height:1.8}
:focus-visible{scroll-margin:18px}
@media(max-width:740px){
 .row,.toolbar{gap:8px}
 .fields,.grid{grid-template-columns:1fr!important}
 .fields>.full,.grid>.full{grid-column:1/-1}
 .navbtn{min-height:46px}
 .panel,.card{margin-bottom:12px}
 table{min-width:max-content;font-size:12px}
 table th,table td{white-space:normal}
 button{min-height:44px}
}
@media print{.panel,.card{box-shadow:none}table{min-width:0!important}a{color:inherit}}

.kh-password-field{position:relative;display:block;width:100%}
.kh-password-field input{padding-inline-end:74px!important;width:100%}
.kh-password-toggle{position:absolute;inset-inline-end:6px;inset-block-start:50%;transform:translateY(-50%);min-height:32px!important;min-width:55px!important;padding:5px 8px!important;border:1px solid #dce7df!important;background:#f2f7f3!important;color:#1d6147!important;border-radius:7px!important;font-size:12px!important;box-shadow:none!important}
.kh-password-toggle:hover{background:#e5f1e9!important;filter:none!important}
.kh-password-toggle:active{transform:translateY(-50%)!important}
[aria-invalid="true"]{border-color:#b9473f!important;box-shadow:0 0 0 2px #f8deda!important}

/* Group lesson student selector */
.student-picker{border:1px solid #d6e5da;border-radius:12px;padding:12px;background:#f9fcfa}
.student-picker .student-picker-search{width:100%;margin-bottom:9px;padding:9px 12px;background:#fff;border:1px solid #cbded0;border-radius:8px;min-height:42px}
.student-picker-count{font-size:12px;font-weight:800;padding:2px 1px 9px}
.student-picker-list{max-height:210px;overflow-y:auto;display:grid;gap:3px;scrollbar-width:thin}
.student-picker-option{display:flex!important;align-items:center;gap:12px;padding:9px 11px;border:1px solid transparent;border-radius:8px;cursor:pointer;font-weight:650;font-size:13px;margin:0!important;background:#fff}
.student-picker-option:has(input:checked){background:#eaf5ed;border-color:#b9daca;color:#115a41}
.student-picker-option:hover{border-color:#bdd7c4}
.student-picker-option input[type="checkbox"]{width:18px;height:18px;min-width:18px;accent-color:#12684e;cursor:pointer;flex:none}
.student-picker-empty{color:#6e7f73;padding:13px;text-align:center;font-size:13px}
@media(max-width:680px){.student-picker-list{max-height:250px}.student-picker-option{min-height:46px}.student-picker{padding:10px}}