/* ===== نظام المطالعات: هوية "الدفتر الرسمي" (Ledger) =====
   عاجي دافئ + حبر غامق + لمسة ذهبية خفيفة. عناوين Amiri، نصوص IBM Plex Sans Arabic. */
:root{
  --ink:#2a2218;--ink-2:#5a4f3d;--mute:#8a7d64;
  --paper:#f3ede1;--surface:#fbf8f1;--line:#d8cbac;--line-2:#e6dcc4;--rule:#c9b98d;
  --gold:#9c7a2e;--gold-2:#82631f;--gold-ink:#3a2c0c;--gold-tint:#efe6cd;
  --ok:#3f6b3a;--ok-bg:#e4ecdd;--no:#933c2b;--no-bg:#f3e2dc;--ret:#3d5a80;--ret-bg:#e1e7f0;
  --pend:#9c7217;--pend-bg:#f1e6c8;--cxl:#6b6350;--cxl-bg:#eae3d3;
  --r-lg:2px;--r-md:2px;
  --font:'IBM Plex Sans Arabic',system-ui,'Segoe UI',Tahoma,sans-serif;
  --font-display:'Amiri','IBM Plex Sans Arabic',serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 15px/1.8 var(--font);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
a{color:var(--ink-2)}
h1,h2,.card-h h2,.page-head h1,.brand-txt b{font-family:var(--font-display)}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.i{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.mute{color:var(--mute)}
.num{font-weight:600;white-space:nowrap}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ===== الهيكل: ترويسة (Masthead) + شريط روابط ===== */
.app{display:block;min-height:100vh;position:relative}
.masthead{background:var(--paper);border-bottom:3px double var(--ink);position:sticky;top:0;z-index:40}
.masthead-in{max-width:1280px;margin:0 auto;padding:16px clamp(16px,3vw,32px) 12px;display:flex;align-items:center;gap:18px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:1;min-width:0}
.brand-logo{height:44px;width:auto;flex:none}
.brand-txt{min-width:0}
.brand-txt b{display:block;font-size:19px;color:var(--ink);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-txt small{color:var(--mute);font-size:12px;letter-spacing:.03em}
.who{text-align:end;font-size:13px;color:var(--mute);flex:none}
.who b{display:block;color:var(--ink);font-size:14.5px;font-family:var(--font)}
.install{color:var(--ink);border-color:var(--line);background:transparent;flex:none}
.icon-btn{width:36px;height:36px;border-radius:6px;border:0;background:transparent;color:var(--ink-2);display:grid;place-items:center;cursor:pointer;flex:none}
.icon-btn:hover{background:var(--line-2);color:var(--ink)}
.menuBtn{display:none}
.navrow{max-width:1280px;margin:0 auto;padding:0 clamp(16px,3vw,32px);display:flex;align-items:center;gap:24px;overflow-x:auto;scrollbar-width:none;border-top:1px solid var(--rule)}
.navrow::-webkit-scrollbar{display:none}
.navrow a{display:flex;align-items:center;gap:7px;padding:11px 2px;color:var(--ink-2);text-decoration:none;font-weight:500;font-size:14px;white-space:nowrap;border-bottom:2px solid transparent}
.navrow a .i{width:16px;height:16px}
.navrow a:hover{color:var(--ink)}
.navrow a.on{color:var(--ink);font-weight:700;border-color:var(--gold)}
.navrow .cnt{min-width:19px;padding:0 6px;border-radius:99px;background:var(--gold);color:#fff;font-size:11.5px;font-weight:700;text-align:center;line-height:18px}
.navrow .sep{width:1px;align-self:stretch;margin:9px 4px;background:var(--rule);flex:none}
.main{min-width:0;position:relative}
.main::before{content:'';position:fixed;inset-inline-end:-40px;bottom:-30px;width:420px;height:268px;background:url('/images/watermark.png') no-repeat center/contain;opacity:.045;pointer-events:none;z-index:0}
.content{position:relative;z-index:1;padding:30px clamp(16px,3vw,32px) 70px;max-width:1280px;margin:0 auto}
.page-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:24px}
.page-head h1{font-size:27px;font-weight:700}
.page-head p{margin:4px 0 0;color:var(--mute)}
.page-head .acts{display:flex;gap:10px;flex-wrap:wrap}
.stack>*+*{margin-top:20px}
.scrim{display:none}

/* ===== البطاقات = "طيات" الدفتر (Folios) ===== */
.card{background:var(--surface);border:1px solid var(--line)}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;border-bottom:1px solid var(--rule)}
.card-h h2{font-size:17.5px;font-weight:700}
.card-b{padding:20px}
.strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));background:var(--surface);border:1px solid var(--ink)}
.strip>div{padding:16px 20px;border-inline-end:1px solid var(--line)}
.strip>div:last-child{border-inline-end:0}
.strip .lbl{display:flex;align-items:center;gap:7px;color:var(--mute);font-size:13px}
.strip .val{font-family:var(--font-display);font-size:29px;font-weight:700;line-height:1.3;margin-top:3px}
.strip .val small{font-family:var(--font);font-size:13.5px;font-weight:500;color:var(--mute);margin-inline-start:6px}
.strip .sub{color:var(--mute);font-size:12.5px}
.strip .alert-val .val{color:var(--pend)}
.tbl-wrap{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse}
.tbl th{font-size:12.5px;font-weight:600;color:var(--mute);text-align:start;padding:10px 20px;background:var(--gold-tint);border-bottom:1px solid var(--rule);white-space:nowrap}
.tbl td{padding:13px 20px;border-bottom:1px dashed var(--line);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr:hover{background:var(--gold-tint)}
.tbl .ref{font-weight:700;text-decoration:none;color:var(--ink)}
.tbl .ref:hover{text-decoration:underline;color:var(--gold-2)}
.tbl .sub{display:block;color:var(--mute);font-size:12.5px}
.tbl .end{text-align:end}
.empty{text-align:center;padding:44px 20px;color:var(--mute)}
.empty .i{width:38px;height:38px;opacity:.5}
.empty b{display:block;color:var(--ink);font-size:15.5px;margin:10px 0 4px;font-family:var(--font-display)}
.badge{display:inline-flex;align-items:center;gap:6px;padding:2px 11px;border-radius:99px;font-size:12.5px;font-weight:600;white-space:nowrap;background:var(--cxl-bg);color:var(--cxl);border:1px solid currentColor}
.badge::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.badge.pending{background:var(--pend-bg);color:var(--pend)}
.badge.approved{background:var(--ok-bg);color:var(--ok)}
.badge.rejected{background:var(--no-bg);color:var(--no)}
.badge.returned{background:var(--ret-bg);color:var(--ret)}
.pager{display:flex;gap:10px;align-items:center;justify-content:center;padding:16px}

/* ===== الأزرار والنماذج ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 14px/1.5 var(--font);padding:9px 18px;border-radius:var(--r-md);border:1px solid var(--ink);background:var(--ink);color:var(--surface);cursor:pointer;text-decoration:none;transition:background .15s,opacity .15s}
.btn:hover{opacity:.85}
.btn .i{width:17px;height:17px}
.btn.amber{background:var(--gold);border-color:var(--gold);color:#fff}.btn.amber:hover{background:var(--gold-2)}
.btn.ok{background:var(--ok);border-color:var(--ok);color:#fff}
.btn.no{background:var(--no);border-color:var(--no);color:#fff}
.btn.ret{background:var(--ret);border-color:var(--ret);color:#fff}
.btn.line{background:transparent;color:var(--ink);border-color:var(--line)}.btn.line:hover{background:var(--line-2);opacity:1}
.btn.sm{padding:5px 12px;font-size:13px}
.btn.block{width:100%}
.field{margin-bottom:16px}
.field>label{display:block;font-weight:600;font-size:13.5px;margin-bottom:6px;color:var(--ink-2)}
.hint{color:var(--mute);font-size:12.5px;margin-top:5px}
input,select,textarea{width:100%;font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:9px 12px;transition:border-color .15s}
input:focus,select:focus,textarea:focus{border-color:var(--gold);outline:none}
textarea{min-height:100px;resize:vertical}
input[type=file]{padding:8px;background:var(--gold-tint)}
input[type=checkbox]{width:18px;height:18px;padding:0;accent-color:var(--gold)}
.check{display:flex;align-items:center;gap:10px;font-weight:500;margin-bottom:14px}
.cols{display:grid;gap:0 16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.filters{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;padding:16px 20px;border-bottom:1px solid var(--rule)}
.filters .field{margin:0;flex:1;min-width:150px}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.alert{display:flex;gap:12px;align-items:flex-start;padding:12px 16px;border-radius:2px;margin-bottom:20px;background:var(--gold-tint);color:var(--gold-ink);border:1px solid var(--rule)}
.alert.bad{background:var(--no-bg);color:#5c1f14;border-color:#d9b4a9}
.alert.warn{background:var(--pend-bg);color:var(--pend);border-color:#dcc48a}
.alert ul{margin:0;padding-inline-start:18px}
.toasts{position:fixed;inset-inline:0;top:16px;display:grid;justify-items:center;z-index:60;pointer-events:none}
.toast{pointer-events:auto;display:flex;align-items:center;gap:10px;background:var(--ink);color:var(--surface);padding:11px 18px;border-radius:2px;box-shadow:0 12px 32px rgba(42,34,24,.28);animation:toast-in .25s ease-out}
.toast .i{color:var(--gold)}
@keyframes toast-in{from{transform:translateY(-10px);opacity:0}}

/* ===== صفحة المطالعة ===== */
.split{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:22px;align-items:start}
.dl{display:grid;grid-template-columns:150px minmax(0,1fr);margin:0}
.dl dt,.dl dd{padding:11px 0;border-bottom:1px dashed var(--line);margin:0}
.dl dt{color:var(--mute)}
.dl dt:last-of-type,.dl dd:last-of-type{border-bottom:0}
.dl .sub{display:block;color:var(--mute);font-size:12.5px}
.readouts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.readout{background:var(--surface);border:1px solid var(--ink);padding:14px 18px;position:relative}
.readout.wide{grid-column:1/-1}
.readout::before{content:'';position:absolute;inset-inline:0;top:0;height:3px;background:var(--gold)}
.readout .cap{color:var(--mute);font-size:12.5px}
.readout .digits{direction:ltr;display:flex;align-items:baseline;justify-content:flex-end;gap:8px;font-family:var(--font-display);font-size:31px;font-weight:700;line-height:1.3;color:var(--ink)}
.readout .digits small{font-family:var(--font);font-size:13px;font-weight:500;color:var(--mute)}
.readout.live .digits{color:var(--gold-2)}
.thumbs{display:flex;flex-wrap:wrap;gap:10px}
.thumb{width:132px;height:100px;border:1px solid var(--line);overflow:hidden;background:var(--gold-tint);display:block;cursor:zoom-in}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.chip{display:inline-flex;align-items:center;gap:8px;padding:9px 13px;border:1px solid var(--line);background:var(--surface);color:var(--ink);text-decoration:none}
.chip:hover{background:var(--gold-tint)}
.tl{list-style:none;margin:0;padding:0}
.tl li{position:relative;padding-inline-start:26px;padding-bottom:17px}
.tl li:last-child{padding-bottom:0}
.tl li::before{content:'';position:absolute;inset-inline-start:0;top:6px;width:11px;height:11px;border-radius:50%;background:var(--surface);border:2px solid var(--gold)}
.tl li::after{content:'';position:absolute;inset-inline-start:4.5px;top:20px;bottom:-3px;width:1px;background:var(--line)}
.tl li:last-child::after{display:none}
.tl li.approved::before,.tl li.executed::before{border-color:var(--ok)}
.tl li.rejected::before,.tl li.cancelled::before{border-color:var(--no)}
.tl li.returned::before{border-color:var(--ret)}
.tl .who{font-weight:700}.tl .when{color:var(--mute);font-size:12.5px}
.tl .note{background:var(--gold-tint);border-radius:2px;padding:7px 12px;margin-top:6px;font-size:13.5px}
.lb{position:fixed;inset:0;background:rgba(42,34,24,.85);display:none;place-items:center;z-index:80;padding:24px;cursor:zoom-out}
.lb.on{display:grid}.lb img{max-width:100%;max-height:100%;border-radius:2px;background:#fff}

/* ===== لوحة المدير ===== */
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.bars{display:grid;gap:15px}
.bar-row{display:grid;grid-template-columns:130px minmax(0,1fr) auto;gap:14px;align-items:center}
.bar-track{height:9px;background:var(--gold-tint);border-radius:99px;overflow:hidden}
.bar-fill{height:100%;background:var(--gold);border-radius:99px}
.trend{display:flex;align-items:flex-end;gap:14px;height:172px;padding-top:8px}
.trend .col{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px}
.trend .col i{display:block;width:100%;max-width:44px;background:var(--ink-2);min-height:3px}
.trend .col.now i{background:var(--gold)}
.trend .col span{font-size:12px;color:var(--mute)}
.trend .col b{font-size:12px;font-weight:600}
.user-cell{display:flex;align-items:center;gap:12px}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--gold-tint);color:var(--gold-2);display:grid;place-items:center;font-weight:700;flex:none}

/* ===== شاشة الدخول (بلا تغيير حسب الطلب) ===== */
.guest{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--paper);padding:28px 20px}
.guest-box{width:100%;max-width:840px;display:grid;grid-template-columns:220px minmax(0,1fr);background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 20px 60px -24px rgba(42,34,24,.35)}
.g-brand{background:#0b2f36;color:#fff;padding:28px 22px;display:flex;flex-direction:column;justify-content:center;gap:16px}
.g-logo img{display:block;width:100%;max-width:132px;height:auto}
.g-copy h1{font-size:16.5px;font-weight:700;line-height:1.55;margin:0 0 8px}
.g-copy p{color:#a9c4c9;font-size:12.5px;line-height:1.65;margin:0}
.g-form{display:flex;align-items:center;padding:34px 30px}
.g-card{width:100%;max-width:300px;margin:0 auto}
.g-card h2{font-size:19px;font-weight:700;margin-bottom:3px}
.g-card>p{color:var(--mute);font-size:13.5px;margin:0 0 18px}

/* ===== شاشات صغيرة ===== */
@media (max-width:1000px){
  .split{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
}
@media (max-width:900px){
  .masthead-in{padding:14px 16px 10px;gap:12px}
  .brand-logo{height:34px}
  .brand-txt small{display:none}
  .who{display:none}
  .navrow{display:none;position:fixed;top:58px;inset-inline:0;bottom:0;background:var(--surface);flex-direction:column;align-items:stretch;overflow-y:auto;z-index:55;border-top:0;border-bottom:3px solid var(--ink);gap:0;padding:6px 0}
  .navrow.open{display:flex}
  .navrow a{border-bottom:1px dashed var(--line);padding:13px 16px;border-radius:0}
  .navrow a.on{background:var(--gold-tint)}
  .navrow .sep{display:none}
  .menuBtn{display:grid}
  .scrim.on{display:block;position:fixed;inset:0;background:rgba(42,34,24,.4);z-index:50}
  .content{padding-top:22px}
}
@media (max-width:760px){
  .page-head h1{font-size:21px}
  .tbl.rs thead{display:none}
  .tbl.rs tr{display:block;padding:12px 16px;border-bottom:1px dashed var(--line)}
  .tbl.rs tr:last-child{border-bottom:0}
  .tbl.rs td{display:flex;justify-content:space-between;gap:16px;padding:4px 0;border:0;text-align:end}
  .tbl.rs td::before{content:attr(data-l);color:var(--mute);font-size:12.5px;flex:none;text-align:start}
  .tbl.rs td.end{justify-content:flex-start}
  .tbl.rs td.end::before{content:none}
  .dl{grid-template-columns:1fr}.dl dt{border:0;padding-bottom:0}
  .bar-row{grid-template-columns:90px minmax(0,1fr) auto}
  .strip>div{border-inline-end:0;border-bottom:1px solid var(--line)}
  .guest{padding:0;align-items:stretch}
  .guest-box{grid-template-columns:1fr;max-width:420px;border-radius:0;border:0;box-shadow:none;min-height:100vh}
  .g-brand{padding:22px 22px;gap:10px}
  .g-logo img{max-width:88px;margin:0 auto}
  .g-copy{text-align:center}
  .g-copy p{display:none}.g-copy h1{font-size:14.5px;margin:0}
  .g-form{padding:30px 24px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media print{.masthead,.topbar,.noprint,.toasts,.scrim{display:none!important}.app{display:block}.content{padding:0;max-width:none}.card{border:0}body{background:#fff}}