/* =========================================================
   glass.css — الشكل الجديد للنظام (لمعة زجاجية + أيقونات لامعة)
   =========================================================
   - بيتحمّل بعد باقي ملفات الستايل (وقبل print.css) — بيغيّر الشكل بس
     من غير ما يلمس أي منطق.
   - الثيم النحاسي هو الافتراضي (بدل الأبيض والذهبي).
   - الكروت والنوافذ والأزرار بلمعة زجاجية (blur + هايلايت أبيض خفيف).
   - مربعات الأيقونات الملوّنة اللامعة (.g-tile) زي أيقونات التطبيقات.
   - شريط تنقّل سفلي عائم على الموبايل (.bottom-nav).
   ========================================================= */

/* ---------- ألوان إضافية لكل ثيم ---------- */
.theme-copper{
  --topbar-bg: linear-gradient(120deg, #6B3417 0%, #8F4A22 45%, #B8723F 100%);
  --glass: rgba(255, 252, 248, .74);
  --glass-strong: rgba(255, 252, 248, .9);
  --glass-border: rgba(255, 255, 255, .7);
  --glass-shadow: 0 10px 30px rgba(74, 38, 16, .10);
  --blob-1: rgba(198, 120, 62, .22);
  --blob-2: rgba(150, 82, 38, .16);
}
.theme-blue{
  --topbar-bg: linear-gradient(120deg, #0A3D91 0%, #0B5CD1 50%, #2E9BE0 100%);
  --glass: rgba(255, 255, 255, .74);
  --glass-strong: rgba(255, 255, 255, .9);
  --glass-border: rgba(255, 255, 255, .7);
  --glass-shadow: 0 10px 30px rgba(11, 50, 120, .10);
  --blob-1: rgba(69, 199, 232, .22);
  --blob-2: rgba(11, 92, 209, .14);
}
.theme-green{
  --topbar-bg: linear-gradient(120deg, #0A4E30 0%, #0E7C4A 50%, #2BB673 100%);
  --glass: rgba(255, 255, 255, .74);
  --glass-strong: rgba(255, 255, 255, .9);
  --glass-border: rgba(255, 255, 255, .7);
  --glass-shadow: 0 10px 30px rgba(10, 78, 48, .10);
  --blob-1: rgba(111, 215, 155, .24);
  --blob-2: rgba(14, 124, 74, .14);
}
.theme-dark{
  --topbar-bg: linear-gradient(120deg, #0B1220 0%, #16243B 55%, #22375A 100%);
  --glass: rgba(22, 33, 49, .72);
  --glass-strong: rgba(22, 33, 49, .92);
  --glass-border: rgba(255, 255, 255, .08);
  --glass-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  --blob-1: rgba(92, 157, 255, .14);
  --blob-2: rgba(69, 199, 232, .10);
}
.theme-dot-copper{ background: linear-gradient(135deg, #6B3417 0%, #A8562A 55%, #E0A86E 100%); }
.theme-dot-dark{ background: linear-gradient(135deg, #3d4451, #6b7280); }

/* ---------- الخلفية: ألوان ناعمة ورا الزجاج ---------- */
body{
  background:
    radial-gradient(900px 520px at 100% -8%, var(--blob-1), transparent 62%),
    radial-gradient(800px 520px at -10% 108%, var(--blob-2), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}

/* ---------- مربعات الأيقونات اللامعة ---------- */
.g-tile{
  --c: #B4652F;
  position: relative; display: inline-grid; place-items: center; flex-shrink: 0;
  color: #fff; overflow: hidden; isolation: isolate;
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--c) 62%, #fff) 0%,
    var(--c) 52%,
    color-mix(in srgb, var(--c) 72%, #000) 100%);
  box-shadow:
    0 6px 14px color-mix(in srgb, var(--c) 38%, transparent),
    inset 0 1px 1px rgba(255, 255, 255, .65),
    inset 0 -3px 6px rgba(0, 0, 0, .16);
  vertical-align: middle;
}
.g-tile::before{ /* اللمعة الزجاجية فوق */
  content: ''; position: absolute; left: 6%; right: 6%; top: 3%; height: 46%; z-index: -1;
  border-radius: 40% 40% 50% 50% / 60% 60% 40% 40%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, .05));
}
.g-tile svg{ filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .22)); }
.g-tile-wrap{ display: inline-flex; margin-inline-end: 8px; vertical-align: middle; }
.ic-wrap{ display: inline-flex; vertical-align: middle; }
.ic-wrap.tone-ok{ color: var(--success); }
.ic-wrap.tone-warn{ color: #D9880B; }
.ic-wrap.tone-danger{ color: var(--danger); }
.ic-wrap.tone-accent{ color: var(--accent); }
.card-head h3, .modal-box h3, .cb-stats-title{ display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }

/* ---------- الشريط العلوي (نحاسي/ملوّن بلمعة زي التطبيق) ---------- */
.topbar{
  margin: 0 12px; padding: 14px 18px;
  background: var(--topbar-bg) !important;
  border: none !important; border-radius: 0 0 26px 26px;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--accent) 30%, transparent), inset 0 -1px 0 rgba(255, 255, 255, .12), inset 0 1px 0 rgba(255, 255, 255, .25);
  color: #fff; overflow: hidden; isolation: isolate;
}
.topbar::before{
  content: ''; position: absolute; inset: 0 0 52% 0; z-index: -1;
  background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0));
}
.topbar-title{ color: #fff !important; text-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.topbar .icon-btn{
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .3); color: #fff;
  border-radius: 50%; width: 42px; height: 42px; backdrop-filter: blur(6px);
}
.topbar .icon-btn:hover{ background: rgba(255, 255, 255, .26); }
.topbar .burger span{ background: #fff; }
.topbar .sync-status{ background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .3); color: #fff; }
.topbar .theme-switch{ background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .3); }
.topbar .theme-dot{ box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 1px 1px rgba(255, 255, 255, .45); }
.topbar .theme-dot.active{ border-color: #fff; transform: scale(1.12); }
.content{ padding-top: 18px; }

/* ---------- الكروت (زجاج) ---------- */
.card{
  background: var(--glass);
  -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid var(--glass-border);
  border-radius: 22px;
  box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 3px 0 color-mix(in srgb, var(--accent) 55%, transparent);
}
.card:hover{ transform: translateY(-2px); box-shadow: 0 16px 36px color-mix(in srgb, var(--accent) 16%, transparent), inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 3px 0 color-mix(in srgb, var(--accent) 70%, transparent); }
.card-head h3{ font-size: 1.05rem; }
.theme-dark .card{ box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255, 255, 255, .05), inset 0 3px 0 color-mix(in srgb, var(--accent) 55%, transparent); }

/* كروت الإحصائيات في لوحة التحكم */
.stat-card{ gap: 16px; padding: 16px 18px; }
.stat-icon{ background: none !important; width: auto !important; height: auto !important; }
.stat-value{ font-size: 1.55rem; }

/* شبكة الأقسام (لوحة التحكم) */
.launcher-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 14px 8px; }
.launcher-item{
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: none; border: none; padding: 10px 4px; border-radius: 18px; color: var(--text);
  font: 700 .78rem var(--font-body); text-align: center; line-height: 1.35;
  transition: transform .18s var(--ease), background .18s var(--ease);
}
.launcher-item:hover{ background: color-mix(in srgb, var(--accent) 8%, transparent); transform: translateY(-3px); }
.launcher-item:active{ transform: scale(.95); }
.launcher-item .g-tile{ width: 58px !important; height: 58px !important; border-radius: 18px !important; }
.launcher-item .g-tile svg{ width: 28px; height: 28px; }

/* ---------- الأزرار (لامعة) ---------- */
.btn-primary{
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 72%, #fff) 0%,
    var(--accent) 50%,
    color-mix(in srgb, var(--accent) 80%, #000) 100%) !important;
  color: #fff !important; border: 1px solid color-mix(in srgb, var(--accent) 70%, #000) !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 32%, transparent), inset 0 1px 0 rgba(255, 255, 255, .45) !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
}
.btn-primary:hover{ filter: brightness(1.06); }
.btn-ghost{
  background: var(--glass-strong); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .04), inset 0 1px 0 rgba(255, 255, 255, .7);
  color: var(--text);
}
.theme-dark .btn-ghost{ box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); }
.btn-ghost:hover{ border-color: var(--accent); color: var(--accent); background: var(--glass-strong); }
.btn-primary, .btn-ghost{ display: inline-flex; align-items: center; justify-content: center; gap: 6px; }

/* ---------- الحقول ---------- */
.field input, .form-grid select, .field select, .field textarea, .modal-box textarea, .modal-box select{
  border-radius: 14px !important; background: var(--glass-strong) !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .04);
}

/* ---------- التبويبات (شكل Segmented) ---------- */
.tabs{ border-bottom: none !important; padding: 5px !important; gap: 6px !important; width: fit-content; max-width: 100%; flex-wrap: wrap;
  background: color-mix(in srgb, var(--accent) 8%, var(--glass)); border-radius: 16px; border: 1px solid var(--glass-border); }
.tab-btn{ border-radius: 12px !important; }
.tab-btn.active{
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 72%, #fff), var(--accent) 60%) !important;
  color: #fff !important; box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 30%, transparent), inset 0 1px 0 rgba(255, 255, 255, .4);
}

/* ---------- الجداول ---------- */
.table-wrap{ border-radius: 16px; border: 1px solid var(--border); background: var(--glass-strong); overflow: auto; }
.data-table th{ background: color-mix(in srgb, var(--accent) 9%, var(--surface)) !important; color: var(--text) !important; }
.data-table tbody tr:hover{ background: color-mix(in srgb, var(--accent) 5%, transparent); }

/* ---------- إحصائيات صغيرة ---------- */
.mini-stat{
  background: var(--glass-strong); border: 1px solid var(--glass-border); border-radius: 18px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .04), inset 0 1px 0 rgba(255, 255, 255, .7);
}
.theme-dark .mini-stat{ box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); }
.mini-num{ color: var(--accent); }
.danger-mini .mini-num{ color: var(--danger); }

/* ---------- صناديق ومكوّنات ---------- */
.lab-total-box, .cb-section-total, .detail-grid div{ border-radius: 14px; }
.lab-total-box{ background: color-mix(in srgb, var(--accent) 8%, var(--glass-strong)); border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent); }
.admin-accordion{ border-radius: 16px; background: var(--glass-strong); }
.price-tag, .test-chip{ border-radius: 12px; }

/* ---------- النوافذ (Modal) ---------- */
.modal{ background: rgba(30, 16, 8, .38); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.theme-dark .modal{ background: rgba(0, 0, 0, .5); }
.modal-box{
  background: var(--glass-strong); border: 1px solid var(--glass-border); border-radius: 26px;
  -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .6);
}
.modal-box h3{ background: color-mix(in srgb, var(--surface) 92%, transparent); border-radius: 26px 26px 0 0; }

/* ---------- القائمة الجانبية (بني غامق + أيقونات خطّية في مربعات) ---------- */
.sidebar{ border-radius: 26px 0 0 26px; box-shadow: -10px 0 40px rgba(0, 0, 0, .25); }
.sidebar-title{ font-size: 1.15rem; }
.sidebar-brand-tile{ display: inline-flex; }
.sidebar-header .brand-pulse-dot{ display: none; }
.nav-item{ border-radius: 14px; gap: 12px; }
.nav-item .nav-ico{
  width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; flex-shrink: 0;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}
.nav-item.active{
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 80%, #fff 6%), color-mix(in srgb, var(--accent) 88%, #000)) !important;
  color: #fff !important; box-shadow: 0 6px 16px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.nav-item.active .nav-ico{ background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .3); }
.nav-group{
  background: rgba(255, 255, 255, .045) !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  border-right: 3px solid var(--g) !important;
  border-radius: 16px !important;
}
.nav-group.open{ background: rgba(255, 255, 255, .07) !important; box-shadow: 0 8px 20px rgba(0, 0, 0, .2) !important; }
.nav-group-ico{ background: none !important; width: auto !important; height: auto !important; }
.nav-group-head{ color: var(--sidebar-text) !important; }
.nav-group .nav-item.active::before{ background: #fff !important; }
.sidebar-footer .btn-ghost{ background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); color: var(--sidebar-text-dim); box-shadow: none; }
.sidebar-footer .btn-ghost:hover{ background: rgba(255, 255, 255, .12); color: var(--sidebar-text); }
.user-avatar{ background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 60%, #fff), var(--accent)); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); }

/* ---------- Toast ---------- */
.toast{
  background: rgba(36, 22, 14, .88); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 16px;
}

/* ---------- شاشة الدخول ---------- */
.login-card{
  background: var(--glass-strong); border: 1px solid var(--glass-border); border-radius: 28px;
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}

/* ---------- شريط التنقّل السفلي (الموبايل) ---------- */
.bottom-nav{ display: none; }
@media (max-width: 1023px){
  .bottom-nav{
    position: fixed; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 58;
    display: flex; justify-content: space-around; align-items: center; gap: 4px;
    padding: 8px 10px; border-radius: 30px;
    background: var(--glass-strong); border: 1px solid var(--glass-border);
    -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%);
    box-shadow: 0 14px 36px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .6);
  }
  .bn-item{
    flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px;
    background: none; border: none; color: var(--text-dim); font: 700 .68rem var(--font-body);
    padding: 6px 2px; border-radius: 22px; transition: color .18s var(--ease), background .18s var(--ease), transform .18s var(--ease);
  }
  .bn-item .bn-ico{ display: grid; place-items: center; }
  .bn-item.active{
    color: #fff;
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 72%, #fff), var(--accent) 55%, color-mix(in srgb, var(--accent) 80%, #000));
    box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 38%, transparent), inset 0 1px 0 rgba(255, 255, 255, .45);
    transform: translateY(-4px);
  }
  .bn-item:active{ transform: scale(.94); }
  .content{ padding-bottom: 104px; }
  .app-shell.sidebar-open .bottom-nav{ z-index: 61; }
  .toast-host{ bottom: 96px; }
}

/* ---------- الموبايل ---------- */
@media (max-width: 640px){
  .dashboard-grid{ grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .dashboard-grid .card.wide{ grid-column: 1 / -1; }
  .stat-card{ flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px 14px; }
  .stat-card .g-tile{ width: 40px !important; height: 40px !important; border-radius: 13px !important; }
  .stat-card .stat-value{ font-size: 1.25rem; }
  .topbar{ margin: 0 8px; border-radius: 0 0 22px 22px; padding: 12px 14px; }
  .card{ border-radius: 20px; }
  .launcher-grid{ grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); }
  .launcher-item .g-tile{ width: 52px !important; height: 52px !important; border-radius: 16px !important; }
}

/* ---------- المخازن (الأدوية والمستلزمات) ---------- */
.inv-hero{ display: flex; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.inv-hero h2{ margin: 0; font-size: 1.2rem; }
.inv-hero p{ margin: 2px 0 0; color: var(--text-dim); font-size: .82rem; }
.inv-stats{ display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.inv-stat{
  display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 18px;
  background: var(--glass-strong); border: 1px solid var(--glass-border);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .04), inset 0 1px 0 rgba(255, 255, 255, .7);
}
.inv-stat b{ display: block; font: 800 1.25rem var(--font-display); color: var(--text); }
.inv-stat span{ font-size: .74rem; color: var(--text-dim); }
.inv-name{ display: flex; align-items: center; gap: 10px; font-weight: 700; }
.inv-qty{ display: flex; flex-direction: column; gap: 4px; min-width: 90px; }
.inv-qty-bar{ height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 12%, transparent); overflow: hidden; }
.inv-qty-bar i{ display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent-2), var(--accent)); }
.inv-chip{ display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: .72rem; font-weight: 800; white-space: nowrap; }
.inv-chip.ok{ background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); }
.inv-chip.soon{ background: color-mix(in srgb, var(--warning) 20%, transparent); color: #9a6411; }
.inv-chip.expired{ background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.inv-chip.low{ background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger); }
.inv-chip.none{ background: var(--surface-2); color: var(--text-dim); }

/* الطباعة: من غير خلفيات/زجاج */
@media print{
  body{ background: #fff !important; }
  .card, .modal-box, .table-wrap, .mini-stat, .inv-stat{ -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important; background: #fff !important; }
  .topbar{ margin: 0 !important; border-radius: 0 !important; background: #fff !important; color: #000 !important; box-shadow: none !important; }
  .topbar::before{ display: none; }
  .topbar-title{ color: #000 !important; text-shadow: none; }
  .bottom-nav, .launcher-card{ display: none !important; }
  .g-tile{ box-shadow: none !important; }
}