/* Alzubair 2027 — inside app visual identity matching navy/gold login. Screen only. */
@media screen {
#app.layout{--navy:#172653;--accent:#233b76;--border:#e5e8f0;--shadow:0 7px 24px rgba(16,29,64,.055);background:#f5f6fa;color:#24334f}
#app .sidebar{background:linear-gradient(165deg,#192b60 0%,#101c41 100%)!important;box-shadow:-4px 0 27px rgba(14,23,48,.15)}
#app .identity{border-color:rgba(220,182,108,.27)}
#app .identity img{border:2px solid #d8b36c;background:#fff;object-fit:contain}
#app .sidebar .nav-label{color:#cbb88c}
#app .sidebar nav button{color:#dfe5f2}
#app .sidebar nav button.active,#app .sidebar nav button[aria-current=page]{background:rgba(216,179,108,.16)!important;color:#fff!important;border-right:3px solid #d8b36c!important}
#app .sidebar nav button:hover{background:rgba(255,255,255,.09)}
#app .sidebar .nav-icon{color:#e0bd7d}
#app .sidebar #logout{border-color:rgba(216,179,108,.4);color:#fff}
#app main>header{background:#fff;border-bottom:1px solid #e5e7ef}
#app main>header h1,#app .section-intro h2,#app .panel h2,#app .panel h3{color:#182b5b}
#app .top-context strong{color:#213767}
#app .card,#app .panel{border-color:#e5e9f1;box-shadow:0 5px 22px rgba(19,31,71,.045)}
#app .stat strong,#app .count-chip{color:#1b356e}
#app .stat-icon,#app .avatar{background:#f4ebda;color:#79531c}
#app .welcome{background:linear-gradient(110deg,#152657,#263f7d)!important;box-shadow:0 13px 29px rgba(21,39,88,.15)}
#app .welcome h2 span{color:#e9c780}
/* Do not recolor all buttons: many inputs, suggestion rows and icon controls are buttons. */
#app button.primary-action,#app button.primary{background-color:#203770}
#app button.primary-action,#app button.primary{background:linear-gradient(105deg,#17285c,#29467e)!important;color:#fff;border-color:transparent}
#app button.light{background:#edf0f8;color:#23396c}
#app button.danger{background:#a73548;color:#fff}
#app button:focus-visible,#app input:focus-visible,#app select:focus-visible{outline:2px solid #bc9857;outline-offset:2px}
#app input:focus,#app select:focus{border-color:#c29e62}
#app .tablewrap th,#app table th{background:#f0f2f8;color:#293d69}
#app .tablewrap tbody tr:hover{background:rgba(233,220,188,.13)}
#app .eyebrow{color:#9a7231}
#app .user-pill{border-color:#dfe4ed}
}
@media print{#app.layout{--navy:#102e48;--accent:#087da5}}

@media screen {
/* Student search: a single crisp focus ring and light, legible suggestion menu. */
#app .v929-suggest{position:relative;min-width:0;isolation:isolate}
#app .v929-suggest>input:focus{outline:none!important;border:2px solid #c19b57!important;box-shadow:0 0 0 3px rgba(193,155,87,.16)!important}
#app .v929-suggest-panel{z-index:1050!important;background:#fff!important;color:#182d54!important;border:1px solid #cbd4e5!important;border-radius:0 0 12px 12px!important;box-shadow:0 12px 22px rgba(17,32,70,.13)!important;overflow-x:hidden}
#app .v929-suggest-choice{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:3px!important;background:#fff!important;color:#182d54!important;padding:9px 13px!important;text-align:right!important;border:0!important;border-bottom:1px solid #ecedf2!important;border-radius:0!important;box-shadow:none!important;line-height:1.5!important}
#app .v929-suggest-choice strong{color:#172d55!important;font-size:13px!important;font-weight:700!important}
#app .v929-suggest-choice small{color:#64758d!important;font-size:11px!important}
#app .v929-suggest-choice:hover,#app .v929-suggest-choice:focus-visible{background:#f2f5fb!important;outline:0!important}
#app .v929-suggest-choice:active{background:#e7ecf5!important}
#app button.light{background:#edf0f8!important;color:#23396c!important}
#app button.danger{background:#a73548!important;color:#fff!important}
#app button:disabled{opacity:.55}
}

@media screen {
/* One unified focus treatment for searchbox + generic suggestion wrapper. */
#app .searchbox{border:1px solid #cfd7e6!important;border-radius:12px!important;box-shadow:none!important;outline:none!important;background:#fff!important;transition:border-color .15s,box-shadow .15s}
#app .searchbox:focus-within{border-color:#b58d4b!important;box-shadow:0 0 0 3px rgba(181,141,75,.13)!important;outline:none!important}
#app .searchbox .v929-suggest{border:0!important;outline:0!important;box-shadow:none!important;background:transparent!important}
#app .searchbox .v929-suggest>input,
#app .searchbox>input{border:0!important;outline:0!important;box-shadow:none!important;background:transparent!important;border-radius:0!important}
#app .searchbox .v929-suggest>input:focus,
#app .searchbox .v929-suggest>input:focus-visible,
#app .searchbox>input:focus,
#app .searchbox>input:focus-visible{border:0!important;outline:0!important;box-shadow:none!important}
#app .searchbox .v929-suggest-panel{border:1px solid #cbd4e5!important;background:#fff!important}
}

/* Unified search fields throughout all administration sections — screen only. */
@media screen {
 #app .searchbox,
 #app .searchbox.suggest-anchor,
 #app .suggest-input-wrap,
 #app .v927-picker,
 #app .transfer-search-anchor {box-sizing:border-box;min-width:0;max-width:100%}
 #app .searchbox{background:#fff!important;border:1px solid #cdd6e4!important;border-radius:11px!important;outline:0!important;box-shadow:none!important}
 #app .searchbox:focus-within{border-color:#ad884d!important;outline:0!important;box-shadow:0 0 0 2px rgba(173,136,77,.16)!important}
 #app .searchbox input,
 #app .searchbox .v929-suggest>input{background:transparent!important;border:0!important;outline:0!important;box-shadow:none!important;min-width:0!important;max-width:100%;width:100%;box-sizing:border-box}
 #app .searchbox input:focus,#app .searchbox input:focus-visible{border:0!important;outline:0!important;box-shadow:none!important}
 #app .v929-suggest{min-width:0;max-width:100%;box-sizing:border-box}
 #app input[type=search]:not(.searchbox input):not(#transferred-filter),
 #app input[id$="-search"]:not(.searchbox input):not(#transferred-filter){
   max-width:100%;box-sizing:border-box
 }
 #app input[type=search]:not(.searchbox input):not(#transferred-filter):focus,
 #app input[id$="-search"]:not(.searchbox input):not(#transferred-filter):focus{
   outline:0!important;border-color:#ad884d!important;box-shadow:0 0 0 2px rgba(173,136,77,.16)!important
 }
 #app .v929-suggest-panel,
 #app .suggest-list,
 #app .v927-options,
 #app .transfer-name-suggestions{background:#fff!important;color:#1b3157!important;border:1px solid #ccd5e5!important;box-shadow:0 11px 23px rgba(17,34,70,.13)!important;z-index:1050}
 #app .v929-suggest-choice,
 #app .suggest-option,
 #app .v927-choice,
 #app .transfer-suggestion{background:#fff!important;color:#1b3157!important;border-radius:0!important;box-shadow:none!important}
 #app .v929-suggest-choice:hover,
 #app .suggest-option:hover,
 #app .v927-choice:hover,
 #app .transfer-suggestion:hover{background:#f1f4fa!important;color:#1b3157!important}
 #app .v929-suggest-choice small,
 #app .suggest-option small,
 #app .v927-choice small,
 #app .transfer-suggestion small{color:#61758e!important}
}
@media screen and (max-width:760px) {
 #app .searchbox,#app .searchbox.suggest-anchor{max-width:100%;min-width:0}
 #app .v929-suggest,#app .suggest-input-wrap{width:100%;min-width:0}
 #app input[type=search]{font-size:16px}
}

/* Global quick search: isolated, compact, single-border component. */
@media screen {
 #app .global-search-panel .suggest-anchor {width:100%;max-width:520px;min-width:0;position:relative}
 #app .global-search-panel .suggest-input-wrap {display:flex;align-items:center;gap:8px;width:100%;height:40px;min-height:40px;padding:0 11px;box-sizing:border-box;background:#fff!important;border:1px solid #cad4e3!important;border-radius:10px!important;outline:0!important;box-shadow:none!important}
 #app .global-search-panel .suggest-input-wrap:focus-within {border-color:#ae8a50!important;box-shadow:0 0 0 2px rgba(174,138,80,.13)!important}
 #app .global-search-panel .suggest-input-wrap>span {flex:0 0 auto;width:20px;font-size:18px;line-height:1;color:#61748c!important;text-align:center}
 #app .global-search-panel input#school-global-search {display:block;flex:1 1 auto;width:100%;min-width:0;max-width:100%;height:36px;min-height:0;margin:0!important;padding:7px 1px!important;background:transparent!important;border:0!important;outline:0!important;box-shadow:none!important;border-radius:0!important;color:#1a3156;font-size:13px;line-height:20px;box-sizing:border-box}
 #app .global-search-panel input#school-global-search:focus,#app .global-search-panel input#school-global-search:focus-visible {border:0!important;outline:0!important;box-shadow:none!important}
 #app .global-search-panel input#school-global-search::placeholder {color:#6c7787;opacity:1;font-size:13px;font-weight:400}
 #app .global-search-panel .suggest-list {background:#fff!important;border:1px solid #cad4e3!important;border-radius:0 0 10px 10px!important;box-shadow:0 12px 22px rgba(15,30,60,.13)!important;color:#1a3156!important;z-index:1100}
 #app .global-search-panel .suggest-option {background:#fff!important;color:#1a3156!important}
 #app .global-search-panel .suggest-option:hover {background:#f1f4fa!important}
}
@media screen and (max-width:760px){
 #app .global-search-panel .suggest-anchor {max-width:100%}
 #app .global-search-panel input#school-global-search,#app .global-search-panel input#school-global-search::placeholder {font-size:16px}
}

/* Global search: prevent browser's native search clear icon from overlapping RTL text. */
@media screen{
 #app .global-search-panel #school-global-search{-webkit-appearance:none;appearance:none;direction:rtl;text-align:right;padding-inline:7px!important;min-width:0}
 #app .global-search-panel #school-global-search::-webkit-search-decoration,
 #app .global-search-panel #school-global-search::-webkit-search-cancel-button,
 #app .global-search-panel #school-global-search::-webkit-search-results-button,
 #app .global-search-panel #school-global-search::-webkit-search-results-decoration{display:none!important;-webkit-appearance:none}
 #app .global-search-panel .suggest-input-wrap{overflow:hidden}
 #app .global-search-panel .suggest-list{max-height:min(360px,50vh);overflow-y:auto;overscroll-behavior:contain}
 #app .global-search-panel .suggest-option{min-height:53px;padding:9px 13px!important;line-height:1.35}
 #app .global-search-panel .suggest-option strong{font-size:14px}
 #app .global-search-panel .suggest-option small{font-size:12px}
}

/* Monthly exam class filter: prevent label/select overlap. */
@media screen{
 #monthly-exams-page .me-toolbar label.me-grade-label{display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;gap:8px!important;position:static!important;min-width:220px;max-width:100%;height:auto!important;line-height:1.5!important}
 #monthly-exams-page .me-toolbar .me-grade-label>span{display:block!important;position:static!important;transform:none!important;margin:0!important;padding:0!important;font-size:13px;line-height:20px;color:#20335c}
 #monthly-exams-page .me-toolbar .me-grade-label>select{display:block!important;position:static!important;width:100%;height:42px;min-height:42px;max-width:100%;margin:0!important;padding:7px 12px!important;box-sizing:border-box!important;border:1px solid #cbd4e3!important;border-radius:9px!important;background:#fff!important;color:#1a3158!important;font-size:15px;line-height:1.4!important;outline:0!important;box-shadow:none!important}
 #monthly-exams-page .me-toolbar .me-grade-label>select:focus{border-color:#b18c4e!important;box-shadow:0 0 0 2px rgba(177,140,78,.14)!important;outline:0!important}
}