/* ============================================================
   نظام شركة محمد بن سعد البقمي — واجهة البوابات
   يستخدم نفس هوية الموقع التعريفي (الألوان والخطوط) ليبدو امتداداً له.
   ============================================================ */
@import url("/static/fonts.css");

:root{
  --navy:#12293D; --navy-2:#1B3A55; --navy-3:#27506F;
  --gold:#C9985A; --gold-2:#DFB984; --gold-soft:#F3E7D7;
  --ink:#1D2733; --body:#4A5763; --line:#E4E7EB;
  --bg:#FFFFFF; --bg-2:#F6F7F9;
  --ok:#1E7A4B; --ok-bg:#E7F4ED;
  --warn:#9A6B10; --warn-bg:#FCF3E0;
  --err:#9E2A2A; --err-bg:#FBEBEB;
  --info:#1B4E7A; --info-bg:#E9F1F8;
  --radius:4px; --shadow:0 1px 2px rgba(18,41,61,.04),0 8px 28px rgba(18,41,61,.07);
  --t:.2s cubic-bezier(.4,0,.2,1);
  --sidebar:252px;
}
*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;background:var(--bg-2);color:var(--body);
  font-family:"IBM Plex Sans Arabic","Tajawal",system-ui,sans-serif;
  font-size:15.5px;line-height:1.8;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:"Tajawal","IBM Plex Sans Arabic",sans-serif;color:var(--ink);
  margin:0 0 .55em;font-weight:700;line-height:1.4}
h1{font-size:1.65rem} h2{font-size:1.3rem} h3{font-size:1.08rem}
p{margin:0 0 1em}
img{max-width:100%;display:block}

/* ---------- الدخول ---------- */
.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:24px;
  background:linear-gradient(160deg,var(--navy) 0%,var(--navy-2) 60%,var(--navy-3) 100%)}
.auth-card{width:100%;max-width:410px;background:#fff;border-radius:8px;padding:38px 34px;
  box-shadow:0 24px 60px rgba(0,0,0,.28)}
.auth-card .brand{text-align:center;margin-bottom:26px}
.auth-card .brand img{width:52px;margin:0 auto 12px}
.auth-card .brand strong{display:block;color:var(--ink);font-family:"Tajawal",sans-serif;font-size:1.06rem}
.auth-card .brand span{font-size:.82rem;color:var(--gold)}

/* ---------- الهيكل ---------- */
.shell{display:flex;min-height:100vh}
.side{width:var(--sidebar);flex:0 0 var(--sidebar);background:var(--navy);color:#C7D3DD;
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto}
.side .logo{padding:22px 20px;border-bottom:1px solid rgba(255,255,255,.09);display:flex;
  align-items:center;gap:11px}
.side .logo img{width:34px}
.side .logo b{color:#fff;font-family:"Tajawal",sans-serif;font-size:.93rem;line-height:1.45;font-weight:700}
.side nav{padding:12px 0;flex:1}
.side nav .grp{padding:16px 20px 6px;font-size:.7rem;letter-spacing:.06em;color:#6E8698;font-weight:700}
.side nav a{display:flex;align-items:center;gap:10px;padding:9.5px 20px;font-size:.9rem;
  border-inline-start:3px solid transparent;transition:var(--t)}
.side nav a:hover{background:rgba(255,255,255,.055);color:#fff}
.side nav a.on{background:rgba(201,152,90,.14);color:#fff;border-inline-start-color:var(--gold)}
.side nav a .ic{width:17px;height:17px;flex:0 0 17px;opacity:.85}
.side .who{padding:15px 20px;border-top:1px solid rgba(255,255,255,.09);font-size:.82rem}
.side .who b{display:block;color:#fff;font-weight:600}
.side .who span{color:#8FA3B3;font-size:.76rem}
.side .who a{color:var(--gold-2);font-size:.8rem;display:inline-block;margin-top:7px}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.top{background:#fff;border-bottom:1px solid var(--line);padding:15px 28px;display:flex;
  align-items:center;justify-content:space-between;gap:16px;position:sticky;top:0;z-index:5}
.top h1{margin:0;font-size:1.2rem}
.top .sub{font-size:.82rem;color:#7A8794}
.content{padding:26px 28px 60px;max-width:1240px;width:100%}

/* ---------- البطاقات والشبكات ---------- */
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(198px,1fr))}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;
  box-shadow:var(--shadow)}
.card>h2,.card>h3{margin-top:0}
.card .hd{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.card .hd h2,.card .hd h3{margin:0}

.stat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:17px 19px;
  border-top:3px solid var(--gold)}
.stat .k{font-size:.79rem;color:#7A8794;margin-bottom:5px}
.stat .v{font-family:"Tajawal",sans-serif;font-size:1.85rem;font-weight:800;color:var(--navy);line-height:1.2}
.stat .n{font-size:.76rem;color:#93A0AC;margin-top:3px}

/* ---------- الجداول ---------- */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
table{width:100%;border-collapse:collapse;font-size:.88rem;min-width:560px}
th,td{padding:11px 14px;text-align:start;border-bottom:1px solid var(--line);vertical-align:middle}
th{background:var(--bg-2);color:var(--ink);font-weight:700;font-size:.8rem;white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:#FAFBFC}
td.num{font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- الوسوم ---------- */
.tag{display:inline-block;padding:2.5px 10px;border-radius:999px;font-size:.74rem;font-weight:600;
  white-space:nowrap;line-height:1.75}
.t-ok{background:var(--ok-bg);color:var(--ok)}
.t-warn{background:var(--warn-bg);color:var(--warn)}
.t-err{background:var(--err-bg);color:var(--err)}
.t-info{background:var(--info-bg);color:var(--info)}
.t-mute{background:#EEF1F4;color:#6B7885}
.t-gold{background:var(--gold-soft);color:#8A6529}

/* ---------- الأزرار والنماذج ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:9px 20px;
  border-radius:var(--radius);border:1px solid transparent;background:var(--navy);color:#fff;
  font-family:inherit;font-size:.88rem;font-weight:600;cursor:pointer;transition:var(--t)}
.btn:hover{background:var(--navy-2)}
.btn-gold{background:var(--gold)} .btn-gold:hover{background:#B8873F}
.btn-ghost{background:#fff;color:var(--navy);border-color:var(--line)}
.btn-ghost:hover{background:var(--bg-2)}
.btn-sm{padding:5.5px 13px;font-size:.8rem}
.btn-block{width:100%}
label{display:block;font-size:.83rem;color:var(--ink);font-weight:600;margin:0 0 6px}
input,select,textarea{width:100%;padding:10px 13px;border:1px solid var(--line);border-radius:var(--radius);
  font-family:inherit;font-size:.9rem;color:var(--ink);background:#fff;transition:var(--t)}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,152,90,.14)}
textarea{min-height:96px;resize:vertical;line-height:1.8}
.field{margin-bottom:15px}
.row{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.otp-input{letter-spacing:.55em;text-align:center;font-size:1.35rem;font-weight:700;
  font-variant-numeric:tabular-nums;padding:12px}

/* ---------- تنبيهات ---------- */
.alert{padding:12px 16px;border-radius:var(--radius);font-size:.86rem;margin-bottom:16px;
  border:1px solid transparent}
.a-err{background:var(--err-bg);color:var(--err);border-color:#F0CFCF}
.a-ok{background:var(--ok-bg);color:var(--ok);border-color:#C8E4D5}
.a-info{background:var(--info-bg);color:var(--info);border-color:#CCDFEE}
.a-warn{background:var(--warn-bg);color:var(--warn);border-color:#EEDCB4}

/* ---------- تفاصيل ---------- */
.dl{display:grid;grid-template-columns:auto 1fr;gap:9px 18px;font-size:.88rem;margin:0}
.dl dt{color:#7A8794;white-space:nowrap}
.dl dd{margin:0;color:var(--ink);font-weight:600}
.muted{color:#8794A1;font-size:.84rem}
.empty{text-align:center;padding:34px 20px;color:#93A0AC;font-size:.88rem}
.sep{height:1px;background:var(--line);margin:18px 0}

.thread{display:flex;flex-direction:column;gap:12px;max-height:420px;overflow-y:auto;padding:4px}
.msg{padding:11px 15px;border-radius:8px;max-width:76%;font-size:.88rem}
.msg .m{display:block;font-size:.72rem;opacity:.72;margin-bottom:4px}
.msg.them{background:var(--bg-2);border:1px solid var(--line);align-self:flex-start}
.msg.me{background:var(--navy);color:#fff;align-self:flex-end}

.qr-box{background:var(--bg-2);border:1px dashed var(--line);border-radius:var(--radius);
  padding:13px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.7rem;
  direction:ltr;text-align:left;word-break:break-all;color:#5A6772;line-height:1.65}

.demo-bar{background:var(--warn-bg);border-bottom:1px solid #EEDCB4;color:var(--warn);
  padding:8px 28px;font-size:.8rem;text-align:center;font-weight:600}

@media(max-width:900px){
  .shell{flex-direction:column}
  .side{width:100%;flex:none;height:auto;position:static}
  .side nav{display:flex;flex-wrap:wrap;padding:6px}
  .side nav .grp{width:100%;padding:10px 14px 2px}
  .side nav a{border-inline-start:0;border-bottom:3px solid transparent;padding:8px 14px}
  .side nav a.on{border-inline-start:0;border-bottom-color:var(--gold)}
  .content,.top{padding-inline:16px}
}
@media print{
  .side,.top,.demo-bar,.no-print{display:none!important}
  body{background:#fff} .content{padding:0}
  .card{box-shadow:none;border-color:#ccc}
}