/* مُولَّد من index.html — لا تعدّله يدويًا. */

  :root{
    --ink:#1B2430;
    --ink-soft:#333B46;
    --paper:#EDE8DC;
    --paper-card:#FAF8F2;
    --line:#D9D2C0;
    --line-strong:#C3BAA4;
    /* لون غامق ثابت لا يتغيّر بين الوضعين — تستخدمه عناصر "دائمًا غامقة بنص أبيض"
       (التبويب النشط، الزر الأساسي، توست وضع المطور) عشان ما تنعكس ألوانها بالوضع الليلي */
    --ink-fixed:#1B2430;

    --freezer:#2F6F8F;
    --freezer-soft:#DCEAF0;
    --pantry:#A8631E;
    --pantry-soft:#F2E4D3;
    --cleaning:#4C7A4C;
    --cleaning-soft:#E1EBDD;

    --stamp-in:#2E7D5B;
    --stamp-out:#B23A2E;
    --warn:#C7791D;
    --danger:#B23A2E;

    /* ثيم شخصي اختياري: يُستخدم فقط في عناصر التخصيص (الصورة الرمزية، شريط الترحيب، الأوسمة)
       ولا يمسّ ألوان المخازن الفعلية (freezer/pantry/cleaning) لأنها ألوان تصنيف حقيقي */
    --accent1:var(--freezer);
    --accent2:var(--pantry);
    --accent1-soft:var(--freezer-soft);
    --accent2-soft:var(--pantry-soft);

    --font-display:'Almarai',sans-serif;
    --font-body:'Tajawal',sans-serif;
    --font-mono:'IBM Plex Mono',monospace;
  }
  /* الوضع الليلي: عكس ألوان النص والأسطح الأساسية بشكل مركزي — بما إن كل الكروت/الجداول/الحقول
     مبنية على هذي المتغيرات، هذا يصلّح القراءة والتباين بكل الموقع دفعة وحدة بدل تصحيح كل عنصر لحاله */
  :root[data-theme="night"]{
    --ink:#F2EFE6;
    --ink-soft:#B9C2CE;
    --paper:#1B2430;
    --paper-card:#232B38;
    --line:rgba(255,255,255,0.08);
    --line-strong:rgba(255,255,255,0.16);
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    font-family:var(--font-body);
    font-weight:700;
    background:var(--paper);
    color:var(--ink);
    background-image:
      radial-gradient(circle at 100% 0%, rgba(47,111,143,0.06), transparent 45%),
      radial-gradient(circle at 0% 100%, rgba(168,99,30,0.06), transparent 45%);
    min-height:100vh;
    position:relative;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    text-rendering:optimizeLegibility;
  }
  .app{max-width:1180px;margin:0 auto;padding:38px 18px 60px;position:relative;z-index:1;}

  /* خلفية ثابتة هادئة: بدون أي حركة، لمسة لونية خفيفة فقط بألوان الهوية */
  .bg-scenery{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;}

  /* لمسة عمق ثابتة (بدون حركة) أعلى المشهد — توهّج لوني خفيف جدًا بألوان الهوية، بالوضع النهاري */
  .bg-sky-wash{
    position:absolute;inset:0;pointer-events:none;
    background:
      radial-gradient(ellipse 70% 50% at 18% 0%, rgba(47,111,143,0.07), transparent 60%),
      radial-gradient(ellipse 60% 45% at 85% 4%, rgba(168,99,30,0.05), transparent 65%);
  }
  [data-theme="night"] .bg-sky-wash{
    background:
      radial-gradient(ellipse 70% 50% at 18% 0%, rgba(47,111,143,0.10), transparent 60%),
      radial-gradient(ellipse 60% 45% at 85% 4%, rgba(168,99,30,0.08), transparent 65%);
  }
  /* سماء ليلية كاملة (تظهر فقط بالوضع الليلي) — تدرّج كحلي بنفس ألوان الهوية الموجودة أصلاً بالناف بار */
  .bg-scenery::before{
    content:"";position:absolute;inset:0;opacity:0;transition:opacity .5s ease;
    background:linear-gradient(180deg, #10161F 0%, #1B2430 55%, #232B38 100%);
  }
  [data-theme="night"] .bg-scenery::before{opacity:1;}

  /* ظهور تدريجي للكروت عند دخولها الشاشة أثناء التمرير */
  .card.scroll-pre{opacity:0;transform:translateY(18px);}
  .card.scroll-in{animation:rise .6s cubic-bezier(.2,.8,.25,1) both;}

  /* ============ الشريط الجانبي (تنقّل على اليمين — RTL) ============ */
  :root{ --sbw:250px; }

  .sidebar{
    position:fixed; inset-block:0; inset-inline-start:0; width:var(--sbw); z-index:200;
    display:flex; flex-direction:column;
    background:linear-gradient(170deg,#2C2418 0%,#232B38 42%,#1B2430 100%);
    border-inline-end:1px solid rgba(216,178,110,0.30);
    box-shadow:0 0 40px rgba(27,36,48,0.28);
    color:#DDE3EC;
    transition:transform .28s cubic-bezier(.4,0,.2,1);
  }
  .sidebar-head{
    display:flex; align-items:center; gap:10px;
    padding:18px 16px 16px; border-bottom:1px solid rgba(255,255,255,0.07);
  }
  .sidebar-head .brand{flex:1;min-width:0;}
  .sidebar-close{
    display:none; background:transparent; border:0; color:#9AA5B1;
    font-size:18px; cursor:pointer; padding:6px; border-radius:8px; flex-shrink:0;
  }
  .sidebar-close:hover{background:rgba(255,255,255,0.08);color:#fff;}

  .brand{display:flex;align-items:center;gap:12px;}
  .brand-mark{
    width:40px;height:40px;border-radius:11px;flex-shrink:0;
    background:linear-gradient(160deg, #2C3B4E, var(--ink) 70%);
    display:flex;align-items:center;justify-content:center;
    font-family:var(--font-display);font-weight:800;color:#E8C776;font-size:12.5px;letter-spacing:.5px;
    border:1.5px solid rgba(216,178,110,0.55);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.10), 0 3px 8px rgba(27,36,48,0.30);
  }
  .brand h1{font-family:var(--font-display);font-weight:800;font-size:16px;margin:0;letter-spacing:.2px;line-height:1.3;color:#F3F5F8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .brand .brand-sub{font-family:var(--font-display);font-weight:700;font-size:11.5px;margin:2px 0 0;color:#AEB6C2;letter-spacing:.15px;}
  .brand p{margin:3px 0 0;font-size:11px;color:#8D96A3;}

  .sidebar-nav{
    flex:1; overflow-y:auto; overflow-x:hidden;
    padding:12px 10px 18px; display:flex; flex-direction:column;
    scrollbar-width:thin;
  }
  .sidebar-nav .tabs{display:flex;flex-direction:column;gap:3px;}

  .tab{
    display:flex; align-items:center; gap:11px;
    padding:10px 12px; border-radius:9px;
    font-family:var(--font-display); font-weight:700; font-size:13px;
    color:#AEB6C2; cursor:pointer; user-select:none;
    border:1px solid transparent; white-space:nowrap;
    transition:background .15s, color .15s, box-shadow .15s;
  }
  .tab > i{width:18px;text-align:center;font-size:14px;opacity:.85;flex-shrink:0;}
  .tab:hover{background:rgba(255,255,255,0.06);color:#F3F5F8;}
  .tab.active{
    background:linear-gradient(90deg, rgba(216,178,110,0.16), rgba(216,178,110,0.03));
    color:#F6E7C6;
    border-color:rgba(216,178,110,0.26);
    box-shadow:inset 3px 0 0 #D8B26E;
  }
  .tab.active > i{opacity:1;color:#E8C776;}

  .settings-pin-btn{
    margin-top:10px; padding-top:14px;
    border-top:1px solid rgba(255,255,255,0.07);
  }

  .sidebar-backdrop{
    position:fixed; inset:0; z-index:150;
    background:rgba(16,22,31,0.55);
    opacity:0; visibility:hidden;
    transition:opacity .25s ease, visibility .25s ease;
  }

  /* ============ العمود الرئيسي + شريط علوي رفيع ============ */
  .main-col{ min-height:100vh; }
  .topbar{
    color:var(--paper-card);
    position:sticky;top:0;z-index:100;
    width:100%;max-width:1180px;margin:0 auto;
    padding:12px 18px 0;
  }
  .topbar-inner{
    position:relative;
    display:flex;align-items:center;gap:12px;
    padding:10px 16px;
    background:linear-gradient(160deg,#2C2418 0%,#232B38 45%,#1B2430 100%);
    border:1px solid rgba(216,178,110,0.32);
    border-radius:14px;
    box-shadow:0 8px 24px rgba(27,36,48,0.22), inset 0 1px 0 rgba(255,255,255,0.07);
  }
  .topbar-inner::after{
    content:"";position:absolute;left:16px;right:16px;bottom:0;height:2px;border-radius:2px;
    background:linear-gradient(90deg,var(--freezer),var(--pantry),var(--cleaning));
    opacity:.85;
  }
  @supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
    .topbar-inner{
      background:linear-gradient(180deg,rgba(34,44,58,0.92),rgba(27,36,48,0.92));
      -webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2);
    }
  }
  .menu-toggle{
    display:none; background:transparent; border:0; color:var(--paper-card);
    font-size:19px; cursor:pointer; padding:6px 9px; border-radius:9px; flex-shrink:0;
  }
  .menu-toggle:hover{background:rgba(255,255,255,0.10);}
  .topbar-title{
    font-family:var(--font-display); font-weight:800; font-size:15px;
    color:#F3F5F8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;
  }
  .topbar .status{font-family:var(--font-mono);font-size:11px;color:#9AA5B1;text-align:left;}
  .topbar .status.save-failed{color:#F0A99E;cursor:pointer;text-decoration:underline;text-underline-offset:2px;}

  /* الأيقونات (Font Awesome): تاخذ لون النص المحيط تلقائيًا (currentColor) */
  .fa-solid, .fa-regular, .fa-brands{vertical-align:-1px;}
  .btn-ghost .fa-solid, .btn-primary .fa-solid, .btn-in .fa-solid, .btn-out .fa-solid,
  .btn-danger-outline .fa-solid, .btn-search-trigger .fa-solid{margin-left:5px;}

  /* ديسكتوب: الشريط ثابت والمحتوى ينزاح جنبه */
  @media (min-width:901px){
    .main-col{ padding-inline-start:var(--sbw); }
  }
  /* جوال/تابلت: الشريط يصير درجًا منزلقًا من اليمين */
  @media (max-width:900px){
    .sidebar{ transform:translateX(100%); box-shadow:none; }
    #appRoot.nav-open .sidebar{ transform:translateX(0); box-shadow:0 0 60px rgba(0,0,0,0.45); }
    #appRoot.nav-open .sidebar-backdrop{ opacity:1; visibility:visible; }
    .sidebar-close{ display:block; }
    .menu-toggle{ display:inline-flex; align-items:center; justify-content:center; }
  }
  /* ملاحظة: تنسيق الشريط العلوي المضغوط للجوال موجود لاحقًا (بعد تعريفات الأزرار) */

  /* تلميح التبويبات العائم (ديسكتوب فقط) */
  .tab-tooltip{
    position:fixed;z-index:500;pointer-events:none;
    background:var(--ink-fixed);color:#fff;
    font-family:var(--font-body);font-weight:600;font-size:11.5px;line-height:1.45;
    padding:8px 11px;border-radius:9px;
    max-width:220px;box-shadow:0 8px 20px rgba(27,36,48,0.3);
    opacity:0;transition:opacity .15s ease;
  }
  .tab-tooltip.show{opacity:1;}
  @media (max-width:900px){ .tab-tooltip{display:none!important;} }

  .view{display:none;animation:fade .25s ease;}
  .view.active{display:block;}
  @keyframes fade{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:translateY(0);}}

  h2.section-title{
    font-family:var(--font-display);font-weight:800;font-size:19px;
    margin:0 0 6px;display:flex;align-items:center;gap:10px;letter-spacing:.1px;
  }
  .section-sub{color:var(--ink-soft);font-size:13.5px;line-height:1.6;margin:0 0 20px;max-width:760px;}
  /* بالوضع الليلي: العناوين والتسميات اللي تجلس مباشرة على خلفية الصفحة (خارج أي كرت) لازم تتحول لدرجة فاتحة
     عشان تبقى واضحة فوق السماء الغامقة — الكروت نفسها ما تتأثر لأن خلفيتها فاتحة دايمًا */
  [data-theme="night"] .view > .section-title{color:#F2EFE6;}
  [data-theme="night"] .view > .section-sub{color:#B9C2CE;}
  [data-theme="night"] .view > .toolbar > .field > label{color:#D8DEE8;}
  /* شريط الترحيب فوق لوحة التحكم يستخدم خلفية شبه شفافة (14% شفافية) مصممة لتظهر فوق خلفية فاتحة —
     بالليل تصير شبه غامقة والنص الغامق فوقها يختفي، فنرفع التشبّع ونفتح لون النص */
  [data-theme="night"] .greet-bar{
    background:linear-gradient(90deg, rgba(47,111,143,0.32), rgba(168,99,30,0.28));
    border-color:rgba(255,255,255,0.12);
  }
  [data-theme="night"] .greet-bar .greet-text{color:#F2EFE6;}
  [data-theme="night"] .greet-bar .greet-brief{color:#CBD3DE;}

  .card{
    background:var(--paper-card);border:1px solid var(--line);
    border-radius:14px;padding:20px 22px;margin-bottom:18px;
    box-shadow:0 2px 8px rgba(27,36,48,0.04);
    position:relative;z-index:1;
  }
  .card h3{line-height:1.4;}
  .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom: 50px;}
  @media (max-width:820px){.grid3{grid-template-columns:1fr;}}

  .store-card{
    border-radius:14px;padding:20px;color:#fff;position:relative;overflow:hidden;
    box-shadow:0 8px 20px rgba(0,0,0,0.14);z-index:1;
  }
  .store-card.freezer{background:linear-gradient(160deg,var(--freezer),#1F4F66);}
  .store-card.pantry{background:linear-gradient(160deg,var(--pantry),#7A470F);}
  .store-card.cleaning{background:linear-gradient(160deg,var(--cleaning),#365A36);}
  .store-card .tag{font-size:11px;opacity:.8;font-family:var(--font-mono);letter-spacing:1px;}
  .store-card h3{font-family:var(--font-display);font-size:17px;margin:7px 0 14px;}
  .store-card .stat-row{display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:6px;opacity:.95;line-height:1.4;}
  .store-card .stat-row b{font-family:var(--font-mono);font-weight:600;}
  .store-card .low-badge{
    margin-top:10px;background:rgba(255,255,255,0.18);
    border:1px dashed rgba(255,255,255,0.55);
    border-radius:8px;padding:6px 10px;font-size:11.5px;
  }
  .store-card .low-badge.warn{animation:lowPulse 2.6s ease-in-out infinite;}
  @keyframes lowPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,0);}50%{box-shadow:0 0 0 6px rgba(255,255,255,0.14);}}

  label{display:block;font-size:12.5px;color:var(--ink-soft);margin-bottom:6px;font-weight:600;}
  input,select,textarea{
    width:100%;padding:10px 12px;border-radius:9px;border:1px solid var(--line-strong);
    background:#fff;color:var(--ink);font-family:var(--font-body);font-size:13.5px;line-height:1.4;
  }
  [data-theme="night"] input,[data-theme="night"] select,[data-theme="night"] textarea{background:var(--paper-card);}
  input:focus,select:focus,textarea:focus{outline:2px solid var(--freezer);outline-offset:1px;}
  .field{margin-bottom:14px;}
  .row{display:flex;gap:14px;flex-wrap:wrap;}
  .row > .field{flex:1;min-width:140px;}

  button{
    font-family:var(--font-display);font-weight:700;font-size:13.5px;
    border:none;border-radius:9px;padding:11px 18px;cursor:pointer;transition:.15s;letter-spacing:.1px;
  }
  button:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
  button:disabled{opacity:.55;cursor:not-allowed;}
  .btn-primary{background:var(--ink-fixed);color:#fff;}
  .btn-primary:hover{background:#2A3646;}
  .btn-in{background:var(--stamp-in);color:#fff;}
  .btn-in:hover{background:#256B4E;}
  .btn-out{background:var(--stamp-out);color:#fff;}
  .btn-out:hover{background:#9B2F25;}
  .btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line-strong);}
  .btn-ghost:hover{background:var(--paper);}
  .theme-choice-btn.active{background:var(--ink-fixed);color:#fff;border-color:var(--ink-fixed);}
  .btn-sm{padding:6px 10px;font-size:12px;border-radius:7px;}
  .btn-danger-outline{background:transparent;border:1px solid var(--danger);color:var(--danger);}

  .lines-table{width:100%;border-collapse:collapse;margin-bottom:10px;table-layout:fixed;}
  .lines-table th{
    text-align:right;font-size:11.5px;color:var(--ink-soft);font-weight:600;
    padding:6px 8px;border-bottom:1px solid var(--line-strong);
  }
  .lines-table td{padding:6px 6px;border-bottom:1px solid var(--line);vertical-align:middle;}
  .lines-table input, .lines-table select{padding:8px 8px;font-size:13px;}
  .lines-table td.store-col{width:172px;}
  .lines-table td.qty-col{width:100px;}
  .lines-table td.unit-col{width:100px;color:var(--ink-soft);font-size:12.5px;}
  .lines-table td.rm-col{width:40px;text-align:center;}
  .lines-table select, .lines-table input{width:100%;min-width:0;}
  .lines-table select{padding-left:6px;padding-right:6px;text-overflow:ellipsis;}
  .lines-table td{overflow:hidden;}
  .rm-line{background:none;border:none;color:var(--danger);font-size:16px;cursor:pointer;padding:2px 6px;}

  table.data{width:100%;border-collapse:collapse;font-size:14.5px;}
  table.data th{
    text-align:right;padding:11px 12px;background:var(--paper);
    border-bottom:2px solid var(--line-strong);font-size:12.5px;color:var(--ink-soft);
    font-weight:800;letter-spacing:.2px;text-transform:none;
    position:sticky;top:0;z-index:5;
  }
  table.data td{padding:11px 12px;border-bottom:1px solid var(--line);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:0;line-height:1.4;font-weight:700;color:var(--ink);}
  table.data td.wrap-cell{white-space:normal;text-overflow:clip;max-width:none;}
  table.data tr:hover td{background:rgba(0,0,0,0.02);}
  .table-wrap{overflow-x:auto;max-height:520px;overflow-y:auto;border-radius:10px;border:1px solid var(--line);}
  .table-wrap table.data{table-layout:fixed;min-width:640px;}
  /* كشف حركة صنف: 5 أعمدة بسيطة فقط، ما تحتاج العرض الأدنى العام (640px) المخصّص للجداول كثيرة الأعمدة */
  .table-wrap table.data#ledgerTable, .table-wrap table.data.ledger-item-table{min-width:0;}
  .mono-cell{direction:ltr;unicode-bidi:isolate;text-align:right;}

  .pill{display:inline-block;padding:3px 10px;border-radius:999px;font-size:11.5px;font-weight:700;font-family:var(--font-display);}
  .pill-in{background:var(--cleaning-soft);color:var(--stamp-in);}
  .pill-out{background:#F6DEDA;color:var(--stamp-out);}
  .pill-pending{background:var(--pantry-soft);color:var(--pantry);}
  .pill-inv-supplier{background:var(--freezer-soft);color:var(--freezer);}
  .pill-inv-issue{background:#F6DEDA;color:var(--stamp-out);}
  .pill-inv-purchase{background:var(--cleaning-soft);color:var(--cleaning);}
  .pill-store-freezer{background:var(--freezer-soft);color:var(--freezer);}
  .pill-store-pantry{background:var(--pantry-soft);color:var(--pantry);}
  .pill-store-cleaning{background:var(--cleaning-soft);color:var(--cleaning);}
  .mono{font-family:var(--font-mono);}
  .low-flag{color:var(--warn);font-weight:700;}
  input.expiry-soon{border-color:var(--warn);background:var(--pantry-soft);color:var(--warn);font-weight:700;}
  input.expiry-expired{border-color:var(--danger);background:#F6DEDA;color:var(--danger);font-weight:700;}
  .newsection-spinner{
    width:56px;height:56px;border-radius:50%;
    border:4px solid var(--line);border-top-color:var(--pantry);
    animation:bootSpin .9s linear infinite;
  }
  @media (prefers-reduced-motion: reduce){
    .newsection-spinner{animation:none;}
  }
  .inv-variance{font-family:var(--font-mono);font-weight:700;direction:ltr;unicode-bidi:isolate;text-align:right;display:inline-block;}
  .inv-variance.zero{color:var(--ink-soft);}
  .inv-variance.pos{color:var(--stamp-in);}
  .inv-variance.neg{color:var(--danger);}
  .inv-counted-input{width:100%;padding:8px 10px;font-family:var(--font-mono);text-align:center;}
  .neg-flag{color:var(--danger);font-weight:700;}

  .empty-state{
    text-align:center;padding:46px 20px;color:var(--ink-soft);font-size:13.5px;
    border:1.5px dashed var(--line-strong);border-radius:12px;background:var(--paper-card);
  }
  .empty-state .icon{font-size:28px;margin-bottom:10px;opacity:.75;}

  .toolbar{display:flex;gap:12px;flex-wrap:wrap;align-items:end;margin-bottom:16px;}
  .toolbar .field{margin-bottom:0;min-width:150px;}

  /* زر "خيارات متقدمة" — يفتح/يقفل حقول نادرة الاستخدام في نماذج الإضافة السريعة */
  .advanced-toggle{
    display:flex;align-items:center;gap:8px;
    background:transparent;border:0;cursor:pointer;
    font-family:var(--font-display);font-weight:700;font-size:12.5px;color:var(--ink-soft);
    padding:6px 2px;margin-top:4px;
  }
  .advanced-toggle:hover{color:var(--ink);}
  .advanced-toggle .fa-chevron-down{font-size:10px;transition:transform .2s ease;}
  .advanced-toggle[aria-expanded="true"] .fa-chevron-down{transform:rotate(180deg);}
  .advanced-toggle-hint{font-weight:500;color:var(--ink-soft);opacity:.75;font-size:11.5px;}
  .advanced-fields{margin-top:10px;padding-top:14px;border-top:1px dashed var(--line-strong);animation:fade .2s ease;}

  /* ====== محرّر وحدات الصنف (وحدة أساس + وحدات شراء/صرف إضافية بمعاملاتها) ====== */
  .units-editor{margin-top:16px;padding-top:16px;border-top:1px dashed var(--line-strong);}
  .units-editor > label{display:block;font-size:12px;color:var(--ink-soft);margin-bottom:10px;line-height:1.6;}
  .units-editor-rows{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px;}
  .units-editor-rows:empty{display:none;}
  .unit-chip{
    display:flex;align-items:center;gap:8px;
    background:var(--paper);border:1px solid var(--line-strong);border-radius:999px;
    padding:6px 8px 6px 14px;font-family:var(--font-mono);font-size:12.5px;color:var(--ink);
  }
  .unit-chip button{
    background:var(--danger);color:#fff;border:0;border-radius:50%;
    width:18px;height:18px;line-height:1;cursor:pointer;font-size:11px;flex-shrink:0;
  }
  .units-editor-add{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
  .units-editor-add input{
    font-family:var(--font-body);font-size:13px;padding:9px 12px;
    border:1px solid var(--line-strong);border-radius:9px;background:var(--paper-card);color:var(--ink);
    flex:1;min-width:140px;
  }
  .units-editor-add input#newUnitFactor{flex:0 0 auto;width:150px;}
  .units-editor-eq{font-weight:800;color:var(--ink-soft);}

  /* شارة تحويل الوحدة تحت حقل الوحدة بسطور السند/الطلب */
  .line-conv{display:block;font-size:10.5px;color:var(--ink-soft);margin-top:3px;font-family:var(--font-mono);}

  /* شارة القسم/الوحدة الصغيرة بجانب اسم المخزن بجدول الأصناف */
  .item-units-badge{
    display:inline-flex;align-items:center;gap:5px;cursor:pointer;
    background:transparent;border:1px dashed var(--line-strong);color:var(--ink-soft);
    font-family:var(--font-mono);font-size:10.5px;padding:2px 8px;border-radius:999px;
  }
  .item-units-badge:hover{border-color:var(--ink-soft);color:var(--ink);}

  /* ====== قائمة الموردين — كل مورد قسم عنوانه اسمه، وتحته جدول مواده (شبيه بإكسيل) ====== */
  .suppliers-groups{display:flex;flex-direction:column;gap:14px;}
  .supplier-group{background:var(--paper-card);border:1px solid var(--line);border-radius:14px;overflow:hidden;}
  .supplier-group-head{
    display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
    padding:12px 16px;background:var(--pantry-soft);border-bottom:1px solid var(--line);
  }
  .supplier-group-name{display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:800;font-size:14.5px;color:var(--pantry);}
  .supplier-group-phone{font-family:var(--font-mono);font-size:12px;color:var(--ink-soft);}
  .supplier-group-notes{flex-basis:100%;font-size:12px;color:var(--ink-soft);}
  .supplier-group-actions{display:flex;gap:6px;flex-shrink:0;}

  .supplier-materials-table{padding:4px 16px 14px;}
  .supplier-material-row{
    display:grid;grid-template-columns:1fr 1fr 28px;gap:10px;align-items:center;
    padding:7px 0;border-bottom:1px solid var(--line);
  }
  .supplier-material-row:last-child{border-bottom:none;}
  .sm-name{font-size:13px;font-weight:700;color:var(--ink);}
  .sm-note-input{
    font-family:var(--font-body);font-size:12.5px;padding:6px 10px;width:100%;
    border:1px solid transparent;border-radius:7px;background:transparent;color:var(--ink-soft);
  }
  .sm-note-input:hover,.sm-note-input:focus{border-color:var(--line-strong);background:var(--paper);outline:none;}
  .sm-remove{
    display:flex;align-items:center;justify-content:center;
    background:transparent;border:0;color:var(--ink-soft);cursor:pointer;
    width:24px;height:24px;border-radius:50%;flex-shrink:0;font-size:12px;padding:0;
  }
  .sm-remove:hover{background:var(--danger);color:#fff;}
  .supplier-material-add input{
    font-family:var(--font-body);font-size:12.5px;padding:7px 10px;
    border:1px solid var(--line-strong);border-radius:8px;background:var(--paper);color:var(--ink);
  }
  .supplier-material-add-btn{
    display:flex;align-items:center;justify-content:center;
    background:transparent;border:1px dashed var(--line-strong);color:var(--ink-soft);
    border-radius:8px;width:28px;height:28px;cursor:pointer;flex-shrink:0;font-size:12px;padding:0;
  }
  .supplier-material-add-btn:hover{border-color:var(--pantry);color:var(--pantry);}
  .supplier-no-materials{font-size:12px;color:var(--ink-soft);font-style:italic;padding:8px 0;}

  .stamp-overlay{
    position:fixed;inset:0;background:rgba(27,36,48,0.55);
    display:none;align-items:center;justify-content:center;z-index:200;padding:20px;
  }
  .stamp-overlay.show{display:flex;}
  .stamp-card{
    background:var(--paper-card);border-radius:16px;padding:30px 28px 24px;
    max-width:380px;width:100%;text-align:center;position:relative;
    box-shadow:0 20px 50px rgba(0,0,0,0.35);
    animation:pop .3s cubic-bezier(.2,.9,.3,1.2);
  }
  @media (max-width:480px){
    .stamp-overlay{padding:12px;}
    .stamp-card{padding:20px 16px 18px;border-radius:14px;}
  }
  @keyframes pop{from{transform:scale(.85);opacity:0;}to{transform:scale(1);opacity:1;}}
  .stamp-ring{
    width:120px;height:120px;border-radius:50%;margin:0 auto 14px;
    display:flex;align-items:center;justify-content:center;flex-direction:column;
    border:4px double currentColor;position:relative;transform:rotate(-8deg);
  }
  .stamp-ring.in{color:var(--stamp-in);}
  .stamp-ring.out{color:var(--stamp-out);}
  .stamp-ring .s-label{font-family:var(--font-display);font-weight:800;font-size:12px;letter-spacing:1px;}
  .stamp-ring .s-num{font-family:var(--font-mono);font-weight:600;font-size:15px;margin-top:2px;}
  .stamp-ring .s-dir-ico{
    position:absolute;top:-6px;left:-6px;width:26px;height:26px;border-radius:50%;
    background:currentColor;display:flex;align-items:center;justify-content:center;
    font-size:13px;transform:rotate(8deg);box-shadow:0 3px 8px rgba(0,0,0,.25);
  }
  .stamp-ring.in .s-dir-ico{animation:dirBounceIn .5s ease .2s both;}
  .stamp-ring.out .s-dir-ico{animation:dirBounceOut .5s ease .2s both;}
  @keyframes dirBounceIn{from{transform:rotate(8deg) translateY(-6px);opacity:0;}to{transform:rotate(8deg) translateY(0);opacity:1;}}
  @keyframes dirBounceOut{from{transform:rotate(8deg) translateY(6px);opacity:0;}to{transform:rotate(8deg) translateY(0);opacity:1;}}
  .stamp-card h3{font-family:var(--font-display);margin:6px 0 4px;font-size:17px;}
  .stamp-card p{margin:0 0 18px;color:var(--ink-soft);font-size:13px;}
  .stamp-card .stamp-close{width:100%;}

  .ledger-balance{font-family:var(--font-mono);font-weight:600;direction:ltr;unicode-bidi:isolate;text-align:right;}
  .note-hint{font-size:12px;color:var(--ink-soft);margin-top:-6px;margin-bottom:12px;}
  .photo-thumb{max-width:160px;max-height:160px;border-radius:8px;border:1px solid var(--line-strong);display:block;}
  .voucher-photo{max-width:100%;max-height:260px;width:auto;height:auto;object-fit:contain;border-radius:10px;border:1px solid var(--line);margin-top:10px;cursor:pointer;}

  .btn-search-trigger{
    background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.14);
    color:#E7EAF0;font-family:var(--font-display);font-weight:700;font-size:12.5px;
    padding:8px 13px;border-radius:10px;cursor:pointer;display:flex;align-items:center;gap:7px;
  }
  .btn-search-trigger:hover{background:rgba(255,255,255,0.14);border-color:rgba(255,255,255,0.28);}
  .btn-search-trigger kbd{font-family:var(--font-mono);font-size:10px;background:rgba(255,255,255,0.14);padding:1px 6px;border-radius:5px;border:1px solid rgba(255,255,255,0.12);}

  /* زر "سند جديد" هو الإجراء الرئيسي — لون واحد ذهبي متناسق مع حافة الناف بار وتمييز التبويب النشط */
  #newVoucherBtn{
    background:#D8B26E;
    border-color:transparent;color:var(--ink-fixed);
    box-shadow:0 4px 13px rgba(216,178,110,0.35);
  }
  #newVoucherBtn:hover{
    background:#C79A4B;
    border-color:transparent;
    box-shadow:0 6px 18px rgba(216,178,110,0.45);
  }
  #newVoucherBtn kbd{background:rgba(27,36,48,0.14);border-color:rgba(27,36,48,0.2);color:var(--ink-fixed);}
  .shortcut-row{display:flex;justify-content:space-between;gap:10px;padding:6px 2px;border-bottom:1px solid var(--line);font-size:13px;}
  .shortcut-row:last-child{border-bottom:none;}
  .shortcut-row kbd{font-family:var(--font-mono);font-size:11.5px;background:var(--paper);padding:2px 9px;border-radius:6px;border:1px solid var(--line-strong);}

  .boot-loader{
    position:fixed;inset:0;z-index:500;
    background:linear-gradient(160deg, rgba(44,36,24,0.82) 0%, rgba(35,44,56,0.82) 45%, rgba(27,36,48,0.86) 100%);
    backdrop-filter:blur(3px) saturate(1.1);-webkit-backdrop-filter:blur(3px) saturate(1.1);
    display:flex;align-items:center;justify-content:center;
    transition:opacity .4s ease, visibility .4s ease, background .4s ease;
  }
  [data-theme="night"] .boot-loader{
    background:linear-gradient(160deg, rgba(30,26,20,0.72) 0%, rgba(26,33,44,0.74) 45%, rgba(16,22,31,0.8) 100%);
    backdrop-filter:blur(3px) saturate(1.15);-webkit-backdrop-filter:blur(3px) saturate(1.15);
  }
  /* شاشة الدخول تبقى مخفية لحد ما شاشة التحميل تختفي — عشان ما تلمح من خلف الشفافية الجديدة */
  .login-screen{visibility:hidden;}
  .boot-loader.hide ~ .login-screen{visibility:visible;}
  .boot-loader.hide{opacity:0;visibility:hidden;pointer-events:none;}
  .boot-loader-inner{text-align:center;}
  .boot-mark{
    position:relative;width:64px;height:64px;border-radius:16px;margin:0 auto 22px;
    background:linear-gradient(160deg,#2C3B4E,var(--ink) 70%);
    border:1.5px solid rgba(216,178,110,0.55);
    display:flex;align-items:center;justify-content:center;
    font-family:var(--font-display);font-weight:800;color:#E8C776;font-size:17px;letter-spacing:1px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.10), 0 6px 18px rgba(0,0,0,0.35);
  }
  /* حلقة دوّارة واحدة نظيفة — مؤشر التحميل الوحيد للشعار */
  .boot-mark::before{
    content:"";position:absolute;inset:-7px;border-radius:20px;padding:2px;
    background:conic-gradient(from 0deg, transparent 0%, rgba(216,178,110,0.12) 18%, #F3D999 42%, #E8C776 48%, rgba(216,178,110,0.12) 68%, transparent 88%);
    -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
    mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite:exclude;
    animation:bootSpin .9s linear infinite;
  }
  @keyframes bootSpin{to{transform:rotate(360deg);}}
  .boot-brand{font-family:var(--font-display);font-weight:800;color:#fff;font-size:14px;letter-spacing:2px;margin-bottom:6px;}
  .boot-text{color:#C7CDD6;font-size:12.5px;font-family:var(--font-mono);max-width:280px;margin:0 auto;line-height:1.7;}
  .boot-dots{display:flex;gap:6px;justify-content:center;margin-top:14px;}
  .boot-dots span{width:6px;height:6px;border-radius:50%;background:#E8C776;opacity:.6;}
  @media (prefers-reduced-motion: reduce){
    .boot-mark::before{animation:none;}
  }

  ::-webkit-scrollbar{width:9px;height:9px;}
  ::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:6px;}

  #printArea{display:none;}
  @media print{
    @page{ margin:12mm 11mm; }
    body *{visibility:hidden;}
    #printArea, #printArea *{visibility:visible;-webkit-print-color-adjust:exact;print-color-adjust:exact;}
    #printArea{display:block;position:absolute;top:0;right:0;left:0;padding:6px;}
  }

  .login-screen{
    min-height:100vh;display:flex;align-items:center;justify-content:center;
    padding:20px;position:relative;z-index:1;
  }
  .login-card{
    background:var(--paper-card);border:1px solid var(--line);
    border-radius:16px;padding:32px 28px;max-width:340px;width:100%;
    text-align:center;box-shadow:0 12px 30px rgba(27,36,48,0.15);
  }
  .login-card h1{font-family:var(--font-display);font-weight:800;font-size:18px;margin:4px 0 0;line-height:1.35;}
  .login-card .brand-sub{font-family:var(--font-display);font-weight:700;font-size:13.5px;margin:2px 0 10px;color:var(--ink-soft);}
  .login-card p{color:var(--ink-soft);font-size:13px;margin:0;}
  .db-activity{
    background:transparent;border:none;padding:8px;cursor:default;
    display:flex;align-items:center;justify-content:center;border-radius:50%;
  }
  .db-activity-dot{
    width:9px;height:9px;border-radius:50%;background:#6B7684;position:relative;
    transition:background .2s ease;
  }
  .db-activity.busy .db-activity-dot{background:var(--freezer);animation:dbPulse .9s ease-in-out infinite;}
  .db-activity.ok .db-activity-dot{background:var(--stamp-in);}
  .db-activity.ok .db-activity-dot::after{content:"";position:absolute;inset:0;border-radius:50%;animation:dotPing 1s ease-out;}
  .db-activity.err .db-activity-dot{background:var(--stamp-out);}
  .db-activity.err{cursor:pointer;}
  .db-activity.err:hover{background:rgba(255,255,255,0.08);}
  @keyframes dbPulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.35;transform:scale(.65);}}
  .conn-dot{width:7px;height:7px;border-radius:50%;background:#6B7684;position:relative;}
  .conn-dot.ok{background:var(--stamp-in);}
  .conn-dot.err{background:var(--stamp-out);}
  .btn-logout{background:transparent;color:#C7CDD6;border:1px solid #48505C;font-size:12px;padding:7px 12px;}
  .btn-logout:hover{background:rgba(255,255,255,0.08);}

  html{scroll-behavior:smooth;}

  @keyframes rise{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
  @keyframes riseIn{from{opacity:0;transform:translateY(22px) scale(.985);}to{opacity:1;transform:translateY(0) scale(1);}}
  @keyframes slideDown{from{opacity:0;transform:translateY(-14px);}to{opacity:1;transform:translateY(0);}}
  @keyframes rowIn{from{opacity:0;transform:translateX(10px);}to{opacity:1;}}
  @keyframes ringPulse{0%,100%{box-shadow:0 0 0 0 rgba(0,0,0,0);}50%{box-shadow:0 0 0 10px rgba(0,0,0,0.05);}}
  @keyframes floatMark{0%,100%{transform:translateY(0) rotate(0);}50%{transform:translateY(-3px) rotate(-2deg);}}
  @keyframes dotPing{0%{box-shadow:0 0 0 0 currentColor;opacity:.6;}70%{box-shadow:0 0 0 7px transparent;opacity:0;}100%{opacity:0;}}

  .topbar{animation:slideDown .5s cubic-bezier(.2,.8,.25,1) both;}
  .brand-mark{transition:transform .3s ease, box-shadow .3s ease;}
  .brand-mark:hover{
    transform:translateY(-2px) scale(1.05);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.18), 0 0 0 3px rgba(216,178,110,0.25), 0 8px 18px rgba(27,36,48,0.35);
  }
  .conn-dot.ok::after, .conn-dot.err::after{content:"";position:absolute;inset:0;border-radius:50%;}
  .conn-dot.ok::after{animation:dotPing 1.8s ease-out infinite;}

  .tabs{animation:rise .5s .05s cubic-bezier(.2,.8,.25,1) both;}
  .tab{position:relative;transition:background .18s ease, color .18s ease, transform .18s ease, box-shadow .2s ease;overflow:hidden;}
  .tab::after{content:"";position:absolute;left:50%;bottom:6px;width:0;height:2px;background:var(--freezer);border-radius:2px;transform:translateX(-50%);transition:width .22s ease;}
  .tab:hover{transform:translateY(-1px);}
  .tab:hover::after{width:38%;}
  .tab:active{transform:translateY(0) scale(.97);}
  .tab.active::after{width:0;}

  .view.active{animation:riseIn .4s cubic-bezier(.2,.8,.25,1);}
  .view.active > .section-title{animation:rise .45s .02s both;}
  .view.active > .section-sub{animation:rise .45s .06s both;}

  .card{transition:transform .25s cubic-bezier(.2,.8,.25,1), box-shadow .25s ease, border-color .25s ease;}
  .view.active .card{animation:rise .5s both;}
  .view.active .card:nth-of-type(1){animation-delay:.06s;}
  .view.active .card:nth-of-type(2){animation-delay:.12s;}
  .view.active .card:nth-of-type(3){animation-delay:.18s;}
  .view.active .card:nth-of-type(4){animation-delay:.24s;}
  .view.active .card:nth-of-type(5){animation-delay:.30s;}
  .card:hover{box-shadow:0 10px 26px rgba(27,36,48,0.10);border-color:var(--line-strong);}

  .store-card{transition:transform .28s cubic-bezier(.2,.8,.25,1), box-shadow .28s ease;animation:riseIn .55s both;}
  #dashCards .store-card:nth-child(1){animation-delay:.08s;}
  #dashCards .store-card:nth-child(2){animation-delay:.16s;}
  #dashCards .store-card:nth-child(3){animation-delay:.24s;}
  .store-card::before{
    content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
    background:linear-gradient(120deg,transparent,rgba(255,255,255,0.35),transparent);
    transform:skewX(-18deg);transition:left .6s ease;pointer-events:none;
  }
  .store-card:hover{box-shadow:0 16px 34px rgba(0,0,0,0.22);}
  .store-card:hover::before{left:120%;}
  .store-card:not(.tilt-target):hover{transform:translateY(-6px) scale(1.015);}

  button{position:relative;overflow:hidden;transition:background .15s ease, transform .12s ease, box-shadow .2s ease;}
  button:not(:disabled):hover{transform:translateY(-1px);box-shadow:0 6px 14px rgba(27,36,48,0.14);}
  button:not(:disabled):active{transform:translateY(0) scale(.97);}
  button::after{
    content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;
    background:rgba(255,255,255,0.4);transform:translate(-50%,-50%);pointer-events:none;
  }
  button:not(:disabled):active::after{width:220%;height:220%;transition:width .4s ease, height .4s ease;}

  table.data tbody tr{animation:rowIn .35s both;transition:background .15s ease;}
  table.data tbody tr:nth-child(1){animation-delay:.02s;}
  table.data tbody tr:nth-child(2){animation-delay:.05s;}
  table.data tbody tr:nth-child(3){animation-delay:.08s;}
  table.data tbody tr:nth-child(4){animation-delay:.11s;}
  table.data tbody tr:nth-child(5){animation-delay:.14s;}
  table.data tbody tr:nth-child(6){animation-delay:.17s;}
  table.data tbody tr:hover td{background:rgba(47,111,143,0.06);}

  .pill{transition:transform .15s ease;}
  .pill:hover{transform:scale(1.06);}
  input,select,textarea{transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;}
  input:focus,select:focus,textarea:focus{box-shadow:0 0 0 4px rgba(47,111,143,0.12);}

  .login-card{animation:riseIn .55s cubic-bezier(.2,.8,.25,1) both;}
  .login-card .brand-mark{animation:floatMark 3.5s ease-in-out infinite;}

  .stamp-ring{animation:ringPulse 2s ease-in-out infinite;}

  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;}
  }

  .profile{position:relative;z-index:150;}
  .profile-trigger{
    display:flex;align-items:center;gap:10px;
    background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.14);
    color:#E7EAF0;border-radius:999px;padding:4px 12px 4px 4px;cursor:pointer;
    transition:background .18s ease, border-color .18s ease, transform .15s ease;
    overflow:visible;
  }
  .profile-trigger::after{display:none;}
  .profile-trigger:hover{background:rgba(255,255,255,0.14);border-color:rgba(255,255,255,0.25);transform:translateY(-1px);}
  .profile-trigger:active{transform:translateY(0) scale(.98);}
  .profile-avatar{
    width:32px;height:32px;border-radius:50%;
    background:linear-gradient(135deg,var(--accent1),var(--accent2));
    color:#fff;font-family:var(--font-display);font-weight:800;font-size:13px;
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
    box-shadow:inset 0 0 0 2px rgba(255,255,255,0.3);
    transition:box-shadow .25s ease, transform .25s ease;
  }
  .profile-trigger:hover .profile-avatar{box-shadow:inset 0 0 0 2px rgba(255,255,255,0.4), 0 0 0 5px rgba(255,255,255,0.10);transform:scale(1.06);}
  .profile-meta{display:flex;flex-direction:column;align-items:flex-start;line-height:1.1;max-width:180px;}
  .profile-name{font-family:var(--font-display);font-weight:700;font-size:12.5px;color:#fff;}
  .profile-email{font-family:var(--font-mono);font-size:10.5px;color:#A9B2BF;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;}
  .profile-caret{font-size:10px;color:#A9B2BF;transition:transform .2s ease;}
  .profile.open .profile-caret{transform:rotate(180deg);}

  .profile-menu{
    position:absolute;top:calc(100% + 8px);left:0;min-width:270px;
    background:var(--paper-card);border:1px solid var(--line);border-radius:14px;
    box-shadow:0 18px 40px rgba(27,36,48,0.22);
    padding:6px;opacity:0;transform:translateY(-6px) scale(.98);
    pointer-events:none;transition:opacity .18s ease, transform .18s ease;
    z-index:150;
    max-height:calc(100vh - 84px);overflow-y:auto;overscroll-behavior:contain;
  }
  .profile.open .profile-menu{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;}

  .profile-head{
    display:flex;gap:12px;padding:12px 10px;border-bottom:1px solid var(--line);margin-bottom:6px;
  }
  .profile-head .profile-avatar{width:42px;height:42px;font-size:15px;}
  .profile-head-info{display:flex;flex-direction:column;justify-content:center;min-width:0;flex:1;text-align:right;}
  .profile-head-info b{font-family:var(--font-display);font-size:14px;font-weight:800;}
  .profile-head-info span{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:ltr;}
  .profile-session{display:flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:10.5px;color:var(--ink-soft);margin-top:7px;direction:rtl;}
  .profile-session.online{color:var(--stamp-in);}
  .profile-session.offline{color:var(--stamp-out);}
  .profile-session .conn-dot{width:6px;height:6px;}

  .profile-role{
    display:inline-flex;align-items:center;gap:6px;
    font-family:var(--font-display);font-weight:700;font-size:11.5px;
    padding:4px 10px;border-radius:999px;
    background:var(--freezer-soft);color:var(--freezer);
  }
  .profile-role.viewer{background:var(--pantry-soft);color:var(--pantry);}
  .profile-role .role-dot{width:6px;height:6px;border-radius:50%;background:currentColor;}

  .profile-item{
    display:flex;align-items:center;gap:10px;
    padding:9px 10px;border-radius:9px;cursor:pointer;
    font-size:13.5px;font-family:var(--font-body);color:var(--ink);
    font-weight:500;
    transition:background .15s ease;
    transform:none!important;box-shadow:none!important;
    overflow:hidden;
  }
  .profile-item::after{display:none;}
  .profile-item:hover{background:var(--paper);transform:none!important;box-shadow:none!important;}
  .profile-item .ico{width:28px;height:28px;border-radius:8px;background:var(--paper);display:flex;align-items:center;justify-content:center;font-size:14px;}
  .profile-item.danger{color:var(--danger);}
  .profile-item.danger .ico{background:#F6DEDA;}
  .profile-item.danger:hover{background:#F6DEDA;}

  .profile-sep{height:1px;background:var(--line);margin:6px 4px;}

  .profile-trigger,.profile-avatar,.tab,.profile-item{-webkit-tap-highlight-color:transparent;}
  .profile-trigger:focus,.profile-trigger:focus-visible{outline:none;box-shadow:0 0 0 2px rgba(255,255,255,0.35);}

  @media (max-width:700px){
    .card{padding:16px 14px;}
    .row{gap:10px;}
    .row > .field{min-width:100%;}
    .toolbar{gap:8px;}
    .toolbar .field{min-width:100%;}

    /* جدول الأصناف: يتحول لبطاقات مكدّسة بدل التمرير الأفقي على الجوال */
    #itemsTable{min-width:0;table-layout:auto;}
    #itemsTable colgroup{display:none;}
    #itemsTable thead{display:none;}
    #itemsTable tbody, #itemsTable tr, #itemsTable td{display:block;width:100%;}
    #itemsTable tr{
      border:1px solid var(--line);border-radius:12px;
      margin-bottom:12px;padding:10px 12px;background:var(--paper-card);
    }
    #itemsTable td{
      display:flex;align-items:center;justify-content:space-between;gap:10px;
      padding:9px 2px;border-bottom:1px solid var(--line);
      white-space:normal;overflow:visible;text-overflow:clip;max-width:none;text-align:left;
    }
    #itemsTable td:last-child{border-bottom:none;}
    #itemsTable td::before{
      content:attr(data-label);flex-shrink:0;
      font-family:var(--font-display);font-weight:700;font-size:11.5px;color:var(--ink-soft);
    }
    #itemsTable td:empty::before, #itemsTable td[data-label=""]::before{content:none;}
    #itemsTable td[data-label=""]{justify-content:flex-end;}

    /* كشف حركة صنف: نفس أسلوب البطاقات المكدّسة على الجوال
       ملاحظة: .ledger-item-table لازم تُكتب table.data.ledger-item-table هنا (مو .ledger-item-table لحالها)
       عشان تخصصها (specificity) يتغلّب على قاعدة "table.data td{max-width:0;overflow:hidden;...}" الأساسية
       بالأعلى — لأنها بالأصل جدول بكلاس (يتكرر لكل صنف) مو id زي باقي الجداول، فكانت تخسر معركة
       التخصص وتفضل max-width:0 مسيطرة حتى بالجوال (يخفي كل الأعمدة إلا اللي فيها كلاس wrap-cell) */
    #ledgerTable, table.data.ledger-item-table{min-width:0;table-layout:auto;}
    #ledgerTable colgroup, table.data.ledger-item-table colgroup{display:none;}
    #ledgerTable thead, table.data.ledger-item-table thead{display:none;}
    #ledgerTable tbody, #ledgerTable tr, #ledgerTable td,
    table.data.ledger-item-table tbody, table.data.ledger-item-table tr, table.data.ledger-item-table td{display:block;width:100%;}
    #ledgerTable tr, table.data.ledger-item-table tr{
      border:1px solid var(--line);border-radius:12px;
      margin-bottom:12px;padding:10px 12px;background:var(--paper-card);
    }
    #ledgerTable td, table.data.ledger-item-table td{
      display:flex;align-items:center;justify-content:space-between;gap:10px;
      padding:9px 2px;border-bottom:1px solid var(--line);
      white-space:normal;overflow:visible;text-overflow:clip;max-width:none;text-align:left;
    }
    #ledgerTable td:last-child, table.data.ledger-item-table td:last-child{border-bottom:none;}
    #ledgerTable td::before, table.data.ledger-item-table td::before{
      content:attr(data-label);flex-shrink:0;
      font-family:var(--font-display);font-weight:700;font-size:11.5px;color:var(--ink-soft);
    }
    #ledgerTable td:empty::before, #ledgerTable td[data-label=""]::before,
    table.data.ledger-item-table td:empty::before, table.data.ledger-item-table td[data-label=""]::before{content:none;}
    #ledgerTable td.empty-cell, table.data.ledger-item-table td.empty-cell{justify-content:center;}
    #ledgerTable td.empty-cell::before, table.data.ledger-item-table td.empty-cell::before{content:none;}
  }

  @media (max-width:620px){
    .profile-meta{display:none;}
    .profile-trigger{padding:4px;}
    .profile{position:static;}
    .profile-menu{left:12px;right:12px;width:auto;min-width:0;}
  }

  /* ============ الشريط العلوي على الجوال: صف واحد مضغوط ============
     (موضوع بعد تعريفات .btn-search-trigger و .profile-* عمدًا ليتغلّب على القواعد الأساسية) */
  @media (max-width:900px){
    .topbar{padding:10px 10px 0;}
    .topbar-inner{padding:7px 9px;gap:8px;}
    .topbar-inner > div:last-child{
      display:flex;align-items:center;flex-wrap:nowrap;gap:6px;flex-shrink:0;margin-inline-start:auto;
    }
    .topbar-title{flex:1 1 auto;min-width:0;font-size:14px;}

    /* "سند جديد" و"بحث" → أيقونة فقط داخل مربّع 34px */
    .btn-search-trigger{
      padding:0;width:34px;height:34px;min-width:34px;gap:0;font-size:0;
      display:inline-flex;align-items:center;justify-content:center;
      border-radius:10px;flex-shrink:0;
    }
    .btn-search-trigger .fa-solid{font-size:15px;margin:0;}
    .btn-search-trigger kbd{display:none;}

    #roleBadge{display:none!important;}
    .db-activity{padding:5px;flex-shrink:0;}
    .profile-trigger{padding:3px;gap:0;flex-shrink:0;}
    .profile-caret{display:none;}
  }

  #appAlertOverlay .stamp-card{max-width:360px;}

  /* توست وضع المطور */
  #devGuardToast{
    position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);
    background:var(--ink-fixed);color:#fff;
    font-family:var(--font-display);font-weight:700;font-size:13px;
    padding:11px 20px;border-radius:10px;
    box-shadow:0 10px 30px rgba(27,36,48,0.35);
    z-index:600;opacity:0;pointer-events:none;
    transition:opacity .25s ease, transform .25s ease;
    max-width:88vw;text-align:center;
  }
  #devGuardToast.show{opacity:1;transform:translateX(-50%) translateY(0);}

  /* قائمة النقر بالزر الأيمن المخصّصة */
  #customCtxMenu{
    position:fixed;z-index:650;min-width:212px;max-width:270px;
    background:var(--paper-card);border:1px solid var(--line);
    border-radius:12px;padding:6px;
    box-shadow:0 18px 46px rgba(27,36,48,0.28);
    font-family:var(--font-body);
    opacity:0;transform:scale(.96);transform-origin:top right;
    pointer-events:none;transition:opacity .13s ease, transform .13s ease;
  }
  #customCtxMenu.show{opacity:1;transform:scale(1);pointer-events:auto;}
  #customCtxMenu .ctx-item{
    display:flex;align-items:center;gap:10px;
    padding:9px 11px;border-radius:8px;cursor:pointer;
    font-size:13.5px;color:var(--ink);font-weight:500;
    transition:background .13s ease;white-space:nowrap;
  }
  #customCtxMenu .ctx-item:hover{background:var(--paper);}
  #customCtxMenu .ctx-item:active{transform:scale(.98);}
  #customCtxMenu .ctx-item .ci-ico{
    width:26px;height:26px;border-radius:7px;background:var(--paper);
    display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;
    font-family:var(--font-mono);font-weight:600;color:var(--ink-soft);
  }
  #customCtxMenu .ctx-item.danger{color:var(--danger);}
  #customCtxMenu .ctx-item.danger .ci-ico{background:#F6DEDA;color:var(--danger);}
  #customCtxMenu .ctx-sep{height:1px;background:var(--line);margin:5px 6px;}
  #customCtxMenu .ctx-label{
    padding:7px 11px 4px;font-size:10px;font-family:var(--font-mono);
    color:var(--ink-soft);letter-spacing:.6px;
  }

  /* كارد موقع المستخدم */
  .loc-box{
    background:var(--paper);border:1px solid var(--line);border-radius:12px;
    padding:14px 16px;
  }
  .loc-row{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--line);font-size:13px;line-height:1.5;}
  .loc-row:last-of-type{border-bottom:none;}
  .loc-row .loc-key{color:var(--ink-soft);font-weight:600;flex-shrink:0;}
  .loc-row .loc-val{text-align:left;font-family:var(--font-mono);word-break:break-word;}
  .loc-place{font-size:13.5px;line-height:1.6;margin:0 0 4px;font-weight:600;}
  .loc-map-btn{display:inline-flex;align-items:center;gap:7px;margin-top:12px;text-decoration:none;}
  .loc-loading{color:var(--ink-soft);font-size:13px;display:flex;align-items:center;gap:9px;}
  .loc-loading::before{
    content:"";width:15px;height:15px;border-radius:50%;flex-shrink:0;
    border:2px solid var(--line-strong);border-top-color:var(--freezer);
    animation:bootSpin .8s linear infinite;
  }
  .loc-err{
    background:#F6DEDA;color:var(--stamp-out);border:1px solid #E6B8B1;
    border-radius:10px;padding:11px 14px;font-size:13px;line-height:1.55;
  }

  /* بوكس الترحيب والتعليمات */
  .welcome-card{padding-top:26px;}
  .welcome-mark{
    width:52px;height:52px;border-radius:14px;
    background:linear-gradient(160deg, #2C3B4E, var(--ink) 70%);
    display:flex;align-items:center;justify-content:center;
    font-family:var(--font-display);font-weight:800;color:#E8C776;font-size:16px;letter-spacing:.5px;
    border:1.5px solid rgba(216,178,110,0.55);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.10), 0 6px 16px rgba(27,36,48,0.25);
    animation:floatMark 3.5s ease-in-out infinite;
  }
  .welcome-list{display:flex;flex-direction:column;gap:10px;margin-bottom:8px;max-height:44vh;overflow-y:auto;padding-left:2px;}
  .welcome-item{
    display:flex;align-items:flex-start;gap:11px;
    background:var(--paper);border:1px solid var(--line);border-radius:11px;
    padding:10px 12px;
  }
  .welcome-item .wi-ico{
    width:30px;height:30px;border-radius:9px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;font-size:15px;
    background:var(--freezer-soft);color:var(--freezer);
  }
  .welcome-item .wi-text{font-size:13px;line-height:1.55;color:var(--ink);padding-top:3px;}
  .welcome-item .wi-text b{font-family:var(--font-display);font-weight:700;}
  .welcome-item .wi-text kbd{
    font-family:var(--font-mono);font-size:11px;background:var(--paper-card);
    border:1px solid var(--line-strong);padding:1px 6px;border-radius:5px;
  }
  .welcome-dontshow{
    display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-soft);
    margin:12px 2px 4px;cursor:pointer;font-weight:500;
  }
  .welcome-dontshow input{width:auto;flex-shrink:0;accent-color:var(--freezer);cursor:pointer;}

  /* شريط الترحيب اليومي + شارة الأيام المتتالية */
  .greet-bar{
    display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;
    margin:-8px 0 20px;padding:12px 16px;border-radius:12px;
    background:linear-gradient(90deg, var(--accent1-soft), var(--accent2-soft));
    border:1px solid var(--line);
    animation:rise .5s .02s both;
  }
  .greet-text-col{display:flex;flex-direction:column;gap:2px;}
  .greet-bar .greet-text{font-family:var(--font-display);font-weight:700;font-size:13.5px;color:var(--ink);}
  .greet-bar .greet-brief{font-size:12px;color:var(--ink-soft);}
  .greet-badges{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
  .greet-pill{
    display:inline-flex;align-items:center;gap:6px;
    font-family:var(--font-mono);font-weight:600;font-size:12px;
    background:var(--paper-card);border:1px solid var(--line-strong);
    padding:5px 11px;border-radius:999px;flex-shrink:0;
    animation:riseIn .4s both;
  }
  .greet-pill.greet-streak{color:var(--pantry);}
  .greet-pill.greet-today{color:var(--stamp-in);}
  .greet-pill.greet-rank{color:var(--accent1);font-family:var(--font-display);}

  /* بانر "يوم بدون نقص" + كارد "صحة المخزون" */
  .mini-banner-row{display:flex;gap:14px;margin-bottom:20px;flex-wrap:wrap;}
  .shortage-banner, .health-card{
    flex:1;min-width:220px;display:flex;align-items:center;gap:13px;
    background:var(--paper-card);border:1px solid var(--line);border-radius:14px;
    padding:14px 18px;box-shadow:0 1px 2px rgba(27,36,48,0.05), 0 6px 16px rgba(27,36,48,0.05);
    animation:riseIn .5s .08s both;
  }
  .shortage-banner .sb-ico{font-size:26px;flex-shrink:0;}
  .shortage-banner .sb-main{font-family:var(--font-display);font-weight:800;font-size:15px;color:var(--ink);}
  .shortage-banner .sb-sub{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-soft);margin-top:2px;}
  .shortage-banner.sb-warn .sb-main{color:var(--danger);}

  .health-card{animation-delay:.14s;}
  .health-ring-svg circle#healthRingFg{transition:stroke-dashoffset 1s cubic-bezier(.2,.8,.25,1), stroke .3s ease;}
  .health-card .hc-text{display:flex;flex-direction:column;}
  .health-card .hc-pct{font-family:var(--font-mono);font-weight:700;font-size:19px;color:var(--ink);line-height:1.1;}
  .health-card .hc-label{font-family:var(--font-display);font-weight:700;font-size:12.5px;color:var(--ink-soft);margin-top:2px;}
  .health-card .hc-sub{font-family:var(--font-mono);font-size:11px;color:var(--ink-soft);margin-top:3px;}

  @media (max-width:700px){
    .mini-banner-row{flex-direction:column;}
  }

  /* لوحة الأوسمة والإنجازات */
  .achv-grid{
    display:grid;grid-template-columns:repeat(2,1fr);gap:10px;
    max-height:50vh;overflow-y:auto;padding:2px;
  }
  @media (max-width:480px){ .achv-grid{grid-template-columns:1fr;} }
  .achv-item{
    display:flex;align-items:center;gap:10px;
    border:1px solid var(--line);border-radius:12px;padding:10px 12px;
    background:var(--paper);
  }
  .achv-item.unlocked{
    background:linear-gradient(135deg, var(--accent1-soft), var(--accent2-soft));
    border-color:var(--line-strong);
  }
  .achv-item .achv-ico{
    width:36px;height:36px;border-radius:10px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;font-size:18px;
    background:var(--paper-card);border:1px solid var(--line);
  }
  .achv-item.unlocked .achv-ico{background:var(--paper-card);border-color:var(--line-strong);}
  .achv-item.locked{opacity:.55;filter:grayscale(.6);}
  .achv-item .achv-name{font-family:var(--font-display);font-weight:700;font-size:12.5px;color:var(--ink);line-height:1.3;}
  .achv-item .achv-desc{font-family:var(--font-mono);font-size:10.5px;color:var(--ink-soft);margin-top:2px;line-height:1.4;}

  /* كارد "أسرع مخزن حركة" */
  .busiest-card{
    flex:1;min-width:220px;display:flex;align-items:center;gap:13px;
    background:var(--paper-card);border:1px solid var(--line);border-radius:14px;
    padding:14px 18px;box-shadow:0 1px 2px rgba(27,36,48,0.05), 0 6px 16px rgba(27,36,48,0.05);
    animation:riseIn .5s .2s both;
  }
  .busiest-card .bc-ico{font-size:26px;flex-shrink:0;}
  .busiest-card .bc-main{font-family:var(--font-display);font-weight:800;font-size:14px;color:var(--ink);}
  .busiest-card .bc-sub{font-family:var(--font-mono);font-size:11px;color:var(--ink-soft);margin-top:2px;}

  /* "لحظة الفخر" — رقم قياسي جديد في أيام بدون نقص */
  .shortage-banner.sb-pride{
    background:linear-gradient(135deg, #FCEFCB, var(--paper-card));
    border-color:var(--warn);
  }
  .shortage-banner.sb-pride .sb-main{color:#8A5B0E;}

  /* رسم مصغّر (Sparkline) داخل كل كرت مخزن */
  .store-sparkline-wrap{margin-top:10px;}
  .store-sparkline-wrap .ssw-label{font-size:10px;opacity:.75;margin-bottom:2px;}
  .store-sparkline{display:block;opacity:.9;}

  /* لقب المستخدم الشخصي في قائمة الحساب */
  .profile-custom-title{
    font-family:var(--font-body);font-size:11.5px;font-style:italic;
    color:var(--ink-soft);margin-top:1px;
  }

  /* منتقي الصورة الرمزية ولون التخصيص */
  .avatar-picker, .color-picker{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px;margin-bottom:2px;}
  .avatar-option{
    width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    font-size:17px;background:var(--paper);border:2px solid var(--line);cursor:pointer;
    transition:transform .12s ease, border-color .15s ease;
  }
  .avatar-option:hover{transform:scale(1.08);}
  .avatar-option.selected{border-color:var(--ink);box-shadow:0 0 0 2px var(--paper-card), 0 0 0 4px var(--ink);}
  .color-swatch{
    width:30px;height:30px;border-radius:50%;cursor:pointer;border:2px solid transparent;
    transition:transform .12s ease;position:relative;
  }
  .color-swatch:hover{transform:scale(1.1);}
  .color-swatch.selected{border-color:var(--ink);}
  .color-swatch.selected::after{content:"\f00c";font-family:"Font Awesome 6 Free";font-weight:900;position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;text-shadow:0 1px 2px rgba(0,0,0,.5);}
  .theme-picker .color-swatch{width:44px;height:30px;border-radius:9px;}

  /* شهادة إنجاز نهاية الشهر */
  .certificate-card{
    border:2px solid var(--pantry);
    background:linear-gradient(160deg, var(--paper-card), var(--pantry-soft));
  }
  .cert-badge{font-size:44px;line-height:1;animation:floatMark 3s ease-in-out infinite;}
  .cert-body{
    background:var(--paper-card);border:1px dashed var(--line-strong);border-radius:12px;
    padding:14px 16px;text-align:right;font-size:13px;line-height:1.9;
  }
  .cert-body b{font-family:var(--font-mono);}

  /* قائمة الأصناف المتوقّع نقصها قريبًا */
  .predicted-row{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding:9px 12px;border:1px solid var(--line);border-radius:10px;margin-bottom:8px;
    background:var(--pantry-soft);
  }
  .predicted-row:last-child{margin-bottom:0;}
  .predicted-row .pr-name{font-family:var(--font-display);font-weight:700;font-size:13px;color:var(--ink);}
  .predicted-row .pr-days{font-family:var(--font-mono);font-weight:700;font-size:12.5px;color:var(--pantry);flex-shrink:0;}

  /* مركز الإجراءات */
  .action-row{
    display:flex;align-items:center;gap:12px;
    padding:11px 13px;border:1px solid var(--line);border-radius:11px;margin-bottom:9px;
    background:var(--paper);
  }
  .action-row:last-child{margin-bottom:0;}
  .action-row .ar-ico{
    width:34px;height:34px;border-radius:9px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;font-size:16px;
    background:var(--pantry-soft);
  }
  .action-row.ar-danger .ar-ico{background:#F6DEDA;}
  .action-row .ar-text{flex:1;font-size:13px;color:var(--ink);line-height:1.4;}
  .action-row .ar-text b{font-family:var(--font-mono);color:var(--pantry);}
  .action-row.ar-danger .ar-text b{color:var(--danger);}
  .action-row .ar-btn{flex-shrink:0;}
  .action-empty{
    text-align:center;padding:16px;color:var(--stamp-in);font-family:var(--font-display);
    font-weight:700;font-size:13.5px;
  }

  /* صف الأدوات السريعة: بحث فوري + ملاحظات */
  .utility-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px;}
  @media (max-width:820px){ .utility-row{grid-template-columns:1fr;} }
  .util-card{margin-bottom:0;}
  #dashQuickSearchResults{margin-top:10px;max-height:220px;overflow-y:auto;}
  .qsr-item{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding:8px 10px;border-bottom:1px solid var(--line);font-size:13px;
  }
  .qsr-item:last-child{border-bottom:none;}
  .qsr-item .qsr-name{font-weight:600;}
  .qsr-item .qsr-bal{font-family:var(--font-mono);font-weight:700;flex-shrink:0;}
  .qsr-item .qsr-bal.low{color:var(--danger);}
  .qsr-empty{color:var(--ink-soft);font-size:12.5px;text-align:center;padding:10px 0;}
  #dashStickyNote{resize:vertical;min-height:88px;}
  .util-save-hint{font-size:11px;color:var(--stamp-in);margin-top:6px;height:14px;opacity:0;transition:opacity .3s ease;}
  .util-save-hint.show{opacity:1;}

  /* تحليلات الشهر */
  .compare-strip{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:18px;}
  .cmp-item{
    flex:1;min-width:150px;background:var(--paper);border:1px solid var(--line);border-radius:12px;
    padding:12px 14px;
  }
  .cmp-item .cmp-label{font-size:11.5px;color:var(--ink-soft);font-weight:600;margin-bottom:5px;}
  .cmp-item .cmp-value{font-family:var(--font-mono);font-weight:700;font-size:19px;color:var(--ink);}
  .cmp-item .cmp-delta{font-family:var(--font-mono);font-size:12px;font-weight:700;margin-right:6px;}
  .cmp-item .cmp-delta.up{color:var(--stamp-in);}
  .cmp-item .cmp-delta.down{color:var(--danger);}
  .cmp-item .cmp-delta.flat{color:var(--ink-soft);}

  .month-chart-wrap{margin-bottom:20px;}
  .mcw-label{font-size:11.5px;color:var(--ink-soft);font-weight:600;margin-bottom:8px;}
  .month-bar-chart{display:flex;align-items:flex-end;gap:14px;height:120px;padding:0 4px;}
  .mbc-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;height:100%;justify-content:flex-end;}
  .mbc-bars{display:flex;align-items:flex-end;gap:3px;height:90px;}
  .mbc-bar{width:11px;border-radius:3px 3px 0 0;transition:height .5s cubic-bezier(.2,.8,.25,1);}
  .mbc-bar.mbc-in{background:var(--stamp-in);}
  .mbc-bar.mbc-out{background:var(--stamp-out);}
  .mbc-month{font-size:10.5px;color:var(--ink-soft);font-family:var(--font-mono);}
  .mbc-legend{display:flex;gap:14px;font-size:11px;color:var(--ink-soft);margin-top:4px;}
  .mbc-legend span{display:inline-flex;align-items:center;gap:5px;}
  .mbc-legend i{width:9px;height:9px;border-radius:2px;display:inline-block;}

  .analytics-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
  @media (max-width:700px){ .analytics-cols{grid-template-columns:1fr;} }
  .ac-title{font-family:var(--font-display);font-weight:700;font-size:12.5px;color:var(--ink-soft);margin-bottom:8px;}
  .top-row{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding:7px 10px;border-bottom:1px solid var(--line);font-size:13px;
  }
  .top-row:last-child{border-bottom:none;}
  .top-row .tr-rank{
    width:20px;height:20px;border-radius:50%;background:var(--freezer-soft);color:var(--freezer);
    display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:11px;font-weight:700;flex-shrink:0;
  }
  .top-row{align-items:flex-start;}
  .top-row .tr-rank{margin-top:1px;}
  .top-row .tr-name{flex:1;font-weight:600;display:flex;flex-direction:column;gap:2px;}
  .top-row .tr-breakdown{font-family:var(--font-mono);font-weight:500;font-size:11px;color:var(--ink-soft);}
  .top-row .tr-val{font-family:var(--font-mono);font-weight:700;color:var(--ink-soft);flex-shrink:0;margin-top:1px;}

  @media (max-width:480px){
    .avatar-option{width:34px;height:34px;font-size:15px;}
  }

  /* ============ كشف حركة صنف: رسم الرصيد + الاستهلاك + مقارنة الوارد/الصادر ============ */
  .ledger-trend-svg{width:100%;height:auto;display:block;}
  .ledger-trend-empty, .ledger-io-empty{text-align:center;color:var(--ink-soft);padding:26px 0;font-size:13px;}

  .consumption-trend{text-align:center;padding:6px 4px 2px;}
  .consumption-trend .ct-days{font-family:var(--font-mono);font-weight:700;font-size:26px;color:var(--ink);line-height:1;}
  .consumption-trend .ct-label{font-size:12px;color:var(--ink-soft);margin-top:6px;}
  .consumption-trend .ct-rate{font-size:11px;color:var(--ink-soft);margin-top:10px;font-family:var(--font-mono);border-top:1px dashed var(--line);padding-top:8px;}
  .consumption-trend.ct-warn .ct-days{color:var(--danger);}
  .consumption-trend.ct-ok .ct-days{color:var(--stamp-in);}
  .consumption-trend.ct-flat .ct-days{color:var(--ink-soft);font-size:15px;}

  .ledger-io-bar{display:flex;height:36px;border-radius:9px;overflow:hidden;border:1px solid var(--line);margin-bottom:10px;}
  .ledger-io-seg{
    display:flex;align-items:center;justify-content:center;
    font-family:var(--font-mono);font-weight:700;font-size:12.5px;color:#fff;
    white-space:nowrap;overflow:hidden;transition:width .6s cubic-bezier(.2,.8,.25,1);
  }
  .ledger-io-seg.io-in{background:var(--stamp-in);}
  .ledger-io-seg.io-out{background:var(--stamp-out);}
  .ledger-io-legend{display:flex;gap:16px;font-size:12px;color:var(--ink-soft);flex-wrap:wrap;}
  .ledger-io-legend span{display:inline-flex;align-items:center;gap:6px;}
  .ledger-io-legend i{width:10px;height:10px;border-radius:3px;display:inline-block;}

  /* تجميع شهري للجدول */
  .ledger-month-row td{font-weight:700;background:var(--paper);}

  @media (max-width:700px){
    .mini-banner-row .card{flex:1 1 100% !important;}
  }

  /* احتفال قصّاصات الورق (كونفيتي) بألوان الموقع — يظهر عند حفظ سند بنجاح */
  #confettiLayer{position:fixed;inset:0;z-index:610;pointer-events:none;overflow:hidden;}
  .confetti-piece{
    position:absolute;top:-14px;width:8px;height:12px;opacity:.95;
    border-radius:2px;animation:confettiFall linear forwards;
  }
  @keyframes confettiFall{
    0%{transform:translateY(0) rotate(0deg);opacity:1;}
    100%{transform:translateY(115vh) rotate(540deg);opacity:.3;}
  }

  /* توست إنجاز (وصول لعدد معيّن من السندات) */
  #milestoneToast{
    position:fixed;left:50%;top:26px;transform:translateX(-50%) translateY(-16px);
    background:var(--paper-card);color:var(--ink);
    border:1.5px solid var(--pantry);
    font-family:var(--font-display);font-weight:700;font-size:13.5px;
    padding:12px 22px;border-radius:12px;
    box-shadow:0 14px 34px rgba(27,36,48,0.22);
    z-index:611;opacity:0;pointer-events:none;
    transition:opacity .3s ease, transform .3s ease;
    max-width:90vw;text-align:center;
  }
  #milestoneToast.show{opacity:1;transform:translateX(-50%) translateY(0);}

  @media (max-width:700px){
    .greet-bar{flex-direction:column;align-items:flex-start;}
  }

  /* ============ لمسات تصميم أرقى (2026) ============ */
  /* شريط لوني رفيع أعلى الكروت + ظلال متدرّجة أنعم */
  .card{
    box-shadow:0 1px 2px rgba(27,36,48,0.05), 0 6px 18px rgba(27,36,48,0.05);
    overflow:hidden;
  }
  .card::before{
    content:"";position:absolute;top:0;right:0;left:0;height:3px;
    background:linear-gradient(90deg,var(--freezer),var(--pantry),var(--cleaning));
    opacity:0;transition:opacity .3s ease;
  }
  .card:hover{box-shadow:0 4px 10px rgba(27,36,48,0.07), 0 18px 40px rgba(27,36,48,0.12);}
  .card:hover::before{opacity:.9;}

  /* شارة لونية صغيرة قبل عناوين الأقسام الرئيسية */
  .view > .section-title{position:relative;padding-right:16px;}
  .view > .section-title::before{
    content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);
    width:5px;height:22px;border-radius:3px;
    background:linear-gradient(180deg,var(--freezer),var(--pantry));
  }

  /* عناوين الأقسام الفرعية داخل الكروت تبقى بدون شارة */
  .card .section-title{padding-right:0;}
  .card .section-title::before{display:none;}

  /* أزرار أنعم بحواف لطيفة */
  .btn-primary,.btn-in,.btn-out{box-shadow:0 2px 6px rgba(27,36,48,0.12);}
  .btn-search-trigger{transition:background .18s ease, transform .15s ease, border-color .18s ease;}
  .btn-search-trigger:hover{transform:translateY(-1px);}

  /* الكروت الملوّنة: طبقة زجاجية خفيفة أعلى الزاوية */
  .store-card::after{
    content:"";position:absolute;top:-40%;right:-20%;width:220px;height:220px;
    background:radial-gradient(circle,rgba(255,255,255,0.16),transparent 70%);
    pointer-events:none;
  }
  .store-card h3{position:relative;z-index:1;}

  /* ============ شريط المؤشرات (KPI) في لوحة التحكم ============ */
  .kpi-strip{
    display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px;
  }
  .kpi-tile{
    background:var(--paper-card);border:1px solid var(--line);border-radius:14px;
    padding:16px 16px 15px;position:relative;overflow:hidden;
    box-shadow:0 1px 2px rgba(27,36,48,0.05), 0 6px 16px rgba(27,36,48,0.05);
    transition:transform .25s cubic-bezier(.2,.8,.25,1), box-shadow .25s ease;
    animation:riseIn .5s both;
  }
  .kpi-tile:nth-child(1){animation-delay:.04s;}
  .kpi-tile:nth-child(2){animation-delay:.10s;}
  .kpi-tile:nth-child(3){animation-delay:.16s;}
  .kpi-tile:nth-child(4){animation-delay:.22s;}
  .kpi-tile:hover{box-shadow:0 4px 10px rgba(27,36,48,0.07), 0 16px 34px rgba(27,36,48,0.12);}
  .kpi-tile:not(.tilt-target):hover{transform:translateY(-4px);}
  .kpi-tile::before{
    content:"";position:absolute;top:0;right:0;bottom:0;width:4px;background:var(--accent,var(--freezer));
  }
  .kpi-tile .kpi-head{display:flex;align-items:center;gap:9px;margin-bottom:12px;}
  .kpi-tile .kpi-ico{
    width:34px;height:34px;border-radius:10px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;font-size:16px;
    background:var(--accent-soft,var(--freezer-soft));color:var(--accent,var(--freezer));
  }
  .kpi-tile .kpi-label{font-family:var(--font-display);font-weight:700;font-size:12.5px;color:var(--ink-soft);line-height:1.35;}
  .kpi-tile .kpi-value{
    font-family:var(--font-mono);font-weight:600;font-size:30px;color:var(--ink);
    line-height:1;letter-spacing:-.5px;
    direction:ltr;unicode-bidi:isolate;text-align:right;
  }
  .kpi-tile .kpi-value small{font-size:13px;color:var(--ink-soft);font-weight:500;margin-right:4px;}
  .kpi-tile.kpi-items{--accent:var(--ink);--accent-soft:var(--line);}
  .kpi-tile.kpi-in{--accent:var(--stamp-in);--accent-soft:var(--cleaning-soft);}
  .kpi-tile.kpi-out{--accent:var(--stamp-out);--accent-soft:#F6DEDA;}
  .kpi-tile.kpi-low{--accent:var(--warn);--accent-soft:var(--pantry-soft);}
  .kpi-tile.kpi-low.has-low{animation:riseIn .5s both, lowPulse 2.8s ease-in-out .6s infinite;}
  .kpi-tile.kpi-low.has-low .kpi-value{color:var(--warn);}

  @media (max-width:820px){
    .kpi-strip{grid-template-columns:repeat(2,1fr);gap:12px;}
  }
  @media (max-width:480px){
    .kpi-strip{grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px;}
    .kpi-tile{padding:13px 13px 12px;}
    .kpi-tile .kpi-value{font-size:24px;}
    .kpi-tile .kpi-ico{width:30px;height:30px;font-size:14px;}
    .kpi-tile .kpi-label{font-size:11.5px;}
  }

  /* ============ تحسين الجوال: جدول آخر السندات يتحوّل لبطاقات ============ */
  @media (max-width:700px){
    #dashRecentTable{min-width:0;table-layout:auto;}
    #dashRecentTable thead{display:none;}
    #dashRecentTable tbody, #dashRecentTable tr, #dashRecentTable td{display:block;width:100%;}
    #dashRecentTable tr{
      border:1px solid var(--line);border-radius:12px;
      margin-bottom:12px;padding:8px 12px;background:var(--paper-card);
    }
    #dashRecentTable td{
      display:flex;align-items:center;justify-content:space-between;gap:10px;
      padding:8px 2px;border-bottom:1px solid var(--line);
      white-space:normal;overflow:visible;text-overflow:clip;max-width:none;text-align:left;
    }
    #dashRecentTable td:last-child{border-bottom:none;}
    #dashRecentTable td::before{
      content:attr(data-label);flex-shrink:0;
      font-family:var(--font-display);font-weight:700;font-size:11.5px;color:var(--ink-soft);
    }
    /* داخل جدول البطاقات لا حاجة للحد الأدنى للعرض */
    .table-wrap{max-height:none;}
    #dashRecentTable .empty-state{text-align:center;}
    #dashRecentTable td.empty-cell{justify-content:center;}
    #dashRecentTable td.empty-cell::before{content:none;}
  }

  /* ترويسة قسم السجل: العنوان على جهة والعدّاد على الجهة الثانية */
  .log-head{justify-content:space-between;align-items:center;margin-bottom:14px;}
  .log-head .log-head-title{display:flex;align-items:center;gap:8px;}
  .log-head .log-head-sub{font-weight:500;font-size:12.5px;color:var(--ink-soft);}
  .log-head .log-count{
    font-family:var(--font-mono);font-weight:600;font-size:12.5px;min-width:26px;text-align:center;
  }

  /* جدولا السجل يتحوّلان لبطاقات مكدّسة على الجوال */
  @media (max-width:700px){
    #logTableIn, #logTableOut{min-width:0;table-layout:auto;}
    #logTableIn thead, #logTableOut thead{display:none;}
    #logTableIn tbody, #logTableIn tr, #logTableIn td,
    #logTableOut tbody, #logTableOut tr, #logTableOut td{display:block;width:100%;}
    #logTableIn tr, #logTableOut tr{
      border:1px solid var(--line);border-radius:12px;
      margin-bottom:12px;padding:8px 12px;background:var(--paper-card);
    }
    #logTableIn td, #logTableOut td{
      display:flex;align-items:center;justify-content:space-between;gap:10px;
      padding:8px 2px;border-bottom:1px solid var(--line);
      white-space:normal;overflow:visible;text-overflow:clip;max-width:none;text-align:left;
    }
    #logTableIn td:last-child, #logTableOut td:last-child{border-bottom:none;}
    #logTableIn td::before, #logTableOut td::before{
      content:attr(data-label);flex-shrink:0;
      font-family:var(--font-display);font-weight:700;font-size:11.5px;color:var(--ink-soft);
    }
    #logTableIn td[data-label=""], #logTableOut td[data-label=""]{justify-content:flex-end;}
    #logTableIn td[data-label=""]::before, #logTableOut td[data-label=""]::before{content:none;}
    #logTableIn td[data-label=""] .btn-ghost, #logTableOut td[data-label=""] .btn-ghost{width:100%;}
    #logTableIn td.empty-cell, #logTableOut td.empty-cell{justify-content:center;}
    #logTableIn td.empty-cell::before, #logTableOut td.empty-cell::before{content:none;}
  }

  /* ====== دور "مدير عام" و"مدير الحسابات": الأصناف بعرض فقط بدون تعديل — تنطبق فقط لما يكون
     أحد الدورين فعّال (كلاس role-manager-readonly تتحط على body من applyRole)، فما تأثر
     على صلاحية الأدمن الكاملة بنفس هذا الملف. ====== */
  .role-manager-readonly #addItemCard{ display:none !important; }
  .role-manager-readonly #itemsTable input[data-item-barcode],
  .role-manager-readonly #itemsTable input[data-item-expiry]{
    pointer-events:none; background:var(--paper); opacity:.75; cursor:default;
  }
  .role-manager-readonly #itemsTable [data-photo-item],
  .role-manager-readonly #itemsTable [data-photo-remove]{
    display:none !important;
  }
  /* منع تعديل أي سند حتى لو انفتحت نافذة تفاصيله من لوحة التحكم أو سجل السندات أو البحث */
  .role-manager-readonly #editVoucherBtn{ display:none !important; }
  .role-manager-readonly #newVoucherOverlay{ display:none !important; }
  /* "مدير الحسابات" يشوف الإعدادات (المظهر / سجل التدقيق / الموقع) بس بدون
     الإجراءات الخطيرة اللي ما ترجع فيها (إقفال الشهر، تصفير الأرصدة، دمج الأصناف، وضع المطور) */
  .role-manager-readonly .settings-danger-card{ display:none !important; }

  /* ====== سنابات: شبكة صور سريعة تختفي تلقائيًا بعد ٣ أيام ====== */
  .snaps-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;}
  .snap-card{background:var(--paper-card);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 2px 8px rgba(27,36,48,0.04);}
  .snap-card img{width:100%;height:170px;object-fit:cover;display:block;cursor:pointer;}
  .snap-card .snap-body{padding:10px 12px;}
  .snap-card .snap-note{font-size:13px;color:var(--ink);line-height:1.5;margin-bottom:8px;}
  .snap-card .snap-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;color:var(--ink-soft);}
  .snap-card .snap-del{background:none;border:none;color:var(--danger);cursor:pointer;font-size:13px;padding:2px 4px;flex-shrink:0;}