/* ===================================================================== ABET Assessment Platform — interface stylesheet ONE stylesheet serves both directions. Every directional property is a CSS logical property (margin-inline-start, not margin-left), so setting dir="rtl" on mirrors the whole interface with no second file and no per-locale overrides. What must NOT mirror — numbers, percentages, course codes, formulas — is isolated with `unicode-bidi: isolate` in the .ltr-num rule. ===================================================================== */ :root{ --ink:#152131; --ink-2:#3d5060; --mut:#6b7c8c; --faint:#94a3b1; --line:#dce3ea; --line-2:#eef2f6; --bg:#f6f8fa; --panel:#fff; --panel-2:#fafcfd; --brand:#1f5c8f; --brand-2:#2d7ab8; --brand-ink:#0f3a5c; --brand-wash:#eaf2f9; --ok:#1d7a52; --ok-wash:#e7f4ee; --warn:#9a6708; --warn-wash:#fdf3e0; --bad:#a92f38; --bad-wash:#fceceE; --info:#2b5f8a; --info-wash:#e9f1f8; --r:7px; --r-sm:5px; --sh:0 1px 2px rgba(21,33,49,.05), 0 1px 3px rgba(21,33,49,.06); --sh-2:0 4px 14px rgba(21,33,49,.09); --nav-w:15rem; --f-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --f-ar:"Segoe UI","Noto Naskh Arabic","Geeza Pro",Tahoma,var(--f-sans); --f-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; background:var(--bg); color:var(--ink); font:15px/1.55 var(--f-sans); font-feature-settings:"tnum" 1; } body.rtl{font-family:var(--f-ar); font-size:15.5px; line-height:1.7} h1,h2,h3,h4{margin:0; font-weight:650; letter-spacing:-.01em; line-height:1.3} h1{font-size:1.5rem} h2{font-size:1.15rem} h3{font-size:1rem} h4{font-size:.9rem} p{margin:.5rem 0} a{color:var(--brand); text-decoration:none} a:hover{text-decoration:underline} hr{border:0; border-block-start:1px solid var(--line); margin:1.5rem 0} small{font-size:.82rem} /* Numbers, codes and formulas keep LTR order inside Arabic prose. */ .ltr-num,.code,.mono,td.num,th.num{ direction:ltr; unicode-bidi:isolate; font-variant-numeric:tabular-nums; } .mono,.code{font-family:var(--f-mono); font-size:.86em} .muted{color:var(--mut)} .faint{color:var(--faint)} .right{text-align:end} .center{text-align:center} .nowrap{white-space:nowrap} .skip{position:absolute; inset-inline-start:-9999px} .skip:focus{inset-inline-start:0; inset-block-start:0; z-index:99; background:var(--brand); color:#fff; padding:.6rem 1rem; border-radius:0 0 var(--r) 0} /* --------------------------------------------------------------- topbar */ .topbar{background:var(--brand-ink); color:#fff; position:sticky; inset-block-start:0; z-index:40} .topbar-in{display:flex; align-items:center; gap:1rem; padding:0 1.1rem; height:52px; max-width:1680px; margin-inline:auto} .brand{display:flex; align-items:center; gap:.5rem; color:#fff; font-weight:650; letter-spacing:-.01em} .brand:hover{text-decoration:none; opacity:.9} .brand-mark{font-size:1.15rem; opacity:.85} .topbar-actions{margin-inline-start:auto; display:flex; align-items:center; gap:.75rem} .quicksearch input{ background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); color:#fff; border-radius:var(--r-sm); padding:.35rem .7rem; inline-size:15rem; font:inherit; font-size:.86rem; } .quicksearch input::placeholder{color:rgba(255,255,255,.6)} .quicksearch input:focus{outline:2px solid rgba(255,255,255,.45); outline-offset:1px; background:rgba(255,255,255,.18)} .iconbtn{position:relative; color:#fff; opacity:.85; font-size:1.05rem; padding:.2rem .35rem} .iconbtn:hover{opacity:1; text-decoration:none} .iconbtn .dot{ position:absolute; inset-block-start:-2px; inset-inline-end:-4px; background:var(--bad); color:#fff; font-size:.62rem; font-style:normal; min-inline-size:1.05rem; text-align:center; border-radius:1rem; padding:.05rem .22rem; line-height:1.4; } .langswitch{color:#fff; opacity:.85; font-size:.84rem; border:1px solid rgba(255,255,255,.25); border-radius:var(--r-sm); padding:.25rem .6rem} .langswitch:hover{opacity:1; background:rgba(255,255,255,.1); text-decoration:none} .usermenu{display:flex; align-items:center; gap:.55rem; font-size:.85rem} .uname{opacity:.9} .linkbtn{background:none; border:0; color:#fff; opacity:.7; cursor:pointer; font:inherit; font-size:.82rem; padding:0} .linkbtn:hover{opacity:1; text-decoration:underline} /* ---------------------------------------------------------------- shell */ .shell{display:flex; min-block-size:calc(100vh - 52px - 42px); max-width:1680px; margin-inline:auto} .sidenav{inline-size:var(--nav-w); flex:0 0 var(--nav-w); background:var(--panel); border-inline-end:1px solid var(--line); padding:.85rem 0} .sidenav ul{list-style:none; margin:0; padding:0} .sidenav a{ display:flex; align-items:center; gap:.65rem; padding:.5rem 1.1rem; color:var(--ink-2); font-size:.89rem; border-inline-start:3px solid transparent; } .sidenav a:hover{background:var(--panel-2); color:var(--brand); text-decoration:none} .sidenav a.on{background:var(--brand-wash); color:var(--brand-ink); font-weight:600; border-inline-start-color:var(--brand)} .sidenav .ico{inline-size:1.1rem; text-align:center; opacity:.7; font-size:.9rem} .content{flex:1; min-inline-size:0; padding:1.35rem 1.6rem 3rem} .foot{max-width:1680px; margin-inline:auto; padding:.8rem 1.6rem; color:var(--faint); font-size:.8rem; border-block-start:1px solid var(--line); display:flex; gap:.5rem} .foot .sep{opacity:.5} /* ------------------------------------------------------------ page head */ .pagehead{display:flex; align-items:flex-end; gap:1rem; flex-wrap:wrap; margin-block-end:1.15rem} .pagehead .sub{margin:.25rem 0 0; color:var(--mut); font-size:.88rem} .pagehead .actions{margin-inline-start:auto; display:flex; gap:.5rem; flex-wrap:wrap} .crumbs{font-size:.82rem; color:var(--mut); margin-block-end:.7rem} .crumbs a{color:var(--mut)} .crumbs a:hover{color:var(--brand)} .crumbs .sep{margin-inline:.4rem; opacity:.55} /* --------------------------------------------------------------- panels */ .panel{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh); margin-block-end:1.15rem; overflow:hidden} .panel-head{display:flex; align-items:center; gap:.75rem; padding:.7rem 1rem; border-block-end:1px solid var(--line-2); background:var(--panel-2)} .panel-head h2,.panel-head h3{font-size:.95rem} .panel-head .actions{margin-inline-start:auto; display:flex; gap:.4rem; align-items:center} .panel-body{padding:1rem} .panel-body.tight{padding:0} .panel-foot{padding:.6rem 1rem; border-block-start:1px solid var(--line-2); background:var(--panel-2); font-size:.84rem; color:var(--mut)} .grid{display:grid; gap:1.15rem} .grid.c2{grid-template-columns:repeat(auto-fit,minmax(21rem,1fr))} .grid.c3{grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))} .grid.c4{grid-template-columns:repeat(auto-fit,minmax(11.5rem,1fr))} /* ----------------------------------------------------------- stat tiles */ .tile{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:.85rem 1rem; box-shadow:var(--sh)} .tile .lab{font-size:.76rem; color:var(--mut); text-transform:uppercase; letter-spacing:.045em} .tile .val{font-size:1.75rem; font-weight:660; line-height:1.15; margin-block-start:.25rem; direction:ltr; unicode-bidi:isolate; font-variant-numeric:tabular-nums} body.rtl .tile .val{text-align:end} .tile .note{font-size:.79rem; color:var(--mut); margin-block-start:.15rem} .tile.ok .val{color:var(--ok)} .tile.bad .val{color:var(--bad)} .tile.warn .val{color:var(--warn)} .tile.info .val{color:var(--info)} /* --------------------------------------------------------------- tables */ .tablewrap{overflow-x:auto} table.data{inline-size:100%; border-collapse:collapse; font-size:.87rem} table.data th,table.data td{padding:.5rem .7rem; border-block-end:1px solid var(--line-2); text-align:start; vertical-align:top} table.data thead th{background:var(--panel-2); font-weight:620; font-size:.79rem; color:var(--ink-2); text-transform:uppercase; letter-spacing:.035em; border-block-end:1px solid var(--line); position:sticky; inset-block-start:0; z-index:1} table.data tbody tr:hover{background:var(--panel-2)} table.data td.num,table.data th.num{text-align:end} table.data tfoot td{font-weight:620; background:var(--panel-2); border-block-start:1px solid var(--line)} table.data .rowlink{font-weight:560} .empty{padding:2.4rem 1rem; text-align:center; color:var(--mut)} .empty .big{font-size:1.6rem; opacity:.35; display:block; margin-block-end:.4rem} /* --------------------------------------------------------------- badges */ .badge{display:inline-block; font-size:.73rem; font-weight:600; padding:.14rem .48rem; border-radius:1rem; border:1px solid transparent; white-space:nowrap; line-height:1.5} .badge-ok{background:var(--ok-wash); color:var(--ok); border-color:#bfe0d0} .badge-bad{background:var(--bad-wash); color:var(--bad); border-color:#f0cdd0} .badge-warn{background:var(--warn-wash); color:var(--warn); border-color:#eed9ab} .badge-info{background:var(--info-wash); color:var(--info); border-color:#c8dcec} .badge-muted{background:var(--line-2); color:var(--mut); border-color:var(--line)} /* ---------------------------------------------------------------- meter */ .meter{display:inline-block; position:relative; inline-size:7rem; block-size:.55rem; background:var(--line-2); border-radius:1rem; overflow:visible; vertical-align:middle} .meter-fill{display:block; block-size:100%; border-radius:1rem} .meter-ok{background:var(--ok)} .meter-warn{background:var(--warn)} .meter-bad{background:var(--bad)} .meter-info{background:var(--brand-2)} .meter-target{position:absolute; inset-block:-2px; inline-size:2px; background:var(--ink-2); opacity:.65} /* --------------------------------------------------------------- forms */ .field{margin-block-end:.9rem} .field > label{display:block; font-size:.82rem; font-weight:600; color:var(--ink-2); margin-block-end:.28rem} .field .hint{font-size:.78rem; color:var(--mut); margin-block-start:.22rem} .field .err{font-size:.78rem; color:var(--bad); margin-block-start:.22rem} input[type=text],input[type=email],input[type=password],input[type=number],input[type=date], input[type=search],input[type=file],select,textarea{ inline-size:100%; padding:.45rem .6rem; border:1px solid var(--line); border-radius:var(--r-sm); font:inherit; font-size:.9rem; background:#fff; color:var(--ink); } input:focus,select:focus,textarea:focus{outline:2px solid var(--brand-2); outline-offset:-1px; border-color:var(--brand-2)} input[aria-invalid=true],.field.has-err input,.field.has-err select{border-color:var(--bad)} textarea{min-block-size:5rem; resize:vertical; line-height:1.55} input[type=number]{direction:ltr; text-align:start} body.rtl input[type=number]{text-align:end} .row{display:flex; gap:.85rem; flex-wrap:wrap} .row > *{flex:1; min-inline-size:11rem} fieldset{border:1px solid var(--line); border-radius:var(--r); padding:.9rem 1rem; margin-block-end:1rem} legend{font-size:.82rem; font-weight:640; color:var(--ink-2); padding-inline:.4rem} .check{display:flex; align-items:center; gap:.45rem; font-size:.88rem} .check input{inline-size:auto} .btn{display:inline-flex; align-items:center; gap:.4rem; padding:.42rem .85rem; border-radius:var(--r-sm); border:1px solid var(--line); background:#fff; color:var(--ink-2); font:inherit; font-size:.86rem; font-weight:560; cursor:pointer; white-space:nowrap} .btn:hover{background:var(--panel-2); text-decoration:none; border-color:#c6d2dd} .btn-primary{background:var(--brand); border-color:var(--brand); color:#fff} .btn-primary:hover{background:var(--brand-2); border-color:var(--brand-2); color:#fff} .btn-danger{background:var(--bad); border-color:var(--bad); color:#fff} .btn-danger:hover{background:#8f2830; border-color:#8f2830; color:#fff} .btn-sm{padding:.24rem .55rem; font-size:.79rem} .btn:disabled{opacity:.5; cursor:not-allowed} .btnbar{display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; margin-block-start:1rem} .btnbar .spacer{margin-inline-start:auto} /* ---------------------------------------------------------------- flash */ .flash{padding:.6rem .95rem; border-radius:var(--r-sm); margin-block-end:1rem; font-size:.88rem; border:1px solid transparent} .flash-success{background:var(--ok-wash); color:var(--ok); border-color:#bfe0d0} .flash-error{background:var(--bad-wash); color:var(--bad); border-color:#f0cdd0} .flash-warning{background:var(--warn-wash); color:var(--warn); border-color:#eed9ab} .flash-info{background:var(--info-wash); color:var(--info); border-color:#c8dcec} /* --------------------------------------------------------------- filter */ .filters{display:flex; gap:.6rem; flex-wrap:wrap; align-items:flex-end; margin-block-end:1rem; background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:.75rem .9rem} .filters .field{margin:0; min-inline-size:9rem} .filters .field > label{font-size:.75rem} /* ------------------------------------------------------------ pagination */ .pager{display:flex; gap:.3rem; align-items:center; justify-content:center; margin-block-start:1rem; font-size:.85rem; flex-wrap:wrap} .pager a,.pager span{padding:.28rem .6rem; border:1px solid var(--line); border-radius:var(--r-sm); background:#fff; color:var(--ink-2)} .pager .on{background:var(--brand); border-color:var(--brand); color:#fff} .pager .off{opacity:.45} /* ------------------------------------------------------------- matrices */ .matrix{border-collapse:collapse; font-size:.8rem; inline-size:100%} .matrix th,.matrix td{border:1px solid var(--line); padding:.35rem .45rem; text-align:center} .matrix thead th{background:var(--panel-2); font-size:.75rem; font-weight:620} .matrix th.rowhead{text-align:start; font-weight:560; background:var(--panel-2); white-space:nowrap} .matrix td.mark{font-weight:640; color:var(--brand)} .matrix td.lvl-I{background:#eef5fb} .matrix td.lvl-R{background:#dcebf7} .matrix td.lvl-M{background:#c3ddf0} /* ---------------------------------------------------------- drill-down */ .trace{list-style:none; margin:0; padding:0; font-size:.86rem} .trace li{padding:.42rem 0 .42rem 1.1rem; border-inline-start:2px solid var(--line); margin-inline-start:.45rem; position:relative} body.rtl .trace li{padding:.42rem 1.1rem .42rem 0} .trace li::before{content:""; position:absolute; inset-block-start:.85rem; inset-inline-start:-5px; inline-size:8px; block-size:8px; border-radius:50%; background:var(--brand-2)} .trace .lvl{font-size:.72rem; color:var(--mut); text-transform:uppercase; letter-spacing:.04em} .provenance{font-size:.78rem; color:var(--mut); font-family:var(--f-mono); direction:ltr; unicode-bidi:isolate; word-break:break-all} /* ------------------------------------------------------------ mark grid */ .markgrid{border-collapse:collapse; font-size:.84rem; inline-size:100%} .markgrid th,.markgrid td{border:1px solid var(--line); padding:.2rem .3rem} .markgrid thead th{background:var(--panel-2); font-size:.74rem; padding:.4rem .3rem; position:sticky; inset-block-start:0; z-index:2} .markgrid th.stu{text-align:start; font-weight:560; background:var(--panel-2); position:sticky; inset-inline-start:0; z-index:1; min-inline-size:12rem} .markgrid input{inline-size:3.6rem; padding:.2rem .3rem; text-align:center; border:1px solid transparent; background:transparent; border-radius:3px; direction:ltr; font-variant-numeric:tabular-nums} .markgrid input:hover{border-color:var(--line)} .markgrid input:focus{border-color:var(--brand-2); background:#fff} .markgrid input.over{background:var(--bad-wash); color:var(--bad); border-color:var(--bad)} .markgrid input.done{background:var(--ok-wash)} .markgrid td.tot{font-weight:640; background:var(--panel-2); text-align:end} /* ------------------------------------------------------------ preview */ .previewrow-error{background:var(--bad-wash)} .previewrow-warning{background:var(--warn-wash)} .previewrow-valid{background:var(--ok-wash)} /* -------------------------------------------------------------- charts */ .chart{inline-size:100%; overflow-x:auto} .chart svg{max-inline-size:100%; block-size:auto; display:block} .legend{display:flex; gap:.9rem; flex-wrap:wrap; font-size:.79rem; color:var(--ink-2); margin-block-start:.5rem} .legend i{display:inline-block; inline-size:.7rem; block-size:.7rem; border-radius:2px; margin-inline-end:.3rem; vertical-align:-1px} /* --------------------------------------------------------------- login */ .authpage{min-block-size:100vh; display:grid; place-items:center; background:var(--brand-ink); padding:1.5rem} .authcard{background:#fff; border-radius:10px; box-shadow:var(--sh-2); inline-size:min(24rem,100%); padding:1.9rem} .authcard h1{font-size:1.22rem; margin-block-end:.25rem} .authcard .sub{color:var(--mut); font-size:.86rem; margin-block-end:1.3rem} .authcard .btn{inline-size:100%; justify-content:center; padding:.55rem} .authcard .alt{margin-block-start:1.1rem; text-align:center; font-size:.84rem} /* -------------------------------------------------------------- errors */ .errpage{max-inline-size:34rem; margin:5rem auto; text-align:center} .errpage .code{font-size:3.4rem; font-weight:700; color:var(--line); line-height:1} .errpage h1{margin:.4rem 0 .5rem} .errpage .ref{font-family:var(--f-mono); font-size:.76rem; color:var(--faint); margin-block-start:1.2rem} /* --------------------------------------------------------------- misc */ details.help{border:1px solid var(--line); border-radius:var(--r-sm); padding:.5rem .8rem; background:var(--panel-2); font-size:.85rem; margin-block-end:1rem} details.help summary{cursor:pointer; font-weight:560; color:var(--ink-2)} details.help[open] summary{margin-block-end:.5rem} .tag{display:inline-block; background:var(--line-2); color:var(--ink-2); font-size:.75rem; padding:.1rem .42rem; border-radius:var(--r-sm); margin-inline-end:.25rem} .ai-note{background:#f4f0fb; border:1px solid #ddd0f0; border-radius:var(--r-sm); padding:.6rem .8rem; font-size:.85rem; margin-block:.6rem} .ai-note .lab{font-size:.72rem; font-weight:660; color:#5b3d8f; text-transform:uppercase; letter-spacing:.04em; display:block; margin-block-end:.2rem} @media (max-width:900px){ .sidenav{position:fixed; inset-block:52px 0; inset-inline-start:0; z-index:30; transform:translateX(-100%); transition:transform .18s} body.rtl .sidenav{transform:translateX(100%)} .sidenav.open{transform:none} .content{padding:1rem} .quicksearch{display:none} } @media print{ .topbar,.sidenav,.foot,.btnbar,.filters,.pager{display:none !important} body{background:#fff} .panel{box-shadow:none; border-color:#ccc; break-inside:avoid} .content{padding:0} } /* Sidebar count badge — inline-end so it mirrors with the nav in RTL. */ .sidenav .navdot{ margin-inline-start:auto; background:var(--brand); color:#fff; font-style:normal; font-size:.68rem; min-inline-size:1.2rem; text-align:center; border-radius:1rem; padding:.05rem .3rem; line-height:1.5; font-variant-numeric:tabular-nums; } .empty .empty-action{margin-block-start:1rem}