/*!
* نظام حجز أتوبيس الطلاب — مبادرة «معاك للجامعة»
* @copyright © 2026 Bassememam — جميع الحقوق محفوظة.
* @vendor Hexogen — https://hexogen-eg.com
* @license ملكية خاصة. يمنع النسخ أو إعادة التوزيع.
*/
/* =====================================================================
نظام حجز أتوبيس الطلاب — ورقة الأنماط الرئيسية (RTL)
الألوان تأتي من إعدادات النظام عبر متغيرات CSS في .
===================================================================== */
:root{
--brand:#0F2E5E; --brand-dark:#0A2044; --accent:#D3A625; --support:#C1272D;
--brand-soft:rgba(15,46,94,.08); --accent-soft:rgba(211,166,37,.14);
--ink:#111A2C; --ink-2:#41506B; --ink-3:#75839B; --ink-4:#A3AFC2;
--bg:#F4F6FA; --surface:#FFFFFF; --surface-2:#FAFBFD;
--line:#E4E8F0; --line-2:#EEF1F6;
--ok:#0E7A4E; --ok-bg:#E6F6EE;
--warn:#B4690E; --warn-bg:#FDF3E2;
--err:#C0322C; --err-bg:#FCEBEA;
--info:#1D5FA8; --info-bg:#E9F2FC;
--r-sm:8px; --r:12px; --r-lg:16px; --r-xl:22px;
--sh-sm:0 1px 2px rgba(16,30,54,.06);
--sh:0 2px 8px rgba(16,30,54,.06), 0 1px 2px rgba(16,30,54,.04);
--sh-lg:0 12px 32px rgba(16,30,54,.12);
--side:264px; --ctl-h:44px;
--font:"Cairo","Segoe UI",Tahoma,"Noto Sans Arabic",Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
margin:0; font-family:var(--font); background:var(--bg); color:var(--ink);
font-size:15px; line-height:1.7; -webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
h1,h2,h3,h4,h5{margin:0; font-weight:800; line-height:1.35; color:var(--ink); letter-spacing:-.01em}
h1{font-size:1.7rem} h2{font-size:1.3rem} h3{font-size:1.08rem} h4{font-size:.98rem}
p{margin:0 0 .75rem}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%; display:block}
hr{border:0; border-top:1px solid var(--line); margin:1.25rem 0}
small{font-size:.82rem}
.ico{flex:none; vertical-align:-.2em}
::selection{background:var(--accent-soft)}
/* ---------------------------------------------------------- utilities */
.wrap{width:min(1220px,100% - 2.5rem); margin-inline:auto}
.stack{display:flex; flex-direction:column; gap:1.25rem}
.row{display:flex; align-items:center; gap:.6rem}
.row-between{display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap}
.grid{display:grid; gap:1.1rem}
.g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g-auto{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.muted{color:var(--ink-3)} .dim{color:var(--ink-2)}
.tiny{font-size:.78rem} .sm{font-size:.86rem} .lg{font-size:1.1rem}
.bold{font-weight:700} .black{font-weight:800}
.center{text-align:center} .end{text-align:end}
.mono{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; letter-spacing:.04em; direction:ltr; unicode-bidi:isolate}
.nowrap{white-space:nowrap}
.mt{margin-top:1rem} .mt-2{margin-top:1.6rem} .mb{margin-bottom:1rem} .mb-0{margin-bottom:0}
.grow{flex:1} .hide{display:none!important}
.divider{height:1px;background:var(--line);margin:1rem 0}
/* ------------------------------------------------------------- buttons */
.btn{
display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
padding:.62rem 1.1rem; border-radius:var(--r); border:1px solid transparent;
background:var(--brand); color:#fff; font:inherit; font-weight:700; font-size:.92rem;
cursor:pointer; transition:.16s ease; text-decoration:none; white-space:nowrap;
min-height:var(--ctl-h); line-height:1.2;
}
.btn:hover{background:var(--brand-dark); text-decoration:none; transform:translateY(-1px); box-shadow:var(--sh)}
.btn:active{transform:none}
.btn:disabled,.btn[disabled]{opacity:.5; cursor:not-allowed; transform:none; box-shadow:none}
.btn-accent{background:var(--accent); color:#20180A}
.btn-accent:hover{background:#bd9320}
.btn-ghost{background:var(--surface); color:var(--ink-2); border-color:var(--line)}
.btn-ghost:hover{background:var(--surface-2); color:var(--brand); border-color:var(--brand)}
.btn-danger{background:var(--err)} .btn-danger:hover{background:#a32923}
.btn-ok{background:var(--ok)} .btn-ok:hover{background:#0b6440}
.btn-sm{padding:.4rem .75rem; font-size:.82rem; border-radius:var(--r-sm); min-height:34px}
.btn-lg{padding:.85rem 1.6rem; font-size:1rem; min-height:52px}
.btn-block{width:100%}
/* --------------------------------------------------------------- cards */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh)}
.card-head{
display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
padding:1rem 1.25rem; border-bottom:1px solid var(--line-2);
}
.card-head h3{display:flex; align-items:center; gap:.55rem}
.card-head .ico{color:var(--brand)}
.card-body{padding:1.25rem}
.card-body.tight{padding:.85rem 1.25rem}
.card-foot{padding:.85rem 1.25rem; border-top:1px solid var(--line-2); background:var(--surface-2);
border-radius:0 0 var(--r-lg) var(--r-lg)}
/* ----------------------------------------------------------- stat tile */
.tiles{display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.tile{
background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
padding:1.1rem 1.2rem; box-shadow:var(--sh); position:relative; overflow:hidden;
}
.tile::after{content:""; position:absolute; inset-inline-start:0; top:0; bottom:0; width:4px; background:var(--brand)}
.tile.accent::after{background:var(--accent)} .tile.ok::after{background:var(--ok)}
.tile.warn::after{background:var(--warn)} .tile.err::after{background:var(--err)}
.tile-ico{
width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
background:var(--brand-soft); color:var(--brand); margin-bottom:.7rem;
}
.tile.accent .tile-ico{background:var(--accent-soft); color:#8a6c12}
.tile.ok .tile-ico{background:var(--ok-bg); color:var(--ok)}
.tile.warn .tile-ico{background:var(--warn-bg); color:var(--warn)}
.tile.err .tile-ico{background:var(--err-bg); color:var(--err)}
.tile-num{font-size:1.85rem; font-weight:800; line-height:1.1; letter-spacing:-.02em}
.tile-label{color:var(--ink-3); font-size:.85rem; font-weight:600}
/* -------------------------------------------------------------- badges */
.badge{
display:inline-flex; align-items:center; gap:.3rem; padding:.2rem .6rem;
border-radius:999px; font-size:.76rem; font-weight:700; white-space:nowrap;
background:var(--line-2); color:var(--ink-2);
}
.badge.ok{background:var(--ok-bg); color:var(--ok)}
.badge.warn{background:var(--warn-bg); color:var(--warn)}
.badge.err{background:var(--err-bg); color:var(--err)}
.badge.info{background:var(--info-bg); color:var(--info)}
.badge.brand{background:var(--brand-soft); color:var(--brand)}
.badge.accent{background:var(--accent-soft); color:#8a6c12}
.dot{width:8px; height:8px; border-radius:50%; background:currentColor; flex:none}
.pulse{animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
/* -------------------------------------------------------------- tables */
.table-wrap{overflow-x:auto; border-radius:var(--r-lg)}
table.tbl{width:100%; border-collapse:collapse; font-size:.9rem; background:var(--surface)}
table.tbl th{
text-align:start; padding:.7rem .9rem; background:var(--surface-2); color:var(--ink-3);
font-weight:700; font-size:.8rem; border-bottom:1px solid var(--line); white-space:nowrap;
}
table.tbl td{padding:.75rem .9rem; border-bottom:1px solid var(--line-2); vertical-align:middle}
table.tbl tbody tr:last-child td{border-bottom:0}
table.tbl tbody tr:hover{background:var(--surface-2)}
table.tbl td .row{gap:.5rem}
/* --------------------------------------------------------------- forms */
.field{margin-bottom:1rem}
.field > label,.lbl{display:block; font-weight:700; font-size:.85rem; margin-bottom:.4rem; color:var(--ink-2)}
.field .req{color:var(--err)}
/* محدد واحد يغطي كل الحقول النصية — بما فيها المكتوب بلا خاصية type.
(سلسلة :not المتتابعة مدعومة في كل المتصفحات، بعكس :not(a,b,c) الحديثة) */
.inp, select, textarea,
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):not([type=range]):not([type=color]):not([type=submit]):not([type=reset]):not([type=button]):not([type=image]){
width:100%; min-height:var(--ctl-h); padding:.6rem .9rem;
border:1px solid var(--line); border-radius:var(--r); background:var(--surface);
font:inherit; font-size:1rem; line-height:1.4; color:var(--ink);
transition:border-color .15s, box-shadow .15s, background .15s;
}
/* font-size:1rem (16px) يمنع التكبير التلقائي المزعج عند التركيز في iOS Safari */
select{
-webkit-appearance:none; appearance:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2375839B' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat:no-repeat; background-position:left .85rem center;
padding-inline-start:.9rem; padding-inline-end:2.3rem;
}
html[dir=ltr] select{background-position:right .85rem center}
.inp:focus, select:focus, textarea:focus,
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):not([type=range]):not([type=submit]):not([type=reset]):not([type=button]):focus{
outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft);
}
input[type=checkbox]:focus-visible,input[type=radio]:focus-visible{outline:2px solid var(--brand); outline-offset:2px}
/* الحالة المعطلة — الشاشة تعتمد