@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@500;700;800&family=IBM+Plex+Sans+Arabic:wght@400;500;600&family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --bg:#0E1720;
  --surface:#16212C;
  --surface-2:#1D2A37;
  --surface-3:#243545;
  --line:#263542;
  --gold:#D9A54C;
  --gold-dim:#8A6B33;
  --green:#4FA679;
  --red:#E2574C;
  --blue:#4C8CD9;
  --text:#EDF1F4;
  --muted:#8A97A3;
  --muted-2:#5E6B77;
  --radius:16px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{background:var(--bg); color:var(--text); min-height:100vh;}
body{font-family:'IBM Plex Sans Arabic','Inter',sans-serif;}
html[lang="en"] body{font-family:'Inter','IBM Plex Sans Arabic',sans-serif;}
h1,h2,h3,h4{font-family:'Tajawal','Inter',sans-serif;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit;}
input,select,textarea{font-family:inherit;}
img{max-width:100%;}

/* ---------------------------------------------------------------- shell */
.shell{max-width:1360px; margin:0 auto; padding:22px 22px 60px;}
.masthead{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:22px;}
.brand{display:flex; align-items:center; gap:12px;}
.brand-mark{width:42px; height:42px; border-radius:12px; background:linear-gradient(155deg,var(--gold),var(--gold-dim)); display:flex; align-items:center; justify-content:center; font-family:'Tajawal'; font-weight:800; font-size:19px; color:#1a1305; flex-shrink:0;}
.brand-text h1{font-size:18px; font-weight:800;}
.brand-text p{font-size:12px; color:var(--muted); margin-top:2px;}
.top-actions{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}

/* ------------------------------------------------------------------ card */
.card{background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius); padding:16px;}
.card-gradient{background:linear-gradient(160deg,var(--surface-3),var(--surface-2)); border:1px solid var(--line); border-radius:var(--radius); padding:18px;}
.section-title{font-size:12.5px; font-weight:700; color:var(--muted); margin:20px 0 10px; text-transform:uppercase; letter-spacing:.3px;}
.section-title:first-child{margin-top:0;}
.page-head{margin-bottom:20px;}
.page-head h2{font-size:20px; font-weight:800;}
.page-head p{font-size:12.5px; color:var(--muted); margin-top:3px;}

/* ---------------------------------------------------------------- badges */
.badge{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700; padding:4px 10px; border-radius:20px; white-space:nowrap;}
.badge.green{background:rgba(79,166,121,.15); color:var(--green);}
.badge.gold{background:rgba(217,165,76,.15); color:var(--gold);}
.badge.red{background:rgba(226,87,76,.15); color:var(--red);}
.badge.grey{background:rgba(138,151,163,.15); color:var(--muted);}
.badge .dot{width:6px; height:6px; border-radius:50%; background:currentColor;}

/* --------------------------------------------------------------- buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 16px; border-radius:10px; font-size:13.5px; font-weight:700; transition:.15s; white-space:nowrap;}
.btn-gold{background:var(--gold); color:#1a1305;}
.btn-gold:hover{filter:brightness(1.08);}
.btn-outline{background:transparent; border:1px solid var(--line); color:var(--text);}
.btn-outline:hover{border-color:var(--gold-dim);}
.btn-red{background:var(--red); color:#fff;}
.btn-green{background:var(--green); color:#062017;}
.btn-block{width:100%;}
.btn-sm{padding:7px 12px; font-size:12px; border-radius:8px;}
.btn:disabled{opacity:.4; cursor:not-allowed;}

/* --------------------------------------------------------------- toggle */
.toggle{width:42px; height:24px; border-radius:14px; background:var(--surface); border:1px solid var(--line); position:relative; flex-shrink:0; display:inline-block;}
.toggle::after{content:''; position:absolute; top:2px; inset-inline-start:2px; width:18px; height:18px; border-radius:50%; background:var(--muted-2); transition:.18s;}
.toggle.on{background:rgba(79,166,121,.2); border-color:var(--green);}
.toggle.on::after{background:var(--green); inset-inline-start:20px;}

/* ------------------------------------------------------------------ form */
label{display:block; font-size:12px; color:var(--muted); margin-bottom:6px; font-weight:700;}
.field{margin-bottom:14px;}
input[type=text],input[type=email],input[type=password],input[type=tel],input[type=date],select,textarea{
  width:100%; background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:10px 12px; color:var(--text); font-size:13.5px;
}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--gold-dim);}
::placeholder{color:var(--muted-2);}
.search-input{max-width:280px;}

/* ----------------------------------------------------------------- table */
.table-wrap{overflow-x:auto;}
table{width:100%; border-collapse:collapse; font-size:13px;}
th{text-align:start; font-size:11.5px; color:var(--muted); font-weight:700; padding:10px 12px; border-bottom:1px solid var(--line); white-space:nowrap;}
td{padding:11px 12px; border-bottom:1px solid var(--line); vertical-align:middle;}
tr:last-child td{border-bottom:none;}
.toolbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; flex-wrap:wrap; gap:10px;}

/* --------------------------------------------------------------- kpi/grid */
.kpi-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:22px;}
.kpi{background:var(--surface-2); border:1px solid var(--line); border-radius:14px; padding:16px;}
.kpi .n{font-family:'Tajawal'; font-size:25px; font-weight:800;}
.kpi .l{font-size:11.5px; color:var(--muted); margin-top:4px;}
.two-col{display:grid; grid-template-columns:1.4fr 1fr; gap:16px;}
@media(max-width:900px){ .kpi-grid{grid-template-columns:repeat(2,1fr);} .two-col{grid-template-columns:1fr;} }

/* ---------------------------------------------------------------- admin */
.admin-wrap{display:grid; grid-template-columns:220px 1fr; gap:0; background:var(--surface); border:1px solid var(--line); border-radius:18px; overflow:hidden; min-height:640px;}
.a-sidebar{background:var(--surface-2); border-inline-end:1px solid var(--line); padding:16px 10px;}
.a-nav a{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; color:var(--muted); font-size:13px; font-weight:600; margin-bottom:2px;}
.a-nav a.active{background:var(--surface-3); color:var(--gold);}
.a-nav a:hover{color:var(--text);}
.a-nav .ic{font-size:15px; width:18px; text-align:center;}
.a-nav .count{margin-inline-start:auto; background:rgba(226,87,76,.18); color:var(--red); font-size:10.5px; font-weight:700; padding:1px 7px; border-radius:10px;}
.a-main{padding:22px 26px;}
@media(max-width:860px){ .admin-wrap{grid-template-columns:1fr;} .a-sidebar{border-inline-end:none; border-bottom:1px solid var(--line);} .a-nav{display:flex; overflow-x:auto; gap:4px;} .a-nav a{white-space:nowrap;} }

/* ----------------------------------------------------------------- misc */
.empty-note{text-align:center; color:var(--muted-2); font-size:12.5px; padding:28px 10px;}
.flash{padding:12px 16px; border-radius:12px; font-size:13px; font-weight:600; margin-bottom:16px;}
.flash.success{background:rgba(79,166,121,.14); color:var(--green); border:1px solid rgba(79,166,121,.3);}
.flash.error{background:rgba(226,87,76,.14); color:var(--red); border:1px solid rgba(226,87,76,.3);}
.settings-row{display:flex; align-items:center; justify-content:space-between; padding:13px 0; border-bottom:1px solid var(--line); gap:10px;}
.settings-row:last-child{border-bottom:none;}
.settings-label{font-size:13px; font-weight:600;}
.settings-hint{font-size:11px; color:var(--muted-2); margin-top:2px;}
.req-item{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:14px; margin-bottom:10px; display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap;}
.req-item .t{font-size:13px; font-weight:700; margin-bottom:3px;}
.req-item .m{font-size:12px; color:var(--muted);}
.req-item .acts{display:flex; gap:8px;}
.alert-item{display:flex; align-items:flex-start; gap:10px; padding:12px; background:var(--surface); border:1px solid var(--line); border-radius:12px; margin-bottom:8px;}
.alert-item .ic{font-size:16px;}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:11.5px;}
.log-box{background:var(--surface-3); border:1px solid var(--line); border-radius:10px; padding:12px 14px; max-height:560px; overflow:auto; white-space:pre-wrap; word-break:break-all;}
.log-box .line{padding:4px 0; border-bottom:1px solid var(--line);}
.log-box .line:last-child{border-bottom:none;}
.tabs{display:flex; gap:6px; margin-bottom:16px; border-bottom:1px solid var(--line);}
.tabs a{padding:9px 14px; font-size:12.5px; font-weight:700; color:var(--muted); border-bottom:2px solid transparent;}
.tabs a.active{color:var(--gold); border-bottom-color:var(--gold);}
.alert-item .body{flex:1;}
.alert-item .ttl{font-size:12.5px; font-weight:700;}
.alert-item .m{font-size:11.5px; color:var(--muted); margin-top:2px;}
.alert-item .tm{font-size:10px; color:var(--muted-2); margin-top:4px;}
.chip-row{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px;}
.chip{padding:8px 14px; border-radius:10px; background:var(--surface-2); border:1px solid var(--line); color:var(--muted); font-size:12.5px; font-weight:700;}
.chip.active{background:var(--surface-3); color:var(--gold); border-color:var(--gold-dim);}

/* ------------------------------------------------------------- auth page */
.auth-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;}
.auth-box{width:100%; max-width:400px; background:var(--surface-2); border:1px solid var(--line); border-radius:20px; padding:28px;}
.auth-box .brand{justify-content:center; margin-bottom:18px;}
.auth-box h1{text-align:center; font-size:18px; margin-bottom:4px;}
.auth-box .sub{text-align:center; font-size:12.5px; color:var(--muted); margin-bottom:22px;}
.auth-foot{text-align:center; font-size:11.5px; color:var(--muted-2); margin-top:16px;}
.demo-hint{background:var(--surface); border:1px dashed var(--line); border-radius:12px; padding:12px; font-size:11.5px; color:var(--muted); margin-top:16px; line-height:1.8;}

/* --------------------------------------------------------- narrow portal */
.portal-wrap{max-width:480px; margin:0 auto;}
.child-switch{display:flex; gap:8px; margin-bottom:14px;}
.child-switch a{flex:1; padding:9px; border-radius:10px; background:var(--surface-2); border:1px solid var(--line); color:var(--muted); font-size:12.5px; font-weight:700; text-align:center;}
.child-switch a.active{background:var(--surface-3); color:var(--gold); border-color:var(--gold-dim);}
.big-status{text-align:center; padding:24px 10px;}
.big-status .em{font-size:48px; margin-bottom:12px;}
.big-status .n{font-family:'Tajawal'; font-size:22px; font-weight:800; margin-bottom:4px;}
.big-status .s{font-size:12.5px; color:var(--muted);}
.portal-nav{display:flex; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:4px; gap:2px; margin-bottom:18px;}
.portal-nav a{flex:1; text-align:center; padding:9px 4px; border-radius:10px; color:var(--muted); font-size:12px; font-weight:600;}
.portal-nav a.active{background:var(--surface-3); color:var(--gold);}