/* =====================================================================
   مرکز مہمانان ریکارڈ — Stylesheet (Urdu Nastaliq / RTL)
   فونٹ: Noto Nastaliq Urdu — سرور پر خود موجود (انٹرنیٹ کی ضرورت نہیں)
   License: SIL Open Font License 1.1 — assets/fonts/LICENSE-NotoNastaliqUrdu.txt
   ===================================================================== */

@font-face{
  font-family:'Noto Nastaliq Urdu';
  src:url('fonts/nastaliq-400.woff2') format('woff2'),
      url('fonts/nastaliq-400.woff')  format('woff');
  font-weight:400; font-style:normal; font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,
                U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,
                U+FE70-FE74,U+FE76-FEFC;
}
@font-face{
  font-family:'Noto Nastaliq Urdu';
  src:url('fonts/nastaliq-700.woff2') format('woff2'),
      url('fonts/nastaliq-700.woff')  format('woff');
  font-weight:600 700; font-style:normal; font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,
                U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,
                U+FE70-FE74,U+FE76-FEFC;
}

:root{
  --urdu:'Noto Nastaliq Urdu','Jameel Noori Nastaleeq','Alvi Nastaleeq',
         'Nafees Nastaleeq','Awami Nastaliq',serif;
  --latin:'Segoe UI',Roboto,Tahoma,Arial,sans-serif;
  --green:#0f7b4f;  --green-d:#0a5c3a;  --green-l:#e6f4ee;
  --gold:#c8a04a;
  --red:#d8232a;    --red-l:#fdeaea;
  --orange:#e07c12; --orange-l:#fdf1e2;
  --blue:#1668c1;   --blue-l:#e8f1fb;
  --purple:#6b3fa0; --purple-l:#f1ebf9;
  --ink:#1c2321;    --muted:#6b7773;
  --line:#dde5e2;   --bg:#f4f7f5;  --card:#fff;
  --r:14px;
  --shadow:0 1px 3px rgba(20,40,30,.08), 0 8px 24px rgba(20,40,30,.06);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--urdu);
  background:var(--bg); color:var(--ink);
  direction:rtl; text-align:right;
  font-size:14px; line-height:2.5;
  -webkit-text-size-adjust:100%;
  text-rendering:optimizeLegibility;
  font-feature-settings:"liga" 1,"calt" 1,"rlig" 1;
}
a{color:var(--green-d); text-decoration:none}
a:hover{text-decoration:underline}

/* ---------- Latin/number sections stay LTR ---------- */
.ltr{direction:ltr; text-align:left; font-family:var(--latin); line-height:1.6}
.num{font-family:var(--latin); line-height:1.5; direction:ltr; display:inline-block;
     unicode-bidi:embed; font-size:.95em}
/* نستعلیق میں انگریزی/ہندسے صاف نظر آئیں */
input,select,textarea,button{font-family:var(--urdu)}
input[dir=ltr],input[type=date],input[type=number],input[type=email],
input[type=tel],input[type=password]{font-family:var(--latin)}

/* ===================== Layout ===================== */
.topbar{
  background:linear-gradient(135deg,var(--green-d),var(--green));
  color:#fff; padding:10px 18px; display:flex; align-items:center; gap:14px;
  position:sticky; top:0; z-index:50; box-shadow:0 2px 12px rgba(0,0,0,.12);
}
.topbar .brand{display:flex;align-items:center;gap:10px;font-size:17px;line-height:2.2}
.topbar .brand small{display:block;font-size:11px;opacity:.85;line-height:2}
.topbar .spacer{flex:1}
.topbar .who{font-size:12px;opacity:.95;line-height:2;text-align:left}
.topbar a{color:#fff}
.menu-btn{display:none;background:rgba(255,255,255,.18);border:0;color:#fff;
  font-size:20px;border-radius:10px;width:40px;height:38px;cursor:pointer}

.wrap{display:flex; min-height:calc(100vh - 60px)}
.side{
  width:220px; flex:0 0 220px; background:var(--card); border-left:1px solid var(--line);
  padding:14px 10px; position:sticky; top:60px; height:calc(100vh - 60px); overflow:auto;
}
.side a{
  display:flex;align-items:center;gap:9px; padding:7px 12px 10px; border-radius:11px;
  color:var(--ink); font-size:14px; line-height:2.2; margin-bottom:3px;
}
.side a:hover{background:var(--green-l); text-decoration:none}
.side a.active{background:var(--green); color:#fff; font-weight:700}
.side .sep{font-size:11.5px;color:var(--muted);padding:14px 12px 5px;line-height:2}
.main{flex:1; padding:20px; min-width:0}

.page-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.page-head h1{font-size:21px;margin:0;line-height:2.1;padding-bottom:4px}
.page-head .spacer{flex:1}

/* ===================== Cards & tables ===================== */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); padding:16px 18px; margin-bottom:16px}
.card h2{font-size:16.5px;margin:0 0 14px; padding-bottom:12px; line-height:2.1;
  border-bottom:2px solid var(--green-l)}
.card h3{font-size:15px;margin:18px 0 10px;color:var(--green-d);line-height:2.1}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:12px;margin-bottom:18px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:14px 16px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.stat b{display:block;font-size:30px;line-height:1.3;font-family:var(--latin);direction:ltr;text-align:right}
.stat span{font-size:12.5px;color:var(--muted);line-height:2.1;display:block}
.stat::before{content:'';position:absolute;inset-inline-start:0;top:0;bottom:0;width:5px;background:var(--green)}
.stat.s-red::before{background:var(--red)}      .stat.s-red b{color:var(--red)}
.stat.s-orange::before{background:var(--orange)}.stat.s-orange b{color:var(--orange)}
.stat.s-blue::before{background:var(--blue)}    .stat.s-blue b{color:var(--blue)}
.stat.s-purple::before{background:var(--purple)}.stat.s-purple b{color:var(--purple)}
.stat.s-gray::before{background:var(--muted)}   .stat.s-gray b{color:var(--muted)}
.stat a{position:absolute;inset:0}

.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:820px}
thead th{background:var(--green-l);color:var(--green-d);text-align:right;
  padding:8px 10px 12px;font-size:13px;font-weight:700;line-height:2.1;
  border-bottom:2px solid #cfe3d9;white-space:nowrap}
tbody td{padding:8px 10px 11px;border-bottom:1px solid var(--line);
  vertical-align:middle;line-height:2.2}
tbody tr:hover{background:#fafcfb}
tbody tr.row-expired{background:#fdf0f0}
tbody tr.row-danger {background:#fdf4f4}
tbody tr.row-warn   {background:#fdf8ef}
tbody tr.row-info   {background:#f3f8fd}
tbody tr.is-out     {opacity:.62}
.tbl-empty{text-align:center;padding:36px;color:var(--muted)}

/* ===================== Badges ===================== */
.badge{display:inline-block;padding:1px 11px 5px;border-radius:999px;font-size:12px;
  line-height:2.1;white-space:nowrap;margin:2px 0 2px 3px}
.badge-red{background:var(--red-l);color:var(--red);border:1px solid #f4c4c4}
.badge-orange{background:var(--orange-l);color:var(--orange);border:1px solid #f4d9b4}
.badge-blue{background:var(--blue-l);color:var(--blue);border:1px solid #c3dbf4}
.badge-green{background:var(--green-l);color:var(--green-d);border:1px solid #c2e0d3}
.badge-purple{background:var(--purple-l);color:var(--purple);border:1px solid #d9c9ee}
.badge-gray{background:#eef1f0;color:var(--muted);border:1px solid #dde2e0}

/* ===================== Blinking alerts ===================== */
.pill{display:inline-flex;align-items:center;gap:6px;padding:2px 12px 5px;border-radius:999px;
  font-size:12.5px;line-height:2.1;border:1px solid transparent;white-space:nowrap}
.dot{width:10px;height:10px;border-radius:50%;flex:0 0 10px;display:inline-block}

@keyframes blinkRed{
  0%,100%{background:var(--red-l);border-color:#f0b5b5;box-shadow:0 0 0 0 rgba(216,35,42,0)}
  50%    {background:var(--red);   border-color:var(--red); color:#fff; box-shadow:0 0 0 5px rgba(216,35,42,.18)}
}
@keyframes blinkOrange{
  0%,100%{background:var(--orange-l);border-color:#f0cf9f;box-shadow:0 0 0 0 rgba(224,124,18,0)}
  50%    {background:var(--orange);   border-color:var(--orange); color:#fff; box-shadow:0 0 0 5px rgba(224,124,18,.18)}
}
@keyframes blinkBlue{
  0%,100%{background:var(--blue-l);border-color:#b7d3f2;box-shadow:0 0 0 0 rgba(22,104,193,0)}
  50%    {background:var(--blue);   border-color:var(--blue); color:#fff; box-shadow:0 0 0 5px rgba(22,104,193,.18)}
}
@keyframes dotPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.25;transform:scale(.7)}}

.blink-red   {animation:blinkRed 1.15s ease-in-out infinite; color:var(--red); font-weight:700}
.blink-orange{animation:blinkOrange 1.5s ease-in-out infinite; color:var(--orange); font-weight:700}
.blink-blue  {animation:blinkBlue 1.7s ease-in-out infinite; color:var(--blue); font-weight:700}
.blink-red .dot{background:var(--red);animation:dotPulse 1.15s infinite}
.blink-orange .dot{background:var(--orange);animation:dotPulse 1.5s infinite}
.blink-blue .dot{background:var(--blue);animation:dotPulse 1.7s infinite}
.pill.ok{background:var(--green-l);border-color:#c2e0d3;color:var(--green-d)}
.pill.ok .dot{background:var(--green)}
.pill.off{background:#eef1f0;border-color:#dde2e0;color:var(--muted)}
.pill.off .dot{background:var(--muted)}

@media (prefers-reduced-motion: reduce){
  .blink-red,.blink-orange,.blink-blue,.dot{animation:none !important}
  .blink-red{background:var(--red);color:#fff}
  .blink-orange{background:var(--orange);color:#fff}
  .blink-blue{background:var(--blue);color:#fff}
}

/* ===================== Forms ===================== */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px 16px}
.grid.g2{grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
.field{display:flex;flex-direction:column;gap:3px}
.field label{font-size:13px;color:var(--muted);line-height:2.1}
.field .req{color:var(--red)}
input[type=text],input[type=password],input[type=date],input[type=number],
input[type=email],input[type=tel],select,textarea{
  font-size:14px;padding:6px 11px 10px;border:1px solid var(--line);
  border-radius:10px;background:#fff;color:var(--ink);width:100%;line-height:2.2;
}
input[type=date],input[type=number],input[type=email],input[type=tel]{direction:ltr;text-align:left;
  font-family:var(--latin);line-height:1.7;padding:9px 11px}
select{padding-bottom:9px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--green);outline-offset:1px;border-color:var(--green)}
textarea{min-height:72px;resize:vertical}
input[type=file]{font-size:13px;padding:7px;border:1px dashed var(--line);border-radius:10px;background:#fbfdfc;width:100%}
.help{font-size:12px;color:var(--muted);line-height:2}

.btn{display:inline-flex;align-items:center;gap:7px;font-family:var(--urdu);font-size:14px;
  padding:5px 18px 9px;border-radius:11px;border:1px solid transparent;cursor:pointer;
  background:var(--green);color:#fff;line-height:2.2}
.btn:hover{background:var(--green-d);text-decoration:none;color:#fff}
.btn.ghost{background:#fff;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{background:#f2f6f4;color:var(--ink)}
.btn.red{background:var(--red)} .btn.red:hover{background:#b31d23}
.btn.blue{background:var(--blue)} .btn.blue:hover{background:#12539b}
.btn.sm{font-size:12.5px;padding:3px 12px 7px;line-height:2}
.btn-row{display:flex;gap:9px;flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}

.filters{display:flex;gap:9px;flex-wrap:wrap;align-items:flex-end;margin-bottom:14px}
.filters .field{min-width:140px}

.alert{padding:9px 16px 13px;border-radius:12px;margin-bottom:14px;font-size:14px;
  line-height:2.3;border:1px solid}
.alert.ok{background:var(--green-l);border-color:#c2e0d3;color:var(--green-d)}
.alert.err{background:var(--red-l);border-color:#f4c4c4;color:var(--red)}
.alert.warn{background:var(--orange-l);border-color:#f4d9b4;color:var(--orange)}
.alert.info{background:var(--blue-l);border-color:#c3dbf4;color:var(--blue)}

/* ===================== Detail view ===================== */
.dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:10px 18px}
.dl .it{border-bottom:1px dashed var(--line);padding-bottom:10px}
.dl .it span{display:block;font-size:12px;color:var(--muted);line-height:2}
.dl .it b{font-weight:700;font-size:14.5px;line-height:2.2;display:block}

.avatar{width:104px;height:104px;border-radius:16px;object-fit:cover;border:2px solid var(--line);background:#f0f3f1}
.avatar-ph{width:104px;height:104px;border-radius:16px;background:var(--green-l);color:var(--green-d);
  display:flex;align-items:center;justify-content:center;font-size:36px;border:2px solid #cfe3d9}

.docs{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:11px}
.doc{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;position:relative}
.doc img{width:100%;height:110px;object-fit:cover;display:block;background:#f0f3f1}
.doc .pdf{height:110px;display:flex;align-items:center;justify-content:center;background:var(--red-l);
  color:var(--red);font-size:30px}
.doc .cap{padding:4px 8px 8px;font-size:12px;line-height:2;border-top:1px solid var(--line)}
.doc .del{position:absolute;top:5px;inset-inline-end:5px;background:rgba(216,35,42,.92);color:#fff;
  border:0;border-radius:8px;width:26px;height:26px;cursor:pointer;font-size:14px;line-height:1}

.locker-box{background:linear-gradient(135deg,#fff8e8,#fffdf7);border:1px solid #ecdcb4;
  border-radius:var(--r);padding:14px 18px}
.locker-box .fno{font-size:28px;font-weight:700;color:var(--gold);font-family:var(--latin);
  direction:ltr;line-height:1.4}

.progress{height:9px;background:#e9eeec;border-radius:999px;overflow:hidden;margin-top:5px}
.progress i{display:block;height:100%;background:var(--green);border-radius:999px}
.progress i.w{background:var(--orange)} .progress i.d{background:var(--red)}

/* ===================== Mobile ===================== */
@media (max-width:860px){
  .menu-btn{display:block}
  .side{position:fixed;inset-inline-start:0;top:60px;bottom:0;transform:translateX(100%);
    transition:transform .22s;z-index:60;box-shadow:-6px 0 24px rgba(0,0,0,.12);height:auto}
  .side.open{transform:translateX(0)}
  .main{padding:14px}
  .topbar .brand small{display:none}
  .stat b{font-size:25px}
}
@media (max-width:520px){
  body{font-size:13.5px;line-height:2.4}
  .page-head h1{font-size:18px}
  .stats{grid-template-columns:1fr 1fr;gap:9px}
  .stat{padding:11px 13px}
  .stat b{font-size:23px}
  .stat span{font-size:11.5px}
}

/* ===================== Print ===================== */
@media print{
  .topbar,.side,.btn,.btn-row,.filters,.no-print{display:none !important}
  body{background:#fff}
  .main{padding:0}
  .card{box-shadow:none;border:1px solid #ccc;page-break-inside:avoid}
  .blink-red,.blink-orange,.blink-blue{animation:none;color:#000;font-weight:700}
}