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

/* ==========================================================================
   0. نظام التصميم — المتغيرات
   ========================================================================== */
:root{
  --ink:#0F3038; --ink-soft:#164450; --paper:#EEF5F6; --paper-deep:#DFEBEC;
  --card:#FFFFFF; --mustard:#1789A0; --mustard-soft:#E3F3F6;
  --red:#D6473F; --red-soft:#FBEAE9; --green:#1E8A5F; --green-soft:#E6F5EE;
  --ink70:rgba(15,48,56,.72); --ink50:rgba(15,48,56,.52); --ink12:rgba(15,48,56,.10);

  --amber:#A8701E; --amber-soft:#FAF0DC;
  --line:rgba(15,48,56,.09);
  --sidebar-bg: linear-gradient(180deg,#166D82 0%, #0F4E5C 100%);
  --grad-primary: linear-gradient(135deg, #23A0B8 0%, #147489 100%);
  --grad-accent: linear-gradient(135deg, #1789A0 0%, #4FC1D6 130%);
  --shadow-xs: 0 1px 2px rgba(15,48,56,.05);
  --shadow-sm: 0 2px 8px rgba(15,48,56,.07);
  --shadow-md: 0 10px 26px rgba(15,48,56,.10);
  --shadow-lg: 0 24px 60px rgba(15,48,56,.20);
  --shadow-glow: 0 8px 22px rgba(23,137,160,.30);
  --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:26px;
  --ease: cubic-bezier(.22,.9,.32,1.15);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Cairo',sans-serif; color:var(--ink); direction:inherit; -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(1100px 520px at 8% -8%, rgba(23,137,160,.07), transparent 55%),
    radial-gradient(900px 480px at 105% 10%, rgba(23,163,74,.06), transparent 50%),
    var(--paper);
  min-height:100vh;
}
.mono{font-family:'IBM Plex Sans Arabic',sans-serif; letter-spacing:.2px;}
button{cursor:pointer; font-family:'Cairo',sans-serif; border:none; -webkit-tap-highlight-color:transparent;}
button:active{transform:translateY(1px);}
input,select,textarea{font-family:'Cairo',sans-serif; outline:none;}
a{color:inherit;}
::-webkit-scrollbar{width:9px; height:9px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--ink12); border-radius:10px;}
::-webkit-scrollbar-thumb:hover{background:rgba(15,27,43,.2);}
.hidden{display:none !important;}

:focus-visible{outline:2.5px solid rgba(23,137,160,.55); outline-offset:2px; border-radius:6px;}

@keyframes fadeInUp{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} }
@keyframes fadeIn{ from{opacity:0;} to{opacity:1;} }
@keyframes scaleIn{ from{opacity:0; transform:scale(.94) translateY(6px);} to{opacity:1; transform:scale(1) translateY(0);} }
@keyframes floatBlob{ 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-16px,18px) scale(1.06);} }
@keyframes slideInLeft{ from{opacity:0; transform:translateX(-16px);} to{opacity:1; transform:translateX(0);} }

/* ==========================================================================
   1. شاشة تسجيل الدخول
   ========================================================================== */
#login-screen{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;
  position:relative; overflow:hidden;
  background:
    radial-gradient(720px 420px at 12% 8%, rgba(23,137,160,.16), transparent 60%),
    radial-gradient(640px 480px at 88% 92%, rgba(23,163,74,.13), transparent 60%),
    linear-gradient(155deg, #0A2E36 0%, #123E48 45%, #0A2E36 100%);
}
#login-screen::before, #login-screen::after{
  content:""; position:absolute; border-radius:50%; filter:blur(6px);
  background:radial-gradient(circle at 30% 30%, rgba(23,137,160,.55), rgba(23,137,160,0) 70%);
  animation:floatBlob 9s ease-in-out infinite;
  pointer-events:none;
}
#login-screen::before{ width:420px; height:420px; top:-140px; right:-120px; }
#login-screen::after{
  width:360px; height:360px; bottom:-130px; left:-110px;
  background:radial-gradient(circle at 30% 30%, rgba(23,163,74,.45), rgba(23,163,74,0) 70%);
  animation-delay:2.5s;
}
.login-card{
  position:relative; z-index:2;
  background:rgba(255,255,255,.98);
  backdrop-filter:blur(20px);
  width:100%; max-width:400px; border-radius:var(--r-xl);
  padding:38px 32px 32px; box-shadow:var(--shadow-lg), 0 0 0 1px rgba(255,255,255,.5) inset;
  text-align:center;
  animation:scaleIn .55s var(--ease);
}
.login-logo{
  width:68px; height:68px; border-radius:20px; background:var(--grad-primary);
  display:flex; align-items:center; justify-content:center; margin:0 auto 16px; overflow:hidden;
  box-shadow:var(--shadow-glow);
  position:relative;
}
.login-logo::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(155deg, rgba(255,255,255,.35), transparent 55%);
}
.login-logo img{width:100%; height:100%; object-fit:cover;}
.login-title{font-weight:900; font-size:21px; margin-bottom:4px; letter-spacing:-.2px;}
.login-sub{color:var(--ink50); font-size:13px; margin-bottom:26px; font-weight:600;}
.field{text-align:right; margin-bottom:15px;}
.field label{display:block; font-size:12.5px; font-weight:700; color:var(--ink70); margin-bottom:7px;}
.field input{
  width:100%; padding:12.5px 15px; border-radius:12px; border:1.5px solid var(--ink12);
  font-size:14.5px; background:var(--paper); color:var(--ink);
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.field input::placeholder{color:var(--ink50); opacity:.7;}
.field input:hover{border-color:rgba(15,27,43,.2);}
.field input:focus{
  border-color:var(--mustard); background:#fff;
  box-shadow:0 0 0 4px rgba(23,137,160,.14);
}
.btn-primary{
  width:100%; padding:13.5px 0; border-radius:13px; background:var(--grad-primary); color:#fff;
  font-weight:800; font-size:15px; margin-top:8px; box-shadow:var(--shadow-glow);
  transition:transform .18s var(--ease), box-shadow .18s ease, filter .18s ease;
  letter-spacing:.2px;
}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 12px 28px rgba(23,137,160,.4); filter:brightness(1.04);}
.btn-primary:disabled{opacity:.65; cursor:not-allowed; transform:none;}
.login-error{
  background:var(--red-soft); color:var(--red); font-size:12.5px; font-weight:700; padding:10px 13px;
  border-radius:11px; margin-bottom:14px; animation:fadeInUp .3s ease; border:1px solid rgba(229,72,77,.18);
}

/* ==========================================================================
   2. هيكل التطبيق العام
   ========================================================================== */
#app-shell{display:flex; flex-direction:column; min-height:100vh;}
.alert-banner{
  background:linear-gradient(90deg, #C7433C, #D6473F); color:#fff;
  display:flex; flex-direction:column; box-shadow:0 2px 10px rgba(214,71,63,.22); animation:fadeInUp .3s ease;
  position:sticky; top:0; z-index:90;
}
.alert-banner-row{display:flex; align-items:center; gap:10px; padding:10px 22px; font-weight:700; font-size:13px;}
.alert-banner-row .alert-msg{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.alert-toggle-btn{
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.3); color:#fff; font-weight:700;
  font-size:12px; padding:5px 12px; border-radius:8px; display:flex; align-items:center; gap:5px; flex-shrink:0;
  transition:background .15s ease;
}
.alert-toggle-btn:hover{background:rgba(255,255,255,.28);}
.alert-toggle-btn svg{transition:transform .2s ease;}
.alert-toggle-btn.open svg{transform:rotate(180deg);}
.alert-details{
  max-height:0; overflow:hidden; transition:max-height .25s ease; background:rgba(0,0,0,.12);
}
.alert-details.open{max-height:220px; overflow-y:auto;}
.alert-details-inner{display:flex; flex-wrap:wrap; gap:8px; padding:12px 22px;}
.alert-chip{
  background:rgba(255,255,255,.15); padding:5px 12px; border-radius:999px; font-size:12px; font-weight:700;
  display:flex; align-items:center; gap:6px; cursor:pointer; transition:background .15s ease;
}
.alert-chip:hover{background:rgba(255,255,255,.26);}
.layout{display:flex; width:100%; flex:1; min-height:0;}

aside{
  width:246px; background:var(--sidebar-bg); color:#fff; flex-shrink:0;
  padding:22px 15px; display:flex; flex-direction:column; gap:4px;
  position:relative; box-shadow:2px 0 24px rgba(0,0,0,.18);
  transition:width .22s ease, padding .22s ease, opacity .18s ease;
  overflow:hidden;
}
@media (min-width:861px){
  #app-shell.sidebar-collapsed aside{ width:0; padding:0; opacity:0; box-shadow:none; }
  #app-shell.sidebar-collapsed aside > *{ pointer-events:none; }
}
.sidebar-toggle-btn{
  background:var(--card); border:1.5px solid var(--line); border-radius:11px; width:40px; height:40px;
  display:flex; align-items:center; justify-content:center; color:var(--ink70); box-shadow:var(--shadow-xs);
  transition:all .15s ease; flex-shrink:0;
}
.sidebar-toggle-btn:hover{border-color:var(--mustard); color:var(--mustard);}

.top-header{
  display:flex; align-items:center; gap:14px; padding:12px 24px;
  background:var(--sidebar-bg); color:#fff; position:sticky; top:0; z-index:80;
  box-shadow:0 2px 12px rgba(0,0,0,.14); flex-wrap:wrap;
}
.top-header .sidebar-toggle-btn{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.16); color:#fff;}
.top-header .sidebar-toggle-btn:hover{background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.32); color:#fff;}
.top-header .bell-btn{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.16); color:#fff; box-shadow:none;}
.top-header .bell-btn:hover{background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.32); color:#fff;}
.top-header .bell-dropdown{color:var(--ink);}

.brand{display:flex; align-items:center; gap:11px;}
.brand .logo{
  width:38px; height:38px; border-radius:11px; background:var(--grad-primary);
  display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0;
  box-shadow:0 4px 14px rgba(23,137,160,.35);
}
.brand .logo img{width:100%; height:100%; object-fit:cover;}
.brand-name{font-weight:800; font-size:15px; line-height:1.2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#fff;}
.brand-sub{font-size:11px; color:rgba(255,255,255,.55); margin-top:2px; font-weight:600;}

.nav-btn{
  display:flex; align-items:center; gap:11px; padding:10.5px 13px; border-radius:11px; background:transparent;
  color:rgba(255,255,255,.72); font-size:13.8px; font-weight:600; text-align:right; width:100%;
  position:relative; transition:background .16s ease, color .16s ease, transform .12s ease;
}
.nav-btn svg{flex-shrink:0; opacity:.85; transition:opacity .16s ease;}
.nav-btn:hover{background:rgba(255,255,255,.06); color:#fff;}
.nav-btn:hover svg{opacity:1;}
.nav-btn.active{background:rgba(23,137,160,.16); color:#fff; font-weight:800;}
.nav-btn.active svg{opacity:1; color:#6FA0FF;}
.nav-btn.active::before{
  content:""; position:absolute; inset-inline-start:-15px; top:8px; bottom:8px; width:4px;
  border-radius:0 6px 6px 0; background:var(--grad-primary);
}
.nav-btn .badge{
  margin-inline-start:auto; background:var(--red); color:#fff; font-size:10.5px; font-weight:800;
  border-radius:999px; padding:1.5px 7px; box-shadow:0 2px 8px rgba(229,72,77,.5);
}
.nav-footer{margin-top:auto; padding-top:16px; font-size:10.8px; color:rgba(255,255,255,.35); line-height:1.5;}
.who{display:flex; align-items:center; gap:8px; padding:11px 8px; margin-top:8px; border-top:1px solid rgba(255,255,255,.09);}
#help-btn-mobile, #about-btn-mobile{display:none;}
.who-name{font-size:12.5px; font-weight:700; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.logout-btn{background:rgba(255,255,255,.07); color:#fff; font-size:11.5px; padding:6px 10px; border-radius:9px; transition:background .15s ease;}
.logout-btn:hover{background:rgba(255,255,255,.15);}
.lang-btn{
  flex:1; background:rgba(255,255,255,.06); color:rgba(255,255,255,.65); border:1px solid rgba(255,255,255,.12);
  font-size:11px; font-weight:700; padding:6px 0; border-radius:9px; transition:all .15s ease;
}
.lang-btn:hover{background:rgba(255,255,255,.12);}
.lang-btn.active-lang{background:var(--grad-primary); color:#fff; border-color:transparent; box-shadow:0 3px 10px rgba(23,137,160,.35);}
#login-screen .lang-btn{flex:0 0 46px; background:var(--paper); color:var(--ink70); border:1.5px solid var(--ink12);}
#login-screen .lang-btn.active-lang{background:var(--grad-primary); color:#fff; border-color:transparent;}

.content-col{flex:1; display:flex; flex-direction:column; min-width:0;}
.topbar{display:flex; align-items:center; padding:16px 26px 0; gap:10px;}
.bell-btn{
  position:relative; background:var(--card); border:1.5px solid var(--line); border-radius:11px;
  width:40px; height:40px; font-size:16px; display:flex; align-items:center; justify-content:center;
  color:var(--ink70); box-shadow:var(--shadow-xs); transition:all .15s ease;
}
.bell-btn:hover{border-color:var(--mustard); color:var(--mustard); box-shadow:var(--shadow-sm); transform:translateY(-1px);}
.bell-badge{
  position:absolute; top:-5px; left:-5px; background:var(--red); color:#fff; font-size:10px; font-weight:800;
  border-radius:999px; min-width:17px; height:17px; display:flex; align-items:center; justify-content:center;
  padding:0 3px; border:2px solid var(--paper); box-shadow:0 2px 6px rgba(229,72,77,.5);
}
.bell-dropdown{
  position:absolute; top:48px; left:0; width:290px; background:var(--card); border:1px solid var(--line);
  border-radius:16px; box-shadow:var(--shadow-lg); padding:15px; z-index:70; max-height:350px; overflow:auto;
  animation:scaleIn .18s var(--ease);
}
.bell-dropdown .bell-title{font-weight:800; font-size:13.5px; margin-bottom:10px;}
.bell-dropdown .bell-item{display:flex; align-items:center; gap:8px; padding:8px 2px; font-size:12.5px; border-top:1px solid var(--line);}
.bell-dropdown .bell-item:first-of-type{border-top:none;}
.bell-empty{font-size:12.5px; color:var(--ink50); padding:6px 2px;}
main{flex:1; padding:22px 26px 40px; overflow:auto;}

.section-header{display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:22px; gap:12px; flex-wrap:wrap; animation:fadeInUp .35s var(--ease);}
.section-title{font-size:22px; font-weight:900; letter-spacing:-.3px;}
.section-sub{font-size:13px; color:var(--ink50); margin-top:4px; font-weight:500;}

/* ==========================================================================
   3. البطاقات والشبكات
   ========================================================================== */
.card{
  background:var(--card); border-radius:var(--r-lg); padding:20px; border:1px solid var(--line);
  box-shadow:var(--shadow-xs); transition:box-shadow .2s ease, transform .2s ease;
  animation:fadeInUp .4s var(--ease);
}
.stats-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:24px;}
.stats-grid .card{display:flex; flex-direction:column;}
.stats-grid .card:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.stats-grid .card > div:first-child{
  width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, currentColor 12%, transparent);
}
.dash-grid-main{display:grid; grid-template-columns:1.3fr 1fr; gap:16px;}
.dash-grid-charts{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px;}
.dash-grid-main .card, .dash-grid-charts .card{animation:fadeInUp .45s var(--ease);}
.stat-value{font-size:29px; font-weight:900; margin-top:12px; letter-spacing:-.5px;}
.stat-label{font-size:12.5px; color:var(--ink50); margin-top:5px; font-weight:600;}

/* ==========================================================================
   4. الحالات والمؤشرات
   ========================================================================== */
.pill{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:800; padding:4px 11px; border-radius:999px; white-space:nowrap;}
.pill-dot{width:6px; height:6px; border-radius:50%;}
.pill-critical{color:var(--red); background:var(--red-soft);}
.pill-warning{color:var(--amber); background:var(--amber-soft);}
.pill-ok{color:var(--green); background:var(--green-soft);}

.tape{width:100%; height:14px; border-radius:14px; background:var(--paper-deep); overflow:hidden; border:1px solid var(--line); position:relative;}
.tape.sm{height:10px;}
.tape-fill{position:absolute; inset:0; transition:width .5s var(--ease); background-image:repeating-linear-gradient(90deg, rgba(255,255,255,.22) 0 2px, transparent 2px 10px);}

/* ==========================================================================
   5. الأزرار
   ========================================================================== */
.link-btn{background:none; color:var(--mustard); font-weight:700; font-size:12.5px; display:inline-flex; align-items:center; gap:3px; transition:opacity .15s ease;}
.link-btn:hover{opacity:.7;}
.btn-dark{
  background:var(--ink); color:#fff; padding:10px 16px; border-radius:11px; font-weight:700; font-size:13px;
  display:inline-flex; align-items:center; gap:7px; box-shadow:0 4px 12px rgba(15,27,43,.18);
  transition:transform .16s var(--ease), box-shadow .16s ease, background .16s ease;
}
.btn-dark:hover{transform:translateY(-2px); box-shadow:0 8px 20px rgba(15,27,43,.26); background:var(--ink-soft);}

/* ==========================================================================
   6. الجداول
   ========================================================================== */
table{width:100%; border-collapse:collapse; font-size:13.2px;}
thead tr{background:var(--paper-deep); text-align:right;}
th{padding:11px 16px; font-weight:800; font-size:11.5px; color:var(--ink70); letter-spacing:.3px;}
td{padding:11px 16px;}
tbody tr{border-top:1px solid var(--line); transition:background .12s ease;}
tbody tr:nth-child(even){background:#fff;}
tbody tr:nth-child(odd){background:rgba(242,245,249,.5);}
tbody tr:hover{background:var(--mustard-soft) !important;}

/* ==========================================================================
   7. الحقول وعناصر التحكم
   ========================================================================== */
.toolbar{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:14px 16px;
  box-shadow:var(--shadow-xs); margin-bottom:18px; display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  animation:fadeInUp .4s var(--ease);
}
.card-title{display:flex; align-items:center; gap:9px; font-weight:800; font-size:15px; margin-bottom:14px; color:var(--ink);}
.card-title svg{color:var(--mustard); flex-shrink:0;}

.cat-row{cursor:pointer; -webkit-user-select:none; user-select:none;}
.cat-row:hover td{background:var(--mustard-soft) !important;}
.cat-row .cat-chevron{display:inline-flex; margin-inline-end:6px; transition:transform .18s ease; vertical-align:-3px;}
.cat-row.is-collapsed .cat-chevron{transform:rotate(-90deg);}

details.collapsible-card{background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-xs); margin-bottom:18px; overflow:hidden;}
details.collapsible-card > summary{
  list-style:none; cursor:pointer; padding:16px 20px; display:flex; align-items:center; gap:9px;
  font-weight:800; font-size:15px; color:var(--ink); -webkit-user-select:none; user-select:none;
}
details.collapsible-card > summary::-webkit-details-marker{display:none;}
details.collapsible-card > summary svg.chev{margin-inline-start:auto; color:var(--ink50); transition:transform .18s ease;}
details.collapsible-card[open] > summary svg.chev{transform:rotate(180deg);}
details.collapsible-card > summary svg:first-child{color:var(--mustard);}
details.collapsible-card > .collapsible-body{padding:0 20px 20px;}
details.collapsible-card > summary:hover{background:var(--paper);}

.input, select.input{
  padding:10.5px 14px; border-radius:11px; border:1.5px solid var(--ink12); font-size:13.8px;
  background:#fff; transition:border-color .16s ease, box-shadow .16s ease; color:var(--ink);
}
.input:hover{border-color:rgba(15,27,43,.22);}
.input:focus{border-color:var(--mustard); box-shadow:0 0 0 4px rgba(23,137,160,.12);}
.tile-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(190px,1fr)); gap:13px;}
.tile{
  background:var(--card); border-radius:var(--r-lg); padding:16px; text-align:right; border:1.5px solid var(--line);
  transition:transform .18s var(--ease), box-shadow .18s ease, border-color .18s ease;
}
.tile:hover{transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:rgba(23,137,160,.35);}
.tile-head{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:9px; gap:8px;}
.tile-cat{font-size:11.5px; color:var(--ink50); margin-bottom:8px; font-weight:600;}
.tile-qty{font-size:12px; margin-top:7px; color:var(--ink70); font-weight:600;}

.move-panel{max-width:480px;}
.step-row{display:flex; align-items:center; gap:10px;}
.step-btn{
  width:36px; height:36px; border-radius:10px; border:1.5px solid var(--ink12); background:#fff;
  display:flex; align-items:center; justify-content:center; transition:all .15s ease; font-weight:800;
}
.step-btn:hover{border-color:var(--mustard); color:var(--mustard); background:var(--mustard-soft);}
.empty-note{color:var(--ink50); font-size:13px; padding:18px 6px; text-align:center; font-weight:500;}

/* ==========================================================================
   8. النوافذ المنبثقة والإشعارات
   ========================================================================== */
.modal-overlay{
  position:fixed; inset:0; background:rgba(10,16,26,.55); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; z-index:60; padding:16px;
  animation:fadeIn .18s ease;
}
.modal-box{
  background:var(--card); width:100%; max-width:420px; border-radius:var(--r-lg); padding:24px;
  max-height:88vh; overflow:auto; box-shadow:var(--shadow-lg); animation:scaleIn .22s var(--ease);
}
.icon-btn{
  width:32px; height:32px; border-radius:9px; border:1.5px solid var(--ink12); background:#fff;
  display:inline-flex; align-items:center; justify-content:center; transition:all .15s ease; color:var(--ink70);
}
.icon-btn:hover{border-color:var(--mustard); color:var(--mustard); background:var(--mustard-soft);}
.close-x{background:var(--paper); border-radius:9px; padding:7px; transition:background .15s ease;}
.close-x:hover{background:var(--paper-deep);}

.chip{display:inline-flex; align-items:center; gap:6px; background:var(--paper-deep); padding:6px 11px; border-radius:999px; font-size:12.5px; font-weight:700;}
.chip button{background:none; color:var(--ink50); font-size:13px; line-height:1;}
.chip-ok{background:var(--green-soft); color:var(--green);}
.chip-critical{background:var(--red-soft); color:var(--red);}

.toast{
  position:fixed; bottom:24px; left:24px; z-index:80; background:var(--ink); color:#fff; padding:13px 19px;
  border-radius:13px; font-weight:700; font-size:13.5px; box-shadow:var(--shadow-lg); display:flex; align-items:center; gap:8px;
  animation:slideInLeft .3s var(--ease);
}
.toast.err{background:var(--red);}

/* ==========================================================================
   9. الطباعة
   ========================================================================== */
.print-only{display:none;}
.print-header{margin-bottom:16px; padding-bottom:10px; border-bottom:2px solid var(--ink);}

@page{ size:A4; margin:1.4cm; }

@media print{
  aside, .alert-banner, .top-header, .no-print, #login-screen{display:none !important;}
  body, #app-shell, .layout, main{background:#fff !important; padding:0 !important; margin:0 !important; min-height:0 !important;}
  main{overflow:visible !important;}
  .print-only{display:block !important;}
  .print-exclude{display:none !important;}

  .card{box-shadow:none !important; border:1px solid #ccc !important; margin-bottom:14px !important; animation:none !important;}
  #section-lowstock, #section-consumption{break-inside:avoid;}
  .report-row{break-inside:avoid; page-break-inside:avoid;}

  .print-scroll{max-height:none !important; overflow:visible !important;}
  table{font-size:11px; border-collapse:collapse; width:100%;}
  thead{display:table-header-group;}
  tfoot{display:table-footer-group;}
  tr{page-break-inside:avoid; break-inside:avoid;}
  th, td{padding:6px 8px !important;}

  .tape{-webkit-print-color-adjust:exact; print-color-adjust:exact;}
  .pill{-webkit-print-color-adjust:exact; print-color-adjust:exact;}

  @page{
    @bottom-center{ content: "صفحة " counter(page) " من " counter(pages); font-size:10px; color:#666; }
  }
}

/* ==========================================================================
   10. الاستجابة للشاشات الصغيرة
   ========================================================================== */

@media (max-width:860px){
  .sidebar-toggle-btn{display:flex; order:1;}
  .top-header{padding:10px 14px; gap:10px; justify-content:flex-start;}
  .top-header .header-spacer{display:none;}
  .top-header .brand{order:2; margin-inline-start:auto; min-width:0;}
  .top-header #help-btn, .top-header #about-btn{display:none;}
  #help-btn-mobile, #about-btn-mobile{display:block;}
  .top-header > div:last-child{order:3;}
  .brand-name{max-width:150px;}
  .brand-sub{display:none;}
  .layout{flex-direction:column;}
  aside{width:100%; flex-direction:column; align-items:stretch; padding:0; overflow:visible; position:relative; z-index:80; box-shadow:0 2px 14px rgba(0,0,0,.15);}
  #nav-list{display:none; flex-direction:column; gap:2px; padding:10px 10px 0; background:transparent;}
  #nav-list.mobile-open{display:flex; animation:fadeIn .18s ease;}
  #mobile-extra-controls{display:none; padding:10px 10px 14px; background:transparent; border-top:1px solid rgba(255,255,255,.1); margin-top:8px;}
  #mobile-extra-controls.mobile-open{display:block;}
  .nav-footer{display:none;}
  .nav-btn{flex-direction:row; gap:10px; font-size:13.5px; padding:12px 13px; white-space:nowrap; width:100%; justify-content:flex-start;}
  .nav-btn span{display:block;}
  .stats-grid{grid-template-columns:repeat(2,1fr);}
  .dash-grid-main, .dash-grid-charts{grid-template-columns:1fr;}
  main{padding:14px;}

  .card{padding:15px;}
  .card[style*="padding:0"]{overflow-x:auto; -webkit-overflow-scrolling:touch;}
  table{min-width:560px;}

  .btn-dark, .btn-primary, .step-btn, .icon-btn{min-height:40px;}
  .section-header{flex-direction:column; align-items:stretch; gap:10px;}
  .section-header > div:last-child{width:100%;}
  .section-header .btn-dark{width:100%; justify-content:center;}

  #report-print-area ~ .card [style*="flex-wrap:wrap"] > div,
  .card > div[style*="display:flex; flex-wrap:wrap; gap:8px; align-items:end;"] > div{width:100%;}

  .toolbar{flex-direction:column; align-items:stretch;}
  .toolbar > *{width:100%;}
  .modal-box{padding:18px; max-height:82vh;}
  .bell-dropdown{width:min(290px, calc(100vw - 32px)); left:auto; right:0;}
  .tile-grid{grid-template-columns:repeat(auto-fill, minmax(150px,1fr));}
}

@media (max-width:480px){
  .stats-grid{grid-template-columns:1fr;}
  .login-card{padding:30px 20px 26px;}
}

/* ==========================================================================
   شاشة التحميل الأولية (تظهر فورًا عند فتح الصفحة قبل اكتمال تحميل النظام)
   ========================================================================== */
#boot-loader{
  position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(1100px 520px at 8% -8%, rgba(23,137,160,.10), transparent 55%),
    radial-gradient(900px 480px at 105% 10%, rgba(23,163,74,.08), transparent 50%),
    var(--paper);
  transition:opacity .25s ease;
}
#boot-loader.boot-loader-hidden{opacity:0; pointer-events:none;}
.boot-loader-box{display:flex; flex-direction:column; align-items:center; gap:16px;}
.boot-spinner{
  width:44px; height:44px; border-radius:50%;
  border:4px solid var(--paper-deep); border-top-color:var(--mustard);
  animation:boot-spin .8s linear infinite;
}
.boot-loader-text{font-family:'Cairo',sans-serif; font-weight:700; font-size:13.5px; color:var(--ink70); letter-spacing:.2px;}
@keyframes boot-spin{ to{ transform:rotate(360deg); } }