/* ==========================================================================
Ittihad Society — admin panel
Arabic-first. Built for staff who are not technical: one clear action per
screen, generous tap targets, and help text under every field.
Reuses the brand tokens from brand.css.
========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;max-width:100%}
body.admin{background:var(--stone-100);color:var(--text);font-family:var(--font);font-size:16px;line-height:1.7}
body.admin--bare{background:linear-gradient(160deg,#0E2418,#1A3E29);min-height:100vh;display:grid;place-items:center}
.admin a{color:inherit;text-decoration:none}
.admin h1,.admin h2,.admin h3{margin:0 0 .6em;line-height:1.3}
.admin h1{font-size:1.6rem}
.admin h2{font-size:1.2rem}
.admin p{margin:0 0 1em}
/* ---------------- top bar ---------------- */
.abar{background:var(--olive-900);color:#fff;position:sticky;top:0;z-index:40}
.abar__in{max-width:1400px;margin-inline:auto;padding:.6rem clamp(.75rem,3vw,1.5rem);
display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.abar__brand{display:flex;align-items:center;gap:.7rem}
.abar__brand strong{display:block;font-size:1rem;line-height:1.2}
.abar__brand em{font-style:normal;font-size:.76rem;opacity:.7}
.abar__side{margin-inline-start:auto;display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.abar__link{padding:.4rem .7rem;border-radius:999px;font-size:.9rem;opacity:.9}
.abar__link:hover{background:rgba(255,255,255,.12);opacity:1}
.abar__out{padding:.4rem .9rem;border-radius:999px;font-size:.9rem;background:rgba(178,58,72,.9)}
.abar__out:hover{background:var(--pomegranate-500)}
/* ---------------- shell ---------------- */
/* Panel interior: a sidebar column plus content. */
.awrap{max-width:1400px;margin-inline:auto;display:block;
padding:clamp(1rem,3vw,2rem)}
.awrap:has(> .anav){display:grid;grid-template-columns:264px 1fr;gap:clamp(1rem,2.5vw,2rem)}
@media (max-width:960px){.awrap:has(> .anav){grid-template-columns:1fr}}
@media (max-width:960px){.awrap{display:block}}
/* ==========================================================================
BARE LAYOUT (login / setup / problem screens)
These pages have no sidebar, but they still received the wrapper's
264px sidebar column, which squeezed the card to ~230px and wrapped every
word onto its own line. The card owns its own width here.
========================================================================== */
body.admin--bare{display:grid;place-items:center;padding:2rem 1rem}
body.admin--bare .awrap{display:block;max-width:none;width:100%;padding:0}
body.admin--bare .amain{width:100%;display:grid;place-items:center}
body.admin--bare .login-card{width:min(460px,100%);margin-inline:auto;padding:clamp(1.5rem,5vw,2.4rem)}
body.admin--bare .login-card h1{text-align:center;font-size:1.45rem}
.anav{align-self:start;position:sticky;top:78px;background:#fff;border:1px solid rgba(18,48,31,.1);
border-radius:var(--r-lg);padding:.7rem;box-shadow:0 18px 40px -36px rgba(18,48,31,.6)}
.anav nav{display:grid;gap:.15rem}
.anav a{display:flex;align-items:center;gap:.7rem;padding:.7rem .8rem;border-radius:var(--r-md);
font-size:.95rem;font-weight:500;transition:background-color .2s,color .2s}
.anav a svg{width:21px;height:21px;flex:none;color:var(--olive-500)}
.anav a:hover{background:var(--olive-100)}
.anav a[aria-current="page"]{background:var(--olive-700);color:#fff}
.anav a[aria-current="page"] svg{color:#fff}
.anav__hint{margin:.9rem .4rem .2rem;font-size:.8rem;line-height:1.6;color:var(--ink-60)}
@media (max-width:960px){
.anav{position:static;display:none}
.anav.is-open{display:block}
}
.anav-toggle{display:none;margin-bottom:.9rem;width:100%;padding:.8rem 1rem;border-radius:var(--r-md);
border:1.5px solid var(--olive-500);background:#fff;color:var(--olive-700);font:600 1rem var(--font);cursor:pointer}
@media (max-width:960px){.anav-toggle{display:block}}
.amain{min-width:0}
/* ---------------- page head ---------------- */
.ahead{margin-bottom:1.4rem;display:flex;gap:1rem;align-items:flex-end;flex-wrap:wrap}
.ahead__txt{flex:1;min-width:220px}
.ahead h1{margin:0 0 .2rem}
.ahead p{margin:0;color:var(--ink-60);font-size:.95rem}
/* ---------------- cards ---------------- */
.acard{background:#fff;border:1px solid rgba(18,48,31,.1);border-radius:var(--r-lg);
padding:clamp(1rem,2.5vw,1.6rem);box-shadow:0 18px 40px -38px rgba(18,48,31,.55);margin-bottom:1.25rem}
.acard__title{font-size:1.05rem;margin:0 0 1rem;padding-bottom:.7rem;border-bottom:1px solid rgba(18,48,31,.08)}
.tiles{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.tile{background:#fff;border:1px solid rgba(18,48,31,.1);border-radius:var(--r-lg);padding:1.15rem;
display:grid;gap:.3rem;transition:transform .25s,box-shadow .25s}
.tile:hover{transform:translateY(-3px);box-shadow:0 20px 40px -32px rgba(18,48,31,.55)}
.tile b{font-size:2rem;line-height:1;color:var(--olive-700);font-variant-numeric:tabular-nums}
.tile span{font-size:.88rem;color:var(--ink-60)}
.tile--alert b{color:var(--pomegranate-500)}
/* ---------------- flash ---------------- */
.flash{border-radius:var(--r-md);padding:.9rem 1.1rem;margin-bottom:1.2rem;font-size:.95rem;font-weight:500}
.flash--ok{background:var(--olive-100);color:var(--olive-900);border-inline-start:5px solid var(--olive-500)}
.flash--err{background:var(--pomegranate-100);color:var(--pomegranate-700);border-inline-start:5px solid var(--pomegranate-500)}
/* ---------------- buttons ---------------- */
.abtn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:46px;
padding:0 1.2rem;border-radius:var(--r-pill);border:1.5px solid transparent;font:600 .95rem var(--font);
cursor:pointer;transition:background-color .2s,border-color .2s,transform .12s;text-align:center}
.abtn:active{transform:translateY(1px)}
.abtn--primary{background:var(--olive-700);color:#fff}
.abtn--primary:hover{background:var(--olive-900)}
.abtn--ghost{background:#fff;border-color:rgba(18,48,31,.2);color:var(--olive-700)}
.abtn--ghost:hover{border-color:var(--olive-500);background:var(--olive-100)}
.abtn--danger{background:#fff;border-color:var(--pomegranate-500);color:var(--pomegranate-700)}
.abtn--danger:hover{background:var(--pomegranate-100)}
.abtn--sm{min-height:36px;padding:0 .85rem;font-size:.85rem}
.abtn--block{width:100%}
/* ---------------- forms ---------------- */
.afield{margin-bottom:1.1rem}
.afield>label{display:block;font-weight:600;font-size:.92rem;margin-bottom:.35rem}
.afield .help{font-size:.82rem;color:var(--ink-60);margin:-.15rem 0 .45rem;line-height:1.6}
.afield input[type=text],.afield input[type=email],.afield input[type=tel],
.afield input[type=number],.afield input[type=password],.afield input[type=url],
.afield input[type=date],.afield select,.afield textarea{
width:100%;padding:.75rem .9rem;font:inherit;font-size:.95rem;color:var(--text);
background:var(--stone-50);border:1.5px solid rgba(18,48,31,.18);border-radius:var(--r-md);
transition:border-color .2s,box-shadow .2s,background-color .2s}
.afield textarea{min-height:110px;resize:vertical;line-height:1.7}
.afield input:focus,.afield select:focus,.afield textarea:focus{outline:none;border-color:var(--olive-500);
background:#fff;box-shadow:0 0 0 4px var(--olive-100)}
.arow{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:700px){.arow{grid-template-columns:1fr}}
.check{display:flex;align-items:center;gap:.6rem;font-size:.95rem;font-weight:500}
.check input{width:20px;height:20px;accent-color:var(--olive-700)}
.aactions{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;
padding-top:1rem;border-top:1px solid rgba(18,48,31,.08);margin-top:1.4rem}
/* ---------------- table ---------------- */
.atable{width:100%;border-collapse:collapse;font-size:.93rem}
.atable th,.atable td{padding:.75rem .8rem;text-align:start;border-bottom:1px solid rgba(18,48,31,.08);
vertical-align:middle}
.atable th{background:var(--stone-50);font-weight:600;font-size:.85rem;color:var(--ink-60)}
.atable tr:hover td{background:var(--stone-50)}
.atable__actions{display:flex;gap:.4rem;justify-content:flex-end;flex-wrap:wrap}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.pill{display:inline-block;padding:.18rem .6rem;border-radius:999px;font-size:.78rem;font-weight:600}
.pill--on{background:var(--olive-100);color:var(--olive-900)}
.pill--off{background:var(--stone-100);color:var(--ink-60)}
.pill--new{background:var(--saffron-100);color:var(--saffron-600)}
.pill--done{background:var(--olive-100);color:var(--olive-900)}
.pill--cancelled{background:var(--pomegranate-100);color:var(--pomegranate-700)}
/* ---------------- empty state ---------------- */
.aempty{text-align:center;padding:2.5rem 1rem;border:1px dashed rgba(18,48,31,.25);border-radius:var(--r-lg);
background:#fff}
.aempty h3{font-size:1.05rem;margin-bottom:.3rem}
.aempty p{color:var(--ink-60);max-width:44ch;margin-inline:auto}
/* ---------------- login / setup ---------------- */
.login-card{width:min(440px,calc(100% - 2rem));background:#fff;border-radius:var(--r-lg);
padding:clamp(1.5rem,5vw,2.4rem);box-shadow:0 40px 80px -40px rgba(0,0,0,.6)}
.login-card__logo{width:84px;margin:0 auto 1rem}
.login-card h1{text-align:center;font-size:1.35rem;margin-bottom:.2rem}
.login-card .sub{text-align:center;color:var(--ink-60);font-size:.9rem;margin-bottom:1.6rem}
.login-foot{text-align:center;margin-top:1.2rem;font-size:.85rem;color:var(--ink-60)}
/* ---------------- media grid ---------------- */
.mediagrid{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.mediaitem{background:#fff;border:1px solid rgba(18,48,31,.1);border-radius:var(--r-md);overflow:hidden}
.mediaitem img{width:100%;height:130px;object-fit:cover;display:block;background:var(--stone-100)}
.mediaitem__body{padding:.6rem .7rem;font-size:.82rem}
.mediaitem__body code{font-size:.72rem;color:var(--ink-60);word-break:break-all;display:block;margin-bottom:.4rem}
/* ---------------- misc ---------------- */
.muted{color:var(--ink-60)}
.small{font-size:.85rem}
.warnbox{background:var(--saffron-100);border-inline-start:5px solid var(--saffron-500);
border-radius:var(--r-md);padding:.9rem 1.1rem;font-size:.9rem;margin-bottom:1.2rem;color:#5c4a1e}
/* ==========================================================================
ADMIN — hero banner control + news
========================================================================== */
.aflash{padding:.85rem 1.1rem;border-radius:var(--r-sm);margin-bottom:1rem;font-size:.92rem}
.aflash--ok{background:#E3EDE6;color:#12301F;border:1px solid #9FC4AE}
.aflash--err{background:#F6E1E3;color:#8E2A37;border:1px solid #DCA9AF}
.check--card{display:grid;grid-template-columns:auto 1fr;gap:.7rem;align-items:start;
border:1.5px solid rgba(18,48,31,.15);border-radius:var(--r-md);padding:1rem;
cursor:pointer;background:var(--surface);transition:border-color .2s,background-color .2s}
.check--card:hover{border-color:var(--olive-500)}
.check--card:has(input:checked){border-color:var(--olive-700);background:#F2F7F3}
.check--card span{display:grid;gap:.15rem}
.check--card em{font-style:normal;font-size:.83rem;color:var(--ink-60)}
.hero-preview{position:relative;aspect-ratio:16/8;border-radius:var(--r-md);overflow:hidden;
background:#0d1a12;margin-bottom:.5rem}
.hero-preview video,.hero-preview img{width:100%;height:100%;object-fit:cover;display:block}
.hero-preview__scrim{position:absolute;inset:0}
.hero-preview__scrim[data-scrim="light"]{background:rgba(11,31,20,.28)}
.hero-preview__scrim[data-scrim="medium"]{background:rgba(11,31,20,.5)}
.hero-preview__scrim[data-scrim="strong"]{background:rgba(11,31,20,.72)}
.hero-preview__cap{position:absolute;inset-block-end:.6rem;inset-inline-start:.7rem;
background:rgba(0,0,0,.6);color:#fff;font-size:.72rem;padding:.2rem .55rem;border-radius:999px}
.pickgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.85rem}
.pick{display:grid;gap:.4rem;border:1.5px solid rgba(18,48,31,.14);border-radius:var(--r-sm);
padding:.4rem;background:var(--surface);cursor:pointer;text-align:start;font:inherit;
transition:border-color .2s,transform .2s}
.pick:hover{border-color:var(--olive-700);transform:translateY(-2px)}
.pick video,.pick img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:6px;display:block;background:#0d1a12}
.pick span{font-size:.74rem;color:var(--ink-60);line-height:1.4}
/* news list in admin */
.news-row{display:grid;grid-template-columns:64px 1fr auto;gap:1rem;align-items:center;
padding:.8rem 0;border-bottom:1px solid rgba(18,48,31,.08)}
.news-row:last-child{border-bottom:0}
.news-row__thumb{width:64px;height:48px;border-radius:6px;object-fit:cover;background:var(--stone-100)}
.news-row__ttl{font-weight:600;font-size:.95rem;margin:0 0 .2rem}
.news-row__meta{font-size:.78rem;color:var(--ink-60)}
.pill{display:inline-block;border-radius:999px;padding:.1rem .5rem;font-size:.72rem;font-weight:600}
.pill--live{background:#E3EDE6;color:#12301F}
.pill--draft{background:#F5ECD6;color:#7a5c13}
.pill--news{background:#E7EEF6;color:#23415f}
.pill--video{background:#F6E1E3;color:#8E2A37}
/* chatbot connection status + test row */
.statusbar{display:flex;gap:.7rem;align-items:flex-start;padding:.9rem 1.05rem;
border-radius:var(--r-sm);margin-bottom:1.1rem;font-size:.9rem;line-height:1.7}
.statusbar__dot{width:9px;height:9px;border-radius:50%;flex:none;margin-top:.5rem}
.statusbar--ok{background:#E3EDE6;border:1px solid #9FC4AE;color:#12301F}
.statusbar--ok .statusbar__dot{background:#2E7D53;box-shadow:0 0 0 3px rgba(46,125,83,.2)}
.statusbar--warn{background:#F5ECD6;border:1px solid #DEC98C;color:#6b5310}
.statusbar--warn .statusbar__dot{background:#C9A14A;box-shadow:0 0 0 3px rgba(201,161,74,.22)}
.statusbar code{background:rgba(0,0,0,.07);padding:.1rem .35rem;border-radius:4px;font-size:.85em}
.testline{margin-top:.9rem;padding-top:.9rem;border-top:1px dashed rgba(18,48,31,.15)}
.testline label{display:block;margin-bottom:.4rem;color:var(--ink-60)}
/* media library: one editable row per file */
.mediaedit{display:grid;grid-template-columns:190px 1fr;gap:1.1rem;align-items:start;
position:relative;padding:1rem}
.mediaedit__preview{position:relative}
.mediaedit__preview img,.mediaedit__preview video{width:100%;aspect-ratio:4/3;object-fit:cover;
border-radius:var(--r-sm);display:block;background:var(--stone-100)}
.mediaedit__preview .pill{position:absolute;inset-block-start:.45rem;inset-inline-start:.45rem}
.mediaedit__form{min-width:0}
.mediaedit__form .afield{margin-bottom:.7rem}
.mediaedit__form textarea{min-height:60px}
.mediaedit__del{position:absolute;inset-block-start:1rem;inset-inline-end:1rem}
@media (max-width:760px){
.mediaedit{grid-template-columns:1fr}
.mediaedit__del{position:static;margin-top:.5rem}
}
/* ==========================================================================
نظام الأيتام — orphan sponsorship system
========================================================================== */
.oact{display:flex;flex-wrap:wrap;gap:.5rem}
.oempty{text-align:center;padding:2rem 1rem;color:var(--muted)}
.oeyebrow{margin:0 0 .25rem;color:var(--accent);font-weight:600;font-size:.9rem}
.ostats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.9rem;margin-bottom:1.25rem}
.ostat{display:flex;flex-direction:column;gap:.15rem;padding:1.1rem 1.2rem;border-radius:var(--r-md);background:#fff;border:1px solid var(--stone-300);
border-inline-start:4px solid var(--olive-700);text-decoration:none;color:var(--text);transition:box-shadow .2s,transform .2s}
a.ostat:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.ostat strong{font-size:1.9rem;line-height:1.1;color:var(--olive-700);font-variant-numeric:tabular-nums}
.ostat strong small{font-size:1rem}
.ostat span{font-weight:600}
.ostat em{font-style:normal;font-size:.82rem;color:var(--muted)}
.ostat--ok{border-inline-start-color:#2F7D55}.ostat--ok strong{color:#2F7D55}
.ostat--warn{border-inline-start-color:#B58A2C}.ostat--warn strong{color:#8A6516}
.ostat--alert{border-inline-start-color:var(--accent)}.ostat--alert strong{color:var(--accent)}
.ostats--sm .ostat strong{font-size:1.5rem}
.ocharts{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:.9rem;margin-bottom:1.25rem}
.ocharts .acard{margin:0}
.ocharts h3,.acard>h3{margin:0 0 .8rem;font-size:1rem;color:var(--olive-700)}
.obars{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.obars li{display:grid;grid-template-columns:minmax(80px,1fr) 2fr auto;align-items:center;gap:.6rem;font-size:.9rem}
.obars__k{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.obars__track{height:10px;border-radius:99px;background:var(--stone-100);overflow:hidden}
.obars__track span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--olive-700),var(--olive-500))}
.obars__n{font-weight:700;font-variant-numeric:tabular-nums;min-width:2.2em;text-align:end}
.okv{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.okv li{display:flex;justify-content:space-between;gap:1rem;padding-bottom:.5rem;border-bottom:1px dashed var(--stone-300);font-size:.92rem}
.okv li:last-child{border:0}
.ofilter .osearch{display:flex;gap:.5rem}
.ofilter .osearch input{flex:1;min-height:48px;font-size:1.05rem;padding:.6rem .9rem;border:1.5px solid var(--stone-300);border-radius:var(--r-sm)}
.ofilter .osearch input:focus{outline:0;border-color:var(--olive-700);box-shadow:0 0 0 4px rgba(47,93,70,.15)}
.ofilter__more{margin-top:.75rem}
.ofilter__more summary{cursor:pointer;font-weight:700;color:var(--olive-700);padding:.4rem 0}
.ogrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.2rem 1rem;margin-top:.75rem}
.ogrid__wide{grid-column:1/-1}
.orange{display:flex;gap:.4rem}.orange input{min-width:0}
.oresult-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}
.table-scroll{overflow-x:auto}
.otable{min-width:860px}
.otable td{vertical-align:top}
.otable tr.is-muted td{opacity:.6}
.oname{font-weight:700;text-decoration:none;color:var(--olive-700)}
.oname:hover{text-decoration:underline}
.osub{display:block;color:var(--muted);font-size:.8rem}
.onum,.ophone{font-variant-numeric:tabular-nums;white-space:nowrap}
.omuted{color:var(--muted)}
.opill{display:inline-block;padding:.12rem .6rem;border-radius:99px;font-size:.8rem;font-weight:700;background:var(--stone-100);color:var(--text)}
.opill--ok{background:#E3F1E7;color:#17482C}.opill--warn{background:#FBF1DC;color:#6E4F10}.opill--alert{background:#FBE9EA;color:#7A1720}
.otag{display:inline-block;margin-inline-start:.35rem;padding:0 .45rem;border-radius:6px;font-size:.72rem;background:var(--stone-100);color:var(--muted)}
.otag--alert{background:#FBE9EA;color:#7A1720}
.ochips{display:flex;flex-wrap:wrap;gap:.4rem;margin:.4rem 0 0}
.opager{display:flex;justify-content:center;align-items:center;gap:1rem;margin-top:1rem}
.olog{list-style:none;margin:0;padding:0;display:grid;gap:.45rem;font-size:.9rem}
.olog__t{display:inline-block;min-width:8.5em;color:var(--muted);font-variant-numeric:tabular-nums}
.osecnav{position:sticky;top:0;z-index:5;display:flex;flex-wrap:wrap;gap:.4rem;padding:.6rem 0;margin-bottom:.5rem;background:var(--bg)}
.osecnav a{padding:.35rem .9rem;border-radius:99px;background:#fff;border:1px solid var(--stone-300);text-decoration:none;color:var(--olive-700);font-weight:600;font-size:.88rem}
.oform fieldset{border:1px solid var(--stone-300);scroll-margin-top:60px}
.oform legend{font-weight:800;color:var(--olive-700);padding:0 .5rem;font-size:1.05rem}
.osticky{position:sticky;bottom:0;background:linear-gradient(0deg,var(--bg) 70%,transparent);padding:1rem 0;z-index:4}
.oprofile{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:1rem;align-items:start}
.oprofile .acard h2{font-size:1.05rem;color:var(--olive-700);margin:0 0 .8rem}
.okvlist{margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:.1rem 1.25rem}
.okvrow{padding:.55rem 0;border-bottom:1px dashed var(--stone-300)}
.okvrow dt{font-size:.8rem;color:var(--muted);margin-bottom:.15rem}
.okvrow dd{margin:0;font-weight:600;white-space:normal;word-break:break-word}
.ofiles{list-style:none;margin:0 0 1rem;padding:0;display:grid;gap:.6rem}
.ofiles li{display:grid;grid-template-columns:1fr auto;gap:.1rem .5rem;padding:.6rem .7rem;border:1px solid var(--stone-300);border-radius:10px}
.ofiles a{font-weight:700}
.ofiles small{grid-column:1;color:var(--muted);font-size:.78rem}
.ofiles form{grid-row:1/3;grid-column:2;align-self:center}
.olink-danger{background:none;border:0;color:var(--accent);cursor:pointer;font:inherit;font-size:.85rem}
.oupload{display:grid;gap:.45rem;padding-top:.8rem;border-top:1px solid var(--stone-300)}
.odanger{border-color:#EBB9BD}
.oreport .ostats{margin:1rem 0}
.owarn{max-height:260px;overflow:auto;font-size:.88rem;color:var(--muted)}
@media (max-width:1000px){.oprofile{grid-template-columns:1fr}}
@media print{
.aside,.asidebar,.atop,.noprint,.osecnav,header,nav{display:none!important}
.oprofile{grid-template-columns:1fr}.acard{break-inside:avoid;box-shadow:none;border:1px solid #ccc}
}
/* ---------------------------------------------------------------------------
Institution logo field
Shows the logo that is actually live — a custom upload, or the one that
ships with the site — so "no custom logo" never looks like "no logo".
--------------------------------------------------------------------------- */
.logofield{display:flex;gap:1.1rem;align-items:flex-start;flex-wrap:wrap;margin-top:.5rem}
.logofield__preview{flex:0 0 120px;width:120px;height:120px;border:1px solid var(--line);
border-radius:14px;background:var(--paper);display:grid;place-items:center;overflow:hidden}
.logofield__preview img{width:100%;height:100%;object-fit:contain;display:block}
.logofield__none{font-size:.8rem;color:var(--ink-2);text-align:center;padding:.5rem}
.logofield__side{flex:1;min-width:240px}
.logofield__state{margin:0 0 .6rem;font-size:.9rem;line-height:1.7;color:var(--ink-2)}
.logofield__state strong{color:var(--ink)}
.logofield input[type=file]{width:100%}
/* ==========================================================================
STATUS PILLS — a deliberate colour ramp, not an accident
==========================================================================
Each state is a different HUE, not a different shade, so the table reads at a
glance and the meanings survive greyscale printing poorly but survive colour
blindness better than four olives would:
جديد saffron needs action, nobody has made contact
تم التواصل slate in progress, someone owns it
مكتمل green finished and confirmed
ملغى red closed without a gift
Text colours are dark on a pale tint of the same hue, all comfortably above
the 4.5:1 WCAG AA minimum for body text.
========================================================================== */
.pill--progress{background:#E4ECF3;color:#1E3D57} /* slate — in progress */
.pill--done {background:#DCEFE1;color:#14512F} /* green — completed */
.pill--new {background:#F6EDD6;color:#6E4E0C} /* saffron— needs action */
.pill--cancelled{background:#F8E7E8;color:#861B25} /* red — cancelled */
/* a small dot inside the pill, so the state is legible without relying on hue
alone (helps colour-blind users and greyscale printouts) */
.pill--new::before,
.pill--progress::before,
.pill--done::before,
.pill--cancelled::before{
content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
margin-inline-end:.4rem;vertical-align:middle;background:currentColor}
/* the status cell holds a short pill and two buttons; without nowrap the label
breaks across lines and the row height jumps */
.atable .cell-status{white-space:nowrap}
.atable .cell-status .pill{white-space:nowrap}
/* the actions cell keeps its buttons on one line too */
.atable td form{display:inline-flex;align-items:center;gap:.3rem;flex-wrap:nowrap}
/* ---------------------------------------------------------------------------
Row actions in a management table.
A select given no width will happily take the whole cell and push its button
onto the next line, which is what made "حفظ" and "حذف" stack. Sizing the
select keeps each row's controls on one line.
--------------------------------------------------------------------------- */
.atable .cell-actions{white-space:nowrap}
.atable .rowform{display:inline-flex;align-items:center;gap:.35rem;margin:0}
.atable .rowform + .rowform{margin-inline-start:.4rem}
.atable .rowform__select{
width:auto;max-width:11rem;padding:.35rem .5rem;border-radius:8px;
border:1px solid rgba(18,48,31,.2);background:var(--paper);color:var(--text);
font:500 .85rem var(--font)}
.atable .rowform__select:focus-visible{outline:2px solid var(--olive-500);outline-offset:1px}
@media (max-width:760px){
/* on a phone the row scrolls sideways rather than crushing the controls */
.atable .cell-actions{white-space:nowrap}
}
/* ==========================================================================
CHATBOT — questions the assistant could not answer
Each is a card with the question at the top and the answer form beneath, so
the office reads the question and writes the answer in one place. A left rule
in the saffron "waiting" colour marks it as outstanding at a glance.
========================================================================== */
.unans{background:var(--paper);border:1px solid var(--line);
border-inline-start:4px solid #C99A2E;border-radius:var(--r-sm);
padding:1rem 1.1rem;margin:0 0 1rem}
.unans__head{display:flex;gap:.75rem;align-items:flex-start;
flex-wrap:wrap;justify-content:space-between;margin-bottom:.85rem}
.unans__q{font-weight:600;font-size:1.02rem;line-height:1.65;color:var(--ink);flex:1;min-width:200px}
.unans__meta{display:flex;gap:.5rem;align-items:center;flex:none}
.unans__form{border-top:1px solid var(--line);padding-top:.85rem}
.unans__form .aactions{margin-top:.25rem}
.unans form + form{margin-top:.5rem}
@media (max-width:560px){
.unans__head{flex-direction:column;gap:.4rem}
}
/* Admin nav badge — a count that needs attention (questions awaiting an answer) */
.anav a{position:relative}
.anav__badge{display:inline-grid;place-items:center;min-width:20px;height:20px;
padding:0 6px;margin-inline-start:auto;border-radius:10px;
background:#C99A2E;color:#2A1F04;font:700 .74rem/1 var(--f-text)}
/* ==========================================================================
ADMIN — hero slides
The slide list had no styling at all, so a 1920px video sat in a 987px row and
dragged the row 933px wide; the first slide measured 1248px tall. The image
rows only escaped because their ![]()
carried inline width/height attributes,
which is luck rather than design.
A fixed-size thumbnail box with object-fit means ANY media — a 4K video, a
tall phone photograph, a wide panorama — occupies the same 160x90 cell.
========================================================================== */
.slide{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;
padding:.85rem 0;border-bottom:1px solid var(--line)}
.slide:last-of-type{border-bottom:0}
.slide__thumb{position:relative;flex:0 0 160px;width:160px;height:90px;
border-radius:10px;overflow:hidden;background:var(--stone-100,#EDF1EA);
display:grid;place-items:center}
/* !important is deliberate: browsers give