:root {
      /* ===== الهوية الوحيدة للنظام: البترولي المؤسسي ===== */
      color-scheme: light;
      --primary: #187466;
      --primary-dark: #145C52;
      --primary-light: #EEF7F4;
      --primary-soft: #D9EAE5;
      --gov-gold: #B78A3D;
      --gov-gold-light: #FBF6EA;
      --secondary: #2F7D70;
      --success: #15803D;
      --danger: #DC2626;
      --warning: #D97706;
      --info: #187466;
      --bg: #E4EAE0;
      --surface: #FFFFFF;
      --surface2: #F7FAF8;
      --surface3: #E4ECE9;
      --border: #C7D3CF;
      --border-strong: #ACBFBA;
      --text: #20312F;
      --text-muted: #667874;
      --text-light: #92A19D;

      --sidebar-bg: #FFFFFF;
      --sidebar-text: #20312F;
      --sidebar-active: #187466;
      --sidebar-header-border: #D9E1DE;
      --sidebar-footer-border: #D9E1DE;
      --sidebar-scrollbar: rgba(24, 116, 102, .20);
      --sidebar-section-title: #526562;
      --sidebar-hover-bg: rgba(24, 116, 102, .055);
      --sidebar-hover-color: #145C52;
      --sidebar-active-bg: rgba(24, 116, 102, .105);
      --sidebar-active-color: #145C52;
      --sidebar-active-border: #187466;
      --sidebar-active-glow: rgba(24, 116, 102, .38);
      --sidebar-title-color: #20312F;
      --sidebar-subtitle-color: #667874;
      --sidebar-company-color: #187466;
      --sidebar-username-color: #20312F;
      --sidebar-userrole-color: #667874;
      --sidebar-nav-icon-color: #8495AD;
      --sidebar-logout-color: #94A3B3;
      --sidebar-tooltip-bg: #1A232E;
      --sidebar-tooltip-color: #FFFFFF;

      --shadow: 0 1px 2px rgba(24, 116, 102, .03), 0 4px 12px rgba(23, 43, 40, .045);
      --shadow-md: 0 3px 8px rgba(24, 116, 102, .05), 0 10px 24px rgba(23, 43, 40, .055);
      --shadow-lg: 0 14px 38px rgba(32, 59, 58, .11), 0 4px 12px rgba(23, 43, 40, .05);
      --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, .6);

      --radius: 10px;
      --radius-sm: 6px;
      --radius-lg: 14px;
      --font: 'Tajawal', sans-serif;
      --font-heading: 'Alexandria', 'Tajawal', sans-serif;

      --finance-card-grad: linear-gradient(145deg, #FFFFFF 0%, #F2F7F5 100%);
      --finance-card-border: #CCD9D5;
      --finance-card-shadow: 0 3px 12px rgba(32, 49, 47, .055);
      --finance-card-shadow-hover: 0 12px 28px rgba(24, 116, 102, .13), 0 4px 10px rgba(32, 49, 47, .05);
      --finance-card-text: #20312F;
      --finance-card-text-muted: #667874;
      --finance-card-accent: #187466;
      --finance-card-item-bg: rgba(24, 116, 102, .05);
      --finance-card-item-bg-main: rgba(24, 116, 102, .105);
      --finance-card-badge-bg: rgba(24, 116, 102, .09);
      --finance-card-badge-text: #145C52;
      --finance-card-text-shadow: none;

      --bg-glow-1: rgba(24, 116, 102, .06);
      --bg-glow-2: rgba(67, 139, 127, .07);
      --mode-app-bg: #E4EAE0;
      --mode-app-art: none;
      --mode-panel-bg: #FFFFFF;
      --mode-panel-alt: #E3ECE9;
      --mode-field-bg: #FAFCFB;
      --mode-row-alt: rgba(24, 116, 102, .035);
      --mode-topbar-bg: #187466;
    }
    /* حالة جاري الحفظ على الأزرار */
    .btn-saving {
      opacity: 0.82;
      pointer-events: none;
      cursor: not-allowed;
    }

    .btn-saving .save-spinner {
      display: inline-block;
      width: 13px;
      height: 13px;
      border: 2px solid rgba(255, 255, 255, 0.4);
      border-top-color: #fff;
      border-radius: 50%;
      animation: btn-spin 0.7s linear infinite;
      vertical-align: middle;
      margin-left: 5px;
    }

    @keyframes btn-spin {
      to {
        transform: rotate(360deg);
      }
    }

    /* أزرار تظهر فى الكمبيوتر فقط أو فى الموبايل فقط (نمط عام قابل لإعادة الاستخدام) */
    .desktop-only-btn {
      display: inline-flex !important;
    }

    .mobile-only-btn {
      display: none !important;
    }

    /* نفس الفكرة لكن لعناصر container كاملة (مثل .page-header) اللى شكلها الافتراضى flex مش inline-flex */
    /* ===== إخفاء شريط التمرير بصريًا مع الإبقاء على إمكانية التمرير (سحب/لمس) ===== */
    .no-scrollbar {
      scrollbar-width: none;
      /* Firefox */
      -ms-overflow-style: none;
      /* Edge/IE القديم */
    }

    .no-scrollbar::-webkit-scrollbar {
      display: none;
      /* Chrome/Safari/Edge الحديث */
    }

    .mobile-only-block {
      display: none !important;
    }

    @media (max-width: 768px) {
      .desktop-only-btn {
        display: none !important;
      }

      .mobile-only-btn {
        display: inline-flex !important;
      }

      .mobile-only-block {
        display: flex !important;
      }
    }

    .toggle-switch {
      position: relative;
      width: 48px;
      height: 26px;
      flex-shrink: 0;
    }

    .toggle-switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }

    .toggle-slider {
      position: absolute;
      inset: 0;
      background: var(--border);
      border-radius: 999px;
      cursor: pointer;
      transition: .3s;
    }

    .toggle-slider::before {
      content: '';
      position: absolute;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #fff;
      left: 3px;
      top: 3px;
      transition: .3s;
      box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
    }

    .toggle-switch input:checked+.toggle-slider {
      background: var(--primary);
    }

    .toggle-switch input:checked+.toggle-slider::before {
      transform: translateX(22px);
    }

    

    /* ===== Dashboard Professional Navigation Cards ===== */
    .dashboard-page-cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 16px;
      width: 100%;
      margin-bottom: 16px;
    }

    @media (max-width: 768px) {
      .dashboard-page-cards {
        /* 2 كروت جنب بعض على الموبايل */
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
      }
    }


    .dashboard-page-card {
      position: relative;
      overflow: hidden;
      min-height: 130px;
      padding: 0;
      border-radius: 18px;
      border: 1px solid rgba(255, 255, 255, 0.08);

      background:
        linear-gradient(135deg,
          rgba(24, 116, 102, 0.95) 0%,
          rgba(24, 116, 102, 0.88) 45%,
          rgba(26, 154, 122, 0.85) 100%);

      box-shadow:
        0 10px 28px rgba(24, 116, 102, 0.28),
        0 4px 12px rgba(0, 0, 0, 0.08);

      cursor: pointer;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      transition:
        transform .25s ease,
        box-shadow .25s ease,
        filter .25s ease;
    }

    .dashboard-page-card:hover {
      transform: translateY(-4px) scale(1.02);

      box-shadow:
        0 16px 36px rgba(24, 116, 102, 0.35),
        0 6px 18px rgba(0, 0, 0, 0.12);

      filter: brightness(1.04);
    }

    .dashboard-page-card>div:last-child {
      position: relative;
      z-index: 2;
      padding: 10px 14px 13px;
      background: linear-gradient(to top, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.1) 70%, transparent 100%);
    }

    .dashboard-page-card .card-title {
      font-size: .92rem;
      font-weight: 700;
      color: #fff;
      margin: 0;
      text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    }

    

    @media (max-width: 700px) {
      .dashboard-page-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px;
      }

      .dashboard-page-card {
        min-height: 110px;
        border-radius: 14px;
        padding: 0 !important;
      }

      .dashboard-page-card .card-title {
        font-size: .82rem;
      }
    }

    @media (max-width: 380px) {
      .dashboard-page-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      }
    }

    

    /* ===== تحسين ألوان النصوص داخل كروت لوحة التحكم ===== */

    /* عنوان الكارت */
    .dashboard-page-card .card-title,
.tsc-title,
.bsc-title {
      color: rgba(255, 255, 255, 0.96);
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
      letter-spacing: .2px;
    }

    /* النصوص الثانوية */
    .tsc-item-label,
.bsc-item-label,
.tsc-status-badge,
.bsc-status-badge,
.tsc-action,
.bsc-action {
      color: rgba(255, 255, 255, 0.78);
    }

    /* القيم والأرقام */
    .tsc-item-value,
.bsc-item-value,
.tsc-main-value {
      color: #f8fafc;
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
    }

    /* الأيقونات الخلفية */
    .tsc-bg-icon,
.bsc-bg-icon {
      color: rgba(255, 255, 255, 0.10) !important;
    }

    /* خلفيات العناصر الداخلية */
    .tsc-item,
.bsc-item {
      background: rgba(255, 255, 255, 0.12);
      border: 1px solid rgba(255, 255, 255, 0.08);
      backdrop-filter: blur(10px);
    }

    /* العنصر الرئيسي */
    .tsc-item-main {
      background: rgba(255, 255, 255, 0.18);
    }

    /* تحسين الـ badges */
    .tsc-status-badge,
.bsc-status-badge,
.tsc-action,
.bsc-action {
      background: rgba(255, 255, 255, 0.14);
      border: 1px solid rgba(255, 255, 255, 0.08);
      backdrop-filter: blur(8px);
    }

    /* Hover احترافي */
    .dashboard-page-card:hover,
.treasury-status-card:hover,
.balance-status-card:hover {
      filter: brightness(1.03) saturate(1.05);
    }

    /* ===== ألوان احترافية لإحصائيات الميزانية والخزنة ===== */

    /* الميزانية */
    .bsc-item-value {
      color: #fef3c7 !important;
    }

    #bsc-assets {
      color: #a7f3d0 !important;
    }

    #bsc-liabequity {
      color: #C5E4DA !important;
    }

    #bsc-diff {
      color: #fde68a !important;
    }

    /* الخزنة */
    .tsc-main-value {
      color: #fef9c3 !important;
    }

    #tsc-inflow {
      color: #bbf7d0 !important;
    }

    #tsc-outflow {
      color: #fecaca !important;
    }

    /* labels */
    .tsc-item-label,
.bsc-item-label {
      color: rgba(255, 255, 255, 0.72) !important;
    }

    /* ===== تصغير عرض صفحة لوحة التحكم ===== */
    #page-dashboard {
      width: 100%;
      max-width: 100%;
      margin: 0;
    }

    /* ===== فصل كروت الميزانية والخزنة (للصفحات الأخرى غير لوحة التحكم) ===== */
    .balance-status-card,
.treasury-status-card {
      display: block;
      clear: both;
      position: relative;
    }

    /* لوحة التحكم: المسافات يحددها الـ grid */
    .balance-status-card:not(.balance-treasury-grid .balance-status-card) {
      width: 100%;
      margin-bottom: 22px !important;
    }

    .treasury-status-card:not(.balance-treasury-grid .treasury-status-card) {
      width: 100%;
      margin-top: 10px !important;
    }

    /* ===== تأكيد استقلال كروت الميزانية والخزنة داخل لوحة التحكم ===== */
    /* (هذه القواعد لا تطبق داخل .balance-treasury-grid) */
    #page-dashboard #balance-status-card:not(.balance-treasury-grid #balance-status-card),
#page-dashboard #treasury-status-card:not(.balance-treasury-grid #treasury-status-card) {
      display: block !important;
      width: 100% !important;
      clear: both !important;
      position: relative !important;
      overflow: hidden !important;
    }

    /* ===== كارت الميزانية والخزنة جنب بعض ===== */
    /* الـ wrapper اللي هيجمعهم في شبكة (موجود في HTML) */
    #page-dashboard .balance-treasury-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px;
      align-items: stretch;
      margin: 0 0 18px;
    }

    #page-dashboard .balance-treasury-grid #balance-status-card,
#page-dashboard .balance-treasury-grid #treasury-status-card {
      position: relative !important;
      overflow: hidden !important;
      margin: 0 !important;
      width: auto !important;
      clear: none !important;
      float: none !important;
      display: block !important;
      height: 100%;
    }

    /* الموبايل: فوق بعض (responsive) */
    @media (max-width: 768px) {
      #page-dashboard .balance-treasury-grid {
        grid-template-columns: 1fr;
        gap: 18px;
      }

      #page-dashboard .balance-treasury-grid #balance-status-card,
#page-dashboard .balance-treasury-grid #treasury-status-card {
        width: 100% !important;
      }
    }

    /* ألوان نتائج كارت الميزانية */
    #page-dashboard #bsc-assets {
      color: #86efac !important;
    }

    #page-dashboard #bsc-liabequity {
      color: #8ACBBE !important;
    }

    #page-dashboard #bsc-diff {
      color: #fde68a !important;
    }

    /* ألوان نتائج كارت الخزنة */
    #page-dashboard #tsc-balance {
      color: #fef08a !important;
    }

    #page-dashboard #tsc-inflow {
      color: #8ACBBE !important;
    }

    #page-dashboard #tsc-outflow {
      color: #fecaca !important;
    }


    /* ===== Main Page Scrollbar Only ===== */

    /* Chrome / Edge */
    html::-webkit-scrollbar,
body::-webkit-scrollbar {
      width: 12px;
    }

    html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
      background: transparent;
    }

    html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
      background: linear-gradient(180deg, #3a3a3a, #555555);
      border-radius: 999px;
      border: 3px solid transparent;
      background-clip: content-box;
    }

    html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
      background: linear-gradient(180deg, #2b2b2b, #3f3f3f);
      background-clip: content-box;
    }

    /* Firefox */
    html,
body {
      scrollbar-width: thin;
      scrollbar-color: #444444 transparent;
    }


    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html {
      font-size: 16px;
    }

    body {
      font-family: var(--font);
      /* ★ لمسة جمالية: توهّج لوني ناعم جدًا فى ركنين من الشاشة، بيتلوّن تلقائيًا مع
      لون النظام المختار (فوق خلفية اللون الأساسي العادي) — مش تغيير جذري، مجرد عمق
      بصري خفيف بدل خلفية مسطّحة تمامًا */
      background-color: var(--bg);
      background-image:
        radial-gradient(circle at 100% 0%, var(--bg-glow-1) 0%, transparent 45%),
        radial-gradient(circle at 0% 100%, var(--bg-glow-2) 0%, transparent 45%);
      background-attachment: fixed;
      color: var(--text);
      transition: background-color 0.3s, color 0.3s;
      min-height: 100vh;
      overflow-x: hidden;
    }

    /* ===== منع تحديد النص في كل أنحاء التطبيق ما عدا حقول الإدخال ===== */
    body {
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      -webkit-touch-callout: none;
      /* منع قائمة الـ long-press على iOS */
      -webkit-tap-highlight-color: transparent;
      /* منع وميض اللمس */
    }

    /* السماح بالتحديد والكتابة فقط في حقول الإدخال */
    input,
textarea,
select,
[contenteditable="true"] {
      -webkit-user-select: text !important;
      -moz-user-select: text !important;
      -ms-user-select: text !important;
      user-select: text !important;
      -webkit-touch-callout: default !important;
    }

    /* ===== LOGIN ===== */
    #login-screen {
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      /* خلفية ثابتة لهوية تسجيل الدخول، مستقلة عن أوضاع التطبيق. */
      background: linear-gradient(135deg, #172B28 0%, #187466 55%, #147D72 100%);
      position: relative;
      overflow: hidden;
    }

    

    #login-screen::before {
      content: '';
      position: absolute;
      width: 600px;
      height: 600px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(125, 211, 252, 0.24) 0%, transparent 70%);
      top: -200px;
      right: -100px;
      animation: pulse 4s ease-in-out infinite;
    }

    #login-screen::after {
      content: '';
      position: absolute;
      width: 400px;
      height: 400px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(94, 234, 212, 0.20) 0%, transparent 70%);
      bottom: -100px;
      left: -100px;
      animation: pulse 4s ease-in-out infinite 2s;
    }

    @keyframes pulse {

      0%,
      100% {
        transform: scale(1);
        opacity: 0.8
      }

      50% {
        transform: scale(1.1);
        opacity: 1
      }
    }

    .login-card {
      background: rgba(255, 255, 255, 0.85);
      backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, 0.7);
      border-radius: 24px;
      padding: 48px 40px;
      width: 420px;
      max-width: 95vw;
      position: relative;
      z-index: 1;
      box-shadow: 0 25px 50px rgba(15, 23, 42, 0.15);
    }

    

    .login-logo {
      text-align: center;
      margin-bottom: 32px;
    }

    .login-logo .icon {
      width: 72px;
      height: 72px;
      background: linear-gradient(135deg, #187466, #1AA37A);
      border-radius: 20px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 32px;
      color: white;
      margin-bottom: 16px;
      box-shadow: 0 8px 24px rgba(24, 116, 102, 0.4);
      overflow: hidden;
    }

    .login-logo h1 {
      color: #0f172a;
      font-size: 1.6rem;
      font-weight: 800;
    }

    

    .login-logo p {
      color: rgba(15, 23, 42, 0.6);
      font-size: 0.9rem;
      margin-top: 4px;
    }

    

    .form-group {
      margin-bottom: 20px;
    }

    .form-group label {
      display: block;
      color: rgba(15, 23, 42, 0.75);
      font-size: 0.85rem;
      margin-bottom: 8px;
      font-weight: 500;
    }

    

    .form-group input {
      width: 100%;
      background: rgba(255, 255, 255, 0.7);
      border: 1px solid rgba(15, 23, 42, 0.12);
      border-radius: 10px;
      padding: 12px 16px;
      color: #0f172a;
      font-family: var(--font);
      font-size: 0.95rem;
      transition: all 0.2s;
      outline: none;
    }

    

    .form-group input:focus {
      border-color: #187466;
      background: rgba(255, 255, 255, 0.95);
      box-shadow: 0 0 0 3px rgba(24, 116, 102, 0.2);
    }

    

    .form-group input::placeholder {
      color: rgba(15, 23, 42, 0.35);
    }

    

    .btn-login {
      width: 100%;
      background: linear-gradient(135deg, #187466, #1AA37A);
      color: white;
      border: none;
      border-radius: 10px;
      padding: 14px;
      font-family: var(--font);
      font-size: 1rem;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.2s;
      margin-top: 8px;
    }

    .btn-login:hover {
      transform: translateY(-1px);
      box-shadow: 0 8px 24px rgba(24, 116, 102, 0.4);
    }

    .login-error {
      color: #ef4444;
      font-size: 0.85rem;
      text-align: center;
      margin-top: 12px;
      min-height: 20px;
    }

    /* ===== A3MAALY LOGIN EXPERIENCE ===== */
    #login-screen {
      padding: 28px;
      background:
        radial-gradient(circle at 84% 16%, rgba(64, 156, 208, .22) 0, transparent 34%),
        radial-gradient(circle at 12% 86%, rgba(33, 173, 143, .16) 0, transparent 32%),
        linear-gradient(145deg, #162927 0%, #203B3A 46%, #28514B 100%);
      isolation: isolate;
    }

    #login-screen::before {
      width: 520px;
      height: 520px;
      top: -260px;
      right: -130px;
      background: radial-gradient(circle, rgba(255,255,255,.12), transparent 67%);
    }

    #login-screen::after {
      width: 460px;
      height: 460px;
      bottom: -250px;
      left: -100px;
      background: radial-gradient(circle, rgba(45,212,191,.15), transparent 68%);
    }

    .login-layout {
      width: min(980px, 100%);
      display: grid;
      grid-template-columns: minmax(0, 1fr) 440px;
      direction: ltr;
      position: relative;
      z-index: 2;
      border: 1px solid rgba(255,255,255,.16);
      border-radius: 30px;
      overflow: hidden;
      box-shadow: 0 34px 90px rgba(3, 10, 28, .42);
    }

    .login-brand-panel {
      direction: rtl;
      min-height: 620px;
      padding: 52px 48px 40px;
      color: #fff;
      background:
        linear-gradient(155deg, rgba(27,42,74,.78), rgba(18,54,73,.66)),
        radial-gradient(circle at 75% 20%, rgba(91,175,159,.22), transparent 38%);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      backdrop-filter: blur(14px);
    }

    .login-brand-name {
      display: flex;
      align-items: center;
      gap: 13px;
      direction: ltr;
      justify-content: flex-start;
      letter-spacing: .08em;
      font-size: 1.2rem;
    }

    .login-brand-icon {
      width: 64px;
      height: 64px;
      border-radius: 19px;
      display: block;
      object-fit: cover;
      flex: 0 0 auto;
      box-shadow: 0 12px 30px rgba(12, 85, 113, .38);
    }

    .login-brand-panel h2 {
      margin: 70px 0 14px;
      max-width: 410px;
      font-size: clamp(1.75rem, 3vw, 2.35rem);
      line-height: 1.55;
      letter-spacing: -.02em;
    }

    .login-brand-panel > div > p {
      margin: 0;
      max-width: 440px;
      color: rgba(255,255,255,.72);
      font-size: .9rem;
      line-height: 1.95;
    }

    .login-benefits {
      display: grid;
      gap: 12px;
      margin-top: 32px;
    }

    .login-benefits > div {
      display: flex;
      align-items: center;
      gap: 12px;
      color: rgba(255,255,255,.9);
      font-size: .82rem;
      font-weight: 600;
    }

    .login-benefits i {
      width: 35px;
      height: 35px;
      border-radius: 11px;
      display: grid;
      place-items: center;
      color: #8fe3cf;
      background: rgba(255,255,255,.09);
      border: 1px solid rgba(255,255,255,.1);
    }

    .login-brand-foot {
      display: flex;
      align-items: center;
      gap: 8px;
      color: rgba(255,255,255,.55);
      font-size: .72rem;
    }

    #login-screen .login-card {
      direction: rtl;
      width: 100%;
      max-width: none;
      min-height: 620px;
      padding: 42px 43px 30px;
      border: 0;
      border-radius: 0;
      background: rgba(255,255,255,.97);
      backdrop-filter: blur(22px);
      box-shadow: none;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    #login-screen .login-logo {
      margin-bottom: 28px;
    }

    #login-screen .login-logo .icon {
      width: 66px;
      height: 66px;
      margin-bottom: 10px;
      border-radius: 19px;
      overflow: visible;
    }

    #login-screen .login-logo .login-app-icon {
      display: inline-block;
      object-fit: cover;
      background: none;
      overflow: hidden;
    }

    .login-platform-name {
      color: #203B3A;
      font-size: .73rem;
      font-weight: 800;
      letter-spacing: .14em;
      direction: ltr;
      margin-bottom: 18px;
    }

    #login-screen .login-logo h1 {
      margin: 0;
      color: #172033;
      font-size: 1.55rem;
      line-height: 1.45;
    }

    #login-screen .login-logo p {
      margin: 6px 0 0;
      color: #6b7689;
      font-size: .82rem;
    }

    #login-screen .form-group {
      margin-bottom: 17px;
    }

    #login-screen .form-group label {
      color: #344054;
      font-size: .76rem;
      font-weight: 700;
      margin-bottom: 7px;
    }

    .login-input-wrap {
      position: relative;
      display: flex;
      align-items: center;
    }

    .login-input-wrap > i {
      position: absolute;
      right: 15px;
      z-index: 1;
      color: #8290a5;
      font-size: .9rem;
      pointer-events: none;
    }

    #login-screen .login-input-wrap input {
      height: 50px;
      padding: 0 44px 0 46px;
      border: 1px solid #d8dee8;
      border-radius: 13px;
      background: #f8fafc;
      color: #172033;
      font-size: .86rem;
    }

    #login-screen .login-input-wrap input:focus {
      border-color: #327fa9;
      background: #fff;
      box-shadow: 0 0 0 4px rgba(50,127,169,.12);
    }

    .login-password-toggle {
      position: absolute;
      left: 10px;
      width: 34px;
      height: 34px;
      border: 0;
      border-radius: 9px;
      display: grid;
      place-items: center;
      color: #68758a;
      background: transparent;
      cursor: pointer;
      transition: .18s ease;
    }

    .login-password-toggle:hover,
    .login-password-toggle:focus-visible {
      color: #1f6f99;
      background: #eaf2f7;
      outline: none;
    }

    .login-form-actions {
      display: flex;
      justify-content: flex-end;
      margin: -2px 0 15px;
    }

    #login-screen a {
      color: #1f719d;
      text-decoration: none;
      font-weight: 700;
    }

    #login-screen a:hover { color: #125678; }

    .login-form-actions a { font-size: .75rem; }

    #login-screen .btn-login {
      min-height: 50px;
      margin: 0;
      border-radius: 13px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      background: linear-gradient(135deg, #245f89, #19876f);
      box-shadow: 0 10px 24px rgba(31,105,132,.22);
      font-size: .87rem;
    }

    #login-screen .btn-login:hover:not(:disabled) {
      transform: translateY(-1px);
      box-shadow: 0 14px 30px rgba(31,105,132,.3);
    }

    #login-screen .btn-login:disabled {
      opacity: .68;
      cursor: wait;
      transform: none;
    }

    #login-screen .login-error,
    #login-screen .login-success {
      display: none;
      min-height: 0;
      margin-top: 12px;
      padding: 9px 11px;
      border-radius: 10px;
      text-align: center;
      font-size: .72rem;
      font-weight: 600;
      line-height: 1.65;
    }

    #login-screen .login-error:not(:empty) {
      display: block;
      color: #b42318;
      background: #fff1f0;
      border: 1px solid #fecaca;
    }

    #login-screen .login-success:not(:empty) {
      display: block;
      color: #067647;
      background: #ecfdf3;
      border: 1px solid #a7f3d0;
    }

    .login-reset-hint {
      margin: -4px 0 18px;
      padding: 11px 13px;
      border-radius: 11px;
      color: #566579;
      background: #f2f6fa;
      font-size: .74rem;
      line-height: 1.75;
    }

    .login-back-row {
      text-align: center;
      margin-top: 14px;
      font-size: .76rem;
    }

    .login-card-footer {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 9px;
      margin-top: 22px;
      padding-top: 18px;
      border-top: 1px solid #e5eaf0;
      color: #697589;
      font-size: .74rem;
    }

    .login-support-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: #16866c !important;
    }

    @media (max-width: 820px) {
      #login-screen { padding: 20px; }
      .login-layout { width: min(440px, 100%); grid-template-columns: 1fr; border-radius: 25px; }
      .login-brand-panel { display: none; }
      #login-screen .login-card { min-height: 0; padding: 36px 32px 28px; border-radius: 24px; }
    }

    @media (max-width: 480px) {
      #login-screen { padding: 0; align-items: stretch; background: linear-gradient(160deg,#172B28,#203B3A); }
      .login-layout { width: 100%; min-height: 100dvh; border: 0; border-radius: 0; box-shadow: none; }
      #login-screen .login-card { min-height: 100dvh; padding: 26px 21px 22px; border-radius: 0; justify-content: center; }
      #login-screen .login-logo { margin-bottom: 24px; }
      #login-screen .login-logo .icon { width: 60px; height: 60px; }
      #login-screen .login-logo h1 { font-size: 1.35rem; }
      .login-card-footer { margin-top: 18px; }
    }

    /* ===== MAIN LAYOUT ===== */
    #app {
      display: none;
    }

    #app.visible {
      display: flex;
      min-height: 100vh;
    }

    /* SIDEBAR */
    .sidebar {
      width: 215px;
      background: var(--sidebar-bg);
      border-left: none;
      box-shadow: none;
      display: flex;
      flex-direction: column;
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      z-index: 2147483647;
      transition: width 0.3s cubic-bezier(.4, 0, .2, 1), transform 0.3s cubic-bezier(.4, 0, .2, 1), box-shadow 0.3s;
      overflow: hidden;
    }

    /* Desktop collapsed sidebar */
    .sidebar.collapsed {
      width: 60px;
      box-shadow: none;
    }

    .sidebar.collapsed .sidebar-title,
.sidebar.collapsed .nav-section-title {
      opacity: 0;
      pointer-events: none;
      width: 0;
      overflow: hidden;
      white-space: nowrap;
    }

    .sidebar.collapsed .sidebar-header {
      padding: 12px 8px;
    }

    .sidebar.collapsed .sidebar-brand-banner {
      justify-content: center;
      gap: 0;
    }

    .sidebar.collapsed .sidebar-logo {
      margin: 0;
    }

    .sidebar.collapsed .nav-section {
      padding: 10px 0 2px;
      margin-top: 6px;
      border-top: 1px solid var(--sidebar-header-border);
    }

    .sidebar.collapsed .nav-section:first-of-type {
      margin-top: 0;
      border-top: none;
    }

    .sidebar.collapsed .nav-item {
      justify-content: center;
      padding: 12px 0;
      border-right: none;
      border-radius: 0;
      position: relative;
      font-size: 0;
      gap: 0;
      white-space: nowrap;
      overflow: hidden;
    }

    .sidebar.collapsed .nav-item .icon {
      width: 24px;
      font-size: 1.1rem;
    }

    .sidebar.collapsed .nav-item.active {
      border-right: none;
    }

    .sidebar.collapsed .nav-item.active::after {
      content: '';
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 3px;
      height: 60%;
      background: linear-gradient(180deg, var(--primary) 0%, var(--gov-gold) 100%);
      border-radius: 3px 0 0 3px;
      box-shadow: 0 0 8px var(--sidebar-active-glow);
    }

    .sidebar.collapsed .sidebar-footer {
      justify-content: center;
      padding: 14px 8px;
      gap: 10px;
    }

    /* Tooltip on collapsed nav items */
    .sidebar.collapsed .nav-item[data-label]::before {
      content: attr(data-label);
      position: absolute;
      right: calc(100% + 8px);
      top: 50%;
      transform: translateY(-50%);
      background: var(--sidebar-tooltip-bg);
      color: var(--sidebar-tooltip-color);
      font-size: 0.78rem;
      font-weight: 600;
      padding: 5px 10px;
      border-radius: 8px;
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.18s;
      z-index: 9999;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }

    .sidebar.collapsed .nav-item[data-label]::after {
      content: '';
      position: absolute;
      right: calc(100% + 2px);
      top: 50%;
      transform: translateY(-50%);
      border: 5px solid transparent;
      border-left-color: var(--sidebar-tooltip-bg);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.18s;
      z-index: 9999;
    }

    .sidebar.collapsed .nav-item[data-label]:hover::before,
.sidebar.collapsed .nav-item[data-label]:hover::after {
      opacity: 1;
    }

    /* Adjust main margin when collapsed */
    .main.sidebar-collapsed {
      margin-right: 60px;
    }

    .sidebar-header {
      height: 68px;
      min-height: 68px;
      padding: 0 14px;
      border-bottom: 1px solid var(--sidebar-header-border);
      display: flex;
      align-items: center;
      box-sizing: border-box;
    }

    .sidebar-brand-banner {
      display: flex;
      align-items: center;
      gap: 12px;
      width: 100%;
      min-width: 0;
      min-height: 52px;
      padding: 4px 8px;
      border-radius: 11px;
      background: var(--surface);
      border: 1px solid var(--sidebar-header-border);
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
      box-sizing: border-box;
    }

    .sidebar.collapsed .sidebar-header {
      height: 68px;
      min-height: 68px;
      padding: 0 8px;
    }

    .sidebar.collapsed .sidebar-brand-banner {
      background: transparent;
      border-color: transparent;
      box-shadow: none;
      padding: 0;
      min-height: 52px;
    }

    .sidebar-logo {
      width: 44px;
      height: 44px;
      background: linear-gradient(135deg, #dc2626, #ef4444);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      color: white;
      flex-shrink: 0;
    }

    .sidebar-title {
      color: var(--sidebar-title-color);
      font-weight: 800;
      font-size: 1rem;
      line-height: 1.2;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      flex: 1;
      min-width: 0;
      max-width: 100%;
    }

    .sidebar-title span {
      display: block;
      font-size: 0.75rem;
      color: var(--sidebar-subtitle-color);
      font-weight: 500;
    }

    #sb-company {
      display: block;
      font-size: 1rem;
      font-weight: 800;
      color: var(--sidebar-company-color) !important;
      line-height: 1.2;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    #sb-trial-badge {
      display: none;
      align-items: center;
      gap: 5px;
      width: fit-content;
      margin-top: 5px;
      padding: 3px 9px;
      border: 1px solid rgba(245, 158, 11, .38);
      border-radius: 999px;
      background: rgba(245, 158, 11, .13);
      color: #b45309 !important;
      font-size: .62rem !important;
      font-weight: 800 !important;
      line-height: 1.35;
      white-space: nowrap;
    }

    #sb-trial-badge.is-visible {
      display: inline-flex !important;
    }

    #sb-trial-badge[hidden] {
      display: none !important;
    }

    .sidebar-nav {
      flex: 1;
      overflow-y: auto;
      padding: 12px 0;
      /* منع نقل السكرول إلى body عند الوصول لنهاية القائمة (scroll-chaining prevention) */
      overscroll-behavior: contain;
      overscroll-behavior-y: contain;
      /* سكرول بدون ظهور scrollbar */
      scrollbar-width: none;
      -ms-overflow-style: none;
    }

    .sidebar-nav::-webkit-scrollbar {
      display: none;
    }

    .nav-section {
      padding: 18px 16px 5px;
      position: relative;
    }

    .nav-section-title {
      font-size: 0.76rem;
      color: var(--sidebar-section-title);
      font-weight: 800;
      font-family: 'Tajawal', sans-serif;
      letter-spacing: 0.04em;
      display: flex;
      align-items: center;
      gap: 7px;
      position: relative;
      white-space: nowrap;
      cursor: pointer;
      user-select: none;
    }

    .nav-section-title:hover {
      opacity: .8;
    }

    .nav-section-chevron {
      font-size: .62rem;
      flex-shrink: 0;
      opacity: .55;
      transition: transform .2s ease;
      order: 2;
      margin-inline-start: 4px;
    }

    .nav-section.section-collapsed .nav-section-chevron {
      transform: rotate(-90deg);
    }

    .sidebar:not(.collapsed) .nav-item.nav-item-hidden-by-collapse {
      display: none !important;
    }

    .nav-section-title::before {
      content: '';
      display: inline-block;
      width: 4px;
      height: 13px;
      background: linear-gradient(180deg, var(--primary) 0%, var(--gov-gold) 100%);
      border-radius: 3px;
      opacity: 0.9;
      flex-shrink: 0;
      box-shadow: 0 0 6px var(--sidebar-active-glow);
    }

    .nav-section-title::after {
      content: '';
      display: block;
      flex: 1;
      height: 1px;
      background: linear-gradient(to left, var(--gov-gold) 0%, var(--border) 45%, transparent 100%);
      opacity: .55;
      margin-right: 4px;
      order: 1;
    }

    .nav-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 16px;
      color: var(--sidebar-text);
      cursor: pointer;
      transition: all 0.2s;
      border-right: 3px solid transparent;
      font-size: 0.82rem;
      font-weight: 600;
      user-select: none;
      position: relative;
    }

    .nav-item::before {
      content: '';
      position: absolute;
      right: 0;
      top: 50%;
      width: 3px;
      height: 60%;
      border-radius: 3px 0 0 3px;
      background: linear-gradient(180deg, var(--primary) 0%, var(--gov-gold) 100%);
      transform: translateY(-50%) scaleY(0);
      transform-origin: center;
      transition: transform .25s ease, box-shadow .25s ease;
    }

    .nav-item:hover {
      background: var(--sidebar-hover-bg);
      color: var(--sidebar-hover-color);
    }

    .nav-item:hover::before {
      transform: translateY(-50%) scaleY(.4);
    }

    .nav-item.active {
      background: var(--sidebar-active-bg);
      color: var(--sidebar-active-color);
      border-right-color: transparent;
    }

    .nav-item.active::before {
      transform: translateY(-50%) scaleY(1);
      box-shadow: 0 0 8px var(--sidebar-active-glow);
    }

    .nav-item .icon {
      width: 20px;
      text-align: center;
      font-size: 0.95rem;
      color: var(--sidebar-nav-icon-color);
      transition: color 0.2s;
    }

    .nav-item:hover .icon,
.nav-item.active .icon {
      color: currentColor;
    }

    .sidebar-footer {
      padding: 14px 16px;
      border-top: 1px solid var(--sidebar-footer-border);
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    /* ★ نُقل هنا بدل الشريط الثابت أعلى الشاشة القديم - أقل إزعاجًا بصريًا،
       ومفيش داعي أي عنصر تانى فى الواجهة يحسب مكانه بناءً عليه */
    .sidebar-powered-by {
      text-align: center;
      font-size: .68rem;
      font-weight: 600;
      color: var(--text-muted, #94A3B8);
      opacity: .75;
      letter-spacing: .2px;
    }
    .sidebar-powered-by b {
      color: var(--primary);
      font-weight: 800;
    }

    /* MAIN CONTENT */
    .main {
      margin-right: 215px;
      margin-top: 0;
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      min-height: 100vh;
      transition: margin-right 0.3s cubic-bezier(.4, 0, .2, 1);
    }

    .topbar {
      background: var(--surface);
      border-bottom: 1px solid var(--border);
      box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
      padding: 0 20px;
      height: 64px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      position: sticky;
      top: 0;
      z-index: 50;
    }

    /* ★ شريط "Powered by a3maaly.com" اتنقل لأسفل القائمة الجانبية (.sidebar-powered-by) -
       الـ CSS القديم بتاع الشريط الثابت أعلى الشاشة اتشال بالكامل من هنا */

    .topbar-title {
      font-size: 1.1rem;
      font-weight: 700;
      color: #187466;
    }

    .sync-status-badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: .72rem;
      font-weight: 600;
      padding: 3px 9px;
      border-radius: 999px;
      background: #FEF3C7;
      color: #92400E;
      white-space: nowrap;
      border: 1px solid #FDE68A;
    }

    

    @media (max-width: 700px) {
      .sync-status-badge {
        font-size: .68rem;
        padding: 2px 7px;
      }
    }

    .topbar-actions {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .btn-icon {
      width: 38px;
      height: 38px;
      border-radius: var(--radius-sm);
      border: 1px solid var(--border);
      background: var(--surface2);
      color: var(--text-muted);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.9rem;
      transition: all 0.2s;
    }

    .btn-icon:hover {
      background: var(--primary-light);
      color: var(--primary);
      border-color: var(--primary);
    }

    .menu-toggle {
      display: flex;
    }

    /* زر القائمة مخصص للموبايل فقط؛ القائمة تظل مفتوحة دائمًا على الكمبيوتر. */
    @media (min-width: 901px) {
      #menu-toggle-btn.menu-toggle {
        display: none !important;
      }
    }


    /* ===== Professional Excel & Print Buttons ===== */
    button[onclick*="Excel"],
button[onclick*="excel"] {
      background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
      color: #ffffff !important;
      border: 1px solid #15803d !important;
      box-shadow: 0 4px 14px rgba(22, 163, 74, 0.22) !important;
    }

    button[onclick*="Excel"]:hover,
button[onclick*="excel"]:hover {
      background: linear-gradient(135deg, #15803d 0%, #166534 100%) !important;
      color: #ffffff !important;
      border-color: #166534 !important;
      transform: translateY(-1px);
    }

    /* ===== Print Buttons ===== */
    button[onclick*="print"] {
      background: linear-gradient(135deg, #187466 0%, #145C52 100%) !important;
      color: #ffffff !important;
      border: 1px solid #145C52 !important;
      box-shadow: 0 4px 14px rgba(24,116,102, 0.22) !important;
    }

    button[onclick*="print"]:hover {
      background: linear-gradient(135deg, #145C52 0%, #145C52 100%) !important;
      color: #ffffff !important;
      border-color: #145C52 !important;
      transform: translateY(-1px);
    }

    /* ===== POS Buttons ===== */
    button[onclick*="fullscreen"],
button[title*="ملء"],
button[title*="كامل"] {
      background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
      color: #ffffff !important;
      border: 1px solid #15803d !important;
      box-shadow: 0 4px 14px rgba(22, 163, 74, 0.22) !important;
    }

    button[onclick*="fullscreen"]:hover,
button[title*="ملء"]:hover,
button[title*="كامل"]:hover {
      background: linear-gradient(135deg, #15803d 0%, #166534 100%) !important;
      color: #ffffff !important;
      border-color: #166534 !important;
      transform: translateY(-1px);
    }

    /* Icons — keep white in all states (default + hover) */
    button[onclick*="Excel"] i,
button[onclick*="excel"] i,
button[onclick*="print"] i,
button[onclick*="PDF"] i,
button[onclick*="pdf"] i,
button[onclick*="fullscreen"] i,
button[title*="ملء"] i,
button[title*="كامل"] i,
button[onclick*="Excel"]:hover i,
button[onclick*="excel"]:hover i,
button[onclick*="print"]:hover i,
button[onclick*="PDF"]:hover i,
button[onclick*="pdf"]:hover i,
button[onclick*="fullscreen"]:hover i,
button[title*="ملء"]:hover i,
button[title*="كامل"]:hover i {
      color: #ffffff !important;
    }

    /* ===== Professional Action Buttons (Danger / Warning) ===== */
    /* تفريغ السلة + مسح السجل (أزرار حمراء) */
    button[onclick*="clearPOSCart"],
button[onclick*="clearActivityLog"] {
      background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%) !important;
      color: #ffffff !important;
      border: 1px solid #991b1b !important;
      box-shadow: 0 4px 14px rgba(220, 38, 38, 0.22) !important;
      transition: all 0.2s ease !important;
    }

    button[onclick*="clearPOSCart"]:hover,
button[onclick*="clearActivityLog"]:hover {
      background: linear-gradient(135deg, #991b1b 0%, #7f1d1d 100%) !important;
      color: #ffffff !important;
      border-color: #7f1d1d !important;
      transform: translateY(-1px);
      box-shadow: 0 6px 18px rgba(220, 38, 38, 0.32) !important;
    }

    /* مردود مبيعات يدوي + مردود مشتريات يدوي (بنفسجي محايد — تصحيح/تعديل، مش خطر أو نجاح) */
    button[onclick*="openManualSalesReturnModal"],
button[onclick*="openManualPurchaseReturnModal"] {
      background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%) !important;
      color: #ffffff !important;
      border: 1px solid #6d28d9 !important;
      box-shadow: 0 4px 14px rgba(124, 58, 237, 0.22) !important;
      transition: all 0.2s ease !important;
    }

    button[onclick*="openManualSalesReturnModal"]:hover,
button[onclick*="openManualPurchaseReturnModal"]:hover {
      background: linear-gradient(135deg, #6d28d9 0%, #5b21b6 100%) !important;
      color: #ffffff !important;
      border-color: #5b21b6 !important;
      transform: translateY(-1px);
      box-shadow: 0 6px 18px rgba(124, 58, 237, 0.32) !important;
    }

    /* سند دفع جديد (برتقالي / تحذيرى — زى لون مصروف جديد) */
    button[onclick*="modal-payment"] {
      background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
      color: #ffffff !important;
      border: 1px solid #d97706 !important;
      box-shadow: 0 4px 14px rgba(245, 158, 11, 0.22) !important;
      transition: all 0.2s ease !important;
    }

    button[onclick*="modal-payment"]:hover {
      background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
      color: #ffffff !important;
      border-color: #b45309 !important;
      transform: translateY(-1px);
      box-shadow: 0 6px 18px rgba(245, 158, 11, 0.32) !important;
    }

    /* مصروف جديد (برتقالي / تحذيرى) */
    button[onclick*="modal-expense"] {
      background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
      color: #ffffff !important;
      border: 1px solid #d97706 !important;
      box-shadow: 0 4px 14px rgba(245, 158, 11, 0.22) !important;
      transition: all 0.2s ease !important;
    }

    button[onclick*="modal-expense"]:hover {
      background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
      color: #ffffff !important;
      border-color: #b45309 !important;
      transform: translateY(-1px);
      box-shadow: 0 6px 18px rgba(245, 158, 11, 0.32) !important;
    }

    /* ضمان أيقونات بيضاء في الحالتين للأزرار دى */
    button[onclick*="openManualSalesReturnModal"] i,
button[onclick*="openManualPurchaseReturnModal"] i,
button[onclick*="clearPOSCart"] i,
button[onclick*="clearActivityLog"] i,
button[onclick*="modal-payment"] i,
button[onclick*="modal-expense"] i,
button[onclick*="openManualSalesReturnModal"]:hover i,
button[onclick*="openManualPurchaseReturnModal"]:hover i,
button[onclick*="clearPOSCart"]:hover i,
button[onclick*="clearActivityLog"]:hover i,
button[onclick*="modal-payment"]:hover i,
button[onclick*="modal-expense"]:hover i {
      color: #ffffff !important;
    }


    /* ===== صف الإجمالي أسفل الجداول ===== */
    .table-summary-row td {
      background: var(--surface2);
      border-top: 2px solid var(--border);
      font-weight: 800;
      font-size: 0.88rem;
      color: var(--text);
      padding: 10px 16px;
      position: sticky;
      bottom: 0;
    }

    .table-summary-row td.sum-label {
      color: var(--text-muted);
      font-size: 0.82rem;
    }

    .table-summary-row td.sum-value-success {
      color: var(--success);
    }

    .table-summary-row td.sum-value-danger {
      color: var(--danger);
    }

    .table-summary-row td.sum-value-primary {
      color: var(--primary);
    }

    

    /* ===== خلية رقم الصف (#) في الجداول ===== */
    .td-idx {
      color: var(--text-muted);
      font-size: .8rem;
      text-align: center;
      font-weight: 600;
    }

    /* ===== Pagination Controls ===== */
    .pagination-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 12px;
      padding: 14px 18px;
      border-top: 1px solid var(--border);
      background: var(--surface2);
    }

    .pagination-info {
      font-size: 0.85rem;
      color: var(--text-muted);
      font-weight: 600;
    }

    .pagination-info strong {
      color: var(--text);
      font-weight: 700;
    }

    .pagination-controls {
      display: flex;
      align-items: center;
      gap: 4px;
      flex-wrap: wrap;
    }

    .page-btn {
      min-width: 36px;
      height: 36px;
      padding: 0 10px;
      border-radius: 8px;
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--text);
      font-family: var(--font);
      font-size: 0.85rem;
      font-weight: 700;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: all 0.15s ease;
    }

    .page-btn:hover:not(:disabled):not(.active) {
      background: var(--surface2);
      border-color: var(--primary);
      color: var(--primary);
    }

    .page-btn.active {
      background: var(--primary);
      border-color: var(--primary);
      color: #fff;
      box-shadow: 0 2px 6px rgba(220, 38, 38, 0.25);
    }

    .page-btn:disabled {
      opacity: 0.4;
      cursor: not-allowed;
    }

    .page-btn-nav {
      gap: 5px;
    }

    .page-ellipsis {
      padding: 0 6px;
      color: var(--text-muted);
      font-weight: 700;
    }

    @media (max-width: 600px) {
      .pagination-bar {
        padding: 10px 12px;
        gap: 8px;
      }

      .pagination-info {
        font-size: 0.78rem;
        width: 100%;
        text-align: center;
      }

      .page-btn {
        min-width: 32px;
        height: 32px;
        font-size: 0.78rem;
      }

      .page-btn-nav .nav-label {
        display: none;
      }
    }

    .content {
      flex: 1;
      min-width: 0;
      padding: 20px;
    }

    /* PAGES */
    .page {
      display: none;
      animation: fadeIn 0.2s ease;
    }

    .page.active {
      display: block;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(4px)
      }

      to {
        opacity: 1;
        transform: translateY(0)
      }
    }

    @keyframes topbarBellRing {

      0%,
      100% {
        transform: rotate(0);
      }

      10%,
      30% {
        transform: rotate(-12deg);
      }

      20%,
      40% {
        transform: rotate(12deg);
      }

      50% {
        transform: rotate(0);
      }
    }

    .topbar-notif-ring i.fa-bell {
      display: inline-block;
      animation: topbarBellRing 2.2s ease-in-out infinite;
      color: var(--danger);
    }

    /* ===== قائمة إشعارات الجرس المنسدلة (تجمع كل أنواع الإشعارات، مش خاصة بالطلبات الواردة بس) ===== */
    .topbar-notif-menu {
      left: 0;
      right: auto;
      width: 320px;
      max-width: 88vw;
      padding: 0;
      overflow: hidden;
    }

    .topbar-notif-menu .topbar-notif-menu-header {
      padding: 12px 14px;
      font-weight: 800;
      font-size: .9rem;
      border-bottom: 1px solid var(--border);
      color: var(--text);
    }

    .topbar-notif-menu .topbar-notif-menu-list {
      max-height: 320px;
      overflow-y: auto;
      padding: 6px;
    }

    .topbar-notif-menu .topbar-notif-item {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 10px;
      border-radius: 8px;
      cursor: pointer;
    }

    .topbar-notif-menu .topbar-notif-item:hover {
      background: var(--primary-light);
    }

    .topbar-notif-menu .topbar-notif-item+.topbar-notif-item {
      margin-top: 2px;
    }

    .topbar-notif-menu .topbar-notif-item-icon {
      width: 32px;
      height: 32px;
      min-width: 32px;
      border-radius: 50%;
      background: var(--primary-light);
      color: var(--primary);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: .85rem;
    }

    .topbar-notif-menu .topbar-notif-item-title {
      font-weight: 700;
      font-size: .84rem;
      color: var(--text);
      margin-bottom: 2px;
    }

    .topbar-notif-menu .topbar-notif-item-sub {
      font-size: .76rem;
      color: var(--text-muted);
    }

    .topbar-notif-menu .topbar-notif-empty {
      padding: 26px 12px;
      text-align: center;
      color: var(--text-muted);
      font-size: .82rem;
    }

    /* ===== قائمة المستخدم في الهيدر ===== */
    .topbar-user-btn {
      padding: 0;
      overflow: hidden;
    }

    .topbar-user-avatar,
    .topbar-user-summary-avatar {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: linear-gradient(135deg, #2f80b7, #164d73);
      color: #fff;
      font-weight: 900;
      line-height: 1;
      user-select: none;
    }

    .topbar-user-avatar {
      width: 28px;
      height: 28px;
      font-size: .8rem;
      border: 1px solid rgba(255, 255, 255, .38);
    }

    .topbar-user-menu {
      left: 0;
      right: auto;
      width: 310px;
      max-width: min(88vw, 310px);
      padding: 8px;
      overflow: hidden;
    }

    .topbar-user-summary {
      display: grid;
      grid-template-columns: 44px minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
      padding: 10px;
      border-radius: 10px;
      background: var(--surface2);
      border: 1px solid var(--border);
    }

    .topbar-user-summary-avatar {
      width: 44px;
      height: 44px;
      font-size: 1rem;
      box-shadow: 0 4px 12px rgba(22, 77, 115, .22);
    }

    .topbar-user-summary-text {
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 3px;
    }

    .topbar-user-summary-text strong {
      color: var(--text);
      font-size: .9rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .topbar-user-summary-text span {
      color: var(--text-muted);
      font-size: .72rem;
      direction: ltr;
      text-align: right;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .topbar-user-role {
      padding: 3px 7px;
      border-radius: 999px;
      font-size: .64rem;
      font-weight: 800;
      white-space: nowrap;
      border: 1px solid transparent;
    }

    .topbar-user-role.role-admin { background: rgba(225, 29, 72, .10); color: #be123c; border-color: rgba(225, 29, 72, .18); }
    .topbar-user-role.role-manager { background: rgba(24, 116, 102, .10); color: #187466; border-color: rgba(24, 116, 102, .20); }
    .topbar-user-role.role-supervisor { background: rgba(217, 119, 6, .10); color: #b45309; border-color: rgba(217, 119, 6, .20); }
    .topbar-user-role.role-cashier { background: rgba(5, 150, 105, .10); color: #047857; border-color: rgba(5, 150, 105, .20); }
    .topbar-user-role.role-waiter,
    .topbar-user-role.role-custom { background: rgba(107, 114, 128, .10); color: #4b5563; border-color: rgba(107, 114, 128, .20); }

    .topbar-user-meta {
      display: grid;
      grid-template-columns: 20px auto minmax(0, 1fr);
      align-items: center;
      gap: 7px;
      padding: 11px 10px 7px;
      color: var(--text-muted);
      font-size: .76rem;
    }

    .topbar-user-meta[hidden] { display: none !important; }
    .topbar-user-meta i { color: var(--primary); text-align: center; }
    .topbar-user-meta strong { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    .topbar-user-divider {
      height: 1px;
      margin: 7px 2px;
      background: var(--border);
    }

    .topbar-user-logout {
      width: 100%;
      min-height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      border: 1px solid rgba(220, 38, 38, .20);
      border-radius: 9px;
      background: rgba(220, 38, 38, .08);
      color: #dc2626;
      font-family: var(--font);
      font-size: .84rem;
      font-weight: 800;
      cursor: pointer;
      transition: background .18s ease, color .18s ease, border-color .18s ease;
    }

    .topbar-user-logout:hover {
      background: #dc2626;
      color: #fff;
      border-color: #dc2626;
    }

    @media (max-width: 600px) {
      .topbar-user-menu { width: min(300px, calc(100vw - 20px)); }
      .topbar-user-summary { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 8px; }
      .topbar-user-summary-avatar { width: 40px; height: 40px; }
    }

    /* ===== CARDS ===== */
    .card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
    }

    .card-header {
      padding: 16px 20px;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .card-title {
      font-size: 1rem;
      font-weight: 700;
      color: var(--text);
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .card-body {
      padding: 20px;
    }

    /* STATS GRID */
    .stats-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 16px;
      margin-bottom: 24px;
    }

    /* Dashboard cards on mobile: 2 cards per row */
    .hr-att-cards-row {
      display: flex;
      flex-wrap: nowrap;
      justify-content: center;
      gap: 10px;
    }

    .hr-att-card {
      flex: 1 1 0;
      min-width: 0;
    }

    @media (max-width: 768px) {
      .hr-att-cards-row {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
      }

      .hr-att-card {
        min-width: 0;
      }
    }

    @media (max-width: 768px) {
      .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
      }

      .stat-card {
        padding: 14px;
        gap: 10px;
        min-height: 90px;
      }

      .stat-icon {
        width: 42px;
        height: 42px;
        font-size: 1rem;
      }

      .stat-value {
        font-size: 1rem;
      }

      .stat-label {
        font-size: 0.72rem;
      }
    }

    @media (max-width: 380px) {
      .stats-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .stat-card {
        padding: 10px;
      }

      .stat-value {
        font-size: .9rem;
      }
    }

    .stat-card {
      background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 20px;
      display: flex;
      align-items: center;
      gap: 16px;
      box-shadow: var(--shadow);
      transition: transform 0.2s, box-shadow 0.2s;
      min-width: 0;
      overflow: hidden;
    }

    .stat-card:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-lg);
    }

    .stat-icon {
      width: 52px;
      height: 52px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.3rem;
      flex-shrink: 0;
    }

    .stat-icon.blue {
      background: #EAF4F1;
      color: #187466;
    }

    .stat-icon.green {
      background: #ecfdf5;
      color: #10b981;
    }

    .stat-icon.red {
      background: #fef2f2;
      color: #ef4444;
    }

    .stat-icon.yellow {
      background: #fffbeb;
      color: #f59e0b;
    }

    

    

    

    

    .stat-info {
      flex: 1;
      min-width: 0;
      overflow: hidden;
    }

    .stat-value {
      font-size: 1.4rem;
      font-weight: 800;
      color: var(--text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
    }

    .stat-label {
      font-size: 0.8rem;
      color: var(--text-muted);
      margin-top: 2px;
    }

    /* TABLES */
    .table-wrap {
      overflow-x: auto;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      max-height: 65vh;
      border-radius: 0 0 var(--radius) var(--radius);
    }

    .table-wrap::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }

    .table-wrap::-webkit-scrollbar-track {
      background: var(--surface2);
      border-radius: 3px;
    }

    .table-wrap::-webkit-scrollbar-thumb {
      background: var(--border);
      border-radius: 3px;
    }

    .table-wrap::-webkit-scrollbar-thumb:hover {
      background: var(--primary);
    }

    .table-wrap thead th {
      position: sticky;
      top: 0;
      z-index: 2;
      background: var(--surface3);
    }

    

    @media (max-width: 900px) {
      .table-wrap {
        overflow-x: auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        display: block;
        width: 100%;
        max-height: 60vh;
      }
    }

    table {
      width: 100%;
      border-collapse: collapse;
      min-width: 600px;
    }

    thead tr {
      background: var(--surface3);
    }

    

    th {
      padding: 12px 16px;
      text-align: center;
      font-size: 0.8rem;
      font-weight: 700;
      color: #1e3a5f;
      white-space: nowrap;
      border: 1px solid var(--border);
    }

    

    td {
      padding: 12px 16px;
      font-size: 0.88rem;
      color: var(--text);
      border: 1px solid var(--border);
      text-align: center;
    }

    tbody tr:hover {
      background: var(--surface2);
    }

    tbody tr:last-child td {
      border-bottom: 1px solid var(--border);
    }

    /* BADGES */
    .badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 3px 10px;
      border-radius: 20px;
      font-size: 0.75rem;
      font-weight: 600;
      white-space: nowrap;
    }

    .badge-success {
      background: #ecfdf5;
      color: #059669;
    }

    .badge-danger {
      background: #fef2f2;
      color: #dc2626;
    }

    .badge-warning {
      background: #fffbeb;
      color: #d97706;
    }

    .badge-info {
      background: #EAF4F1;
      color: #187466;
    }

    .badge-gray {
      background: var(--surface2);
      color: var(--text-muted);
    }

    

    

    

    

    /* BUTTONS */
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 9px 18px;
      border-radius: var(--radius-sm);
      font-family: var(--font);
      font-size: 0.88rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s;
      border: none;
      white-space: nowrap;
    }

    .btn-primary {
      background: var(--primary);
      color: white;
    }

    .btn-primary:hover {
      background: var(--primary-dark);
      box-shadow: 0 4px 12px rgba(24, 116, 102, 0.3);
    }

    .btn-success {
      background: var(--success);
      color: white;
    }

    .btn-success:hover {
      background: #059669;
    }

    .btn-danger {
      background: var(--danger);
      color: white;
    }

    .btn-danger:hover {
      background: #dc2626;
    }

    .btn-warning {
      background: var(--warning);
      color: white;
    }

    .btn-outline {
      background: transparent;
      color: var(--text-muted);
      border: 1px solid var(--border);
    }

    .btn-outline:hover {
      background: var(--surface2);
      color: var(--text);
    }

    .btn-sm {
      padding: 6px 12px;
      font-size: 0.8rem;
    }

    .btn-xs {
      padding: 4px 8px;
      font-size: 0.75rem;
      border-radius: 6px;
    }

    /* FORM ELEMENTS */
    .form-row {
      display: grid;
      gap: 16px;
      margin-bottom: 16px;
    }

    .form-row.cols-2 {
      grid-template-columns: 1fr 1fr;
    }

    .form-row.cols-3 {
      grid-template-columns: 1fr 1fr 1fr;
    }

    /* ===== لوحة صلاحيات الصفحات (نظام الصلاحيات المخصصة) ===== */
    .perm-pages-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
      gap: 8px;
      padding: 12px 14px;
      background: var(--surface2);
      border-radius: var(--radius-sm);
      max-height: 260px;
      overflow-y: auto;
    }

    .perm-pages-grid label {
      display: flex;
      align-items: center;
      gap: 6px;
      cursor: pointer;
      font-size: .82rem;
      font-weight: 600;
      padding: 4px 6px;
      border-radius: 6px;
      transition: background .15s ease;
    }

    .perm-pages-grid label:hover {
      background: var(--surface);
    }

    /* ✅ توحيد شكل كل تشيك بوكسات الصلاحيات (إعدادات عامة + لوحة الصفحات) مع تشيك بوكس
       اختيار البيانات المطلوب مسحها (نفس المقاس 16px بدل الحجم الافتراضي 18px) —
       بدون أي فرق بين الكمبيوتر والموبايل لأنه مقاس ثابت (px) مش متأثر بحجم الشاشة */
    .perm-pages-grid input[type="checkbox"],
.perm-checkbox {
      width: 16px;
      height: 16px;
      flex-shrink: 0;
    }

    .form-row.cols-4 {
      grid-template-columns: 1fr 1fr 1fr 1fr;
    }

    .field {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .field label {
      font-size: 0.82rem;
      font-weight: 600;
      color: var(--text-muted);
    }

    .field input,
.field select,
.field textarea {
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 9px 12px;
      font-family: var(--font);
      font-size: 0.88rem;
      color: var(--text);
      transition: all 0.2s;
      outline: none;
      width: 100%;
    }

    .field input:focus,
.field select:focus,
.field textarea:focus {
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(24, 116, 102, 0.1);
      background: var(--surface);
    }

    .field textarea {
      resize: vertical;
      min-height: 80px;
    }

    .comp-product-dropdown-item:hover {
      background: var(--primary-light, rgba(24, 116, 102, .08));
      color: var(--primary);
    }

    /* MODAL */
    .modal-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(4px);
      z-index: 300;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 16px;
    }

    .modal-backdrop.open {
      display: flex;
    }

    /* القائمة الجانبية تستخدم أعلى طبقة أثناء التشغيل العادي، لكن يجب أن تدخل
       أسفل الـ backdrop عند فتح المودال حتى لا تغطي طرف المودالات العريضة مثل
       فاتورتي البيع والشراء. تُستعاد طبقتها الأصلية تلقائيًا عند إزالة modal-open. */
    body.modal-open .sidebar,
    body.modal-open #sidebar-overlay {
      z-index: 250 !important;
    }

    /* مودال التأكيد العام لازم يظهر دايماً فوق أي مودال تاني (مثل مودالات نقطة البيع اللي بتستخدم أعلى z-index ممكنة) */
    #modal-confirm.open,
#modal-input.open {
      z-index: 2147483647 !important;
    }

    /* ترتيب مودال الطاولة المشغولة على الكمبيوتر */
    #modal-table-detail .modal { max-width: 720px; }
    .table-detail-info { display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:var(--surface2);color:var(--text-muted);font-size:.86rem;line-height:1.7;margin-bottom:16px; }
    .table-detail-actions { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;width:100%; }
    .table-detail-actions .btn,
.table-detail-primary .btn { min-height:40px;justify-content:center;white-space:nowrap; }
    .table-detail-primary { display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;padding-top:12px;border-top:1px solid var(--border); }
    .table-detail-admin { display:flex;gap:8px;width:100%; }
    .table-detail-admin .btn { min-height:36px; }
    #modal-table-detail .modal-footer { flex-direction:column;align-items:stretch;gap:10px; }
    @media (max-width: 700px) {
      .table-detail-actions { grid-template-columns:1fr 1fr; }
      .table-detail-primary { grid-template-columns:1fr; }
      .table-detail-admin { display:grid;grid-template-columns:1fr 1fr; }
    }

    .modal {
      background: var(--surface);
      border-radius: 16px;
      width: 100%;
      max-width: 600px;
      max-height: 90vh;
      overflow-y: auto;
      box-shadow: var(--shadow-lg);
      animation: modalIn 0.2s ease;
    }

    .modal.modal-lg {
      max-width: 900px;
    }

    .modal.modal-xl {
      max-width: 1100px;
    }

    @keyframes modalIn {
      from {
        opacity: 0;
        transform: scale(0.95)
      }

      to {
        opacity: 1;
        transform: scale(1)
      }
    }

    .modal-header {
      padding: 20px 24px 16px;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .modal-title {
      font-size: 1.05rem;
      font-weight: 700;
    }

    .modal-close {
      cursor: pointer;
      color: var(--text-muted);
      font-size: 1.1rem;
      transition: color 0.2s;
      background: none;
      border: none;
    }

    .modal-close:hover {
      color: var(--danger);
    }

    .modal-body {
      padding: 24px;
    }

    .modal-footer {
      padding: 16px 24px;
      border-top: 1px solid var(--border);
      display: flex;
      justify-content: flex-end;
      gap: 10px;
    }

    /* SEARCH BAR */
    .search-bar {
      display: flex;
      align-items: center;
      gap: 8px;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 8px 12px;
      flex: 1;
      max-width: 300px;
    }

    .search-bar input,
.search-bar.search-bar input[type="text"] {
      background: none !important;
      border: none !important;
      outline: none !important;
      box-shadow: none !important;
      font-family: var(--font);
      font-size: 0.88rem;
      color: var(--text);
      width: 100%;
    }

    .search-bar i {
      color: var(--text-light);
      font-size: 0.85rem;
    }

    /* PAGE HEADER */
    .page-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 20px;
      flex-wrap: wrap;
    }

    .page-header-left {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
    }


    .page-actions {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }

    .page-actions .btn {
      min-height: 40px;
      border-radius: 10px;
      padding: 10px 16px;
      box-shadow: none;
    }

    .page-header .btn {
      min-height: 40px;
    }

    .report-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }

    .report-box {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 18px;
      box-shadow: var(--shadow);
    }

    .report-box h4 {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 14px;
      font-size: 1rem;
    }

    .report-row {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      padding: 10px 0;
      border-bottom: 1px solid var(--border);
      font-size: .9rem;
    }

    .report-row.total {
      font-weight: 800;
      color: var(--primary);
    }

    .report-row:last-child {
      border-bottom: none;
    }

    .balance-note {
      margin-top: 16px;
      padding: 14px 16px;
      border: 1px dashed var(--border);
      border-radius: 10px;
      background: var(--surface2);
      font-size: .9rem;
      display: flex;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
    }

    @media (max-width: 900px) {
      .report-grid {
        grid-template-columns: 1fr;
      }

      .bl-grid {
        grid-template-columns: 1fr !important;
      }
    }

    /* EMPTY STATE */
    .empty-state {
      text-align: center;
      padding: 48px 24px;
      color: var(--text-muted);
    }

    .empty-state i {
      font-size: 2.5rem;
      margin-bottom: 12px;
      opacity: 0.4;
      display: block;
    }

    .empty-state p {
      font-size: 0.9rem;
    }

    /* ALERT */
    .alert {
      padding: 12px 16px;
      border-radius: var(--radius-sm);
      font-size: 0.88rem;
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .alert-success {
      background: #ecfdf5;
      color: #059669;
      border: 1px solid #a7f3d0;
    }

    

    /* TOAST */
    #toast-container {
      position: fixed;
      bottom: 24px;
      left: 24px;
      z-index: 9999;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .toast {
      background: var(--text);
      color: var(--surface);
      padding: 12px 18px;
      border-radius: 10px;
      font-size: 0.88rem;
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: 10px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
      animation: toastIn 0.3s ease;
      min-width: 240px;
      max-width: 380px;
    }

    .toast.success {
      background: #059669;
      color: white;
    }

    .toast.error {
      background: #dc2626;
      color: white;
    }

    .toast.warning {
      background: #d97706;
      color: white;
    }

    @keyframes toastIn {
      from {
        opacity: 0;
        transform: translateX(-20px)
      }

      to {
        opacity: 1;
        transform: translateX(0)
      }
    }

    /* INVOICE PRINT */
    .invoice-print {
      font-family: var(--font);
      max-width: 800px;
      margin: 0 auto;
      padding: 40px;
      background: white;
      color: #0f172a;
      direction: rtl;
    }

    .invoice-print .inv-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 32px;
      padding-bottom: 20px;
      border-bottom: 3px solid #187466;
    }

    .invoice-print .company-name {
      font-size: 1.7rem;
      font-weight: 900;
      color: #187466;
      margin-bottom: 6px;
    }

    .invoice-print .inv-meta {
      text-align: left;
      background: #f1f5f9;
      padding: 14px 18px;
      border-radius: 10px;
      min-width: 200px;
    }

    .invoice-print .inv-number {
      font-size: 1.15rem;
      font-weight: 800;
      color: #0f172a;
      margin-bottom: 6px;
    }

    .invoice-print .party-label {
      font-size: 0.72rem;
      font-weight: 700;
      color: #187466;
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-bottom: 8px;
    }

    .invoice-print .party-name {
      font-size: 1.05rem;
      font-weight: 700;
      color: #0f172a;
    }

    .invoice-print table {
      width: 100%;
      border-collapse: collapse;
      margin-bottom: 28px;
      border-radius: 8px;
      overflow: hidden;
    }

    .invoice-print th {
      background: #187466;
      color: white;
      padding: 12px 14px;
      font-size: 0.85rem;
      font-weight: 700;
      text-align: center;
      border: 1px solid #145C52;
    }

    .invoice-print td {
      padding: 11px 14px;
      border: 1px solid #e2e8f0;
      font-size: 0.88rem;
      color: #1e293b;
      text-align: center;
    }

    .invoice-print tbody tr:nth-child(even) td {
      background: #f8fafc;
    }

    .invoice-print .total-row {
      display: flex;
      justify-content: space-between;
      padding: 9px 16px;
      border-bottom: 1px solid #e2e8f0;
      font-size: 0.88rem;
      color: #334155;
    }

    .invoice-print .total-row:last-child {
      border-bottom: none;
    }

    .invoice-print .total-row.grand {
      font-weight: 800;
      font-size: 1.08rem;
      background: #187466;
      color: white;
      padding: 13px 16px;
    }

    .invoice-print .inv-notes {
      margin-top: 24px;
      padding: 14px 18px;
      background: #fefce8;
      border-radius: 8px;
      border-right: 4px solid #f59e0b;
      font-size: 0.85rem;
      color: #78350f;
    }

    /* ===== CUSTOMER STATEMENT MODAL ===== */
    #modal-customer-statement .modal {
      max-width: 860px;
      max-height: 90vh;
      display: flex;
      flex-direction: column;
    }

    #modal-customer-statement .modal-body {
      overflow-y: hidden;
      flex: 1;
      padding: 0;
      display: flex;
      flex-direction: column;
      min-height: 0;
    }

    #stmt-content {
      display: flex;
      flex-direction: column;
      height: 100%;
      min-height: 0;
    }

    /* ===== قفل سكرول الصفحة أثناء فتح مودالات كشف الحساب ===== */
    body.stmt-modal-open {
      overflow: hidden !important;
      /* touch-action: none أُزيل — كان بيمنع السكرول داخل المودال على الموبايل */
    }

    /* ===== إخفاء العناصر المخصصة للأدمن فقط عن أصحاب الواجهة المبسّطة (كانت خاصة بالكاشير) ===== */
    body.simplified-ui .admin-only-col {
      display: none !important;
    }

    /* ===== إخفاء فلاتر "حسب المستخدم" عن أي حساب مقيّد بـ "رؤية سجلاته فقط" (ownRecordsOnly) —
       بغض النظر عن الواجهة المبسّطة (simplifiedUI)، فهذه صلاحية مستقلة تمامًا: قد يكون الحساب
       مقيّدًا بسجلاته فقط دون واجهة مبسّطة، أو العكس ===== */
    body.own-records-only .hide-for-own-records {
      display: none !important;
    }

    /* ===== إخفاء العناصر الحساسة (زي الرصيد الافتتاحي للخزنة) عن غير الأدمن ===== */
    body:not(.is-admin) .manager-hide {
      display: none !important;
    }

    /* ===== إخفاء أزرار/خيارات "تعديل" عن المستخدمين اللي مالهمش صلاحية تعديل ===== */
    body.no-edit-perm .table-actions .btn-outline[onclick*="edit"],
body.no-edit-perm .table-actions button[onclick*="edit"],
body.no-edit-perm .table-actions button[onclick*="openEdit"],
body.no-edit-perm .table-actions button[onclick*="Modal"]:not([onclick*="print"]):not([onclick*="Print"]):not([onclick*="view"]):not([onclick*="View"]):not([onclick*="Details"]):not([onclick*="Statement"]),
body.no-edit-perm td button.btn-outline[onclick*="openEdit"],
body.no-edit-perm td button.btn-outline[onclick*="edit"]:not([onclick*="Statement"]):not([onclick*="View"]):not([onclick*="view"]),
body.no-edit-perm .export-dropdown-option[onclick*="edit"]:not([onclick*="Statement"]):not([onclick*="Details"]),
body.no-edit-perm .export-dropdown-option[onclick*="openEdit"],
body.no-edit-perm .export-dropdown-option[onclick*="openInvoiceModal"],
body.no-edit-perm .export-dropdown-option[onclick*="openPurchaseModal"] {
      display: none !important;
    }

    /* ===== إخفاء أزرار/خيارات "حذف" و"مرتجع" و"استرجاع نسخة احتياطية" عن المستخدمين اللي مالهمش صلاحية حذف ===== */
    body.no-delete-perm .table-actions .btn-danger,
body.no-delete-perm .table-actions button[onclick*="delete"],
body.no-delete-perm .table-actions button[onclick*="Delete"],
body.no-delete-perm td button.btn-danger[onclick*="delete"],
body.no-delete-perm td button.btn-danger[onclick*="Delete"],
body.no-delete-perm .export-dropdown-option[onclick*="delete"],
body.no-delete-perm .export-dropdown-option[onclick*="Delete"],
body.no-delete-perm #restore-backup-input,
body.no-delete-perm button[onclick*="restore-backup-input"] {
      display: none !important;
    }

    /* يظل كارت النسخ الاحتياطي مخفيًا إجباريًا حتى يؤكد النظام أن الباقة غير تجريبية. */
    #account-backup-card[hidden] {
      display: none !important;
    }

    /* ===== رأس كشف الحساب الرسمي (بدون لوجو/اسم الشركة) ===== */
    .stmt-header {
      flex-shrink: 0;
      background: var(--surface);
      color: var(--text);
      padding: 18px 24px;
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 16px 24px;
      align-items: center;
      border-bottom: 2px solid var(--primary);
    }

    .stmt-header .company-info {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .stmt-header .company-info .stmt-doc-title {
      font-size: 1.15rem;
      font-weight: 800;
      color: var(--primary);
      letter-spacing: .3px;
      text-transform: uppercase;
    }

    .stmt-header .company-info .stmt-doc-date {
      font-size: .82rem;
      color: var(--text-muted);
      font-weight: 500;
    }

    .stmt-header .company-info .stmt-doc-date i {
      margin-left: 5px;
      color: var(--text-muted);
    }

    .stmt-header .customer-info {
      text-align: left;
      background: var(--surface2);
      padding: 10px 16px;
      border-radius: 8px;
      border: 1px solid var(--border);
      min-width: 220px;
    }

    .stmt-header .customer-info .stmt-party-label {
      font-size: .7rem;
      color: var(--text-muted);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: .5px;
      margin-bottom: 2px;
    }

    .stmt-header .customer-info h4 {
      font-size: 1.05rem;
      font-weight: 800;
      color: var(--text);
      margin: 0;
      line-height: 1.3;
    }

    .stmt-header .customer-info .stmt-party-meta {
      font-size: .8rem;
      color: var(--text-muted);
      margin-top: 4px;
      font-weight: 500;
      display: flex;
      flex-wrap: wrap;
      gap: 4px 12px;
    }

    .stmt-header .customer-info .stmt-party-meta span {
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }

    .stmt-header .customer-info .stmt-party-meta i {
      font-size: .72rem;
      color: var(--primary);
    }

    

    

    .stmt-table-wrap {
      flex: 1;
      overflow-y: auto;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      min-height: 0;
      background: var(--surface);
    }

    .stmt-table {
      width: 100%;
      border-collapse: collapse;
      min-width: 580px;
    }

    /* هيدر الجدول الرسمي ثابت أثناء السكرول */
    .stmt-table thead {
      position: sticky;
      top: 0;
      z-index: 5;
    }

    .stmt-table thead tr {
      background: linear-gradient(180deg, #1e3a5f 0%, #0f2849 100%);
    }

    .stmt-table th {
      padding: 12px 14px;
      font-size: 0.78rem;
      font-weight: 700;
      color: #ffffff;
      text-align: center;
      border: 1px solid #0a1f3d;
      white-space: nowrap;
      letter-spacing: .3px;
      text-transform: uppercase;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    }

    

    

    .stmt-table td {
      padding: 10px 14px;
      font-size: 0.84rem;
      color: var(--text);
      border: 1px solid var(--border);
      text-align: center;
      font-variant-numeric: tabular-nums;
    }

    /* صفوف متناوبة بألوان رسمية */
    .stmt-table tbody tr:nth-child(even) {
      background: var(--surface2);
    }

    .stmt-table tbody tr:hover {
      background: rgba(24, 116, 102, 0.08);
    }

    

    .stmt-table tbody tr:last-child td {
      border: 1px solid var(--border);
    }

    .stmt-table .td-debit {
      color: var(--danger);
      font-weight: 700;
    }

    .stmt-table .td-credit {
      color: var(--success);
      font-weight: 700;
    }

    .stmt-table .td-balance-pos {
      color: var(--primary);
      font-weight: 700;
    }

    .stmt-table .td-balance-neg {
      color: var(--danger);
      font-weight: 700;
    }

    .stmt-table .td-zero {
      color: var(--text-light);
    }

    /* ===== شريط فلتر التاريخ في كشوف الحساب ===== */
    .stmt-date-filter {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 10px;
      padding: 10px 16px;
      background: var(--surface2);
      border-bottom: 1px solid var(--border);
    }

    .stmt-date-filter .stmt-filter-label {
      font-size: .78rem;
      font-weight: 700;
      color: var(--text-muted);
      display: inline-flex;
      align-items: center;
      gap: 5px;
    }

    .stmt-date-filter .stmt-filter-label i {
      color: var(--primary);
    }

    .stmt-date-filter .stmt-date-group {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .stmt-date-filter .stmt-date-group label {
      font-size: .78rem;
      font-weight: 600;
      color: var(--text-muted);
    }

    .stmt-date-filter input[type="date"] {
      padding: 6px 10px;
      border: 1px solid var(--border);
      border-radius: 6px;
      background: var(--surface);
      color: var(--text);
      font-family: var(--font);
      font-size: .82rem;
      outline: none;
      transition: border-color .15s ease, box-shadow .15s ease;
    }

    .stmt-date-filter input[type="date"]:focus {
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(24, 116, 102, 0.15);
    }

    .stmt-date-filter .stmt-filter-btn {
      padding: 7px 14px;
      border-radius: 6px;
      border: none;
      cursor: pointer;
      font-family: var(--font);
      font-size: .8rem;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      transition: all .15s ease;
    }

    .stmt-date-filter .stmt-filter-btn.apply {
      background: var(--primary);
      color: #fff;
    }

    .stmt-date-filter .stmt-filter-btn.apply:hover {
      background: var(--primary-dark);
    }

    .stmt-date-filter .stmt-filter-btn.reset {
      background: transparent;
      color: var(--text-muted);
      border: 1px solid var(--border);
    }

    .stmt-date-filter .stmt-filter-btn.reset:hover {
      background: var(--surface);
      color: var(--text);
    }

    @media (max-width: 600px) {
      .stmt-date-filter {
        padding: 10px 12px;
        gap: 8px;
      }

      .stmt-date-filter .stmt-date-group {
        flex: 1;
        min-width: 140px;
      }

      .stmt-date-filter input[type="date"] {
        flex: 1;
        min-width: 0;
      }
    }

    @media print {
      .no-print {
        display: none !important;
      }
    }

    /* ===== جدول تسوية جرد المخزن ===== */
    .adj-items-table select,
.adj-items-table input[type="number"] {
      max-width: 100%;
      box-sizing: border-box;
    }

    /* تنعيم سكرولبار جدول التسوية */
    .adj-table-scroll {
      scrollbar-width: thin;
    }

    .adj-table-scroll::-webkit-scrollbar {
      height: 6px;
    }

    .adj-table-scroll::-webkit-scrollbar-thumb {
      background: var(--border);
      border-radius: 3px;
    }

    .adj-table-scroll::-webkit-scrollbar-thumb:hover {
      background: var(--text-muted);
    }

    .stmt-type-badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 3px 9px;
      border-radius: 20px;
      font-size: 0.72rem;
      font-weight: 700;
      white-space: nowrap;
    }

    .stmt-type-opening {
      background: var(--primary-light);
      color: var(--primary);
    }

    .stmt-type-invoice {
      background: #EAF4F1;
      color: #145C52;
    }

    .stmt-type-receipt {
      background: #ecfdf5;
      color: #059669;
    }

    

    

    @media (max-width: 600px) {
      .stmt-header {
        grid-template-columns: 1fr;
        padding: 14px 16px;
        gap: 12px;
      }

      .stmt-header .customer-info {
        text-align: right;
        min-width: 0;
      }

      .stmt-header .company-info .stmt-doc-title {
        font-size: 1rem;
      }

      .stmt-header .customer-info h4 {
        font-size: .95rem;
      }
    }

    /* ===== END CUSTOMER STATEMENT MODAL ===== */

    /* ===== DATE FILTER BAR ===== */
    .date-filter-bar {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 10px 14px;
      margin-bottom: 14px;
    }

    .date-filter-bar label {
      font-size: 0.8rem;
      font-weight: 600;
      color: var(--text-muted);
      white-space: nowrap;
    }

    .date-filter-bar input[type="date"],
.date-filter-bar input[type="text"],
.date-filter-bar select {
      padding: 6px 10px;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      background: var(--surface);
      color: var(--text);
      font-family: var(--font);
      font-size: 0.83rem;
      outline: none;
      transition: border-color 0.2s;
      height: 34px;
    }

    .date-filter-bar input[type="date"]:focus,
.date-filter-bar input[type="text"]:focus,
.date-filter-bar select:focus {
      border-color: var(--primary);
    }

    .date-filter-bar .btn-filter-reset {
      padding: 5px 12px;
      border-radius: var(--radius-sm);
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--text-muted);
      font-family: var(--font);
      font-size: 0.8rem;
      cursor: pointer;
      transition: all 0.2s;
      white-space: nowrap;
      height: 34px;
    }

    .date-filter-bar .btn-filter-reset:hover {
      background: var(--danger);
      color: white;
      border-color: var(--danger);
    }

    .date-filter-bar .filter-result {
      margin-right: auto;
      font-size: 0.78rem;
      color: var(--primary);
      font-weight: 600;
    }

    @media (max-width: 600px) {
      .date-filter-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
      }

      .date-filter-bar input[type="date"],
.date-filter-bar input[type="text"],
.date-filter-bar select,
.date-filter-bar .btn-filter-reset {
        width: 100%;
      }

      .date-filter-bar .filter-result {
        margin-right: 0;
      }

      /* حقل الباركود وزرار الكاميرا يفضلوا فى نفس الصف على الموبايل، والزرار يفضل صغير */
      .date-filter-bar .doc-barcode-row {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
      }

      .date-filter-bar .doc-barcode-row .search-bar-inline {
        flex: 1;
        min-width: 0 !important;
      }

      .date-filter-bar .doc-barcode-row .mobile-camera-btn {
        flex-shrink: 0;
        width: 38px;
        height: 38px;
        padding: 0 !important;
        justify-content: center;
      }
    }

    /* ===== END DATE FILTER BAR ===== */

    /* ======================================================
       طباعة حرارية فقط — أبيض/أسود، بدون معاينة
    ====================================================== */
    @page {
      margin: 0 !important;
      padding: 0 !important;
      size: auto;
    }

    @page :first {
      margin: 0 !important;
    }

    @media print {

      /* ===== طباعة حرارية مباشرة — أخفِ كل شيء ما عدا الإيصال ===== */
      body>*:not(#print-zone) {
        display: none !important;
      }

      html,
body {
        background: white !important;
        background-color: white !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        height: auto !important;
      }

      #print-zone {
        display: block !important;
        position: static !important;
        background: white !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        overflow: visible !important;
      }

      * {
        -webkit-print-color-adjust: economy !important;
        print-color-adjust: economy !important;
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;
        color: #000 !important;
        border-color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
      }

      /* الإيصال الحراري */
      .thermal-receipt {
        background: white !important;
        background-color: white !important;
        color: #000 !important;
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
        page-break-inside: auto !important;
        break-inside: auto !important;
        padding: 3mm 2mm 0mm !important;
        margin: 0 auto !important;
        font-size: 10.5px !important;
        font-weight: 700 !important;
        line-height: 1.5 !important;
        display: block !important;
        box-shadow: none !important;
        border-radius: 0 !important;
      }

      .thermal-receipt.size-58 {
        width: 58mm !important;
        max-width: 58mm !important;
        font-size: 9px !important;
      }

      /* فواصل الصفحة */
      .th-item-row,
.th-totals-section {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
      }

      /* خطوط الفواصل */
      .th-divider-thick {
        border: none !important;
        border-top: 2px solid #000 !important;
        margin: 4px 0 !important;
      }

      .th-divider-dash {
        border: none !important;
        border-top: 1px dashed #000 !important;
        margin: 3px 0 !important;
      }

      .th-divider-thin {
        border: none !important;
        border-top: 1px solid #000 !important;
        margin: 2px 0 !important;
      }

      /* نصوص الإجمالي */
      .th-totals-row.th-grand {
        font-size: 12px !important;
        font-weight: 900 !important;
        color: #000 !important;
      }

      .th-totals-row.th-paid,
.th-totals-row.th-change,
.th-totals-row.th-due,
.th-totals-row.th-prev {
        color: #000 !important;
        background: transparent !important;
      }

      .th-store-name {
        font-size: 13px !important;
        color: #000 !important;
        background: transparent !important;
      }

      .th-logo {
        display: block !important;
        max-width: 60px !important;
        max-height: 60px !important;
        margin: 0 auto 4px !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
      }

      .th-store-sub,
.th-branch-name,
.th-datetime,
.th-extra-copy-badge {
        color: #000 !important;
        background: transparent !important;
      }
    }

    /* رأس المودال للمرتجع */
    .return-modal-header {
      background: linear-gradient(135deg, #7f1d1d 0%, #dc2626 100%);
      padding: 18px 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-radius: 16px 16px 0 0;
    }

    .return-modal-header.purchase-return {
      background: linear-gradient(135deg, #14532d 0%, #16a34a 100%);
    }

    .return-modal-header .modal-title {
      color: white;
      font-size: 1rem;
      font-weight: 800;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .return-modal-header .modal-close {
      color: rgba(255, 255, 255, 0.7);
    }

    .return-modal-header .modal-close:hover {
      color: white;
    }

    /* جدول بنود المرتجع في المودال */
    .return-items-table {
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      margin-bottom: 16px;
    }

    .return-items-table table {
      min-width: 650px;
    }

    .return-items-table thead th {
      background: #fef2f2;
      color: #991b1b;
      font-size: 0.78rem;
      font-weight: 700;
      padding: 10px 12px;
    }

    .return-items-table.purchase-return thead th {
      background: #f0fdf4;
      color: #166534;
    }

    

    

    .return-items-table tbody td {
      padding: 10px 12px;
      font-size: 0.84rem;
      vertical-align: middle;
    }

    .return-qty-input,
.sr-price,
.pr-cost {
      width: 80px;
      padding: 6px 8px;
      border: 1px solid var(--border);
      border-radius: 6px;
      font-family: var(--font);
      font-size: 0.84rem;
      text-align: center;
      color: var(--text);
      background: var(--surface);
      transition: border-color 0.2s;
    }

    .sr-product-select,
.pr-product-select {
      padding: 6px 8px;
      border: 1px solid var(--border);
      border-radius: 6px;
      font-family: var(--font);
      font-size: 0.84rem;
      color: var(--text);
      background: var(--surface);
      transition: border-color 0.2s;
    }

    .return-qty-input:focus,
.sr-price:focus,
.sr-product-select:focus,
.pr-cost:focus,
.pr-product-select:focus {
      border-color: var(--primary);
      outline: none;
    }

    .sr-product-select option,
.pr-product-select option {
      color: #000;
      background: #fff;
    }

    /* حذف أسهم الزيادة/النقصان من كل حقول الأرقام في النظام بالكامل، بدون استثناء */
    input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

    input[type="number"] {
      -moz-appearance: textfield;
    }

    .return-qty-input:focus {
      border-color: #dc2626;
      outline: none;
      box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
    }

    .return-qty-input.purchase-input:focus {
      border-color: #16a34a;
      box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.1);
    }

    .return-qty-max {
      font-size: 0.72rem;
      color: var(--text-muted);
      margin-top: 2px;
    }

    .return-qty-max.exceeded {
      color: var(--danger);
      font-weight: 700;
    }

    /* ملخص المرتجع */
    .return-summary-box {
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 14px 16px;
      margin-bottom: 16px;
    }

    .return-summary-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 5px 0;
      font-size: 0.88rem;
      border-bottom: 1px solid var(--border);
    }

    .return-summary-row:last-child {
      border-bottom: none;
      padding-bottom: 0;
    }

    .return-summary-row.grand {
      font-size: 1.05rem;
      font-weight: 800;
      padding-top: 10px;
      margin-top: 4px;
    }

    .return-summary-row.grand span:last-child {
      color: var(--danger);
    }

    .return-summary-row.grand.purchase-grand span:last-child {
      color: var(--success);
    }

    /* إشعار المرتجع للطباعة */
    .return-notice-print {
      font-family: 'Tajawal', sans-serif;
      direction: rtl;
      max-width: 210mm;
      margin: 0 auto;
      padding: 24px 32px;
      background: white;
      color: #000;
    }

    .return-notice-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 20px;
      padding-bottom: 16px;
      border-bottom: 2px solid #000;
    }

    .return-notice-title {
      font-size: 1.6rem;
      font-weight: 900;
      color: #dc2626;
    }

    .return-notice-title.purchase-return {
      color: #16a34a;
    }

    .return-notice-meta {
      text-align: left;
      font-size: 0.9rem;
    }

    .return-notice-parties {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin-bottom: 16px;
      padding: 14px;
      background: #f8f9fa;
      border-radius: 8px;
    }

    .return-notice-party-label {
      font-size: 0.75rem;
      color: #64748b;
      font-weight: 600;
      text-transform: uppercase;
      margin-bottom: 4px;
    }

    .return-notice-party-name {
      font-size: 1rem;
      font-weight: 700;
    }

    /* درجات أغمق من اللون الأساسي */
    

    

    /* استجابة الجوال */
    @media (max-width: 600px) {
      .return-modal-header {
        padding: 14px 16px;
      }

      .return-qty-input {
        width: 65px;
      }

      .return-notice-parties {
        grid-template-columns: 1fr;
      }
    }

    /* ===== تحسينات إضافية - نسخة محسّنة ===== */

    /* تحسين Scrollbar للمودال */
    .modal::-webkit-scrollbar {
      width: 6px;
    }

    .modal::-webkit-scrollbar-track {
      background: var(--surface2);
    }

    .modal::-webkit-scrollbar-thumb {
      background: var(--border);
      border-radius: 3px;
    }

    .modal::-webkit-scrollbar-thumb:hover {
      background: var(--primary);
    }

    /* تحسين Empty State */
    .empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 48px 24px;
      color: var(--text-light);
      gap: 12px;
    }

    .empty-state i {
      font-size: 2.5rem;
      opacity: 0.4;
    }

    .empty-state p {
      font-size: 0.9rem;
      font-weight: 500;
      color: var(--text-muted);
      margin: 0;
    }

    /* تحسين Toasts */
    .toast-container {
      z-index: 9999 !important;
    }

    /* تحسين بطاقات الإحصاء للموبايل */
    @media (max-width: 480px) {
      .stat-value {
        font-size: 0.85rem !important;
      }
    }

    /* إضافة تأثير لامع على بطاقات الداشبورد */
    .stat-card::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      border-radius: var(--radius) var(--radius) 0 0;
      opacity: 0;
      transition: opacity 0.2s;
    }

    .stat-card:hover::after {
      opacity: 1;
    }

    .stat-card {
      position: relative;
    }

    /* ===== تحسين مظهر صفحة الفواتير ===== */
    .table-actions {
      display: flex;
      gap: 4px;
      justify-content: center;
      flex-wrap: nowrap;
    }

    /* تحسين التباعد في الفورم */
    .field label {
      display: flex;
      align-items: center;
      gap: 5px;
    }

    /* Badge محسّن */
    .badge {
      letter-spacing: 0.2px;
    }

    /* تأثير Hover على صفوف الجداول */
    tbody tr {
      transition: background 0.15s;
    }

    /* ===== PWA Splash Screen ===== */
    #pwa-splash {
      position: fixed;
      inset: 0;
      background:
        radial-gradient(circle at 82% 18%, rgba(64,156,208,.22) 0, transparent 34%),
        radial-gradient(circle at 14% 84%, rgba(33,173,143,.16) 0, transparent 32%),
        linear-gradient(145deg, #162927 0%, #203B3A 48%, #28514B 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 99999;
      transition: opacity 0.5s ease;
    }

    #pwa-splash.hidden {
      opacity: 0;
      pointer-events: none;
    }

    #pwa-splash .splash-logo {
      text-align: center;
      color: white;
    }

    #pwa-splash .splash-icon {
      width: 80px;
      height: 80px;
      background: linear-gradient(135deg, #2f7fb0, #18a47e);
      border-radius: 22px;
      display: block;
      object-fit: cover;
      align-items: center;
      justify-content: center;
      font-size: 2.2rem;
      margin: 0 auto 16px;
      box-shadow: 0 8px 32px rgba(24, 116, 102, 0.5);
      animation: splashPulse 1.5s ease-in-out infinite;
    }

    @keyframes splashPulse {

      0%,
      100% {
        transform: scale(1);
      }

      50% {
        transform: scale(1.05);
      }
    }

    #pwa-splash h2 {
      font-size: 1.4rem;
      font-weight: 800;
      margin-bottom: 6px;
      letter-spacing: .12em;
      direction: ltr;
    }

    #pwa-splash p {
      font-size: 0.85rem;
      opacity: 0.6;
      margin-bottom: 24px;
    }

    #pwa-splash .splash-bar {
      width: 180px;
      height: 4px;
      background: rgba(255, 255, 255, 0.15);
      border-radius: 2px;
      overflow: hidden;
      margin: 0 auto;
    }

    #pwa-splash .splash-bar-fill {
      height: 100%;
      background: linear-gradient(90deg, #54a9d8, #36c59e);
      border-radius: 2px;
      animation: splashLoad 2s ease forwards;
    }

    /* ===== رسالة تثبيت التطبيق بعد تسجيل الدخول ===== */
    .pwa-install-prompt {position:fixed;inset:0;z-index:100000;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(15,23,42,.58);backdrop-filter:blur(5px)}
    .pwa-install-prompt.open {display:flex}.pwa-install-card {width:min(430px,100%);background:var(--surface,#fff);color:var(--text,#172033);border:1px solid var(--border,#e2e8f0);border-radius:20px;padding:24px;box-shadow:0 24px 70px rgba(15,23,42,.32);text-align:center;animation:pwaInstallIn .22s ease-out}
    @keyframes pwaInstallIn{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
    .pwa-install-icon {width:72px;height:72px;margin:0 auto 14px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(135deg,var(--primary,#187466),#0f766e);color:#fff;font-size:2rem;box-shadow:0 10px 24px rgba(24,116,102,.24)}
    .pwa-install-card h3 {margin:0 0 8px;font-size:1.2rem}.pwa-install-card p {margin:0;color:var(--text-muted,#64748b);font-size:.88rem;line-height:1.75}.pwa-install-benefits {display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:17px 0}.pwa-install-benefit {padding:10px 5px;border-radius:10px;background:var(--surface2,#f8fafc);font-size:.72rem;font-weight:700}.pwa-install-benefit i {display:block;color:var(--primary,#187466);font-size:1rem;margin-bottom:5px}.pwa-install-ios-help {display:none;margin-top:14px;padding:11px;border-radius:10px;background:var(--surface2,#f8fafc);font-size:.8rem;line-height:1.7}.pwa-install-actions {display:flex;gap:9px;margin-top:18px}.pwa-install-actions .btn {flex:1;justify-content:center}@media(max-width:420px){.pwa-install-card {padding:20px 16px}.pwa-install-benefits {gap:5px}.pwa-install-benefit {font-size:.65rem}.pwa-install-actions {flex-direction:column}}

    @keyframes splashLoad {
      from {
        width: 0;
      }

      to {
        width: 100%;
      }
    }


    /* ===== تحسينات الشاشات الصغيرة جداً (أقل من 360px) ===== */
    @media (max-width: 360px) {
      .topbar {
        padding: 0 10px;
        height: 56px;
      }

      .topbar-title {
        font-size: 0.9rem;
      }

      .content {
        padding: 10px 8px;
      }

      .btn {
        padding: 7px 12px;
        font-size: 0.82rem;
      }
    }

    /* ===== تحسين الأزرار عند الطباعة ===== */
    @media print {

      .btn,
button,
input[type="button"],
input[type="submit"] {
        display: none !important;
      }
    }

    /* PROGRESS */
    .progress-bar {
      height: 6px;
      background: var(--border);
      border-radius: 3px;
      overflow: hidden;
    }

    .progress-fill {
      height: 100%;
      border-radius: 3px;
      transition: width 0.4s;
    }

    /* RESPONSIVE */
    @media (max-width: 900px) {
      .sidebar {
        transform: translateX(215px);
        width: 215px !important;
      }

      .sidebar.open {
        transform: translateX(0);
      }

      .main {
        margin-right: 0 !important;
        overflow-x: hidden;
      }

      .content {
        overflow-x: hidden;
      }

      /* Hide tooltip on mobile */
      .sidebar.collapsed .nav-item[data-label]::before,
.sidebar.collapsed .nav-item[data-label]::after {
        display: none;
      }
    }

    @media (max-width: 600px) {
      .content {
        padding: 12px;
      }

      .form-row.cols-2,
.form-row.cols-3,
.form-row.cols-4 {
        grid-template-columns: 1fr;
      }

      .form-row.activity-action-row {
        grid-template-columns: 1fr 1fr !important;
      }

      .stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-bottom: 16px;
      }

      .stat-card {
        padding: 12px 10px;
        gap: 10px;
        border-radius: 10px;
        min-width: 0;
        overflow: hidden;
      }

      .stat-icon {
        width: 40px;
        height: 40px;
        font-size: 1rem;
        flex-shrink: 0;
        border-radius: 10px;
      }

      .stat-value {
        font-size: 0.95rem;
      }

      .stat-label {
        font-size: 0.7rem;
        line-height: 1.3;
      }

      .topbar {
        padding: 0 14px;
      }

      .page-header {
        flex-direction: column;
        align-items: stretch;
      }

      .page-header-left {
        flex-direction: column;
      }

      .search-bar {
        max-width: 100%;
      }

      .modal.modal-lg,
.modal.modal-xl {
        max-width: 100%;
      }

      .page-actions {
        width: 100%;
        display: flex;
        flex-direction: column;
      }

      .page-actions .btn {
        width: 100%;
        justify-content: center;
      }

      .field input:not([type="checkbox"]):not([type="radio"]),
.field select,
.field textarea {
        min-height: 44px;
      }

      .inline-field {
        flex-direction: column !important;
        align-items: stretch !important;
      }

      .quick-add-btn {
        width: 100%;
        justify-content: center;
      }

      #page-purchases .stats-grid,
#page-expenses .stats-grid,
#page-invoicesCenter .stats-grid {
        grid-template-columns: 1fr 1fr !important;
      }
    }

    @media (max-width: 400px) {
      .stats-grid {
        grid-template-columns: 1fr 1fr;
      }

      #page-dashboard .stats-grid {
        grid-template-columns: 1fr 1fr !important;
      }

      #page-dashboard .stat-card {
        padding: 10px 8px;
        gap: 8px;
        min-width: 0;
        overflow: hidden;
      }

      #page-dashboard .stat-icon {
        width: 36px;
        height: 36px;
        font-size: 0.95rem;
        flex-shrink: 0;
        border-radius: 9px;
      }

      #page-dashboard .stat-value {
        font-size: 0.85rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
      }

      #page-dashboard .stat-label {
        font-size: 0.65rem;
        line-height: 1.2;
        word-break: break-word;
        white-space: normal;
      }

      #page-purchases .stats-grid,
#page-expenses .stats-grid,
#page-invoicesCenter .stats-grid {
        grid-template-columns: 1fr !important;
      }
    }

    /* OVERLAY */
    #sidebar-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.5);
      z-index: 2147483646;
    }

    #sidebar-overlay.open {
      display: block;
    }

    /* Account Page */
    .profile-header {
      background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%);
      border-radius: var(--radius);
      padding: 32px;
      color: white;
      display: flex;
      align-items: center;
      gap: 24px;
      margin-bottom: 24px;
    }

    .profile-avatar {
      width: 80px;
      height: 80px;
      background: linear-gradient(135deg, #187466, #1AA37A);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2rem;
      font-weight: 800;
      flex-shrink: 0;
    }

    .profile-info h2 {
      font-size: 1.4rem;
      font-weight: 800;
    }

    .profile-info p {
      color: rgba(255, 255, 255, 0.6);
      font-size: 0.9rem;
      margin-top: 4px;
    }

    /* Loading Spinner */
    .spinner {
      width: 20px;
      height: 20px;
      border: 2px solid rgba(255, 255, 255, 0.3);
      border-top-color: white;
      border-radius: 50%;
      animation: spin 0.7s linear infinite;
      display: inline-block;
    }

    @keyframes spin {
      to {
        transform: rotate(360deg)
      }
    }

    /* Invoice Items Table */
    .inv-items-table {
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      overflow: hidden;
    }

    .inv-items-table table {
      margin: 0;
    }

    .inv-items-table th {
      background: var(--surface3);
      color: #1e3a5f;
    }

    

    .inv-items-table {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }

    .inv-items-table table {
      min-width: 760px;
    }

    #purchase-items-body {
      white-space: nowrap;
    }

    /* ★ عمود تاريخ الصلاحية فى فاتورة الشراء: مخفي افتراضيًا، بيظهر بس لو الإعداد مفعّل
       (عن طريق إضافة كلاس pur-expiry-enabled على الحاوية من الجافاسكريبت) */
    #pur-items-table-wrap .pur-expiry-col,
#pur-items-table-wrap td.pur-expiry-cell {
      display: none;
    }

    #pur-items-table-wrap.pur-expiry-enabled .pur-expiry-col,
#pur-items-table-wrap.pur-expiry-enabled td.pur-expiry-cell {
      display: table-cell;
    }

    #invoice-items-body {
      white-space: nowrap;
    }

    #page-customers .table-wrap {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }

    #page-customers table {
      min-width: 860px;
    }

    .checkbox-wrap {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 10px;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 10px;
    }

    body.sidebar-open {
      overflow: hidden;
      touch-action: none;
    }

    @media (max-width: 700px) {
      #page-revenues .stats-grid {
        grid-template-columns: 1fr 1fr !important;
      }

      #page-revenues .page-header>span {
        width: 100%;
      }
    }

    @media (max-width: 480px) {
      #page-revenues .stats-grid {
        grid-template-columns: 1fr !important;
      }
    }

    /* Color dot */
    .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      display: inline-block;
    }

    .dot-green {
      background: #10b981;
    }

    .dot-red {
      background: #ef4444;
    }

    .dot-yellow {
      background: #f59e0b;
    }

    /* ===== ENHANCEMENTS ===== */
    .table-actions {
      display: flex;
      gap: 6px;
      flex-wrap: wrap
    }

    .inline-field {
      display: flex;
      gap: 8px;
      align-items: end
    }

    .inline-field .field {
      flex: 1
    }

    .quick-add-btn {
      min-width: 42px;
      height: 42px;
      padding: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center
    }

    .report-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px
    }

    .report-box {
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 16px
    }

    .report-box h4 {
      font-size: .92rem;
      margin-bottom: 10px
    }

    .report-row {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      padding: 8px 0;
      border-bottom: 1px solid var(--border);
      font-size: .88rem
    }

    .report-row.total {
      font-weight: 800;
      font-size: .96rem
    }

    @media (max-width: 900px) {
      .report-grid {
        grid-template-columns: 1fr
      }
    }

    /* ===== TARGETED MOBILE TUNING ===== */
    #page-customers .table-actions {
      justify-content: flex-end;
    }

    #page-customers tbody td strong {
      display: inline-block;
      max-width: 100%;
      word-break: break-word;
    }

    #page-customers .card,
#page-treasury .card,
#page-profits .card {
      overflow: hidden;
    }

    /* ===== جدول ملخص قائمة الدخل الاحترافي ===== */
    .profit-summary-table-wrap {
      margin-top: 0;
      border-radius: var(--radius);
      border: 1px solid var(--border);
      overflow: hidden;
      background: var(--surface);
      box-shadow: var(--shadow);
      width: 100%;
    }

    .profit-summary-scroll {
      width: 100%;
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
    }

    .profit-summary-scroll::-webkit-scrollbar {
      height: 8px;
    }

    .profit-summary-scroll::-webkit-scrollbar-thumb {
      background: var(--border);
      border-radius: 999px;
    }

    .profit-summary-tbl {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.88rem;
      direction: rtl;
    }

    .profit-summary-tbl thead tr {
      background: var(--primary);
      color: #ffffff !important;
    }

    .profit-summary-tbl thead th {
      padding: 11px 14px;
      font-weight: 800;
      font-size: 0.83rem;
      text-align: center;
      white-space: nowrap;
      color: #ffffff !important;
    }

    .profit-summary-tbl thead th.pst-col-icon {
      width: 34px;
      padding: 11px 8px;
    }

    .profit-summary-tbl tbody tr {
      border-bottom: 1px solid var(--border);
      transition: background 0.15s;
    }

    .profit-summary-tbl tbody tr:hover {
      background: var(--surface2);
    }

    .profit-summary-tbl tbody td {
      padding: 10px 14px;
      color: var(--text);
      vertical-align: middle;
    }

    .pst-icon-cell {
      width: 34px;
      padding: 10px 8px !important;
      text-align: center;
    }

    .pst-dot {
      display: inline-block;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      flex-shrink: 0;
    }

    .pst-val {
      font-weight: 600;
      white-space: nowrap;
    }

    .pst-val.positive {
      color: #059669;
    }

    .pst-val.negative {
      color: #dc2626;
    }

    .pst-detail {
      color: var(--text-muted);
      font-size: 0.81rem;
      white-space: nowrap;
    }

    .pst-pct {
      font-weight: 600;
      font-size: 0.85rem;
      white-space: nowrap;
      text-align: left;
      direction: ltr;
    }

    .pst-pct.pct-positive {
      color: #059669;
    }

    .pst-pct.pct-negative {
      color: #dc2626;
    }

    .profit-summary-tbl tbody tr.pst-section-header {
      background: linear-gradient(90deg, var(--primary-light) 0%, transparent 100%);
      border-bottom: none;
    }

    .profit-summary-tbl tbody tr.pst-section-header td {
      padding: 8px 14px;
      font-weight: 700;
      font-size: 0.82rem;
      color: var(--primary);
      letter-spacing: 0.02em;
    }

    .profit-summary-tbl tbody tr.pst-section-header td i {
      margin-left: 6px;
    }

    .profit-summary-tbl tbody tr.pst-subtotal {
      background: var(--surface2);
    }

    .profit-summary-tbl tbody tr.pst-subtotal td {
      font-weight: 600;
    }

    .profit-summary-tbl tbody tr.pst-total-row {
      background: rgba(24, 116, 102, 0.05);
      border-top: 2px solid var(--primary);
    }

    .profit-summary-tbl tbody tr.pst-total-row td {
      font-size: 0.93rem;
    }

    .profit-summary-tbl tbody tr.pst-net-row {
      background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(24, 116, 102, 0.05) 100%);
      border-top: 2px solid #10b981;
    }

    .profit-summary-tbl tbody tr.pst-net-row td {
      padding: 14px;
    }

    @media (max-width: 700px) {
      .profit-summary-table-wrap {
        margin-top: 0;
      }

      .profit-summary-tbl {
        min-width: 720px;
        font-size: 0.82rem;
      }

      .profit-summary-tbl tbody td {
        padding: 9px 10px;
      }
    }

    @media (max-width: 700px) {

      #page-customers .table-wrap,
#page-treasury .table-wrap {
        overflow-x: visible;
      }

      #page-treasury .stats-grid,
#page-profits .stats-grid {
        grid-template-columns: 1fr 1fr !important;
      }

      #page-customers .page-actions {
        width: 100%;
      }

      #page-customers .page-actions .btn {
        width: 100%;
        justify-content: center;
      }

      #page-customers .search-bar {
        width: 100%;
        max-width: 100%;
      }

      #page-customers .table-actions {
        width: 100%;
        justify-content: flex-start;
      }

      #page-customers .table-actions .btn {
        min-width: 36px;
      }

      #page-customers tbody td {
        align-items: flex-start;
      }

      #page-customers tbody td::before {
        min-width: 96px;
        flex-shrink: 0;
      }

      #page-profits .card-body {
        padding: 16px;
      }
    }

    @media (max-width: 480px) {

      #page-treasury .stats-grid,
#page-profits .stats-grid {
        grid-template-columns: 1fr !important;
      }
    }

    /* ===== ERP TABLE MODE (GLOBAL) ===== */
    @media (max-width: 700px) {
      .table-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
      }

      .table-wrap table,
.inv-items-table table {
        width: max-content;
        min-width: 100%;
      }

      .table-wrap th,
.table-wrap td,
.inv-items-table th,
.inv-items-table td {
        white-space: nowrap;
        padding: 10px 12px;
        font-size: 0.82rem;
      }

      .table-actions {
        flex-wrap: nowrap;
        gap: 6px;
      }

      .table-actions .btn {
        white-space: nowrap;
      }

      .page-actions {
        width: 100%;
      }

      .page-actions .btn {
        width: 100%;
        justify-content: center;
      }

      .search-bar {
        width: 100%;
        max-width: 100%;
      }

      #page-customers table {
        min-width: 860px !important;
      }

      #page-invoices table {
        min-width: 920px !important;
      }

      #page-products table {
        min-width: 1080px !important;
      }

      #page-treasury table {
        min-width: 860px !important;
      }

      #page-receipts table {
        min-width: 860px !important;
      }

      #page-payments table {
        min-width: 860px !important;
      }

      #page-expenses table {
        min-width: 860px !important;
      }

      #page-revenues table {
        min-width: 860px !important;
      }

      #page-invoicesCenter table {
        min-width: 920px !important;
      }

      #page-treasury .stats-grid,
#page-profits .stats-grid,
#page-revenues .stats-grid,
#page-expenses .stats-grid,
#page-invoicesCenter .stats-grid {
        grid-template-columns: 1fr 1fr !important;
      }
    }

    @media (max-width: 480px) {

      #page-treasury .stats-grid,
#page-profits .stats-grid,
#page-revenues .stats-grid,
#page-expenses .stats-grid,
#page-invoicesCenter .stats-grid {
        grid-template-columns: 1fr !important;
      }

      .table-wrap th,
.table-wrap td,
.inv-items-table th,
.inv-items-table td {
        padding: 9px 10px;
        font-size: 0.8rem;
      }
    }


    /* ===== APP LOADER ===== */
    #app-loader {
      position: fixed;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 50%, #0f172a 100%);
      z-index: 5000;
    }

    #app-loader.hidden {
      display: none;
    }

    .loader-card {
      width: min(420px, 92vw);
      padding: 34px 28px;
      border-radius: 24px;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.12);
      backdrop-filter: blur(18px);
      box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
      text-align: center;
      color: white;
    }

    .loader-card .icon {
      width: 72px;
      height: 72px;
      margin: 0 auto 16px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 22px;
      background: linear-gradient(135deg, #187466, #1AA37A);
      box-shadow: 0 12px 30px rgba(24, 116, 102, 0.35);
      font-size: 30px;
    }

    .loader-card h2 {
      font-size: 1.25rem;
      margin-bottom: 8px;
    }

    .loader-card p {
      color: rgba(255, 255, 255, 0.72);
      font-size: .92rem;
    }

    .loader-bar {
      margin-top: 18px;
      height: 8px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.12);
      overflow: hidden;
    }

    .loader-bar span {
      display: block;
      height: 100%;
      width: 35%;
      border-radius: inherit;
      background: linear-gradient(90deg, #5BAF9F, #5BAF9F);
      animation: loaderMove 1.1s ease-in-out infinite;
    }

    @keyframes loaderMove {
      0% {
        transform: translateX(170%);
      }

      100% {
        transform: translateX(-220%);
      }
    }

    .sidebar-title {
      display: flex;
      align-items: center;
      min-width: 0;
    }

    .sidebar-title #sb-company {
      display: block;
      font-size: 1rem;
      color: #1e293b;
      font-weight: 800;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    #page-account .account-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }

    #page-account .profile-header {
      min-height: 140px;
      flex-wrap: wrap;
    }

    /* جداول بيانات المستخدم والشركة في صفحة حسابي */
    #page-account .card-body table {
      min-width: unset;
      width: 100%;
    }

    #account-subscription-card .subscription-overview {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 16px;
      border: 1px solid var(--border);
      border-radius: 12px;
      background: var(--surface2);
    }

    #account-subscription-card .subscription-icon {
      width: 48px;
      height: 48px;
      border-radius: 14px;
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      color: var(--primary);
      background: color-mix(in srgb, var(--primary) 12%, transparent);
      font-size: 1.1rem;
    }

    #account-subscription-card .subscription-plan-name {
      font-size: 1rem;
      font-weight: 800;
      color: var(--text);
    }

    #account-subscription-card .subscription-plan-note {
      margin-top: 4px;
      color: var(--text-muted);
      font-size: .75rem;
      line-height: 1.6;
    }

    #account-subscription-card .subscription-status {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      margin-inline-start: auto;
      padding: 5px 10px;
      border-radius: 999px;
      font-size: .68rem;
      font-weight: 800;
      white-space: nowrap;
    }

    #account-subscription-card .subscription-status.active { background: rgba(16,185,129,.13); color: #047857; }
    #account-subscription-card .subscription-status.warning { background: rgba(245,158,11,.14); color: #b45309; }
    #account-subscription-card .subscription-status.expired { background: rgba(239,68,68,.13); color: #b91c1c; }
    #account-subscription-card .subscription-status.suspended { background: rgba(100,116,139,.14); color: #475569; }

    #account-subscription-card .subscription-details {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
      margin-top: 13px;
    }

    #account-subscription-card .subscription-detail {
      padding: 13px;
      border: 1px solid var(--border);
      border-radius: 11px;
      background: var(--surface);
      min-width: 0;
    }

    #account-subscription-card .subscription-detail small {
      display: block;
      color: var(--text-muted);
      font-size: .67rem;
      margin-bottom: 6px;
    }

    #account-subscription-card .subscription-detail strong {
      display: block;
      color: var(--text);
      font-size: .82rem;
      overflow-wrap: anywhere;
    }

    #account-subscription-card .subscription-renewal {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      margin-top: 14px;
      padding: 15px;
      border-radius: 12px;
      background: color-mix(in srgb, var(--primary) 7%, var(--surface));
      border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--border));
    }

    #account-subscription-card .subscription-renewal-copy strong { display: block; font-size: .82rem; }
    #account-subscription-card .subscription-renewal-copy p { margin: 5px 0 0; color: var(--text-muted); font-size: .7rem; line-height: 1.7; }
    #account-subscription-card .subscription-actions { display: flex; gap: 8px; flex-wrap: wrap; flex: 0 0 auto; }

    @media (max-width: 850px) {
      #account-subscription-card .subscription-details { grid-template-columns: 1fr 1fr; }
      #account-subscription-card .subscription-renewal { align-items: stretch; flex-direction: column; }
      #account-subscription-card .subscription-actions { width: 100%; }
      #account-subscription-card .subscription-actions .btn { flex: 1; }
    }

    @media (max-width: 520px) {
      #account-subscription-card .subscription-overview { align-items: flex-start; flex-wrap: wrap; }
      #account-subscription-card .subscription-status { margin-inline-start: 0; }
      #account-subscription-card .subscription-details { grid-template-columns: 1fr; }
      #account-subscription-card .subscription-actions { flex-direction: column; }
    }

    #page-account .card-body table td {
      word-break: break-word;
    }

    .category-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 5px 13px;
      border-radius: 999px;
      background: var(--surface2);
      color: var(--text-muted);
      font-size: .78rem;
      font-weight: 600;
      border: 1px solid var(--border);
      cursor: pointer;
      transition: all .18s;
    }

    .category-pill:hover {
      background: var(--primary-light);
      color: var(--primary);
      border-color: var(--primary);
    }

    .category-pill.active {
      background: var(--primary);
      color: #fff;
      border-color: var(--primary);
    }

    .pos-page-btn {
      min-width: 32px;
      height: 32px;
      padding: 0 8px;
      border-radius: 8px;
      border: 1px solid var(--border);
      background: var(--surface2);
      color: var(--text);
      font-family: var(--font);
      font-size: .82rem;
      font-weight: 700;
      cursor: pointer;
      transition: all .15s;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .pos-page-btn:hover:not(:disabled) {
      background: var(--primary-light);
      color: var(--primary);
      border-color: var(--primary);
    }

    .pos-page-btn.active {
      background: var(--primary);
      color: #fff;
      border-color: var(--primary);
    }

    .pos-page-btn:disabled {
      opacity: .4;
      cursor: not-allowed;
    }

    .pos-page-btn-nav {
      gap: 6px;
    }

    .field input[type="checkbox"],
.field input[type="radio"],
input[type="checkbox"],
input[type="radio"] {
      appearance: none;
      -webkit-appearance: none;
      width: 18px;
      height: 18px;
      border: 2px solid var(--border);
      background: var(--surface);
      border-radius: 6px;
      position: relative;
      cursor: pointer;
      transition: all .2s ease;
      vertical-align: middle;
    }

    input[type="radio"] {
      border-radius: 50%;
    }

    input[type="checkbox"],
input[type="radio"] {
      accent-color: var(--primary);
    }

    .field input[type="checkbox"]:checked,
.field input[type="radio"]:checked,
input[type="checkbox"]:checked,
input[type="radio"]:checked {
      border-color: var(--primary);
      background: var(--primary);
    }

    input[type="checkbox"]:checked::after {
      content: '\f00c';
      font-family: 'Font Awesome 6 Free';
      font-weight: 900;
      color: #fff;
      font-size: 10px;
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* علامة واضحة ومتباينة داخل بطاقات النظام. نستخدم رمزًا مضمّنًا
       بدل الاعتماد على تحميل خط الأيقونات، مع لون مناسب لكل عائلة مظاهر. */
    #page-settings input[type="checkbox"]:checked::after {
      content: '\2713';
      font-family: Arial, "Noto Sans", sans-serif;
      font-size: 13px;
      line-height: 1;
      font-weight: 900;
      text-shadow: 0 1px 0 rgba(255, 255, 255, .3);
    }

    html #page-settings input[type="checkbox"]:checked::after {
      color: #172033;
      -webkit-text-fill-color: #172033;
    }

    

    #online-store-settings-card .store-enabled-toggle {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      min-height: 42px;
      margin: 0;
      padding: 9px 13px;
      border: 1px solid var(--border);
      border-radius: 12px;
      background: var(--surface2);
      color: var(--text);
      font-weight: 800;
      line-height: 1;
      cursor: pointer;
      white-space: nowrap;
    }

    #online-store-settings-card .store-enabled-toggle input[type="checkbox"] {
      width: 20px !important;
      min-width: 20px;
      height: 20px !important;
      flex: 0 0 20px;
      margin: 0;
    }

    #online-store-settings-card .store-enabled-toggle input[type="checkbox"]:checked::after {
      justify-content: center;
    }

    input[type="radio"]:checked::after {
      content: '';
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #fff;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }


    /* 7.0.318 — كل Checkbox داخل مودال إضافة/تعديل المستخدم */
    #modal-add-user input[type="checkbox"]:checked::after,
#modal-edit-user input[type="checkbox"]:checked::after,
#modal-user input[type="checkbox"]:checked::after,
.user-modal input[type="checkbox"]:checked::after {
      content: '\2713' !important;
      font-family: Arial, "Noto Sans", sans-serif !important;
      font-weight: 900 !important;
      font-size: 13px !important;
      line-height: 1 !important;
    }

    html #modal-add-user input[type="checkbox"]:checked::after,
html #modal-edit-user input[type="checkbox"]:checked::after,
html #modal-user input[type="checkbox"]:checked::after,
html .user-modal input[type="checkbox"]:checked::after,
#modal-add-user input[type="checkbox"]:checked::after,
#modal-edit-user input[type="checkbox"]:checked::after,
#modal-user input[type="checkbox"]:checked::after,
.user-modal input[type="checkbox"]:checked::after {
      color: #172033 !important;
      text-shadow: none !important;
    }
@media (max-width: 900px) {

      #page-account .account-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 700px) {
      #page-account .profile-header {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px;
        gap: 14px;
      }

      #page-account .profile-avatar {
        width: 64px;
        height: 64px;
        font-size: 1.6rem;
      }

      #page-account .profile-info h2 {
        font-size: 1.1rem;
      }

      #page-account table td {
        display: block;
        width: 100%;
      }

    }

    @media (max-width: 520px) {
      #page-account .card-body {
        padding: 14px;
      }

      #page-account .card-body table td:first-child {
        padding-bottom: 2px;
        border-bottom: none;
        font-size: .8rem;
      }

      #page-account .card-body table td:last-child {
        padding-top: 2px;
        padding-bottom: 10px;
      }

      #page-account .profile-header {
        padding: 16px;
      }

    }


    .loader-orbit {
      width: 96px;
      height: 96px;
      margin: 0 auto 18px;
      position: relative;
    }

    .loader-orbit::before,
.loader-orbit::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 50%;
      border: 4px solid transparent;
    }

    .loader-orbit::before {
      border-top-color: #5BAF9F;
      border-right-color: #5BAF9F;
      animation: spin 1s linear infinite;
      box-shadow: 0 0 28px rgba(56, 189, 248, .22);
    }

    .loader-orbit::after {
      inset: 14px;
      border-bottom-color: rgba(255, 255, 255, .9);
      border-left-color: rgba(255, 255, 255, .55);
      animation: spinReverse 1.2s linear infinite;
    }

    .loader-core {
      position: absolute;
      inset: 28px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: rgba(255, 255, 255, .08);
      backdrop-filter: blur(14px);
      font-size: 22px;
      color: #fff;
      box-shadow: inset 0 0 22px rgba(255, 255, 255, .08);
    }

    .loader-dots {
      display: inline-flex;
      gap: 6px;
      margin-top: 8px;
    }

    .loader-dots span {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .9);
      animation: loaderDot 1s infinite ease-in-out;
    }

    .loader-dots span:nth-child(2) {
      animation-delay: .12s;
    }

    .loader-dots span:nth-child(3) {
      animation-delay: .24s;
    }

    @keyframes spinReverse {
      to {
        transform: rotate(-360deg);
      }
    }

    @keyframes loaderDot {

      0%,
      80%,
      100% {
        transform: scale(.55);
        opacity: .45;
      }

      40% {
        transform: scale(1);
        opacity: 1;
      }
    }

    /* ===== PRINT SETTINGS PAGE ===== */
    .settings-hero {
      background: var(--surface);
      border: 1px solid var(--border);
      color: var(--text);
      border-radius: 18px;
      padding: 22px;
      margin-bottom: 18px;
      box-shadow: var(--shadow-lg);
    }

    .settings-hero h2 {
      color: var(--primary);
    }

    .settings-hero p {
      color: var(--text-muted);
      margin-top: 8px;
      line-height: 1.8;
    }

    /* ===== صفحة "قائمتي" ===== */
.shortcuts-hero h2 {
      font-size: 1.2rem;
      font-weight: 800;
      color: var(--primary);
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .shortcuts-hero p {
      color: var(--text-muted);
      font-size: .85rem;
      margin-top: 6px;
    }

    .shortcuts-customize-btn {
      white-space: nowrap;
    }

    .shortcuts-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
      gap: 14px;
    }

    .shortcut-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 20px 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      cursor: pointer;
      text-align: center;
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
      user-select: none;
    }

    .shortcut-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-lg);
      border-color: var(--shortcut-color, var(--primary));
    }

    .shortcut-card:active {
      transform: translateY(-1px) scale(.98);
    }

    .shortcut-icon {
      width: 52px;
      height: 52px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.3rem;
      color: #fff;
      background: var(--shortcut-color, var(--primary));
      box-shadow: 0 6px 16px -4px var(--shortcut-color, var(--primary));
    }

    .shortcut-label {
      font-size: .84rem;
      font-weight: 700;
      color: var(--text);
      line-height: 1.4;
    }

    @media (max-width: 600px) {
      .shortcuts-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
      }

      .shortcut-card {
        padding: 18px 10px;
        gap: 10px;
      }

      .shortcut-icon {
        width: 48px;
        height: 48px;
        font-size: 1.15rem;
      }

      .shortcut-label {
        font-size: .82rem;
      }
    }

    /* ===== مودال تخصيص الاختصارات ===== */
    .shortcuts-customizer-list {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 8px;
      max-height: 55vh;
      overflow-y: auto;
      padding: 4px;
    }

    .shortcut-toggle-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      border: 1.5px solid var(--border);
      border-radius: 10px;
      cursor: pointer;
      transition: border-color .15s, background .15s;
    }

    .shortcut-toggle-item:hover {
      border-color: var(--primary);
    }

    .shortcut-toggle-item.active {
      border-color: var(--shortcut-color, var(--primary));
      background: color-mix(in srgb, var(--shortcut-color, var(--primary)) 8%, transparent);
    }

    .shortcut-toggle-item input[type="checkbox"] {
      width: 18px;
      height: 18px;
      accent-color: var(--shortcut-color, var(--primary));
      flex-shrink: 0;
    }

    .shortcut-toggle-icon {
      width: 30px;
      height: 30px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      background: var(--shortcut-color, var(--primary));
      font-size: .85rem;
      flex-shrink: 0;
    }

    .shortcut-toggle-label {
      font-size: .82rem;
      font-weight: 700;
      color: var(--text);
    }

    .print-setting-option {
      border: 1px solid var(--border);
      background: var(--surface2);
      border-radius: 14px;
      padding: 14px;
      display: grid;
      gap: 8px;
    }

    .print-setting-option strong {
      color: var(--text);
    }

    .print-setting-option small {
      color: var(--text-muted);
      line-height: 1.7;
    }

    @media(max-width:900px) {

      .settings-bottom-grid {
        grid-template-columns: 1fr !important;
      }
    }

    /* ===== THERMAL RECEIPT ONLY ===== */

    /* ===== إيصال حراري احترافي - نسخة محسّنة 2.1 ===== */
    .thermal-receipt {
      font-family: 'Courier New', Courier, 'Tajawal', monospace;
      direction: rtl;
      background: #fff;
      color: #000;
      font-weight: 700;
      width: 80mm;
      max-width: 80mm;
      margin: 0 auto;
      padding: 5mm 3mm 4mm;
      /* تقليل padding السفلي لمنع المساحة الزائدة */
      font-size: 11px;
      line-height: 1.55;
      overflow: visible;
      /* ✅ منع القطع */
      box-sizing: border-box;
    }

    .thermal-receipt.size-58 {
      width: 58mm;
      max-width: 58mm;
      font-size: 9.5px;
      padding: 4mm 2mm 3mm;
    }

    .th-logo {
      display: block;
      max-width: 60px;
      max-height: 60px;
      margin: 0 auto 4px;
    }

    .thermal-receipt .th-store-name {
      text-align: center;
      font-size: 15px;
      font-weight: 900;
      letter-spacing: 0.5px;
      margin-bottom: 2px;
      color: #000;
    }

    .thermal-receipt .th-store-sub {
      text-align: center;
      font-size: 9.5px;
      color: #000;
      margin-bottom: 1px;
    }

    .thermal-receipt .th-branch-name {
      text-align: center;
      font-size: 11px;
      font-weight: 700;
      color: #000;
      margin-bottom: 3px;
    }

    .thermal-receipt .th-divider-thick {
      border: none;
      border-top: 2px solid #000;
      margin: 5px 0;
    }

    .thermal-receipt .th-divider-dash {
      border: none;
      border-top: 1px dashed #000;
      margin: 4px 0;
    }

    .thermal-receipt .th-divider-thin {
      border: none;
      border-top: 1px solid #000;
      margin: 3px 0;
    }

    .thermal-receipt .th-row {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin: 2px 0;
    }

    .thermal-receipt .th-row .th-label {
      flex: 1;
    }

    .thermal-receipt .th-row .th-val {
      flex-shrink: 0;
      font-weight: 700;
      white-space: nowrap;
      margin-right: 6px;
    }

    .thermal-receipt .th-receipt-num {
      text-align: center;
      font-size: 11px;
      font-weight: 800;
      margin: 3px 0;
      color: #000;
    }

    .thermal-receipt .th-datetime {
      text-align: center;
      font-size: 9px;
      color: #000;
      margin-bottom: 2px;
    }

    .thermal-receipt .th-extra-copy-badge {
      text-align: center;
      font-size: 11px;
      font-weight: 800;
      border: 1.5px dashed #000;
      border-radius: 4px;
      padding: 2px 6px;
      margin: 4px auto 6px;
      display: inline-block;
      letter-spacing: .5px;
    }

    .thermal-receipt .th-cashier {
      text-align: center;
      font-size: 9.5px;
      margin-bottom: 2px;
      color: #000;
    }

    .thermal-receipt .th-customer-section {
      font-size: 9.5px;
      margin: 3px 0;
      color: #000;
    }

    .thermal-receipt .th-items-header {
      display: grid;
      grid-template-columns: 1fr 28px 40px 42px;
      gap: 2px;
      font-weight: 900;
      font-size: 9.5px;
      padding: 2px 0;
      color: #000;
    }

    .thermal-receipt .th-item-row {
      display: grid;
      grid-template-columns: 1fr 28px 40px 42px;
      gap: 2px;
      font-size: 9.5px;
      padding: 2px 0;
      border-bottom: 1px dotted #000;
      color: #000;
    }

    .thermal-receipt .th-item-row:last-child {
      border-bottom: none;
    }

    .thermal-receipt .th-item-name {
      font-weight: 800;
      word-break: break-word;
      color: #000;
    }

    .thermal-receipt .th-col-c {
      text-align: center;
    }

    .thermal-receipt .th-col-r {
      text-align: left;
    }

    .thermal-receipt .th-discount-row {
      font-size: 9px;
      color: #000;
      padding: 1px 0;
      display: grid;
      grid-template-columns: 1fr 42px;
      gap: 2px;
    }

    .thermal-receipt .th-totals-section {
      margin-top: 3px;
    }

    .thermal-receipt .th-totals-row {
      display: flex;
      justify-content: space-between;
      font-size: 10px;
      padding: 2px 0;
      color: #000;
    }

    .thermal-receipt .th-totals-row.th-grand {
      font-size: 13px;
      font-weight: 900;
      padding: 4px 0;
      color: #000;
    }

    .thermal-receipt .th-totals-row.th-paid {
      color: #000;
      font-weight: 700;
    }

    .thermal-receipt .th-totals-row.th-change {
      color: #000;
      font-weight: 800;
    }

    .thermal-receipt .th-totals-row.th-due {
      color: #000;
      font-weight: 800;
    }

    .thermal-receipt .th-totals-row.th-prev {
      font-size: 9.5px;
      color: #000;
    }

    .thermal-receipt .th-footer-msg {
      text-align: center;
      font-size: 9.5px;
      margin: 3px 0 2px;
      color: #000;
    }

    .thermal-receipt .th-items-count {
      text-align: center;
      font-size: 9px;
      color: #000;
    }

    .thermal-receipt .th-barcode-wrap {
      text-align: center;
      margin: 6px 0 2px;
    }

    .thermal-receipt .th-barcode-wrap svg {
      max-width: 100%;
      height: auto;
    }

    .thermal-receipt .th-barcode-number {
      font-family: monospace;
      font-size: 10px;
      letter-spacing: 1px;
      color: #000;
      margin-top: 1px;
    }

    /* ===== POS Save UX Guard ===== */
    #pos-complete-btn:disabled,
.btn.pos-saving:disabled {
      opacity: .72;
      cursor: not-allowed;
      filter: grayscale(.1);
    }

    .pos-save-spinner {
      width: 16px;
      height: 16px;
      border: 2px solid rgba(255, 255, 255, .45);
      border-top-color: #fff;
      border-radius: 50%;
      animation: spin .7s linear infinite;
      display: inline-block;
    }


    /* ===================================================
   📱 MOBILE RESPONSIVE — COMPREHENSIVE PATCH
   =================================================== */

    /* --- Touch targets minimum 44px --- */
    @media (max-width: 900px) {

      .btn,
.btn-icon,
.nav-item {
        min-height: 44px;
      }

      .btn-sm {
        min-height: 38px;
      }

      .btn-xs {
        min-height: 34px;
      }
    }

    /* ---- SIDEBAR: slide-over on mobile ---- */
    @media (max-width: 900px) {
      .sidebar {
        width: 215px;
        transform: translateX(100%);
        box-shadow: none;
        transition: transform 0.28s cubic-bezier(.4, 0, .2, 1), box-shadow 0.28s;
      }

      .sidebar.open {
        transform: translateX(0);
        box-shadow: -8px 0 40px rgba(0, 0, 0, 0.35);
      }

      .main {
        margin-right: 0 !important;
      }

      /* Topbar menu toggle visible */
      .menu-toggle {
        display: flex !important;
      }
    }

    /* ---- TOPBAR on small screens ---- */
    @media (max-width: 900px) {
      .topbar {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        width: 100%;
        z-index: 150;
        background: var(--surface);
        will-change: transform;
      }

      .main {
        margin-top: 0;
        padding-top: 102px;
      }
    }

    @media (max-width: 600px) {
      .topbar {
        padding: 0 12px;
        height: 56px;
        gap: 8px;
      }

      .main {
        padding-top: 102px;
      }

      .topbar-title {
        font-size: 0.95rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 1;
        min-width: 0;
      }

      .topbar-actions {
        gap: 4px;
        flex-shrink: 0;
      }

      .topbar-actions .btn-icon {
        width: 36px;
        height: 36px;
        font-size: 0.85rem;
      }

      /* إخفاء أزرار الاختصارات على الموبيل */
      .desktop-shortcut {
        display: none !important;
      }
    }

    /* ===== أزرار F-key تظهر فقط في صفحة POS على الديسكتوب ===== */
    .pos-shortcut-btn {
      display: none !important;
    }

    body[data-page="pos"] .pos-shortcut-btn {
      display: inline-flex !important;
    }

    /* إخفاء أزرار F-key على الموبايل حتى في صفحة POS */
    @media (max-width: 900px) {
      body[data-page="pos"] .pos-shortcut-btn {
        display: none !important;
      }
    }


    /* ===== فلتر التصنيفات والوحدات في المنتجات — full width على الموبايل ===== */
    @media (max-width: 768px) {
      #page-products .page-header-left {
        width: 100% !important;
        flex-direction: row !important;
      }

      #prod-category-filter,
#prod-unit-filter {
        width: 100% !important;
        min-width: unset !important;
        flex: 1 1 100% !important;
      }

      /* حقل البحث وزر الكاميرا يشاركوا نفس الصف بدل ما البحث ياخد العرض كامل لوحده */
      #page-products .page-header-left .search-bar {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
      }

      #page-products .page-header-left .mobile-camera-btn {
        flex: 0 0 auto !important;
      }
    }

    /* ---- CONTENT PADDING ---- */
    @media (max-width: 600px) {
      .content {
        padding: 12px;
      }
    }

    @media (max-width: 400px) {
      .content {
        padding: 8px;
      }
    }

    /* ---- PAGE HEADER ---- */
    @media (max-width: 700px) {
      .page-header {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        margin-bottom: 14px;
      }

      .page-header-left {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
      }

      .page-actions {
        flex-direction: column;
        gap: 8px;
        width: 100%;
      }

      .page-actions .btn {
        width: 100%;
        justify-content: center;
        min-height: 44px;
      }

      .search-bar {
        max-width: 100%;
        width: 100%;
      }
    }

    /* ---- STATS GRID ---- */
    @media (max-width: 700px) {
      .stats-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px;
      }

      .stat-card {
        padding: 14px 12px;
        gap: 10px;
      }

      .stat-icon {
        width: 44px;
        height: 44px;
        font-size: 1.1rem;
      }

      .stat-value {
        font-size: 1.15rem;
      }

      .stat-label {
        font-size: 0.76rem;
      }
    }

    @media (max-width: 400px) {
      .stats-grid {
        grid-template-columns: 1fr !important;
      }
    }

    /* ---- CARD HEADER wrap on small screens ---- */
    @media (max-width: 600px) {
      .card-header {
        flex-wrap: wrap;
        gap: 8px;
        padding: 12px 14px;
      }

      .card-body {
        padding: 14px;
      }
    }

    /* ---- FORM ROWS ---- */
    @media (max-width: 700px) {

      .form-row.cols-2,
.form-row.cols-3,
.form-row.cols-4 {
        grid-template-columns: 1fr !important;
      }

      .form-row.activity-action-row {
        grid-template-columns: 1fr 1fr !important;
      }

      .form-row.activity-action-row select,
.form-row.activity-action-row .btn {
        height: 44px;
        min-height: 44px;
        padding-top: 0;
        padding-bottom: 0;
      }

      .form-row.activity-action-row .btn {
        padding-inline: 8px;
        font-size: 0.78rem;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .field input:not([type="checkbox"]):not([type="radio"]),
.field select,
.field textarea {
        min-height: 44px;
        font-size: 16px;
        /* prevents iOS zoom */
      }
    }

    /* ---- MODAL ---- */
    @media (max-width: 600px) {
      .modal-backdrop {
        padding: 0;
        align-items: flex-end;
        /* الـ backdrop نفسه لا يسكرول — الـ modal-body هو اللي بيسكرول */
        overflow: hidden;
      }

      .modal,
.modal.modal-lg,
.modal.modal-xl {
        max-width: 100% !important;
        width: 100%;
        border-radius: 20px 20px 0 0;
        /* ★ إصلاح: كانت max-height: 92vh قبل كده — مع مودالات طويلة المحتوى (زي تخصيص
        الاختصارات) وترتيب flex-end (المودال ملتصق بأسفل الشاشة وبينمو لفوق)، كانت
        بتوصل لحد قريب جدًا من أعلى الشاشة. الحساب الصريح ده بيضمن مسافة أمان ثابتة
        (16px هامش) بغض النظر عن ارتفاع الشاشة، بدل نسبة مئوية تقريبية ممكن تختلف
        من جهاز لجهاز. */
        max-height: calc(100vh - 16px);
        /* flex column عشان header/footer ثابتين والـ body يسكرول */
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
      }

      .modal-header {
        padding: 14px 16px 12px;
        flex-shrink: 0 !important;
      }

      .modal-body {
        padding: 16px;
        /* السكرول بيحصل هنا بس */
        flex: 1 1 auto !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        min-height: 0 !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
        touch-action: pan-y !important;
      }

      .modal-footer {
        padding: 12px 16px;
        flex-direction: column;
        gap: 8px;
        flex-shrink: 0 !important;
      }

      .modal-footer .btn {
        width: 100%;
        justify-content: center;
        min-height: 44px;
      }
    }

    /* ---- TOAST container ---- */
    @media (max-width: 600px) {
      #toast-container {
        bottom: 80px;
        left: 10px;
        right: 10px;
      }

      .toast {
        max-width: 100%;
        min-width: unset;
        width: 100%;
        font-size: 0.85rem;
      }
    }

    /* ---- TABLE wrapping ---- */
    @media (max-width: 700px) {
      .table-wrap {
        border-radius: var(--radius-sm);
        -webkit-overflow-scrolling: touch;
        overflow-x: auto;
      }

      table {
        min-width: 600px;
      }

      th,
td {
        padding: 10px 12px;
        font-size: 0.83rem;
        white-space: nowrap;
      }
    }

    /* ---- INVOICE PRINT — mobile ---- */
    @media (max-width: 700px) {
      .invoice-print {
        padding: 20px 16px;
      }

      .invoice-print .inv-header {
        flex-direction: column;
        gap: 12px;
      }

      .invoice-print .inv-meta {
        text-align: right;
        min-width: unset;
        width: 100%;
      }
    }

    /* ---- REPORT GRID ---- */
    @media (max-width: 700px) {
      .report-grid {
        grid-template-columns: 1fr !important;
      }
    }

    /* =========================================
   📱 POS PAGE — MOBILE LAYOUT
   ========================================= */

    /* On screens ≤ 900px: stack columns */
    @media (max-width: 900px) {
      .pos-grid {
        grid-template-columns: 1fr !important;
        gap: 12px;
      }

      #pos-products-grid {
        max-height: 48vh !important;
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
        gap: 8px !important;
      }
    }

    /* On screens ≤ 700px: full mobile POS experience */
    @media (max-width: 700px) {

      /* Give space for FAB at bottom */
      #page-pos {
        padding-bottom: 90px !important;
      }

      /* POS top search bar full width */
      #page-pos .card-header {
        flex-wrap: wrap;
        gap: 8px;
      }

      #page-pos #pos-barcode-input,
#page-pos #pos-search {
        font-size: 16px;
        /* prevent iOS zoom */
        min-height: 44px;
      }

      /* Products grid: 2 columns on phone */
      #pos-products-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        max-height: 52vh !important;
        gap: 8px !important;
      }

      /* Product cards: more compact */
      .pos-product-card {
        padding: 12px 10px !important;
        gap: 5px !important;
        min-height: 100px !important;
      }

      .pos-product-name {
        font-size: 0.82rem !important;
      }

      .pos-product-meta {
        font-size: 0.7rem !important;
        flex-wrap: wrap !important;
      }

      /* Hide desktop cart panel on phone (FAB shows it) */
      .pos-cart-panel {
        display: none !important;
      }

      /* FAB cart button: hidden — replaced by topbar cart icon */
      .pos-mobile-cart-fab {
        display: none !important;
      }

      /* Mobile cart sheet: full bottom sheet */
      .pos-mobile-cart-sheet {
        display: flex;
        transform: translateY(105%);
      }

      .pos-mobile-cart-sheet.open {
        transform: translateY(0) !important;
      }
    }

    /* Even smaller phones: 1 column products */
    @media (max-width: 400px) {

      #pos-products-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
      }

      .pos-product-card {
        padding: 8px !important;
      }

      .pos-product-name {
        font-size: 0.8rem !important;
      }
    }

    /* ---- Fullscreen mode: topbar stays on top, content flows correctly ---- */
    /* ملحوظة: right محدد بعرض السيدبار (215px/72px) بدل 0، عشان التوبار ما يمتدش تحت
       السيدبار (اللي عنده z-index أعلى) ويغطي زر الهامبورجر ويخفيه بصريًا */
    :fullscreen .topbar,
:-webkit-full-screen .topbar {
      position: fixed !important;
      top: 0;
      left: 0;
      right: 215px;
      z-index: 2147483640 !important;
    }

    :fullscreen .main.sidebar-collapsed .topbar,
:-webkit-full-screen .main.sidebar-collapsed .topbar {
      right: 60px;
    }

    :fullscreen .sidebar,
:-webkit-full-screen .sidebar {
      position: fixed !important;
      top: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
      z-index: 2147483647 !important;
    }

    :fullscreen #sidebar-overlay,
:-webkit-full-screen #sidebar-overlay {
      position: fixed !important;
      z-index: 2147483646 !important;
    }

    :fullscreen .main,
:-webkit-full-screen .main {
      margin-right: 215px;
      margin-top: 0 !important;
      padding-top: 94px !important;
      min-height: 100vh;
      box-sizing: border-box;
    }

    :fullscreen .main.sidebar-collapsed,
:-webkit-full-screen .main.sidebar-collapsed {
      margin-right: 60px;
    }

    @media (max-width: 900px) {

      :fullscreen .main,
:-webkit-full-screen .main {
        margin-right: 0 !important;
        padding-top: 94px !important;
      }

      :fullscreen .topbar,
:-webkit-full-screen .topbar {
        right: 0 !important;
      }
    }

    /* ---- POS fullscreen improvements on mobile ---- */
    @media (max-width: 600px) {
      .pos-mobile-cart-footer {
        padding-bottom: max(16px, env(safe-area-inset-bottom));
      }

      .pos-mobile-cart-fab {
        bottom: max(16px, env(safe-area-inset-bottom));
        left: 12px;
        right: 12px;
      }
    }

    /* ---- DATE FILTER BAR ---- */
    @media (max-width: 600px) {
      .date-filter-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
      }

      .date-filter-bar input[type="date"],
.date-filter-bar input[type="text"],
.date-filter-bar select,
.date-filter-bar .btn-filter-reset {
        width: 100%;
        min-height: 42px;
        font-size: 16px;
      }

      .date-filter-bar .filter-result {
        margin-right: 0;
      }
    }

    /* ---- ACCOUNT PAGE ---- */
    @media (max-width: 700px) {
      #page-account .account-grid {
        grid-template-columns: 1fr !important;
      }

      #page-account .profile-header {
        flex-direction: column;
        align-items: flex-start;
        padding: 18px;
        gap: 12px;
      }

      #page-account .profile-avatar {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
      }
    }

    /* ---- Login card on small screens ---- */
    @media (max-width: 480px) {
      .login-card {
        padding: 32px 20px;
        border-radius: 20px;
      }

      .login-logo .icon {
        width: 60px;
        height: 60px;
        font-size: 26px;
      }

      .login-logo h1 {
        font-size: 1.3rem;
      }
    }

    /* ---- Profile header responsive ---- */
    @media (max-width: 500px) {
      .profile-header {
        flex-direction: column;
        padding: 20px;
        gap: 14px;
      }

      .profile-avatar {
        width: 64px;
        height: 64px;
        font-size: 1.6rem;
      }
    }

    /* ---- Fix table-actions wrapping on mobile ---- */
    @media (max-width: 600px) {
      .table-actions {
        gap: 4px;
      }

      .table-actions .btn-sm {
        padding: 6px 10px;
        font-size: 0.78rem;
      }

      .table-actions .btn-xs {
        padding: 5px 8px;
      }
    }

    /* ---- iOS safe area support ---- */
    @supports (padding-bottom: env(safe-area-inset-bottom)) {
      @media (max-width: 900px) {
        .sidebar {
          padding-bottom: env(safe-area-inset-bottom);
        }

        #toast-container {
          bottom: calc(80px + env(safe-area-inset-bottom));
        }
      }
    }

    /* ---- Prevent horizontal overflow globally ---- */
    @media (max-width: 900px) {

      #app,
.main,
.content,
.page {
        max-width: 100vw;
        overflow-x: hidden;
      }
    }

    /* =========================================
   END MOBILE RESPONSIVE PATCH
   ========================================= */


    /* ===== OPERATION LOADER OVERLAY ===== */
    #op-loader-overlay.active {
      display: flex !important;
    }

    

    @keyframes op-pulse {

      0%,
      100% {
        opacity: 1;
      }

      50% {
        opacity: .55;
      }
    }

    #op-loader-icon {
      animation: op-pulse 1.4s ease-in-out infinite;
    }

    /* ===== FIX: منع بقاء المساحة البيضاء بعد الطباعة ===== */
    html,
body,
#app,
#app.visible,
.main,
.content,
.page.active {
      background: var(--bg) !important;
      background-color: var(--bg) !important;
    }

    

    @media print {

      html,
body,
#app,
.main,
.content,
.page.active {
        background: white !important;
        background-color: white !important;
      }
    }

    /* ===== FINAL MOBILE DASHBOARD FIX: force 2 cards per row ===== */
    @media (max-width: 768px) {

      #dashboard .stats-grid,
.page.active#dashboard .stats-grid,
.stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
      }

      #dashboard .dashboard-page-cards,
.page.active#dashboard .dashboard-page-cards,
.dashboard-page-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
      }

      #dashboard .stat-card,
.stat-card,
#dashboard .dashboard-page-card,
.dashboard-page-card {
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
      }

      .dashboard-page-card {
        min-height: 110px !important;
        padding: 0 !important;
      }

      .dashboard-page-card .card-title {
        font-size: .82rem !important;
        line-height: 1.35 !important;
      }

      .stat-card {
        padding: 12px !important;
        gap: 8px !important;
      }

      .stat-icon {
        width: 38px !important;
        height: 38px !important;
        font-size: .95rem !important;
      }

      .stat-value {
        font-size: .95rem !important;
      }

      .stat-label {
        font-size: .68rem !important;
        line-height: 1.35 !important;
      }
    }

    @media (max-width: 380px) {

      #dashboard .stats-grid,
.stats-grid,
#dashboard .dashboard-page-cards,
.dashboard-page-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      }
    }

    /* ════════════════════════════════════════════════════════════════ */
    /* ===== Professional Desktop Accounting Dashboard Theme ====== */
    /* ════════════════════════════════════════════════════════════════ */

    /* ===== الصفحة العامة ===== */
    #page-dashboard {
      max-width: 1100px;
      margin-left: auto;
      margin-right: auto;
      padding: 4px 0 24px;
    }

    

    @media (max-width: 900px) {
      #page-dashboard .dashboard-page-cards {
        grid-template-columns: repeat(3, 1fr) !important;
      }
    }

    @media (max-width: 600px) {
      #page-dashboard .dashboard-page-cards {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
      }
    }

    #page-dashboard .dashboard-page-card {
      position: relative !important;
      overflow: hidden !important;
      min-height: 96px !important;
      padding: 14px 14px 12px !important;
      border-radius: 10px !important;
      border: 1px solid var(--border) !important;
      border-top: 3px solid var(--card-accent, var(--primary)) !important;
      background: var(--surface) !important;
      box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
      cursor: pointer !important;
      display: flex !important;
      flex-direction: row !important;
      align-items: center !important;
      justify-content: flex-start !important;
      gap: 12px !important;
      transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease, background .15s ease !important;
    }

    #page-dashboard .dashboard-page-card:hover {
      transform: translateY(-4px) scale(1.02);

      box-shadow:
        0 16px 36px rgba(24, 116, 102, 0.35),
        0 6px 18px rgba(0, 0, 0, 0.12);

      filter: brightness(1.04);
    }

    /* النصوص */
    #page-dashboard .dashboard-page-card>div:last-child {
      position: static !important;
      z-index: auto !important;
      padding: 0 !important;
      background: none !important;
      flex: 1 !important;
      min-width: 0 !important;
    }

    #page-dashboard .dashboard-page-card .card-title {
      font-size: .92rem !important;
      font-weight: 700 !important;
      color: var(--text) !important;
      margin: 0 0 2px !important;
      text-shadow: none !important;
      letter-spacing: 0 !important;
      line-height: 1.3 !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      white-space: nowrap !important;
    }


    /* الموبايل: تخطيط رأسي مرتب */
    @media (max-width: 600px) {
      #page-dashboard .dashboard-page-card {
        flex-direction: column !important;
        align-items: flex-start !important;
        min-height: 100px !important;
        padding: 12px !important;
        gap: 8px !important;
      }

      #page-dashboard .dashboard-page-card .card-title {
        font-size: .85rem !important;
      }
    }

    /* ===== شبكة كروت الميزانية والخزنة ===== */
    #page-dashboard .balance-treasury-grid {
      display: grid !important;
      grid-template-columns: 1fr 1fr !important;
      gap: 14px !important;
      margin: 0 0 18px !important;
    }

    @media (max-width: 768px) {
      #page-dashboard .balance-treasury-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
      }
    }

    #page-dashboard .balance-treasury-grid>#balance-status-card,
#page-dashboard .balance-treasury-grid>#treasury-status-card {
      position: relative !important;
      overflow: hidden !important;
      margin: 0 !important;
      width: auto !important;
      clear: none !important;
      float: none !important;
      display: block !important;
      height: 100% !important;
      border-radius: 12px !important;
      border: 1px solid var(--border) !important;
      box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05), 0 4px 12px rgba(15, 23, 42, 0.03) !important;
    }

    /* تنسيق داخلي لكارت الميزانية - شكل احترافي زي برامج الحسابات */
    #page-dashboard #balance-status-card .bsc-content,
#page-dashboard #treasury-status-card .tsc-content {
      padding: 16px 18px !important;
    }

    #page-dashboard #balance-status-card .bsc-header,
#page-dashboard #treasury-status-card .tsc-header {
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      margin-bottom: 14px !important;
      padding-bottom: 12px !important;
      border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    }

    #page-dashboard #balance-status-card .bsc-title,
#page-dashboard #treasury-status-card .tsc-title {
      font-size: 1rem !important;
      font-weight: 800 !important;
      margin: 4px 0 0 !important;
      color: #fff !important;
      letter-spacing: .2px !important;
    }

    #page-dashboard #balance-status-card .bsc-status-badge,
#page-dashboard #treasury-status-card .tsc-status-badge {
      font-size: .68rem !important;
      font-weight: 600 !important;
      padding: 3px 9px !important;
      border-radius: 6px !important;
      background: rgba(255, 255, 255, 0.18) !important;
      border: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    #page-dashboard #balance-status-card .bsc-action,
#page-dashboard #treasury-status-card .tsc-action {
      font-size: .75rem !important;
      font-weight: 600 !important;
      padding: 5px 11px !important;
      border-radius: 6px !important;
      background: rgba(255, 255, 255, 0.12) !important;
      border: 1px solid rgba(255, 255, 255, 0.1) !important;
      transition: background .15s ease !important;
    }

    #page-dashboard #balance-status-card:hover .bsc-action,
#page-dashboard #treasury-status-card:hover .tsc-action {
      background: rgba(255, 255, 255, 0.22) !important;
    }

    /* شبكة القيم - أكثر إحكاما */
    #page-dashboard #balance-status-card .bsc-grid {
      display: grid !important;
      grid-template-columns: 1fr 1fr !important;
      gap: 8px !important;
    }

    #page-dashboard #balance-status-card .bsc-item-diff {
      grid-column: 1 / -1 !important;
    }

    #page-dashboard #treasury-status-card .tsc-grid {
      display: grid !important;
      grid-template-columns: 1fr 1fr !important;
      gap: 8px !important;
    }

    #page-dashboard #treasury-status-card .tsc-item-main {
      grid-column: 1 / -1 !important;
    }

    #page-dashboard #balance-status-card .bsc-item,
#page-dashboard #treasury-status-card .tsc-item {
      padding: 9px 11px !important;
      border-radius: 8px !important;
      background: rgba(255, 255, 255, 0.10) !important;
      border: 1px solid rgba(255, 255, 255, 0.08) !important;
    }

    #page-dashboard #treasury-status-card .tsc-item-main {
      background: rgba(255, 255, 255, 0.18) !important;
      padding: 11px 13px !important;
    }

    #page-dashboard #balance-status-card .bsc-item-label,
#page-dashboard #treasury-status-card .tsc-item-label {
      font-size: .7rem !important;
      font-weight: 500 !important;
      margin-bottom: 4px !important;
      opacity: .92 !important;
      display: flex !important;
      align-items: center !important;
      gap: 5px !important;
    }

    #page-dashboard #balance-status-card .bsc-item-value,
#page-dashboard #treasury-status-card .tsc-item-value {
      font-size: .95rem !important;
      font-weight: 800 !important;
      letter-spacing: .2px !important;
    }

    #page-dashboard #treasury-status-card .tsc-main-value {
      font-size: 1.15rem !important;
    }

    /* إخفاء الأيقونة الخلفية الكبيرة في الموبايل (مشتتة) */
    @media (max-width: 600px) {

      #page-dashboard #balance-status-card .bsc-bg-icon,
#page-dashboard #treasury-status-card .tsc-bg-icon {
        opacity: .5 !important;
      }
    }

    /* ===== إخفاء الأيقونات الخلفية الكبيرة في كرتي الميزانية والخزنة ===== */
    #page-dashboard #balance-status-card .bsc-bg-icon,
#page-dashboard #treasury-status-card .tsc-bg-icon {
      display: none !important;
    }

    /* ===== توحيد لون كرتي الميزانية والخزنة مع الهوية البترولية ===== */
    #page-dashboard #balance-status-card,
#page-dashboard #balance-status-card.is-balanced,
#page-dashboard #balance-status-card.is-unbalanced,
#page-dashboard #treasury-status-card,
#page-dashboard #treasury-status-card.is-positive,
#page-dashboard #treasury-status-card.is-negative {
      background: var(--finance-card-grad) !important;
      border: 1px solid var(--finance-card-border) !important;
      box-shadow: var(--finance-card-shadow) !important;
      color: var(--finance-card-text) !important;
      transition: transform .2s ease, box-shadow .2s ease, background .25s ease, border-color .25s ease !important;
    }

    #page-dashboard #balance-status-card:hover,
#page-dashboard #balance-status-card.is-balanced:hover,
#page-dashboard #balance-status-card.is-unbalanced:hover,
#page-dashboard #treasury-status-card:hover,
#page-dashboard #treasury-status-card.is-positive:hover,
#page-dashboard #treasury-status-card.is-negative:hover {
      box-shadow: var(--finance-card-shadow-hover) !important;
    }

    /* ===== ألوان النصوص داخل الكارتين (متجاوبة مع الوضع) ===== */
    #page-dashboard #balance-status-card .bsc-title,
#page-dashboard #treasury-status-card .tsc-title {
      color: var(--finance-card-text) !important;
      text-shadow: var(--finance-card-text-shadow) !important;
    }

    #page-dashboard #balance-status-card .bsc-item-value,
#page-dashboard #treasury-status-card .tsc-item-value,
#page-dashboard #treasury-status-card .tsc-main-value {
      color: var(--finance-card-text) !important;
      text-shadow: var(--finance-card-text-shadow) !important;
    }

    #page-dashboard #balance-status-card .bsc-item-label,
#page-dashboard #treasury-status-card .tsc-item-label {
      color: var(--finance-card-text-muted) !important;
      opacity: 1 !important;
    }

    /* ===== الخانات الداخلية (items) ===== */
    #page-dashboard #balance-status-card .bsc-item,
#page-dashboard #treasury-status-card .tsc-item {
      background: var(--finance-card-item-bg) !important;
      border: 1px solid var(--finance-card-border) !important;
    }

    #page-dashboard #balance-status-card .bsc-item-diff,
#page-dashboard #treasury-status-card .tsc-item-main {
      background: var(--finance-card-item-bg-main) !important;
    }

    /* ===== شارات الحالة وأزرار الانتقال ===== */
    #page-dashboard #balance-status-card .bsc-status-badge,
#page-dashboard #treasury-status-card .tsc-status-badge,
#page-dashboard #balance-status-card .bsc-action,
#page-dashboard #treasury-status-card .tsc-action {
      background: var(--finance-card-badge-bg) !important;
      color: var(--finance-card-badge-text) !important;
    }

    #page-dashboard #balance-status-card:hover .bsc-action,
#page-dashboard #treasury-status-card:hover .tsc-action {
      background: var(--finance-card-item-bg-main) !important;
    }

    /* ===== الأنيميشن اتشال بناءً على طلب المستخدم (كان بيعمل fade-in للكروت) ===== */


    /* ===== RUTO Update: جعل كرتي الميزانية والخزنة مثل كروت الأقسام الرئيسية ===== */
    #page-dashboard .balance-treasury-grid>#balance-status-card,
#page-dashboard .balance-treasury-grid>#treasury-status-card,
#page-dashboard #balance-status-card,
#page-dashboard #balance-status-card.is-balanced,
#page-dashboard #balance-status-card.is-unbalanced,
#page-dashboard #treasury-status-card,
#page-dashboard #treasury-status-card.is-positive,
#page-dashboard #treasury-status-card.is-negative {
      min-height: 170px !important;
      border-radius: 10px !important;
      border: 1px solid var(--border) !important;
      border-top: 3px solid var(--finance-accent, var(--primary)) !important;
      background: var(--surface) !important;
      color: var(--text) !important;
      box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
      transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease, background .15s ease !important;
      filter: none !important;
    }

    #page-dashboard #balance-status-card,
#page-dashboard #balance-status-card.is-balanced,
#page-dashboard #balance-status-card.is-unbalanced {
      --finance-accent: #187466;
      --finance-accent-soft: rgba(24, 116, 102, .10);
    }

    #page-dashboard #treasury-status-card,
#page-dashboard #treasury-status-card.is-positive,
#page-dashboard #treasury-status-card.is-negative {
      --finance-accent: #187466;
      --finance-accent-soft: rgba(24, 116, 102, .10);
    }

    #page-dashboard #balance-status-card:hover,
#page-dashboard #balance-status-card.is-balanced:hover,
#page-dashboard #balance-status-card.is-unbalanced:hover,
#page-dashboard #treasury-status-card:hover,
#page-dashboard #treasury-status-card.is-positive:hover,
#page-dashboard #treasury-status-card.is-negative:hover {
      transform: translateY(-1px) !important;
      border-color: var(--finance-accent) !important;
      box-shadow: 0 4px 14px color-mix(in srgb, var(--finance-accent) 18%, transparent),
        0 1px 2px rgba(15, 23, 42, 0.06) !important;
      background: color-mix(in srgb, var(--finance-accent) 3%, var(--surface)) !important;
      filter: none !important;
    }

    #page-dashboard #balance-status-card .bsc-content,
#page-dashboard #treasury-status-card .tsc-content {
      padding: 14px !important;
      gap: 10px !important;
    }

    #page-dashboard #balance-status-card .bsc-header,
#page-dashboard #treasury-status-card .tsc-header {
      border-bottom: 1px solid var(--border) !important;
      padding-bottom: 12px !important;
      margin-bottom: 12px !important;
      align-items: center !important;
    }

    #page-dashboard #balance-status-card .bsc-title,
#page-dashboard #treasury-status-card .tsc-title {
      color: var(--text) !important;
      text-shadow: none !important;
      font-size: .95rem !important;
      font-weight: 800 !important;
      letter-spacing: 0 !important;
    }

    #page-dashboard #balance-status-card .bsc-status-badge,
#page-dashboard #treasury-status-card .tsc-status-badge,
#page-dashboard #balance-status-card .bsc-action,
#page-dashboard #treasury-status-card .tsc-action {
      background: var(--finance-accent-soft) !important;
      color: var(--finance-accent) !important;
      border: 1px solid color-mix(in srgb, var(--finance-accent) 18%, transparent) !important;
      border-radius: 8px !important;
      text-shadow: none !important;
    }

    #page-dashboard #balance-status-card:hover .bsc-action,
#page-dashboard #treasury-status-card:hover .tsc-action {
      background: var(--finance-accent) !important;
      color: #fff !important;
    }

    #page-dashboard #balance-status-card .bsc-grid,
#page-dashboard #treasury-status-card .tsc-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 8px !important;
    }

    #page-dashboard #balance-status-card .bsc-item,
#page-dashboard #treasury-status-card .tsc-item,
#page-dashboard #balance-status-card .bsc-item-diff,
#page-dashboard #treasury-status-card .tsc-item-main {
      background: color-mix(in srgb, var(--finance-accent) 7%, var(--surface)) !important;
      border: 1px solid color-mix(in srgb, var(--finance-accent) 14%, var(--border)) !important;
      border-radius: 8px !important;
      padding: 10px 11px !important;
    }

    #page-dashboard #balance-status-card .bsc-item-label,
#page-dashboard #treasury-status-card .tsc-item-label {
      color: var(--text-muted) !important;
      opacity: 1 !important;
      font-weight: 700 !important;
      text-shadow: none !important;
    }

    #page-dashboard #balance-status-card .bsc-item-label i,
#page-dashboard #treasury-status-card .tsc-item-label i {
      width: 24px !important;
      height: 24px !important;
      min-width: 24px !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      border-radius: 7px !important;
      color: var(--item-icon-color, var(--finance-accent)) !important;
      background: color-mix(in srgb, var(--item-icon-color, var(--finance-accent)) 12%, transparent) !important;
      font-size: .78rem !important;
    }

    #page-dashboard #balance-status-card .bsc-item:nth-child(1) {
      --item-icon-color: #187466;
    }

    #page-dashboard #balance-status-card .bsc-item:nth-child(2) {
      --item-icon-color: #f59e0b;
    }

    #page-dashboard #balance-status-card .bsc-item:nth-child(3) {
      --item-icon-color: #1AA37A;
    }

    #page-dashboard #treasury-status-card .tsc-item:nth-child(1) {
      --item-icon-color: #187466;
    }

    #page-dashboard #treasury-status-card .tsc-item:nth-child(2) {
      --item-icon-color: #1AA37A;
    }

    #page-dashboard #treasury-status-card .tsc-item:nth-child(3) {
      --item-icon-color: #ef4444;
    }

    #page-dashboard #balance-status-card .bsc-item-value,
#page-dashboard #treasury-status-card .tsc-item-value,
#page-dashboard #treasury-status-card .tsc-main-value,
#page-dashboard #bsc-assets,
#page-dashboard #bsc-liabequity,
#page-dashboard #bsc-diff,
#page-dashboard #tsc-balance,
#page-dashboard #tsc-inflow,
#page-dashboard #tsc-outflow {
      color: var(--text) !important;
      text-shadow: none !important;
      font-weight: 800 !important;
    }

    #page-dashboard #balance-status-card .bsc-bg-icon,
#page-dashboard #treasury-status-card .tsc-bg-icon {
      display: flex !important;
      inset: auto 14px auto auto !important;
      top: 16px !important;
      width: 44px !important;
      height: 44px !important;
      font-size: 1.25rem !important;
      color: var(--finance-accent) !important;
      background: var(--finance-accent-soft) !important;
      border-radius: 8px !important;
      opacity: 1 !important;
      z-index: 3 !important;
    }

    #page-dashboard #balance-status-card .bsc-title-wrap,
#page-dashboard #treasury-status-card .tsc-title-wrap {
      padding-right: 56px !important;
    }

    

    

    @media (max-width: 600px) {

      #page-dashboard #balance-status-card .bsc-grid,
#page-dashboard #treasury-status-card .tsc-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      }

      #page-dashboard #balance-status-card .bsc-item-diff,
#page-dashboard #treasury-status-card .tsc-item-main {
        grid-column: 1 / -1 !important;
      }

      #page-dashboard #balance-status-card .bsc-bg-icon,
#page-dashboard #treasury-status-card .tsc-bg-icon {
        width: 38px !important;
        height: 38px !important;
        font-size: 1.1rem !important;
      }

      #page-dashboard #balance-status-card .bsc-title-wrap,
#page-dashboard #treasury-status-card .tsc-title-wrap {
        padding-right: 48px !important;
      }
    }

    /* ====================================================== */
    /* ===== تحسينات الأزرار وحقل البحث (CUSTOM ENHANCEMENTS) ===== */
    /* ====================================================== */

    /* ===== Body scroll lock عند فتح المودالات ===== */
    body.modal-open {
      overflow: hidden !important;
      /* touch-action: none أُزيل — كان بيمنع السكرول داخل المودال على الموبايل */
    }

    /* لمنع سكرول العنصر .main / .content الداخلي أيضاً */
    body.modal-open .main,
body.modal-open .content {
      overflow: hidden !important;
      touch-action: none;
    }

    /* الحفاظ على سكرول داخل المودال نفسه */
    body.modal-open .modal-backdrop.open {
      overflow-y: auto;
      touch-action: auto;
    }

    /* الـ modal-body يسكرول بحرية على الموبايل */
    body.modal-open .modal-backdrop.open .modal-body {
      touch-action: pan-y !important;
      -webkit-overflow-scrolling: touch !important;
      overscroll-behavior: contain !important;
    }

    /* ===== 1) زر التعديل بلون شيك في عمود الإجراءات ===== */
    .table-actions .btn.btn-outline.btn-xs[onclick*="edit"] {
      background: linear-gradient(135deg, #1AA37A 0%, #187466 100%) !important;
      color: #ffffff !important;
      border: 1px solid transparent !important;
      box-shadow: 0 2px 8px rgba(39,143,126, 0.28), 0 1px 2px rgba(24,116,102, 0.15) !important;
      transition: all 0.2s ease !important;
    }

    .table-actions .btn.btn-outline.btn-xs[onclick*="edit"]:hover {
      background: linear-gradient(135deg, #2F7D70 0%, #145C52 100%) !important;
      transform: translateY(-1px);
      box-shadow: 0 4px 14px rgba(39,143,126, 0.40), 0 2px 4px rgba(24,116,102, 0.20) !important;
    }

    .table-actions .btn.btn-outline.btn-xs[onclick*="edit"]:active {
      transform: translateY(0);
    }

    /* استبعاد أزرار كشف الحساب (showCustomerStatement / showSupplierStatement) لأنها تحتوي على نص onclick مختلف */
    .table-actions .btn.btn-outline.btn-xs[onclick*="Statement"] {
      background: transparent !important;
      color: var(--primary) !important;
      border: 1px solid var(--primary) !important;
      box-shadow: none !important;
    }

    .table-actions .btn.btn-outline.btn-xs[onclick*="Statement"]:hover {
      background: var(--primary) !important;
      color: #ffffff !important;
      transform: none;
    }

    /* ===== 2) زر "سجل المبيعات" في صفحة نقطة البيع (POS) — أزرق بدون شادو ===== */
    #page-pos .page-actions .btn[onclick*="invoices"] {
      background: var(--primary) !important;
      color: #ffffff !important;
      border: 1px solid var(--primary) !important;
      box-shadow: none !important;
      font-weight: 600;
      transition: all 0.25s ease !important;
    }

    #page-pos .page-actions .btn[onclick*="invoices"]:hover {
      background: var(--primary-dark) !important;
      border-color: var(--primary-dark) !important;
      box-shadow: none !important;
    }

    #page-pos .page-actions .btn[onclick*="invoices"] i {
      color: #ffffff !important;
    }

    /* ===== 3) زر "اليوم" بجانب فلتر التاريخ في جميع الصفحات ===== */
    .date-filter-bar .btn-filter-reset {
      background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
      color: #ffffff !important;
      border: 1px solid transparent !important;
      font-weight: 600;
      padding: 6px 14px !important;
      box-shadow: 0 2px 8px rgba(16, 185, 129, 0.28), 0 1px 2px rgba(5, 150, 105, 0.15) !important;
      transition: all 0.2s ease !important;
    }

    .date-filter-bar .btn-filter-reset:hover {
      background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
      color: #ffffff !important;
      border-color: transparent !important;
      transform: translateY(-1px);
      box-shadow: 0 4px 14px rgba(16, 185, 129, 0.40), 0 2px 4px rgba(5, 150, 105, 0.20) !important;
    }

    /* استثناء زر "كل الفترات" عشان عنده ستايل خاص بالـ inline style */
    .date-filter-bar .btn-filter-reset[style*="primary"] {
      background: var(--primary) !important;
      box-shadow: 0 2px 8px rgba(24, 116, 102, 0.28) !important;
    }

    .date-filter-bar .btn-filter-reset[style*="primary"]:hover {
      background: var(--primary-dark) !important;
      box-shadow: 0 4px 14px rgba(24, 116, 102, 0.40) !important;
    }

    /* ===== أزرار "إنشاء مرتجع" (بيع/شراء) — لون بنفسجي محايد موحّد يدل على "تصحيح/تعديل"
       بدل الأحمر (يوحي بخطر) أو الأخضر (يوحي بنجاح/إجراء موصى به) ===== */
    .btn-return-action {
      background: #7c3aed !important;
      border-color: #7c3aed !important;
      color: #ffffff !important;
      box-shadow: 0 2px 8px rgba(124, 58, 237, 0.32) !important;
      transition: all 0.2s ease !important;
    }

    .btn-return-action:hover {
      background: #6d28d9 !important;
      border-color: #6d28d9 !important;
      box-shadow: 0 4px 14px rgba(124, 58, 237, 0.45) !important;
    }

    /* اسم قديم (توافق خلفي) */
    .btn-purchase-return-manual {
      background: #7c3aed !important;
      border-color: #7c3aed !important;
      color: #ffffff !important;
      box-shadow: 0 2px 8px rgba(124, 58, 237, 0.32) !important;
      transition: all 0.2s ease !important;
    }

    .btn-purchase-return-manual:hover {
      background: #6d28d9 !important;
      border-color: #6d28d9 !important;
      box-shadow: 0 4px 14px rgba(124, 58, 237, 0.45) !important;
    }

    /* ===== أزرار الإجراءات في منتصف الصف عمودياً ===== */
    td .table-actions,
td>.table-actions {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 4px !important;
      flex-wrap: nowrap !important;
    }

    tbody td:has(.table-actions),
tbody td[data-label="الإجراءات"] {
      vertical-align: middle !important;
    }

    /* ===== 4) إبراز حقل البحث أعلى كل صفحة بها سجل ===== */
    .page-header .search-bar {
      background: var(--surface) !important;
      border: 2px solid var(--primary-light) !important;
      border-radius: 12px !important;
      padding: 10px 14px !important;
      min-width: 280px !important;
      max-width: 360px !important;
      width: 100% !important;
      box-shadow: 0 2px 8px rgba(24, 116, 102, 0.08), inset 0 1px 2px rgba(0, 0, 0, 0.02) !important;
      transition: all 0.25s ease !important;
    }

    .page-header .search-bar:hover {
      border-color: var(--primary) !important;
      box-shadow: 0 4px 14px rgba(24, 116, 102, 0.15) !important;
    }

    .page-header .search-bar:focus-within {
      border-color: var(--primary) !important;
      box-shadow: 0 0 0 4px rgba(24, 116, 102, 0.12), 0 4px 14px rgba(24, 116, 102, 0.18) !important;
    }

    .page-header .search-bar i {
      color: var(--primary) !important;
      font-size: 0.95rem !important;
    }

    .page-header .search-bar input[type="text"] {
      font-size: 0.92rem !important;
      font-weight: 500 !important;
      color: var(--text) !important;
      border: none !important;
      background: none !important;
      box-shadow: none !important;
    }

    .page-header .search-bar input::placeholder {
      color: var(--text-muted) !important;
      opacity: 0.75;
    }

    .page-header-left {
      min-width: 280px;
      flex: 1;
    }

    /* ===== Mobile responsive ===== */
    @media (max-width: 768px) {
      .page-header .search-bar {
        min-width: 100% !important;
        max-width: 100% !important;
      }

      .page-header-left {
        width: 100%;
        min-width: 100%;
      }
    }

    /* ===== عرض ثابت لحقول بحث معيّنة (سندات القبض/الدفع، الإيراد/المصروف الخارجي) — على
       سطح المكتب بس، عشان مايتحولش لارتفاع غريب لما الشريط يتكدّس عمودي على الموبايل ===== */
    @media (min-width: 769px) {
      .search-bar-fixed-240 {
        flex: 0 0 240px !important;
        max-width: 240px !important;
      }
    }

    /* ===== Search bar داخل شريط فلتر التاريخ (مدمج مع الفلاتر) ===== */
    .date-filter-bar .search-bar.search-bar-inline {
      flex: 1;
      min-width: 200px;
      max-width: 320px;
      height: 34px;
      padding: 4px 12px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      box-shadow: none;
      transition: all 0.2s ease;
    }

    .date-filter-bar .search-bar.search-bar-inline:hover {
      border-color: var(--primary);
    }

    .date-filter-bar .search-bar.search-bar-inline:focus-within {
      border-color: var(--primary);
    }

    .date-filter-bar .search-bar.search-bar-inline i {
      color: var(--primary);
      font-size: 0.82rem;
    }

    .date-filter-bar .search-bar.search-bar-inline input {
      font-size: 0.85rem;
      font-weight: 500;
      color: var(--text);
      background: transparent !important;
      border: none !important;
      outline: none !important;
      box-shadow: none !important;
      width: 100%;
      font-family: var(--font);
    }

    .date-filter-bar .search-bar.search-bar-inline input::placeholder {
      color: var(--text-muted);
      opacity: 0.75;
    }

    @media (max-width: 768px) {
      .date-filter-bar .search-bar.search-bar-inline {
        max-width: 100%;
        width: 100%;
        min-width: 100%;
      }

      #page-privateAccounts .private-accounts-search {
        height: 42px;
        min-height: 42px;
      }
    }

    /* إخفاء page-header-left فاضي (مفيش حاجة جواه) عشان ما يخلقش مساحة فارغة على الشمال */
    .page-header>.page-header-left:empty {
      flex: 0;
      min-width: 0;
      display: none;
    }

    /* ===== Dashboard Quick Actions - Safe Modal Only ===== */
    .quick-actions-panel {
      position: relative;
      overflow: hidden;
      margin: 0 0 22px;
      border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--border));
      background: linear-gradient(135deg, color-mix(in srgb, var(--surface) 92%, var(--primary-light)) 0%, var(--surface) 62%, color-mix(in srgb, var(--surface) 86%, #1AA37A 14%) 100%);
    }

    .quick-actions-panel::before {
      content: '';
      position: absolute;
      inset: -80px auto auto -80px;
      width: 190px;
      height: 190px;
      border-radius: 50%;
      background: radial-gradient(circle, color-mix(in srgb, var(--primary) 18%, transparent) 0%, transparent 70%);
      pointer-events: none;
    }

    .quick-actions-panel .card-header {
      position: relative;
      z-index: 1;
      align-items: flex-start;
    }

    .quick-actions-grid {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 12px;
    }

    .quick-action-card {
      --qa-color: var(--primary);
      position: relative;
      overflow: hidden;
      min-height: 112px;
      padding: 14px 10px;
      border: 0;
      border-radius: 16px;
      font-family: var(--font);
      color: #fff;
      background: linear-gradient(135deg, var(--qa-color), color-mix(in srgb, var(--qa-color) 76%, #020617));
      box-shadow: 0 8px 22px color-mix(in srgb, var(--qa-color) 24%, transparent);
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 9px;
      transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
      isolation: isolate;
    }

    .quick-action-card::before {
      content: '';
      position: absolute;
      inset: auto -28px -34px auto;
      width: 92px;
      height: 92px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .14);
      z-index: -1;
    }

    .quick-action-card::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(255, 255, 255, .14), transparent 48%);
      pointer-events: none;
    }

    .quick-action-card:hover {
      transform: translateY(-4px);
      filter: saturate(1.08) brightness(1.03);
      box-shadow: 0 14px 32px color-mix(in srgb, var(--qa-color) 34%, transparent);
    }

    .quick-action-card i {
      font-size: 1.65rem;
      line-height: 1;
      text-shadow: 0 3px 10px rgba(0, 0, 0, .18);
    }

    .quick-action-card span {
      font-size: .82rem;
      line-height: 1.45;
      font-weight: 800;
      text-align: center;
      text-shadow: 0 1px 4px rgba(0, 0, 0, .22);
    }

    .quick-action-card small {
      margin-top: -5px;
      font-size: .68rem;
      opacity: .82;
      font-weight: 700;
      text-align: center;
    }

    

    @media(max-width:900px) {
      .quick-actions-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
      }

      .quick-action-card {
        min-height: 104px;
        border-radius: 14px;
      }
    }

    @media(max-width:560px) {
      .quick-actions-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .quick-action-card {
        min-height: 96px;
        padding: 12px 8px;
      }

      .quick-action-card i {
        font-size: 1.38rem;
      }

      .quick-action-card span {
        font-size: .75rem;
      }

      .quick-action-card small {
        display: none;
      }
    }

    /* ════════════════════════════════════════════════════════════════════
   ███  هوية بوابة مصر الرقمية الرسمية - Government Egypt Theme  ███
   ════════════════════════════════════════════════════════════════════ */

/* ===== 2. تعديل التوب بار - ستايل حكومى رسمى ===== */
    .topbar {
      background: var(--surface) !important;
      border-bottom: 0 solid transparent !important;
      box-shadow: 0 2px 8px rgba(24, 116, 102, 0.08) !important;
      padding: 0 20px !important;
      height: 68px !important;
    }

    .topbar::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 120px;
      height: 2px;
      background: var(--gov-gold);
    }

    .topbar-title {
      font-weight: 800 !important;
      color: var(--primary) !important;
      letter-spacing: 0.2px;
      position: relative;
      padding-right: 14px;
    }

    .topbar-title::before {
      content: '';
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 4px;
      height: 22px;
      background: var(--gov-gold);
      border-radius: 2px;
    }

    /* ===== 3. الأزرار - ستايل حكومى رسمى ===== */
    .btn {
      border-radius: 8px !important;
      font-weight: 700 !important;
      letter-spacing: 0.1px;
      transition: all 0.18s ease !important;
      border: 1px solid transparent !important;
      position: relative;
      overflow: hidden;
    }

    .btn-primary {
      background: var(--primary) !important;
      color: #fff !important;
      border-color: var(--primary-dark) !important;
      box-shadow: 0 1px 2px rgba(24, 116, 102, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
    }

    .btn-primary:hover {
      background: var(--primary-dark) !important;
      box-shadow: 0 4px 12px rgba(24, 116, 102, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
      transform: translateY(-1px);
    }

    .btn-success {
      background: var(--success) !important;
      border-color: #0F8870 !important;
      box-shadow: 0 1px 2px rgba(22, 160, 133, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
    }

    .btn-success:hover {
      background: #138970 !important;
      box-shadow: 0 4px 12px rgba(22, 160, 133, 0.28) !important;
      transform: translateY(-1px);
    }

    .btn-danger {
      background: var(--danger) !important;
      border-color: #962B21 !important;
    }

    .btn-warning {
      background: var(--warning) !important;
      border-color: #B07209 !important;
      color: #fff !important;
    }

    .btn-outline {
      background: var(--surface) !important;
      border: 1.5px solid var(--primary) !important;
      color: var(--primary) !important;
      box-shadow: 0 1px 2px rgba(24, 116, 102, 0.06) !important;
    }

    .btn-outline:hover {
      background: var(--primary-light) !important;
      color: var(--primary-dark) !important;
    }

    /* ===== 4. الكروت - ستايل حكومى مع شريط جانبى ===== */
    .card {
      background: var(--surface) !important;
      border: 1px solid var(--border) !important;
      border-radius: 10px !important;
      box-shadow: 0 1px 3px rgba(26, 46, 42, 0.04), 0 2px 8px rgba(24, 116, 102, 0.04) !important;
      overflow: hidden;
      position: relative;
      transition: box-shadow 0.2s ease;
    }

    .card:hover {
      box-shadow: 0 2px 6px rgba(26, 46, 42, 0.06), 0 6px 18px rgba(24, 116, 102, 0.08) !important;
    }

    .card-header {
      background: linear-gradient(180deg, var(--surface) 0%, var(--surface2) 100%) !important;
      border-bottom: 1px solid var(--border) !important;
      padding: 14px 18px !important;
      position: relative;
    }

    .card-header::before {
      content: '';
      position: absolute;
      right: 0;
      top: 14px;
      bottom: 14px;
      width: 3px;
      background: var(--primary);
      border-radius: 2px 0 0 2px;
    }

    .card-title {
      color: var(--text) !important;
      font-weight: 800 !important;
      font-size: 1rem !important;
      padding-right: 12px;
    }

    .card-title i {
      color: var(--primary) !important;
    }

    /* ===== 5. الـ Modals - ستايل حكومى ===== */
    .modal {
      border-radius: 12px !important;
      border: 1px solid var(--border) !important;
      box-shadow: 0 20px 60px rgba(26, 46, 42, 0.20), 0 8px 24px rgba(24, 116, 102, 0.08) !important;
      overflow: hidden;
    }

    .modal-header {
      background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%) !important;
      color: #fff !important;
      padding: 16px 22px !important;
      border-bottom: 3px solid var(--gov-gold) !important;
      position: relative;
    }

    .modal-header::after {
      content: '';
      position: absolute;
      bottom: -3px;
      right: 0;
      width: 80px;
      height: 3px;
      background: var(--gov-gold);
    }

    .modal-header .modal-title,
.modal-header .modal-title i {
      color: #fff !important;
      font-weight: 800 !important;
    }

    .modal-close {
      color: rgba(255, 255, 255, 0.85) !important;
      background: rgba(255, 255, 255, 0.10) !important;
      border-radius: 6px !important;
      width: 32px !important;
      height: 32px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      transition: background 0.2s;
    }

    .modal-close:hover {
      background: rgba(255, 255, 255, 0.22) !important;
      color: #fff !important;
    }

    /* ===== 6. الـ Inputs - ستايل حكومى ===== */
    input[type="text"]:not(.no-gov),
input[type="email"]:not(.no-gov),
input[type="password"]:not(.no-gov),
input[type="number"]:not(.no-gov),
input[type="tel"]:not(.no-gov),
input[type="search"]:not(.no-gov),
input[type="date"]:not(.no-gov),
input[type="datetime-local"]:not(.no-gov),
select:not(.no-gov),
textarea:not(.no-gov) {
      border-radius: 8px !important;
      border: 1.5px solid var(--border) !important;
      background: var(--surface) !important;
      transition: border-color 0.15s, box-shadow 0.15s !important;
      font-family: var(--font) !important;
    }

    input[type="text"]:not(.no-gov):focus,
input[type="email"]:not(.no-gov):focus,
input[type="password"]:not(.no-gov):focus,
input[type="number"]:not(.no-gov):focus,
input[type="tel"]:not(.no-gov):focus,
input[type="search"]:not(.no-gov):focus,
input[type="date"]:not(.no-gov):focus,
input[type="datetime-local"]:not(.no-gov):focus,
select:not(.no-gov):focus,
textarea:not(.no-gov):focus {
      border-color: var(--primary) !important;
      box-shadow: 0 0 0 3px rgba(24, 116, 102, 0.12) !important;
      outline: none !important;
    }

    /* ===== 7. السايدبار - شعار رسمى ===== */
    .sidebar {
      border-left: 1px solid var(--border) !important;
      box-shadow: -1px 0 4px rgba(24, 116, 102, 0.04) !important;
    }

    .sidebar-header {
      background: linear-gradient(180deg, var(--surface) 0%, var(--primary-light) 100%) !important;
      border-bottom: 2px solid var(--primary) !important;
      position: relative;
    }

    .sidebar-header::after {
      content: '';
      position: absolute;
      bottom: -2px;
      right: 20px;
      width: 60px;
      height: 2px;
      background: var(--gov-gold);
    }

    

    /* أيقونة الشعار فى السايدبار */
    .sidebar .company-logo,
.sidebar .logo-icon,
.sidebar .brand-icon {
      background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%) !important;
      color: #fff !important;
      border-radius: 10px !important;
      box-shadow: 0 4px 12px rgba(24, 116, 102, 0.25) !important;
    }

    /* عناصر النافيجيشن النشطة */
    .nav-item.active,
.nav-link.active {
      background: var(--sidebar-active-bg) !important;
      color: var(--sidebar-active-color) !important;
      border-right: 3px solid transparent !important;
      font-weight: 700 !important;
    }

    .nav-item.active i,
.nav-link.active i {
      color: var(--primary) !important;
    }

    /* ===== 8. الجداول - ستايل رسمى حكومى ===== */
    table {
      border-collapse: separate !important;
      border-spacing: 0;
    }

    table thead th {
      background: linear-gradient(180deg, var(--primary) 0%, var(--primary-dark) 100%) !important;
      color: #fff !important;
      font-weight: 700 !important;
      font-size: 0.86rem !important;
      letter-spacing: 0.2px;
      padding: 12px 14px !important;
      text-align: right;
      border-bottom: 2px solid var(--gov-gold) !important;
      position: sticky;
      top: 0;
      z-index: 1;
    }

    table thead th:first-child {
      border-top-right-radius: 8px;
    }

    table thead th:last-child {
      border-top-left-radius: 8px;
    }

    table tbody tr {
      transition: background 0.15s;
    }

    table tbody tr:nth-child(even) {
      background: var(--surface2) !important;
    }

    table tbody tr:hover {
      background: var(--primary-light) !important;
    }

    table tbody td {
      padding: 10px 14px !important;
      border-bottom: 1px solid var(--border) !important;
      font-size: 0.88rem;
    }

    /* ===== 9. الكروت الإحصائية - الستات كاردز ===== */
    .stat-card {
      border-radius: 10px !important;
      border: 1px solid var(--border) !important;
      background: var(--surface) !important;
      box-shadow: 0 1px 3px rgba(26, 46, 42, 0.04), 0 2px 8px rgba(24, 116, 102, 0.04) !important;
      position: relative;
      overflow: hidden;
      transition: all 0.2s;
    }

    .stat-card::before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      width: 4px;
      background: var(--primary);
    }

    .stat-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(24, 116, 102, 0.12), 0 2px 8px rgba(26, 46, 42, 0.06) !important;
    }

    /* ===== 10. الـ Page Header ===== */
    .page-header {
      background: var(--surface) !important;
      border: 1px solid var(--border) !important;
      border-right: 4px solid var(--primary) !important;
      border-radius: 10px !important;
      padding: 16px !important;
      margin-bottom: 18px;
      box-shadow: 0 1px 3px rgba(24, 116, 102, 0.04) !important;
      position: relative;
    }

    .page-header h1,
.page-header h2,
.page-header .page-title {
      color: var(--primary) !important;
      font-weight: 800 !important;
    }

    /* ===== 11. شارات الحالة (Badges) - باستيل رسمى ===== */
    .badge,
.status-badge {
      border-radius: 6px !important;
      font-weight: 700 !important;
      padding: 4px 10px !important;
      font-size: 0.76rem !important;
      letter-spacing: 0.2px;
      border: 1px solid transparent;
    }

    .badge-success,
.status-paid,
.status-completed {
      background: rgba(22, 160, 133, 0.12) !important;
      color: #0F8870 !important;
      border-color: rgba(22, 160, 133, 0.25) !important;
    }

    .badge-danger,
.status-unpaid,
.status-cancelled {
      background: rgba(192, 57, 43, 0.10) !important;
      color: #962B21 !important;
      border-color: rgba(192, 57, 43, 0.22) !important;
    }

    .badge-warning,
.status-pending {
      background: rgba(214, 137, 16, 0.12) !important;
      color: #9E660C !important;
      border-color: rgba(214, 137, 16, 0.25) !important;
    }

    .badge-info {
      background: rgba(40, 116, 166, 0.10) !important;
      color: #1F5C85 !important;
      border-color: rgba(40, 116, 166, 0.22) !important;
    }

    /* ===== 12. أزرار الأيقونة (btn-icon) ===== */
    .btn-icon {
      border-radius: 8px !important;
      border: 1px solid var(--border) !important;
      background: var(--surface) !important;
      color: var(--text-muted) !important;
      transition: all 0.15s !important;
    }

    .btn-icon:hover {
      border-color: var(--primary) !important;
      color: var(--primary) !important;
      background: var(--primary-light) !important;
    }

    /* ===== 13. شاشة تسجيل الدخول - ستايل حكومى ===== */
    .btn-login {
      background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%) !important;
      border: 1px solid var(--primary-dark) !important;
      border-radius: 8px !important;
      box-shadow: 0 4px 12px rgba(24, 116, 102, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
      font-weight: 800 !important;
      letter-spacing: 0.3px;
      position: relative;
      overflow: hidden;
    }

    .btn-login:hover {
      background: linear-gradient(135deg, var(--primary-dark) 0%, #084538 100%) !important;
      box-shadow: 0 6px 20px rgba(24, 116, 102, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    }

    /* ===== 14. سكرول بار رسمى ===== */
    *::-webkit-scrollbar {
      width: 10px;
      height: 10px;
    }

    *::-webkit-scrollbar-track {
      background: var(--surface2);
    }

    *::-webkit-scrollbar-thumb {
      background: rgba(24, 116, 102, 0.25);
      border-radius: 5px;
      border: 2px solid var(--surface2);
    }

    *::-webkit-scrollbar-thumb:hover {
      background: rgba(24, 116, 102, 0.45);
    }

    

    

    /* ===== 15. الخلفية الرئيسية - بترن خفيف رسمى ===== */
    body {
      background-color: var(--bg) !important;
      background-image:
        radial-gradient(circle at 1px 1px, rgba(24, 116, 102, 0.04) 1px, transparent 0);
      background-size: 24px 24px;
    }

    

    /* ===== 16. الـ Tabs ===== */
    .tab-btn,
.tab-link {
      border-radius: 8px 8px 0 0 !important;
      border-bottom: 2px solid transparent !important;
      font-weight: 700 !important;
      color: var(--text-muted) !important;
      transition: all 0.15s !important;
    }

    .tab-btn.active,
.tab-link.active {
      color: var(--primary) !important;
      border-bottom-color: var(--primary) !important;
      background: var(--primary-light) !important;
    }

    /* ===== 17. الـ Toast Notifications ===== */
    .toast {
      border-radius: 8px !important;
      box-shadow: 0 8px 24px rgba(26, 46, 42, 0.16) !important;
      border-right: 4px solid var(--primary) !important;
      font-weight: 600;
    }

    .toast.toast-success {
      border-right-color: var(--success) !important;
    }

    .toast.toast-error,
.toast.toast-danger {
      border-right-color: var(--danger) !important;
    }

    .toast.toast-warning {
      border-right-color: var(--warning) !important;
    }

    /* ===== 18. القوائم المنسدلة (Dropdowns) ===== */
    .dropdown-menu,
.menu-popup {
      border-radius: 8px !important;
      border: 1px solid var(--border) !important;
      box-shadow: 0 8px 24px rgba(26, 46, 42, 0.12), 0 2px 6px rgba(24, 116, 102, 0.04) !important;
      padding: 6px !important;
    }

    .dropdown-item:hover,
.menu-popup-item:hover {
      background: var(--primary-light) !important;
      color: var(--primary) !important;
    }

    /* ===== 19. Quick Action Cards ===== */
    .quick-action-card {
      border-radius: 10px !important;
      border: 1px solid var(--border) !important;
      background: var(--surface) !important;
      color: var(--text) !important;
      transition: all 0.18s !important;
      position: relative;
      overflow: hidden;
    }

    .quick-action-card::before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      width: 100%;
      height: 3px;
      background: linear-gradient(90deg, var(--primary), var(--gov-gold));
      transform: scaleX(0);
      transform-origin: right;
      transition: transform 0.25s;
    }

    .quick-action-card:hover {
      border-color: var(--primary) !important;
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(24, 116, 102, 0.12) !important;
    }

    .quick-action-card:hover::before {
      transform: scaleX(1);
    }

    .quick-action-card i {
      color: var(--qa-color, var(--primary)) !important;
      text-shadow: none !important;
    }

    .quick-action-card span {
      color: var(--text) !important;
      text-shadow: none !important;
    }

    .quick-action-card small {
      color: var(--text-muted, var(--text)) !important;
      opacity: .75;
    }

    /* ===== 20. تثبيت ارتفاع الـ body بالنسبة للشريط العلوى ===== */
    body {
      padding-top: 0;
    }

    /* ===== Print: نخفى الشريط العلوى عند الطباعة ===== */
    @media print {body {
        padding-top: 0 !important;
      }
    }

    /* ============================================================ */
    /* ===== صفحة التقارير المحاسبية — Responsive Complete ======== */
    /* ============================================================ */

    /* === الـ Container الرئيسى === */
    #page-reports {
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
    }

    #page-reports * {
      box-sizing: border-box;
    }

    /* === كارت اختيار التقارير — تصميم حكومي رسمي صغير === */
    #page-reports .rep-tabs-card {
      margin-bottom: 12px;
      padding: 12px;
      overflow: visible;
      border: 1px solid rgba(24, 116, 102, 0.16);
      background: linear-gradient(180deg, var(--surface) 0%, var(--surface2) 100%);
      box-shadow: var(--shadow);
    }

    #page-reports .rep-tabs-card::before {
      content: '';
      display: block;
      height: 3px;
      margin: -12px -12px 10px;
      border-radius: var(--radius) var(--radius) 0 0;
      background: linear-gradient(90deg, var(--primary), var(--secondary), var(--gov-gold));
    }

    #page-reports .rep-tabs-wrap {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    #page-reports .rep-section-group {
      display: grid;
      grid-template-columns: 150px 1fr;
      align-items: center;
      gap: 10px;
      padding: 6px;
      border: 1px solid rgba(24, 116, 102, 0.10);
      border-radius: 10px;
      background: rgba(24, 116, 102, 0.025);
    }

    #page-reports .rep-section-label {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      min-height: 34px;
      padding: 7px 10px;
      border-radius: 8px;
      color: var(--primary-dark);
      background: rgba(24, 116, 102, 0.08);
      border: 1px solid rgba(24, 116, 102, 0.14);
      font-size: 0.78rem;
      font-weight: 800;
      white-space: nowrap;
    }

    #page-reports .rep-section-label i {
      color: var(--primary);
      font-size: 0.82rem;
    }

    #page-reports .rep-section-row {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      align-items: center;
    }

    #page-reports .rep-tab {
      min-height: 34px;
      padding: 7px 11px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 8px;
      cursor: pointer;
      font-family: var(--font);
      font-size: 0.78rem;
      font-weight: 700;
      color: var(--text-muted);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: background .16s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
      white-space: nowrap;
      position: relative;
      box-shadow: 0 1px 2px rgba(26, 46, 42, 0.04);
    }

    #page-reports .rep-tab i {
      font-size: 0.8rem;
      color: var(--primary);
      opacity: .82;
    }

    #page-reports .rep-tab:hover {
      color: var(--primary-dark);
      border-color: rgba(24, 116, 102, 0.32);
      background: rgba(24, 116, 102, 0.06);
      transform: translateY(-1px);
    }

    #page-reports .rep-tab.active {
      color: #ffffff;
      border-color: var(--primary);
      background: linear-gradient(135deg, var(--primary-dark), var(--primary));
      box-shadow: 0 6px 14px rgba(24, 116, 102, 0.20);
    }

    #page-reports .rep-tab.active i {
      color: #ffffff;
      opacity: 1;
    }

    /* اختيار سريع رسمي — يظهر أكثر على الموبايل */
    #page-reports .rep-select-row {
      display: grid;
      grid-template-columns: 120px 1fr;
      align-items: center;
      gap: 10px;
      padding: 0;
      margin-bottom: 8px;
      border-radius: 0;
      border: none;
      background: transparent;
    }

    #page-reports .rep-select-label {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      color: var(--primary-dark);
      font-size: 0.8rem;
      font-weight: 800;
      white-space: nowrap;
    }

    #page-reports .rep-select-label i {
      color: var(--primary);
    }

    #page-reports .rep-report-select {
      width: 100%;
      min-height: 38px;
      border: 1px solid rgba(24, 116, 102, 0.24);
      border-radius: 9px;
      background: var(--surface);
      color: var(--text);
      padding: 0 12px;
      font-family: var(--font);
      font-size: 0.86rem;
      font-weight: 700;
      outline: none;
    }

    /* ===== قائمة "اختر التقرير" المخصّصة بالكامل — تفتح جوه الصفحة نفسها بتصميمنا،
   بدل قائمة النظام الافتراضية على الموبايل ===== */
    .custom-dd {
      position: relative;
      width: 100%;
    }

    .custom-dd-trigger {
      width: 100%;
      min-height: 38px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      border: 1px solid rgba(24, 116, 102, 0.24);
      border-radius: 9px;
      background: var(--surface);
      color: var(--text);
      padding: 0 12px;
      font-family: var(--font);
      font-size: 0.86rem;
      font-weight: 700;
      cursor: pointer;
      outline: none;
      transition: border-color .15s ease, box-shadow .15s ease;
    }

    .custom-dd-trigger:hover {
      border-color: var(--primary);
    }

    .custom-dd.open .custom-dd-trigger {
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(24, 116, 102, 0.12);
    }

    .custom-dd.open .custom-dd-trigger i {
      transform: rotate(180deg);
    }

    .custom-dd-trigger i {
      transition: transform .15s ease;
      color: var(--text-muted);
      font-size: .78rem;
    }

    .custom-dd-panel {
      display: none;
      position: absolute;
      z-index: 60;
      top: calc(100% + 6px);
      right: 0;
      left: 0;
      max-height: 280px;
      overflow-y: auto;
      background: var(--surface);
      border: 1px solid rgba(24, 116, 102, 0.2);
      border-radius: 12px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
      padding: 6px;
    }

    .custom-dd.open .custom-dd-panel {
      display: block;
    }

    .custom-dd-option {
      padding: 11px 14px;
      border-radius: 8px;
      font-size: .86rem;
      font-weight: 600;
      color: var(--text);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .custom-dd-option:hover {
      background: rgba(24, 116, 102, 0.08);
    }

    .custom-dd-option.selected {
      background: var(--primary);
      color: #fff;
    }

    .custom-dd-option .placeholder-txt {
      color: var(--text-muted);
      font-weight: 600;
    }

    .custom-dd-overlay {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 55;
      background: transparent;
    }

    .custom-dd-overlay.open {
      display: block;
    }

    

    

    

    #page-reports .rep-report-select:focus {
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(24, 116, 102, 0.12);
    }

    

    

    

    

    

    

    

    

    

    

    

    @media (max-width: 900px) {
      #page-reports .rep-tabs-card {
        padding: 10px !important;
      }

      #page-reports .rep-tabs-card::before {
        margin: -10px -10px 9px !important;
      }

      #page-reports .rep-select-row {
        display: grid !important;
        grid-template-columns: 105px 1fr !important;
      }

      #page-reports .rep-section-group {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
        padding: 6px !important;
      }

      #page-reports .rep-section-label {
        min-height: 30px !important;
        padding: 6px 9px !important;
        font-size: .74rem !important;
      }

      #page-reports .rep-section-row {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        padding-bottom: 2px;
      }

      #page-reports .rep-section-row::-webkit-scrollbar {
        height: 3px;
      }

      #page-reports .rep-section-row::-webkit-scrollbar-thumb {
        background: var(--primary);
        border-radius: 6px;
      }

      #page-reports .rep-tab {
        flex: 0 0 auto !important;
        min-height: 32px !important;
        padding: 6px 10px !important;
        font-size: .75rem !important;
      }
    }

    @media (max-width: 520px) {
      #page-reports .rep-tabs-wrap {
        display: none !important;
      }

      #page-reports .rep-select-row {
        margin-bottom: 0 !important;
        grid-template-columns: 1fr !important;
        gap: 7px !important;
      }

      #page-reports .rep-report-select {
        min-height: 40px !important;
        font-size: .84rem !important;
      }
    }

    /* === التخطيط: Sidebar + Main === */
    #page-reports .rep-layout {
      display: grid;
      grid-template-columns: 280px 1fr;
      gap: 16px;
      align-items: start;
      width: 100%;
    }

    /* ★ لما مفيش تقرير مختار، الفلاتر مختفية والعرض الرئيسي (رسالة التوجيه) لازم ياخد
   العرض بالكامل بدل ما يفضل محصور فى مساحة عمود الفلاتر (280px) القديمة */
    #page-reports .rep-layout.rep-layout-full {
      grid-template-columns: 1fr;
    }

    /* === Sidebar الفلاتر === */
    #page-reports .rep-sidebar {
      padding: 0;
      position: sticky;
      top: 84px;
      max-height: calc(100vh - 100px);
      overflow-y: auto;
    }

    #page-reports .rep-sidebar-header {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 14px 16px;
      background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
      color: #fff;
      font-weight: 700;
      font-size: 0.95rem;
    }

    #page-reports .rep-filter-group {
      padding: 14px 16px;
      border-bottom: 1px solid var(--border);
    }

    #page-reports .rep-filter-group:last-of-type {
      border-bottom: none;
    }

    #page-reports .rep-filter-label {
      display: block;
      font-size: 0.82rem;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 10px;
    }

    #page-reports .rep-mini-label {
      display: block;
      font-size: 0.75rem;
      color: var(--text-muted);
      margin-bottom: 4px;
    }

    #page-reports .rep-input {
      width: 100%;
      max-width: 100%;
      padding: 8px 10px;
      border: 1px solid var(--border);
      border-radius: 7px;
      background: var(--surface);
      color: var(--text);
      font-size: 0.85rem;
      font-family: var(--font);
    }

    #page-reports .rep-input:focus {
      outline: none;
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(24, 116, 102, 0.12);
    }

    #page-reports .rep-dates-stack {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-top: 10px;
    }

    /* === Chips الفترة === */
    #page-reports .rep-period-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    #page-reports .rep-period-chip {
      padding: 6px 10px;
      border: 1px solid var(--border);
      border-radius: 16px;
      background: var(--surface);
      color: var(--text);
      font-size: 0.78rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    #page-reports .rep-period-chip:hover {
      border-color: var(--primary);
      color: var(--primary);
    }

    #page-reports .rep-period-chip.active {
      background: var(--primary);
      color: #fff;
      border-color: var(--primary);
    }

    /* === أزرار التطبيق === */
    #page-reports .rep-filter-actions {
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding: 14px 16px;
      background: var(--surface2);
    }

    #page-reports .rep-apply-btn {
      padding: 10px 14px;
      background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
      color: #fff;
      border: none;
      border-radius: 8px;
      font-weight: 700;
      font-size: 0.88rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }

    #page-reports .rep-reset-btn {
      padding: 8px 14px;
      background: transparent;
      color: var(--text-muted);
      border: 1px solid var(--border);
      border-radius: 8px;
      font-weight: 600;
      font-size: 0.82rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }

    /* === العرض الرئيسى === */
    #page-reports .rep-main {
      display: flex;
      flex-direction: column;
      gap: 14px;
      min-width: 0;
      /* مهم لـ overflow الصحيح فى grid */
    }

    #page-reports .rep-actions-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 12px 18px;
      gap: 12px;
      flex-wrap: wrap;
    }

    #page-reports .rep-doc-meta {
      flex: 1 1 200px;
      min-width: 0;
    }

    #page-reports .rep-doc-title {
      margin: 0;
      font-size: 1.15rem;
      font-weight: 800;
      color: var(--primary);
    }

    #page-reports .rep-doc-subtitle {
      font-size: 0.82rem;
      color: var(--text-muted);
      margin-top: 4px;
    }

    /* === الوثيقة المحاسبية === */
    #page-reports .rep-doc {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 26px 30px;
      min-height: 400px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    }

    #page-reports .rep-doc-header {
      text-align: center;
      padding-bottom: 18px;
      margin-bottom: 22px;
      border-bottom: 2px solid var(--primary);
      position: relative;
    }

    #page-reports .rep-doc-header::after {
      content: '';
      position: absolute;
      bottom: -2px;
      left: 50%;
      transform: translateX(-50%);
      width: 140px;
      height: 2px;
      background: var(--gov-gold, #C9A961);
    }

    #page-reports .rep-doc-header h1 {
      margin: 0 0 6px;
      font-size: 1.55rem;
      color: var(--primary);
      font-weight: 800;
    }

    #page-reports .rep-doc-header .rep-doc-period {
      font-size: 0.92rem;
      color: var(--text);
      margin: 6px 0 4px;
      font-weight: 600;
    }

    #page-reports .rep-doc-header .rep-doc-issued {
      font-size: 0.78rem;
      color: var(--text-muted);
    }

    /* === جدول الوثيقة المحاسبية === */
    #page-reports #rep-doc-body {
      width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }

    #page-reports .rep-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.92rem;
      margin: 0;
    }

    #page-reports .rep-table thead th {
      background: linear-gradient(180deg, #187466 0%, #145C52 100%);
      color: #fff;
      padding: 12px 14px;
      text-align: right;
      font-weight: 700;
      font-size: 0.88rem;
      border: 1px solid #145C52;
      white-space: nowrap;
    }

    #page-reports .rep-table tbody td {
      padding: 11px 14px;
      border: 1px solid var(--border);
      color: var(--text);
    }

    #page-reports .rep-table tbody tr:nth-child(even) td {
      background: var(--surface2);
    }

    #page-reports .rep-table tbody tr:hover td {
      background: rgba(24, 116, 102, 0.04);
    }

    #page-reports .rep-table .rep-num {
      text-align: left;
      font-variant-numeric: tabular-nums;
      font-weight: 600;
      direction: ltr;
      white-space: nowrap;
    }

    #page-reports .rep-table .rep-neg {
      color: #dc2626;
    }

    #page-reports .rep-table .rep-pos {
      color: #187466;
    }

    #page-reports .rep-table .rep-section-row td {
      background: linear-gradient(135deg, #187466 0%, #145C52 100%) !important;
      font-weight: 800 !important;
      color: #ffffff !important;
      border-top: 2px solid #145C52 !important;
      border-bottom: 2px solid #145C52 !important;
      font-size: 0.95rem;
      letter-spacing: 0.3px;
      padding: 12px 14px !important;
    }

    

    #page-reports .rep-table .rep-total-row td {
      background: var(--primary) !important;
      color: #fff !important;
      font-weight: 800;
      font-size: 1rem;
      border-color: var(--primary-dark);
    }

    #page-reports .rep-table .rep-subtotal-row td {
      background: var(--surface2);
      font-weight: 700;
      border-top: 1.5px solid var(--text-muted);
    }

    #page-reports .rep-empty {
      text-align: center;
      padding: 60px 20px;
      color: var(--text-muted);
    }

    #page-reports .rep-empty i {
      font-size: 3rem;
      display: block;
      margin-bottom: 14px;
      opacity: 0.3;
    }

    /* ============================================================ */
    /* ===== Responsive Breakpoints — Override Everything ========= */
    /* ============================================================ */

    /* تابلت كبير ≤ 1024px */
    @media (max-width: 1024px) {
      #page-reports .rep-layout {
        grid-template-columns: 240px 1fr !important;
        gap: 12px !important;
      }

      #page-reports .rep-tab {
        flex: 1 1 auto !important;
        padding: 10px 10px !important;
        font-size: 0.8rem !important;
      }

      #page-reports .rep-doc {
        padding: 22px 18px !important;
      }

      #page-reports .rep-doc-header h1 {
        font-size: 1.4rem !important;
      }
    }

    /* موبايل/تابلت صغير ≤ 900px */
    @media (max-width: 900px) {
      #page-reports .rep-layout {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
      }

      #page-reports .rep-sidebar {
        position: static !important;
        max-height: none !important;
        overflow: visible !important;
      }

      /* كل قسم: صف واحد قابل للسكرول */
      #page-reports .rep-section-row {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
      }

      #page-reports .rep-section-row::-webkit-scrollbar {
        height: 3px;
      }

      #page-reports .rep-section-row::-webkit-scrollbar-thumb {
        border-radius: 4px;
      }

      #page-reports .rep-section-group.grp-sales .rep-section-row::-webkit-scrollbar-thumb {
        background: #187466;
      }

      #page-reports .rep-section-group.grp-finance .rep-section-row::-webkit-scrollbar-thumb {
        background: #187466;
      }

      #page-reports .rep-section-group.grp-clients .rep-section-row::-webkit-scrollbar-thumb {
        background: #7D3C98;
      }

      #page-reports .rep-tab {
        flex: 0 0 auto !important;
        min-width: auto !important;
        padding: 10px 13px !important;
        font-size: 0.8rem !important;
      }

      /* شريط الإجراءات: عمودى */
      #page-reports .rep-actions-bar {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 12px !important;
      }

      /* الوثيقة */
      #page-reports .rep-doc {
        padding: 18px 14px !important;
      }

      #page-reports .rep-doc-header h1 {
        font-size: 1.2rem !important;
      }

      #page-reports .rep-doc-header .rep-doc-period {
        font-size: 0.82rem !important;
      }

      #page-reports .rep-doc-header .rep-doc-issued {
        font-size: 0.72rem !important;
      }

      /* الجدول: سكرول أفقى */
      #page-reports #rep-doc-body {
        margin: 0 -14px !important;
        padding: 0 14px !important;
      }

      #page-reports .rep-table {
        font-size: 0.8rem !important;
        min-width: 600px !important;
      }

      #page-reports .rep-table thead th {
        padding: 9px 8px !important;
        font-size: 0.78rem !important;
      }

      #page-reports .rep-table tbody td {
        padding: 8px !important;
        font-size: 0.78rem !important;
      }

      #page-reports .rep-table .rep-total-row td {
        font-size: 0.85rem !important;
      }

      #page-reports .rep-table .rep-section-row td {
        font-size: 0.85rem !important;
      }

      /* chips */
      #page-reports .rep-period-chips {
        gap: 5px !important;
      }

      #page-reports .rep-period-chip {
        padding: 6px 9px !important;
        font-size: 0.74rem !important;
      }
    }

    /* موبايل ≤ 600px */
    @media (max-width: 600px) {
      #page-reports .rep-tab {
        padding: 10px 11px !important;
        font-size: 0.76rem !important;
        gap: 5px !important;
      }

      #page-reports .rep-tab i {
        font-size: 0.78rem !important;
      }

      #page-reports .rep-sidebar-header {
        padding: 11px 13px !important;
        font-size: 0.88rem !important;
      }

      #page-reports .rep-filter-group {
        padding: 11px 13px !important;
      }

      #page-reports .rep-filter-label {
        font-size: 0.78rem !important;
      }

      #page-reports .rep-doc {
        padding: 14px 10px !important;
        border-radius: 8px !important;
      }

      #page-reports .rep-doc-header {
        padding-bottom: 12px !important;
        margin-bottom: 14px !important;
      }

      #page-reports .rep-doc-header h1 {
        font-size: 1.05rem !important;
        line-height: 1.4 !important;
      }

      #page-reports .rep-doc-header .rep-doc-period {
        font-size: 0.76rem !important;
        margin: 4px 0 2px !important;
      }

      #page-reports .rep-doc-header .rep-doc-issued {
        font-size: 0.7rem !important;
      }

      #page-reports .rep-table {
        font-size: 0.74rem !important;
        min-width: 520px !important;
      }

      #page-reports .rep-table thead th {
        padding: 8px 6px !important;
        font-size: 0.72rem !important;
      }

      #page-reports .rep-table tbody td {
        padding: 7px 6px !important;
        font-size: 0.74rem !important;
      }

      #page-reports .rep-table .rep-section-row td {
        font-size: 0.82rem !important;
        padding: 9px 8px !important;
      }

      #page-reports .rep-table .rep-total-row td {
        font-size: 0.8rem !important;
      }

      #page-reports .rep-table .rep-num {
        font-size: 0.74rem !important;
      }

      #page-reports .rep-doc-title {
        font-size: 1rem !important;
      }

      #page-reports .rep-doc-subtitle {
        font-size: 0.72rem !important;
      }

      #page-reports .rep-period-chip {
        padding: 5px 8px !important;
        font-size: 0.72rem !important;
      }

      #page-reports #rep-doc-body>div:not(table) {
        font-size: 0.72rem !important;
        padding: 9px 11px !important;
      }
    }

    /* موبايل صغير جداً ≤ 380px */
    @media (max-width: 380px) {
      #page-reports .rep-tab {
        padding: 9px 8px !important;
        font-size: 0.72rem !important;
      }

      #page-reports .rep-tab i {
        display: none !important;
      }
    }

    /* الطباعة لصفحة التقارير تتم عبر نافذة منفصلة من printActiveReport() */




    /* ===== توحيد محاذاة عناوين رؤوس الجداول =====
       يجعل عناوين خلايا الهيدر في منتصف الخلية، مع احترام أي خلية لها محاذاة خاصة مكتوبة inline أو بكلاس مخصص. */
    table thead th:not([style*="text-align"]):not(.text-start):not(.text-end):not(.align-start):not(.align-end),
.table-wrap thead th:not([style*="text-align"]):not(.text-start):not(.text-end):not(.align-start):not(.align-end),
.rep-table thead th:not([style*="text-align"]):not(.text-start):not(.text-end):not(.align-start):not(.align-end),
.stmt-table thead th:not([style*="text-align"]):not(.text-start):not(.text-end):not(.align-start):not(.align-end),
.inv-items-table th:not([style*="text-align"]):not(.text-start):not(.text-end):not(.align-start):not(.align-end),
.return-items-table thead th:not([style*="text-align"]):not(.text-start):not(.text-end):not(.align-start):not(.align-end) {
      text-align: center !important;
      vertical-align: middle;
    }

    /* ===== كل الأرقام فى النظام تظهر بخط بولد (يشمل المبالغ، الكميات، الأرقام التسلسلية... إلخ) ===== */
    .auto-num-bold {
      font-weight: 800;
    }

    /* ===== أزرار كاميرا الموبايل (فى مودالات البيع/الشراء/المرتجعات وصفحة المنتجات): تظهر على الموبايل فقط لتحسين تجربة المستخدم على الكمبيوتر ===== */
    .mobile-camera-btn {
      display: none !important;
    }

    @media (max-width: 900px) {
      .mobile-camera-btn {
        display: inline-flex !important;
      }
    }

    /* ===== قائمة "طباعة / تصدير" المنسدلة (نمط عام يُستخدم فوق جداول كل الصفحات) ===== */
    .export-dropdown {
      position: relative;
      display: inline-block;
    }

    .export-dropdown-menu {
      display: none;
      position: absolute;
      top: calc(100% + 6px);
      left: 0;
      z-index: 60;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 10px;
      box-shadow: 0 10px 30px rgba(15, 23, 42, .18);
      min-width: 100%;
      width: max-content;
      max-width: 280px;
      box-sizing: border-box;
      padding: 6px;
    }

    .export-dropdown-menu.open {
      display: block;
    }

    /* قوائم إجراءات صفوف الجداول تُنقل مؤقتًا إلى body عند فتحها، حتى لا يقصّها
       overflow الخاص بحاوية الجدول عندما يكون الجدول قصيرًا أو فيه صف واحد. */
    .export-dropdown-menu.table-floating-menu {
      position: fixed;
      z-index: 2147483000;
      min-width: 170px;
      max-width: min(280px, calc(100vw - 16px));
      overflow-y: auto;
      overscroll-behavior: contain;
    }

    /* بديل مرئي لقائمتي الفئة والوحدة داخل مودال المنتج. الـ select الأصلي يظل
       موجودًا ومصدر الحقيقة للحفظ، بينما القائمة المخصصة تفتح لأسفل دائمًا. */
    .product-down-select {
      position: relative;
      width: 100%;
      min-width: 0;
    }

    .product-down-select-native {
      position: absolute !important;
      width: 1px !important;
      height: 1px !important;
      opacity: 0 !important;
      pointer-events: none !important;
    }

    .product-down-select-trigger {
      width: 100%;
      min-height: 40px;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      background: var(--surface2);
      color: var(--text);
      padding: 8px 11px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      cursor: pointer;
      font-family: var(--font);
      font-size: .88rem;
      text-align: right;
    }

    .product-down-select-trigger:focus {
      outline: none;
      border-color: var(--primary);
      box-shadow: 0 0 0 3px var(--primary-light);
    }

    .product-down-select-trigger i {
      color: var(--text-muted);
      font-size: .72rem;
      transition: transform .15s ease;
    }

    .product-down-select-trigger[aria-expanded="true"] i {
      transform: rotate(180deg);
    }

    .product-down-select-menu {
      display: none;
      position: fixed;
      z-index: 2147483100;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 10px;
      box-shadow: 0 12px 34px rgba(15, 23, 42, .22);
      padding: 5px;
      overflow-y: auto;
      overscroll-behavior: contain;
    }

    .product-down-select-menu.open { display: block; }

    .product-down-select-option {
      width: 100%;
      border: 0;
      border-radius: 7px;
      padding: 9px 10px;
      background: transparent;
      color: var(--text);
      font-family: var(--font);
      font-size: .84rem;
      text-align: right;
      cursor: pointer;
    }

    .product-down-select-option:hover,
.product-down-select-option.selected {
      background: var(--primary-light);
      color: var(--primary);
    }

    .export-dropdown-option {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 10px;
      border-radius: 8px;
      cursor: pointer;
      font-size: .86rem;
      color: var(--text);
      font-weight: 600;
      white-space: nowrap;
    }

    .export-dropdown-option:hover {
      background: var(--primary-light);
    }

    .export-dropdown-option.opt-disabled {
      opacity: .45;
      cursor: not-allowed;
      pointer-events: none;
    }

    /* أسماء قديمة (توافق خلفي) */
    .trs-export-dropdown {
      position: relative;
      display: inline-block;
    }

    .trs-export-menu {
      display: none;
      position: absolute;
      top: calc(100% + 6px);
      left: 0;
      z-index: 60;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 10px;
      box-shadow: 0 10px 30px rgba(15, 23, 42, .18);
      width: 100%;
      box-sizing: border-box;
      padding: 6px;
    }

    .trs-export-menu.open {
      display: block;
    }

    .trs-export-option {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 10px;
      border-radius: 8px;
      cursor: pointer;
      font-size: .86rem;
      color: var(--text);
      font-weight: 600;
    }

    .trs-export-option:hover {
      background: var(--primary-light);
    }

    /* ===== تنعيم اللون الأبيض الحاد فى رؤوس كل الجداول (كان #fff نقي بيدي إحساس حاد جداً فوق خلفية رأس الجدول الغامقة) ===== */
    thead th,
thead th *,
table thead th,
table thead th *,
.table-wrap thead th,
.rep-table thead th,
#page-reports .rep-table thead th,
.stmt-table thead th,
.return-items-table thead th,
.profit-summary-tbl thead th,
.profit-summary-tbl thead tr,
.bs-table thead th,
.bs-table thead tr,
.inv-items-table thead th,
#page-customers table thead th,
#page-customers table thead th *,
#page-suppliers table thead th,
#page-suppliers table thead th *,
#page-products table thead th,
#page-products table thead th *,
#page-invoices table thead th,
#page-invoices table thead th *,
#page-purchases table thead th,
#page-purchases table thead th *,
#page-salesReturns table thead th,
#page-salesReturns table thead th *,
#page-purchaseReturns table thead th,
#page-purchaseReturns table thead th *,
#page-receipts table thead th,
#page-receipts table thead th *,
#page-payments table thead th,
#page-payments table thead th *,
#page-treasury table thead th,
#page-treasury table thead th *,
#page-treasury .stats-table thead th {
      color: #d9e2ee !important;
      text-shadow: none !important;
    }

    /* ===== تنسيق قسم فلتر قائمة الدخل على الموبايل ===== */
    @media (max-width: 700px) {
      .prof-filter-bar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
      }

      .prof-filter-fields {
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100%;
        gap: 10px !important;
      }

      .prof-filter-label {
        font-size: 0.88rem !important;
      }

      .prof-filter-date-group {
        width: 100%;
      }

      .prof-filter-date-group label {
        min-width: 28px;
        flex-shrink: 0;
      }

      .prof-filter-date {
        flex: 1 1 auto;
        width: 100%;
      }

      .prof-filter-actions {
        width: 100%;
      }

      .prof-filter-select {
        flex: 1 1 100%;
        width: 100%;
      }

      .prof-filter-btn {
        flex: 1 1 auto;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        gap: 4px;
      }
    }
  
        /* Phase 50 UI: hide the page vertical scrollbar while preserving scrolling.
           Internal scroll containers (tables, dropdowns, modals) keep their own scrollbars. */
        html {
            scrollbar-width: none;
            -ms-overflow-style: none;
        }
        html::-webkit-scrollbar {
            width: 0;
            background: transparent;
        }

    /* اللمسات النهائية للهوية الزرقاء الموحدة. */
    

    

    

    

    

    

    

    

    

    

    
  

/* ===== Phase 50: dashboard cards responsive hardening ===== */
#page-dashboard,
#page-dashboard * {
  box-sizing: border-box;
}

/* 2026-08-30 — Administration, settings and reports workspace visual system. */
html :is(#page-dashboard,#page-myShortcuts,#page-account,#page-users,#page-settings,#page-backup,#page-onlineOrders,#page-reports,#page-yearEndClosing,#page-activityLog) :is(.card,.stat-card,.report-card,.settings-card) {
  border-color:var(--border)!important;border-radius:12px!important;box-shadow:var(--shadow)!important;
}
html :is(#page-dashboard,#page-myShortcuts,#page-account,#page-users,#page-settings,#page-backup,#page-onlineOrders,#page-reports,#page-yearEndClosing,#page-activityLog) .card-header {
  min-height:52px;padding:12px 16px!important;border-bottom:1px solid var(--border)!important;border-radius:12px 12px 0 0!important;background:var(--mode-panel-alt)!important;
}
html :is(#page-dashboard,#page-myShortcuts,#page-account,#page-users,#page-settings,#page-backup,#page-onlineOrders,#page-reports,#page-yearEndClosing,#page-activityLog) :is(.date-filter-bar,.filters-bar,.filter-bar) {
  gap:10px!important;padding:10px 12px!important;border:1px solid var(--border)!important;border-radius:10px!important;background:var(--mode-panel-alt)!important;
}
html :is(#page-dashboard,#page-myShortcuts,#page-account,#page-users,#page-settings,#page-backup,#page-onlineOrders,#page-reports,#page-yearEndClosing,#page-activityLog) :is(.date-filter-bar,.filters-bar,.filter-bar,.page-header-left) :is(input[type="text"],input[type="search"],input[type="date"],select,.search-bar,.btn) {
  height:40px!important;min-height:40px!important;box-sizing:border-box!important;
}
html :is(#page-dashboard,#page-myShortcuts,#page-account,#page-users,#page-settings,#page-backup,#page-onlineOrders,#page-reports,#page-yearEndClosing,#page-activityLog) .table-wrap {
  overflow:auto;border:1px solid var(--border)!important;border-radius:10px!important;box-shadow:none!important;
}
html :is(#page-dashboard,#page-myShortcuts,#page-account,#page-users,#page-settings,#page-backup,#page-onlineOrders,#page-reports,#page-yearEndClosing,#page-activityLog) .table-wrap table thead th {
  background:var(--surface3)!important;color:var(--text)!important;border-bottom:1px solid var(--border-strong)!important;font-weight:800!important;
}
html :is(#page-dashboard,#page-myShortcuts,#page-account,#page-users,#page-settings,#page-backup,#page-onlineOrders,#page-reports,#page-yearEndClosing,#page-activityLog) .table-wrap table tbody tr:hover>td {
  background:color-mix(in srgb,var(--surface) 93%,var(--primary-light))!important;
}
@media(max-width:700px){
  html :is(#page-dashboard,#page-myShortcuts,#page-account,#page-users,#page-settings,#page-backup,#page-onlineOrders,#page-reports,#page-yearEndClosing,#page-activityLog) :is(.date-filter-bar,.filters-bar,.filter-bar,.page-header-left) :is(input[type="text"],input[type="search"],input[type="date"],select,.search-bar,.btn) {
    width:100%!important;max-width:100%!important;height:44px!important;min-height:44px!important;
  }
}

/* 2026-08-30 — Specialized operations workspace visual system. */
html :is(#page-invoicesCenter,#page-coffeeOrders,#page-coffeeReports,#page-coffeeShifts,#page-recipes,#page-floorPlan,#page-kds,#page-fixedAssets,#page-hrAdmin,#page-hrEmployee) :is(.card,.stat-card,.coffee-report-stat-card) {
  border-color:var(--border)!important;border-radius:12px!important;box-shadow:var(--shadow)!important;
}
html :is(#page-invoicesCenter,#page-coffeeOrders,#page-coffeeReports,#page-coffeeShifts,#page-recipes,#page-floorPlan,#page-kds,#page-fixedAssets,#page-hrAdmin,#page-hrEmployee) .card-header {
  min-height:52px;padding:12px 16px!important;border-bottom:1px solid var(--border)!important;border-radius:12px 12px 0 0!important;background:var(--mode-panel-alt)!important;
}
html :is(#page-invoicesCenter,#page-coffeeOrders,#page-coffeeReports,#page-coffeeShifts,#page-recipes,#page-floorPlan,#page-kds,#page-fixedAssets,#page-hrAdmin,#page-hrEmployee) :is(.filters-row,.filter-row,.toolbar,.recipe-filters-row,.coffee-orders-filters) {
  gap:10px!important;padding:10px 12px!important;border:1px solid var(--border)!important;border-radius:10px!important;background:var(--mode-panel-alt)!important;
}
html :is(#page-invoicesCenter,#page-coffeeOrders,#page-coffeeReports,#page-coffeeShifts,#page-recipes,#page-floorPlan,#page-kds,#page-fixedAssets,#page-hrAdmin,#page-hrEmployee) :is(.filters-row,.filter-row,.toolbar,.recipe-filters-row,.coffee-orders-filters,.page-header-left) :is(input[type="text"],input[type="search"],input[type="date"],select,.search-bar,.btn) {
  height:40px!important;min-height:40px!important;box-sizing:border-box!important;
}
html :is(#page-invoicesCenter,#page-coffeeOrders,#page-coffeeReports,#page-coffeeShifts,#page-recipes,#page-floorPlan,#page-kds,#page-fixedAssets,#page-hrAdmin,#page-hrEmployee) .table-wrap {
  overflow:auto;border:1px solid var(--border)!important;border-radius:10px!important;box-shadow:none!important;
}
html :is(#page-invoicesCenter,#page-coffeeOrders,#page-coffeeReports,#page-coffeeShifts,#page-recipes,#page-floorPlan,#page-kds,#page-fixedAssets,#page-hrAdmin,#page-hrEmployee) .table-wrap table thead th {
  background:var(--surface3)!important;color:var(--text)!important;border-bottom:1px solid var(--border-strong)!important;font-weight:800!important;
}
html :is(#page-invoicesCenter,#page-coffeeOrders,#page-coffeeReports,#page-coffeeShifts,#page-recipes,#page-floorPlan,#page-kds,#page-fixedAssets,#page-hrAdmin,#page-hrEmployee) .table-wrap table tbody tr:hover>td {
  background:color-mix(in srgb,var(--surface) 93%,var(--primary-light))!important;
}
@media(max-width:700px){
  html :is(#page-invoicesCenter,#page-coffeeOrders,#page-coffeeReports,#page-coffeeShifts,#page-recipes,#page-floorPlan,#page-kds,#page-fixedAssets,#page-hrAdmin,#page-hrEmployee) :is(.filters-row,.filter-row,.toolbar,.recipe-filters-row,.coffee-orders-filters,.page-header-left) :is(input[type="text"],input[type="search"],input[type="date"],select,.search-bar,.btn) {
    width:100%!important;max-width:100%!important;height:44px!important;min-height:44px!important;
  }
}

#page-dashboard .stats-grid,
#page-dashboard .dashboard-page-cards {
  width: 100%;
  min-width: 0;
}

#page-dashboard .stat-card,
#page-dashboard .dashboard-page-card {
  min-width: 0 !important;
  max-width: 100% !important;
}

#page-dashboard .stat-card > div:last-child,
#page-dashboard .dashboard-page-card > div:last-child {
  min-width: 0;
}

#page-dashboard .stat-value,
#page-dashboard .stat-label,
#page-dashboard .dashboard-page-card .card-title {
  max-width: 100%;
  overflow-wrap: anywhere;
}

@media (max-width: 768px) {
  #page-dashboard {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden;
  }

  #page-dashboard .stats-grid,
#page-dashboard .dashboard-page-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  #page-dashboard .stat-card {
    padding: 11px 10px !important;
    gap: 8px !important;
    overflow: hidden;
  }

  #page-dashboard .stat-icon {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    flex: 0 0 38px !important;
    font-size: .95rem !important;
  }

  #page-dashboard .stat-value {
    font-size: clamp(.82rem, 3.5vw, 1rem) !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    word-break: break-word;
  }

  #page-dashboard .stat-label {
    font-size: .68rem !important;
    line-height: 1.35 !important;
    white-space: normal !important;
  }

  #page-dashboard .dashboard-page-card {
    min-height: 96px !important;
    padding: 11px 10px !important;
    gap: 9px !important;
  }

  #page-dashboard .dashboard-page-card .card-title {
    font-size: .78rem !important;
    line-height: 1.3 !important;
    white-space: normal !important;
  }
}

@media (max-width: 360px) {
  #page-dashboard .stats-grid,
#page-dashboard .dashboard-page-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  #page-dashboard .stat-card,
#page-dashboard .dashboard-page-card {
    min-height: 0 !important;
    min-width: 0 !important;
  }

  #page-dashboard .stat-card {
    padding: 9px 8px !important;
    gap: 7px !important;
  }

  #page-dashboard .stat-icon {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    flex: 0 0 34px !important;
    font-size: .9rem !important;
  }

  #page-dashboard .stat-value {
    font-size: .86rem !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  #page-dashboard .stat-label,
#page-dashboard .dashboard-page-card .card-title {
    font-size: .66rem !important;
    line-height: 1.25 !important;
    white-space: normal !important;
  }
}

  .offline-sync-overlay {
    position:fixed;
    inset:0;
    width:100vw;
    height:100dvh;
    display:none;
    align-items:center;
    justify-content:center;
    padding:16px;
    background:rgba(15,23,42,.48);
    backdrop-filter:blur(2px);
    -webkit-backdrop-filter:blur(2px);
    overflow:auto;
  }
  .offline-sync-overlay > .modal-content {
    position:relative;
    margin:auto;
    max-height:calc(100dvh - 32px);
    overflow:auto;
  }
  @media (max-width: 768px){
    .offline-sync-overlay {
      padding:12px;
      align-items:flex-end;
    }
    .offline-sync-overlay > .modal-content {
      width:100% !important;
      max-width:100% !important;
      max-height:88dvh;
      margin:0;
      border-radius:16px 16px 0 0 !important;
    }
  }

  /* حالة Offline انتقلت من الهيدر إلى أسفل القائمة الجانبية */
  #offline-engine-badge {
    width:100%;
    justify-content:center;
    margin-bottom:8px;
    box-sizing:border-box;
  }

  /* A3MAALY 7.0.16 — Unified Coffee Filters */
  :is(
    #reservations-branch-filter,
    #floor-plan-branch-filter,
    #kds-branch-filter,
    #kds-station-filter,
    #coffee-shifts-branch,
    #coffee-shifts-from,
    #coffee-shifts-to,
    #cr-warehouse,
    #cr-from,
    #cr-to,
    #cr-order-type,
    #coffee-reports-warehouse,
    #coffee-reports-from,
    #coffee-reports-to
  ) {
    height:40px !important;
    min-height:40px !important;
    box-sizing:border-box !important;
    padding:0 12px !important;
    border-radius:10px !important;
    border:1px solid var(--border) !important;
    background:var(--surface) !important;
    color:var(--text) !important;
    font:inherit !important;
    line-height:38px !important;
    outline:none !important;
  }

  :is(
    #reservations-branch-filter,
    #floor-plan-branch-filter,
    #kds-branch-filter,
    #kds-station-filter,
    #coffee-shifts-branch,
    #cr-warehouse,
    #cr-order-type,
    #coffee-reports-warehouse
  ) {
    padding-inline-end:34px !important;
  }

  :is(
    #reservations-branch-filter,
    #floor-plan-branch-filter,
    #kds-branch-filter,
    #kds-station-filter,
    #coffee-shifts-branch,
    #cr-warehouse,
    #cr-order-type,
    #coffee-reports-warehouse
  ) option {
    background:var(--surface) !important;
    color:var(--text) !important;
  }

  :is(
    #reservations-branch-filter,
    #floor-plan-branch-filter,
    #kds-branch-filter,
    #kds-station-filter,
    #coffee-shifts-branch,
    #coffee-shifts-from,
    #coffee-shifts-to,
    #cr-warehouse,
    #cr-from,
    #cr-to,
    #cr-order-type,
    #coffee-reports-warehouse,
    #coffee-reports-from,
    #coffee-reports-to
  ):focus {
    border-color:var(--primary) !important;
    box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent) !important;
  }

  /* Date/time controls use the system's light color scheme. */
  :is(
    #coffee-shifts-from,
    #coffee-shifts-to,
    #cr-from,
    #cr-to,
    #coffee-reports-from,
    #coffee-reports-to
  ) {
    color-scheme: light;
  }

  

  

  

  

  @media(max-width:768px){
    :is(
      #reservations-branch-filter,
      #floor-plan-branch-filter,
      #kds-branch-filter,
      #kds-station-filter,
      #coffee-shifts-branch,
      #coffee-shifts-from,
      #coffee-shifts-to,
      #cr-warehouse,
      #cr-from,
      #cr-to,
      #cr-order-type,
      #coffee-reports-warehouse,
      #coffee-reports-from,
      #coffee-reports-to
    ) {
      height:40px !important;
      min-height:40px !important;
      font-size:.86rem !important;
    }
  }

  /* تقارير الكافيه — كروت إحصائيات متوافقة مع الثيم الفاتح الحالي */
  #page-coffeeReports .coffee-report-stat-card {
    background:var(--surface2) !important;
    color:var(--text) !important;
    border:1px solid var(--border) !important;
    border-top:3px solid var(--coffee-report-accent,var(--primary)) !important;
    border-radius:12px !important;
    padding:14px !important;
    text-align:center !important;
    box-shadow:var(--shadow) !important;
    min-width:0;
  }
  #page-coffeeReports .coffee-report-stat-label {
    font-size:.78rem !important;
    color:var(--text-muted) !important;
    margin-bottom:6px !important;
    font-weight:600;
  }
  #page-coffeeReports .coffee-report-stat-value {
    font-size:1.15rem !important;
    font-weight:800 !important;
    color:var(--text) !important;
  }
  

/* صفحة الطلبات — التنسيق الرئيسي الفعلي للتطبيق */
#page-coffeeOrders .coffee-orders-filters {
  display:grid !important;
  grid-template-columns:repeat(7,minmax(0,1fr)) !important;
  gap:10px !important;
  align-items:end !important;
}
#page-coffeeOrders .coffee-orders-filters .field {
  margin:0 !important;
  min-width:0 !important;
}
#page-coffeeOrders .coffee-orders-filters input,
#page-coffeeOrders .coffee-orders-filters select,
#page-coffeeOrders .coffee-orders-filters .search-bar {
  width:100% !important;
  height:40px !important;
  min-height:40px !important;
  box-sizing:border-box !important;
}
#page-coffeeOrders .coffee-orders-search-field {min-width:170px !important}

#page-coffeeOrders .coffee-orders-kpis {
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:12px !important;
  margin-bottom:16px !important;
}
#page-coffeeOrders .coffee-orders-kpis .stat-card {
  min-width:0 !important;
  min-height:88px !important;
  padding:14px !important;
}

#page-coffeeOrders .coffee-orders-table td {vertical-align:middle}
.coffee-order-type-pill {display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:4px 10px;font-weight:800;font-size:.76rem}
.coffee-order-type-pill.dine_in {background:#dcfce7;color:#15803d}
.coffee-order-type-pill.takeaway {background:#fef3c7;color:#b45309}
.coffee-order-type-pill.delivery {background:#D9EAE5;color:#145C52}
.coffee-order-detail-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.coffee-order-detail-grid>div {border:1px solid var(--border);border-radius:10px;padding:10px 12px;background:var(--surface2);display:flex;justify-content:space-between;gap:12px}
.coffee-order-detail-grid span {color:var(--text-muted);font-size:.8rem}
.coffee-order-detail-grid b {color:var(--text);text-align:left}
.coffee-order-payment-summary {display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:16px}
.coffee-order-payment-summary>div {border:1px solid var(--border);border-radius:10px;padding:12px;background:var(--surface2);display:flex;justify-content:space-between}






/* كمبيوتر: كل الفلاتر في صف واحد، والكروت الأربعة في صف واحد */
@media(min-width:1101px){
  #page-coffeeOrders .coffee-orders-filters {
    grid-template-columns:.9fr .9fr 1fr 1fr 1.1fr 1.1fr 1.6fr !important;
  }
  #page-coffeeOrders .coffee-orders-kpis {
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  }

  /* بحث رقم الطلب/العميل: نفس ارتفاع باقي الفلاتر على الكمبيوتر فقط */
  #page-coffeeOrders .coffee-orders-search-field .search-bar {
    height:40px !important;
    min-height:40px !important;
    max-height:40px !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
    align-items:center !important;
  }
  #page-coffeeOrders .coffee-orders-search-field .search-bar input {
    height:38px !important;
    min-height:38px !important;
    max-height:38px !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
    line-height:38px !important;
  }
}

/* تابلت */
@media(min-width:701px) and (max-width:1100px){
  #page-coffeeOrders .coffee-orders-filters {
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  }
  #page-coffeeOrders .coffee-orders-search-field {grid-column:span 2 !important}
}

/* موبايل: كل 2 كارت جنب بعض */
@media(max-width:700px){
  #page-coffeeOrders .coffee-orders-filters {
    grid-template-columns:1fr 1fr !important;
  }
  #page-coffeeOrders .coffee-orders-search-field {grid-column:1/-1 !important}
  #page-coffeeOrders .coffee-orders-kpis {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
  }
  #page-coffeeOrders .coffee-orders-kpis .stat-card {min-height:84px !important}
  .coffee-order-detail-grid {grid-template-columns:1fr}
  .coffee-order-payment-summary {grid-template-columns:1fr}
}

@media(max-width:900px){
  /* فلتر اختيار الطاولة في سلة الموبايل: نفس ارتفاع حقول السلة الطبيعية */
  #pos-mobile-coffee-table-select {
    width:100% !important;
    height:42px !important;
    min-height:42px !important;
    max-height:42px !important;
    padding:0 12px !important;
    border:1px solid var(--border) !important;
    border-radius:9px !important;
    background:var(--surface) !important;
    color:var(--text) !important;
    font-size:.88rem !important;
    line-height:42px !important;
    box-sizing:border-box !important;
  }
  #pos-mobile-send-kitchen-btn {
    min-height:42px !important;
    align-items:center !important;
    justify-content:center !important;
  }
}

.pos-item-modifiers {
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  margin-top:5px;
}
.pos-item-modifier-chip {
  display:inline-flex;
  align-items:center;
  gap:3px;
  padding:2px 6px;
  border-radius:999px;
  background:color-mix(in srgb,var(--primary) 9%,var(--surface));
  border:1px solid color-mix(in srgb,var(--primary) 22%,var(--border));
  color:var(--text-muted);
  font-size:.66rem;
  line-height:1.35;
  font-weight:700;
}
.pos-item-modifier-chip i {
  color:var(--primary);
  font-size:.55rem;
}
.th-item-modifiers {
  padding:1px 0 3px;
  margin-right:2px;
}
.th-item-modifier {
  font-size:9px;
  line-height:1.35;
  color:#333;
  padding-right:2px;
}
@media(max-width:900px){
  .pos-item-modifiers {gap:3px;margin-top:4px}
  .pos-item-modifier-chip {font-size:.64rem;padding:2px 5px}
}

.current-shift-table-wrap {
  overflow-x:auto;
}
.current-shift-table {
  width:100%;
  table-layout:fixed;
}
.current-shift-table th:nth-child(1) {width:30%}
.current-shift-table th:nth-child(2) {width:28%}
.current-shift-table th:nth-child(3) {width:42%}
.current-shift-table td {
  vertical-align:middle;
}
.current-shift-table td:nth-child(2) {
  font-weight:800;
  color:var(--text);
}
.current-shift-detail {
  color:var(--text-muted);
  font-size:.8rem;
}
.current-shift-net {
  color:var(--primary)!important;
  font-size:1rem;
}
.current-shift-empty-cell {
  text-align:center!important;
  padding:24px!important;
  color:var(--text-muted);
}
.current-shift-empty-cell i {
  margin-left:6px;
}
@media(max-width:700px){
  .current-shift-table {
    table-layout:auto;
  }
  .current-shift-table th:nth-child(1),
.current-shift-table th:nth-child(2),
.current-shift-table th:nth-child(3) {
    width:auto;
  }
  .current-shift-table td,
.current-shift-table th {
    white-space:normal;
  }
  .current-shift-detail {
    font-size:.74rem;
  }
}

#modal-modifier-group .mg-modifier-modal {
  width:min(1120px,96vw);
  max-width:1120px;
}
#modal-modifier-group .mg-options-table-wrap {
  width:100%;
  overflow-x:auto;
  border:1px solid var(--border);
  border-radius:10px;
}
#modal-modifier-group .mg-options-table {
  width:100%;
  min-width:1080px;
  table-layout:fixed;
  margin:0;
}
#modal-modifier-group .mg-options-table th {
  white-space:nowrap;
  text-align:center;
  font-size:.76rem;
  background:var(--surface2);
  color:var(--text);
}
#modal-modifier-group .mg-options-table th:nth-child(1) {width:18%}
#modal-modifier-group .mg-options-table th:nth-child(2) {width:10%}
#modal-modifier-group .mg-options-table th:nth-child(3) {width:10%}
#modal-modifier-group .mg-options-table th:nth-child(4) {width:46%}
#modal-modifier-group .mg-options-table th:nth-child(5) {width:8%}
#modal-modifier-group .mg-options-table th:nth-child(6) {width:8%}
#modal-modifier-group .mg-options-table td {
  padding:7px;
  vertical-align:middle;
}
#modal-modifier-group .mg-options-table input[type="text"],
#modal-modifier-group .mg-options-table input[type="number"] {
  width:100%;
  height:40px;
  min-height:40px;
  box-sizing:border-box;
}
#modal-modifier-group .mg-component-search-wrap {
  position:relative;
  width:100%;
}
#modal-modifier-group .mg-component-search-wrap>i {
  position:absolute;
  right:11px;
  top:50%;
  transform:translateY(-50%);
  color:var(--text-muted);
  font-size:.76rem;
  pointer-events:none;
  z-index:1;
}
#modal-modifier-group .mg-opt-component-search {
  padding-right:32px!important;
}
#modal-modifier-group .mg-default-cell,
#modal-modifier-group .mg-delete-cell {
  text-align:center;
}
#modal-modifier-group .mg-default-check {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  white-space:nowrap;
  font-size:.8rem;
}

@media(max-width:700px){
  #modal-modifier-group .mg-modifier-modal {
    width:96vw;
  }
  #modal-modifier-group .mg-options-table {
    min-width:1080px;
  }
}

#modal-modifier-group .mg-add-option-btn {
  display:inline-flex!important;
  width:auto!important;
  min-width:0!important;
  max-width:max-content;
  flex:0 0 auto!important;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin-top:8px;
  padding-inline:12px;
  align-self:flex-start;
}

#modal-modifier-group .mg-component-combobox {
  position:relative;
  width:100%;
}
#modal-modifier-group .mg-component-input-wrap {
  position:relative;
  width:100%;
}
#modal-modifier-group .mg-component-input-wrap>i {
  position:absolute;
  right:11px;
  top:50%;
  transform:translateY(-50%);
  color:var(--text-muted);
  font-size:.76rem;
  pointer-events:none;
  z-index:2;
}
#modal-modifier-group .mg-component-input-wrap .mg-opt-component-search {
  padding-right:32px!important;
  padding-left:34px!important;
}
#modal-modifier-group .mg-component-clear {
  position:absolute;
  left:6px;
  top:50%;
  transform:translateY(-50%);
  width:26px;
  height:26px;
  border:0;
  background:transparent;
  color:var(--text-muted);
  border-radius:6px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
#modal-modifier-group .mg-component-clear:hover {
  background:var(--surface2);
  color:var(--danger);
}
#modal-modifier-group .mg-component-dropdown {
  display:none;
  position:fixed;
  z-index:2147483000;
  top:auto;
  right:auto;
  left:auto;
  width:320px;
  max-width:calc(100vw - 24px);
  max-height:260px;
  overflow-y:auto;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:10px;
  box-shadow:0 12px 30px rgba(15,23,42,.18);
  padding:5px;
}
#modal-modifier-group .mg-component-combobox.is-open .mg-component-dropdown {
  display:block;
}
#modal-modifier-group .mg-component-option {
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
  text-align:right;
  padding:9px 10px;
  border:0;
  border-radius:7px;
  background:transparent;
  color:var(--text);
  cursor:pointer;
  font-family:var(--font);
}
#modal-modifier-group .mg-component-option:hover,
#modal-modifier-group .mg-component-option.is-active {
  background:var(--surface2);
}
#modal-modifier-group .mg-component-option-main {
  font-size:.84rem;
  font-weight:700;
}
#modal-modifier-group .mg-component-option-meta {
  font-size:.7rem;
  color:var(--text-muted);
}
#modal-modifier-group .mg-component-empty {
  padding:14px 10px;
  text-align:center;
  color:var(--text-muted);
  font-size:.8rem;
}



#modal-waste .waste-product-combobox {position:relative;width:100%}
#modal-waste .waste-product-input-wrap {position:relative;width:100%}
#modal-waste .waste-product-input-wrap>i {position:absolute;right:11px;top:50%;transform:translateY(-50%);color:var(--text-muted);pointer-events:none;z-index:2}
#modal-waste #waste-product-search {width:100%;height:42px;min-height:42px;box-sizing:border-box;padding-right:34px!important;padding-left:36px!important}
#modal-waste .waste-product-clear {position:absolute;left:6px;top:50%;transform:translateY(-50%);width:28px;height:28px;border:0;border-radius:7px;background:transparent;color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center}
#modal-waste .waste-product-clear:hover {background:var(--surface2);color:var(--danger)}
#modal-waste .waste-product-dropdown {display:none;position:absolute;z-index:13000;top:calc(100% + 5px);right:0;left:0;max-height:280px;overflow-y:auto;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:5px;box-shadow:0 14px 32px rgba(15,23,42,.2)}
#modal-waste .waste-product-combobox.is-open .waste-product-dropdown {display:block}
#modal-waste .waste-product-option {width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:9px 10px;border:0;border-radius:7px;background:transparent;color:var(--text);text-align:right;cursor:pointer;font-family:var(--font)}
#modal-waste .waste-product-option:hover,
#modal-waste .waste-product-option.is-active {background:var(--surface2)}
#modal-waste .waste-product-option-main {font-size:.86rem;font-weight:700}
#modal-waste .waste-product-option-meta {font-size:.72rem;color:var(--text-muted)}
#modal-waste .waste-product-empty {padding:15px 10px;text-align:center;color:var(--text-muted);font-size:.82rem}




#modal-modifier-group .mg-component-dropdown {
  margin:0!important;
  transform:none!important;
  isolation:isolate;
}
@media (max-width:600px){
  #modal-modifier-group .mg-component-dropdown {
    max-width:calc(100vw - 16px);
  }
}

/* A3MAALY 7.0.61 — POS desktop menu: 4 columns normal, 5 columns when sidebar is collapsed */
@media (min-width:901px){
  #page-pos #pos-products-grid:not(.pos-products-empty) {
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:12px !important;
    align-content:start !important;
  }
  body:has(#sidebar.collapsed) #page-pos #pos-products-grid:not(.pos-products-empty),
#sidebar.collapsed ~ .main #page-pos #pos-products-grid:not(.pos-products-empty) {
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  }
}

/* A3MAALY 7.0.62 — stock/price footer follows each product card width on desktop */
@media (min-width:901px){
  #page-pos #pos-products-grid:not(.pos-products-empty) > .pos-product-card {
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }
  #page-pos .pos-product-card .pos-product-footer {
    width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    align-items:center !important;
    column-gap:8px !important;
  }
  #page-pos .pos-product-card .pos-product-stock {
    min-width:0 !important;
    width:auto !important;
    justify-self:start !important;
    overflow:hidden !important;
  }
  #page-pos .pos-product-card .pos-product-price {
    width:auto !important;
    justify-self:end !important;
    margin:0 !important;
  }
}

/* A3MAALY 7.0.63 — keep product code + barcode on one line on desktop */
@media (min-width:901px){
  #page-pos .pos-product-card .pos-product-meta {
    width:100% !important;
    min-width:0 !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    column-gap:8px !important;
    align-items:center !important;
    flex-wrap:nowrap !important;
    overflow:hidden !important;
  }
  #page-pos .pos-product-card .pos-product-meta > span {
    display:block !important;
    min-width:0 !important;
    max-width:100% !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
  #page-pos .pos-product-card .pos-product-meta > span:last-child {
    text-align:end !important;
  }
}

/* A3MAALY 7.0.72 — thin, theme-aware scrollbars for coffee dashboard tables only */
#coffee-dashboard-root .coffee-dash-scroll,
#coffee-dashboard-root .table-wrap,
#coffee-dashboard-root .table-responsive,
#coffee-dashboard-root .coffee-dash-table-wrap {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--text-muted) 55%, transparent)
                   color-mix(in srgb, var(--surface2) 72%, transparent);
}

#coffee-dashboard-root .coffee-dash-scroll::-webkit-scrollbar,
#coffee-dashboard-root .table-wrap::-webkit-scrollbar,
#coffee-dashboard-root .table-responsive::-webkit-scrollbar,
#coffee-dashboard-root .coffee-dash-table-wrap::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

#coffee-dashboard-root .coffee-dash-scroll::-webkit-scrollbar-track,
#coffee-dashboard-root .table-wrap::-webkit-scrollbar-track,
#coffee-dashboard-root .table-responsive::-webkit-scrollbar-track,
#coffee-dashboard-root .coffee-dash-table-wrap::-webkit-scrollbar-track {
  background: color-mix(in srgb, var(--surface2) 72%, transparent);
  border-radius: 999px;
}

#coffee-dashboard-root .coffee-dash-scroll::-webkit-scrollbar-thumb,
#coffee-dashboard-root .table-wrap::-webkit-scrollbar-thumb,
#coffee-dashboard-root .table-responsive::-webkit-scrollbar-thumb,
#coffee-dashboard-root .coffee-dash-table-wrap::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--text-muted) 55%, transparent);
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--surface) 68%, transparent);
}

#coffee-dashboard-root .coffee-dash-scroll::-webkit-scrollbar-thumb:hover,
#coffee-dashboard-root .table-wrap::-webkit-scrollbar-thumb:hover,
#coffee-dashboard-root .table-responsive::-webkit-scrollbar-thumb:hover,
#coffee-dashboard-root .coffee-dash-table-wrap::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--primary) 62%, var(--text-muted));
}



.product-image-picker {display:flex;align-items:center;gap:12px;padding:10px;border:1px dashed var(--border);border-radius:12px;background:var(--surface2)}
.product-image-preview {width:92px;height:92px;flex:0 0 92px;border-radius:12px;overflow:hidden;background:var(--surface);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:1.7rem}
.product-image-preview img {width:100%;height:100%;object-fit:cover;display:block}
.product-image-actions {display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.product-image-actions small {width:100%;color:var(--text-muted);font-size:.73rem;line-height:1.5}
.products-name-with-image {display:flex;align-items:center;gap:8px;min-width:0}
.products-table-thumb {width:36px;height:36px;flex:0 0 36px;border-radius:8px;object-fit:cover;border:1px solid var(--border);background:var(--surface2)}
.products-table-thumb-placeholder {display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:.85rem}

@media(max-width:900px){
  .product-image-picker {align-items:flex-start}
  .product-image-preview {width:78px;height:78px;flex-basis:78px}

}

/* A3MAALY 7.0.79 — مودالات الهوية البترولية تستخدم لوحة النظام الموحدة */
html .modal-backdrop .modal > .modal-header:not(.return-modal-header),
html #modal-confirm:not(.confirm-table-mode) .modal > .modal-header {
  background: var(--mode-panel-alt) !important;
  background-color: var(--mode-panel-alt) !important;
  color: var(--text) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
}

html .modal-backdrop .modal > .modal-header:not(.return-modal-header)::after,
html #modal-confirm:not(.confirm-table-mode) .modal > .modal-header::after {
  display: none !important;
}

html .modal-backdrop .modal > .modal-header:not(.return-modal-header) .modal-title,
html .modal-backdrop .modal > .modal-header:not(.return-modal-header) .modal-title i,
html #modal-confirm:not(.confirm-table-mode) .modal > .modal-header .modal-title,
html #modal-confirm:not(.confirm-table-mode) .modal > .modal-header .modal-title i {
  color: var(--text) !important;
  text-shadow: none !important;
}

html .modal-backdrop .modal > .modal-header:not(.return-modal-header) .modal-close,
html #modal-confirm:not(.confirm-table-mode) .modal > .modal-header .modal-close {
  color: var(--text-muted) !important;
  background: var(--mode-field-bg) !important;
  border: 1px solid var(--border) !important;
}

html .modal-backdrop .modal > .modal-header:not(.return-modal-header) .modal-close:hover,
html #modal-confirm:not(.confirm-table-mode) .modal > .modal-header .modal-close:hover {
  color: var(--danger) !important;
  background: var(--surface) !important;
  border-color: color-mix(in srgb, var(--danger) 35%, var(--border)) !important;
}
/* 7.0.110 — Mobile full-width filters: Coffee tables + KDS only */
@media (max-width:768px){
  #page-floorPlan #floor-plan-branch-filter,
#page-kds #kds-branch-filter,
#page-kds #kds-station-filter,
#page-coffeeShifts #coffee-shifts-from,
#page-coffeeShifts #coffee-shifts-to,
#page-coffeeReports #cr-from,
#page-coffeeReports #cr-to,
#page-coffeeReports #cr-order-type,
#page-coffeeReports #cr-warehouse {
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    flex:0 0 100% !important;
    box-sizing:border-box !important;
  }

  /* حاوية فلتر الطاولات: الفلتر صف كامل، وتظل أزرار الإضافة كما هي تحته */
  #page-floorPlan .card-header > div:has(#floor-plan-branch-filter) {
    width:100% !important;
  }



  /* الأداء اليومي: فلاتر التاريخ ونوع الطلب والفرع كل واحد بعرض كامل */
  #page-coffeeReports .card:first-child .card-body > .field {
    width:100% !important;
    max-width:none !important;
    flex:0 0 100% !important;
  }

    /* سجل الورديات: من / إلى، كل تاريخ في صف كامل على الموبايل */
  #page-coffeeShifts :is(.filters-row,.filter-row,.toolbar,.card-header) > *:has(#coffee-shifts-from),
#page-coffeeShifts :is(.filters-row,.filter-row,.toolbar,.card-header) > *:has(#coffee-shifts-to) {
    width:100% !important;
    max-width:none !important;
    flex:0 0 100% !important;
  }

    /* حاوية فلاتر المطبخ: الفرع والمحطة كل واحد صف كامل؛ زر إضافة محطة لا يتغير */
  #page-kds .card-body > div:has(#kds-branch-filter) {
    width:100% !important;
    align-items:stretch !important;
  }
}

/* 7.0.114 — Coffee POS order type buttons: solid colorful backgrounds */
#page-pos .pos-order-type-btn[data-order-type="dine_in"] {
  background:#22c55e !important;
  border-color:#22c55e !important;
  color:#fff !important;
  box-shadow:0 2px 8px rgba(34,197,94,.22) !important;
}
#page-pos .pos-order-type-btn[data-order-type="takeaway"] {
  background:#f59e0b !important;
  border-color:#f59e0b !important;
  color:#fff !important;
  box-shadow:0 2px 8px rgba(245,158,11,.22) !important;
}
#page-pos .pos-order-type-btn[data-order-type="delivery"] {
  background:#187466 !important;
  border-color:#187466 !important;
  color:#fff !important;
  box-shadow:0 2px 8px rgba(24,116,102,.22) !important;
}
#page-pos .pos-order-type-btn .pos-order-emoji,
#page-pos .pos-order-type-btn .pos-order-label {
  color:#fff !important;
}
#page-pos .pos-order-type-btn:hover {
  filter:brightness(.96);
  color:#fff !important;
}
#page-pos .pos-order-type-btn.active {
  color:#fff !important;
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(15,23,42,.20), inset 0 0 0 2px rgba(255,255,255,.48) !important;
}
#page-pos .pos-order-type-btn[data-order-type="dine_in"].active {background:#16a34a !important;border-color:#15803d !important;}
#page-pos .pos-order-type-btn[data-order-type="takeaway"].active {background:#d97706 !important;border-color:#b45309 !important;}
#page-pos .pos-order-type-btn[data-order-type="delivery"].active {background:#187466 !important;border-color:#145C52 !important;}


#page-hrAdmin .hr-admin-page-head {display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%}
#page-hrAdmin .hr-admin-section-menu-wrap {position:relative;min-width:220px}
#page-hrAdmin .hr-admin-section-trigger {width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px}
#page-hrAdmin .hr-admin-section-trigger .hr-admin-section-current {display:flex;align-items:center;gap:8px;min-width:0}
#page-hrAdmin .hr-admin-section-menu {position:fixed;min-width:240px;max-height:360px;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:0 16px 36px rgba(0,0,0,.16);padding:6px;z-index:10050;display:none}
#page-hrAdmin .hr-admin-section-menu::-webkit-scrollbar {display:none;width:0;height:0}
#page-hrAdmin .hr-admin-section-menu.open {display:block}
#page-hrAdmin .hr-admin-section-option {display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:8px;cursor:pointer;font-size:.86rem;font-weight:700;color:var(--text);white-space:nowrap}
#page-hrAdmin .hr-admin-section-option:hover,
#page-hrAdmin .hr-admin-section-option.active {background:var(--surface2);color:var(--primary)}
#page-hrAdmin .hr-admin-section-option i {width:18px;text-align:center;color:var(--primary)}
@media(max-width:700px){
  #page-hrAdmin .card-header {align-items:stretch}
  #page-hrAdmin .hr-admin-page-head {flex-direction:column;align-items:stretch}
  #page-hrAdmin .hr-admin-section-menu-wrap {width:100%;min-width:0}
  #page-hrAdmin .hr-admin-section-menu {min-width:0}
}

#page-reports .rep-category-head {display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px}
#page-reports .rep-category-menu-wrap {position:relative;min-width:240px}
#page-reports .rep-category-trigger {width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px}
#page-reports .rep-category-current {display:flex;align-items:center;gap:8px}
#page-reports .rep-category-menu {position:fixed;min-width:250px;max-height:360px;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:0 16px 36px rgba(0,0,0,.16);padding:6px;z-index:10050;display:none}
#page-reports .rep-category-menu::-webkit-scrollbar {display:none;width:0;height:0}
#page-reports .rep-category-menu.open {display:block}
#page-reports .rep-category-option {display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:8px;cursor:pointer;font-size:.86rem;font-weight:700;color:var(--text);white-space:nowrap}
#page-reports .rep-category-option:hover,
#page-reports .rep-category-option.active {background:var(--surface2);color:var(--primary)}
#page-reports .rep-category-option i {width:18px;text-align:center;color:var(--primary)}
@media(max-width:700px){#page-reports .rep-category-head {flex-direction:column;align-items:stretch}#page-reports .rep-category-menu-wrap {width:100%;min-width:0}#page-reports .rep-category-menu {min-width:0}}

#page-reports #rep-select-row {
  display:flex !important;
  justify-content:flex-start !important;
  grid-template-columns:none !important;
}
#page-reports #rep-custom-dd {
  width:300px !important;
  max-width:100% !important;
}
#page-reports #rep-custom-dd-trigger {
  width:100% !important;
}
#page-reports #rep-custom-dd-panel {
  scrollbar-width:none !important;
  -ms-overflow-style:none !important;
}
#page-reports #rep-custom-dd-panel::-webkit-scrollbar {
  display:none !important;
  width:0 !important;
  height:0 !important;
}
@media(max-width:700px){
  #page-reports #rep-select-row {display:block !important;}
  #page-reports #rep-custom-dd {width:100% !important;max-width:none !important;}
}

#page-reports .rep-category-head {
  padding-bottom:14px !important;
  margin-bottom:14px !important;
  border-bottom:1px solid var(--border) !important;
}







#page-reports #rep-custom-dd-panel .custom-dd-option.selected:has(.placeholder-txt) {
  background:transparent !important;
  background-color:transparent !important;
  color:var(--text) !important;
  -webkit-text-fill-color:var(--text) !important;
  box-shadow:none !important;
}
#page-reports #rep-custom-dd-panel .custom-dd-option.selected:has(.placeholder-txt) .placeholder-txt {
  color:var(--text) !important;
  opacity:1 !important;
}
#page-reports #rep-custom-dd-panel .custom-dd-option.selected:has(.placeholder-txt) i {
  display:none !important;
}
#page-reports #rep-custom-dd-panel .custom-dd-option.selected:has(.placeholder-txt):hover {
  background:var(--surface2) !important;
  color:var(--text) !important;
}

.subscription-usage-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:10px}.subscription-usage-item {padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--card-bg)}.subscription-usage-item small {display:block;color:var(--text-muted);font-size:.75rem;margin-bottom:4px}.subscription-usage-item strong {font-size:.9rem}@media(max-width:600px){.subscription-usage-grid {grid-template-columns:1fr}}

#page-kds #kds-orders-container > div {
  background:var(--surface) !important;
  color:var(--text) !important;
}
#page-kds #kds-orders-container > div > div,
#page-kds #kds-orders-container strong {
  color:var(--text);
}
#page-kds #kds-orders-container .badge {
  border-color:var(--border);
}

#page-recipes #recipe-warehouse-filter,
#page-recipes #recipe-category-filter,
#page-recipes #recipe-margin-filter,
#page-recipes #recipe-availability-filter {
  height:40px !important;
  min-height:40px !important;
  box-sizing:border-box !important;
  padding:0 12px !important;
  border:1px solid var(--border) !important;
  border-radius:10px !important;
  background:var(--surface) !important;
  color:var(--text) !important;
  font:inherit !important;
  line-height:38px !important;
  outline:none !important;
}
#page-recipes #recipe-warehouse-filter:focus,
#page-recipes #recipe-category-filter:focus,
#page-recipes #recipe-margin-filter:focus,
#page-recipes #recipe-availability-filter:focus {
  border-color:var(--primary) !important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 14%,transparent) !important;
}
#page-recipes #recipe-warehouse-filter option,
#page-recipes #recipe-category-filter option,
#page-recipes #recipe-margin-filter option,
#page-recipes #recipe-availability-filter option {
  background:var(--surface) !important;
  color:var(--text) !important;
}

#modal-recipe .recipe-product-combobox {position:relative}
#modal-recipe #recipe-existing-search {padding-inline-end:40px}
#modal-recipe .recipe-product-combobox-arrow {position:absolute;inset-inline-end:14px;top:50%;transform:translateY(-50%);color:var(--text-muted);pointer-events:none;transition:transform .18s ease}
#modal-recipe .recipe-product-combobox.is-open .recipe-product-combobox-arrow {transform:translateY(-50%) rotate(180deg)}
#modal-recipe .recipe-product-dropdown {display:none;position:absolute;z-index:10020;top:calc(100% + 5px);right:0;left:0;max-height:260px;overflow:auto;padding:6px;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:0 14px 35px rgba(15,23,42,.18);scrollbar-width:none}
#modal-recipe .recipe-product-dropdown::-webkit-scrollbar {display:none}
#modal-recipe .recipe-product-combobox.is-open .recipe-product-dropdown {display:block}
#modal-recipe .recipe-product-option {display:flex;width:100%;align-items:flex-start;justify-content:space-between;gap:10px;padding:10px 11px;border:0;border-radius:8px;background:transparent;color:var(--text);font:inherit;text-align:right;cursor:pointer}
#modal-recipe .recipe-product-option:hover,
#modal-recipe .recipe-product-option.is-active {background:color-mix(in srgb,var(--primary) 11%,transparent);color:var(--primary)}
#modal-recipe .recipe-product-option-main {font-weight:700}
#modal-recipe .recipe-product-option-meta {font-size:.73rem;color:var(--text-muted);white-space:nowrap}
#modal-recipe .recipe-product-empty {padding:18px 12px;text-align:center;color:var(--text-muted);font-size:.84rem}

@media(max-width:600px){#modal-recipe .recipe-product-dropdown {max-height:220px}.recipe-product-option {padding:12px 10px}}
#modal-recipe #recipe-components-rows .recipe-component-combobox {position:relative;min-width:230px}
#modal-recipe #recipe-components-rows .recipe-component-search,
#modal-recipe #recipe-components-rows .recipe-component-qty {height:42px!important;min-height:42px!important;box-sizing:border-box!important;margin:0!important}
#modal-recipe #recipe-components-rows .recipe-component-search {width:100%;padding-inline-end:38px}
#modal-recipe #recipe-components-rows .recipe-component-qty {width:120px;min-width:100px;padding:0 10px!important}
#modal-recipe .recipe-component-combobox-arrow {position:absolute;inset-inline-end:13px;top:21px;transform:translateY(-50%);color:var(--text-muted);pointer-events:none;transition:transform .18s ease}
#modal-recipe .recipe-component-combobox.is-open .recipe-component-combobox-arrow {transform:translateY(-50%) rotate(180deg)}
#modal-recipe .recipe-component-dropdown {display:none;position:fixed;z-index:10030;max-height:260px;overflow:auto;padding:6px;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:0 14px 35px rgba(15,23,42,.2);scrollbar-width:none}
#modal-recipe .recipe-component-dropdown::-webkit-scrollbar {display:none}
#modal-recipe .recipe-component-combobox.is-open .recipe-component-dropdown {display:block}

@media(max-width:600px){#modal-recipe #recipe-components-rows .recipe-component-combobox {min-width:210px}#modal-recipe #recipe-components-rows .recipe-component-qty {width:105px}.recipe-component-dropdown {max-height:220px}}

/* POS product area remains scrollable while the scrollbar itself stays hidden. */
#page-pos #pos-products-grid {
  scrollbar-width:none !important;
  -ms-overflow-style:none !important;
}
#page-pos #pos-products-grid::-webkit-scrollbar {
  width:0 !important;
  height:0 !important;
  display:none !important;
}

/* سجلّات النظام تظل قابلة للتمرير أفقيًا ورأسيًا، مع إخفاء شريط التمرير فقط. */
.table-wrap,
.stmt-table-wrap,
.inv-items-table,
.return-items-table,
.current-shift-table-wrap,
.adj-table-scroll,
.mg-options-table-wrap,
.profit-summary-scroll {
  scrollbar-width:none !important;
  -ms-overflow-style:none !important;
}
.table-wrap::-webkit-scrollbar,
.stmt-table-wrap::-webkit-scrollbar,
.inv-items-table::-webkit-scrollbar,
.return-items-table::-webkit-scrollbar,
.current-shift-table-wrap::-webkit-scrollbar,
.adj-table-scroll::-webkit-scrollbar,
.mg-options-table-wrap::-webkit-scrollbar,
.profit-summary-scroll::-webkit-scrollbar {
  width:0 !important;
  height:0 !important;
  display:none !important;
}
/* الحاويات الأفقية المباشرة الشائعة حول جداول السجلات */
div[style*="overflow-x:auto"]:has(> table),
div[style*="overflow-x: auto"]:has(> table),
div[style*="overflow-x:auto"]:has(> .stmt-table),
div[style*="overflow-x: auto"]:has(> .stmt-table) {
  scrollbar-width:none !important;
  -ms-overflow-style:none !important;
}
div[style*="overflow-x:auto"]:has(> table)::-webkit-scrollbar,
div[style*="overflow-x: auto"]:has(> table)::-webkit-scrollbar,
div[style*="overflow-x:auto"]:has(> .stmt-table)::-webkit-scrollbar,
div[style*="overflow-x: auto"]:has(> .stmt-table)::-webkit-scrollbar {
  width:0 !important;
  height:0 !important;
  display:none !important;
}

.coffee-empty-state {
  min-height:112px;
  padding:22px 16px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  text-align:center;
  color:var(--text-muted);
  box-sizing:border-box;
}
.coffee-empty-state .coffee-empty-icon {
  font-size:2rem;
  line-height:1;
  filter:saturate(.9);
}
.coffee-empty-state .coffee-empty-title {
  color:var(--text);
  font-size:.9rem;
  font-weight:800;
  line-height:1.5;
}
.coffee-empty-state .coffee-empty-sub {
  color:var(--text-muted);
  font-size:.76rem;
  line-height:1.5;
}
@media(max-width:700px){
  .coffee-empty-state {
    min-height:100px;
    padding:18px 12px;
  }
  .coffee-empty-state .coffee-empty-icon {font-size:1.8rem}
}

/* فصل بصري أوضح للهوية الزرقاء. */
html .card,
html .modal,
html .modal-content,
html .table-wrap,
html .stmt-table-wrap,
html .inv-items-table,
html .return-items-table {
  border-color:var(--border) !important;
}

html .card-header,
html .modal-header,
html .modal-footer {
  background:var(--surface2) !important;
  border-color:var(--border) !important;
}

html .field input,
html .field select,
html .field textarea,
html select,
html input[type="text"],
html input[type="number"],
html input[type="date"] {
  border-color:var(--border) !important;
}

html .table-wrap thead th,
html thead tr,
html .inv-items-table th {
  background:var(--surface3) !important;
  color:var(--text) !important;
  border-color:var(--border) !important;
}

html th,
html td {
  border-color:var(--border) !important;
}

html tbody tr:hover {
  background:var(--surface2) !important;
}

/* صفحات السجلات القديمة: خلفية هيدر خفيفة ملوّنة من هوية الوضع بدل اللون العام المفروض في 7.0.269. */
html
:is(#page-invoices,#page-salesReturns,#page-purchases,#page-purchaseReturns,#page-customers,#page-suppliers,#page-treasury,#page-products,#page-receipts,#page-payments)
.table-wrap {
  background:var(--surface) !important;
  border-color:var(--border) !important;
}

html
:is(#page-invoices,#page-salesReturns,#page-purchases,#page-purchaseReturns,#page-customers,#page-suppliers,#page-treasury,#page-products,#page-receipts,#page-payments)
.table-wrap thead tr,
html
:is(#page-invoices,#page-salesReturns,#page-purchases,#page-purchaseReturns,#page-customers,#page-suppliers,#page-treasury,#page-products,#page-receipts,#page-payments)
.table-wrap thead th {
  background:color-mix(in srgb,var(--primary) 9%,var(--surface3)) !important;
  color:var(--text) !important;
  border-color:var(--border) !important;
}

html
:is(#page-invoices,#page-salesReturns,#page-purchases,#page-purchaseReturns,#page-customers,#page-suppliers,#page-treasury,#page-products,#page-receipts,#page-payments)
.table-wrap thead th * {
  color:inherit !important;
}

html
:is(#page-invoices,#page-salesReturns,#page-purchases,#page-purchaseReturns,#page-customers,#page-suppliers,#page-treasury,#page-products,#page-receipts,#page-payments)
.table-wrap tbody tr,
html
:is(#page-invoices,#page-salesReturns,#page-purchases,#page-purchaseReturns,#page-customers,#page-suppliers,#page-treasury,#page-products,#page-receipts,#page-payments)
.table-wrap tbody td {
  background:var(--surface) !important;
  color:var(--text) !important;
  border-color:var(--border) !important;
}

html
:is(#page-invoices,#page-salesReturns,#page-purchases,#page-purchaseReturns,#page-customers,#page-suppliers,#page-treasury,#page-products,#page-receipts,#page-payments)
.table-wrap tbody tr:hover td {
  background:var(--surface2) !important;
}

/* الخزنة الرئيسية بها جدول stats-table أيضًا. */
html #page-treasury .stats-table thead th {
  background:color-mix(in srgb,var(--primary) 9%,var(--surface3)) !important;
  color:var(--text) !important;
  border-color:var(--border) !important;
}
html #page-treasury .stats-table thead th * {
  color:inherit !important;
}

/* فلاتر الوصفات على الموبايل: كل عنصر في سطر وبعرض كامل. */
@media (max-width:700px){
  #page-recipes .card-header {
    align-items:stretch !important;
  }
  #page-recipes .recipe-filters-row {
    width:100% !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:10px !important;
  }
  #page-recipes .recipe-filters-row .search-bar,
#page-recipes .recipe-filters-row select {
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    flex:0 0 auto !important;
  }
  #page-recipes .recipe-filters-row .search-bar {
    box-sizing:border-box !important;
  }
}

/* 7.0.271: restore semantic icon colors in light-mode summary stats tables.
   The light-record header normalization must not flatten these icons to the header text color. */
html #page-delivery .stats-table thead th i.fa-box-open {
  color:#7C3AED !important;
  background:#F3E8FF;
  border:1px solid #DDD6FE;
}
html #page-delivery .stats-table thead th i.fa-motorcycle {
  color:#278F7E !important;
  background:#E2F0EC;
  border:1px solid #BAE6FD;
}
html #page-delivery .stats-table thead th i.fa-circle-check {
  color:#15803D !important;
  background:#DCFCE7;
  border:1px solid #BBF7D0;
}
html #page-delivery .stats-table thead th i.fa-circle-xmark {
  color:#DC2626 !important;
  background:#FEE2E2;
  border:1px solid #FECACA;
}

html #page-fixedAssets .stats-table thead th i.fa-landmark {
  color:#145C52 !important;
  background:#D9EAE5;
  border:1px solid #BCD4CE;
}
html #page-fixedAssets .stats-table thead th i.fa-arrow-trend-down {
  color:#DC2626 !important;
  background:#FEE2E2;
  border:1px solid #FECACA;
}
html #page-fixedAssets .stats-table thead th i.fa-scale-balanced {
  color:#15803D !important;
  background:#DCFCE7;
  border:1px solid #BBF7D0;
}
html #page-fixedAssets .stats-table thead th i.fa-calendar-day {
  color:#B45309 !important;
  background:#FEF3C7;
  border:1px solid #FDE68A;
}
html #page-fixedAssets .stats-table thead th i.fa-list-check {
  color:#7C3AED !important;
  background:#F3E8FF;
  border:1px solid #DDD6FE;
}

/* compact icon chips: visible without changing the table/header layout */
html #page-delivery .stats-table thead th i,
html #page-fixedAssets .stats-table thead th i {
  width:26px;
  height:26px;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  margin-left:7px !important;
  vertical-align:middle;
  box-sizing:border-box;
}

@media (max-width:700px){
  #page-coffeeReports #cr-summary-cards {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
  }
  #page-coffeeReports .coffee-report-stat-card {
    min-width:0 !important;
    padding:12px 10px !important;
  }
  #page-coffeeReports .coffee-report-stat-label {
    font-size:.72rem !important;
    line-height:1.35 !important;
    white-space:normal !important;
  }
  #page-coffeeReports .coffee-report-stat-value {
    font-size:1rem !important;
    line-height:1.25 !important;
    overflow-wrap:anywhere;
  }
}

/* 7.0.275 — توحيد رؤوس كل الجداول
   بنفس القاعدة الناجحة المستخدمة في صفحات فواتير البيع والمرتجعات. */
html table thead tr,
html table thead th,
html .table-wrap thead tr,
html .table-wrap thead th,
html .stmt-table thead tr,
html .stmt-table thead th,
html .profit-summary-tbl thead tr,
html .profit-summary-tbl thead th,
html .bs-table thead tr,
html .bs-table thead th,
html .inv-items-table thead tr,
html .inv-items-table thead th,
html .return-items-table thead tr,
html .return-items-table thead th,
html .rep-table thead tr,
html .rep-table thead th,
html .stats-table thead tr,
html .stats-table thead th {
  background:color-mix(in srgb,var(--primary) 9%,var(--surface3)) !important;
  color:var(--text) !important;
  border-color:var(--border) !important;
  text-shadow:none !important;
}

html table thead th *,
html .table-wrap thead th *,
html .stmt-table thead th *,
html .profit-summary-tbl thead th *,
html .bs-table thead th *,
html .inv-items-table thead th *,
html .return-items-table thead th *,
html .rep-table thead th *,
html .stats-table thead th * {
  color:inherit !important;
  text-shadow:none !important;
}

/* نحافظ على ألوان أيقونات الإحصائيات ذات المعنى الدلالي التي تم إصلاحها سابقًا. */
html #page-delivery .stats-table thead th i.fa-box-open {color:#7C3AED !important}
html #page-delivery .stats-table thead th i.fa-motorcycle {color:#278F7E !important}
html #page-delivery .stats-table thead th i.fa-circle-check {color:#15803D !important}
html #page-delivery .stats-table thead th i.fa-circle-xmark {color:#DC2626 !important}
html #page-fixedAssets .stats-table thead th i.fa-landmark {color:#145C52 !important}
html #page-fixedAssets .stats-table thead th i.fa-arrow-trend-down {color:#DC2626 !important}
html #page-fixedAssets .stats-table thead th i.fa-scale-balanced {color:#15803D !important}
html #page-fixedAssets .stats-table thead th i.fa-calendar-day {color:#B45309 !important}
html #page-fixedAssets .stats-table thead th i.fa-list-check {color:#7C3AED !important}

/* إصلاح نص رؤوس جداول قسم التقارير */
html #page-reports table thead th,
html #page-reports table thead th *,
html #page-reports .rep-table thead th,
html #page-reports .rep-table thead th *,
html #page-reports .stmt-table thead th,
html #page-reports .stmt-table thead th *,
html #page-reports .profit-summary-tbl thead th,
html #page-reports .profit-summary-tbl thead th *,
html #page-reports .bs-table thead th,
html #page-reports .bs-table thead th * {
  color:var(--text) !important;
  text-shadow:none !important;
  opacity:1 !important;
}


  body.order-taker-mode .sidebar,
body.order-taker-mode .topbar {display:none !important}
  body.order-taker-mode .main {margin:0 !important;width:100% !important;min-height:100vh !important}
  body.order-taker-mode .content {padding:0 !important;max-width:none !important}
  body.order-taker-mode .page {display:none !important}
  body.order-taker-mode #page-waiterMode {display:block !important;min-height:100vh !important;background:#f5f3ff !important}
  
  .waiter-shell {min-height:100vh;padding:18px;max-width:1180px;margin:auto}
  .waiter-shell-header {
    display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
    background:linear-gradient(135deg,#6d28d9,#7c3aed);color:#fff;border-radius:20px;padding:22px;
    box-shadow:0 16px 34px rgba(109,40,217,.22);margin-bottom:18px
  }
  .waiter-shell-eyebrow {font-size:.72rem;font-weight:800;opacity:.82;letter-spacing:.06em;text-transform:uppercase}
  .waiter-shell-header h2 {margin:4px 0 6px;font-size:1.35rem;color:#fff}
  .waiter-shell-header p {margin:0;font-size:.82rem;opacity:.9}
  .waiter-logout-btn {
    border:1px solid rgba(255,255,255,.32);background:rgba(255,255,255,.12);color:#fff;border-radius:12px;
    padding:10px 14px;font-family:inherit;font-weight:800;cursor:pointer
  }
  .waiter-shell-grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
  .waiter-shell-card {
    background:var(--surface);border:1px solid color-mix(in srgb,#7c3aed 18%,var(--border));border-radius:16px;
    padding:20px;min-height:150px;display:flex;flex-direction:column;gap:9px
  }
  .waiter-shell-card i {font-size:1.35rem;color:#7c3aed}
  .waiter-shell-card strong {font-size:.95rem;color:var(--text)}
  .waiter-shell-card span {font-size:.78rem;line-height:1.65;color:var(--text-muted)}
  .waiter-shell-card.active {border-color:#7c3aed;box-shadow:0 8px 24px rgba(124,58,237,.12)}
  .waiter-phase-note {
    margin-top:16px;background:var(--surface);border:1px dashed color-mix(in srgb,#7c3aed 35%,var(--border));
    border-radius:14px;padding:14px 16px;color:var(--text-muted);font-size:.8rem;line-height:1.7
  }
  .waiter-phase-note i {color:#7c3aed;margin-left:6px}
  @media(max-width:760px){
    body.order-taker-mode,
body.order-taker-mode .main,
body.order-taker-mode .content,
body.order-taker-mode #page-waiterMode {padding-top:0 !important;margin-top:0 !important}
    .waiter-shell {
      padding:calc(env(safe-area-inset-top,0px) + 6px) 12px 12px !important;
      margin-top:0 !important;
    }
    .waiter-shell-header {
      margin-top:0 !important;
      padding:18px;
      border-radius:16px;
    }
    .waiter-shell-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
    .waiter-shell-card {min-height:130px;padding:15px}
  }

  .waiter-nav {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:16px;background:var(--surface);border:1px solid var(--border);padding:7px;border-radius:15px}
  .waiter-nav-btn {border:0;background:transparent;color:var(--text-muted);font-family:inherit;font-weight:800;font-size:.78rem;min-height:48px;border-radius:11px;display:flex;align-items:center;justify-content:center;gap:7px;cursor:pointer}
  .waiter-nav-btn.active {background:#7c3aed;color:#fff;box-shadow:0 5px 14px rgba(124,58,237,.2)}
  .waiter-nav-btn:disabled {opacity:.4;cursor:not-allowed}
  .waiter-view {display:none;background:var(--surface);border:1px solid var(--border);border-radius:17px;padding:16px}
  .waiter-view.active {display:block}
  .waiter-view-head {display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
  .waiter-view-head h3 {margin:0 0 3px;color:var(--text);font-size:1rem}
  .waiter-view-head h3 i {color:#7c3aed;margin-left:5px}
  .waiter-view-head p {margin:0;color:var(--text-muted);font-size:.76rem}
  .waiter-refresh-btn,
.waiter-back-btn {border:1px solid color-mix(in srgb,#7c3aed 30%,var(--border));background:var(--surface2);color:#7c3aed;border-radius:10px;padding:9px 12px;font-family:inherit;font-weight:800;cursor:pointer}
  .waiter-status-legend {display:flex;gap:12px;flex-wrap:wrap;font-size:.7rem;color:var(--text-muted);margin:9px 0 14px}
  .waiter-status-legend span {display:flex;align-items:center;gap:5px}
  .waiter-dot {width:9px;height:9px;border-radius:50%;display:inline-block}.waiter-dot.empty {background:#22c55e}.waiter-dot.occupied {background:#ef4444}.waiter-dot.reserved {background:#f59e0b}.waiter-dot.awaiting_payment {background:#8b5cf6}
  .waiter-floor-tabs {display:flex;gap:7px;overflow-x:auto;padding-bottom:7px;margin-bottom:10px;scrollbar-width:none}
  .waiter-floor-tabs::-webkit-scrollbar {display:none}
  .waiter-floor-tab {white-space:nowrap;border:1px solid var(--border);background:var(--surface2);color:var(--text);border-radius:999px;padding:8px 14px;font-family:inherit;font-size:.75rem;font-weight:800;cursor:pointer}
  .waiter-floor-tab.active {background:#ede9fe;border-color:#8b5cf6;color:#6d28d9}
  
  .waiter-tables-grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;min-height:180px}
  .waiter-table-btn {position:relative;border:1px solid var(--border);background:var(--surface2);border-radius:15px;padding:15px 10px;min-height:112px;font-family:inherit;cursor:pointer;text-align:center;color:var(--text);transition:.15s}
  .waiter-table-btn:hover {transform:translateY(-1px);border-color:#8b5cf6}
  .waiter-table-btn .table-icon {font-size:1.25rem;margin-bottom:6px}
  .waiter-table-btn .table-name {font-weight:900;font-size:.9rem}
  .waiter-table-btn .table-meta {font-size:.68rem;color:var(--text-muted);margin-top:4px}
  .waiter-table-btn .table-state {display:inline-flex;margin-top:7px;border-radius:999px;padding:3px 8px;font-size:.64rem;font-weight:900}
  .waiter-table-btn.empty .table-state {background:#dcfce7;color:#166534}
  .waiter-table-btn.occupied .table-state {background:#fee2e2;color:#991b1b}
  .waiter-table-btn.reserved .table-state {background:#fef3c7;color:#92400e}
  .waiter-table-btn.awaiting_payment .table-state {background:#ede9fe;color:#6d28d9}
  .waiter-open-order-badge {position:absolute;top:7px;left:7px;background:#7c3aed;color:#fff;border-radius:999px;padding:3px 6px;font-size:.58rem;font-weight:900}
  .waiter-loading,
.waiter-empty {grid-column:1/-1;min-height:170px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:9px;color:var(--text-muted);font-size:.8rem;text-align:center}
  .waiter-selected-wrap {max-width:620px;margin:12px auto 0;border:1px solid var(--border);border-radius:17px;padding:20px;background:var(--surface2);text-align:center}
  .waiter-selected-wrap .big-icon {width:58px;height:58px;border-radius:16px;background:#ede9fe;color:#7c3aed;display:grid;place-items:center;font-size:1.5rem;margin:0 auto 10px}
  .waiter-selected-wrap h3 {margin:0;color:var(--text)}.waiter-selected-wrap p {color:var(--text-muted);font-size:.77rem}
  .waiter-selected-info {display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
  .waiter-selected-info div {background:var(--surface);border:1px solid var(--border);border-radius:11px;padding:10px}
  .waiter-selected-info span {display:block;color:var(--text-muted);font-size:.64rem}.waiter-selected-info b {display:block;margin-top:3px;font-size:.78rem;color:var(--text)}
  .waiter-next-disabled {margin-top:15px;width:100%;border:0;background:#7c3aed;color:#fff;border-radius:12px;padding:12px;font-family:inherit;font-weight:900;opacity:.5;cursor:not-allowed}
  @media(max-width:760px){
    .waiter-nav {position:sticky;top:0;z-index:5;grid-template-columns:repeat(4,1fr)}
    .waiter-nav-btn {font-size:.66rem;flex-direction:column;gap:3px;min-height:52px}
    .waiter-tables-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
    .waiter-table-btn {min-height:106px}
    .waiter-selected-info {grid-template-columns:1fr 1fr}
  }

  .waiter-start-order-btn {margin-top:15px;width:100%;border:0;background:#7c3aed;color:#fff;border-radius:12px;padding:12px;font-family:inherit;font-weight:900;cursor:pointer}
  .waiter-order-layout {display:grid;grid-template-columns:minmax(0,1.7fr) minmax(280px,.8fr);gap:14px;align-items:start}
  .waiter-menu-tools {display:flex;flex-direction:column;gap:9px;margin-bottom:12px}
  .waiter-menu-search {position:relative}
  .waiter-menu-search i {position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--text-muted);font-size:.8rem}
  .waiter-menu-search input {width:100%;min-height:42px;border:1px solid var(--border);background:var(--surface2);color:var(--text);border-radius:12px;padding:0 36px 0 12px;font-family:inherit}
  .waiter-category-tabs {display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;padding-bottom:3px}
  .waiter-category-tabs::-webkit-scrollbar {display:none}
  .waiter-category-btn {white-space:nowrap;border:1px solid var(--border);background:var(--surface2);color:var(--text);border-radius:999px;padding:7px 13px;font-family:inherit;font-size:.72rem;font-weight:800;cursor:pointer}
  .waiter-category-btn.active {background:#7c3aed;border-color:#7c3aed;color:#fff}
  .waiter-menu-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;min-height:240px}
  .waiter-product-card {border:1px solid var(--border);background:var(--surface2);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;min-height:150px}
  .waiter-product-image {height:78px;background:linear-gradient(135deg,#ede9fe,#f5f3ff);display:flex;align-items:center;justify-content:center;overflow:hidden}
  .waiter-product-image img {width:100%;height:100%;object-fit:cover}
  .waiter-product-image i {font-size:1.5rem;color:#7c3aed}
  .waiter-product-body {padding:10px;display:flex;flex-direction:column;gap:5px;flex:1}
  .waiter-product-name {font-size:.82rem;font-weight:900;color:var(--text)}
  .waiter-product-desc {font-size:.66rem;color:var(--text-muted);line-height:1.5;min-height:20px}
  .waiter-product-price {font-size:.72rem;font-weight:800;color:#7c3aed}
  .waiter-product-add {margin-top:auto;border:0;background:#7c3aed;color:#fff;border-radius:9px;padding:8px;font-family:inherit;font-size:.72rem;font-weight:900;cursor:pointer}
  .waiter-cart {position:sticky;top:10px;background:var(--surface2);border:1px solid var(--border);border-radius:15px;padding:12px}
  .waiter-cart-head {display:flex;justify-content:space-between;align-items:center;font-size:.8rem;font-weight:900;color:var(--text);padding-bottom:9px;border-bottom:1px solid var(--border)}
  .waiter-cart-head i {color:#7c3aed;margin-left:5px}
  .waiter-cart-head span {font-size:.66rem;color:var(--text-muted)}
  .waiter-cart-items {display:flex;flex-direction:column;gap:8px;max-height:420px;overflow-y:auto;padding:10px 0;scrollbar-width:none}
  .waiter-cart-items::-webkit-scrollbar {display:none}
  .waiter-cart-empty {min-height:110px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--text-muted);gap:7px;font-size:.72rem}
  .waiter-cart-empty i {font-size:1.4rem;color:#a78bfa}
  .waiter-cart-line {border:1px solid var(--border);background:var(--surface);border-radius:11px;padding:9px}
  .waiter-cart-line-top {display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
  .waiter-cart-line-name {font-size:.75rem;font-weight:900;color:var(--text)}
  .waiter-cart-line-meta {font-size:.62rem;color:var(--text-muted);line-height:1.5;margin-top:3px}
  .waiter-cart-line-actions {display:flex;align-items:center;gap:6px;margin-top:8px}
  .waiter-cart-line-actions button {width:28px;height:28px;border:1px solid var(--border);background:var(--surface2);color:var(--text);border-radius:8px;font-weight:900;cursor:pointer}
  .waiter-cart-line-actions b {min-width:24px;text-align:center;font-size:.74rem}
  .waiter-remove-line {margin-inline-start:auto!important;color:var(--danger)!important}
  .waiter-order-note-wrap {border-top:1px solid var(--border);padding-top:9px}
  .waiter-order-note-wrap label {display:block;font-size:.68rem;font-weight:800;color:var(--text-muted);margin-bottom:5px}
  .waiter-order-note-wrap textarea {width:100%;border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:9px;padding:8px;font-family:inherit;resize:vertical}
  .waiter-send-disabled,
.waiter-send-btn {width:100%;margin-top:9px;border:0;background:#7c3aed;color:#fff;border-radius:11px;padding:11px;font-family:inherit;font-weight:900}.waiter-send-disabled {opacity:.5;cursor:not-allowed}.waiter-send-btn {cursor:pointer}.waiter-send-btn:disabled {opacity:.55;cursor:not-allowed}
  .waiter-existing-order-box {border:1px solid #c4b5fd;background:#f5f3ff;border-radius:13px;padding:11px;margin-bottom:12px}
  
  .waiter-existing-title {font-size:.76rem;font-weight:900;color:#6d28d9;margin-bottom:7px}
  
  .waiter-existing-items {display:flex;gap:6px;flex-wrap:wrap}
  .waiter-existing-chip {border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:999px;padding:5px 8px;font-size:.65rem}
  #waiter-mod-groups {display:flex;flex-direction:column;gap:12px}
  .waiter-mod-group {border:1px solid var(--border);border-radius:11px;padding:10px}
  .waiter-mod-group-head {display:flex;justify-content:space-between;gap:8px;font-size:.76rem;font-weight:900;margin-bottom:7px;color:var(--text)}
  .waiter-mod-required {font-size:.6rem;background:#fee2e2;color:#991b1b;border-radius:999px;padding:2px 6px}
  .waiter-mod-options {display:grid;gap:6px}
  .waiter-mod-option {display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px;border-radius:8px;background:var(--surface2);font-size:.72rem;color:var(--text)}
  @media(max-width:900px){.waiter-order-layout {grid-template-columns:1fr}.waiter-cart {position:static}.waiter-menu-grid {grid-template-columns:repeat(2,minmax(0,1fr))}}

  .waiter-order-list {display:grid;gap:10px;min-height:170px}
  .waiter-order-row {border:1px solid var(--border);background:var(--surface2);border-radius:14px;padding:12px}
  .waiter-order-row-head {display:flex;justify-content:space-between;gap:10px;align-items:flex-start;flex-wrap:wrap}
  .waiter-order-row-title {font-size:.82rem;font-weight:900;color:var(--text)}
  .waiter-order-row-meta {font-size:.66rem;color:var(--text-muted);margin-top:3px}
  .waiter-order-status {border-radius:999px;padding:4px 8px;font-size:.62rem;font-weight:900}
  .waiter-order-status.sent_to_kitchen {background:#fef3c7;color:#92400e}
  .waiter-order-status.ready {background:#dcfce7;color:#166534}
  .waiter-order-status.closed {background:#e2e8f0;color:#334155}
  .waiter-order-status.open {background:#D9EAE5;color:#145C52}
  .waiter-order-items {display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
  .waiter-order-item-chip {border:1px solid var(--border);background:var(--surface);border-radius:999px;padding:5px 8px;font-size:.64rem;color:var(--text)}
  .waiter-ready-row {border-color:#bbf7d0;background:#f0fdf4}
  
  .waiter-ready-icon {color:#16a34a;margin-left:5px}
  .waiter-live-indicator {display:inline-flex;align-items:center;gap:5px;font-size:.62rem;color:var(--text-muted);margin-inline-start:8px}
  .waiter-live-indicator i {font-size:.5rem;color:#22c55e}

  .waiter-order-item-chip.is-ready {border-color:#86efac;background:#dcfce7;color:#166534;font-weight:800}
  
  .waiter-served-btn {width:100%;margin-top:11px;border:0;background:#16a34a;color:#fff;border-radius:11px;padding:10px 12px;font-family:inherit;font-size:.74rem;font-weight:900;cursor:pointer}
  .waiter-served-btn:disabled {opacity:.55;cursor:not-allowed}

@media (max-width:760px){
  body.order-taker-mode {margin-top:0 !important}
  body.order-taker-mode #app {padding-top:0 !important;margin-top:0 !important}
  body.order-taker-mode #page-waiterMode {padding-top:0 !important}
}

  .waiter-cart-head-actions {display:flex;align-items:center;gap:8px}
  .waiter-cart-close {display:none;border:0;background:transparent;color:var(--text);width:34px;height:34px;border-radius:9px;cursor:pointer}
  .waiter-cart-summary {display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--border);padding:11px 2px 8px;color:var(--text)}
  .waiter-cart-summary span {font-size:.72rem;font-weight:800;color:var(--text-muted)}
  .waiter-cart-summary strong {font-size:1rem;color:#7c3aed}
  .waiter-cart-line-price {font-size:.7rem;font-weight:900;color:#7c3aed;white-space:nowrap;margin-inline-start:auto}
  .waiter-floating-cart,
.waiter-cart-backdrop {display:none}

  @media(max-width:760px){
    body.waiter-cart-open {overflow:hidden !important}

    #page-waiterMode .waiter-order-layout {display:block !important}
    #page-waiterMode .waiter-cart {
      display:flex !important;
      flex-direction:column;
      position:fixed !important;
      top:0 !important;
      right:0 !important;
      bottom:0 !important;
      width:min(88vw,390px) !important;
      max-width:390px !important;
      height:100dvh !important;
      z-index:4100 !important;
      margin:0 !important;
      padding:calc(env(safe-area-inset-top,0px) + 12px) 14px calc(env(safe-area-inset-bottom,0px) + 14px) !important;
      border-radius:18px 0 0 18px !important;
      border:0 !important;
      box-shadow:-18px 0 42px rgba(15,23,42,.28) !important;
      background:var(--surface) !important;
      transform:translateX(105%);
      visibility:hidden;
      pointer-events:none;
      transition:transform .24s ease,visibility .24s ease;
    }
    #page-waiterMode .waiter-cart.open {
      transform:translateX(0);
      visibility:visible;
      pointer-events:auto;
    }
    #page-waiterMode .waiter-cart-head {padding-bottom:10px;flex:0 0 auto}
    #page-waiterMode .waiter-cart-close {display:grid;place-items:center;background:var(--surface2)}
    #page-waiterMode .waiter-cart-items {max-height:none !important;flex:1 1 auto;min-height:0;overflow-y:auto;padding:10px 0}
    #page-waiterMode .waiter-cart-summary,
#page-waiterMode .waiter-order-note-wrap,
#page-waiterMode .waiter-send-btn {flex:0 0 auto}
    #page-waiterMode .waiter-send-btn {min-height:48px;font-size:.84rem;margin-top:10px}

    .waiter-cart-backdrop {
      display:block;
      position:fixed;
      inset:0;
      z-index:4050;
      background:rgba(15,23,42,.48);
      backdrop-filter:blur(2px);
      opacity:0;
      visibility:hidden;
      pointer-events:none;
      transition:opacity .22s ease,visibility .22s ease;
    }
    .waiter-cart-backdrop.open {opacity:1;visibility:visible;pointer-events:auto}

    .waiter-floating-cart {
      position:fixed;
      z-index:3900;
      right:14px;
      bottom:calc(env(safe-area-inset-bottom,0px) + 18px);
      min-width:154px;
      max-width:calc(100vw - 28px);
      min-height:52px;
      padding:8px 12px;
      border:0;
      border-radius:16px;
      background:#7c3aed;
      color:#fff;
      box-shadow:0 12px 28px rgba(76,29,149,.34);
      align-items:center;
      gap:9px;
      font-family:inherit;
      cursor:pointer;
      transform:translateY(18px) scale(.96);
      opacity:0;
      visibility:hidden;
      pointer-events:none;
      transition:transform .2s ease,opacity .2s ease,visibility .2s ease;
    }
    .waiter-floating-cart.visible {
      display:flex;
      transform:translateY(0) scale(1);
      opacity:1;
      visibility:visible;
      pointer-events:auto;
    }
    .waiter-floating-cart-icon {position:relative;display:grid;place-items:center;width:34px;height:34px;background:rgba(255,255,255,.15);border-radius:10px;flex:0 0 auto}
    .waiter-floating-cart-icon i {font-size:1rem}
    .waiter-floating-cart-icon b {
      position:absolute;top:-7px;left:-7px;min-width:19px;height:19px;padding:0 4px;border-radius:999px;
      display:grid;place-items:center;background:#fff;color:#6d28d9;font-size:.62rem;border:2px solid #7c3aed
    }
    .waiter-floating-cart-label {font-size:.76rem;font-weight:900}
    .waiter-floating-cart strong {margin-inline-start:auto;font-size:.78rem;white-space:nowrap}

    /* السلة لم تعد جزءًا من التدفق أسفل المنتجات على الموبايل */
    #page-waiterMode .waiter-menu-grid {padding-bottom:78px}
  }

  .waiter-menu-pagination {display:flex;align-items:center;justify-content:center;gap:10px;margin-top:12px;padding:8px 0}
  .waiter-menu-pagination button {border:1px solid var(--border);background:var(--surface2);color:var(--text);border-radius:10px;padding:8px 12px;font-family:inherit;font-size:.72rem;font-weight:900;cursor:pointer}
  .waiter-menu-pagination button:disabled {opacity:.4;cursor:not-allowed}
  .waiter-menu-pagination span {min-width:58px;text-align:center;font-size:.72rem;font-weight:900;color:var(--text-muted)}

  body.order-taker-mode .waiter-shell {
    --waiter-fixed-header-h:112px;
    padding-top:calc(18px + var(--waiter-fixed-header-h)) !important;
  }
  body.order-taker-mode .waiter-shell-header {
    position:fixed !important;
    top:18px !important;
    left:50% !important;
    right:auto !important;
    width:min(calc(100% - 36px),1144px) !important;
    transform:translateX(-50%) !important;
    z-index:3800 !important;
    margin:0 !important;
  }

  @media(max-width:760px){
    body.order-taker-mode .waiter-shell {
      --waiter-fixed-header-h:108px;
      padding-top:calc(var(--waiter-fixed-header-h) + 12px) !important;
    }
    body.order-taker-mode .waiter-shell-header {
      top:0 !important;
      width:100% !important;
      max-width:none !important;
      border-radius:0 0 16px 16px !important;
      padding-top:calc(env(safe-area-inset-top,0px) + 18px) !important;
      padding-right:18px !important;
      padding-left:18px !important;
      padding-bottom:18px !important;
      box-shadow:0 10px 26px rgba(109,40,217,.24);
    }
  }

@media(max-width:760px){
  body.order-taker-mode,
body.order-taker-mode #app,
body.order-taker-mode .main,
body.order-taker-mode .content,
body.order-taker-mode #page-waiterMode {
    background:#f5f3ff !important;
  }
  
}

  /* بطاقة الشعار واسم الشركة أعلى "حسابي" تتبع الهوية البترولية الموحدة. */
  #page-account .profile-header {
    background:linear-gradient(135deg,var(--surface) 0%,var(--surface2) 100%) !important;
    border:1px solid var(--border) !important;
    color:var(--text) !important;
    box-shadow:0 8px 24px rgba(15,23,42,.06);
  }
  #page-account .profile-info h2 {
    color:var(--text) !important;
  }
  #page-account .profile-info p,
#page-account .profile-info p a {
    color:var(--text-muted) !important;
  }
  #page-account .profile-avatar {
    color:#fff !important;
    box-shadow:0 6px 18px color-mix(in srgb,var(--primary) 20%,transparent);
  }

#page-hrEmployee .hr-emp-page-head {display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%}
#page-hrEmployee .hr-emp-section-menu-wrap {position:relative;min-width:220px}
#page-hrEmployee .hr-emp-section-trigger {width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px}
#page-hrEmployee .hr-emp-section-current {display:flex;align-items:center;gap:8px;min-width:0}
#page-hrEmployee .hr-emp-section-menu {position:fixed;min-width:240px;max-height:320px;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:0 16px 36px rgba(0,0,0,.16);padding:6px;z-index:10050;display:none}
#page-hrEmployee .hr-emp-section-menu::-webkit-scrollbar {display:none;width:0;height:0}
#page-hrEmployee .hr-emp-section-menu.open {display:block}
#page-hrEmployee .hr-emp-section-option {display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:8px;cursor:pointer;font-size:.86rem;font-weight:700;color:var(--text);white-space:nowrap}
#page-hrEmployee .hr-emp-section-option:hover,
#page-hrEmployee .hr-emp-section-option.active {background:var(--surface2);color:var(--primary)}
#page-hrEmployee .hr-emp-section-option i {width:18px;text-align:center;color:var(--primary)}
@media(max-width:700px){
  #page-hrEmployee .card-header {align-items:stretch}
  #page-hrEmployee .hr-emp-page-head {flex-direction:column;align-items:stretch}
  #page-hrEmployee .hr-emp-section-menu-wrap {width:100%;min-width:0}
  #page-hrEmployee .hr-emp-section-menu {min-width:0}
}

  .empty-state .a3-empty-emoji,
.je-empty .a3-empty-emoji,
.pk-empty .a3-empty-emoji,
.dsh-empty .a3-empty-emoji,
.a3-inline-empty .a3-empty-emoji {
    width:46px;height:46px;display:grid;place-items:center;
    margin:0 auto 9px;border-radius:14px;
    background:color-mix(in srgb,var(--primary) 8%,var(--surface));
    border:1px solid color-mix(in srgb,var(--primary) 14%,var(--border));
    font-size:1.55rem;line-height:1;
    box-shadow:0 6px 18px rgba(15,23,42,.05);
    filter:saturate(.92);
  }
  .empty-state .a3-empty-title,
.a3-inline-empty .a3-empty-title {font-weight:700;color:var(--text)}
  .a3-inline-empty {min-height:88px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:18px;color:var(--text-muted)}
  .dsh-empty.a3-unified-empty {padding:22px 14px;text-align:center}
  .pk-empty.a3-unified-empty {padding:20px;text-align:center}
  .je-empty.a3-unified-empty {text-align:center}

@media(min-width:761px){
  body.order-taker-mode,
body.order-taker-mode #app,
body.order-taker-mode .main,
body.order-taker-mode .content,
body.order-taker-mode #page-waiterMode {
    padding-top:0 !important;
    margin-top:0 !important;
  }

  body.order-taker-mode .waiter-shell {
    --waiter-fixed-header-h:88px;
    max-width:none !important;
    width:100% !important;
    margin:0 !important;
    padding:calc(var(--waiter-fixed-header-h) + 16px) 22px 22px !important;
  }

  body.order-taker-mode .waiter-shell-header {
    top:0 !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    max-width:none !important;
    transform:none !important;
    border-radius:0 0 18px 18px !important;
    padding:14px 26px !important;
    min-height:88px;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:24px;
    box-shadow:0 10px 28px rgba(109,40,217,.22) !important;
  }

  body.order-taker-mode .waiter-shell-header > div:first-child {
    min-width:0;
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    grid-template-areas:
      "eyebrow title"
      "eyebrow identity";
    align-items:center;
    column-gap:16px;
  }

  body.order-taker-mode .waiter-shell-eyebrow {
    grid-area:eyebrow;
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:96px;
    min-height:46px;
    margin:0;
    padding:0 14px;
    border-radius:14px;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.18);
    letter-spacing:.08em;
  }

  body.order-taker-mode .waiter-shell-header h2 {
    grid-area:title;
    margin:0 0 3px !important;
    font-size:1.18rem !important;
    line-height:1.25;
  }

  body.order-taker-mode .waiter-shell-header p {
    grid-area:identity;
    margin:0 !important;
    font-size:.78rem !important;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    opacity:.88;
  }

  body.order-taker-mode .waiter-logout-btn {
    min-width:104px;
    min-height:42px;
    padding:9px 14px;
  }

  body.order-taker-mode .waiter-nav {
    grid-template-columns:repeat(4,minmax(150px,1fr));
    max-width:980px;
    margin:0 auto 16px;
  }

  body.order-taker-mode .waiter-view {
    max-width:1440px;
    margin:0 auto;
    padding:18px;
  }

  body.order-taker-mode .waiter-order-layout {
    grid-template-columns:minmax(0,1fr) 360px !important;
    gap:18px !important;
    align-items:start;
  }

  body.order-taker-mode .waiter-menu-grid {
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:14px !important;
    padding-bottom:0 !important;
  }

  body.order-taker-mode .waiter-cart {
    position:sticky !important;
    top:calc(var(--waiter-fixed-header-h) + 16px) !important;
    height:auto !important;
    max-height:calc(100vh - var(--waiter-fixed-header-h) - 32px) !important;
    overflow:hidden;
  }

  body.order-taker-mode .waiter-cart-items {
    max-height:calc(100vh - var(--waiter-fixed-header-h) - 250px) !important;
    overflow-y:auto;
  }

  body.order-taker-mode .waiter-floating-cart,
body.order-taker-mode .waiter-cart-backdrop,
body.order-taker-mode .waiter-cart-close {
    display:none !important;
  }
}

@media(min-width:1180px){
  body.order-taker-mode .waiter-menu-grid {
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  }
}

  .waiter-category-desktop-wrap {display:none}

  @media(min-width:761px){
    #page-waiterMode .waiter-menu-tools {
      display:grid !important;
      grid-template-columns:minmax(0,1fr) 250px !important;
      align-items:center;
      gap:12px !important;
      margin-bottom:14px;
    }

    #page-waiterMode .waiter-menu-search {
      min-width:0;
      margin:0 !important;
    }

    #page-waiterMode .waiter-category-tabs {
      display:none !important;
    }

    #page-waiterMode .waiter-category-desktop-wrap {
      display:block;
      position:relative;
      min-width:0;
    }

    #page-waiterMode .waiter-category-desktop-trigger {
      width:100%;
      min-height:44px;
      border:1px solid var(--border);
      background:var(--surface2);
      color:var(--text);
      border-radius:12px;
      padding:0 13px;
      font-family:inherit;
      cursor:pointer;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      font-size:.8rem;
      font-weight:800;
    }

    #page-waiterMode .waiter-category-desktop-trigger > span {
      display:flex;
      align-items:center;
      gap:8px;
      min-width:0;
    }

    #page-waiterMode .waiter-category-desktop-trigger > span > i {
      color:#7c3aed;
    }

    #page-waiterMode #waiter-category-desktop-label {
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }

    #page-waiterMode .waiter-category-desktop-menu {
      position:fixed;
      z-index:4300;
      display:none;
      min-width:250px;
      max-height:320px;
      overflow-y:auto;
      scrollbar-width:none;
      -ms-overflow-style:none;
      background:var(--surface);
      border:1px solid var(--border);
      border-radius:12px;
      padding:6px;
      box-shadow:0 18px 38px rgba(15,23,42,.18);
    }

    #page-waiterMode .waiter-category-desktop-menu::-webkit-scrollbar {display:none}
    #page-waiterMode .waiter-category-desktop-menu.open {display:block}

    #page-waiterMode .waiter-category-desktop-option {
      width:100%;
      border:0;
      background:transparent;
      color:var(--text);
      padding:9px 11px;
      border-radius:9px;
      font-family:inherit;
      font-size:.78rem;
      font-weight:800;
      cursor:pointer;
      text-align:right;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
    }

    #page-waiterMode .waiter-category-desktop-option:hover,
#page-waiterMode .waiter-category-desktop-option.active {
      background:var(--surface2);
      color:#7c3aed;
    }

    #page-waiterMode .waiter-category-desktop-option i {
      color:#7c3aed;
      width:18px;
      text-align:center;
    }
  }

@media(min-width:761px){
  body.order-taker-mode #waiter-view-order .waiter-cart {
    position:sticky !important;
    top:var(--waiter-cart-stick-under-header,100px) !important;
    box-sizing:border-box !important;
    height:var(--waiter-cart-viewport-h,calc(100dvh - 140px)) !important;
    max-height:var(--waiter-cart-viewport-h,calc(100dvh - 140px)) !important;
    min-height:0 !important;
    display:flex !important;
    flex-direction:column !important;
    overflow:hidden !important;
    margin:0 !important;
  }

  body.order-taker-mode #waiter-view-order .waiter-cart-head {
    flex:0 0 auto;
  }

  body.order-taker-mode #waiter-view-order .waiter-cart-items {
    flex:1 1 auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow-y:auto !important;
    overscroll-behavior:contain;
  }

  body.order-taker-mode #waiter-view-order .waiter-cart-summary,
body.order-taker-mode #waiter-view-order .waiter-order-note-wrap,
body.order-taker-mode #waiter-view-order .waiter-send-btn {
    flex:0 0 auto !important;
  }

  body.order-taker-mode #waiter-view-order .waiter-order-note-wrap textarea {
    resize:none !important;
  }

  body.order-taker-mode #waiter-view-order .waiter-send-btn {
    min-height:44px;
    margin-top:8px !important;
    position:relative;
    z-index:2;
  }
}

  /* يظل التمرير الرأسي فعالًا داخل كل المودالات مع إخفاء شريطه فقط. */
  .modal-backdrop,
.modal-backdrop .modal,
.modal-backdrop .modal-body,
.offline-sync-overlay,
.offline-sync-overlay .modal-content,
#modal-pos-payment .pm-body,
#modal-pos-preview .pv-body {
    scrollbar-width:none !important;
    -ms-overflow-style:none !important;
  }
  .modal-backdrop::-webkit-scrollbar,
.modal-backdrop .modal::-webkit-scrollbar,
.modal-backdrop .modal-body::-webkit-scrollbar,
.offline-sync-overlay::-webkit-scrollbar,
.offline-sync-overlay .modal-content::-webkit-scrollbar,
#modal-pos-payment .pm-body::-webkit-scrollbar,
#modal-pos-preview .pv-body::-webkit-scrollbar {
    display:none !important;
    width:0 !important;
    height:0 !important;
  }

/* ===== 2026-08-26: توحيد هوية رأس القائمة الجانبية مع الهيدر ===== */
html .sidebar-header {
  background: #187466 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  position: relative;
}


html .sidebar-brand-banner,
html .sidebar.collapsed .sidebar-brand-banner {
  background: #187466 !important;
  border: 1px solid rgba(255, 255, 255, .22) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05), 0 1px 3px rgba(0, 0, 0, .08) !important;
  border-radius: 10px !important;
}

html .sidebar-logo {
  background: rgba(255, 255, 255, .12) !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  color: #fff !important;
  box-shadow: none !important;
}

html .sidebar-title,
html .sidebar-title span,
html .sidebar-title #sb-company,
html #sb-company {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

html #sb-branch-badge {
  color: rgba(255, 255, 255, .86) !important;
  background: rgba(255, 255, 255, .08) !important;
  border-color: rgba(255, 255, 255, .16) !important;
}

html #sb-branch-badge i,
html #sb-branch-name {
  color: rgba(255, 255, 255, .88) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, .88) !important;
}

html #sb-trial-badge {
  color: #FDE68A !important;
  -webkit-text-fill-color: #FDE68A !important;
  background: rgba(245, 158, 11, .16) !important;
  border-color: rgba(251, 191, 36, .42) !important;
}

html #sb-trial-badge i {
  color: #FBBF24 !important;
}

/* 2026-08-26 — definitive sidebar/page seamless edge */
html .sidebar,
html .sidebar.collapsed {
  border-left: 0 !important;
  border-inline-start: 0 !important;
  box-shadow: none !important;
}
html .sidebar-header::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}


/* 2026-08-26 — remove remaining decorative gold line from main header */
html .topbar::before,
html .topbar::after,
html .app-header::before,
html .app-header::after,
html header.app-header::before,
html header.app-header::after,
html .main-header::before,
html .main-header::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}
html .topbar,
html .app-header,
html header.app-header,
html .main-header {
  border-bottom-color: transparent !important;
}

/* ============================================================
   Reports — unified card layout matching Partner Equity page
   2026-08-26
   ============================================================ */
#page-reports .rep-tabs-card{
  padding:0 !important;
  overflow:visible !important;
  border:1px solid var(--border) !important;
  border-radius:var(--radius,12px) !important;
  background:var(--surface) !important;
  box-shadow:var(--shadow-sm,0 2px 8px rgba(0,0,0,.05)) !important;
}
#page-reports .rep-tabs-card::before,
#page-reports .rep-tabs-card::after{display:none !important;content:none !important;}
#page-reports .rep-category-head{
  min-height:58px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:14px !important;
  padding:12px 18px !important;
  margin:0 !important;
  border-bottom:1px solid var(--border) !important;
  background:transparent !important;
}
#page-reports .rep-category-head .card-title{margin:0 !important;}
#page-reports .rep-category-menu-wrap{position:relative !important;min-width:220px !important;}
#page-reports .rep-category-trigger{
  width:100% !important;
  min-height:38px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
}
#page-reports #rep-select-row{
  display:grid !important;
  grid-template-columns:1fr !important;
  padding:16px 18px 0 !important;
  margin:0 !important;
}
#page-reports #rep-custom-dd{width:100% !important;}
#page-reports #rep-custom-dd-trigger{width:100% !important;min-height:40px !important;}
#page-reports #rep-guidance-slot{padding:0 18px !important;}
#page-reports .rep-layout{
  display:block;
  padding:16px 18px 20px !important;
  margin:0 !important;
  width:100% !important;
}
#page-reports .rep-sidebar{
  width:100% !important;
  max-width:none !important;
  position:static !important;
  display:grid !important;
  grid-template-columns:minmax(260px,1.35fr) minmax(220px,1fr) auto !important;
  align-items:end !important;
  gap:12px !important;
  padding:12px !important;
  margin:0 0 14px !important;
  border:1px solid var(--border) !important;
  border-radius:10px !important;
  background:var(--surface2) !important;
  box-shadow:none !important;
}
#page-reports .rep-sidebar-header{display:none !important;}
#page-reports .rep-filter-group{
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  min-width:0 !important;
}
#page-reports .rep-filter-label{margin:0 0 7px !important;display:block !important;}
#page-reports .rep-period-chips{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:6px !important;
  margin:0 0 8px !important;
}
#page-reports .rep-dates-stack{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:8px !important;
}
#page-reports .rep-dates-stack > div{min-width:0 !important;}
#page-reports .rep-input{width:100% !important;}
#page-reports #rep-extra-content{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:8px !important;
}
#page-reports .rep-filter-actions{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  margin:0 !important;
  padding:0 !important;
  align-self:end !important;
}
#page-reports .rep-filter-actions button{white-space:nowrap !important;}
#page-reports .rep-main{width:100% !important;min-width:0 !important;margin:0 !important;}
#page-reports .rep-actions-bar{
  margin:0 0 12px !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
}
#page-reports .rep-doc{width:100% !important;}

@media (max-width:1050px){
  #page-reports .rep-sidebar{grid-template-columns:1fr 1fr !important;}
  #page-reports .rep-filter-actions{grid-column:1/-1 !important;justify-content:flex-end !important;}
}
@media (max-width:700px){
  #page-reports .rep-tabs-card{border-radius:12px !important;}
  #page-reports .rep-category-head{
    flex-direction:column !important;
    align-items:stretch !important;
    padding:12px 14px !important;
  }
  #page-reports .rep-category-menu-wrap{width:100% !important;min-width:0 !important;}
  #page-reports #rep-select-row{padding:14px 14px 0 !important;}
  #page-reports #rep-guidance-slot{padding:0 14px !important;}
  #page-reports .rep-layout{padding:14px !important;}
  #page-reports .rep-sidebar{grid-template-columns:1fr !important;padding:10px !important;}
  #page-reports .rep-filter-actions{grid-column:auto !important;justify-content:stretch !important;}
  #page-reports .rep-filter-actions button{flex:1 1 0 !important;}
  #page-reports .rep-dates-stack,
  #page-reports #rep-extra-content{grid-template-columns:1fr !important;}
  #page-reports .rep-actions-bar{align-items:stretch !important;gap:10px !important;}
  #page-reports .rep-actions-bar .export-dropdown{align-self:flex-end !important;}
}


/* ===== Sidebar navigation heading — first item inside the scroll container ===== */
.sidebar-nav > .sidebar-menu-head {
  width: 100%;
  min-height: 36px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 8px 16px;
  margin: 0 0 8px;
  background: var(--sidebar-bg);
  color: var(--text-muted, #64748B);
  border: 0;
  border-bottom: 1px solid var(--sidebar-footer-border);
  box-shadow: none;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.25;
}

.sidebar-nav > .sidebar-menu-head > span {
  display: block;
  width: 100%;
  color: var(--text-muted, #64748B);
  opacity: .9;
  white-space: nowrap;
}

.sidebar.collapsed .sidebar-nav > .sidebar-menu-head {
  min-height: 36px;
  padding-inline: 6px;
  justify-content: center;
}

.sidebar.collapsed .sidebar-nav > .sidebar-menu-head > span {
  display: none;
}


/* 2026-08-26 — desktop only: remove sidebar/page seam during sidebar scrolling */
@media (min-width: 769px) {
  html .sidebar,
  html #sidebar,
  html .sidebar.collapsed {
    border-left: 0 !important;
    border-right: 0 !important;
    border-inline: 0 !important;
    box-shadow: none !important;
    background-clip: border-box !important;
  }
}



/* 2026-08-26 — unified sidebar scroll container */
.sidebar > .sidebar-nav {
  padding-top: 12px !important;
}

/* 2026-08-26 — keep sidebar menu heading fixed while nav items scroll */
.sidebar-nav > .sidebar-menu-head {
  position: sticky !important;
  top: 0 !important;
  z-index: 5 !important;
  margin-top: -12px !important;
  margin-bottom: 8px !important;
  background: var(--sidebar-bg) !important;
}

/* 2026-08-26 — sticky sidebar heading must fully cover scrolling items */
.sidebar-nav > .sidebar-menu-head {
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
  isolation: isolate !important;
  opacity: 1 !important;
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.sidebar-nav > .sidebar-menu-head::before,
.sidebar-nav > .sidebar-menu-head::after {
  content: none !important;
  display: none !important;
}
.sidebar-nav > .nav-section,
.sidebar-nav > .nav-item {
  position: relative;
  z-index: 1;
}

/* 2026-08-26 — sidebar menu heading flush with company/header area */
.sidebar > .sidebar-nav {
  padding-top: 0 !important;
}

.sidebar-nav > .sidebar-menu-head {
  top: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 8px !important;
}


/* 2026-08-26 — mobile page top spacing: compact, matching desktop visual gap */
@media (max-width: 768px) {
  html .content {
    padding-top: 4px !important;
  }
  html .page.active {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

/* 2026-08-26 — remove legacy mobile top reservation from old upper strip */
@media (max-width: 900px) {
  html .main {
    padding-top: 68px !important;
  }
}

@media (max-width: 600px) {
  html .main {
    padding-top: 56px !important;
  }
}

/* Keep only a very small content gap below the fixed topbar. */
@media (max-width: 768px) {
  html .content {
    padding-top: 4px !important;
  }
}

/* 2026-08-26 — mobile: fixed header height + desktop-equivalent visual gap */
@media (max-width: 900px) {
  html .main {
    padding-top: 88px !important; /* 68px header + 20px gap */
  }
}

@media (max-width: 600px) {
  html .main {
    padding-top: 88px !important; /* final topbar is still 68px!important */
  }
}

/* Avoid double-counting the gap inside content. */
@media (max-width: 768px) {
  html .content {
    padding-top: 0 !important;
  }
}

/* 2026-08-26 — POS soft surfaces: products + cart only */
#page-pos .pos-products-panel,
#page-pos .pos-products-card,
#page-pos .products-panel,
#page-pos .pos-cart,
#page-pos .pos-cart-panel,
#page-pos .cart-panel {
  background-color: #F5F7FA !important;
}


/* 2026-08-27 — first sidebar section after sticky menu header has no separator */
.sidebar-nav > .sidebar-menu-head + .nav-section {
  margin-top: 0 !important;
  border-top: 0 !important;
}

#page-myShortcuts .shortcut-card,
#myShortcutsPage .shortcut-card,
.page-myShortcuts .shortcut-card,
body #page-myShortcuts .shortcuts-grid .shortcut-card {
  border-radius: 10px !important;
}

/* 2026-08-27 — General Trade dashboard styled with Coffee dashboard visual language */
#page-dashboard #dsh-analytics-root.retail-dashboard {
  display:flex;
  flex-direction:column;
  gap:14px;
  width:100%;
  min-width:0;
}
#page-dashboard #dsh-analytics-root.retail-dashboard > .card:first-child {
  margin:0 !important;
  border-radius:10px !important;
  box-shadow:var(--shadow) !important;
}
#page-dashboard #dsh-analytics-root.retail-dashboard > .card:first-child .card-body {
  min-height:58px;
  padding:10px 14px;
}
#page-dashboard #dsh-analytics-root.retail-dashboard #dsh-kpi-grid {
  display:grid !important;
  grid-template-columns:repeat(6,minmax(0,1fr)) !important;
  gap:12px !important;
  margin:0 !important;
}
#page-dashboard #dsh-analytics-root.retail-dashboard #dsh-kpi-grid .stat-card {
  min-width:0 !important;
  min-height:108px !important;
  padding:15px 13px !important;
  gap:10px !important;
  border-radius:10px !important;
  border:1px solid var(--border) !important;
  background:var(--surface) !important;
  box-shadow:var(--shadow) !important;
  align-items:center !important;
}
#page-dashboard #dsh-analytics-root.retail-dashboard #dsh-kpi-grid .stat-icon {
  width:42px !important;
  height:42px !important;
  min-width:42px !important;
  flex:0 0 42px !important;
  font-size:1.1rem !important;
  border-radius:10px !important;
}
#page-dashboard #dsh-analytics-root.retail-dashboard #dsh-kpi-grid .stat-value {
  font-size:1.28rem !important;
  line-height:1.1 !important;
}
#page-dashboard #dsh-analytics-root.retail-dashboard #dsh-kpi-grid .stat-label {
  font-size:.76rem !important;
  font-weight:800 !important;
  line-height:1.35 !important;
}
#page-dashboard #dsh-analytics-root.retail-dashboard .balance-treasury-grid {
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:12px !important;
  margin:0 !important;
  align-items:stretch !important;
}
#page-dashboard #dsh-analytics-root.retail-dashboard .balance-treasury-grid > .card,
#page-dashboard #dsh-analytics-root.retail-dashboard .dsh-analytics-grid > .card,
#page-dashboard #dsh-analytics-root.retail-dashboard .dsh-lists-grid > .card {
  min-width:0 !important;
  margin:0 !important;
  border-radius:10px !important;
  border:1px solid var(--border) !important;
  box-shadow:var(--shadow) !important;
}
#page-dashboard #dsh-analytics-root.retail-dashboard .dsh-analytics-grid {
  display:grid !important;
  grid-template-columns:minmax(0,1.55fr) minmax(300px,.85fr) !important;
  gap:12px !important;
  margin:0 !important;
  align-items:stretch !important;
}
#page-dashboard #dsh-analytics-root.retail-dashboard .dsh-lists-grid {
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:12px !important;
  margin:0 !important;
  align-items:stretch !important;
}
#page-dashboard #dsh-analytics-root.retail-dashboard .card-header {
  min-height:48px;
  padding:10px 14px !important;
}
#page-dashboard #dsh-analytics-root.retail-dashboard .card-title {
  font-size:.88rem !important;
  font-weight:800 !important;
}
@media (max-width:1200px) {
  #page-dashboard #dsh-analytics-root.retail-dashboard #dsh-kpi-grid {
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
  #page-dashboard #dsh-analytics-root.retail-dashboard .dsh-lists-grid {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  #page-dashboard #dsh-analytics-root.retail-dashboard .dsh-lists-grid > .card:last-child {
    grid-column:1/-1;
  }
}
@media (max-width:768px) {
  #page-dashboard #dsh-analytics-root.retail-dashboard {gap:10px}
  #page-dashboard #dsh-analytics-root.retail-dashboard #dsh-kpi-grid {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
  }
  #page-dashboard #dsh-analytics-root.retail-dashboard #dsh-kpi-grid .stat-card {
    min-height:92px !important;
    padding:11px 9px !important;
  }
  #page-dashboard #dsh-analytics-root.retail-dashboard #dsh-kpi-grid .stat-icon {
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    flex-basis:34px !important;
    font-size:.95rem !important;
  }
  #page-dashboard #dsh-analytics-root.retail-dashboard #dsh-kpi-grid .stat-value {
    font-size:1.05rem !important;
  }
  #page-dashboard #dsh-analytics-root.retail-dashboard #dsh-kpi-grid .stat-label {
    font-size:.67rem !important;
  }
  #page-dashboard #dsh-analytics-root.retail-dashboard .balance-treasury-grid,
  #page-dashboard #dsh-analytics-root.retail-dashboard .dsh-analytics-grid,
  #page-dashboard #dsh-analytics-root.retail-dashboard .dsh-lists-grid {
    grid-template-columns:minmax(0,1fr) !important;
  }
  #page-dashboard #dsh-analytics-root.retail-dashboard .dsh-lists-grid > .card:last-child {
    grid-column:auto;
  }
}

/* 2026-08-27 — General Trade Dashboard Phase 2: business KPIs */
#page-dashboard #dsh-analytics-root.retail-dashboard #dsh-kpi-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
#page-dashboard #dsh-analytics-root.retail-dashboard #dsh-kpi-grid .stat-card {
  min-height: 104px !important;
}
@media (max-width: 1100px) {
  #page-dashboard #dsh-analytics-root.retail-dashboard #dsh-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 520px) {
  #page-dashboard #dsh-analytics-root.retail-dashboard #dsh-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* 2026-08-27 — General Trade Dashboard Phase 3: operational follow-up */
#page-dashboard #dsh-analytics-root.retail-dashboard .dsh-operations-grid {
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:12px !important;
  align-items:stretch !important;
}
#page-dashboard #dsh-analytics-root.retail-dashboard .dsh-operations-grid > .card {
  min-height:250px;
  height:100%;
}
#page-dashboard #dsh-analytics-root.retail-dashboard .dsh-operations-grid .card-body {
  padding:8px 14px 12px !important;
}
#page-dashboard #dsh-analytics-root.retail-dashboard .dsh-operations-grid .dsh-list-row {
  min-height:42px;
}
@media (max-width:768px) {
  #page-dashboard #dsh-analytics-root.retail-dashboard .dsh-operations-grid {
    grid-template-columns:minmax(0,1fr) !important;
    gap:10px !important;
  }
  #page-dashboard #dsh-analytics-root.retail-dashboard .dsh-operations-grid > .card {
    min-height:0;
  }
}

/* 2026-08-27 — General Trade Dashboard Phase 4: quick actions + management summary */
#page-dashboard #dsh-analytics-root.retail-dashboard .retail-dashboard-actions {
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:10px;
  margin:0;
}
#page-dashboard #dsh-analytics-root.retail-dashboard .retail-dashboard-action {
  appearance:none;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
  min-width:0;
  min-height:72px;
  border-radius:10px;
  padding:10px 11px;
  display:flex;
  align-items:center;
  gap:10px;
  text-align:right;
  cursor:pointer;
  box-shadow:var(--shadow);
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
  font-family:var(--font);
}
#page-dashboard #dsh-analytics-root.retail-dashboard .retail-dashboard-action:hover {
  transform:translateY(-2px);
  border-color:var(--primary);
  box-shadow:var(--shadow-md);
}
#page-dashboard #dsh-analytics-root.retail-dashboard .retail-dashboard-action-icon {
  width:36px;
  height:36px;
  min-width:36px;
  border-radius:9px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--primary-light);
  color:var(--primary);
  font-size:.95rem;
}
#page-dashboard #dsh-analytics-root.retail-dashboard .retail-dashboard-action strong,
#page-dashboard #dsh-analytics-root.retail-dashboard .retail-dashboard-action small {
  display:block;
  line-height:1.35;
}
#page-dashboard #dsh-analytics-root.retail-dashboard .retail-dashboard-action strong {
  font-size:.79rem;
  font-weight:800;
}
#page-dashboard #dsh-analytics-root.retail-dashboard .retail-dashboard-action small {
  color:var(--text-muted);
  font-size:.66rem;
  margin-top:3px;
}
#page-dashboard #dsh-analytics-root.retail-dashboard .retail-management-summary-card {
  margin:0 !important;
  border-radius:10px !important;
  border:1px solid var(--border) !important;
  box-shadow:var(--shadow) !important;
}
#page-dashboard #dsh-analytics-root.retail-dashboard .retail-management-summary-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}
#page-dashboard #dsh-analytics-root.retail-dashboard .retail-management-summary-item {
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:9px;
  padding:12px 13px;
  min-width:0;
}
#page-dashboard #dsh-analytics-root.retail-dashboard .retail-management-summary-item span,
#page-dashboard #dsh-analytics-root.retail-dashboard .retail-management-summary-item strong {
  display:block;
}
#page-dashboard #dsh-analytics-root.retail-dashboard .retail-management-summary-item span {
  color:var(--text-muted);
  font-size:.71rem;
  font-weight:700;
  margin-bottom:7px;
}
#page-dashboard #dsh-analytics-root.retail-dashboard .retail-management-summary-item strong {
  font-size:1rem;
  font-weight:900;
  color:var(--text);
  overflow:hidden;
  text-overflow:ellipsis;
}
@media (max-width:1100px) {
  #page-dashboard #dsh-analytics-root.retail-dashboard .retail-dashboard-actions {
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  #page-dashboard #dsh-analytics-root.retail-dashboard .retail-management-summary-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width:600px) {
  #page-dashboard #dsh-analytics-root.retail-dashboard .retail-dashboard-actions {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }
  #page-dashboard #dsh-analytics-root.retail-dashboard .retail-dashboard-action {
    min-height:64px;
    padding:8px 9px;
  }
  #page-dashboard #dsh-analytics-root.retail-dashboard .retail-management-summary-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }
  #page-dashboard #dsh-analytics-root.retail-dashboard .retail-management-summary-item {
    padding:10px;
  }
  #page-dashboard #dsh-analytics-root.retail-dashboard .retail-management-summary-item strong {
    font-size:.88rem;
  }
}

/* 2026-08-27 — General Trade Dashboard Phase 5: actionable KPI cards */
#page-dashboard #dsh-analytics-root.retail-dashboard .retail-kpi-action{
cursor:pointer;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}
#page-dashboard #dsh-analytics-root.retail-dashboard .retail-kpi-action:hover,
#page-dashboard #dsh-analytics-root.retail-dashboard .retail-kpi-action:focus-visible{
transform:translateY(-2px);border-color:var(--primary)!important;box-shadow:var(--shadow-md)!important;outline:none}

/* ============================================================
   2026-08-27 — General Trade Dashboard Phase 6
   Final visual harmonization with Coffee dashboard
   ============================================================ */

/* One rhythm for all dashboard sections */
#page-dashboard #dsh-analytics-root.retail-dashboard {
  gap: 12px !important;
}

/* Unified section cards */
#page-dashboard #dsh-analytics-root.retail-dashboard .balance-treasury-grid > .card,
#page-dashboard #dsh-analytics-root.retail-dashboard .dsh-analytics-grid > .card,
#page-dashboard #dsh-analytics-root.retail-dashboard .dsh-operations-grid > .card,
#page-dashboard #dsh-analytics-root.retail-dashboard .retail-management-summary-card,
#page-dashboard #dsh-analytics-root.retail-dashboard .dsh-alerts-card {
  border-radius: 10px !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-sm) !important;
  background: var(--surface) !important;
  overflow: hidden;
}

/* Same header language as Coffee dashboard */
#page-dashboard #dsh-analytics-root.retail-dashboard .card-header {
  min-height: 46px !important;
  padding: 10px 14px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
#page-dashboard #dsh-analytics-root.retail-dashboard .card-header .card-title {
  width: 100%;
  text-align: center;
  font-size: .88rem !important;
  font-weight: 800 !important;
  line-height: 1.3;
}

/* Keep headers with inline controls usable */
#page-dashboard #dsh-analytics-root.retail-dashboard .dsh-card-header-row {
  justify-content: space-between !important;
}
#page-dashboard #dsh-analytics-root.retail-dashboard .dsh-card-header-row .card-title {
  width: auto;
  text-align: right;
}

/* KPI cards: exact height rhythm */
#page-dashboard #dsh-analytics-root.retail-dashboard #dsh-kpi-grid {
  gap: 10px !important;
}
#page-dashboard #dsh-analytics-root.retail-dashboard #dsh-kpi-grid .stat-card {
  min-height: 102px !important;
  height: 100%;
  padding: 13px 12px !important;
  border-radius: 10px !important;
  box-shadow: var(--shadow-sm) !important;
}
#page-dashboard #dsh-analytics-root.retail-dashboard #dsh-kpi-grid .stat-info {
  min-width: 0;
}
#page-dashboard #dsh-analytics-root.retail-dashboard #dsh-kpi-grid .stat-value {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Quick actions: same size and visual weight */
#page-dashboard #dsh-analytics-root.retail-dashboard .retail-dashboard-actions {
  gap: 10px !important;
}
#page-dashboard #dsh-analytics-root.retail-dashboard .retail-dashboard-action {
  min-height: 70px !important;
  height: 100%;
  border-radius: 10px !important;
  box-shadow: var(--shadow-sm) !important;
}

/* Management summary items */
#page-dashboard #dsh-analytics-root.retail-dashboard .retail-management-summary-card .card-header {
  justify-content: flex-start;
}
#page-dashboard #dsh-analytics-root.retail-dashboard .retail-management-summary-card .card-header .card-title {
  text-align: right;
}
#page-dashboard #dsh-analytics-root.retail-dashboard .retail-management-summary-grid {
  gap: 10px !important;
}
#page-dashboard #dsh-analytics-root.retail-dashboard .retail-management-summary-item {
  min-height: 76px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Operational cards align in height */
#page-dashboard #dsh-analytics-root.retail-dashboard .dsh-operations-grid {
  align-items: stretch !important;
}
#page-dashboard #dsh-analytics-root.retail-dashboard .dsh-operations-grid > .card {
  min-height: 246px !important;
  height: 100%;
}
#page-dashboard #dsh-analytics-root.retail-dashboard .dsh-list-row {
  border-radius: 8px;
  padding-inline: 8px;
}
#page-dashboard #dsh-analytics-root.retail-dashboard .dsh-list-row:hover {
  background: var(--surface2);
}

/* Balance and treasury cards use equal height */
#page-dashboard #dsh-analytics-root.retail-dashboard .balance-treasury-grid {
  align-items: stretch !important;
}
#page-dashboard #dsh-analytics-root.retail-dashboard .balance-treasury-grid > .card {
  height: 100%;
}

/* Mobile finishing */
@media (max-width: 768px) {
  #page-dashboard #dsh-analytics-root.retail-dashboard {
    gap: 10px !important;
  }

  #page-dashboard #dsh-analytics-root.retail-dashboard #dsh-kpi-grid {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 8px !important;
  }

  #page-dashboard #dsh-analytics-root.retail-dashboard #dsh-kpi-grid .stat-card {
    min-height: 88px !important;
    padding: 10px 9px !important;
  }

  #page-dashboard #dsh-analytics-root.retail-dashboard .retail-dashboard-actions {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 8px !important;
  }

  #page-dashboard #dsh-analytics-root.retail-dashboard .retail-dashboard-action {
    min-height: 62px !important;
  }

  #page-dashboard #dsh-analytics-root.retail-dashboard .retail-management-summary-grid {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 8px !important;
  }

  #page-dashboard #dsh-analytics-root.retail-dashboard .retail-management-summary-item {
    min-height: 68px;
  }

  #page-dashboard #dsh-analytics-root.retail-dashboard .dsh-operations-grid > .card {
    min-height: 0 !important;
  }

  #page-dashboard #dsh-analytics-root.retail-dashboard .card-header {
    min-height: 44px !important;
    padding: 9px 11px !important;
  }
}

@media (max-width: 420px) {
  #page-dashboard #dsh-analytics-root.retail-dashboard #dsh-kpi-grid .stat-label {
    font-size: .64rem !important;
  }
  #page-dashboard #dsh-analytics-root.retail-dashboard #dsh-kpi-grid .stat-value {
    font-size: .98rem !important;
  }
  #page-dashboard #dsh-analytics-root.retail-dashboard .retail-dashboard-action strong {
    font-size: .74rem;
  }
  #page-dashboard #dsh-analytics-root.retail-dashboard .retail-dashboard-action small {
    font-size: .62rem;
  }
}

/* ============================================================
   2026-08-27 — General Trade Dashboard Phase 7
   Final hardening / canonical retail-only overrides
   ============================================================ */

/* No accidental bleed between the two dashboard layers */
#page-dashboard #dsh-analytics-root.retail-dashboard[style*="display: none"] {
  display: none !important;
}

/* Canonical box sizing and overflow for every retail dashboard child */
#page-dashboard #dsh-analytics-root.retail-dashboard,
#page-dashboard #dsh-analytics-root.retail-dashboard * {
  box-sizing: border-box;
}
#page-dashboard #dsh-analytics-root.retail-dashboard .card,
#page-dashboard #dsh-analytics-root.retail-dashboard .stat-card,
#page-dashboard #dsh-analytics-root.retail-dashboard .retail-dashboard-action {
  min-width: 0;
}

/* Prevent long Arabic labels/amounts from breaking grids */
#page-dashboard #dsh-analytics-root.retail-dashboard .stat-info,
#page-dashboard #dsh-analytics-root.retail-dashboard .dsh-list-row-main,
#page-dashboard #dsh-analytics-root.retail-dashboard .dsh-list-row-side,
#page-dashboard #dsh-analytics-root.retail-dashboard .retail-management-summary-item {
  min-width: 0;
}
#page-dashboard #dsh-analytics-root.retail-dashboard .dsh-list-row-main strong,
#page-dashboard #dsh-analytics-root.retail-dashboard .dsh-list-row-main span,
#page-dashboard #dsh-analytics-root.retail-dashboard .retail-management-summary-item strong {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Stable grids across zoom levels */
#page-dashboard #dsh-analytics-root.retail-dashboard #dsh-kpi-grid,
#page-dashboard #dsh-analytics-root.retail-dashboard .retail-dashboard-actions,
#page-dashboard #dsh-analytics-root.retail-dashboard .retail-management-summary-grid,
#page-dashboard #dsh-analytics-root.retail-dashboard .balance-treasury-grid,
#page-dashboard #dsh-analytics-root.retail-dashboard .dsh-analytics-grid,
#page-dashboard #dsh-analytics-root.retail-dashboard .dsh-operations-grid {
  width: 100%;
}

/* Final mobile safety */
@media (max-width: 700px) {
  #page-dashboard #dsh-analytics-root.retail-dashboard {
    width: 100%;
    overflow-x: hidden;
  }
  #page-dashboard #dsh-analytics-root.retail-dashboard .card,
  #page-dashboard #dsh-analytics-root.retail-dashboard .stat-card {
    max-width: 100%;
  }
  #page-dashboard #dsh-analytics-root.retail-dashboard .dsh-card-header-row {
    flex-wrap: wrap;
    gap: 8px;
  }
  #page-dashboard #dsh-analytics-root.retail-dashboard .dsh-period-toggle,
  #page-dashboard #dsh-analytics-root.retail-dashboard .dsh-trend-toggle {
    max-width: 100%;
    overflow-x: auto;
  }
}

/* Very small screens: one column only where two columns become cramped */
@media (max-width: 360px) {
  #page-dashboard #dsh-analytics-root.retail-dashboard #dsh-kpi-grid,
  #page-dashboard #dsh-analytics-root.retail-dashboard .retail-dashboard-actions,
  #page-dashboard #dsh-analytics-root.retail-dashboard .retail-management-summary-grid {
    grid-template-columns: minmax(0,1fr) !important;
  }
}

/* 2026-08-27 — sidebar main-menu heading aligned with Powered by */
.sidebar-nav > .sidebar-menu-head {
  min-height: 28px !important;
  height: 28px !important;
  padding: 0 16px !important;
  margin-bottom: 8px !important;
  font-size: .68rem !important;
  font-weight: 800 !important;
  line-height: 28px !important;
}
.sidebar-nav > .sidebar-menu-head > span {
  color: var(--primary) !important;
  opacity: 1 !important;
  line-height: 28px !important;
}
.sidebar.collapsed .sidebar-nav > .sidebar-menu-head {
  min-height: 28px !important;
  height: 28px !important;
  padding-inline: 6px !important;
}

/* 2026-08-27 — correction: match the whole main-menu heading box to Powered-by area */
.sidebar-nav > .sidebar-menu-head {
  height: auto !important;
  min-height: 48px !important;
  padding: 0 16px !important;
  display: flex !important;
  align-items: center !important;
  line-height: normal !important;
}
.sidebar-nav > .sidebar-menu-head > span {
  line-height: 1.25 !important;
  font-size: .68rem !important;
  color: var(--primary) !important;
}
.sidebar.collapsed .sidebar-nav > .sidebar-menu-head {
  height: auto !important;
  min-height: 48px !important;
}

/* 2026-08-27 — center main-menu heading text */
.sidebar-nav > .sidebar-menu-head {
  justify-content: center !important;
  text-align: center !important;
}
.sidebar-nav > .sidebar-menu-head > span {
  width: 100% !important;
  text-align: center !important;
}

/* 2026-08-27 — slightly larger main-menu heading text */
.sidebar-nav > .sidebar-menu-head > span {
  font-size: .76rem !important;
}

/* 2026-08-30 — distinguish the sticky main-menu heading with a clear blue accent */
.sidebar-nav > .sidebar-menu-head {
  background: var(--sidebar-bg) !important;
  background-color: var(--sidebar-bg) !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
.sidebar-nav > .sidebar-menu-head > span {
  color: var(--text) !important;
  font-size: .84rem !important;
  font-weight: 900 !important;
  letter-spacing: .02em !important;
}

/* 2026-08-27 — General Trade new dashboard cards: 2 per row on mobile */
@media (max-width: 768px) {
  #page-dashboard #dsh-analytics-root.retail-dashboard #dsh-kpi-grid,
  #page-dashboard #dsh-analytics-root.retail-dashboard .retail-dashboard-actions,
  #page-dashboard #dsh-analytics-root.retail-dashboard .retail-management-summary-grid,
  #page-dashboard #dsh-analytics-root.retail-dashboard .dsh-operations-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #page-dashboard #dsh-analytics-root.retail-dashboard .dsh-operations-grid > .card {
    min-width: 0 !important;
  }
}

/* Override the previous ultra-small one-column fallback as requested */
@media (max-width: 360px) {
  #page-dashboard #dsh-analytics-root.retail-dashboard #dsh-kpi-grid,
  #page-dashboard #dsh-analytics-root.retail-dashboard .retail-dashboard-actions,
  #page-dashboard #dsh-analytics-root.retail-dashboard .retail-management-summary-grid,
  #page-dashboard #dsh-analytics-root.retail-dashboard .dsh-operations-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* 2026-08-27 — restore operational follow-up cards to 1 per row on mobile */
@media (max-width: 768px) {
  #page-dashboard #dsh-analytics-root.retail-dashboard .dsh-operations-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}
@media (max-width: 360px) {
  #page-dashboard #dsh-analytics-root.retail-dashboard .dsh-operations-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* 2026-08-30 — Financial workspace visual system.
   يوحّد المكونات الإدارية من غير المساس بمقاسات نقطة البيع أو شاشة النادل. */
html :is(
  #page-treasury,
  #page-branchTreasury,
  #page-receipts,
  #page-payments,
  #page-expenses,
  #page-revenues,
  #page-profits,
  #page-trialBalance,
  #page-balanceSheet,
  #page-privateAccounts,
  #page-journalEntries,
  #page-chartOfAccounts,
  #page-generalLedger,
  #page-subsidiaryLedger
) :is(.card,.stat-card,.je-stat-card,.je-entry-card) {
  border-color: var(--border) !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow) !important;
}

html :is(
  #page-treasury,
  #page-branchTreasury,
  #page-receipts,
  #page-payments,
  #page-expenses,
  #page-revenues,
  #page-profits,
  #page-trialBalance,
  #page-balanceSheet,
  #page-privateAccounts,
  #page-journalEntries,
  #page-chartOfAccounts,
  #page-generalLedger,
  #page-subsidiaryLedger
) .card-header {
  min-height: 52px;
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 12px 12px 0 0 !important;
  background: var(--mode-panel-alt) !important;
}

html :is(
  #page-treasury,
  #page-branchTreasury,
  #page-receipts,
  #page-payments,
  #page-expenses,
  #page-revenues,
  #page-profits,
  #page-trialBalance,
  #page-balanceSheet,
  #page-privateAccounts,
  #page-journalEntries,
  #page-chartOfAccounts,
  #page-generalLedger,
  #page-subsidiaryLedger
) .date-filter-bar {
  gap: 10px !important;
  padding: 10px 12px !important;
  border-color: var(--border) !important;
  border-radius: 10px !important;
  background: var(--mode-panel-alt) !important;
}

html :is(
  #page-treasury,
  #page-branchTreasury,
  #page-receipts,
  #page-payments,
  #page-expenses,
  #page-revenues,
  #page-profits,
  #page-trialBalance,
  #page-balanceSheet,
  #page-privateAccounts,
  #page-journalEntries,
  #page-chartOfAccounts,
  #page-generalLedger,
  #page-subsidiaryLedger
) .date-filter-bar :is(input[type="text"],input[type="search"],input[type="date"],select,.search-bar.search-bar-inline,.btn,.btn-filter-reset),
html :is(#page-journalEntries,#page-subsidiaryLedger) .page-header-left :is(input[type="text"],input[type="date"],select,.btn) {
  height: 40px !important;
  min-height: 40px !important;
  box-sizing: border-box !important;
}

html :is(
  #page-treasury,
  #page-branchTreasury,
  #page-receipts,
  #page-payments,
  #page-expenses,
  #page-revenues,
  #page-profits,
  #page-trialBalance,
  #page-balanceSheet,
  #page-privateAccounts,
  #page-journalEntries,
  #page-chartOfAccounts,
  #page-generalLedger,
  #page-subsidiaryLedger
) .table-wrap {
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  overflow: auto;
}

html :is(
  #page-treasury,
  #page-branchTreasury,
  #page-receipts,
  #page-payments,
  #page-expenses,
  #page-revenues,
  #page-profits,
  #page-trialBalance,
  #page-privateAccounts,
  #page-journalEntries,
  #page-chartOfAccounts,
  #page-generalLedger,
  #page-subsidiaryLedger
) .table-wrap table thead th {
  background: var(--surface3) !important;
  color: var(--text) !important;
  border-bottom: 1px solid var(--border-strong) !important;
  font-weight: 800 !important;
}

html :is(
  #page-treasury,
  #page-branchTreasury,
  #page-receipts,
  #page-payments,
  #page-expenses,
  #page-revenues,
  #page-profits,
  #page-trialBalance,
  #page-privateAccounts,
  #page-journalEntries,
  #page-chartOfAccounts,
  #page-generalLedger,
  #page-subsidiaryLedger
) .table-wrap table tbody tr:hover > td {
  background: color-mix(in srgb, var(--surface) 93%, var(--primary-light)) !important;
}

@media (max-width: 700px) {
  html :is(
    #page-treasury,
    #page-branchTreasury,
    #page-receipts,
    #page-payments,
    #page-expenses,
    #page-revenues,
    #page-profits,
    #page-trialBalance,
    #page-balanceSheet,
    #page-privateAccounts,
    #page-journalEntries,
    #page-chartOfAccounts,
    #page-generalLedger,
    #page-subsidiaryLedger
  ) .date-filter-bar :is(input[type="text"],input[type="search"],input[type="date"],select,.search-bar.search-bar-inline,.btn,.btn-filter-reset),
  html :is(#page-journalEntries,#page-subsidiaryLedger) .page-header-left :is(input[type="text"],input[type="date"],select,.btn) {
    width: 100% !important;
    max-width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
  }
}


/* 2026-08-27 — POS product card canonical layout: large image + name/price row */
#page-pos #pos-products-grid:not(.pos-products-empty) > .pos-product-card {
  padding: 0 !important;
  gap: 0 !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  background: var(--surface) !important;
}

#page-pos .pos-product-card > .pos-product-image {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 150px !important;
  aspect-ratio: 4 / 3 !important;
  flex: 1 1 auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--surface2) !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#page-pos .pos-product-card > .pos-product-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

#page-pos .pos-product-card > .pos-product-info {
  flex: 0 0 auto !important;
  min-height: 48px !important;
  padding: 9px 11px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  background: var(--surface) !important;
}

#page-pos .pos-product-card > .pos-product-info > .pos-product-name {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#page-pos .pos-product-card > .pos-product-info > .pos-product-price {
  flex: 0 0 auto !important;
  width: auto !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

@media (max-width: 700px) {
  #page-pos .pos-product-card > .pos-product-image {
    min-height: 118px !important;
    aspect-ratio: 4 / 3 !important;
  }
  #page-pos .pos-product-card > .pos-product-info {
    min-height: 44px !important;
    padding: 8px 9px !important;
    gap: 7px !important;
  }
}

/* 2026-08-27 — desktop POS product cards: reserve visible name/price strip */
@media (min-width: 901px) {
  #page-pos #pos-products-grid:not(.pos-products-empty) > .pos-product-card {
    display: grid !important;
    grid-template-rows: minmax(150px, 1fr) 52px !important;
    height: 220px !important;
    min-height: 220px !important;
    max-height: 220px !important;
    padding: 0 !important;
    gap: 0 !important;
    overflow: hidden !important;
  }

  #page-pos .pos-product-card > .pos-product-image {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 168px !important;
    min-height: 168px !important;
    max-height: 168px !important;
    aspect-ratio: auto !important;
    flex: none !important;
    grid-row: 1 !important;
    overflow: hidden !important;
  }

  #page-pos .pos-product-card > .pos-product-info {
    display: flex !important;
    grid-row: 2 !important;
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    padding: 9px 11px !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    background: var(--surface) !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: hidden !important;
    z-index: 5 !important;
  }

  #page-pos .pos-product-card > .pos-product-info > .pos-product-name,
  #page-pos .pos-product-card > .pos-product-info > .pos-product-price {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
  }

  #page-pos .pos-product-card > .pos-product-info > .pos-product-name {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: var(--text) !important;
  }

  #page-pos .pos-product-card > .pos-product-info > .pos-product-price {
    flex: 0 0 auto !important;
    margin: 0 !important;
    color: var(--primary) !important;
    white-space: nowrap !important;
  }
}


/* 2026-08-27 — real full-size POS no-image thumbnail */
#page-pos .pos-product-card > .pos-product-image > .pos-product-placeholder {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--surface2) !important;
  overflow: hidden !important;
}

#page-pos .pos-product-card > .pos-product-image > .pos-product-placeholder > i {
  display: block !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 2.7rem !important;
  line-height: 1 !important;
  color: var(--text-muted) !important;
  opacity: .42 !important;
}

@media (max-width: 700px) {
  #page-pos .pos-product-card > .pos-product-image > .pos-product-placeholder > i {
    font-size: 2.2rem !important;
  }
}

/* 2026-08-27 — scale the no-image graphic with the wider desktop thumbnail */
@media (min-width: 901px) {
  #page-pos .pos-product-card > .pos-product-image > .pos-product-placeholder > i {
    font-size: clamp(4.5rem, 7vw, 7rem) !important;
    line-height: 1 !important;
    opacity: .32 !important;
  }
}



/* 2026-08-27 — desktop POS card: one explicit full-width grid column */
@media (min-width: 901px) {
  #page-pos #pos-products-grid:not(.pos-products-empty) > .pos-product-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 168px 52px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    justify-self: stretch !important;
    overflow: hidden !important;
  }

  #page-pos .pos-product-card > .pos-product-image {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 168px !important;
    box-sizing: border-box !important;
  }

  #page-pos .pos-product-card > .pos-product-info {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 52px !important;
    box-sizing: border-box !important;
  }

  #page-pos .pos-product-card > .pos-product-info > .pos-product-name {
    min-width: 0 !important;
    flex: 1 1 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

/* 2026-08-27 — unified financial summary below sales/purchase item tables */
.invoice-financial-summary{
  margin-top:16px;
  display:grid;
  grid-template-columns:minmax(260px,.8fr) minmax(420px,1.2fr);
  gap:18px;
  align-items:start;
}
.invoice-summary-values,
.invoice-summary-payment{
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface2);
  padding:12px 14px;
  min-width:0;
}
.invoice-summary-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  padding:8px 0;
  border-bottom:1px solid var(--border);
  font-size:.88rem;
}
.invoice-summary-row:last-child{border-bottom:0}
.invoice-summary-row>span:first-child{color:var(--text-muted)}
.invoice-summary-row strong{color:var(--text);white-space:nowrap}
.invoice-summary-grand{
  padding-top:11px;
  font-size:1rem;
  font-weight:800;
}
.invoice-summary-grand>span:first-child,
.invoice-summary-grand strong{
  color:var(--primary);
}
.invoice-summary-payment{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.invoice-summary-payment .field{margin:0;min-width:0}
.invoice-summary-loyalty{
  flex-wrap:wrap;
}
.invoice-summary-loyalty-actions{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}
.invoice-summary-loyalty-actions input{
  width:84px;
  padding:5px 8px;
  font-size:.85rem;
}
@media (max-width:900px){
  .invoice-financial-summary{
    grid-template-columns:1fr;
    gap:12px;
  }
}
@media (max-width:640px){
  .invoice-summary-payment{
    grid-template-columns:1fr;
  }
}


/* 2026-08-27 — payment/expense modal: improve X glyph contrast only */
html #modal-payment .modal-header .modal-close > i,
html #modal-expense .modal-header .modal-close > i {
  color: #334155 !important;
  opacity: 1 !important;
}
html #modal-payment .modal-header .modal-close:hover > i,
html #modal-expense .modal-header .modal-close:hover > i {
  color: var(--danger) !important;
}


/* 2026-08-27 — POS products card: same soft-blue as empty cart, only when no product cards exist */
#page-pos .card:has(#pos-products-grid):not(:has(#pos-products-grid .pos-product-card)),
#page-pos .pos-products-panel:has(#pos-products-grid):not(:has(#pos-products-grid .pos-product-card)),
#page-pos .pos-products-card:has(#pos-products-grid):not(:has(#pos-products-grid .pos-product-card)),
#page-pos .products-panel:has(#pos-products-grid):not(:has(#pos-products-grid .pos-product-card)),
#page-pos #pos-products-grid:not(:has(.pos-product-card)) {
  background-color: #F5F7FA !important;
}

/* Once products are rendered, the products card returns to its normal working surface. */
#page-pos .card:has(#pos-products-grid .pos-product-card),
#page-pos .pos-products-panel:has(#pos-products-grid .pos-product-card),
#page-pos .pos-products-card:has(#pos-products-grid .pos-product-card),
#page-pos .products-panel:has(#pos-products-grid .pos-product-card) {
  background-color: var(--surface) !important;
}


/* 2026-08-27 — POS empty products: use existing icons/empty_categories.webp */
#page-pos #pos-products-grid .empty-state > i,
#page-pos #pos-products-grid .a3-empty-emoji {
  display: none !important;
}

#page-pos #pos-products-grid .empty-state::before,
#page-pos #pos-products-grid .a3-inline-empty::before {
  content: "" !important;
  display: block !important;
  width: 112px !important;
  height: 112px !important;
  margin: 0 auto 14px !important;
  background: url("../../icons/empty_categories.webp") center / contain no-repeat !important;
}


/* 2026-08-28 — Unified empty-state artwork
   Use one consistent project illustration instead of unrelated emoji/font icons.
   Scope is limited to true "no data / no results" states; loading/error states
   are intentionally untouched. */
.empty-state:not(.pos-empty-cart-state) > i,
.empty-state:not(.pos-empty-cart-state) > .a3-empty-emoji,
.je-empty .a3-empty-emoji,
.pk-empty .a3-empty-emoji,
.dsh-empty .a3-empty-emoji,
.a3-inline-empty .a3-empty-emoji,
.coffee-empty-state .coffee-empty-icon,
.waiter-empty > i {
  display: none !important;
}

.empty-state:not(.pos-empty-cart-state)::before,
.je-empty.a3-unified-empty::before,
.pk-empty.a3-unified-empty::before,
.dsh-empty.a3-unified-empty::before,
.a3-inline-empty::before,
.coffee-empty-state::before,
.waiter-empty::before {
  content: "" !important;
  display: block !important;
  flex: 0 0 auto !important;
  width: 92px !important;
  height: 92px !important;
  margin: 0 auto 10px !important;
  background: url("../../icons/empty_categories.webp") center / contain no-repeat !important;
  opacity: .96;
}

/* POS keeps its slightly larger artwork. */
#page-pos #pos-products-grid .empty-state::before,
#page-pos #pos-products-grid .a3-inline-empty::before {
  width: 112px !important;
  height: 112px !important;
  margin-bottom: 14px !important;
}

/* Compact table-cell empties should not become excessively tall. */
td .a3-inline-empty::before,
th .a3-inline-empty::before {
  width: 72px !important;
  height: 72px !important;
  margin-bottom: 8px !important;
}

@media (max-width: 700px) {
  .empty-state::before,
  .je-empty.a3-unified-empty::before,
  .pk-empty.a3-unified-empty::before,
  .dsh-empty.a3-unified-empty::before,
  .a3-inline-empty::before,
  .coffee-empty-state::before,
  .waiter-empty::before {
    width: 82px !important;
    height: 82px !important;
  }

  #page-pos #pos-products-grid .empty-state::before,
  #page-pos #pos-products-grid .a3-inline-empty::before {
    width: 104px !important;
    height: 104px !important;
  }

  td .a3-inline-empty::before,
  th .a3-inline-empty::before {
    width: 66px !important;
    height: 66px !important;
  }
}


/* 2026-08-28 — Dedicated POS cart empty state must keep its cart artwork. */
#page-pos #pos-cart .pos-empty-cart-state::before,
#page-pos #pos-mobile-cart-list .pos-empty-cart-state::before,
#pos-cart .pos-empty-cart-state::before,
#pos-mobile-cart-list .pos-empty-cart-state::before {
  content: none !important;
  display: none !important;
  background: none !important;
}

#page-pos #pos-cart .pos-empty-cart-image,
#page-pos #pos-mobile-cart-list .pos-empty-cart-image,
#pos-cart .pos-empty-cart-image,
#pos-mobile-cart-list .pos-empty-cart-image {
  display: block !important;
  width: min(150px, 42%) !important;
  height: auto !important;
  object-fit: contain !important;
  margin: 0 auto 12px !important;
}


/* 2026-08-28 — Exact empty states: General Ledger, Subsidiary Ledger, Activity Log.
   Explicit <img> is used here so these pages do not depend on generic pseudo-element rules. */
.ledger-empty-cell {
  text-align: center !important;
  padding: 28px 16px !important;
  color: var(--text-muted) !important;
}
.ledger-empty-state,
#activity-empty.activity-empty-state {
  min-height: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  color: var(--text-muted);
  box-sizing: border-box;
}
.ledger-empty-state img,
#activity-empty.activity-empty-state img {
  display: block !important;
  width: 92px !important;
  height: 92px !important;
  object-fit: contain !important;
  margin: 0 auto !important;
}
.ledger-empty-state span,
#activity-empty.activity-empty-state span {
  font-size: .9rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.5;
}
#activity-empty.activity-empty-state {
  padding: 28px 16px !important;
}
@media (max-width:700px) {
  .ledger-empty-state,
  #activity-empty.activity-empty-state { min-height: 138px; }
  .ledger-empty-state img,
  #activity-empty.activity-empty-state img {
    width: 82px !important;
    height: 82px !important;
  }
}


/* 2026-08-28 — Account > Subscription statistics: 4 per row desktop, 2 per row mobile. */
#account-subscription-card .subscription-details,
#account-subscription-card .subscription-usage-grid {
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:10px !important;
}
@media (max-width:700px) {
  #account-subscription-card .subscription-details,
  #account-subscription-card .subscription-usage-grid {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

/* 2026-08-28 — Subscription stats are one unified 8-card grid. */
#account-subscription-card .subscription-details {
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:10px !important;
}
@media (max-width:700px) {
  #account-subscription-card .subscription-details {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}


/* 2026-08-28 — Dashboard empty states: center artwork + text vertically and horizontally
   only while the dashboard section is empty. */
#page-dashboard .dsh-empty.a3-unified-empty {
  width: 100% !important;
  height: 100% !important;
  min-height: inherit !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  margin: 0 !important;
  padding: 18px !important;
}

#page-dashboard .dsh-empty.a3-unified-empty::before {
  margin: 0 0 10px !important;
}

/* Ensure the known dashboard content containers give the empty state
   a real vertical area to center within, without changing populated layouts. */
#page-dashboard #dsh-trend-chart:has(> .dsh-empty.a3-unified-empty),
#page-dashboard #dsh-top-products:has(> .dsh-empty.a3-unified-empty),
#page-dashboard #dsh-collection-rate:has(> .dsh-empty.a3-unified-empty),
#page-dashboard #dsh-recent-invoices:has(> .dsh-empty.a3-unified-empty),
#page-dashboard #dsh-recent-purchases:has(> .dsh-empty.a3-unified-empty),
#page-dashboard #dsh-treasury-moves:has(> .dsh-empty.a3-unified-empty),
#page-dashboard #dsh-top-debtors:has(> .dsh-empty.a3-unified-empty) {
  display: flex !important;
  align-items: stretch !important;
  min-height: 180px !important;
}

#page-dashboard #dsh-trend-chart > .dsh-empty.a3-unified-empty,
#page-dashboard #dsh-top-products > .dsh-empty.a3-unified-empty,
#page-dashboard #dsh-collection-rate > .dsh-empty.a3-unified-empty,
#page-dashboard #dsh-recent-invoices > .dsh-empty.a3-unified-empty,
#page-dashboard #dsh-recent-purchases > .dsh-empty.a3-unified-empty,
#page-dashboard #dsh-treasury-moves > .dsh-empty.a3-unified-empty,
#page-dashboard #dsh-top-debtors > .dsh-empty.a3-unified-empty {
  flex: 1 1 auto !important;
}

/* 2026-08-28 — Sales trend empty state desktop vertical alignment.
   The trend card has a header/toggle, so center within its card-body explicitly. */
@media (min-width:701px) {
  #page-dashboard .dsh-analytics-grid > .card:first-child > .card-body:has(#dsh-trend-chart > .dsh-empty.a3-unified-empty) {
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
  }
  #page-dashboard .dsh-analytics-grid > .card:first-child > .card-body:has(#dsh-trend-chart > .dsh-empty.a3-unified-empty) #dsh-trend-chart {
    flex:1 1 auto !important;
    min-height:0 !important;
    display:flex !important;
    align-items:stretch !important;
  }
  #page-dashboard #dsh-trend-chart > .dsh-empty.a3-unified-empty {
    flex:1 1 auto !important;
    min-height:0 !important;
    justify-content:center !important;
  }
}

/* 2026-08-28 — Barcode labels: make print-mode selection clearly visible.
   Global radio styling uses appearance:none, so accent-color alone has no effect. */
#modal-barcode-labels input[type="radio"][name="bl-mode"] {
  appearance:none !important;
  -webkit-appearance:none !important;
  width:18px !important;
  height:18px !important;
  min-width:18px !important;
  border:2px solid var(--border) !important;
  border-radius:6px !important;
  background:var(--surface) !important;
  position:relative !important;
  margin:0 !important;
}
#modal-barcode-labels input[type="radio"][name="bl-mode"]:checked {
  border-color:var(--primary) !important;
  background:var(--primary) !important;
}
#modal-barcode-labels input[type="radio"][name="bl-mode"]:checked::after {
  content:'\2713' !important;
  width:auto !important;
  height:auto !important;
  background:transparent !important;
  border-radius:0 !important;
  position:absolute !important;
  inset:0 !important;
  transform:none !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-family:Arial,"Noto Sans",sans-serif !important;
  font-size:13px !important;
  line-height:1 !important;
  font-weight:900 !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  text-shadow:none !important;
}

/* 2026-08-28 — Barcode labels: visible-fields checkboxes match product-selection white tick. */
#modal-barcode-labels #bl-show-business:checked::after,
#modal-barcode-labels #bl-show-name:checked::after,
#modal-barcode-labels #bl-show-barcode:checked::after,
#modal-barcode-labels #bl-show-barcode-number:checked::after,
#modal-barcode-labels #bl-show-price:checked::after {
  content:'\2713' !important;
  font-family:Arial,"Noto Sans",sans-serif !important;
  font-size:13px !important;
  line-height:1 !important;
  font-weight:900 !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  text-shadow:none !important;
  inset:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

/* 2026-08-28 — Barcode labels: visible-fields selected boxes match the app's blue selected controls. */
#modal-barcode-labels #bl-show-business:checked,
#modal-barcode-labels #bl-show-name:checked,
#modal-barcode-labels #bl-show-barcode:checked,
#modal-barcode-labels #bl-show-barcode-number:checked,
#modal-barcode-labels #bl-show-price:checked {
  background:var(--primary) !important;
  background-color:var(--primary) !important;
  border-color:var(--primary) !important;
}


/* 2026-08-28 — Production order: searchable custom product dropdown. */
#modal-production-order .production-product-combobox{position:relative}
#modal-production-order #po-product-search{width:100%;padding-inline-end:40px}
#modal-production-order .production-product-combobox-arrow{position:absolute;inset-inline-end:14px;top:50%;transform:translateY(-50%);color:var(--text-muted);pointer-events:none;transition:transform .18s ease}
#modal-production-order .production-product-combobox.is-open .production-product-combobox-arrow{transform:translateY(-50%) rotate(180deg)}
#modal-production-order .production-product-dropdown{display:none;position:absolute;z-index:10020;top:calc(100% + 5px);right:0;left:0;max-height:260px;overflow:auto;padding:6px;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:0 14px 35px rgba(15,23,42,.18);scrollbar-width:none}
#modal-production-order .production-product-dropdown::-webkit-scrollbar{display:none}
#modal-production-order .production-product-combobox.is-open .production-product-dropdown{display:block}
#modal-production-order .production-product-option{display:flex;width:100%;align-items:flex-start;justify-content:space-between;gap:10px;padding:10px 11px;border:0;border-radius:8px;background:transparent;color:var(--text);font:inherit;text-align:right;cursor:pointer}
#modal-production-order .production-product-option:hover,
#modal-production-order .production-product-option.is-active{background:color-mix(in srgb,var(--primary) 11%,transparent);color:var(--primary)}
#modal-production-order .production-product-option-main{font-weight:700}
#modal-production-order .production-product-option-meta{font-size:.73rem;color:var(--text-muted);white-space:nowrap}
#modal-production-order .production-product-empty{padding:18px 12px;text-align:center;color:var(--text-muted);font-size:.84rem}
@media(max-width:600px){#modal-production-order .production-product-dropdown{max-height:220px}#modal-production-order .production-product-option{padding:12px 10px}}

/* 2026-08-30 — Commerce and inventory workspace visual system. */
html :is(
  #page-invoices,
  #page-salesReturns,
  #page-quotations,
  #page-delivery,
  #page-customers,
  #page-suppliers,
  #page-purchases,
  #page-purchaseOrders,
  #page-purchaseReturns,
  #page-products,
  #page-branchWarehouse,
  #page-categories,
  #page-units,
  #page-stockRequests,
  #page-incomingRequests,
  #page-production,
  #page-expiryAlerts
) :is(.card,.stat-card) {
  border-color: var(--border) !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow) !important;
}

html :is(
  #page-invoices,
  #page-salesReturns,
  #page-quotations,
  #page-delivery,
  #page-customers,
  #page-suppliers,
  #page-purchases,
  #page-purchaseOrders,
  #page-purchaseReturns,
  #page-products,
  #page-branchWarehouse,
  #page-categories,
  #page-units,
  #page-stockRequests,
  #page-incomingRequests,
  #page-production,
  #page-expiryAlerts
) .card-header {
  min-height: 52px;
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 12px 12px 0 0 !important;
  background: var(--mode-panel-alt) !important;
}

html :is(
  #page-invoices,
  #page-salesReturns,
  #page-quotations,
  #page-delivery,
  #page-customers,
  #page-suppliers,
  #page-purchases,
  #page-purchaseOrders,
  #page-purchaseReturns,
  #page-products,
  #page-branchWarehouse,
  #page-categories,
  #page-units,
  #page-stockRequests,
  #page-incomingRequests,
  #page-production,
  #page-expiryAlerts
) .date-filter-bar {
  gap: 10px !important;
  padding: 10px 12px !important;
  border-color: var(--border) !important;
  border-radius: 10px !important;
  background: var(--mode-panel-alt) !important;
}

html :is(
  #page-invoices,
  #page-salesReturns,
  #page-quotations,
  #page-delivery,
  #page-customers,
  #page-suppliers,
  #page-purchases,
  #page-purchaseOrders,
  #page-purchaseReturns,
  #page-products,
  #page-branchWarehouse,
  #page-categories,
  #page-units,
  #page-stockRequests,
  #page-incomingRequests,
  #page-production,
  #page-expiryAlerts
) .date-filter-bar :is(input[type="text"],input[type="search"],input[type="date"],select,.search-bar.search-bar-inline,.btn,.btn-filter-reset),
html :is(
  #page-invoices,
  #page-salesReturns,
  #page-quotations,
  #page-delivery,
  #page-customers,
  #page-suppliers,
  #page-purchases,
  #page-purchaseOrders,
  #page-purchaseReturns,
  #page-products,
  #page-branchWarehouse,
  #page-categories,
  #page-units,
  #page-stockRequests,
  #page-incomingRequests,
  #page-production,
  #page-expiryAlerts
) .page-header-left :is(input[type="text"],input[type="search"],input[type="date"],select,.search-bar,.btn) {
  height: 40px !important;
  min-height: 40px !important;
  box-sizing: border-box !important;
}

html :is(
  #page-invoices,
  #page-salesReturns,
  #page-quotations,
  #page-delivery,
  #page-customers,
  #page-suppliers,
  #page-purchases,
  #page-purchaseOrders,
  #page-purchaseReturns,
  #page-products,
  #page-branchWarehouse,
  #page-categories,
  #page-units,
  #page-stockRequests,
  #page-incomingRequests,
  #page-production,
  #page-expiryAlerts
) .table-wrap {
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  overflow: auto;
}

html :is(
  #page-invoices,
  #page-salesReturns,
  #page-quotations,
  #page-delivery,
  #page-customers,
  #page-suppliers,
  #page-purchases,
  #page-purchaseOrders,
  #page-purchaseReturns,
  #page-products,
  #page-branchWarehouse,
  #page-categories,
  #page-units,
  #page-stockRequests,
  #page-incomingRequests,
  #page-production,
  #page-expiryAlerts
) .table-wrap table thead th {
  background: var(--surface3) !important;
  color: var(--text) !important;
  border-bottom: 1px solid var(--border-strong) !important;
  font-weight: 800 !important;
}

html :is(
  #page-invoices,
  #page-salesReturns,
  #page-quotations,
  #page-delivery,
  #page-customers,
  #page-suppliers,
  #page-purchases,
  #page-purchaseOrders,
  #page-purchaseReturns,
  #page-products,
  #page-branchWarehouse,
  #page-categories,
  #page-units,
  #page-stockRequests,
  #page-incomingRequests,
  #page-production,
  #page-expiryAlerts
) .table-wrap table tbody tr:hover > td {
  background: color-mix(in srgb, var(--surface) 93%, var(--primary-light)) !important;
}

@media (max-width: 700px) {
  html :is(
    #page-invoices,
    #page-salesReturns,
    #page-quotations,
    #page-delivery,
    #page-customers,
    #page-suppliers,
    #page-purchases,
    #page-purchaseOrders,
    #page-purchaseReturns,
    #page-products,
    #page-branchWarehouse,
    #page-categories,
    #page-units,
    #page-stockRequests,
    #page-incomingRequests,
    #page-production,
    #page-expiryAlerts
  ) .date-filter-bar :is(input[type="text"],input[type="search"],input[type="date"],select,.search-bar.search-bar-inline,.btn,.btn-filter-reset),
  html :is(
    #page-invoices,
    #page-salesReturns,
    #page-quotations,
    #page-delivery,
    #page-customers,
    #page-suppliers,
    #page-purchases,
    #page-purchaseOrders,
    #page-purchaseReturns,
    #page-products,
    #page-branchWarehouse,
    #page-categories,
    #page-units,
    #page-stockRequests,
    #page-incomingRequests,
    #page-production,
    #page-expiryAlerts
  ) .page-header-left :is(input[type="text"],input[type="search"],input[type="date"],select,.search-bar,.btn) {
    width: 100% !important;
    max-width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
  }
}

/* 2026-08-31 — Final unified dark-green table headers.
   #app + .content intentionally outrank legacy page-ID table-header rules without touching print styles. */
html #app .content :is(table,.table-wrap table,.stmt-table,.profit-summary-tbl,.bs-table,.inv-items-table,.return-items-table,.rep-table,.stats-table) thead :is(tr,th) {
  background:#145C52!important;
  background-color:#145C52!important;
  background-image:none!important;
}
html #app .content :is(table,.table-wrap table,.stmt-table,.profit-summary-tbl,.bs-table,.inv-items-table,.return-items-table,.rep-table,.stats-table) thead th {
  color:#FFFFFF!important;
  border-bottom-color:#0F4A43!important;
  font-weight:800!important;
}
html #app .content :is(table,.table-wrap table,.stmt-table,.profit-summary-tbl,.bs-table,.inv-items-table,.return-items-table,.rep-table,.stats-table) thead th :not(i) {
  color:inherit!important;
}

/* 2026-09-01 — Main inventory: restore barcode search/camera proportions on mobile. */
@media (max-width: 768px) {
  #page-products .doc-barcode-row {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 !important;
  }

  #page-products .doc-barcode-row .search-bar.search-bar-inline {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
  }

  #page-products .doc-barcode-row .search-bar.search-bar-inline input {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  #page-products .doc-barcode-row .mobile-camera-btn {
    flex: 0 0 38px !important;
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* ============================================================
   2026-09-13 — Desktop Header Navbar / Single Header Row
   Desktop فقط: الـSidebar يظل مصدر الصلاحيات والتنقل في DOM،
   والـNavbar يظهر داخل نفس صف هيدر التطبيق — بدون طبقة ثانية.
   Mobile <=900px يظل على الـSidebar الأصلي دون تغيير.
   ============================================================ */
#desktop-main-nav {
  display: none;
}

@media (min-width: 901px) {
  html #app .sidebar {
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateX(110%) !important;
    box-shadow: none !important;
    border: 0 !important;
  }

  html #app .main,
  html #app .main.sidebar-collapsed {
    margin-right: 0 !important;
  }

  html #app .topbar {
    right: 0 !important;
    left: 0 !important;
    width: auto !important;
    height: 64px !important;
    min-height: 64px !important;
    padding: 0 14px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    overflow: visible !important;
    background: var(--mode-topbar-bg) !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.14) !important;
    box-shadow: 0 2px 10px rgba(20,92,82,.18) !important;
    z-index: 500 !important;
  }

  html #app .topbar > :first-child {
    order: 3;
    flex: 0 0 auto;
    min-width: 0;
    padding: 0 !important;
  }

  html #app .topbar > .topbar-actions {
    order: 2;
    flex: 0 0 auto;
    padding: 0 !important;
    margin: 0 !important;
  }

  html #app .topbar .menu-toggle,
  html #app #menu-toggle-btn,
  html #app .topbar-title,
  html #app #page-title {
    display: none !important;
  }

  #desktop-main-nav {
    order: 1;
    direction: rtl;
    position: relative;
    z-index: 520;
    flex: 1 1 auto;
    min-width: 0;
    height: 64px;
    padding: 0;
    display: flex;
    align-items: stretch;
    gap: 0;
    background: transparent;
    color: #fff;
    box-sizing: border-box;
    overflow: visible;
  }

  #desktop-main-nav.desktop-nav-source-hidden {
    display: none !important;
  }

  .desktop-nav-brand {
    flex: 0 0 auto;
    min-width: 0;
    max-width: 190px;
    height: 64px;
    padding: 0 0 0 10px;
    margin-left: 8px;
    border: 0;
    border-left: 1px solid rgba(255,255,255,.16);
    background: transparent;
    color: #fff;
    font-family: var(--font);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
  }

  .desktop-nav-brand-logo {
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: rgba(255,255,255,.11);
    color: #fff;
  }

  .desktop-nav-brand-logo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
  }

  .desktop-nav-brand-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .8rem;
    font-weight: 800;
    color: #fff;
  }

  .desktop-nav-groups {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 1px;
    overflow: visible;
  }

  .desktop-nav-group {
    position: relative;
    flex: 0 1 auto;
    min-width: 0;
    display: flex;
    align-items: stretch;
  }

  .desktop-nav-trigger,
  .desktop-nav-direct {
    appearance: none;
    min-width: 0;
    min-height: 64px;
    padding: 0 8px;
    border: 0;
    background: transparent;
    color: rgba(255,255,255,.94);
    font-family: var(--font);
    font-size: .76rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: background .16s ease, color .16s ease;
  }

  .desktop-nav-trigger-label {
    min-width: 0;
  }

  .desktop-nav-trigger:hover,
  .desktop-nav-trigger:focus-visible,
  .desktop-nav-group.open > .desktop-nav-trigger,
  .desktop-nav-group.active-section > .desktop-nav-trigger,
  .desktop-nav-direct:hover,
  .desktop-nav-direct:focus-visible,
  .desktop-nav-direct.active {
    background: rgba(255,255,255,.12);
    color: #fff;
    outline: none;
  }

  .desktop-nav-chevron {
    font-size: .61rem;
    opacity: .78;
    transition: transform .16s ease;
  }

  .desktop-nav-group.open > .desktop-nav-trigger .desktop-nav-chevron,
  .desktop-nav-group:hover > .desktop-nav-trigger .desktop-nav-chevron {
    transform: rotate(180deg);
  }

  .desktop-nav-menu {
    position: absolute;
    top: calc(100% - 1px);
    right: 0;
    width: max-content;
    min-width: 210px;
    max-width: min(360px, 90vw);
    max-height: calc(100vh - 76px);
    overflow-y: auto;
    padding: 7px;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border-strong);
    border-radius: 0 0 10px 10px;
    box-shadow: 0 12px 28px rgba(32,49,47,.18);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity .14s ease, transform .14s ease, visibility .14s ease;
    scrollbar-width: none;
  }

  .desktop-nav-menu::-webkit-scrollbar {
    display: none;
  }

  .desktop-nav-group:hover > .desktop-nav-menu,
  .desktop-nav-group.open > .desktop-nav-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }

  .desktop-nav-item {
    width: 100%;
    min-height: 38px;
    padding: 8px 10px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--text);
    font-family: var(--font);
    font-size: .82rem;
    font-weight: 650;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 9px;
    text-align: right;
    white-space: nowrap;
  }

  .desktop-nav-item i {
    width: 18px;
    text-align: center;
    color: var(--primary);
    font-size: .86rem;
  }

  .desktop-nav-item:hover,
  .desktop-nav-item:focus-visible {
    background: var(--primary-light);
    color: var(--primary-dark);
    outline: none;
  }

  .desktop-nav-item.active {
    background: var(--primary-light);
    color: var(--primary);
    font-weight: 800;
  }

  .desktop-nav-item.active::after {
    content: "";
    width: 3px;
    height: 18px;
    margin-right: auto;
    border-radius: 3px;
    background: var(--primary);
  }

  /* Fullscreen desktop: نفس صف الهيدر الواحد وبدون مساحة Sidebar قديمة. */
  :fullscreen #app .sidebar,
  :-webkit-full-screen #app .sidebar {
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateX(110%) !important;
  }

  :fullscreen #app .main,
  :-webkit-full-screen #app .main,
  :fullscreen #app .main.sidebar-collapsed,
  :-webkit-full-screen #app .main.sidebar-collapsed {
    margin-right: 0 !important;
    padding-top: 72px !important;
  }

  :fullscreen #app .topbar,
  :-webkit-full-screen #app .topbar {
    right: 0 !important;
    height: 64px !important;
    min-height: 64px !important;
  }
}


/* ===== 2026-09-13: تصحيح طبقة المودالات على الكمبيوتر فقط =====
   الهيدر المكتبي أصبح z-index:500 بعد دمج الـNavbar داخله، بينما الـbackdrop
   الأساسي كان z-index:300؛ لذلك كانت المودالات الكبيرة تمر بصريًا أسفل الهيدر.
   نعيد طبقة المودال فوق الهيدر على الكمبيوتر فقط، بدون أي تغيير للموبايل
   وبدون تقليل ارتفاعات المودالات أو تغيير سلوك الـscroll الداخلي. */
@media (min-width: 901px) {
  body.modal-open .modal-backdrop.open {
    z-index: 600 !important;
  }
}

/* Desktop المتوسط: ضغط أسماء الأقسام فقط للحفاظ على صف واحد. */
@media (min-width: 901px) and (max-width: 1280px) {
  .desktop-nav-brand {
    max-width: 120px;
    padding-left: 6px;
    margin-left: 4px;
    gap: 5px;
  }

  .desktop-nav-brand-logo {
    width: 26px;
    height: 26px;
    min-width: 26px;
  }

  .desktop-nav-brand-name {
    font-size: .7rem;
  }

  html #app .topbar {
    padding-left: 8px !important;
    padding-right: 8px !important;
    gap: 5px !important;
  }

  .desktop-nav-trigger,
  .desktop-nav-direct {
    max-width: 94px;
    padding-left: 5px;
    padding-right: 5px;
    font-size: .68rem;
  }

  .desktop-nav-trigger-label,
  .desktop-nav-direct {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  html #app .topbar > .topbar-actions {
    gap: 5px !important;
  }
}

@media (max-width: 900px) {
  #desktop-main-nav {
    display: none !important;
  }
}