/* --- RESET & LAYOUT --- */
    body {
      font-family: 'Playpen Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
      margin: 0;
      background-color: #f1f5f9;
      color: #334155;
      display: flex;
      height: 100vh;
      overflow: hidden;
      font-size: 14px;
    }

    * {
      box-sizing: border-box;
      -webkit-tap-highlight-color: transparent;
    }

    /* ===============================
       LANGUAGE (Settings Only)
       =============================== */

    /* Small inline language section (NOT a big title card) */
    .lang-settings-inline {
      background: #fff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 14px 16px;
      margin-bottom: 18px;
    }

    /* Small header */
    .lang-settings-header {
      display: flex;
      align-items: center;
      gap: 8px;
      font-weight: 800;
      font-size: 0.95em;
      /* keeps it smaller than page title */
      color: #334155;
      margin-bottom: 10px;
    }

    .lang-settings-header span {
      font-weight: 700;
      font-size: 0.9em;
      color: #64748b;
    }

    /* Language grid (flags) */
    .lang-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    /* Flag button */
    .lang-flag {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 12px;
      border-radius: 12px;
      border: 1px solid #e2e8f0;
      background: #f8fafc;
      cursor: pointer;
      font-weight: 800;
      color: #334155;
      text-align: left;
      transition: 0.15s;
    }

    .lang-flag:hover {
      background: #eff6ff;
      border-color: #bfdbfe;
      transform: translateY(-1px);
    }

    /* Active language */
    .lang-flag.active {
      background: #2563eb;
      border-color: #2563eb;
      color: #fff;
    }

    /* Visible error highlight for required fields (strong, uses !important) */
    .required-error {
      border: 1.5px solid #dc2626 !important;
      background-color: #fee2e2 !important;
      outline: 0 !important;
      transition: border-color 0.5s ease, background-color 0.5s ease, box-shadow 0.5s ease;
    }

    /* Fading out state */
    .required-error.fading {
      border-color: #e5e7eb !important;
      background-color: #ffffff !important;
    }

    /* Ensure selects, textareas and inputs show the error reliably across browsers */
    select.required-error,
    textarea.required-error,
    input.required-error {
      border: 1.5px solid #dc2626 !important;
      background-color: #fee2e2 !important;
      outline: 0 !important;
      transition: border-color 0.5s ease, background-color 0.5s ease;
    }

    select.required-error.fading,
    textarea.required-error.fading,
    input.required-error.fading {
      border-color: #e5e7eb !important;
      background-color: #ffffff !important;
    }

    /* When inputs are inside an input-group, target them specifically */
    .input-group input.required-error,
    .input-group select.required-error {
      border: 1.5px solid #dc2626 !important;
      background-color: #fee2e2 !important;
    }

    .input-group input.required-error.fading,
    .input-group select.required-error.fading {
      border-color: #e5e7eb !important;
      background-color: #ffffff !important;
    }

    /* label style when its field is flagged */
    .required-error-label {
      color: #dc2626 !important;
      font-weight: 700;
      transition: color 0.5s ease;
    }

    .required-error-label.fading {
      color: inherit !important;
      font-weight: inherit;
    }

    .required-error-container {
      padding: 6px;
      border-radius: 8px;
      box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.08) inset;
      border: 1px solid #fca5a5;
      transition: box-shadow 0.5s ease, border-color 0.5s ease;
    }

    .required-error-container.fading {
      box-shadow: none;
      border-color: transparent;
    }

    /* Blink animation for highlighted fields */
    @keyframes field-blink {

      0%,
      100% {
        border-color: #dc2626;
        background-color: #fee2e2;
      }

      50% {
        border-color: #991b1b;
        background-color: #fecaca;
      }
    }

    .required-error.blinking {
      animation: field-blink 0.6s ease-in-out 3;
    }

    /* Flag emoji / icon */
    .lang-flag .flag {
      font-size: 20px;
      line-height: 1;
    }

    /* Small sub text */
    .lang-flag small {
      display: block;
      font-weight: 700;
      font-size: 11px;
      opacity: 0.85;
      margin-top: 2px;
    }

    /* Mobile: keep 2 columns, nice spacing */
    @media (max-width: 768px) {
      .lang-settings-inline {
        padding: 12px;
      }

      .lang-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
      }

      .lang-flag {
        padding: 10px;
      }
    }

    /* On mobile: 2 columns */
    @media (max-width: 768px) {
      .lang-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    /* ===============================
       CURRENCY SELECTOR (after language)
       =============================== */
    .currency-settings-inline {
      background: #fff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 14px 16px;
      margin-bottom: 18px;
    }

    .currency-settings-header {
      display: flex;
      align-items: center;
      gap: 8px;
      font-weight: 800;
      font-size: 0.95em;
      color: #334155;
      margin-bottom: 12px;
    }

    .currency-select-wrapper {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .currency-select-wrapper select {
      padding: 12px 14px;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 600;
      color: #1e293b;
      background-color: #f8fafc;
      cursor: pointer;
      transition: 0.15s;
    }

    .currency-select-wrapper select:hover {
      border-color: #94a3b8;
      background-color: #f1f5f9;
    }

    .currency-select-wrapper select:focus {
      outline: none;
      border-color: #2563eb;
      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    }

    .currency-note {
      font-size: 12px;
      color: #64748b;
      margin-top: 6px;
      font-weight: 500;
    }

    /* ===============================
       PRODUCTS GRID & CARDS
       =============================== */
    #productsCardsWrapper {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 16px;
    }

    @media (max-width: 767px) {
      #productsCardsWrapper {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
      }
    }

    .product-card {
      transition: box-shadow 0.18s ease, transform 0.18s ease, filter 0.18s ease;
      box-shadow: 0 2px 8px rgba(246, 166, 31, 0.15), 0 0 12px rgba(246, 166, 31, 0.1);
    }

    .product-card:hover {
      box-shadow: 0 4px 12px rgba(246, 166, 31, 0.3), 0 0 20px rgba(246, 166, 31, 0.2);
      transform: scale(1.02);
    }

    .product-card:focus-within {
      box-shadow: 0 4px 12px rgba(246, 166, 31, 0.3), 0 0 20px rgba(246, 166, 31, 0.2);
      transform: scale(1.02);
    }

    @media (max-width: 768px) {
      .currency-settings-inline {
        padding: 12px;
      }

      .currency-select-wrapper select {
        padding: 11px 12px;
        font-size: 13px;
      }
    }

    /* RTL Layout */
    body[dir="rtl"] {
      font-family: 'Tahoma', 'Segoe UI', sans-serif;
    }

    body[dir="rtl"] .sidebar {
      border-right: none;
      border-left: none;
    }

    /* RTL Dropdown Arrow Position (desktop) */
    body[dir="rtl"] select {
      background-position: left 12px center;
      padding-left: 36px;
      padding-right: 12px;
    }

    body[dir="rtl"] .input-group select,
    body[dir="rtl"] .input-group .addon {
      border-radius: 8px !important;
      border: 2px solid #cbd5e1;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    body[dir="rtl"] .input-group select:hover {
      border-color: #F6A61F;
      background-color: #fffbf0;
    }

    body[dir="rtl"] .input-group select:focus {
      outline: none;
      border-color: #F6A61F;
      box-shadow: 0 0 0 3px rgba(246, 166, 31, 0.15);
      background-color: white;
    }

    body[dir="rtl"] .input-group input {
      border-radius: 8px;
    }

    body[dir="rtl"] .input-group.phone-group {
      flex-direction: row-reverse;
    }

    /* RTL Phone input: keep digits LTR but align text right */
    body[dir="rtl"] #custPhoneNum,
    body[dir="rtl"] #cPhoneNum,
    body[dir="rtl"] #settingCompPhone,
    body[dir="rtl"] #settingSocialWA,
    body[dir="rtl"] #storeFooterPhone,
    body[dir="rtl"] #storeFooterWhatsAppFooter {
      text-align: left !important;
      direction: ltr !important;
    }

    body[dir="rtl"] .text-right {
      text-align: left;
    }

    body[dir="rtl"] .close-modal {
      float: left;
    }

    body[dir="rtl"] .totals-row input {
      text-align: left;
    }

    /* ===============================
       BOOT SPLASH (shown while DB loads for returning users)
       =============================== */
    #bootSplash {
      position: fixed;
      top: 0; left: 0; width: 100%; height: 100%;
      background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 10001;
      flex-direction: column;
    }
    html.app-booting #bootSplash {
      display: flex;
    }
    html.app-booting .sidebar,
    html.app-booting .main-content {
      visibility: hidden;
    }
    .boot-splash-inner {
      text-align: center;
    }
    .boot-splash-logo {
      width: 80px; height: 80px;
      border-radius: 18px;
      box-shadow: 0 8px 32px rgba(0,0,0,.35);
      animation: splashPulse 1.8s ease-in-out infinite;
    }
    .boot-splash-name {
      color: #fff;
      font-size: 1.6em;
      font-weight: 700;
      margin-top: 14px;
      letter-spacing: .5px;
    }
    .boot-splash-spinner {
      margin: 22px auto 0;
      width: 28px; height: 28px;
      border: 3px solid rgba(255,255,255,.2);
      border-top-color: #fff;
      border-radius: 50%;
      animation: splashSpin .7s linear infinite;
    }
    @keyframes splashPulse {
      0%, 100% { transform: scale(1); opacity: 1; }
      50% { transform: scale(1.06); opacity: .85; }
    }
    @keyframes splashSpin {
      to { transform: rotate(360deg); }
    }

    /* ===============================
       ACTIVATION PAGE (License Key)
       =============================== */
    #activationOverlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 9999;
      overflow-y: auto;
    }

    /* Show activation overlay instantly on first launch via CSS class */
    html.show-activation #activationOverlay {
      display: flex;
    }
    html.show-activation .sidebar,
    html.show-activation .main-content {
      display: none !important;
    }

    #licenseModal {
      z-index: 10000;
    }

    /* Prevent activation overlay blink after activation */
    html.activated #activationOverlay {
      display: none !important;
    }

    .activation-container {
      background: white;
      border-radius: 16px;
      padding: 40px;
      max-width: 500px;
      width: 100%;
      max-height: 90vh;
      overflow-y: auto;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
      margin: 20px;
    }

    /* Mobile responsive styles for activation */
    @media (max-width: 768px) {
      .activation-container {
        padding: 24px 20px;
        margin: 10px;
        max-height: 95vh;
        border-radius: 12px;
      }

      .activation-logo {
        font-size: 36px !important;
        margin-bottom: 12px !important;
      }

      .activation-title {
        font-size: 22px !important;
        margin-bottom: 6px !important;
      }

      .activation-subtitle {
        font-size: 13px !important;
        margin-bottom: 16px !important;
      }

      .form-group {
        margin-bottom: 14px !important;
      }

      .form-group label {
        font-size: 13px !important;
        margin-bottom: 5px !important;
      }

      .form-group input,
      .form-group select {
        padding: 10px 12px !important;
        font-size: 13px !important;
      }

      .btn-activation {
        padding: 10px 16px !important;
        font-size: 13px !important;
      }

      .activation-header {
        margin-bottom: 20px !important;
      }

      .btn-group {
        margin-top: 16px !important;
      }
    }

    @media (max-width: 480px) {
      .activation-container {
        padding: 20px 16px;
        margin: 8px;
      }

      .activation-logo {
        font-size: 32px !important;
      }

      .activation-title {
        font-size: 20px !important;
      }
    }

    .activation-header {
      text-align: center;
      margin-bottom: 30px;
    }

    .activation-logo {
      font-size: 48px;
      margin-bottom: 16px;
    }

    .activation-title {
      font-size: 28px;
      font-weight: 700;
      color: #0f172a;
      margin-bottom: 8px;
    }

    .activation-subtitle {
      font-size: 14px;
      color: #64748b;
      margin-bottom: 20px;
    }

    .activation-lang-switch {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 8px;
    }

    .activation-lang-label {
      font-size: 12px;
      color: #64748b;
      font-weight: 600;
    }

    .activation-lang-buttons {
      display: inline-flex;
      gap: 8px;
    }

    .lang-button-activation {
      padding: 8px 12px;
      border-radius: 8px;
      border: 2px solid #cbd5e1;
      background: #fff;
      color: #334155;
      font-weight: 700;
      cursor: pointer;
      transition: 0.2s;
      font-size: 12px;
      line-height: 1;
    }

    .lang-button-activation.active {
      border-color: #2563eb;
      background: #eff6ff;
      color: #1e40af;
    }

    .activation-step {
      display: none;
      animation: fadeIn 0.3s ease-in;
    }

    .activation-step.active {
      display: block;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
      }

      to {
        opacity: 1;
      }
    }

    .step-indicator {
      display: flex;
      gap: 8px;
      margin-bottom: 20px;
      justify-content: center;
    }

    .step-dot {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: #e2e8f0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
      font-size: 12px;
      color: #64748b;
    }

    .step-dot.active {
      background: #2563eb;
      color: white;
    }

    .step-dot.completed {
      background: #10b981;
      color: white;
    }

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

    .form-group label {
      display: block;
      font-weight: 600;
      color: #1e293b;
      margin-bottom: 6px;
      font-size: 14px;
    }

    .form-group input,
    .form-group select {
      width: 100%;
      padding: 12px 14px;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      font-size: 14px;
      font-family: 'Courier New', monospace;
      transition: 0.2s;
    }

    .form-group input:focus,
    .form-group select:focus {
      outline: none;
      border-color: #2563eb;
      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    }

    .license-input {
      letter-spacing: 2px;
      font-size: 16px;
      text-transform: uppercase;
    }

    .activation-hint {
      font-size: 12px;
      color: #64748b;
      margin-top: 4px;
    }

    .activation-error {
      background: #fee2e2;
      border: 1px solid #fca5a5;
      color: #991b1b;
      padding: 12px;
      border-radius: 8px;
      margin-bottom: 16px;
      font-size: 13px;
    }

    .activation-success {
      background: #d1fae5;
      border: 1px solid #6ee7b7;
      color: #065f46;
      padding: 12px;
      border-radius: 8px;
      margin-bottom: 16px;
      font-size: 13px;
    }

    .btn-group {
      display: flex;
      gap: 10px;
      margin-top: 24px;
    }

    .btn-activation {
      flex: 1;
      padding: 12px 20px;
      border: none;
      border-radius: 8px;
      font-weight: 600;
      cursor: pointer;
      transition: 0.2s;
      font-size: 14px;
    }

    .btn-activation.primary {
      background: #2563eb;
      color: white;
    }

    .btn-activation.primary:hover {
      background: #1d4ed8;
    }

    .btn-activation.primary:disabled {
      background: #cbd5e1;
      cursor: not-allowed;
    }

    .btn-activation.secondary {
      background: #e2e8f0;
      color: #334155;
    }

    .btn-activation.secondary:hover {
      background: #cbd5e1;
    }

    .activation-footer {
      text-align: center;
      margin-top: 20px;
      font-size: 12px;
      color: #64748b;
    }

    .activation-footer a {
      color: #2563eb;
      text-decoration: none;
    }

    .activation-contact-actions {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-left: 6px;
      flex-wrap: wrap;
      justify-content: center;
    }

    .activation-whatsapp {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 8px;
      border-radius: 999px;
      background: #ecfdf5;
      color: #16a34a;
      font-weight: 700;
      font-size: 12px;
    }

    .activation-whatsapp img {
      width: 16px;
      height: 16px;
    }

    .activation-footer a:hover {
      text-decoration: underline;
    }

    /* RTL for activation */
    body[dir="rtl"] .activation-container {
      direction: rtl;
    }

    body[dir="rtl"] .form-group label {
      text-align: right;
    }

    /* =========================================
       ACTIVATION INPUT REVEAL STYLES
       ========================================= */
    .reveal-input {
      display: flex;
      gap: 10px;
      align-items: stretch;
      width: 100%;
    }

    .license-input {
      flex: 1;
      padding-right: 14px !important;
      font-family: 'Playpen Sans', sans-serif !important;
      letter-spacing: normal !important;
      text-transform: none !important;
    }

    /* Masking for userEmail when it's type="text" but needs to be hidden */
    #userEmail.masked {
      -webkit-text-security: disc !important;
    }

    .reveal-btn {
      width: 48px;
      flex-shrink: 0;
      background: #f1f5f9;
      border: 2px solid #cbd5e1;
      border-radius: 8px;
      cursor: pointer;
      font-size: 1.2em;
      color: #64748b;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s;
    }

    .reveal-btn:hover {
      background: #e2e8f0;
      border-color: #94a3b8;
      color: #334155;
    }

    /* RTL Support for Reveal Button */
    body[dir="rtl"] .reveal-input {
      flex-direction: row-reverse;
    }

    body[dir="rtl"] .license-input {
      padding-left: 14px !important;
      padding-right: 14px !important;
    }

    /* Activation Buttons Fonts */
    .lang-button-activation,
    .btn-activation,
    .activation-title,
    .activation-subtitle,
    .activation-lang-label,
    .form-group label,
    .activation-hint,
    .activation-footer span,
    .activation-footer a {
      font-family: 'Playpen Sans', cursive !important;
    }

    .license-input::placeholder {
      text-transform: none !important;
    }

    /* =========================================
       AUTH TAB TOGGLE (Login / Register)
       ========================================= */
    .auth-mode-toggle {
      display: flex;
      background: #f1f5f9;
      border-radius: 10px;
      padding: 4px;
      gap: 4px;
      margin-bottom: 20px;
    }
    .auth-tab-btn {
      flex: 1;
      padding: 10px 16px;
      border: none;
      border-radius: 8px;
      font-weight: 600;
      font-size: 14px;
      cursor: pointer;
      transition: all 0.25s ease;
      background: transparent;
      color: #64748b;
      font-family: 'Playpen Sans', cursive;
    }
    .auth-tab-btn.active {
      background: #2563eb;
      color: #fff;
      box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
    }
    .auth-tab-btn:not(.active):hover {
      background: #e2e8f0;
      color: #334155;
    }

    /* Auth form inputs — use system font (not monospace) for email/password */
    .auth-form-input {
      font-family: 'Playpen Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
      letter-spacing: normal !important;
      text-transform: none !important;
      direction: ltr !important;
      text-align: left !important;
    }
    /* In RTL, keep the input LTR but let the label stay RTL */
    body[dir="rtl"] .auth-form-input::placeholder {
      direction: ltr;
      text-align: left;
    }

    /* Forgot password link */
    .auth-forgot-link {
      display: block;
      text-align: right;
      margin-top: 4px;
      font-size: 12px;
      color: #2563eb;
      cursor: pointer;
      text-decoration: none;
      font-family: 'Playpen Sans', cursive;
    }
    .auth-forgot-link:hover {
      text-decoration: underline;
      color: #1d4ed8;
    }
    body[dir="rtl"] .auth-forgot-link {
      text-align: left;
    }

    /* Auth error messages */
    .auth-error {
      background: #fee2e2;
      border: 1px solid #fca5a5;
      color: #991b1b;
      padding: 10px 14px;
      border-radius: 8px;
      margin-bottom: 14px;
      font-size: 13px;
      display: none;
      animation: fadeIn 0.3s ease;
      font-family: 'Playpen Sans', cursive;
    }

    /* =========================================
       SIDEBAR LOGOUT BUTTON
       ========================================= */
    .nav-item-logout {
      margin-top: auto;
      border-top: 1px solid rgba(255,255,255,0.08);
      padding-top: 12px !important;
      color: #f87171 !important;
      transition: all 0.2s ease;
    }
    .nav-item-logout:hover {
      background: rgba(248, 113, 113, 0.12) !important;
      color: #fca5a5 !important;
    }

    /* --- SIDEBAR --- */
    .sidebar {
      width: 240px;
      background-color: #0f172a;
      color: #94a3b8;
      display: flex;
      flex-direction: column;
      padding: 15px;
      flex-shrink: 0;
      transition: 0.3s;
      border: none;
    }

    .brand {
      font-size: 1.3em;
      font-weight: 700;
      color: #f8fafc;
      margin-bottom: 25px;
      padding-bottom: 15px;
      border-bottom: none;
      display: flex;
      align-items: center;
      gap: 10px;
      word-break: break-word;
    }

    .brand-logo {
      width: 28px;
      height: 28px;
      border-radius: 0;
      object-fit: contain;
      background: transparent;
      padding: 0;
    }

    .footer-logo {
      width: 22px;
      height: 22px;
      border-radius: 0;
      object-fit: contain;
      background: transparent;
      padding: 0;
    }

    .brand-text {
      display: inline-block;
      font-family: 'Playpen Sans', 'Segoe UI', system-ui, -apple-system, sans-serif !important;
      letter-spacing: 0.5px;
      direction: ltr;
      unicode-bidi: plaintext;
    }

    .app-brand-name {
      font-family: 'Playpen Sans', 'Segoe UI', system-ui, -apple-system, sans-serif !important;
      font-weight: 700;
      font-size: 1.05rem;
      color: #f8fafc;
      letter-spacing: .5px;
      direction: ltr;
      unicode-bidi: plaintext;
      line-height: 1;
    }

    .nav-item {
      padding: 12px 16px;
      cursor: pointer;
      border-radius: 8px;
      margin-bottom: 4px;
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      gap: 10px;
      font-weight: 500;
      font-size: 1.05em;
      border: 2px solid transparent;
      position: relative;
    }

    /* Nav icon images (order icon etc.) */
    .nav-icon-img {
      width: 1.1em;
      height: 1.1em;
      vertical-align: middle;
      display: inline-block;
    }

    .nav-item:hover {
      background-color: rgba(246, 166, 31, 0.1);
      color: #F6A61F;
      border-color: rgba(246, 166, 31, 0.3);
      box-shadow: 0 0 0 3px rgba(246, 166, 31, 0.1);
      transform: translateX(3px);
    }

    .nav-item.active {
      background: linear-gradient(135deg, #F6A61F 0%, #f59e0b 100%);
      color: white;
      border-color: #F6A61F;
      box-shadow: 0 4px 12px rgba(246, 166, 31, 0.4), 0 0 20px rgba(246, 166, 31, 0.2);
      transform: translateX(5px);
    }

    /* --- MAIN CONTENT --- */
    .main-content {
      flex: 1;
      padding: 25px;
      overflow-y: auto;
      position: relative;
      -webkit-overflow-scrolling: touch;
    }

    /* Pull-to-refresh indicator (native only; JS disables it on web) */
    #pullRefreshIndicator {
      position: fixed;
      top: 10px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 99998;
      background: rgba(15, 23, 42, 0.92);
      color: #f8fafc;
      padding: 8px 12px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 700;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.15s ease, transform 0.15s ease;
      box-shadow: 0 8px 20px rgba(0,0,0,0.18);
    }

    #pullRefreshIndicator.show {
      opacity: 1;
      transform: translateX(-50%) translateY(2px);
    }

    .page {
      display: none;
    }

    .page.active {
      display: block;
      animation: fadeIn 0.15s;
    }

    .app-loading .nav-item.active {
      background: transparent !important;
      box-shadow: none !important;
    }

    .app-loading .nav-item.active span {
      color: inherit !important;
    }

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

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

    /* Lower toast notifications a bit on mobile (avoid status bar / notch) */
    @media (max-width: 640px) {
      /* SweetAlert2 toasts */
      body.swal2-toast-shown .swal2-container.swal2-top {
        padding-top: calc(env(safe-area-inset-top) + 22px) !important;
      }

      /* Toastr */
      .toast-top-center {
        top: calc(env(safe-area-inset-top) + 22px) !important;
      }

      /* Fallback banner */
      #hm-debug-banner {
        top: calc(env(safe-area-inset-top) + 22px) !important;
      }
    }

    /* --- UI COMPONENTS --- */
    .container {
      background: white;
      padding: 25px;
      border-radius: 16px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
      max-width: 1100px;
      margin: auto;
      margin-bottom: 20px;
      border: 1px solid #e2e8f0;
    }

    h2 {
      margin-top: 0;
      color: #0f172a;
      font-size: 1.4em;
      border-bottom: 2px solid #f1f5f9;
      padding-bottom: 15px;
      margin-bottom: 20px;
    }

    label {
      display: block;
      font-size: 0.85em;
      font-weight: 600;
      color: #64748b;
      margin-bottom: 4px;
    }

    /* --- FORMS --- */
    .form-grid-3 {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 15px;
      margin-bottom: 15px;
    }

    .form-grid-2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 15px;
      margin-bottom: 15px;
    }

    input,
    select,
    textarea {
      width: 100%;
      padding: 10px;
      border: 2px solid #cbd5e1;
      border-radius: 8px;
      font-family: inherit;
      font-size: 0.95em;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
      background-color: #fff;
      cursor: pointer;
    }

    /* Custom dropdown arrow for ALL selects */
    select {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23F6A61F' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 12px center;
      background-size: 12px;
      padding-right: 36px;
      font-weight: 800;
      color: #1e293b;
    }

    input:hover,
    select:hover,
    textarea:hover {
      border-color: #F6A61F;
      background-color: #fffbf0;
    }

    input:focus,
    select:focus,
    textarea:focus {
      outline: none;
      border-color: #F6A61F;
      box-shadow: 0 0 0 3px rgba(246, 166, 31, 0.15);
    }

    label {
      font-size: 0.85em;
      font-weight: 600;
      color: #475569;
      margin-bottom: 4px;
      display: block;
    }

    .reveal-input {
      position: relative;
    }

    .masked-input {
      filter: blur(6px);
      transition: filter 0.15s ease;
      padding-right: 44px;
    }

    body[dir="rtl"] .masked-input {
      padding-right: 10px;
      padding-left: 44px;
    }

    .masked-input.revealed {
      filter: none;
    }

    .masked-text {
      filter: blur(6px);
      transition: filter 0.15s ease;
    }

    .masked-text.revealed {
      filter: none;
    }

    .sensitive-row {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .reveal-btn {
      border: 1px solid #cbd5e1;
      background: #f8fafc;
      color: #334155;
      border-radius: 6px;
      padding: 4px 6px;
      font-size: 12px;
      cursor: pointer;
      line-height: 1;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
      transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
    }

    .reveal-btn:hover:not(:disabled) {
      background: #e2e8f0;
      border-color: #94a3b8;
    }

    .reveal-btn:disabled {
      cursor: not-allowed;
      opacity: 0.5;
    }

    .reveal-input .reveal-btn {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
    }

    body[dir="rtl"] .reveal-input .reveal-btn {
      right: auto;
      left: 10px;
    }
    /* Auth form inputs are always LTR — keep eye icon on the right even in RTL */
    body[dir="rtl"] .reveal-input:has(.auth-form-input) .reveal-btn {
      left: auto;
      right: 10px;
    }
    
    body[dir="rtl"] .sensitive-row {
      flex-direction: row-reverse;
    }

    input:hover,
    select:hover,
    textarea:hover {
      border-color: #F6A61F;
      box-shadow: 0 0 0 2px rgba(246, 166, 31, 0.1);
    }

    input:focus,
    select:focus,
    textarea:focus {
      outline: none;
      border-color: #F6A61F;
      box-shadow: 0 0 0 3px rgba(246, 166, 31, 0.15);
      transform: scale(1.01);
    }

    input,
    select,
    textarea {
      font-weight: 800;
      font-family: 'Playpen Sans', cursive !important;
    }

    /* Native select options bold */
    select option {
      font-weight: 700;
    }

    /* Required field error styling */
    input[style*="border-color: #dc2626"],
    textarea[style*="border-color: #dc2626"] {
      border-color: #dc2626 !important;
      background-color: #ffffff !important;
    }

    .input-group {
      display: flex;
      gap: 8px;
    }

    .input-group select,
    .input-group .addon {
      border-radius: 8px !important;
      border: 2px solid #cbd5e1;
      background-color: white;
      width: auto;
      flex-shrink: 0;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .input-group select:hover {
      border-color: #F6A61F;
      background-color: #fffbf0;
    }

    .input-group select:focus {
      outline: none;
      border-color: #F6A61F;
      box-shadow: 0 0 0 3px rgba(246, 166, 31, 0.15);
      background-color: white;
    }

    .input-group input {
      border-radius: 8px;
      flex: 1;
    }

    .input-group .addon {
      padding: 10px;
      border: 1px solid #cbd5e1;
      color: #64748b;
      font-weight: bold;
      font-size: 0.9em;
    }


    /* Phone country code select */
    .country-select {
      min-width: 130px;
      max-width: 150px;
      font-size: 0.95em;
      font-weight: 800;
      border-radius: 8px;
      padding: 12px 10px;
      background-color: white;
      cursor: pointer;
    }

    .country-select option {
      padding: 8px;
      font-size: 0.95em;
      font-weight: 500;
    }

    .input-group .country-select {
      border-radius: 8px;
      flex-shrink: 0;
    }

    /* Glowing effect for main frame */
    .frame:focus,
    .main-frame:focus,
    #mainFrame:focus {
      outline: none;
      border-color: #F6A61F;
      box-shadow: 0 0 0 3px #fde68a, 0 0 0 6px #F6A61F44;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .img-picker {
      border: 1px solid #cbd5e1;
      background: white;
      padding: 10px;
      border-radius: 8px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 10px;
      transition: 0.2s;
    }

    .img-picker:hover {
      border-color: #94a3b8;
      background: #f8fafc;
    }

    .img-picker input {
      border: none;
      background: transparent;
      padding: 0;
      pointer-events: none;
      color: #64748b;
    }

    /* Make direct form column children positioned so absolute dropdowns anchor correctly */
    .form-grid-2>div,
    .form-grid-3>div,
    .form-grid-1>div {
      position: relative;
    }

    .btn-icon {
      font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    }

    .icon-only-mobile .btn-icon {
      display: none;
    }

    /* Mobile: ensure dropdown panels match their field width and anchor to field */
    @media (max-width: 520px) {

      .customer-autocomplete,
      .recent-dropdown,
      .dropdown-menu-orange,
      .custom-dropdown .dropdown-list,
      .autocomplete-list {
        left: 0 !important;
        right: auto !important;
        width: 100% !important;
        min-width: 0 !important;
      }

      .icon-only-mobile .btn-text {
        display: none;
      }

      .icon-only-mobile {
        justify-content: center;
        padding: 10px 14px;
      }

      .icon-only-mobile .btn-icon {
        display: inline-flex;
        margin-right: 0;
      }
    }

    /* --- POS GRID --- */
    .grid-container {
      background: #f8fafc;
      padding: 15px;
      border-radius: 12px;
      border: 1px dashed #cbd5e1;
      margin-bottom: 20px;
      position: relative;
    }

    /* Carousel Wrapper */
    .product-grid-wrapper {
      position: relative;
      overflow: hidden;
      padding: 0 40px;
    }

    .product-grid {
      display: flex;
      gap: 12px;
      overflow-x: auto;
      scroll-behavior: smooth;
      scroll-snap-type: x mandatory;
      scroll-padding: 5px;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      -ms-overflow-style: none;
      padding: 10px 5px;
      touch-action: pan-y;
      will-change: scroll-position;
    }

    .product-grid::-webkit-scrollbar {
      display: none;
    }

    .product-item {
      background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
      padding: 12px 8px;
      border-radius: 16px;
      text-align: center;
      cursor: pointer;
      border: 2px solid transparent;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      min-height: 160px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-width: 130px;
      max-width: 130px;
      flex: 0 0 auto;
      scroll-snap-align: start;
      scroll-snap-stop: always;
      touch-action: manipulation;
      position: relative;
      overflow: hidden;
    }

    .product-item::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, #22c55e, #10b981);
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .product-item:hover::before {
      opacity: 1;
    }

    /* Carousel Navigation Arrows */
    .carousel-nav {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: white;
      border: 2px solid #F6A61F;
      border-radius: 50%;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 10;
      transition: all 0.2s ease;
      user-select: none;
    }

    .carousel-nav:hover {
      background: #F6A61F;
      transform: translateY(-50%) scale(1.1);
    }

    .carousel-nav:active {
      transform: translateY(-50%) scale(0.95);
    }

    .carousel-nav-left {
      left: 5px;
    }

    .carousel-nav-right {
      right: 5px;
    }

    .carousel-nav svg {
      width: 20px;
      height: 20px;
      fill: #F6A61F;
      transition: fill 0.2s ease;
    }

    .carousel-nav:hover svg {
      fill: white;
    }

    /* RTL Support for Carousel */
    body[dir="rtl"] .carousel-nav-left {
      left: auto;
      right: 5px;
    }

    body[dir="rtl"] .carousel-nav-right {
      right: auto;
      left: 5px;
    }

    /* History Table Responsive */
    .history-table-wrapper {
      overflow-x: auto;
      overflow-y: visible;
      -webkit-overflow-scrolling: touch;
      position: relative;
      background: white;
      scroll-behavior: smooth;
    }

    /* Custom scrollbar for table */
    .history-table-wrapper::-webkit-scrollbar {
      height: 8px;
    }

    .history-table-wrapper::-webkit-scrollbar-track {
      background: #f1f5f9;
      border-radius: 4px;
    }

    .history-table-wrapper::-webkit-scrollbar-thumb {
      background: #94a3b8;
      border-radius: 4px;
    }

    .history-table-wrapper::-webkit-scrollbar-thumb:hover {
      background: #64748b;
    }

    #historyTable {
      min-width: 700px;
      width: 100%;
      border-collapse: collapse;
      table-layout: fixed;
    }

    /* ── Column widths: based on actual content sizes ──
       DATE "2026-02-18" (10ch)   → 9%
       ID "#1000" (5ch)           → 5%
       Customer "Bilal Khemar"    → 15% (ellipsis overflow)
       Status "🚚 Out for Delivery" → 18%
       Payment "💵 COD (Cash on D…)" → 21%
       Method "📱 Online Payment"   → 15%
       Total "50000 AED"          → 17%
    */
    #historyTable th:nth-child(1),
    #historyTable td:nth-child(1) {
      width: 10%;
      text-align: center;
    }

    #historyTable th:nth-child(2),
    #historyTable td:nth-child(2) {
      width: 6%;
      text-align: center;
    }

    #historyTable th:nth-child(3),
    #historyTable td:nth-child(3) {
      width: 16%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 0;
    }

    #historyTable th:nth-child(4),
    #historyTable td:nth-child(4) {
      width: 17%;
    }

    #historyTable th:nth-child(5),
    #historyTable td:nth-child(5) {
      width: 19%;
    }

    #historyTable th:nth-child(6),
    #historyTable td:nth-child(6) {
      width: 15%;
    }

    #historyTable th:nth-child(7),
    #historyTable td:nth-child(7) {
      width: 17%;
    }

    #historyTable thead {
      background: #f8fafc;
      position: sticky;
      top: 0;
      z-index: 1;
    }

    #historyTable td.hist-date {
      display: table-cell;
      vertical-align: middle;
      line-height: 1.2;
    }


    /* Mobile Scroll Hint */
    .mobile-scroll-hint {
      display: none !important;
    }

    @keyframes slideHint {

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

      50% {
        transform: translateX(5px);
      }
    }

    /* Clean Native Date Picker Styling */
    .custom-date-container input[type="date"] {
      padding: 8px 12px;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      font-family: inherit;
      font-size: 0.9em;
      color: #1e293b;
      background: #fff;
      width: 100%;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
      cursor: pointer;
      text-align: center;
      appearance: none;
      -webkit-appearance: none;
    }

    .custom-date-container input[type="date"]:hover {
      border-color: #3b82f6;
    }

    /* Custom Date Picker (LEGACY - NOT USED BUT KEPT FOR REFERENCE) */
    .custom-date-input {
      position: relative;
      width: 100%;
    }

    .custom-date-input input {
      width: 100%;
      padding: 10px 35px 10px 12px;
      border: 2px solid #cbd5e1;
      border-radius: 6px;
      font-size: 0.9em;
      font-family: inherit;
      cursor: pointer;
      background: white;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .custom-date-input input:hover {
      border-color: #F6A61F;
      box-shadow: 0 0 0 2px rgba(246, 166, 31, 0.1);
    }

    .custom-date-input input:focus {
      outline: none;
      border-color: #F6A61F;
      box-shadow: 0 0 0 3px rgba(246, 166, 31, 0.15);
    }

    .custom-date-input .calendar-icon {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      pointer-events: none;
      font-size: 1.1em;
    }

    body[dir="rtl"] .custom-date-input .calendar-icon {
      right: auto;
      left: 10px;
    }

    .date-picker-popup {
      position: absolute;
      top: calc(100% + 5px);
      left: 0;
      background: white;
      border: 2px solid #F6A61F;
      border-radius: 12px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
      padding: 15px;
      z-index: 1000;
      min-width: 280px;
      display: none;
    }

    .date-picker-popup.show {
      display: block;
      animation: datePickerSlide 0.2s ease;
    }

    @keyframes datePickerSlide {
      from {
        opacity: 0;
        transform: translateY(-10px);
      }

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

    .date-picker-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
      padding-bottom: 10px;
      border-bottom: 2px solid #f1f5f9;
    }

    .date-picker-header button {
      background: #f1f5f9;
      border: none;
      width: 32px;
      height: 32px;
      border-radius: 6px;
      cursor: pointer;
      font-size: 1.2em;
      color: #334155;
      transition: all 0.2s ease;
    }

    .date-picker-header button:hover {
      background: #F6A61F;
      color: white;
      transform: scale(1.1);
    }

    .date-picker-header .month-year {
      font-weight: 700;
      color: #334155;
      font-size: 0.95em;
    }

    .date-picker-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 4px;
    }

    .date-picker-day-label {
      text-align: center;
      font-size: 0.75em;
      font-weight: 700;
      color: #64748b;
      padding: 6px 0;
    }

    .date-picker-day {
      aspect-ratio: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 6px;
      cursor: pointer;
      font-size: 0.85em;
      font-weight: 600;
      color: #334155;
      transition: all 0.15s ease;
      background: white;
    }

    .date-picker-day:hover {
      background: #fef3c7;
      color: #d97706;
      transform: scale(1.1);
    }

    .date-picker-day.today {
      background: #dbeafe;
      color: #1e40af;
      font-weight: 700;
    }

    .date-picker-day.selected {
      background: #F6A61F;
      color: white;
      font-weight: 700;
    }

    .date-picker-day.other-month {
      color: #cbd5e1;
    }

    .date-picker-day.disabled {
      color: #e2e8f0;
      cursor: not-allowed;
    }

    .date-picker-day.disabled:hover {
      background: white;
      transform: none;
    }

    #historyTable th {
      padding: 12px;
      text-align: left;
      font-weight: 600;
      color: #475569;
      font-size: 0.85em;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      border-bottom: 2px solid #e2e8f0;
    }

    /* History table hover (match default table hover) */
    #historyTable tbody tr:hover td {
      background-color: #f8fafc;
    }

    /* Remove generic 4th-column highlight from Order History status column */
    #historyTable tbody td:nth-child(4) {
      background: white !important;
      color: inherit !important;
      font-weight: normal !important;
    }

    #historyTable tbody tr:hover td:nth-child(4) {
      background-color: #f8fafc !important;
    }

    #historyTable tbody td:nth-child(4)::before {
      display: none !important;
    }

    #historyTable th:last-child {
      text-align: center;
    }

    /* Customer name: ellipsis for long names */
    #historyTable td.hist-customer {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 0;
    }

    /* Date column: compact */
    #historyTable td.hist-date {
      font-size: 0.85em;
      white-space: nowrap;
      letter-spacing: -0.3px;
    }

    /* ID column: compact */
    #historyTable td.hist-id {
      font-size: 0.85em;
      white-space: nowrap;
    }

    /* Status pills: allow wrapping within the cell */
    #historyTable td.hist-status .status-pill,
    #historyTable td.hist-payment .status-pill,
    #historyTable td.hist-method .status-pill {
      white-space: nowrap;
      font-size: 0.82em;
      display: inline-block;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* Total column: right-aligned, no wrap */
    #historyTable td.hist-total {
      text-align: right;
      white-space: nowrap;
      font-weight: 700;
      font-size: 0.9em;
    }

    @media (max-width: 768px) {

      /* Show mobile scroll hint */
      .mobile-scroll-hint {
        display: block !important;
      }

      #historyTable th:nth-child(5),
      #historyTable td:nth-child(5) {
        display: table-cell !important;
      }

      /* Enhanced mobile table scrolling */
      .history-table-wrapper {
        /* Add scroll hint shadow on right edge */
        background:
          linear-gradient(90deg, white 30%, rgba(255, 255, 255, 0)),
          linear-gradient(90deg, rgba(0, 0, 0, .08), white 30%) 0 100%,
          linear-gradient(270deg, white 30%, rgba(255, 255, 255, 0)),
          linear-gradient(270deg, rgba(0, 0, 0, .08), white 30%) 100% 0;
        background-repeat: no-repeat;
        background-color: white;
        background-size: 40px 100%, 40px 100%, 40px 100%, 40px 100%;
        background-attachment: local, scroll, local, scroll;
      }

      #historyTable {
        font-size: 0.85em;
        min-width: 750px;
        /* Ensure table stays wide enough for 7 columns */
      }

      #historyTable th,
      #historyTable td {
        padding: 10px 8px;
        white-space: nowrap;
        /* Prevent text wrapping */
        vertical-align: middle;
      }

      /* Optimize column widths for mobile */
      #historyTable th:nth-child(1),
      #historyTable td:nth-child(1) {
        min-width: 80px;
        /* Date: 2026-02-18 */
        text-align: center;
      }

      #historyTable td.hist-date {
        display: table-cell;
        vertical-align: middle;
      }

      #historyTable th:nth-child(2),
      #historyTable td:nth-child(2) {
        min-width: 46px;
        /* ID: #1000 */
      }

      #historyTable th:nth-child(3),
      #historyTable td:nth-child(3) {
        min-width: 100px;
        /* Customer */
        overflow: hidden;
        text-overflow: ellipsis;
      }

      #historyTable th:nth-child(4),
      #historyTable td:nth-child(4) {
        min-width: 130px;
        /* Order Status: 🚚 Out for Delivery */
      }

      #historyTable th:nth-child(5),
      #historyTable td:nth-child(5) {
        min-width: 150px;
        /* Payment Status: 💵 COD (Cash on Delivery) */
      }

      #historyTable th:nth-child(6),
      #historyTable td:nth-child(6) {
        min-width: 110px;
        /* Payment Method: 📱 Online Payment */
      }

      #historyTable th:nth-child(7),
      #historyTable td:nth-child(7) {
        min-width: 100px;
        /* Total: 50000 AED */
      }

      /* Stack table cells on very small screens */
      @media (max-width: 520px) {
        .history-table-wrapper {
          border-radius: 12px;
          margin: 0 -10px;
          /* Extend to screen edges */
          padding: 0 10px;
        }

        #historyTable {
          font-size: 0.75em;
          min-width: 700px;
        }

        #historyTable th,
        #historyTable td {
          padding: 8px 6px;
        }

        /* Reduce column widths further on very small screens */\n        #historyTable th:nth-child(1),\n        #historyTable td:nth-child(1) {\n          min-width: 72px;\n          /* Date: 2026-02-18 */\n        }\n\n        #historyTable th:nth-child(2),\n        #historyTable td:nth-child(2) {\n          min-width: 40px;\n          /* ID: #1000 */\n        }\n\n        #historyTable th:nth-child(3),\n        #historyTable td:nth-child(3) {\n          min-width: 85px;\n          /* Customer */\n        }\n\n        #historyTable th:nth-child(4),\n        #historyTable td:nth-child(4) {\n          min-width: 110px;\n          /* Order Status */\n        }\n\n        #historyTable th:nth-child(5),\n        #historyTable td:nth-child(5) {\n          min-width: 120px;\n          /* Payment Status */\n        }\n\n        #historyTable th:nth-child(6),\n        #historyTable td:nth-child(6) {\n          min-width: 95px;\n          /* Payment Method */\n        }\n\n        #historyTable th:nth-child(7),\n        #historyTable td:nth-child(7) {\n          min-width: 80px;\n          /* Total */\n        }
      }
    }

    body[dir="rtl"] .carousel-nav-left svg {
      transform: rotate(180deg);
    }

    body[dir="rtl"] .carousel-nav-right svg {
      transform: rotate(180deg);
    }

    .product-item:hover {
      transform: translateY(-5px) scale(1.02);
      border-color: #e0e7ff;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.08);
    }

    .product-item.selected {
      border-color: #22c55e;
      background: linear-gradient(145deg, #f0fdf4 0%, #dcfce7 100%);
      box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2), 0 4px 12px rgba(34, 197, 94, 0.15);
      transform: translateY(-2px);
    }

    /* Prevent layout shift when SweetAlert2 opens */
    html.swal2-shown,
    body.swal2-shown {
      overflow-y: scroll !important;
      padding-right: 0 !important;
    }

    body.modal-open .nav-scroll-button,
    html.activation-open .nav-scroll-button,
    body.activation-open .nav-scroll-button,
    body.swal2-shown .nav-scroll-button {
      opacity: 0 !important;
      pointer-events: none !important;
      visibility: hidden !important;
    }

    .product-item.selected::before {
      opacity: 1;
    }

    .product-thumb {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 8px;
      flex-shrink: 0;
    }

    .product-thumb img {
      flex-shrink: 0;
      transition: transform 0.3s ease;
    }

    .product-item:hover .product-thumb img {
      transform: scale(1.08);
    }

    .product-name {
      font-size: 0.85em;
      font-weight: 700;
      line-height: 1.3;
      margin-bottom: 6px;
      color: #1e293b;
      width: 100%;
      overflow-wrap: break-word;
      word-break: break-word;
      hyphens: auto;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      min-height: 2.6em;
      max-height: 2.6em;
      padding: 0 2px;
    }

    .product-price {
      font-size: 0.9em;
      color: #059669;
      font-weight: 800;
      margin-bottom: 4px;
      background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
      padding: 4px 10px;
      border-radius: 8px;
      border: 1px solid #a7f3d0;
      box-shadow: 0 1px 3px rgba(5, 150, 105, 0.1);
    }

    .product-stock {
      font-size: 0.72em;
      color: #64748b;
      margin-top: 0px;
      font-weight: 600;
      background: #f1f5f9;
      padding: 3px 8px;
      border-radius: 6px;
      display: inline-block;
    }

    .out-of-stock {
      opacity: 0.5;
      pointer-events: none;
      filter: grayscale(100%);
    }

    /* Navigation Scroll Buttons */
    .nav-scroll-button {
      position: fixed !important;
      right: 20px !important;
      width: 45px !important;
      height: 45px !important;
      background: linear-gradient(135deg, #F6A61F, #ff8c00) !important;
      border: none !important;
      border-radius: 50% !important;
      cursor: pointer !important;
      z-index: 2147483647 !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      box-shadow: 0 4px 20px rgba(246, 166, 31, 0.4) !important;
      transition: all 0.3s ease !important;
      opacity: 0.65 !important;
      visibility: visible !important;
      pointer-events: auto !important;
      user-select: none;
      touch-action: manipulation;
    }

    /* License modal visibility on small screens */
    #licenseModal .modal-content {
      max-width: 92vw !important;
      max-height: 90vh !important;
      overflow: auto !important;
      margin: 16px auto !important;
      border-radius: 16px !important;
      overflow: hidden !important;
    }

    /* Order modal visibility on small screens */
    #orderModal .modal-content {
      max-width: 92vw !important;
      max-height: calc(90vh - 120px) !important;
      overflow-y: auto !important;
      margin: 16px auto 110px auto !important;
      border-radius: 16px !important;
      overflow-x: hidden !important;
      padding-bottom: calc(80px + env(safe-area-inset-bottom)) !important;
    }

    /* Customer modal visibility on small screens */
    #custModal .modal-content {
      max-width: 92vw !important;
      max-height: calc(90vh - 120px) !important;
      overflow-y: auto !important;
      margin: 16px auto 110px auto !important;
      border-radius: 16px !important;
      overflow-x: hidden !important;
      padding-bottom: calc(80px + env(safe-area-inset-bottom)) !important;
    }

    body.modal-open .nav-scroll-button,
    html.activation-open .nav-scroll-button,
    body.activation-open .nav-scroll-button,
    body.swal2-shown .nav-scroll-button {
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none !important;
    }

    body.recent-open .nav-scroll-button {
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none !important;
    }

    .nav-scroll-button.hidden {
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none !important;
    }

    .nav-scroll-button:hover {
      opacity: 1 !important;
      transform: scale(1.15) !important;
      box-shadow: 0 6px 30px rgba(246, 166, 31, 0.6) !important;
    }

    .nav-scroll-button svg {
      width: 22px !important;
      height: 22px !important;
      fill: white !important;
    }

    .nav-scroll-up {
      bottom: 95px !important;
    }

    .nav-scroll-down {
      bottom: 35px !important;
    }

    /* RTL Support */
    body[dir="rtl"] .nav-scroll-button {
      right: auto !important;
      left: 20px !important;
    }

    /* Delivery Header Section - Desktop */
    .delivery-header-section {
      flex-wrap: wrap !important;
    }

    /* Mobile adjustments */
    @media (max-width: 768px) {
      .nav-scroll-button {
        display: none !important;
      }

      body[dir="rtl"] .nav-scroll-button {
        display: none !important;
      }

      .nav-scroll-up {
        display: none !important;
      }

      .nav-scroll-down {
        display: none !important;
      }


      @media (max-width: 768px) {
        .modal-content {
          padding-bottom: calc(150px + env(safe-area-inset-bottom));
          max-height: calc(90vh - 10px);
        }
      }

      .nav-scroll-button svg {
        width: 22px !important;
        height: 22px !important;
      }
    }

    /* Print: Show full product names without truncation */
    @media print {
      .product-name {
        -webkit-line-clamp: unset;
        line-clamp: unset;
        display: block;
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
      }

      /* Hide scroll buttons on print */
      .nav-scroll-button {
        display: none !important;
      }

      /* Hide browser chrome elements */
      @page {
        margin: 0.5cm;
      }

      /* Hide title and file path */
      title {
        display: none !important;
      }
    }

    /* --- TABLES --- */
    table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
      font-size: 0.95em;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
      margin-top: 20px;
    }

    /* Force cart table to respect column widths and prevent overflow */
    #posCartTable {
      table-layout: fixed;
      max-width: 100%;
    }

    /* NUCLEAR: Item-name cell can NEVER push the table wider */
    #posCartTable td:first-child,
    #printCartTable td:first-child {
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 0;          /* forces td to obey the col % from <th> */
    }

    thead tr {
      background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
      border-bottom: 3px solid #cbd5e1;
    }

    th {
      color: #334155;
      padding: 14px 10px;
      text-align: center;
      font-weight: 800;
      font-size: 0.75em;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    }

    body[dir="rtl"] th {
      text-align: center;
    }

    td {
      border-bottom: 1px solid #f1f5f9;
      padding: 14px 10px;
      vertical-align: middle;
      text-align: center;
      background: white;
      transition: background-color 0.2s ease;
    }

    tbody tr:hover td {
      background-color: #f8fafc;
    }

    tbody tr:last-child td {
      border-bottom: none;
    }

    .text-right {
      text-align: center;
      font-weight: 700;
      color: #059669;
    }

    /* Price column styling */
    tbody td:nth-child(3) {
      color: #0369a1;
      font-weight: 700;
      font-size: 0.9em;
    }

    /* Total column styling - highlighted */
    tbody td:nth-child(4) {
      color: #059669;
      font-weight: 800;
      font-size: 0.95em;
      background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%) !important;
      position: relative;
    }

    tbody td:nth-child(4)::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 3px;
      background: linear-gradient(180deg, #22c55e, #10b981);
    }

    /* Delete button column */
    tbody td:nth-child(5) button {
      transition: all 0.2s ease;
      padding: 6px;
      border-radius: 6px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
    }

    tbody td:nth-child(5) button:hover {
      background: #fee2e2 !important;
      transform: scale(1.1);
      box-shadow: 0 2px 6px rgba(239, 68, 68, 0.2);
    }

    tbody td:nth-child(5) button:active {
      transform: scale(0.95);
    }

    body[dir="rtl"] .text-right {
      text-align: center;
    }

    /* Cart item styling - improved text display */
    td strong {
      display: block;
      max-width: 100%;
      margin: 0 auto;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 0.95em;
      line-height: 1.4;
      font-weight: 800;
      color: #1e293b;
      padding: 2px 4px;
    }

    .item-desc {
      font-size: 0.72em;
      color: #64748b;
      font-style: italic;
      display: block;
      max-width: 100%;
      margin: 4px auto 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      background: #f8fafc;
      padding: 2px 8px;
      border-radius: 6px;
      font-weight: 500;
    }

    /* Print: Show full item names and descriptions */
    @media print {
      td strong {
        max-width: none;
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
      }

      .item-desc {
        max-width: none;
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
      }
    }

    /* Payment Status Stamp */
    .payment-stamp {
      margin-top: 15px;
      padding: 12px 20px;
      font-size: 1.4em;
      font-weight: 900;
      text-align: center;
      text-transform: uppercase;
      border: 4px solid;
      border-radius: 8px;
      transform: rotate(-5deg);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      letter-spacing: 2px;
      line-height: 1.2;
    }

    .payment-stamp.pending {
      background: #fee2e2;
      color: #991b1b;
      border-color: #dc2626;
    }

    .payment-stamp.cod {
      background: #fef3c7;
      color: #92400e;
      border-color: #f59e0b;
    }

    .payment-stamp.partial {
      background: #ffedd5;
      color: #9a3412;
      border-color: #ea580c;
    }

    .payment-stamp.paid {
      background: #d1fae5;
      color: #065f46;
      border-color: #10b981;
    }

    @media print {
      .payment-stamp {
        font-size: 1.6em;
        padding: 15px 25px;
        margin-top: 20px;
      }
    }

    /* --- BADGES & BUTTONS --- */
    .badge {
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 0.75em;
      font-weight: 700;
      text-transform: uppercase;
      display: inline-block;
    }

    .badge.source-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      line-height: 1;
      border-radius: 999px;
      padding: 4px 10px;
      text-transform: none;
    }

    .badge.source-badge img {
      display: block;
    }

    .source-icon-wrap {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      flex-shrink: 0;
    }

    .source-icon-instagram {
      background: rgba(255, 255, 255, 0.9);
      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
      padding: 2px;
    }

    .bg-new {
      background-color: #dbeafe;
      color: #1e40af;
    }

    .bg-vip {
      background-color: #fce7f3;
      color: #9d174d;
    }

    .bg-risk {
      background-color: #fee2e2;
      color: #991b1b;
    }

    .bg-lead {
      background-color: #fef3c7;
      color: #92400e;
    }

    .bg-junk {
      background-color: #e2e8f0;
      color: #475569;
    }

    .btn {
      padding: 12px 16px;
      border: none;
      border-radius: 12px;
      cursor: pointer;
      font-family: inherit;
      font-weight: 600;
      color: white;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      transition: all 0.3s ease;
      font-size: 0.95em;
      min-height: 44px;
      min-width: 100px;
    }

    .btn:hover {
      transform: translateY(-3px);
    }

    .btn:active {
      transform: translateY(-1px);
    }

    .btn-primary {
      background-color: #3b82f6;
      box-shadow: 0 4px 12px rgba(59, 130, 246, 0.35), 0 0 20px rgba(59, 130, 246, 0.2);
      animation: pulse-blue 2s ease-in-out infinite;
    }

    .btn-primary:hover {
      background-color: #2563eb;
      box-shadow: 0 8px 20px rgba(59, 130, 246, 0.5), 0 0 30px rgba(59, 130, 246, 0.4);
      animation: none;
    }

    .btn-success {
      background-color: #22c55e;
      box-shadow: 0 4px 12px rgba(34, 197, 94, 0.35);
    }

    .btn-success:hover {
      background-color: #16a34a;
      box-shadow: 0 8px 20px rgba(34, 197, 94, 0.5);
    }

    .btn-danger {
      background-color: #ef4444;
      box-shadow: 0 4px 12px rgba(239, 68, 68, 0.35), 0 0 20px rgba(239, 68, 68, 0.2);
      animation: pulse-red 2s ease-in-out infinite;
    }

    .btn-danger:hover {
      background-color: #dc2626;
      box-shadow: 0 8px 20px rgba(239, 68, 68, 0.5), 0 0 30px rgba(239, 68, 68, 0.4);
      animation: none;
    }

    .btn-wa {
      background-color: #25D366;
      box-shadow: 0 4px 12px rgba(37, 211, 102, 0.35);
    }

    .btn-wa:hover {
      background-color: #20b857;
      box-shadow: 0 8px 20px rgba(37, 211, 102, 0.5);
    }

    .btn-warning {
      background-color: #f59e0b;
      box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35);
    }

    .btn-warning:hover {
      background-color: #d97706;
      box-shadow: 0 8px 20px rgba(245, 158, 11, 0.5);
    }

    .btn-info {
      background-color: #06b6d4;
      box-shadow: 0 4px 12px rgba(6, 182, 212, 0.35);
    }

    .btn-info:hover {
      background-color: #0891b2;
      box-shadow: 0 8px 20px rgba(6, 182, 212, 0.5);
    }

    .btn-purple {
      background-color: #8b5cf6;
      box-shadow: 0 4px 12px rgba(139, 92, 246, 0.35);
    }

    .btn-purple:hover {
      background-color: #7c3aed;
      box-shadow: 0 8px 20px rgba(139, 92, 246, 0.5);
    }

    .btn-indigo {
      background-color: #6366f1;
      box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35);
    }

    .btn-indigo:hover {
      background-color: #4f46e5;
      box-shadow: 0 8px 20px rgba(99, 102, 241, 0.5);
    }

    .btn-dark {
      background-color: #334155;
      box-shadow: 0 4px 12px rgba(51, 65, 85, 0.35);
    }

    .btn-dark:hover {
      background-color: #1e293b;
      box-shadow: 0 8px 20px rgba(51, 65, 85, 0.5);
    }

    .btn-sm {
      padding: 8px 14px;
      font-size: 0.9em;
      min-height: auto;
    }

    @media (min-width: 769px) {
      .btn-sm {
        max-width: 140px;
      }
    }

    /* ===== History toolbar layout (desktop) ===== */
    .history-toolbar {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 12px;
      margin-bottom: 20px;
    }

    @media (min-width: 900px) {
      #customerStatsBar {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 10px;
        max-width: 100% !important;
      }

      #customerStatsBar span {
        flex: 1 1 auto;
      }
    }

    .history-controls {
      display: flex;
      gap: 10px;
      align-items: center;
      flex-wrap: wrap;
      /* important: allows wrap on smaller screens */
      justify-content: flex-end;
    }

    .hist-input {
      min-width: 120px;
    }

    .hist-date {
      display: flex;
      gap: 8px;
      align-items: center;
      white-space: nowrap;
    }

    .hist-print-btn {
      white-space: nowrap;
    }

    /* Mobile-friendly buttons */
    @media (max-width: 520px) {
      .btn {
        padding: 14px 12px;
        font-size: 0.9em;
        flex: 1;
        min-width: 0;
        justify-content: center;
      }

      .no-print[style*="display:flex"] {
        flex-direction: column;
        justify-content: stretch;
      }

      .no-print[style*="display:flex"] .btn {
        width: 100%;
      }
    }

    /* ===== Mobile: stack nicely ===== */
    @media (max-width: 768px) {
      .history-toolbar {
        flex-direction: column;
        align-items: stretch;
      }

      .history-controls {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 10px;
      }

      .hist-input {
        width: 100%;
        min-width: 0;
      }

      .hist-date {
        width: 100%;
        justify-content: space-between;
      }

      .hist-date label {
        min-width: 60px;
      }

      .hist-print-btn {
        font-size: 14px;
        padding: 12px 14px;
      }

      .hist-print-btn {
        width: 100%;
        justify-content: center;
      }
    }

    .product-stock {
      margin-top: 4px;
      font-size: 12px;
      color: #64748b;
    }

    .product-item.out-of-stock {
      opacity: 0.5;
      pointer-events: none;
      filter: grayscale(90%);
      position: relative;
    }

    .product-item.out-of-stock::after {
      content: '✗';
      position: absolute;
      top: 8px;
      right: 8px;
      background: #dc2626;
      color: white;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.75em;
      font-weight: bold;
      box-shadow: 0 2px 6px rgba(220, 38, 38, 0.3);
    }


    /* ===== ORDER STATUS BADGES ===== */
    .badge-status {
      border-radius: 999px;
      padding: 6px 10px;
      font-size: 12px;
      font-weight: 800;
    }

    .ord-pending {
      background: #e0f2fe;
      color: #075985;
    }

    /* blue */
    .ord-confirmed {
      background: #dcfce7;
      color: #166534;
    }

    /* green */
    .ord-preparing {
      background: #fef3c7;
      color: #92400e;
    }

    /* orange */
    .ord-out {
      background: #ede9fe;
      color: #5b21b6;
    }

    /* purple */
    .ord-delivered {
      background: #bbf7d0;
      color: #14532d;
    }

    /* strong green */
    .ord-cancelled {
      background: #fee2e2;
      color: #991b1b;
    }

    /* red */
    .ord-failed {
      background: #f1f5f9;
      color: #334155;
    }

    /* gray */
    /* ===== Order Status Colors ===== */
    .status-pill {
      display: inline-block;
      padding: 6px 10px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 800;
    }

    .st-pending {
      background: #e0f2fe;
      color: #075985;
    }

    /* blue */
    .st-confirmed {
      background: #dcfce7;
      color: #166534;
    }

    /* green */
    .st-preparing {
      background: #fef3c7;
      color: #92400e;
    }

    /* orange */
    .st-shipped {
      background: #ede9fe;
      color: #5b21b6;
    }

    /* purple */
    .st-delivered {
      background: #bbf7d0;
      color: #14532d;
    }

    /* strong green */
    .st-cancelled {
      background: #fee2e2;
      color: #991b1b;
    }

    /* red */

    /* --- DASHBOARD --- */
    .stats-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      margin-bottom: 30px;
    }

    .card {
      background: white;
      padding: 20px;
      border-radius: 12px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
      border-left: 4px solid #cbd5e1;
    }

    body[dir="rtl"] .card {
      border-left: none;
      border-right: 4px solid #cbd5e1;
    }

    .card h3 {
      margin: 0;
      color: #64748b;
      font-size: 0.8em;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .card .number {
      font-size: 1.8em;
      font-weight: 700;
      color: #0f172a;
      margin-top: 5px;
    }

    .health-bar {
      padding: 12px;
      border-radius: 8px;
      color: white;
      text-align: center;
      font-weight: bold;
      margin-bottom: 20px;
      font-size: 0.95em;
    }

    .health-good {
      background: #22c55e;
    }

    .health-warn {
      background: #f59e0b;
    }

    .health-bad {
      background: #ef4444;
    }

    .report-section {
      background: #fffbeb;
      border: 1px solid #fcd34d;
      padding: 20px;
      border-radius: 8px;
      margin-top: 20px;
    }

    .report-section h4 {
      margin-top: 0;
      color: #b45309;
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 1em;
    }

    .tips-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .tips-list li {
      padding: 8px 0;
      border-bottom: 1px dashed #fcd34d;
      color: #78350f;
      font-size: 0.95em;
    }

    /* --- HISTORY SUMMARY --- */
    .history-summary {
      display: flex;
      gap: 15px;
      margin-bottom: 20px;
      background: #f1f5f9;
      padding: 15px;
      border-radius: 8px;
      border: 1px solid #e2e8f0;
    }

    .h-sum-item {
      flex: 1;
      text-align: center;
      border-right: 1px solid #cbd5e1;
    }

    body[dir="rtl"] .h-sum-item {
      border-right: none;
      border-left: 1px solid #cbd5e1;
    }

    .h-sum-item:last-child {
      border: none;
      border-left: none;
    }

    .h-sum-val {
      font-weight: bold;
      font-size: 1.2em;
      color: #334155;
    }

    .h-sum-lbl {
      font-size: 0.8em;
      color: #64748b;
      text-transform: uppercase;
    }

    /* --- CUSTOMER CARDS --- */
    .customers-list {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
      gap: 16px;
      margin-top: 20px;
    }

    .customer-card {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 16px;
      transition: all 0.3s ease;
      position: relative;
      cursor: pointer;
    }

    .customer-card:hover {
      border-color: #F6A61F;
      box-shadow: 0 4px 12px rgba(246, 166, 31, 0.2);
      transform: translateY(-2px);
    }

    .customer-card-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 12px;
    }

    .customer-card-name {
      font-size: 1.1em;
      font-weight: 700;
      color: #1e293b;
      margin-bottom: 4px;
    }

    .customer-card-city {
      font-size: 0.85em;
      color: #64748b;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .customer-card-stats {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin: 12px 0;
      padding: 12px;
      background: #f8fafc;
      border-radius: 8px;
    }

    .customer-stat {
      text-align: center;
    }

    .customer-stat-value {
      font-size: 1.1em;
      font-weight: 700;
      color: #334155;
    }

    .customer-stat-label {
      font-size: 0.75em;
      color: #64748b;
      text-transform: uppercase;
      margin-top: 2px;
    }

    .customer-card-contact {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-bottom: 12px;
    }

    .customer-contact-item {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 0.9em;
      color: #475569;
    }

    .customer-card-actions {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
      margin-top: 12px;
    }

    .customer-action-btn {
      padding: 8px 10px;
      border: 1.5px solid #cbd5e1;
      background: #ffffff;
      border-radius: 8px;
      font-size: 0.85em;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
    }

    .customer-action-btn:hover {
      background: #f1f5f9;
      border-color: #94a3b8;
      transform: translateY(-1px);
    }

    .customer-action-btn.primary {
      background: #3b82f6;
      color: white;
      border-color: #3b82f6;
      box-shadow: 0 0 15px rgba(59, 130, 246, 0.4);
    }

    .customer-action-btn.primary:hover {
      background: #2563eb;
      border-color: #2563eb;
      box-shadow: 0 0 20px rgba(37, 99, 235, 0.6);
    }

    .customer-action-btn.info {
      background: #06b6d4;
      color: white;
      border-color: #06b6d4;
      box-shadow: 0 0 15px rgba(6, 182, 212, 0.4);
    }

    .customer-action-btn.info:hover {
      background: #0891b2;
      border-color: #0891b2;
      box-shadow: 0 0 20px rgba(8, 145, 178, 0.6);
    }

    .customer-action-btn.success {
      background: #16a34a;
      color: white;
      border-color: #16a34a;
      box-shadow: 0 0 15px rgba(22, 163, 74, 0.4);
    }

    .customer-action-btn.success:hover {
      background: #15803d;
      border-color: #15803d;
      box-shadow: 0 0 20px rgba(21, 128, 61, 0.6);
    }

    .customer-action-btn.warning {
      background: #f59e0b;
      color: white;
      border-color: #f59e0b;
      box-shadow: 0 0 15px rgba(245, 158, 11, 0.4);
    }

    .customer-action-btn.warning:hover {
      background: #d97706;
      border-color: #d97706;
      box-shadow: 0 0 20px rgba(217, 119, 6, 0.6);
    }

    .customer-action-btn.dark {
      background: #334155;
      color: white;
      border-color: #334155;
      box-shadow: 0 0 15px rgba(51, 65, 85, 0.4);
    }

    .customer-action-btn.dark:hover {
      background: #1e293b;
      border-color: #1e293b;
      box-shadow: 0 0 20px rgba(30, 41, 59, 0.6);
    }

    .customer-action-btn.danger {
      background: #dc2626;
      color: white;
      border-color: #dc2626;
      box-shadow: 0 0 16px rgba(220, 38, 38, 0.45);
    }

    .customer-action-btn.danger:hover {
      background: #b91c1c;
      border-color: #b91c1c;
      box-shadow: 0 0 22px rgba(185, 28, 28, 0.65);
    }

    .customer-profile-footer-actions {
      display: flex;
      justify-content: flex-end;
      margin-top: 8px;
    }

    .customer-profile-delete-btn {
      min-width: 180px;
      padding: 10px 16px;
      gap: 8px;
      font-size: 0.92em;
      font-weight: 700;
    }

    body[dir="rtl"] .customer-profile-footer-actions {
      justify-content: flex-start;
    }

    /* Mobile optimization */
    @media (max-width: 768px) {
      .customers-list {
        grid-template-columns: 1fr;
      }

      .customer-card-actions {
        grid-template-columns: repeat(2, 1fr);
      }

      .customer-profile-delete-btn {
        width: 100%;
      }
    }

    @media (max-width: 520px) {
      .customer-card {
        padding: 12px;
      }

      .customer-card-name {
        font-size: 1em;
      }

      .customer-action-btn {
        font-size: 0.8em;
        padding: 6px 8px;
      }
    }

    /* --- MODAL --- */
    .modal {
      display: none;
      position: fixed;
      z-index: 2000;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      padding: calc(env(safe-area-inset-top) + 12px) 12px calc(env(safe-area-inset-bottom) + 12px) 12px;
      background-color: rgba(0, 0, 0, 0);
      backdrop-filter: blur(0px);
      transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), backdrop-filter 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      align-items: center;
      justify-content: center;
      overflow: auto;
      animation: modalBackdropFadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    @keyframes modalBackdropFadeIn {
      from {
        background-color: rgba(0, 0, 0, 0);
        backdrop-filter: blur(0px);
      }

      to {
        background-color: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(5px);
      }
    }

    .modal.show {
      background-color: rgba(0, 0, 0, 0.6);
      backdrop-filter: blur(5px);
    }

    .modal-content {
      background: #ffffff;
      margin: 0 auto;
      padding: 24px;
      border-radius: 16px;
      width: 100%;
      max-width: 700px;
      max-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px);
      overflow-y: auto;
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
      position: relative;
      opacity: 0;
      transform: translateY(-40px) scale(0.9);
      transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
      animation: modalSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
      border: 1px solid #e2e8f0;
    }

    @media (max-width: 640px) {
      .modal {
        padding: calc(env(safe-area-inset-top) + 10px) 10px calc(env(safe-area-inset-bottom) + 10px) 10px;
      }

      .modal-content {
        padding: 16px;
        border-radius: 14px;
      }

      /* Monthly Expense modal: fit screen */
      #expenseModal .modal-content {
        max-width: 420px !important;
      }

      #expenseModal .expense-panel {
        padding: 12px !important;
      }

      #expenseModal .form-grid-2 {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
      }

      #expenseModal .expense-actions {
        width: 100%;
        flex-direction: column;
        align-items: stretch !important;
        justify-content: flex-end;
        gap: 10px !important;
      }

      #expenseModal .expense-actions .btn {
        width: 100% !important;
        height: 44px;
      }
    }

    @keyframes modalSlideIn {
      from {
        opacity: 0;
        transform: translateY(-40px) scale(0.9);
      }

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

    .modal.show .modal-content {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    .close-modal {
      position: sticky;
      top: 8px;
      right: 8px;
      float: right;
      font-size: 22px;
      cursor: pointer;
      color: #64748b;
      transition: all 0.2s ease;
      z-index: 2;
      background: none;
      padding: 0;
      width: 32px;
      height: 32px;
      border-radius: 8px;
      line-height: 32px;
      text-align: center;
      box-shadow: none;
      border: none;
      font-weight: 400;
    }

    .close-modal:hover {
      color: #ef4444;
      background: #f1f5f9;
      transform: none;
      box-shadow: none;
      border-color: transparent;
    }

    .close-modal:active {
      transform: scale(0.98);
    }

    /* Customer profile modal: floating close button (sticky while scrolling content) */
    #custModal .close-modal,
    #orderModal .close-modal {
      position: sticky;
      top: 8px;
      right: 0;
      float: none;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: auto;
      margin-right: 8px;
      margin-bottom: -36px;
      width: 36px;
      height: 36px;
      line-height: 36px;
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.92);
      color: #64748b;
      font-size: 22px;
      font-weight: 500;
      border: 1px solid #e2e8f0;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
      backdrop-filter: blur(6px);
      z-index: 3;
    }

    #custModal .close-modal:hover,
    #orderModal .close-modal:hover {
      background: #ffffff;
      color: #ef4444;
      border-color: #fecaca;
    }

    body[dir="rtl"] #custModal .close-modal,
    body[dir="rtl"] #orderModal .close-modal {
      float: none;
      right: auto;
      left: 0;
      margin-left: 8px;
      margin-right: auto;
    }

    /* Modal Header Styling */
    .modal h2,
    .modal h3 {
      color: #1e293b;
      font-weight: 700;
      margin-bottom: 16px;
      padding-bottom: 12px;
      border-bottom: 2px solid #f1f5f9;
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 1.4em;
    }

    .modal h2 span:first-child,
    .modal h3 span:first-child {
      font-size: 1.2em;
      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
    }

    /* Modal form controls: match Task modal */
    .modal .modal-content label {
      font-weight: 600;
      color: #334155;
      font-size: 0.9em;
    }

    .modal .modal-content input,
    .modal .modal-content select,
    .modal .modal-content textarea {
      border: 2px solid #cbd5e1 !important;
      border-radius: 8px !important;
      font-size: 0.95em !important;
      transition: all 0.2s ease !important;
      background-color: #ffffff !important;
    }

    .modal .modal-content input,
    .modal .modal-content textarea {
      padding: 10px 12px !important;
    }

    .modal .modal-content select {
      min-height: 40px;
    }

    .modal .modal-content input:focus,
    .modal .modal-content select:focus,
    .modal .modal-content textarea:focus {
      outline: none;
      border-color: #F6A61F !important;
      box-shadow: 0 0 0 3px rgba(246, 166, 31, 0.15) !important;
    }

    .modal .modal-content input:hover,
    .modal .modal-content select:hover,
    .modal .modal-content textarea:hover {
      border-color: #F6A61F !important;
      box-shadow: 0 0 0 2px rgba(246, 166, 31, 0.1) !important;
    }

    .modal .modal-content .form-grid-2,
    .modal .modal-content .form-grid-3 {
      gap: 15px !important;
    }

    .modal .modal-content button,
    .modal .modal-content .btn {
      border-radius: 8px !important;
      padding: 10px 16px !important;
      font-size: 0.95em !important;
      font-weight: 700 !important;
      transition: all 0.2s ease !important;
    }

    .modal .modal-content button:hover,
    .modal .modal-content .btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    }

    .modal .modal-content .modal-icon-btn {
      padding: 0 !important;
      width: 32px !important;
      height: 32px !important;
      min-width: 32px !important;
      border-radius: 8px !important;
      font-size: 1.5em !important;
      background: none !important;
      box-shadow: none !important;
    }

    .modal .modal-content .modal-icon-btn:hover {
      background: #f1f5f9 !important;
      transform: none !important;
      box-shadow: none !important;
    }

    .order-details-actions {
      display: flex;
      flex-wrap: nowrap;
      justify-content: center;
      align-items: stretch;
      gap: 10px;
    }

    .order-details-actions .btn {
      flex: 1 1 0;
      min-width: 0;
    }

    @media (max-width: 768px) {
      .order-details-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .order-details-actions .btn {
        flex: initial;
      }
    }

    /* Modal Scrollbar */
    .modal-content::-webkit-scrollbar {
      width: 10px;
    }

    .modal-content::-webkit-scrollbar-track {
      background: #f1f5f9;
      border-radius: 10px;
    }

    .modal-content::-webkit-scrollbar-thumb {
      background: linear-gradient(135deg, #F6A61F 0%, #f59e0b 100%);
      border-radius: 10px;
      border: 2px solid #f1f5f9;
    }

    .modal-content::-webkit-scrollbar-thumb:hover {
      background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    }

    /* Modal Backdrop Click Animation */
    .modal::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: -1;
    }

    /* Modal Mobile Responsiveness */
    @media (max-width: 768px) {
      .modal-content {
        margin: 2% auto;
        padding: 25px 20px;
        border-radius: 16px;
        max-height: 95vh;
      }

      .modal h2,
      .modal h3 {
        font-size: 1.2em;
        margin-bottom: 15px;
        padding-bottom: 12px;
      }

      .close-modal {
        font-size: 24px;
        padding: 4px 10px;
      }
    }

    @media (max-width: 520px) {
      .modal-content {
        width: 98%;
        margin: 1% auto;
        padding: 20px 15px;
        border-radius: 12px;
      }

      .modal h2,
      .modal h3 {
        font-size: 1.1em;
        gap: 8px;
      }
    }

    .profile-header {
      display: flex;
      align-items: center;
      gap: 20px;
      margin-bottom: 20px;
      border-bottom: 1px solid #f1f5f9;
      padding-bottom: 20px;
    }

    .profile-avatar {
      width: 60px;
      height: 60px;
      background: #3b82f6;
      color: white;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5em;
      font-weight: bold;
    }

    /* Order Timeline Items */
    .order-timeline-item {
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .order-timeline-item:hover {
      transform: translateX(4px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    }

    /* --- SETTINGS --- */
    .settings-box {
      background: #fff;
      padding: 20px;
      border-radius: 12px;
      margin-bottom: 20px;
      border: 1px solid #e2e8f0;
    }

    .logo-preview {
      width: 80px;
      height: 80px;
      border: 2px dashed #cbd5e1;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      margin-top: 10px;
      border-radius: 8px;
    }

    .logo-preview img {
      max-width: 100%;
      max-height: 100%;
    }

    /* --- DANGER ZONE --- */
    .danger-zone-box {
      border: 2px solid #fee2e2 !important;
      background: #fef2f2 !important;
    }

    .danger-zone-title {
      color: #dc2626;
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 0 0 15px 0;
      font-size: 1.1em;
    }

    .danger-zone-content {
      background: white;
      padding: 15px;
      border-radius: 8px;
      border: 1px solid #fecaca;
    }

    .danger-zone-header {
      margin-bottom: 15px;
    }

    .danger-zone-header h4 {
      margin: 0 0 8px 0;
      color: #1e293b;
      font-size: 0.95em;
    }

    .danger-zone-header p {
      margin: 0;
      color: #64748b;
      font-size: 0.85em;
      line-height: 1.5;
    }

    .danger-zone-header strong {
      color: #dc2626;
    }

    .danger-zone-actions {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .danger-action-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      padding: 10px;
      border-radius: 6px;
      border: 1px solid #e2e8f0;
    }

    .clear-data-item {
      background: #f8fafc;
      border-color: #e2e8f0;
    }

    .reset-db-item {
      background: #fef2f2;
      border-color: #fecaca;
    }

    .danger-action-text {
      flex: 1;
      min-width: 0;
    }

    .danger-action-title {
      font-weight: 700;
      color: #1e293b;
      margin-bottom: 4px;
      font-size: 0.9em;
    }

    .danger-action-title.reset {
      color: #dc2626;
    }

    .danger-action-desc {
      font-size: 0.8em;
      color: #64748b;
      line-height: 1.4;
    }

    .danger-btn {
      white-space: nowrap;
      flex-shrink: 0;
      color: white;
      font-size: 0.85em;
      padding: 8px 16px;
    }

    .clear-data-btn {
      background: #f97316;
    }

    .clear-data-btn:hover {
      background: #ea580c;
    }

    .reset-db-btn {
      background: #dc2626;
    }

    .reset-db-btn:hover {
      background: #b91c1c;
    }

    .danger-zone-tip {
      margin-top: 12px;
      padding: 10px;
      background: #fffbeb;
      border-left: 4px solid #fbbf24;
      border-radius: 4px;
      font-size: 0.85em;
      line-height: 1.5;
    }

    .danger-zone-tip strong {
      color: #92400e;
    }

    .danger-zone-tip span {
      color: #78350f;
    }

    /* --- TOTALS CARD --- */
    .totals-card {
      background: #f8fafc;
      padding: 20px;
      border-radius: 12px;
      width: 100%;
      max-width: 400px;
      border: 1px solid #e2e8f0;
      box-sizing: border-box;
    }

    .totals-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-bottom: 12px;
      align-items: center;
      font-size: 0.9em;
    }

    .totals-row label {
      margin: 0;
      font-weight: normal;
      color: #475569;
      text-align: left;
    }

    .totals-row span,
    .totals-row input,
    .totals-row>div {
      text-align: right;
      font-weight: 600;
      color: #334155;
    }

    .final-row {
      border-top: 2px solid #cbd5e1;
      margin-top: 12px;
      padding-top: 12px;
      font-weight: 800;
      font-size: 1.2em;
      color: #0f172a;
    }

    @media (max-width: 480px) {
      .totals-card {
        padding: 16px;
      }

      .totals-row {
        grid-template-columns: 1fr;
        gap: 8px;
        margin-bottom: 10px;
      }

      .totals-row label {
        text-align: left;
      }

      .totals-row span,
      .totals-row input,
      .totals-row>div {
        text-align: left;
      }

      .final-row {
        font-size: 1.1em;
      }
    }

    /* PRODUCT CARD TITLE VISIBILITY FIX */
    .product-card {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
    }

    .product-card img,
    .product-card .product-img {
      flex: 0 0 auto;
    }

    /* Title */
    .product-card .product-title,
    .product-card h4,
    .product-name {
      flex: 0 0 auto;

      /* readable */
      font-size: 14px;
      line-height: 1.2;
      font-weight: 700;
      color: #111;
      margin: 6px 0 4px;
      word-break: break-word;

      /* 2-line clamp */
      display: -webkit-box;
      display: box;
      /* optional fallback */

      -webkit-line-clamp: 2;
      line-clamp: 2;
      /* ← ADD THIS */

      -webkit-box-orient: vertical;
      box-orient: vertical;
      /* optional */

      overflow: hidden;


      /* reserve space for 2 lines so it won't disappear */
      min-height: calc(1.2em * 2);
    }

    @media (max-width: 600px) {

      .product-card .product-title,
      .product-card h4,
      .product-name {
        font-size: 13px;
        margin: 6px 0 3px;
      }
    }

    .products-grid,
    .products-list,
    #productsGrid,
    #productGrid,
    #posProducts {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      /* 2 columns mobile */
      gap: 10px;
    }

    @media (min-width: 900px) {

      .products-grid,
      .products-list,
      #productsGrid,
      #productGrid,
      #posProducts {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        /* desktop */
      }
    }

    .product-card {
      width: auto;
      /* let grid control it */
    }

    .products-wrapper,
    .products-container {
      max-width: 100%;
      overflow-x: auto;
      /* allow scroll if content is wider */
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
    }

    /* grid must be allowed to shrink inside parent */
    .products-grid,
    .products-list,
    #productsGrid,
    #productGrid,
    #posProducts {
      width: 100%;
      box-sizing: border-box;
    }

    /* KEY: grid children can shrink */
    .products-grid>*,
    .products-list>*,
    #productsGrid>*,
    #productGrid>*,
    #posProducts>* {
      min-width: 0;
    }

    /* Make sure images/icons never overflow card */
    .product-card img,
    .product-card .product-img {
      max-width: 100%;
      height: auto;
      display: block;
    }

    /* --- MOBILE --- */
    @media (max-width: 768px) {
      body {
        flex-direction: column;
        height: auto;
        overflow: visible;
        padding-bottom: 70px;
      }

      .sidebar {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: auto;
        flex-direction: row;
        overflow-x: hidden;
        overflow-y: hidden;
        padding: 6px 4px;
        background: white;
        border-top: none;
        z-index: 5000;
        box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.05);
        order: 2;
        justify-content: space-evenly;
        gap: 2px;
        flex-wrap: nowrap;
      }

      body[dir="rtl"] .sidebar {
        border-left: none;
        padding: 6px 4px;
      }

      .brand {
        display: none;
      }

      /* MOBILE NAV — ICONS ONLY, FLEXIBLE WIDTH */
      .nav-item {
        flex: 1 1 0;
        min-width: 0;
        max-width: none;
        height: 56px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        padding: 0 2px;
        margin-bottom: 0;
        font-size: 0;
        color: #64748b;
        background: transparent !important;
        border: 2px solid transparent;
        transform: none !important;
        box-shadow: none;
      }

      .nav-item:hover {
        transform: none;
        box-shadow: none;
      }

      .nav-item > span[data-i18n] {
        font-size: 0;
      }

      .nav-item > span[data-i18n]::first-letter {
        font-size: clamp(18px, 5vw, 22px);
      }

      /* Nav items with icon images: show img even when font-size is 0 */
      .nav-item > span[data-i18n] > img.nav-icon-img {
        width: clamp(18px, 5vw, 22px) !important;
        height: clamp(18px, 5vw, 22px) !important;
        display: inline-block !important;
        vertical-align: middle;
        font-size: 16px !important; /* establish own context */
        line-height: 1 !important;
      }

      .nav-item.active {
        background: rgba(246, 166, 31, 0.12) !important;
        color: #F6A61F;
        transform: none !important;
        box-shadow: none;
        border-color: rgba(246, 166, 31, 0.35);
      }

      .main-content {
        padding: 15px;
        order: 1;
      }

      .form-grid-3,
      .form-grid-2,
      .stats-grid,
      .history-summary {
        grid-template-columns: 1fr;
        display: grid;
        gap: 10px;
      }

      .history-summary {
        flex-direction: column;
      }

      .h-sum-item {
        border-right: none;
        border-bottom: 1px solid #eee;
        padding-bottom: 10px;
        margin-bottom: 5px;
      }

      .product-grid {
        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
      }

      /* Danger Zone - Mobile Responsive */
      .danger-zone-box {
        padding: 12px !important;
      }

      .danger-zone-title {
        font-size: 1em !important;
        margin-bottom: 10px !important;
      }

      .danger-zone-content {
        padding: 10px !important;
      }

      .danger-zone-header h4 {
        font-size: 0.9em !important;
      }

      .danger-zone-header p {
        font-size: 0.8em !important;
      }

      .danger-action-item {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 8px !important;
        gap: 8px !important;
      }

      .danger-action-text {
        width: 100%;
      }

      .danger-action-title {
        font-size: 0.85em !important;
      }

      .danger-action-desc {
        font-size: 0.75em !important;
      }

      .danger-btn {
        width: 100% !important;
        margin-top: 4px;
        padding: 10px 16px !important;
        font-size: 0.9em !important;
      }

      .danger-zone-tip {
        padding: 8px !important;
        font-size: 0.8em !important;
      }

      /* Action Buttons - Make them fit in one line */
      .btn-sm {
        padding: 10px 16px !important;
        font-size: 0.85em !important;
        min-height: 38px !important;
        max-width: none !important;
        white-space: nowrap !important;
      }

      .btn-sm span {
        font-size: 0.95em;
      }

      button[data-i18n="btn_load_customer"] {
        padding: 9px 14px !important;
        min-width: 118px;
      }

      .customer-actions {
        flex-wrap: wrap;
      }

      .customer-actions button[data-i18n="btn_load_customer"] {
        order: 1;
      }

      .customer-actions button[data-i18n="btn_recent"] {
        order: 2;
      }

      .customer-actions button[data-i18n="btn_new_order"],
      .customer-actions button[data-i18n="btn_new_customer"] {
        order: 3;
        flex-basis: 100%;
        align-self: flex-start;
        margin-top: 4px;
      }

      .hold-btn-wrapper {
        flex-shrink: 0;
      }

      /* Add Items Header Section - Stack buttons below on mobile */
      .grid-container>div:first-child {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
      }

      .grid-container>div:first-child>div {
        width: 100% !important;
        justify-content: flex-start !important;
      }

      .product-grid-wrapper {
        padding: 0 28px;
      }

      .product-grid {
        gap: 8px;
        scroll-padding: 4px;
        scroll-snap-type: x proximity;
        scroll-behavior: auto;
      }

      .product-item {
        min-width: calc((100% - 8px) / 2);
        max-width: calc((100% - 8px) / 2);
        min-height: 145px;
        padding: 10px 6px;
        scroll-snap-stop: normal;
        border-radius: 14px;
      }

      .product-name {
        font-size: 0.72em;
        margin-bottom: 4px;
        min-height: 2.4em;
        max-height: 2.4em;
        line-height: 1.2;
      }

      .product-price {
        font-size: 0.8em;
        margin-bottom: 3px;
        padding: 3px 8px;
      }

      .product-stock {
        font-size: 0.65em;
        margin-top: 0px;
        padding: 2px 6px;
      }

      .carousel-nav {
        width: 32px;
        height: 32px;
      }

      .carousel-nav svg {
        width: 16px;
        height: 16px;
      }

      .carousel-nav-left {
        left: 2px;
      }

      .carousel-nav-right {
        right: 2px;
      }

      /* Copy Delivery Button Mobile */
      .copy-delivery-btn {
        width: 100% !important;
        margin-top: 10px !important;
        padding: 10px 12px !important;
        font-size: 0.8em !important;
      }

      /* Delivery Header Section Mobile */
      .delivery-header-section {
        flex-direction: column !important;
        align-items: stretch !important;
        flex-wrap: wrap !important;
      }

      .delivery-text-container {
        justify-content: center !important;
        text-align: center;
      }

      table th:nth-child(5),
      table td:nth-child(5) {
        display: none;
      }

      .totals-card {
        width: 100%;
      }

      .container {
        padding: 15px;
      }

      /* POS Header Mobile Optimization */
      .pos-header-card {
        padding: 10px 12px !important;
        gap: 8px;
        flex-wrap: nowrap !important;
        flex-direction: row !important;
        align-items: center !important;
      }

      .pos-header-card h1 {
        font-size: 1em !important;
      }

      .pos-header-card p {
        font-size: 0.7em !important;
      }

      .pos-date-container {
        padding: 5px 8px !important;
        width: auto !important;
        max-width: none !important;
      }

      .pos-date-container input {
        font-size: 0.95em !important;
        width: auto !important;
      }

      /* Customer Details Header Mobile Alignment */
      #custDetailsHeader {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 12px !important;
        margin-bottom: 15px !important;
        height: auto !important;
        padding: 0 !important;
        min-height: 40px !important;
      }

      #custDetailsHeader>div:first-child {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        flex-wrap: nowrap !important;
        min-width: 0 !important;
        flex: 0 1 auto !important;
        height: 100% !important;
      }

      #custDetailsHeader h4 {
        margin: 0 !important;
        font-size: 0.95em !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        flex-shrink: 0 !important;
        color: #334155 !important;
        line-height: 1.2 !important;
      }

      #custDetailsHeader .badge {
        flex-shrink: 0 !important;
        font-size: 0.75em !important;
        padding: 4px 6px !important;
        white-space: nowrap !important;
        line-height: 1 !important;
        height: fit-content !important;
      }

      #custDetailsHeader>div:last-child {
        display: flex !important;
        gap: 8px !important;
        align-items: center !important;
        flex-shrink: 0 !important;
        height: 100% !important;
      }

      /* Mobile Dropdown Enhancements */
      .country-select-list,
      .emirates-select,
      #custTagPos,
      #deliveryInstructions,
      #custCountryCode,
      #taxType,
      #discType,
      select {
        font-size: 1em;
        padding: 12px;
        min-height: 44px;
        max-width: 100%;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23F6A61F' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 12px center;
        background-size: 12px;
        padding-right: 36px;
      }

      .input-group {
        flex-direction: row;
        gap: 8px;
        display: flex;
      }

      .input-group select {
        border-radius: 8px;
        border: 2px solid #cbd5e1;
        width: 100px !important;
        min-width: 100px !important;
        max-width: 100px !important;
        margin-bottom: 0;
        flex-shrink: 0;
        background-color: white;
        padding: 10px 6px !important;
        font-size: 0.85em !important;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
      }

      .input-group select:focus {
        outline: none;
        border-color: #F6A61F !important;
        box-shadow: 0 0 0 3px rgba(246, 166, 31, 0.15) !important;
        background-color: white !important;
      }

      .input-group input {
        border-radius: 8px;
        flex: 1;
        border: 2px solid #cbd5e1;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
      }

      .input-group input:focus {
        outline: none;
        border-color: #F6A61F !important;
        box-shadow: 0 0 0 3px rgba(246, 166, 31, 0.15) !important;
      }
    }

    .status-pill.pill-bump {
      animation: pillBump 220ms ease;
    }

    @keyframes pillBump {
      0% {
        transform: scale(1);
      }

      50% {
        transform: scale(1.07);
      }

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

    /* POS Header Card */
    .pos-header-card {
      flex-wrap: nowrap !important;
    }

    .pos-date-container {
      flex-shrink: 0;
      width: auto !important;
    }

    .history-controls {
      display: flex;
      gap: 10px;
      align-items: end;
      flex-wrap: wrap;
      /* important for mobile */
    }

    .hist-input {
      height: 40px;
      padding: 8px 36px 8px 10px;
      border-radius: 8px;
      border: 2px solid #cbd5e1;
      min-width: 160px;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      background-color: white;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23F6A61F' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 12px center;
      background-size: 12px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .hist-input:hover {
      border-color: #F6A61F;
      background-color: #fffbf0;
    }

    .hist-input:focus {
      outline: none;
      border-color: #F6A61F;
      box-shadow: 0 0 0 3px rgba(246, 166, 31, 0.15);
      background-color: white;
    }

    #histSearch {
      flex: 2;
      min-width: 220px;
      background-image: none !important;
      padding: 8px 12px 8px 10px !important;
    }

    #statusFilter {
      flex: 1;
      min-width: 170px;
    }

    .hist-date {
      display: flex;
      flex-direction: column;
      gap: 6px;
      min-width: 160px;
    }

    .hist-print-btn {
      height: 40px;
      white-space: nowrap;
    }

    .item-desc {
      font-size: 12px;
      color: #666;
      margin-top: 2px;
    }

    /* small phones */
    @media (max-width: 520px) {

      #histSearch,
      #statusFilter,
      .hist-date {
        flex: 1 1 100%;
        min-width: 100%;
      }

      .hist-print-btn {
        width: 100%;
      }

      /* Fix discount row - keep on same line */
      .discount-row>div {
        gap: 6px !important;
      }

      .discount-row .summary-label {
        font-size: 0.8em;
        white-space: nowrap;
      }

      .discount-row .summary-value {
        min-width: 70px;
        font-size: 0.85em;
      }

      #discountInput {
        width: 45px !important;
        padding: 4px 6px !important;
        font-size: 0.85em !important;
      }

      #discType {
        width: 70px !important;
        padding: 6px 8px !important;
        font-size: 0.9em !important;
        min-height: 36px;
      }
    }

    /* ===============================
   POS ENHANCEMENTS
   =============================== */

    /* Customer Autocomplete Dropdown */
    .customer-autocomplete {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background: white;
      border: 1px solid #e2e8f0;
      border-top: none;
      border-radius: 0 0 12px 12px;
      max-height: 220px;
      overflow-y: auto;
      z-index: 1000;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
      display: none;
      opacity: 0;
      transform: translateY(-10px) scale(0.98);
      transition: opacity 0.25s ease, transform 0.25s ease;
    }

    .customer-autocomplete.show {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    .autocomplete-item {
      padding: 12px 14px;
      cursor: pointer;
      border-bottom: 1px solid #f1f5f9;
      display: flex;
      justify-content: space-between;
      align-items: center;
      transition: background 0.15s ease, padding-left 0.15s ease;
    }

    .autocomplete-item:hover {
      background: linear-gradient(90deg, #f0f9ff 0%, #f8fafc 100%);
      padding-left: 18px;
    }

    .autocomplete-item:last-child {
      border-bottom: none;
      border-radius: 0 0 12px 12px;
    }

    .autocomplete-name {
      font-weight: 600;
      color: #1e293b;
    }

    .autocomplete-phone {
      font-size: 0.85em;
      color: #64748b;
    }

    .autocomplete-tag {
      font-size: 0.75em;
      padding: 2px 6px;
      border-radius: 4px;
    }

    /* Recent Customers Dropdown */
    .recent-dropdown {
      position: absolute;
      top: 100%;
      right: 0;
      background: white;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      min-width: 280px;
      max-height: 300px;
      overflow-y: auto;
      z-index: 1000;
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
      display: none;
      opacity: 0;
      transform: translateY(-10px) scale(0.95);
      transition: opacity 0.25s ease, transform 0.25s ease;
    }

    .recent-dropdown.show {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    /* Mobile: Make recent dropdown full width and centered */
    @media (max-width: 520px) {
      .recent-dropdown {
        position: fixed;
        top: auto;
        bottom: 80px;
        left: 10px;
        right: 10px;
        min-width: auto;
        max-height: 50vh;
        border-radius: 12px;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2);
      }
    }

    .recent-header {
      padding: 12px 14px;
      background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
      border-bottom: 1px solid #e2e8f0;
      font-weight: 700;
      font-size: 0.9em;
      color: #475569;
      border-radius: 12px 12px 0 0;
    }

    .recent-item {
      padding: 12px 14px;
      cursor: pointer;
      border-bottom: 1px solid #f1f5f9;
      transition: background 0.15s ease, padding-left 0.15s ease;
    }

    .recent-item:hover {
      background: linear-gradient(90deg, #f0f9ff 0%, #f8fafc 100%);
      padding-left: 18px;
    }

    .recent-item:last-child {
      border-bottom: none;
      border-radius: 0 0 12px 12px;
    }

    /* Product Search */
    .product-search-box {
      margin-bottom: 12px;
      position: relative;
    }

    .product-search-box input {
      width: 100%;
      padding: 10px 12px 10px 36px;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      font-size: 0.9em;
    }

    .product-search-box::before {
      content: "🔍";
      position: absolute;
      left: 10px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 1em;
    }

    /* Held Orders Badge */
    .held-orders-badge {
      position: absolute;
      top: -6px;
      right: -6px;
      background: #ef4444;
      color: white;
      font-size: 11px;
      font-weight: 700;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .hold-btn-wrapper {
      position: relative;
      display: inline-block;
    }

    /* Held Orders Modal List */
    .held-order-item {
      padding: 12px;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      margin-bottom: 10px;
      cursor: pointer;
      transition: 0.15s;
    }

    .held-order-item:hover {
      background: #f8fafc;
      border-color: #3b82f6;
    }

    .held-order-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 6px;
    }

    .held-order-customer {
      font-weight: 700;
      color: #1e293b;
    }

    .held-order-time {
      font-size: 0.8em;
      color: #64748b;
    }

    .held-order-items {
      font-size: 0.85em;
      color: #475569;
    }

    .held-order-total {
      font-weight: 700;
      color: #22c55e;
      margin-top: 4px;
    }

    /* Cart Quantity Buttons */
    .qty-btn-group {
      display: flex;
      align-items: center;
      gap: 6px;
      justify-content: center;
      padding: 2px;
    }

    .qty-btn {
      width: 30px;
      height: 30px;
      border: 2px solid #e2e8f0;
      background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
      border-radius: 8px;
      cursor: pointer;
      font-weight: 800;
      font-size: 1.15em;
      color: #475569;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    }

    .qty-btn:hover {
      background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
      border-color: #cbd5e1;
      transform: scale(1.05);
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    }

    .qty-btn:active {
      transform: scale(0.95);
    }

    .qty-btn.minus:hover {
      background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
      border-color: #fca5a5;
      color: #dc2626;
    }

    .qty-btn.qty-trash {
      background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
      border-color: #fca5a5;
      color: #dc2626;
      font-size: 0.85em;
    }

    .qty-btn.qty-trash:hover {
      background: linear-gradient(135deg, #fecaca 0%, #fca5a5 100%);
      border-color: #ef4444;
      transform: scale(1.1);
    }

    .qty-btn.plus:hover {
      background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
      border-color: #86efac;
      color: #16a34a;
    }

    .qty-display {
      min-width: 40px;
      text-align: center;
      font-weight: 800;
      font-size: 1em;
      color: #1e293b;
      background: #f8fafc;
      padding: 4px 8px;
      border-radius: 6px;
      border: 1px solid #e2e8f0;
      cursor: pointer;
      transition: all 0.2s ease;
      user-select: none;
    }

    .qty-display:hover {
      background: #e0e7ff;
      border-color: #c7d2fe;
      color: #4f46e5;
      transform: scale(1.05);
      box-shadow: 0 2px 6px rgba(79, 70, 229, 0.2);
    }

    .qty-input {
      width: 56px;
      height: 30px;
      text-align: center;
      font-weight: 700;
      font-size: 0.9em;
      color: #1e293b;
      border: 1px solid #e2e8f0;
      border-radius: 6px;
      background: #fff;
      padding: 0 6px;
      cursor: text;
      pointer-events: auto;
      user-select: text;
      -webkit-user-select: text;
    }

    .qty-input:focus {
      outline: none;
      border-color: #F6A61F;
      box-shadow: 0 0 0 2px rgba(246, 166, 31, 0.2);
      cursor: text;
    }

    /* Keyboard shortcut hints */
    .kbd-hint {
      font-size: 10px;
      background: #f1f5f9;
      padding: 2px 5px;
      border-radius: 4px;
      color: #64748b;
      margin-left: 6px;
      font-family: monospace;
    }

    @media (max-width: 768px) {
      .kbd-hint {
        display: none;
      }

      .qty-btn {
        width: 32px;
        height: 32px;
      }
    }

    /* Mobile cart table adjustments */
    @media (max-width: 520px) {
      #posCartTable {
        table-layout: fixed;
      }

      /* Re-balance columns for small screens */
      #posCartTable th:nth-child(1),
      #posCartTable td:nth-child(1) { width: 36% !important; }

      #posCartTable th:nth-child(2),
      #posCartTable td:nth-child(2) { width: 24% !important; }

      #posCartTable th:nth-child(3),
      #posCartTable td:nth-child(3) { width: 20% !important; }

      #posCartTable th:nth-child(4),
      #posCartTable td:nth-child(4) { width: 20% !important; }

      /* Remove extra delete column on mobile (trash already exists in qty control) */
      #posCartTable th:nth-child(5),
      #posCartTable td:nth-child(5) {
        display: none;
      }

      .qty-btn {
        width: 24px;
        height: 24px;
        font-size: 0.9em;
        border-radius: 6px;
      }

      .qty-btn-group {
        width: 100%;
        gap: 2px;
        flex-wrap: nowrap;
        justify-content: center;
      }

      .qty-display {
        min-width: 24px;
        font-size: 0.8em;
      }

      .qty-input {
        width: 40px;
        min-width: 40px;
        height: 24px;
        font-size: 0.8em;
        padding: 0 4px;
      }

      /* Keep price/total on one line */
      #cartTableBody td {
        white-space: nowrap;
        font-size: 0.85em;
        padding: 10px 4px;
      }

      /* Compact table headers */
      #cartTableBody th,
      table thead th {
        font-size: 0.65em;
        padding: 10px 4px;
        letter-spacing: 0.3px;
      }

      /* Item name: single-line ellipsis so qty/price columns stay aligned */
      #cartTableBody td:first-child {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 0;
      }

      #cartTableBody td:first-child strong {
        font-size: 0.82em;
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.25;
      }

      .item-desc {
        font-size: 0.65em !important;
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 2px 6px;
      }
    }

    /* --- PRINT --- */
    @media print {

      /* Optimized page setup for maximum content */
      @page {
        margin: 5mm 8mm;
        size: A4;
      }

      body {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 9pt !important;
        line-height: 1.3 !important;
      }

      /* Prevent breaks in header and customer info */
      body.print-invoice #invoice-header-area,
      body.print-invoice .customer-cards-wrapper {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
        page-break-after: avoid !important;
      }

      /* Allow table rows to break naturally */
      body.print-invoice #printCartTable {
        page-break-inside: auto !important;
      }

      body.print-invoice #printCartTable tbody tr {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
      }

      .sidebar,
      .no-print,
      .modal {
        display: none !important;
      }

      body {
        background: white;
        height: auto;
        overflow: visible;
        font-size: 11pt;
        padding: 0;
        margin: 0;
        max-width: 100%;
      }

      .main-content {
        padding: 0;
        margin: 0;
        max-width: 100%;
      }

      .container {
        box-shadow: none;
        border: none;
        padding: 0;
        margin: 0;
        max-width: 100%;
      }

      /* Hide ALL pages by default */
      .page {
        display: none !important;
      }

      /* Hide all form sections and UI elements */
      .pos-header-card,
      .form-grid-2,
      .form-grid-3,
      .grid-container,
      .settings-section,
      .totals-container,
      .courier-section,
      .product-grid-wrapper,
      select,
      textarea,
      label,
      button,
      hr {
        display: none !important;
      }

      /* Hide form wrapper divs */
      .container>div[style*="background:#f8fafc"]:not(#invoice-customer-section):not(#invoice-delivery-section):not(#invoice-totals-card),
      .container>div[style*="background:#fef3c7"] {
        display: none !important;
      }

      /* Invoice Print Mode - Show ONLY these elements */
      body.print-invoice #invoice-header-area,
      body.print-invoice .customer-cards-wrapper,
      body.print-invoice #invoice-customer-section,
      body.print-invoice #invoice-delivery-section,
      body.print-invoice #invoice-totals-card {
        display: block !important;
        page-break-inside: avoid !important;
      }

      /* Ensure print table behaves as a real table (prevents header/body misalignment) */
      body.print-invoice #printCartTable {
        display: table !important;
        page-break-inside: avoid !important;
      }

      body.print-invoice #printCartTable thead {
        display: table-header-group !important;
      }

      body.print-invoice #printCartTable tbody {
        display: table-row-group !important;
      }

      body.print-invoice #printCartTable tr {
        display: table-row !important;
      }

      body.print-invoice #printCartTable th,
      body.print-invoice #printCartTable td {
        display: table-cell !important;
      }

      /* Hide POS cart table in print */
      body.print-invoice #posCartTable {
        display: none !important;
      }

      /* Hide table headers for regular cart table */
      body.print-invoice table thead tr th.no-print,
      body.print-invoice table tbody tr td:last-child {
        display: none !important;
      }

      body.print-invoice .customer-cards-wrapper {
        display: flex !important;
        gap: 12px;
        margin-bottom: 15px;
        flex-wrap: wrap;
        page-break-inside: avoid;
      }

      body.print-invoice #page-pos {
        display: block !important;
        padding: 15px !important;
        max-width: 100% !important;
      }

      body.print-invoice #invoice-header-area {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 8px 0 !important;
        margin-bottom: 12px !important;
        border-bottom: 2px solid #1e293b !important;
        max-width: 100% !important;
        page-break-inside: avoid !important;
        page-break-after: avoid !important;
      }

      body.print-invoice .invoice-header-content {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        gap: 15px !important;
      }

      /* Compact logo */
      body.print-invoice .print-logo {
        max-width: 55px !important;
        max-height: 55px !important;
        object-fit: contain !important;
        border-radius: 4px !important;
        background: transparent !important;
      }

      body.print-invoice .invoice-company-name {
        font-size: 1.4em !important;
        color: #1e293b !important;
        font-weight: 800 !important;
        margin: 0 !important;
        flex: 1 !important;
        line-height: 1.3 !important;
      }

      body.print-invoice .invoice-date-id {
        text-align: right !important;
        flex-shrink: 0 !important;
      }

      body.print-invoice .invoice-date,
      body.print-invoice .invoice-id-display {
        font-size: 0.75em !important;
        margin: 2px 0 !important;
        color: #475569 !important;
        font-weight: 600 !important;
      }

      body.print-invoice .invoice-id-display {
        font-size: 0.95em !important;
        color: #1e293b !important;
        font-weight: 700 !important;
      }

      /* Compact customer cards */
      body.print-invoice .customer-cards-wrapper {
        display: flex !important;
        gap: 10px !important;
        margin-bottom: 12px !important;
        flex-wrap: wrap !important;
        page-break-inside: avoid !important;
        page-break-after: avoid !important;
      }

      body.print-invoice .invoice-customer-section {
        flex: 1 !important;
        min-width: 230px !important;
        background: #f8fafc !important;
        padding: 8px 10px !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 6px !important;
      }

      body.print-invoice .invoice-customer-title {
        font-size: 0.7em !important;
        font-weight: 700 !important;
        color: #1e293b !important;
        text-transform: uppercase !important;
        margin: 0 0 6px 0 !important;
        padding-bottom: 4px !important;
        border-bottom: 1px solid #cbd5e1 !important;
        letter-spacing: 0.5px !important;
      }

      body.print-invoice .invoice-customer-name {
        font-size: 0.95em !important;
        font-weight: 700 !important;
        color: #1e293b !important;
        margin: 0 0 4px 0 !important;
      }

      body.print-invoice .invoice-customer-detail {
        font-size: 0.75em !important;
        color: #475569 !important;
        margin: 3px 0 !important;
        line-height: 1.3 !important;
        font-weight: 500 !important;
      }

      /* Clean modern print table - CONSOLIDATED FIX */
      body.print-invoice #printCartTable {
        width: 100% !important;
        border-collapse: collapse !important;
        border-spacing: 0 !important;
        margin-bottom: 15px !important;
        page-break-inside: auto !important;
        table-layout: fixed !important;
        border: 2px solid #000 !important;
      }

      body.print-invoice #printCartTable thead {
        display: table-header-group !important;
        border-bottom: 2px solid #000 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
      }

      body.print-invoice #printCartTable th {
        padding: 8px 10px !important;
        color: #000 !important;
        font-weight: 800 !important;
        text-transform: uppercase !important;
        font-size: 0.8em !important;
        text-align: center !important;
        vertical-align: middle !important;
        border-right: 1px solid #000 !important;
        border-left: 1px solid #000 !important;
        background: #e2e8f0 !important;
        /* Slightly darker header */
      }

      body.print-invoice #printCartTable td {
        padding: 8px 10px !important;
        color: #000 !important;
        border-right: 1px solid #000 !important;
        border-left: 1px solid #000 !important;
        border-bottom: 1px solid #000 !important;
        text-align: center !important;
        vertical-align: middle !important;
        font-size: 0.95em !important;
        background: transparent !important;
        /* Override global gradients */
        position: static !important;
        /* Reset position */
      }

      /* Remove global pseudo-elements from print table (e.g. green bars) */
      body.print-invoice #printCartTable td::before,
      body.print-invoice #printCartTable td::after {
        display: none !important;
        content: none !important;
      }

      /* Item Name BOLD - Reinforced */
      body.print-invoice #printCartTable td:nth-child(1) {
        text-align: left !important;
        font-weight: 800 !important;
        color: #000 !important;
        border-left: 2px solid #000 !important;
      }

      body.print-invoice #printCartTable td:nth-child(1) strong {
        display: block !important;
        font-weight: 900 !important;
        font-size: 1.3em !important;
        /* Increased size as requested */
        text-shadow: 0.2px 0.2px 0 #000 !important;
        /* Heavyle bold */
        color: #000 !important;
        text-align: left !important;
        margin-bottom: 5px !important;
      }

      /* Fix Total Column Specifics */
      body.print-invoice #printCartTable td:nth-child(4) {
        background: transparent !important;
        font-weight: 800 !important;
        color: #000 !important;
        border-right: 2px solid #000 !important;
      }

      body.print-invoice #printCartTable td:last-child,
      body.print-invoice #printCartTable th:last-child {
        border-right: 2px solid #000 !important;
      }


      body.print-invoice #printCartTable td:nth-child(1) div {
        font-size: 0.85em !important;
        color: #64748b !important;
        line-height: 1.3 !important;
        font-weight: 400 !important;
        font-style: italic !important;
        margin-top: 4px !important;
        /* Extra gap */
      }

      /* Hide QTY inputs, show print span */
      body.print-invoice .qty-input {
        display: none !important;
      }

      body.print-invoice .print-only {
        display: inline !important;
        font-weight: 700 !important;
      }

      /* Compact totals card */
      body.print-invoice #invoice-totals-card {
        display: block !important;
        background: #f8fafc !important;
        padding: 8px 12px !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 4px !important;
        width: 280px !important;
        margin: 0 0 0 auto !important;
        box-shadow: none !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
      }

      body.print-invoice #invoice-totals-card .invoice-totals-title,
      body.print-invoice #invoice-totals-card .summary-label,
      body.print-invoice #invoice-totals-card .summary-value,
      body.print-invoice #invoice-totals-card .total-label,
      body.print-invoice #invoice-totals-card .total-amount {
        display: block !important;
      }

      body.print-invoice #invoice-totals-card .summary-section,
      body.print-invoice #invoice-totals-card .summary-row,
      body.print-invoice #invoice-totals-card .total-highlight {
        display: flex !important;
      }

      body.print-invoice #invoice-totals-card .summary-row {
        display: flex !important;
        justify-content: space-between !important;
        padding: 3px 0 !important;
        line-height: 1.2 !important;
      }

      body.print-invoice #invoice-totals-card #taxRowPrint[style*="display: none"],
      body.print-invoice #invoice-totals-card #taxRowPrint[style*="display:none"] {
        display: none !important;
      }

      body.print-invoice #invoice-totals-card .summary-label {
        font-size: 0.7em !important;
        font-weight: 500 !important;
        color: #475569 !important;
        text-transform: uppercase !important;
      }

      body.print-invoice #invoice-totals-card .summary-value {
        font-size: 0.75em !important;
        font-weight: 700 !important;
        color: #1e293b !important;
      }

      body.print-invoice #invoice-totals-card .discount-value {
        color: #dc2626 !important;
      }

      body.print-invoice #invoice-totals-card .invoice-totals-title {
        font-size: 0.75em !important;
        font-weight: 700 !important;
        color: #1e293b !important;
        text-transform: uppercase !important;
        margin: 0 0 5px 0 !important;
        padding-bottom: 3px !important;
        border-bottom: 1px solid #cbd5e1 !important;
        letter-spacing: 0.3px !important;
      }

      body.print-invoice #invoice-totals-card .total-highlight {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        background: #1e293b !important;
        padding: 10px 12px !important;
        border-radius: 4px !important;
        margin-top: 6px !important;
        min-height: 36px !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
      }

      body.print-invoice #invoice-totals-card .total-highlight .total-label,
      body.print-invoice #invoice-totals-card .total-highlight .total-amount,
      body.print-invoice #invoice-totals-card .total-label,
      body.print-invoice #invoice-totals-card .total-amount {
        color: #1e293b !important;
        display: block !important;
        line-height: 1.5 !important;
        overflow: visible !important;
      }

      body.print-invoice #invoice-totals-card .total-highlight .total-label,
      body.print-invoice #invoice-totals-card .total-label {
        font-size: 0.9em !important;
        font-weight: 700 !important;
        letter-spacing: 0.3px !important;
        text-transform: uppercase !important;
        color: #1e293b !important;
      }

      body.print-invoice #invoice-totals-card .total-highlight .total-amount,
      body.print-invoice #invoice-totals-card .total-amount {
        font-size: 1.2em !important;
        font-weight: 800 !important;
        color: #1e293b !important;
      }

      /* Compact payment info */
      body.print-invoice #printPaymentInfo {
        display: block !important;
        margin-top: 8px !important;
        padding: 6px 0 !important;
        border-top: 1px solid #e2e8f0 !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
      }

      /* Let JavaScript control visibility based on payment status */
      body.print-invoice #printPaymentMethodRow[style*="display: none"],
      body.print-invoice #printPaymentMethodRow[style*="display:none"] {
        display: none !important;
      }

      body.print-invoice #printPaymentMethodRow[style*="display: flex"],
      body.print-invoice #printPaymentMethodRow[style*="display:flex"] {
        display: flex !important;
      }

      body.print-invoice #printPartialPaymentRow[style*="display: none"],
      body.print-invoice #printPartialPaymentRow[style*="display:none"] {
        display: none !important;
      }

      body.print-invoice #printPartialPaymentRow[style*="display: block"],
      body.print-invoice #printPartialPaymentRow[style*="display:block"] {
        display: block !important;
      }



      /* Invoice Print Styles - Show only what's needed */
      body.print-invoice #shippingLabelArea {
        display: none !important;
      }

      body.print-invoice #invoice-header-area {
        display: block !important;
        margin-bottom: 12px !important;
        padding-bottom: 10px !important;
        border-bottom: 2px solid #cbd5e1 !important;
      }

      body.print-invoice .invoice-header-content {
        display: flex !important;
        align-items: center !important;
        gap: 20px !important;
        flex-wrap: wrap !important;
      }

      body.print-invoice .print-logo {
        display: block !important;
        max-height: 50px !important;
        max-width: 50px !important;
        object-fit: contain !important;
        flex-shrink: 0 !important;
        background: transparent !important;
      }

      body.print-invoice .invoice-company-name {
        display: block !important;
        font-size: 1.4em !important;
        font-weight: 800 !important;
        color: #1e293b !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
        line-height: 1.3 !important;
      }

      body.print-invoice .invoice-date-id {
        display: flex !important;
        gap: 25px !important;
        align-items: center !important;
        margin-left: auto !important;
      }

      body.print-invoice .invoice-date,
      body.print-invoice .invoice-id-display {
        display: block !important;
        font-size: 0.85em !important;
        color: #64748b !important;
        margin: 0 !important;
        white-space: nowrap !important;
      }

      body.print-invoice .invoice-id-display {
        color: #3b82f6 !important;
        font-weight: 700 !important;
      }

      body.print-invoice #invoice-customer-section,
      body.print-invoice #invoice-delivery-section {
        display: block !important;
        background: #f8fafc !important;
        padding: 12px !important;
        border-radius: 8px !important;
        border: 2px solid #e2e8f0 !important;
        flex: 1 !important;
        min-width: 0 !important;
      }

      /* Container for side-by-side cards */
      body.print-invoice .customer-cards-wrapper {
        display: flex !important;
        gap: 15px !important;
        margin-bottom: 12px !important;
      }

      body.print-invoice #invoice-customer-section {
        margin-bottom: 0 !important;
      }

      body.print-invoice #invoice-delivery-section {
        margin-bottom: 0 !important;
      }

      body.print-invoice .invoice-customer-title {
        display: block !important;
        font-size: 0.9em !important;
        font-weight: 700 !important;
        color: #64748b !important;
        text-transform: uppercase !important;
        letter-spacing: 1px !important;
        margin: 0 0 10px 0 !important;
      }

      body.print-invoice .invoice-customer-name {
        display: block !important;
        font-size: 1.3em !important;
        font-weight: 700 !important;
        color: #0f172a !important;
        margin: 0 0 5px 0 !important;
      }

      body.print-invoice .invoice-customer-detail {
        display: block !important;
        font-size: 0.95em !important;
        color: #475569 !important;
        margin: 6px 0 !important;
        line-height: 1.5 !important;
      }

      body.print-invoice #printCustomerNotes {
        display: block !important;
        font-style: italic !important;
        color: #64748b !important;
        margin-top: 12px !important;
        padding: 10px !important;
        background: #f8fafc !important;
        border-radius: 4px !important;
        border-left: 3px solid #3b82f6 !important;
        font-size: 0.9em !important;
        line-height: 1.5 !important;
      }

      /* REMOVED CONFLICTING TABLE STYLES
      body.print-invoice table {
        display: table !important;
        border-collapse: collapse !important;
        width: 100% !important;
        margin-bottom: 8px !important;
        border-spacing: 0 !important;
        page-break-inside: auto !important;
      }
      
      ...
      */

      /* Invoice Summary Wrapper - Stamp on Left, Summary on Right */
      /* UPDATED: Increased gap to separate stamp */
      body.print-invoice #invoice-summary-wrapper {
        display: flex !important;
        gap: 30px !important;
        /* Increased gap */
        align-items: center !important;
        margin-top: 25px !important;
        page-break-inside: avoid !important;
        position: relative !important;
        justify-content: flex-end !important;
      }

      /* Payment Stamp - Shifted right towards totals */
      body.print-invoice #paymentStamp {
        display: block !important;
        flex-shrink: 0 !important;
        width: auto !important;
        /* Allow growing for long text */
        min-width: 150px !important;
        max-width: 200px !important;
        margin: 0 !important;
        margin-right: 20px !important;
        /* More margin */
        transform: rotate(-3deg) !important;
        white-space: normal !important;
        /* Wrap text if needed */
        line-height: 1.1 !important;
        padding: 10px 15px !important;
      }

      /* Compact payment info in Totals Card */
      body.print-invoice #printPaymentInfo {
        display: block !important;
        margin-top: 10px !important;
        padding: 12px 15px !important;
        /* More breathing room inside */
        border-top: 1px solid #e2e8f0 !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
        background: #f8fafc !important;
        /* Keep distinctive background */
        border-radius: 6px !important;
        border: 1px solid #cbd5e1 !important;
      }

      body.print-invoice #printPaymentInfo>div {
        margin-bottom: 6px !important;
        /* Better spacing between rows */
      }


      /* Invoice Totals Card - Positioned on Right */
      body.print-invoice #invoice-totals-card {
        display: block !important;
        background: transparent !important;
        padding: 5px 10px !important;
        border-radius: 4px !important;
        border: 2px solid #000 !important;
        /* Solid black border */
        flex: 1 !important;
        min-width: 280px !important;
        max-width: 350px !important;
        margin-left: 0 !important;
      }

      /* Page break controls for long product lists */
      body.print-invoice table tbody tr {
        page-break-inside: avoid !important;
      }

      body.print-invoice table {
        page-break-after: auto !important;
      }

      body.print-invoice #invoice-totals-card,
      body.print-invoice #invoice-totals-card * {
        visibility: visible !important;
      }

      body.print-invoice #invoice-totals-card .summary-section {
        display: block !important;
      }

      body.print-invoice #invoice-totals-card .summary-row {
        display: flex !important;
        justify-content: space-between !important;
        padding: 6px 0 !important;
        border-bottom: 1px solid #000 !important;
        /* Solid black separator */
      }

      body.print-invoice #invoice-totals-card .invoice-totals-title {
        font-size: 0.9em !important;
        font-weight: 800 !important;
        color: #000 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        margin: 0 0 6px 0 !important;
        padding-bottom: 4px !important;
        border-bottom: 2px solid #000 !important;
      }

      body.print-invoice #invoice-totals-card .summary-label,
      body.print-invoice #invoice-totals-card .summary-value {
        display: inline-block !important;
      }

      body.print-invoice #invoice-totals-card .summary-label {
        font-weight: 600 !important;
        color: #64748b !important;
        font-size: 0.75em !important;
        text-transform: uppercase !important;
      }

      body.print-invoice #invoice-totals-card .summary-value {
        font-weight: 700 !important;
        color: #1e293b !important;
        font-size: 0.8em !important;
      }

      body.print-invoice #invoice-totals-card .total-highlight {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        background: #f1f5f9 !important;
        padding: 12px !important;
        border-radius: 6px !important;
        margin-top: 10px !important;
        border-top: 3px solid #1e293b !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
      }

      body.print-invoice #invoice-totals-card .total-label,
      body.print-invoice #invoice-totals-card .total-amount {
        display: inline-block !important;
        color: #1e293b !important;
      }

      body.print-invoice #invoice-totals-card .total-label {
        font-size: 1em !important;
        font-weight: 800 !important;
        color: white !important;
        letter-spacing: 1px !important;
      }

      body.print-invoice #invoice-totals-card .total-amount {
        font-size: 1.5em !important;
        font-weight: 800 !important;
        color: white !important;
      }

      /* Shipping Label Print Styles - Show ONLY label */
      body.print-shipping #shippingLabelArea {
        display: block !important;
        page-break-after: always !important;
      }

      body.print-shipping #invoice-header-area,
      body.print-shipping #invoice-customer-section,
      body.print-shipping #invoice-delivery-section,
      body.print-shipping table,
      body.print-shipping #invoice-totals-card,
      body.print-shipping #invoice-summary-wrapper,
      body.print-shipping #paymentStamp,
      body.print-shipping #printPaymentInfo,
      body.print-shipping .partial-payment-row,
      body.print-shipping .payment-method-row,
      body.print-shipping #printCustomerNotes {
        display: none !important;
      }

      /* ─── Invoice Footer (Company Identity) ─── */
      body.print-invoice .invoice-footer {
        display: block !important;
        margin-top: 20px !important;
        padding-top: 14px !important;
        border-top: 2px solid #1e293b !important;
        text-align: center !important;
        font-size: 0.8em !important;
        color: #475569 !important;
        page-break-inside: avoid !important;
      }
      body.print-invoice .invoice-footer-contact {
        font-weight: 600 !important;
        color: #1e293b !important;
        margin-bottom: 6px !important;
        line-height: 1.6 !important;
      }
      body.print-invoice .invoice-footer-addr {
        color: #64748b !important;
        margin-bottom: 6px !important;
        line-height: 1.4 !important;
      }
      body.print-invoice .invoice-footer-social {
        display: flex !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        margin-top: 6px !important;
        font-size: 0.85em !important;
      }
      body.print-invoice .invoice-footer-social span {
        white-space: nowrap !important;
      }
      body.print-invoice .invoice-footer-tax {
        margin-top: 6px !important;
        font-size: 0.8em !important;
        font-weight: 700 !important;
        color: #1e293b !important;
      }

      /* ─── Dashboard Print Section Tables ─── */
      body.print-dashboard .dash-print-section {
        page-break-inside: avoid !important;
        margin-bottom: 8px !important;
        padding: 8px 10px !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 6px !important;
        background: #fff !important;
      }
      body.print-dashboard .dash-print-section h3 {
        font-size: 0.95em !important;
        color: #1e293b !important;
        margin: 0 0 6px 0 !important;
        padding-bottom: 4px !important;
        border-bottom: 1px solid #e2e8f0 !important;
      }
      body.print-dashboard .dash-print-section th {
        padding: 5px 8px !important;
        font-size: 0.75em !important;
      }
      body.print-dashboard .dash-print-section td {
        padding: 5px 8px !important;
        font-size: 0.8em !important;
      }
      body.print-dashboard #dashPrintExtraContent {
        display: block !important;
        margin-top: 10px !important;
      }
      body.print-dashboard .report-section {
        display: none !important;
      }
      body.print-dashboard #insightsBox {
        display: none !important;
      }
      body.print-dashboard .stats-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
        margin-bottom: 8px !important;
      }
      body.print-dashboard .card {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
      }
      body.print-dashboard .card h3 {
        font-size: 0.7em !important;
        margin: 0 0 2px 0 !important;
      }
      body.print-dashboard .card .number {
        font-size: 1em !important;
      }

      /* Invoice Header */
      #invoice-header-area {
        display: none;
        margin-bottom: 25px;
        padding-bottom: 15px;
        border-bottom: 2px solid #cbd5e1;
      }

      .invoice-header-content {
        display: flex;
        align-items: center;
        gap: 20px;
        flex-wrap: wrap;
      }

      .print-logo {
        max-height: 50px;
        max-width: 50px;
        object-fit: contain;
        flex-shrink: 0;
        background: transparent !important;
      }

      .invoice-company-name {
        font-size: 1.1em;
        font-weight: 700;
        color: #1e293b;
        margin: 0;
        flex-shrink: 0;
      }

      .invoice-date-id {
        display: flex;
        gap: 25px;
        align-items: center;
        margin-left: auto;
      }

      .invoice-date,
      .invoice-id-display {
        font-size: 0.85em;
        color: #64748b;
        margin: 0;
        white-space: nowrap;
      }

      .invoice-id-display {
        color: #3b82f6;
        font-weight: 700;
      }

      /* Customer Section */
      .invoice-customer-section {
        background: #f8fafc;
        padding: 20px;
        border-radius: 8px;
        margin-bottom: 25px;
        border: 2px solid #e2e8f0;
      }

      .invoice-customer-title {
        font-size: 0.9em;
        font-weight: 700;
        color: #64748b;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin: 0 0 10px 0;
      }

      .invoice-customer-name {
        font-size: 1.3em;
        font-weight: 700;
        color: #0f172a;
        margin: 0 0 5px 0;
      }

      .invoice-customer-detail {
        font-size: 0.95em;
        color: #475569;
        margin: 3px 0;
      }

      /* Cart Table */
      .invoice-cart-table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 25px;
      }

      .invoice-cart-table thead {
        background: #1e293b;
      }

      .invoice-cart-table th {
        color: white;
        padding: 12px;
        text-align: left;
        font-size: 0.9em;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }

      .invoice-cart-table tbody tr {
        border-bottom: 1px solid #e2e8f0;
      }

      .invoice-cart-table tbody tr:last-child {
        border-bottom: 2px solid #cbd5e1;
      }

      .invoice-cart-table td {
        padding: 12px;
        font-size: 0.95em;
        color: #1e293b;
      }

      .invoice-cart-table td:nth-child(2) {
        font-weight: 600;
      }

      .invoice-cart-table td:nth-child(3),
      .invoice-cart-table td:nth-child(4),
      .invoice-cart-table td:nth-child(5) {
        text-align: right;
      }

      /* Totals Section */
      .invoice-totals-section {
        margin-left: auto;
        width: 320px;
        background: #f8fafc;
        padding: 20px;
        border-radius: 8px;
        border: 2px solid #e2e8f0;
      }

      .invoice-total-row {
        display: flex;
        justify-content: space-between;
        padding: 8px 0;
        font-size: 0.95em;
        color: #475569;
      }

      .invoice-total-row.grand-total {
        border-top: 2px solid #cbd5e1;
        margin-top: 10px;
        padding-top: 12px;
        font-size: 1.3em;
        font-weight: 800;
        color: #0f172a;
      }

      .invoice-total-label {
        font-weight: 600;
      }

      .invoice-total-value {
        font-weight: 700;
        color: #1e293b;
      }

      /* Footer */
      .invoice-footer {
        margin-top: 40px;
        padding-top: 20px;
        border-top: 2px solid #e2e8f0;
        text-align: center;
        font-size: 0.85em;
        color: #64748b;
      }

      #shippingLabelArea * {
        color: #000 !important;
        border-color: #000 !important;
      }

      body.print-dashboard #page-pos {
        display: none !important;
      }

      body.print-dashboard #page-dashboard {
        display: block !important;
      }

      body.print-history #page-pos {
        display: none !important;
      }

      body.print-history #page-history {
        display: block !important;
      }

      /* ========================================
         ORDERS HISTORY - PRINT LAYOUT (REBUILT)
         ======================================== */

      body.print-history #page-pos {
        display: none !important;
      }

      body.print-history #page-history {
        display: block !important;
      }

      body.print-history .history-summary,
      body.print-history .mobile-scroll-hint,
      body.print-history .pos-header-card {
        display: none !important;
      }

      body.print-history #historyReportHeader {
        display: block !important;
        margin: 0 0 10mm 0 !important;
        padding-bottom: 6mm !important;
        border-bottom: 1px solid #1f2937 !important;
      }

      body.print-history .history-table-wrapper {
        overflow: visible !important;
        box-shadow: none !important;
        border: none !important;
        margin: 0 !important;
        padding: 0 !important;
      }

      body.print-history #historyTable {
        width: 100% !important;
        border-collapse: collapse !important;
        table-layout: fixed !important;
        font-family: 'Arial', sans-serif !important;
        font-size: 8.5pt !important;
        line-height: 1.2 !important;
        margin: 0 !important;
        background: #ffffff !important;
        border: 1px solid #111827 !important;
      }

      body.print-history #historyTable thead th {
        background: #f1f5f9 !important;
        color: #000 !important;
        border: 1px solid #111827 !important;
        padding: 4px 3px !important;
        text-align: center !important;
        font-weight: 800 !important;
        font-size: 8pt !important;
        text-transform: uppercase !important;
        letter-spacing: 0.3px !important;
        white-space: normal !important;
        vertical-align: middle !important;
      }

      body.print-history #historyTable thead tr {
        border-bottom: 2px solid #111827 !important;
      }

      body.print-history #historyTable tbody tr:first-child td {
        border-top: 2px solid #111827 !important;
      }

      body.print-history #historyTable thead th.sorting:after,
      body.print-history #historyTable thead th.sorting_asc:after,
      body.print-history #historyTable thead th.sorting_desc:after {
        display: none !important;
      }

      body.print-history #historyTable thead th.sorting:before,
      body.print-history #historyTable thead th.sorting_asc:before,
      body.print-history #historyTable thead th.sorting_desc:before,
      body.print-history #historyTable thead th.sorting_asc_disabled:before,
      body.print-history #historyTable thead th.sorting_desc_disabled:before,
      body.print-history #historyTable thead th.sorting_asc_disabled:after,
      body.print-history #historyTable thead th.sorting_desc_disabled:after {
        display: none !important;
        content: none !important;
        background: none !important;
      }

      body.print-history #historyTable tbody td {
        border: 1px solid #111827 !important;
        padding: 4px 3px !important;
        color: #000 !important;
        font-size: 8pt !important;
        text-align: center !important;
        vertical-align: middle !important;
        background: #ffffff !important;
        word-break: break-word !important;
        white-space: normal !important;
      }

      body.print-history #historyTable tbody tr:nth-child(even) td {
        background: #f9fafb !important;
      }

      body.print-history #historyTable td::before,
      body.print-history #historyTable td::after {
        content: none !important;
      }

      body.print-history .status-pill,
      body.print-history .order-status,
      body.print-history .payment-status,
      body.print-history .payment-method {
        background: none !important;
        border: none !important;
        box-shadow: none !important;
        color: #000 !important;
        font-weight: 700 !important;
        font-size: 7.5pt !important;
        padding: 0 !important;
        margin: 0 !important;
        display: inline !important;
        white-space: normal !important;
        text-transform: uppercase !important;
        letter-spacing: 0.2px !important;
      }

      body.print-history #historyTable th:nth-child(1),
      body.print-history #historyTable td:nth-child(1) {
        width: 10% !important;
      }

      body.print-history #historyTable th:nth-child(2),
      body.print-history #historyTable td:nth-child(2) {
        width: 6% !important;
      }

      body.print-history #historyTable th:nth-child(3),
      body.print-history #historyTable td:nth-child(3) {
        width: 16% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        max-width: 0 !important;
      }

      body.print-history #historyTable th:nth-child(4),
      body.print-history #historyTable td:nth-child(4) {
        width: 17% !important;
      }

      body.print-history #historyTable th:nth-child(5),
      body.print-history #historyTable td:nth-child(5) {
        width: 19% !important;
      }

      body.print-history #historyTable th:nth-child(6),
      body.print-history #historyTable td:nth-child(6) {
        width: 15% !important;
      }

      body.print-history #historyTable th:nth-child(7),
      body.print-history #historyTable td:nth-child(7) {
        width: 17% !important;
        text-align: right !important;
        white-space: nowrap !important;
        font-weight: 800 !important;
      }

      body.print-history #historyTable tfoot#historyTableFoot {
        display: none !important;
      }

      body.print-history #historyTable tfoot#historyTotalFooter {
        display: table-footer-group !important;
        page-break-inside: avoid !important;
      }

      body.print-history #historyTable tfoot#historyTotalFooter td {
        border: 1px solid #111827 !important;
        background: #f1f5f9 !important;
        font-weight: 800 !important;
        font-size: 8.5pt !important;
        padding: 5px 4px !important;
        color: #000 !important;
      }

      body.print-history #historyTable tfoot#historyTotalFooter td:first-child {
        text-align: right !important;
      }

      body.print-history #historyTable tfoot#historyTotalFooter td:last-child {
        text-align: right !important;
        white-space: nowrap !important;
      }

      body.print-history .dataTables_info,
      body.print-history .dataTables_paginate,
      body.print-history .dataTables_length,
      body.print-history .dataTables_filter,
      body.print-history .dataTables_wrapper .row {
        display: none !important;
      }

      body.print-history,
      body.print-history .page,
      body.print-history .main-content,
      body.print-history .table-responsive,
      body.print-history .card-body,
      body.print-history table.dataTable {
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
      }

      body.print-history ::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
      }

      input,
      select,
      textarea {
        border: none;
        padding: 0;
        background: transparent;

        -webkit-appearance: none;
        appearance: none;
        /* ← ADD THIS */

        resize: none;
        font-weight: bold;
        color: black;
      }

      ::-webkit-input-placeholder {
        color: transparent;
      }

      :-ms-input-placeholder {
        color: transparent;
      }

      ::placeholder {
        color: transparent;
      }

      .grid-container {
        display: none;
      }

      .totals-card {
        border: none;
        width: 100%;
        padding: 0;
      }

      .totals-row input {
        text-align: right;
        width: auto;
      }

      body[dir="rtl"] .totals-row input {
        text-align: left;
      }
    }

    /* ===== MODERN TOTALS BLOCK ===== */
    .totals-container {
      display: flex;
      flex-direction: column;
      gap: 10px;
      background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
      padding: 16px;
      border-radius: 14px;
      max-width: 440px;
      margin-left: auto;
      margin-top: 20px;
      box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08), 0 1px 4px rgba(15, 23, 42, 0.04);
      border: 2px solid #e2e8f0;
      position: relative;
      overflow: hidden;
    }

    .totals-container::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: linear-gradient(90deg, #3b82f6, #2563eb);
    }

    .settings-section {
      padding: 10px 14px;
      background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
      border: 1.5px solid #e2e8f0;
      border-radius: 10px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
      margin-bottom: 0;
    }

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

    .drive-sync-actions .btn {
      white-space: nowrap;
      flex: 0 0 auto;
    }

    .drive-sync-actions select {
      min-width: 180px;
    }

    .drive-sync-actions select:hover {
      border-color: #F6A61F;
      box-shadow: 0 0 0 2px rgba(246, 166, 31, 0.15);
    }

    .drive-sync-actions select:focus {
      border-color: #F6A61F;
      box-shadow: 0 0 0 3px rgba(246, 166, 31, 0.2);
      outline: none;
    }

    .drive-sync-badge {
      width: 9px;
      height: 9px;
      border-radius: 999px;
      background: #ef4444;
      box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.18);
      display: none;
    }

    .drive-icon {
      width: 18px;
      height: 18px;
      vertical-align: -3px;
      margin-right: 6px;
    }

    .settings-header {
      font-size: 0.8em;
      font-weight: 700;
      color: #64748b;
      margin-bottom: 0;
      text-transform: uppercase;
      letter-spacing: 0.6px;
    }

    .settings-grid {
      display: flex;
      gap: 14px;
      align-items: center;
    }

    .settings-item {
      display: flex;
      align-items: center;
      flex: 1;
    }

    .settings-item:first-child {
      flex: 1.2;
    }

    .settings-item:last-child label {
      font-size: 0.75em !important;
    }

    .settings-select {
      padding: 10px 36px 10px 14px;
      border: 2px solid #cbd5e1;
      border-radius: 8px;
      background-color: white;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23F6A61F' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 12px center;
      background-size: 12px;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      font-size: 0.95em;
      font-weight: 800;
      color: #1e293b;
      cursor: pointer;
      transition: all 0.2s;
      height: 40px;
      flex: 1;
    }

    .settings-select:hover {
      border-color: #94a3b8;
    }

    .settings-select:focus {
      outline: none;
      border-color: #F6A61F;
      box-shadow: 0 0 0 3px rgba(246, 166, 31, 0.15);
      transform: scale(1.01);
    }

    /* ===== ENHANCED DROPDOWN STYLING (F6A61F Theme) ===== */

    /* Payment Method Dropdown */
    /* Payment Status Dropdown */
    #paymentStatus {
      padding: 10px 36px 10px 12px;
      border: 2px solid #cbd5e1;
      border-radius: 8px;
      background-color: white;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23F6A61F' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 12px center;
      background-size: 12px;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      font-size: 0.95em;
      font-weight: 800;
      color: #1e293b;
      cursor: pointer;
      transition: all 0.2s ease;
      width: 100%;
    }

    #paymentStatus:hover {
      border-color: #F6A61F;
      background-color: #fffbf0;
    }

    #paymentStatus:focus {
      outline: none;
      border-color: #F6A61F;
      box-shadow: 0 0 0 3px rgba(246, 166, 31, 0.15);
      background-color: white;
    }

    /* Payment Method Dropdown */
    #paymentMethod {
      padding: 10px 36px 10px 14px;
      border: 2px solid #cbd5e1;
      border-radius: 8px;
      background-color: white;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23F6A61F' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 12px center;
      background-size: 12px;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      font-size: 0.95em;
      font-weight: 800;
      color: #1e293b;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    #paymentMethod:hover {
      border-color: #F6A61F;
      background-color: #fffbf0;
    }

    #paymentMethod:focus {
      outline: none;
      border-color: #F6A61F;
      box-shadow: 0 0 0 3px rgba(246, 166, 31, 0.15);
      background-color: white;
      transform: scale(1.01);
    }

    /* Country Select Dropdown */
    .country-select-list {
      padding: 10px 36px 10px 12px;
      border: 2px solid #cbd5e1;
      border-radius: 8px;
      background-color: white;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23F6A61F' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 12px center;
      background-size: 12px;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      font-size: 0.95em;
      font-weight: 800;
      color: #1e293b;
      cursor: pointer;
      transition: all 0.2s ease;
      width: 100%;
    }

    .country-select-list:hover {
      border-color: #F6A61F;
      background-color: #fffbf0;
    }

    .country-select-list:focus {
      outline: none;
      border-color: #F6A61F;
      box-shadow: 0 0 0 3px rgba(246, 166, 31, 0.15);
      background-color: white;
    }

    /* Emirates/Cities Select Dropdown */
    .emirates-select {
      padding: 10px 36px 10px 12px;
      border: 2px solid #cbd5e1;
      border-radius: 8px;
      background-color: white;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23F6A61F' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 12px center;
      background-size: 12px;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      font-size: 0.95em;
      font-weight: 800;
      color: #1e293b;
      cursor: pointer;
      transition: all 0.2s ease;
      width: 100%;
    }

    .emirates-select:hover {
      border-color: #F6A61F;
      background-color: #fffbf0;
    }

    .emirates-select:focus {
      outline: none;
      border-color: #F6A61F;
      box-shadow: 0 0 0 3px rgba(246, 166, 31, 0.15);
      background-color: white;
    }

    /* Customer Tag Select */
    #custTagPos {
      padding: 10px 36px 10px 12px;
      border: 2px solid #cbd5e1;
      border-radius: 8px;
      background-color: white;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23F6A61F' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 12px center;
      background-size: 12px;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      font-size: 0.95em;
      font-weight: 800;
      color: #1e293b;
      cursor: pointer;
      transition: all 0.2s ease;
      width: 100%;
    }

    #custTagPos:hover {
      border-color: #F6A61F;
      background-color: #fffbf0;
    }

    #custTagPos:focus {
      outline: none;
      border-color: #F6A61F;
      box-shadow: 0 0 0 3px rgba(246, 166, 31, 0.15);
      background-color: white;
    }

    /* Delivery Instructions Select */
    #deliveryInstructions,
    #crmDeliveryInstructions {
      padding: 10px 36px 10px 12px;
      border: 2px solid #cbd5e1;
      border-radius: 8px;
      background-color: white;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23F6A61F' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 12px center;
      background-size: 12px;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      font-size: 0.95em;
      font-weight: 800;
      color: #1e293b;
      cursor: pointer;
      transition: all 0.2s ease;
      width: 100%;
    }

    #deliveryInstructions:hover,
    #crmDeliveryInstructions:hover {
      border-color: #F6A61F;
      background-color: #fffbf0;
    }

    #deliveryInstructions:focus,
    #crmDeliveryInstructions:focus {
      outline: none;
      border-color: #F6A61F;
      box-shadow: 0 0 0 3px rgba(246, 166, 31, 0.15);
      background-color: white;
    }

    /* Tax Type Select */
    #taxType {
      padding: 8px 36px 8px 12px;
      border: 2px solid #cbd5e1;
      border-radius: 8px;
      background-color: white;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23F6A61F' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 12px center;
      background-size: 12px;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      font-size: 0.9em;
      font-weight: 600;
      color: #1e293b;
      cursor: pointer;
      transition: all 0.2s;
      height: 36px;
      flex: 1;
    }

    #taxType:hover {
      border-color: #F6A61F;
      background-color: #fffbf0;
    }

    #taxType:focus {
      outline: none;
      border-color: #F6A61F;
      box-shadow: 0 0 0 3px rgba(246, 166, 31, 0.15);
      background-color: white;
    }

    /* Discount Type Select */
    #discType {
      width: 75px;
      height: 32px;
      padding: 6px 24px 6px 8px;
      background-color: #f1f5f9;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23F6A61F' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 6px center;
      background-size: 10px;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      border: 2px solid #cbd5e1;
      border-radius: 8px;
      cursor: pointer;
      font-size: 0.9em;
      font-weight: 600;
      color: #1e293b;
      text-align: center;
      transition: all 0.2s ease;
    }

    #discType:hover {
      border-color: #F6A61F;
      background-color: #fffbf0;
    }

    #discType:focus {
      outline: none;
      border-color: #F6A61F;
      box-shadow: 0 0 0 3px rgba(246, 166, 31, 0.15);
      background-color: white;
    }

    /* Country Code Select (Phone) */
    #custCountryCode {
      padding: 10px 8px;
      border: 2px solid #cbd5e1;
      border-radius: 8px;
      background-color: white;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23F6A61F' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 6px center;
      background-size: 10px;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      font-size: 0.9em;
      font-weight: 800;
      color: #1e293b;
      cursor: pointer;
      transition: all 0.2s ease;
      min-width: 110px;
    }

    #custCountryCode:hover {
      border-color: #F6A61F;
      background-color: #fffbf0;
    }

    #custCountryCode:focus {
      outline: none;
      border-color: #F6A61F;
      box-shadow: 0 0 0 3px rgba(246, 166, 31, 0.15);
      background-color: white;
    }

    /* Source Select Dropdown */
    .source-select {
      padding: 10px 36px 10px 12px;
      border: 2px solid #cbd5e1;
      border-radius: 8px;
      background-color: white;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23F6A61F' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 12px center;
      background-size: 12px;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      font-size: 0.95em;
      font-weight: 800;
      color: #1e293b;
      cursor: pointer;
      transition: all 0.2s ease;
      width: 100%;
    }

    .source-select:hover {
      border-color: #F6A61F;
      background-color: #fffbf0;
    }

    .source-select:focus {
      outline: none;
      border-color: #F6A61F;
      box-shadow: 0 0 0 3px rgba(246, 166, 31, 0.15);
      background-color: white;
    }

    /* Country & Currency Select Dropdown */
    .country-currency-select {
      padding: 10px 36px 10px 12px;
      border: 2px solid #cbd5e1;
      border-radius: 8px;
      background-color: white;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23F6A61F' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 12px center;
      background-size: 12px;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      font-size: 0.95em;
      font-weight: 600;
      color: #1e293b;
      cursor: pointer;
      transition: all 0.2s ease;
      width: 100%;
    }

    .country-currency-select:hover {
      border-color: #F6A61F;
      background-color: #fffbf0;
    }

    .country-currency-select:focus {
      outline: none;
      border-color: #F6A61F;
      box-shadow: 0 0 0 3px rgba(246, 166, 31, 0.15);
      background-color: white;
    }

    .input-group-rate {
      display: flex;
      align-items: center;
      background-color: white;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 0 10px;
      height: 36px;
      gap: 6px;
      flex: 1;
    }

    .rate-input {
      flex: 1;
      border: none;
      padding: 6px 0;
      font-size: 0.9em;
      font-weight: 600;
      color: #1e293b;
      text-align: center;
      max-width: 50px;
    }

    .rate-input:focus {
      outline: none;
    }

    /* ===== ORANGE GLOWING EFFECT FOR INPUT FIELDS ===== */

    /* Product Search Input */
    #productSearchInput {
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    #productSearchInput:focus {
      outline: none;
      border-color: #F6A61F !important;
      box-shadow: 0 0 0 3px rgba(246, 166, 31, 0.15) !important;
    }

    /* Tax Rate Input */
    #taxRate {
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    #taxRate:focus {
      outline: none;
      border-color: #F6A61F !important;
      box-shadow: 0 0 0 3px rgba(246, 166, 31, 0.15) !important;
    }

    .input-group-rate:focus-within {
      border-color: #F6A61F !important;
      box-shadow: 0 0 0 3px rgba(246, 166, 31, 0.15) !important;
    }

    /* Discount Input */
    #discountInput {
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    #discountInput:focus {
      outline: none;
      border-color: #F6A61F !important;
      box-shadow: 0 0 0 3px rgba(246, 166, 31, 0.15) !important;
    }

    /* Delivery Fee Input */
    .delivery-input {
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .delivery-input:focus {
      outline: none;
      border-color: #F6A61F !important;
      box-shadow: 0 0 0 3px rgba(246, 166, 31, 0.15) !important;
    }

    /* Courier Cost Input */
    .courier-input {
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .courier-input:focus {
      outline: none;
      border-color: #F6A61F !important;
      box-shadow: 0 0 0 3px rgba(246, 166, 31, 0.15) !important;
    }

    /* Customer Search & Filter Inputs */
    #customerSearchInput:focus {
      outline: none;
      border-color: #F6A61F !important;
      box-shadow: 0 0 0 3px rgba(246, 166, 31, 0.15) !important;
    }

    #customerTagFilter:focus {
      outline: none;
      border-color: #F6A61F !important;
      box-shadow: 0 0 0 3px rgba(246, 166, 31, 0.15) !important;
    }

    /* Custom Item Modal Inputs */
    #customItemName,
    #customItemDesc,
    #customItemCost,
    #customItemPrice,
    #customItemQty,
    #customItemImage {
      transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    }

    #customItemName:focus,
    #customItemDesc:focus,
    #customItemCost:focus,
    #customItemPrice:focus,
    #customItemQty:focus,
    #customItemImage:focus {
      outline: none !important;
      border-color: #F6A61F !important;
      box-shadow: 0 0 0 3px rgba(246, 166, 31, 0.15) !important;
    }

    /* Error State Animation */
    @keyframes shake {

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

      10%,
      30%,
      50%,
      70%,
      90% {
        transform: translateX(-4px);
      }

      20%,
      40%,
      60%,
      80% {
        transform: translateX(4px);
      }
    }

    @keyframes fadeOutError {
      0% {
        border-color: #ef4444;
        background-color: #fef2f2;
      }

      100% {
        border-color: #e2e8f0;
        background-color: white;
      }
    }

    @keyframes pulse-blue {

      0%,
      100% {
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.35), 0 0 20px rgba(59, 130, 246, 0.2);
      }

      50% {
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.5), 0 0 30px rgba(59, 130, 246, 0.35);
      }
    }

    @keyframes pulse-red {

      0%,
      100% {
        box-shadow: 0 4px 12px rgba(239, 68, 68, 0.35), 0 0 20px rgba(239, 68, 68, 0.2);
      }

      50% {
        box-shadow: 0 4px 12px rgba(239, 68, 68, 0.5), 0 0 30px rgba(239, 68, 68, 0.35);
      }
    }

    @keyframes pulse-gray {

      0%,
      100% {
        box-shadow: 0 4px 12px rgba(148, 163, 184, 0.35), 0 0 20px rgba(148, 163, 184, 0.2);
      }

      50% {
        box-shadow: 0 4px 12px rgba(148, 163, 184, 0.5), 0 0 30px rgba(148, 163, 184, 0.35);
      }
    }

    @keyframes pulse-purple {

      0%,
      100% {
        box-shadow: 0 4px 12px rgba(139, 92, 246, 0.35), 0 0 20px rgba(139, 92, 246, 0.2);
      }

      50% {
        box-shadow: 0 4px 12px rgba(139, 92, 246, 0.5), 0 0 30px rgba(139, 92, 246, 0.35);
      }
    }

    @keyframes pulse-green {

      0%,
      100% {
        box-shadow: 0 2px 8px rgba(22, 101, 52, 0.2), 0 0 12px rgba(22, 101, 52, 0.12);
      }

      50% {
        box-shadow: 0 2px 10px rgba(22, 101, 52, 0.35), 0 0 18px rgba(22, 101, 52, 0.2);
      }
    }

    @keyframes pulse-pink {

      0%,
      100% {
        box-shadow: 0 2px 8px rgba(157, 23, 77, 0.15), 0 0 12px rgba(157, 23, 77, 0.1);
      }

      50% {
        box-shadow: 0 2px 8px rgba(157, 23, 77, 0.25), 0 0 18px rgba(157, 23, 77, 0.2);
      }
    }

    @keyframes pulse-yellow {

      0%,
      100% {
        box-shadow: 0 2px 8px rgba(146, 64, 14, 0.15), 0 0 12px rgba(146, 64, 14, 0.1);
      }

      50% {
        box-shadow: 0 2px 8px rgba(146, 64, 14, 0.25), 0 0 18px rgba(146, 64, 14, 0.2);
      }
    }

    @keyframes pulse-red-light {

      0%,
      100% {
        box-shadow: 0 2px 8px rgba(153, 27, 27, 0.15), 0 0 12px rgba(153, 27, 27, 0.1);
      }

      50% {
        box-shadow: 0 2px 8px rgba(153, 27, 27, 0.25), 0 0 18px rgba(153, 27, 27, 0.2);
      }
    }

    @keyframes pulse-indigo {

      0%,
      100% {
        box-shadow: 0 2px 8px rgba(55, 48, 163, 0.15), 0 0 12px rgba(55, 48, 163, 0.1);
      }

      50% {
        box-shadow: 0 2px 8px rgba(55, 48, 163, 0.25), 0 0 18px rgba(55, 48, 163, 0.2);
      }
    }

    .input-error {
      border: 2px solid #ef4444 !important;
      background: #fef2f2 !important;
      animation: shake 0.4s ease-in-out;
      transition: border-color 0.3s ease, background-color 0.3s ease;
    }

    .input-error.fading {
      animation: fadeOutError 0.8s ease forwards;
    }

    .input-error::placeholder {
      color: #ef4444;
    }

    /* Product form glow (orange) */
    .product-input {
      border: 2px solid #cbd5e1;
      background: #ffffff;
      transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    }

    .product-input.required-error {
      border-color: #dc2626 !important;
      background-color: #fee2e2 !important;
      box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.08) inset;
    }

    .product-input.required-error.fading {
      border-color: #e5e7eb !important;
      background-color: #ffffff !important;
      box-shadow: none;
    }

    .product-input:hover {
      border-color: #F6A61F !important;
      box-shadow: 0 0 0 2px rgba(246, 166, 31, 0.25) !important;
    }

    .product-input:focus {
      outline: none;
      border-color: #F6A61F !important;
      box-shadow: 0 0 0 3px rgba(246, 166, 31, 0.35) !important;
    }

    .rate-symbol {
      font-weight: 700;
      color: #64748b;
      font-size: 0.85em;
      flex-shrink: 0;
    }

    .summary-section {
      display: flex;
      flex-direction: column;
      gap: 4px;
      padding: 0;
    }

    .summary-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 6px 0;
      border-bottom: 1px solid #f1f5f9;
      gap: 8px;
      transition: background-color 0.2s ease;
    }

    .summary-row:hover {
      background-color: rgba(248, 250, 252, 0.5);
      border-radius: 6px;
      padding-left: 6px;
      padding-right: 6px;
    }

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

    .discount-row {
      gap: 12px;
      margin-bottom: 4px;
    }

    .summary-label {
      font-size: 0.85em;
      color: #475569;
      font-weight: 600;
      flex: 1;
      min-width: 0;
      overflow-wrap: break-word;
      word-break: break-word;
      padding-right: 8px;
      line-height: 1.3;
    }

    .summary-value {
      font-size: 0.88em;
      font-weight: 700;
      color: #1e293b;
      text-align: right;
      min-width: 90px;
      max-width: 140px;
      flex-shrink: 0;
      background: #f8fafc;
      padding: 5px 10px;
      border-radius: 6px;
      border: 1px solid #e2e8f0;
      overflow-wrap: break-word;
      word-break: break-word;
    }

    .discount-value {
      color: #dc2626;
      background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
      border-color: #fca5a5;
    }

    .delivery-input {
      padding: 8px 12px;
      border: 2px solid #cbd5e1;
      border-radius: 6px;
      font-size: 0.95em;
      font-weight: 800;
      color: #1e293b;
      text-align: right;
      width: 110px;
      background: white;
      transition: all 0.2s;
    }

    .delivery-input:focus {
      outline: none;
      border-color: #3b82f6;
      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
      transform: scale(1.02);
    }

    /* TOTAL HIGHLIGHT */
    .total-highlight {
      background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
      padding: 14px 16px;
      border-radius: 10px;
      text-align: center;
      box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2), 0 1px 4px rgba(59, 130, 246, 0.1);
      position: relative;
      overflow: hidden;
      margin-bottom: 0;
    }

    .total-highlight::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
      animation: shimmer 3s linear infinite;
    }

    @keyframes shimmer {
      0% {
        transform: translate(-50%, -50%) rotate(0deg);
      }

      100% {
        transform: translate(-50%, -50%) rotate(360deg);
      }
    }

    .total-label {
      font-size: 0.75em;
      font-weight: 700;
      color: rgba(255, 255, 255, 0.9);
      text-transform: uppercase;
      letter-spacing: 0.8px;
      margin-bottom: 2px;
    }

    .total-amount {
      font-size: 1.6em;
      font-weight: 900;
      color: white;
      letter-spacing: -0.5px;
      position: relative;
      z-index: 1;
    }

    /* COURIER SECTION */
    .courier-section {
      background: linear-gradient(135deg, #f0f4f8 0%, #e0e7ff 100%);
      padding: 10px 14px;
      border-radius: 8px;
      border: 1.5px solid #dbeafe;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      margin-bottom: 0;
      margin-top: -6px;
      transition: all 0.2s ease;
    }

    .courier-section:focus-within {
      border-color: #3b82f6;
      box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
      transform: translateY(-2px);
    }

    .currency-section {
      margin: 2px 0 !important;
    }

    .payment-status-section {
      margin: -4px 0 4px 0 !important;
    }

    /* Partial Payment Section */
    .partial-payment-section {
      margin-top: 16px;
      animation: slideDown 0.3s ease-out;
    }

    @keyframes slideDown {
      from {
        opacity: 0;
        transform: translateY(-10px);
      }

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

    .partial-payment-card {
      background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
      border: 2px solid #cbd5e1;
      border-radius: 10px;
      padding: 10px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
      transition: all 0.3s ease;
    }

    .partial-payment-card:hover {
      box-shadow: 0 4px 12px rgba(246, 166, 31, 0.12);
      border-color: #F6A61F;
    }

    .partial-payment-header {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 0.85em;
      font-weight: 700;
      color: #1e293b;
      margin-bottom: 10px;
      padding-bottom: 8px;
      border-bottom: 2px dashed #e2e8f0;
    }

    .partial-icon {
      font-size: 1.2em;
      animation: pulse 2s ease-in-out infinite;
    }

    @keyframes pulse {

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

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

    .partial-payment-fields {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-bottom: 10px;
    }

    .partial-field-group {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .partial-label {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 0.85em;
      font-weight: 600;
      color: #475569;
    }

    .partial-label-icon {
      font-size: 1.1em;
    }

    .partial-input {
      width: 100%;
      padding: 8px 10px;
      border: 2px solid #cbd5e1;
      border-radius: 8px;
      font-size: 0.95em;
      font-weight: 700;
      color: #1e293b;
      background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
      transition: all 0.2s ease;
    }

    .partial-input:hover:not(:read-only) {
      border-color: #F6A61F;
      box-shadow: 0 0 0 2px rgba(246, 166, 31, 0.1);
    }

    .partial-input:focus {
      outline: none;
      border-color: #F6A61F;
      box-shadow: 0 0 0 3px rgba(246, 166, 31, 0.15);
      transform: scale(1.01);
    }

    .partial-readonly {
      cursor: not-allowed;
      background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
      color: #92400e;
    }

    .partial-payment-summary {
      padding-top: 8px;
      border-top: 2px dashed #e2e8f0;
    }

    .partial-summary-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 10px;
      background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
      border-radius: 8px;
      font-weight: 700;
      color: #1e3a8a;
    }

    .partial-total-value {
      font-size: 1.1em;
      font-weight: 800;
      color: #1e3a8a;
    }

    .courier-input {
      padding: 8px 12px;
      border: 2px solid #cbd5e1;
      border-radius: 6px;
      font-size: 0.95em;
      font-weight: 800;
      color: #1e293b;
      text-align: right;
      width: 100px;
      background: white;
      transition: all 0.2s ease;
    }

    .courier-input:focus {
      outline: none;
      border-color: #3b82f6;
      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
      transform: scale(1.02);
    }

    /* RTL SUPPORT */
    body[dir="rtl"] .totals-container {
      margin-left: 0;
      margin-right: auto;
    }

    body[dir="rtl"] .summary-row {
      flex-direction: row-reverse;
    }

    body[dir="rtl"] .discount-row {
      flex-direction: row-reverse;
    }

    body[dir="rtl"] .courier-section {
      flex-direction: row-reverse;
    }

    body[dir="rtl"] .settings-grid {
      direction: rtl;
    }

    body[dir="rtl"] .delivery-input,
    body[dir="rtl"] .courier-input {
      text-align: left;
    }

    /* RTL Dropdown Arrow Position on Mobile */
    @media (max-width: 768px) {
      body[dir="rtl"] select {
        background-position: left 12px center;
        padding-left: 36px;
        padding-right: 12px;
      }

      /* RTL Input Group (Phone Number Field) */
      body[dir="rtl"] .input-group select {
        border-radius: 8px !important;
        border: 2px solid #cbd5e1 !important;
        transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
      }

      body[dir="rtl"] .input-group select:hover {
        border-color: #F6A61F !important;
        background-color: #fffbf0 !important;
      }

      body[dir="rtl"] .input-group select:focus {
        outline: none !important;
        border-color: #F6A61F !important;
        box-shadow: 0 0 0 3px rgba(246, 166, 31, 0.15) !important;
        background-color: white !important;
      }

      body[dir="rtl"] .input-group input {
        border-radius: 8px !important;
        border: 2px solid #cbd5e1 !important;
        transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
      }

      body[dir="rtl"] .input-group input:focus {
        outline: none !important;
        border-color: #F6A61F !important;
        box-shadow: 0 0 0 3px rgba(246, 166, 31, 0.15) !important;
      }

      /* RTL Customer Details Header */
      body[dir="rtl"] #custDetailsHeader>div:first-child {
        flex-direction: row-reverse;
      }

      body[dir="rtl"] #custDetailsHeader {
        flex-direction: row-reverse;
      }

      body[dir="rtl"] #custDetailsHeader h4 {
        text-align: right;
      }
    }

    /* MOBILE RESPONSIVE */
    @media (max-width: 768px) {
      .totals-container {
        max-width: 100%;
        padding: 14px 12px;
        gap: 8px;
        border-radius: 12px;
      }

      .total-amount {
        font-size: 1.5em;
      }

      .total-highlight {
        padding: 12px 10px;
      }

      .settings-grid {
        grid-template-columns: 1fr;
        gap: 10px;
      }

      .summary-row {
        padding: 5px 0;
        gap: 6px;
      }

      .summary-label {
        font-size: 0.8em;
        padding-right: 6px;
      }

      .summary-value {
        font-size: 0.82em;
        min-width: 80px;
        max-width: 130px;
        padding: 4px 8px;
      }
    }

    @media (max-width: 480px) {
      .totals-container {
        padding: 12px 10px;
        border-radius: 10px;
      }

      .total-highlight {
        padding: 10px;
        border-radius: 8px;
      }

      .total-amount {
        font-size: 1.35em;
      }

      .total-label {
        font-size: 0.7em;
      }

      .summary-label {
        font-size: 0.78em;
      }

      .summary-value {
        font-size: 0.78em;
        min-width: 75px;
        max-width: 110px;
        padding: 3px 6px;
      }

      .settings-section {
        padding: 8px 10px;
      }

      .courier-section {
        flex-direction: row;
        align-items: center;
        gap: 6px;
        padding: 8px 10px;
      }

      body[dir="rtl"] .courier-section {
        flex-direction: row-reverse;
      }
    }

    /* BETTER TOTALS ALIGNMENT (legacy) */
    .totals-row {
      gap: 12px;
    }

    .totals-row span {
      min-width: 90px;
      text-align: right;
      font-weight: bold;
    }

    body[dir="rtl"] .totals-row {
      grid-template-columns: auto 1fr;
      direction: rtl;
    }

    body[dir="rtl"] .totals-row label {
      text-align: right;
    }

    body[dir="rtl"] .totals-row span {
      text-align: left;
    }

    body[dir="rtl"] .totals-row input {
      text-align: left;
    }

    body[dir="rtl"] .totals-row>div {
      text-align: left;
    }

    body[dir="rtl"] .totals-row>div>div {
      flex-direction: row-reverse;
    }

    /* ===== FOOTER (PRO CLEAN STYLE) ===== */
    .app-footer {
      margin-top: 40px;
      padding: 16px 20px;
      border-top: 1px solid #e5e7eb;
      background: #f8fafc;
    }

    .footer-inner {
      max-width: 1100px;
      margin: auto;
      text-align: center;
      color: #64748b;
      font-size: 11px;
      line-height: 1.6;
    }

    .footer-brand {
      font-weight: 600;
      color: #334155;
      margin-bottom: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    .footer-version {
      font-size: 10px;
      color: #94a3b8;
    }

    .footer-legal {
      margin-bottom: 2px;
    }

    .footer-contact a {
      color: #3b82f6;
      text-decoration: none;
    }

    .footer-contact a:hover {
      text-decoration: underline;
    }

    .footer-about-btn {
      display: inline-block;
      background: none;
      border: none;
      color: #3b82f6;
      cursor: pointer;
      font-size: 11px;
      font-weight: 600;
      text-decoration: underline;
      padding: 2px 6px;
      margin: 0 4px;
      transition: 0.2s;
    }

    .footer-about-btn:hover {
      color: #2563eb;
    }

    /* Footer language toggle */
    .footer-lang-toggle {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      background: none;
      border: none;
      color: #3b82f6;
      cursor: pointer;
      font-size: 11px;
      font-weight: 600;
      padding: 2px 6px;
      margin: 0 4px;
      transition: 0.2s;
    }

    .footer-lang-toggle:hover {
      color: #2563eb;
    }

    .footer-lang-toggle span {
      line-height: 1;
    }

    @media print {
      .app-footer {
        display: none;
      }
    }

    /* ===== Failed order (strong red) ===== */
    .status-pill.ord-failed {
      background: #7f1d1d;
      /* dark red */
      color: #ffffff;
      border: 1px solid #991b1b;
    }

    /* ===== Shipped order ===== */
    .status-pill.ord-shipped {
      background: #cffafe;
      /* light cyan */
      color: #155e75;
      /* dark teal text */
      border: 1px solid #67e8f9;
    }

    /* FORCE POS PRODUCT STRIP TO STAY INSIDE FRAME (override-heavy) */
    #posProducts,
    #productsGrid,
    #productGrid,
    .products-grid,
    .products-list {
      max-width: 100% !important;
      width: 100% !important;
      box-sizing: border-box !important;

      display: flex !important;
      /* override grid if grid is breaking */
      flex-wrap: wrap !important;
      /* key: wrap, don't overflow */
      gap: 10px !important;

      overflow: hidden !important;
      /* keep the frame clean */
    }

    /* cards must be responsive, not fixed */
    #posProducts .product-card,
    #productsGrid .product-card,
    #productGrid .product-card,
    .products-grid .product-card,
    .products-list .product-card {
      box-sizing: border-box !important;
      width: calc(50% - 10px) !important;
      /* 2 per row on mobile */
      max-width: calc(50% - 10px) !important;
      min-width: 140px !important;
      /* prevents super tiny cards */
    }

    /* desktop: more columns */
    @media (min-width: 900px) {

      #posProducts .product-card,
      #productsGrid .product-card,
      #productGrid .product-card,
      .products-grid .product-card,
      .products-list .product-card {
        width: 160px !important;
        max-width: 160px !important;
      }
    }

    /* images must never spill out */
    .product-card img,
    .product-card .product-img {
      max-width: 100% !important;
      height: auto !important;
      display: block !important;
    }

    /* ================================================
       SELECT2 CUSTOM STYLES
       ================================================ */

    /* Match app input styling */
    .select2-container--default .select2-selection--single {
      border: 2px solid #cbd5e1;
      border-radius: 8px;
      min-height: 44px;
      padding: 12px 14px;
      background-color: white;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23F6A61F' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 12px center;
      background-size: 12px;
      transition: 0.2s;
      width: 100% !important;
      max-width: 100%;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      font-size: 14px;
      font-family: inherit;
    }

    .select2-container {
      width: 100% !important;
      max-width: 100%;
      box-sizing: border-box;
    }

    .select2-container--default .select2-selection--single:hover {
      border-color: #F6A61F;
      background-color: #fffbf0;
      box-shadow: 0 0 0 3px rgba(246, 166, 31, 0.15);
    }

    .select2-container--default.select2-container--focus .select2-selection--single {
      border-color: #F6A61F;
      box-shadow: 0 0 0 3px rgba(246, 166, 31, 0.1);
      outline: none;
    }

    .select2-container--default .select2-selection--single .select2-selection__rendered {
      line-height: 1.4;
      color: #1e293b;
      padding: 0;
      margin: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: calc(100% - 30px);
      display: block;
      transform: translate(-12px, -5px);
      font-weight: 800;
    }

    .select2-container--default .select2-selection--single .select2-selection__placeholder {
      color: #94a3b8;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: calc(100% - 30px);
      display: block;
      margin: 0;
      padding: 0;
      transform: translate(-12px, -5px) !important;
      line-height: 1.4;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow {
      display: none;
    }

    .input-group .select2-container {
      flex: 0 0 auto;
      align-self: stretch;
    }

    .country-select+.select2-container {
      width: 120px !important;
      min-width: 120px !important;
      max-width: 120px !important;
    }

    .country-select+.select2-container .select2-selection--single {
      padding: 12px 4px 12px 4px !important;
      background-image: none !important;
    }

    .country-select+.select2-container .select2-selection__rendered,
    .country-select+.select2-container .select2-selection__placeholder {
      max-width: 100%;
      transform: translate(2px, -6px) !important;
      overflow: visible;
      text-overflow: clip;
      white-space: nowrap;
      padding-left: 0 !important;
      padding-right: 0 !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
      line-height: 1.4;
    }

    .country-select+.select2-container .select2-selection__arrow {
      right: 2px !important;
    }

    /* RTL adjustments for Select2 arrow (flip to left) */
    body[dir="rtl"] .select2-container--default .select2-selection--single {
      background-position: left 12px center;
    }

    /* RTL adjustments for phone country code */
    body[dir="rtl"] .country-select+.select2-container .select2-selection__arrow {
      right: auto !important;
      left: 2px !important;
    }

    body[dir="rtl"] .country-select+.select2-container .select2-selection__rendered,
    body[dir="rtl"] .country-select+.select2-container .select2-selection__placeholder {
      transform: translate(0px, -6px) !important;
    }

    /* Dropdown styling */
    .select2-dropdown {
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
      overflow: hidden;
      z-index: 3005;
    }

    .select2-container--open {
      z-index: 3005;
    }

    .select2-container--default .select2-results__option {
      padding: 8px 12px;
      color: #334155;
      font-weight: 700;
    }

    .select2-container--default .select2-results__option--highlighted[aria-selected] {
      background-color: #FFF7ED;
      color: #F6A61F;
    }

    .select2-container--default .select2-results__option[aria-selected=true] {
      background-color: #F6A61F;
      color: white;
    }

    /* ================================================
       DASHBOARD: CUSTOMER SOURCES BREAKDOWN
       ================================================ */
    .source-breakdown-row {
      display: grid;
      grid-template-columns: 64px 1fr 90px;
      gap: 12px;
      align-items: center;
      padding: 12px;
      border-bottom: 1px solid #e5e7eb;
      border-radius: 10px;
    }

    .source-breakdown-percent {
      width: 64px;
      height: 64px;
      border-radius: 14px;
      background: var(--src-color, #94a3b8);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      font-size: 0.95rem;
      line-height: 1;
      text-align: center;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
      padding: 6px;
      word-break: keep-all;
    }

    .source-breakdown-body {
      min-width: 0;
    }

    .source-breakdown-title {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 4px;
    }

    .source-breakdown-title-text {
      font-weight: 700;
      color: #1e293b;
      font-size: 1em;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
    }

    .source-breakdown-label {
      display: inline-block;
    }

    .source-breakdown-count {
      background: color-mix(in srgb, var(--src-color, #94a3b8) 15%, transparent);
      color: var(--src-color, #94a3b8);
      padding: 2px 8px;
      border-radius: 8px;
      font-size: 0.75em;
      font-weight: 700;
      white-space: nowrap;
    }

    .source-breakdown-metrics {
      display: flex;
      gap: 14px;
      font-size: 0.85em;
      color: #64748b;
      flex-wrap: wrap;
    }

    .source-breakdown-bar {
      height: 8px;
      background: #e5e7eb;
      border-radius: 6px;
      overflow: hidden;
      width: 100%;
    }

    .source-breakdown-bar-fill {
      height: 100%;
      background: var(--src-color, #94a3b8);
      transition: width 0.3s ease;
    }

    @media (max-width: 640px) {
      .source-breakdown-row {
        grid-template-columns: 56px 1fr;
        grid-template-rows: auto auto;
      }

      .source-breakdown-percent {
        width: 56px;
        height: 56px;
        font-size: 0.85rem;
      }

      .source-breakdown-bar {
        grid-column: 1 / -1;
        margin-top: 6px;
      }
    }

    @media (max-width: 640px) {
      .expense-cta {
        flex-direction: column;
        align-items: flex-start;
      }

      .expense-cta .btn {
        width: 100%;
      }

      .dash-subtitle {
        display: none;
      }
    }

    /* Search field in dropdown */
    .select2-search--dropdown .select2-search__field {
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 8px 12px;
      outline: none;
      font-size: 14px;
    }

    .select2-search--dropdown .select2-search__field:focus {
      border-color: #F6A61F;
      box-shadow: 0 0 0 2px rgba(246, 166, 31, 0.1);
    }

    /* RTL support for Select2 */
    body[dir="rtl"] .select2-container--default .select2-selection--single .select2-selection__arrow {
      left: 8px;
      right: auto;
    }

    body[dir="rtl"] .select2-container--default .select2-selection--single .select2-selection__rendered {
      padding-left: 0;
      padding-right: 0;
      transform: translate(6px, -5px);
    }

    body[dir="rtl"] .select2-container--default .select2-selection--single .select2-selection__placeholder {
      transform: translate(6px, -5px) !important;
    }

    /* ========================================= */
    /* jQuery Validation Styling                */
    /* ========================================= */

    /* Error message text */
    .validation-error {
      display: block;
      color: #ef4444;
      font-size: 13px;
      margin-top: 4px;
      margin-bottom: 8px;
      font-weight: 500;
      animation: slideDown 0.2s ease-out;
    }

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

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

    /* Input fields with errors */
    .validation-error-input {
      border-color: #ef4444 !important;
      box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
      animation: shake 0.3s ease-in-out;
    }

    @keyframes shake {

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

      25% {
        transform: translateX(-4px);
      }

      75% {
        transform: translateX(4px);
      }
    }

    @keyframes pulse {

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

      50% {
        opacity: 0.8;
        transform: scale(1.02);
      }
    }

    /* Focus state for error inputs */
    .validation-error-input:focus {
      border-color: #ef4444 !important;
      box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
    }

    /* Select2 error styling */
    .select2-container .select2-selection.validation-error-input {
      border-color: #ef4444 !important;
      box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
    }

    /* Valid state (optional - green feedback) */
    input.valid,
    select.valid,
    textarea.valid {
      border-color: #10b981 !important;
    }

    input.valid:focus,
    select.valid:focus,
    textarea.valid:focus {
      box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1) !important;
    }

    /* RTL adjustments for validation messages */
    body[dir="rtl"] .validation-error {
      text-align: right;
    }

    /* Mobile responsive validation */
    @media (max-width: 520px) {
      .validation-error {
        font-size: 12px;
      }
    }

    /* ========================================= */
    /* DataTables Custom Styling                */
    /* ========================================= */

    /* Hide search box */
    .dataTables_filter {
      display: none !important;
    }

    /* Style length menu dropdown only */
    .dataTables_length {
      float: right;
      margin-top: 15px;
      margin-bottom: 10px;
    }

    .dataTables_length label {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      font-weight: normal;
      color: #64748b;
    }

    .dataTables_length select {
      padding: 6px 32px 6px 12px;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      background: white;
      font-size: 14px;
      cursor: pointer;
      transition: all 0.2s;
    }

    .dataTables_length select:hover {
      border-color: #F6A61F;
    }

    .dataTables_length select:focus {
      outline: none;
      border-color: #F6A61F;
      box-shadow: 0 0 0 3px rgba(246, 166, 31, 0.1);
    }

    /* RTL adjustments */
    body[dir="rtl"] .dataTables_length {
      float: left;
    }

    /* Mobile responsive */
    @media (max-width: 520px) {
      .dataTables_length {
        float: none;
        text-align: center;
        margin-top: 10px;
      }

      .dataTables_length label {
        justify-content: center;
      }
    }

    /* ========================================= */
    /* Modal Form Elements Enhancement          */
    /* ========================================= */

    /* Modal Input Fields */
    .modal input[type="text"],
    .modal input[type="number"],
    .modal input[type="email"],
    .modal input[type="tel"],
    .modal textarea,
    .modal select {
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .modal input:focus,
    .modal textarea:focus,
    .modal select:focus {
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(246, 166, 31, 0.15) !important;
    }

    /* Modal Buttons */
    .modal button {
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      overflow: hidden;
    }

    .modal button::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0;
      height: 0;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.3);
      transform: translate(-50%, -50%);
      transition: width 0.6s, height 0.6s;
    }

    .modal button:active::before {
      width: 300px;
      height: 300px;
    }

    .modal button:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    }

    .modal button:active {
      transform: translateY(0);
    }

    /* Modal Success Animation */
    @keyframes successPulse {

      0%,
      100% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
      }

      50% {
        box-shadow: 0 0 0 15px rgba(34, 197, 94, 0);
      }
    }

    .modal-content.success {
      animation: successPulse 1s ease-out;
      border-color: #22c55e;
    }

    /* ========================================= */
    /* SweetAlert2 Confirm Dialog Styling       */
    /* ========================================= */

    .swal2-container {
      z-index: 12000 !important;
    }

    #toast-container,
    .toast-top-center {
      z-index: 12000 !important;
    }

    .confirm-dialog-popup {
      border-radius: 20px !important;
      padding: 30px !important;
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
    }

    .confirm-dialog-title {
      font-size: 1.5em !important;
      font-weight: 700 !important;
      color: #1e293b !important;
      margin-bottom: 15px !important;
    }

    .confirm-dialog-text {
      font-size: 1em !important;
      color: #64748b !important;
      line-height: 1.6 !important;
    }

    .confirm-dialog-btn-confirm {
      background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
      border: none !important;
      border-radius: 10px !important;
      padding: 12px 28px !important;
      font-weight: 600 !important;
      font-size: 1em !important;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
      box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3) !important;
    }

    .confirm-dialog-btn-confirm:hover {
      transform: translateY(-2px) !important;
      box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4) !important;
    }

    .confirm-dialog-btn-confirm:active {
      transform: translateY(0) !important;
    }

    /* Success button variant (green) */
    .swal2-styled.swal2-confirm[style*="background-color: rgb(16, 185, 129)"],
    .swal2-styled.swal2-confirm[style*="background-color:#10b981"] {
      background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
      box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
    }

    .swal2-styled.swal2-confirm[style*="background-color: rgb(16, 185, 129)"]:hover,
    .swal2-styled.swal2-confirm[style*="background-color:#10b981"]:hover {
      transform: translateY(-2px) !important;
      box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4) !important;
    }

    .confirm-dialog-btn-cancel {
      background: linear-gradient(135deg, #64748b 0%, #475569 100%) !important;
      border: none !important;
      border-radius: 10px !important;
      padding: 12px 28px !important;
      font-weight: 600 !important;
      font-size: 1em !important;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
      box-shadow: 0 4px 12px rgba(100, 116, 139, 0.3) !important;
    }

    .confirm-dialog-btn-cancel:hover {
      transform: translateY(-2px) !important;
      box-shadow: 0 6px 20px rgba(100, 116, 139, 0.4) !important;
    }

    .confirm-dialog-btn-cancel:active {
      transform: translateY(0) !important;
    }

    .dup-import-popup {
      width: min(92vw, 420px) !important;
      border-radius: 14px !important;
      border: 2px solid rgba(246, 166, 31, 0.35) !important;
      background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
      box-shadow: 0 10px 24px rgba(15, 23, 42, 0.16), 0 0 14px rgba(246, 166, 31, 0.14) !important;
      padding: 14px 14px 12px !important;
    }

    .dup-import-title {
      color: #0f172a !important;
      font-weight: 800 !important;
      font-size: 1.05em !important;
      text-shadow: 0 0 10px rgba(246, 166, 31, 0.12);
    }

    .dup-import-popup .swal2-html-container {
      color: #475569 !important;
      font-weight: 600 !important;
      font-size: 0.9em !important;
      margin-top: 4px !important;
    }

    .dup-import-popup .swal2-radio {
      margin: 10px 0 6px 0 !important;
      text-align: start !important;
      display: grid !important;
      gap: 6px !important;
      padding: 0 !important;
    }

    .dup-import-popup .swal2-radio input {
      display: none !important;
    }

    .dup-import-popup .swal2-radio label {
      margin: 0 !important;
      padding: 8px 10px !important;
      border: 1px solid #dbe3ef !important;
      border-radius: 8px !important;
      background: #ffffff !important;
      transition: all 0.2s ease !important;
      font-weight: 600 !important;
      font-size: 0.92em !important;
      color: #334155 !important;
      cursor: pointer !important;
    }

    .dup-import-popup .swal2-radio label:hover {
      border-color: #F6A61F !important;
      box-shadow: 0 0 0 3px rgba(246, 166, 31, 0.12) !important;
      background: #fffaf0 !important;
    }

    .dup-import-popup .swal2-radio input:checked+span {
      color: #0f172a !important;
      font-weight: 800 !important;
    }

    .dup-import-popup .swal2-actions {
      margin-top: 10px !important;
    }

    .dup-import-popup .swal2-styled {
      padding: 8px 16px !important;
      font-size: 0.9em !important;
    }

    .dup-import-confirm {
      background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%) !important;
      box-shadow: 0 4px 12px rgba(2, 132, 199, 0.35) !important;
      border-radius: 10px !important;
      font-weight: 700 !important;
    }

    .dup-import-cancel {
      background: linear-gradient(135deg, #64748b 0%, #475569 100%) !important;
      box-shadow: 0 4px 12px rgba(71, 85, 105, 0.28) !important;
      border-radius: 10px !important;
      font-weight: 700 !important;
    }

    /* Success dialog with custom icon */
    .success-dialog-popup {
      border-radius: 16px !important;
      padding: 20px !important;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15) !important;
      max-width: 400px !important;
    }

    .success-dialog-btn {
      background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
      border: none !important;
      border-radius: 10px !important;
      padding: 11px 28px !important;
      font-weight: 600 !important;
      font-size: 0.95em !important;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
      box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
      color: white !important;
    }

    .success-dialog-btn:hover {
      transform: translateY(-2px) !important;
      box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4) !important;
      background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
    }

    .success-dialog-btn:active {
      transform: translateY(0) !important;
    }

    /* SweetAlert2 icon styling */
    .swal2-icon.swal2-warning {
      border-color: #f59e0b !important;
      color: #f59e0b !important;
    }

    .swal2-icon.swal2-warning .swal2-icon-content {
      color: #f59e0b !important;
    }

    /* Activation Success Dialog */
    .activation-success-popup {
      border-radius: 20px !important;
      padding: 22px 18px !important;
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
      max-width: 360px !important;
    }

    .activation-success-popup .swal2-title {
      font-size: 1.35em !important;
      font-weight: 800 !important;
      color: #059669 !important;
      margin-bottom: 12px !important;
    }

    .activation-success-popup .swal2-icon.swal2-success {
      border-color: #10b981 !important;
      margin: 8px auto !important;
    }

    .activation-success-popup .swal2-icon.swal2-success [class^='swal2-success-line'] {
      background-color: #10b981 !important;
    }

    .activation-success-popup .swal2-icon.swal2-success .swal2-success-ring {
      border-color: rgba(16, 185, 129, 0.3) !important;
    }

    .activation-success-btn {
      background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
      border: none !important;
      border-radius: 12px !important;
      padding: 10px 28px !important;
      font-weight: 700 !important;
      font-size: 0.95em !important;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
      box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4) !important;
    }

    .activation-success-btn:hover {
      transform: translateY(-2px) !important;
      box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5) !important;
    }

    .activation-success-btn:active {
      transform: translateY(0) !important;
    }

    /* Update Required Dialog (Version Mismatch) */
    .update-required-popup {
      border-radius: 20px !important;
      padding: 22px 18px !important;
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
      max-width: 420px !important;
      animation: updatePopupEntry 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    }

    @keyframes updatePopupEntry {
      0% {
        opacity: 0;
        transform: scale(0.8) translateY(20px);
      }
      100% {
        opacity: 1;
        transform: scale(1) translateY(0);
      }
    }

    .update-required-popup .swal2-icon.swal2-warning {
      border-color: #f59e0b !important;
      color: #f59e0b !important;
      animation: warningPulse 2s ease-in-out infinite !important;
    }

    @keyframes warningPulse {
      0%, 100% {
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7);
      }
      50% {
        box-shadow: 0 0 0 12px rgba(245, 158, 11, 0);
      }
    }

    .update-required-popup .swal2-title {
      font-size: 1.4em !important;
      font-weight: 800 !important;
      color: #f59e0b !important;
      margin-bottom: 12px !important;
    }

    .update-required-popup .swal2-html-container {
      font-size: 0.95em !important;
      color: #475569 !important;
      line-height: 1.7 !important;
    }

    .update-required-popup .swal2-html-container strong {
      color: #1e293b !important;
      font-weight: 700 !important;
    }

    .update-required-btn {
      background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
      border: none !important;
      border-radius: 12px !important;
      padding: 12px 32px !important;
      font-weight: 700 !important;
      font-size: 1em !important;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
      box-shadow: 0 4px 14px rgba(245, 158, 11, 0.4) !important;
    }

    .update-required-btn:hover {
      transform: translateY(-3px) !important;
      box-shadow: 0 8px 24px rgba(245, 158, 11, 0.5) !important;
      background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
    }

    .update-required-btn:active {
      transform: translateY(-1px) !important;
    }

    .update-required-popup .swal2-footer {
      border-top: none !important;
      padding-top: 15px !important;
    }

    /* Restore Success Dialog */
    .restore-success-popup {
      border-radius: 20px !important;
      padding: 20px !important;
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.2) !important;
      max-width: 380px !important;
      background: linear-gradient(135deg, #ecfdf5 0%, #ffffff 100%) !important;
      animation: restoreSuccess 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    }

    @keyframes restoreSuccess {
      0% {
        opacity: 0;
        transform: scale(0.5) rotate(-5deg);
      }
      100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
      }
    }

    .restore-success-popup .swal2-icon.swal2-success {
      border-color: #10b981 !important;
      animation: successGlow 1.5s ease-in-out infinite !important;
    }

    @keyframes successGlow {
      0%, 100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6);
      }
      50% {
        box-shadow: 0 0 0 15px rgba(16, 185, 129, 0);
      }
    }

    .restore-success-popup .swal2-icon.swal2-success [class^='swal2-success-line'] {
      background-color: #10b981 !important;
    }

    .restore-success-popup .swal2-icon.swal2-success .swal2-success-ring {
      border-color: rgba(16, 185, 129, 0.3) !important;
    }

    .restore-success-popup .swal2-title {
      font-size: 1.4em !important;
      font-weight: 800 !important;
      color: #059669 !important;
      margin-bottom: 10px !important;
    }

    .restore-success-popup .swal2-html-container {
      font-size: 0.95em !important;
      color: #064e3b !important;
    }

    .restore-success-popup .swal2-html-container strong {
      color: #065f46 !important;
      font-weight: 700 !important;
    }

    /* Mobile responsive for confirm dialogs */
    @media (max-width: 768px) {
      .confirm-dialog-popup {
        padding: 12px !important;
        max-height: 85vh !important;
        overflow-y: auto !important;
        margin: 10px !important;
        max-width: calc(100vw - 20px) !important;
        border-radius: 12px !important;
      }

      .confirm-dialog-title {
        font-size: 0.95em !important;
        margin-bottom: 8px !important;
        line-height: 1.3 !important;
      }

      .confirm-dialog-text {
        max-height: 55vh !important;
        overflow-y: auto !important;
        margin-bottom: 12px !important;
        font-size: 0.8em !important;
        line-height: 1.4 !important;
      }

      .confirm-dialog-text p {
        margin: 6px 0 !important;
        font-size: 0.85em !important;
      }

      .confirm-dialog-text ul {
        margin: 8px 0 !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
      }

      .confirm-dialog-text li {
        margin: 4px 0 !important;
        font-size: 0.85em !important;
      }

      .confirm-dialog-btn-confirm,
      .confirm-dialog-btn-cancel {
        padding: 9px 18px !important;
        font-size: 0.85em !important;
        border-radius: 8px !important;
      }

      /* Ensure buttons are always visible */
      .swal2-actions {
        margin-top: 10px !important;
        gap: 8px !important;
        position: sticky !important;
        bottom: 0 !important;
        background: white !important;
        padding: 8px 0 4px 0 !important;
        z-index: 1 !important;
      }

      /* Fix SweetAlert container on mobile */
      .swal2-container {
        padding: 5px !important;
      }

      /* Reduce icon size on mobile — only for modal popups, NOT toasts */
      .swal2-popup:not(.swal2-toast) .swal2-icon {
        width: 60px !important;
        height: 60px !important;
        margin: 10px auto 12px !important;
        border-width: 3px !important;
      }

      .swal2-popup:not(.swal2-toast) .swal2-icon.swal2-warning {
        width: 60px !important;
        height: 60px !important;
        border-width: 3px !important;
      }

      .swal2-popup:not(.swal2-toast) .swal2-icon.swal2-warning .swal2-icon-content {
        font-size: 2.2em !important;
        line-height: 60px !important;
      }

      .swal2-popup:not(.swal2-toast) .swal2-icon.swal2-error {
        width: 60px !important;
        height: 60px !important;
        border-width: 3px !important;
      }

      .swal2-popup:not(.swal2-toast) .swal2-icon.swal2-error [class^='swal2-x-mark-line'] {
        height: 4px !important;
        width: 36px !important;
        background-color: #f27474 !important;
      }

      .swal2-popup:not(.swal2-toast) .swal2-icon.swal2-error .swal2-x-mark-line-left {
        left: 12px !important;
        top: 28px !important;
      }

      .swal2-popup:not(.swal2-toast) .swal2-icon.swal2-error .swal2-x-mark-line-right {
        right: 12px !important;
        top: 28px !important;
      }

      /* Success checkmark — scale down proportionally for 60px container */
      .swal2-popup:not(.swal2-toast) .swal2-icon.swal2-success {
        width: 60px !important;
        height: 60px !important;
        border-width: 3px !important;
        border-color: #a5dc86 !important;
      }

      .swal2-popup:not(.swal2-toast) .swal2-icon.swal2-success .swal2-success-ring {
        width: 60px !important;
        height: 60px !important;
        border-width: 3px !important;
      }

      .swal2-popup:not(.swal2-toast) .swal2-icon.swal2-success [class^='swal2-success-line'] {
        height: 4px !important;
        background-color: #a5dc86 !important;
      }

      .swal2-popup:not(.swal2-toast) .swal2-icon.swal2-success .swal2-success-line-tip {
        top: 34px !important;
        left: 10px !important;
        width: 19px !important;
      }

      .swal2-popup:not(.swal2-toast) .swal2-icon.swal2-success .swal2-success-line-long {
        top: 28px !important;
        right: 6px !important;
        width: 35px !important;
      }

      .swal2-popup:not(.swal2-toast) .swal2-icon.swal2-success .swal2-success-fix {
        width: 6px !important;
        height: 60px !important;
        left: 22px !important;
        top: -2px !important;
      }

      .swal2-popup:not(.swal2-toast) .swal2-icon.swal2-success .swal2-success-circular-line-left,
      .swal2-popup:not(.swal2-toast) .swal2-icon.swal2-success .swal2-success-circular-line-right {
        width: 32px !important;
        height: 62px !important;
      }

      .swal2-popup:not(.swal2-toast) .swal2-icon.swal2-success .swal2-success-circular-line-left {
        top: -5px !important;
        left: -6px !important;
        border-radius: 62px 0 0 62px !important;
      }

      .swal2-popup:not(.swal2-toast) .swal2-icon.swal2-success .swal2-success-circular-line-right {
        top: -7px !important;
        right: -6px !important;
        border-radius: 0 62px 62px 0 !important;
      }

      /* Compact HTML content styling */
      .swal2-html-container {
        margin: 8px 0 !important;
        padding: 0 8px !important;
      }

      .swal2-popup {
        width: calc(100% - 20px) !important;
        max-width: 500px !important;
      }

      /* Success dialog mobile */
      .success-dialog-popup {
        padding: 15px !important;
        border-radius: 12px !important;
        max-width: calc(100vw - 30px) !important;
      }

      .success-dialog-popup h3 {
        font-size: 1em !important;
      }

      .success-dialog-popup p {
        font-size: 0.85em !important;
      }

      .success-dialog-btn {
        padding: 10px 24px !important;
        font-size: 0.9em !important;
        border-radius: 8px !important;
      }

      /* Update Required & Restore Success mobile */
      .update-required-popup,
      .restore-success-popup {
        padding: 16px !important;
        max-width: calc(100vw - 30px) !important;
        border-radius: 14px !important;
      }

      .update-required-popup .swal2-title,
      .restore-success-popup .swal2-title {
        font-size: 1.1em !important;
      }

      .update-required-popup .swal2-html-container,
      .restore-success-popup .swal2-html-container {
        font-size: 0.85em !important;
      }

      .update-required-btn {
        padding: 10px 24px !important;
        font-size: 0.9em !important;
      }

      /* Compact PIN dialog - mobile and web */
      .compact-pin-dialog {
        max-width: calc(100vw - 30px) !important;
        padding: 1em !important;
      }

      .compact-pin-dialog .compact-title {
        font-size: 1em !important;
        margin-bottom: 8px !important;
        padding: 0 !important;
      }

      .compact-pin-dialog .compact-content {
        margin: 8px 0 !important;
        padding: 0 !important;
      }

      .compact-pin-dialog .compact-actions {
        margin-top: 12px !important;
        gap: 8px !important;
      }

      .compact-pin-dialog .swal2-input {
        height: 40px !important;
        font-size: 16px !important;
        padding: 6px !important;
        margin: 6px 0 !important;
      }
    }

    /* Compact PIN dialog - desktop */
    .compact-pin-dialog {
      border-radius: 12px;
    }

    .compact-pin-dialog .swal2-html-container {
      overflow: hidden !important;
    }

    .compact-pin-dialog .compact-title {
      font-size: 1em !important;
      padding: 0 !important;
      margin: 0 0 8px 0 !important;
    }

    .compact-pin-dialog .pin-input::placeholder {
      letter-spacing: 0 !important;
    }

    .compact-pin-dialog .swal2-input {
      display: block;
      width: 100%;
      max-width: 260px;
      margin-left: auto !important;
      margin-right: auto !important;
      border-radius: 8px;
      border: 1.5px solid #cbd5e1;
      transition: all 0.15s ease;
    }

    /* Orange glow (consistent with app inputs) */
    .compact-pin-dialog .swal2-input:hover {
      border-color: #F6A61F !important;
      box-shadow: 0 0 0 2px rgba(246, 166, 31, 0.12) !important;
    }

    .compact-pin-dialog .swal2-input:focus {
      border-color: #F6A61F !important;
      box-shadow: 0 0 0 3px rgba(246, 166, 31, 0.18) !important;
      outline: none;
    }

    .compact-pin-dialog .swal2-input:active {
      border-color: #F6A61F;
    }

    /* Equal-size buttons (mobile-friendly, no wrapping) */
    .compact-pin-dialog .compact-actions {
      display: flex;
      flex-wrap: nowrap;
      width: 100%;
      gap: 10px !important;
    }

    .compact-pin-dialog .compact-actions .btn {
      flex: 1 1 0;
      min-width: 0;
      height: 44px;
      padding: 10px 12px;
      font-size: 0.92em;
      border-radius: 10px;
      white-space: nowrap;
    }

    @media (max-width: 420px) {
      .compact-pin-dialog .compact-actions .btn {
        height: 42px;
        font-size: 0.88em;
        padding: 9px 10px;
      }

      .compact-pin-dialog .swal2-input {
        max-width: 240px;
      }
    }

    .compact-pin-dialog .swal2-validation-message {
      font-size: 0.85em;
      padding: 8px 12px;
      margin: 8px 0 0 0;
    }

    /* =========================================
       RTL PRINT OVERRIDES (ARABIC MIRRORING)
       ========================================= */
    @media print {

      /* Force RTL Direction for Print if Body is RTL */
      body[dir="rtl"].print-invoice {
        direction: rtl !important;
      }

      /* 1. Mirror Header Alignment */
      body[dir="rtl"].print-invoice .invoice-date-id {
        margin-left: 0 !important;
        margin-right: auto !important;
        text-align: left !important;
      }

      body[dir="rtl"].print-invoice .invoice-header-content {
        text-align: right !important;
        flex-direction: row !important;
        /* Flips automatically in RTL */
      }

      body[dir="rtl"].print-invoice .invoice-customer-title,
      body[dir="rtl"].print-invoice .invoice-customer-name,
      body[dir="rtl"].print-invoice .invoice-customer-detail {
        text-align: right !important;
      }

      /* 2. Mirror Table Text Alignment & Borders */
      body[dir="rtl"].print-invoice #printCartTable th {
        text-align: center !important;
      }

      /* First item (Name) aligns RIGHT in Arabic */
      body[dir="rtl"].print-invoice #printCartTable td:nth-child(1),
      body[dir="rtl"].print-invoice #printCartTable td:nth-child(1) strong {
        text-align: right !important;
        border-right: 2px solid #000 !important;
        border-left: 1px solid #000 !important;
      }

      /* Last item (Total) aligns CENTER usually, but border needs switch */
      body[dir="rtl"].print-invoice #printCartTable td:last-child,
      body[dir="rtl"].print-invoice #printCartTable th:last-child {
        border-left: 2px solid #000 !important;
        border-right: 1px solid #000 !important;
      }

      /* 3. Mirror Stamp & Summary Layout */
      body[dir="rtl"].print-invoice #invoice-summary-wrapper {
        justify-content: flex-end !important;
        /* In RTL, Flex-End is the LEFT side */
      }

      /* Fix Margins for Stamp in RTL */
      /* RTL: Stamp is on RIGHT. Card is on LEFT. Separation needs MARGIN-LEFT on Stamp. */
      body[dir="rtl"].print-invoice #paymentStamp {
        margin-right: 0 !important;
        margin-left: 30px !important;
        /* Matches LTR gap */
        transform: rotate(3deg) !important;
        text-align: center !important;
      }

      /* Fix Phone Number Direction for RTL Printing */
      body[dir="rtl"].print-invoice #printCustomerPhone {
        /* Removed direction: ltr override to allow Icon element logic to work */
        text-align: right !important;
        /* Keep aligned to right */
        display: block !important;
      }

      body[dir="rtl"].print-invoice #printCustomerNotes {
        border-left: none !important;
        border-right: 3px solid #3b82f6 !important;
        text-align: right !important;
      }

      body[dir="rtl"].print-invoice #invoice-totals-card {
        text-align: right !important;
        border-right: 2px solid #000 !important;
        border-left: 2px solid #000 !important;
      }

      body[dir="rtl"].print-invoice #invoice-totals-card .invoice-totals-title {
        text-align: right !important;
      }
    }

    /* Dashboard month filter (native month input) */
    #monthFilter {
      width: 115px;
      min-width: unset;
      padding-right: 0;
      text-align: center;
      cursor: pointer;
    }

    @media (max-width: 520px) {
      #monthFilter {
        width: 98px;
        min-width: unset;
        font-size: 0.7rem !important;
        padding: 0 !important;
        margin: 0 !important;
        text-align: center;
      }

      /* Also make the container smaller on mobile */
      .pos-header-card .pos-date-container {
        padding: 4px 6px !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 0 !important;
      }
    }

    /* Print Dashboard Specifics */
    @media print {
      body.print-dashboard {
        background: white !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
      }

      body.print-dashboard .no-print {
        display: none !important;
      }

      body.print-dashboard .only-print {
        display: block !important;
      }

      body.print-dashboard .page {
        display: none !important;
      }

      body.print-dashboard #page-dashboard {
        display: block !important;
        padding: 0 !important;
        margin: 0 !important;
      }

      /* Reset container widths */
      body.print-dashboard .container {
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
      }

      /* Grid Layout for Print */
      body.print-dashboard .stats-grid {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        /* Force 4 col for KPIs */
        gap: 15px !important;
      }

      /* Charts Grid */
      body.print-dashboard div[style*="grid-template-columns"] {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        /* 2 col for charts */
        gap: 20px !important;
      }

      /* Allow insights to take full width */
      body.print-dashboard #insightsBox {
        grid-column: span 2;
        page-break-inside: avoid;
      }

      /* Cards styling print */
      body.print-dashboard .card,
      body.print-dashboard .report-section {
        box-shadow: none !important;
        border: 1px solid #ccc !important;
        break-inside: avoid;
        -webkit-break-inside: avoid;
        margin: 10px 0 !important;
      }

      body.print-dashboard canvas {
        max-height: 250px !important;
        width: 100% !important;
      }
    }

    /* Fix for Order Date Picker spacing on Desktop */
    @media (min-width: 768px) {
      #orderDate {
        width: 135px !important;
        /* Increased from 100px so year and icon have space */
      }
    }

    /* ===========================
       TASKS STYLES
       =========================== */

    /* Task Badge on Sidebar */
    .task-badge {
      display: inline-block;
      background: #ef4444;
      color: white;
      font-size: 0.7em;
      font-weight: 700;
      padding: 2px 6px;
      border-radius: 10px;
      margin-left: 6px;
      min-width: 18px;
      text-align: center;
      animation: pulse 2s ease-in-out infinite;
    }

    @media (max-width: 768px) {
      .task-badge {
        position: absolute;
        top: 6px;
        right: 6px;
        margin-left: 0;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        line-height: 16px;
        font-size: 10px;
        font-weight: 700;
        border-radius: 999px;
        text-align: center;
        white-space: nowrap;
      }

      body[dir="rtl"] .task-badge {
        right: auto;
        left: 6px;
      }
    }

    @keyframes pulse {

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

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

    /* Task Card */
    .task-card {
      background: white;
      border-radius: 12px;
      padding: 16px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
      transition: all 0.3s ease;
      border-left: 4px solid #cbd5e1;
      position: relative;
      overflow: hidden;
    }

    .task-card:hover {
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
      transform: translateY(-2px);
    }

    .task-card.completed {
      opacity: 0.65;
      background: #f9fafb;
    }

    .task-card.completed .task-card-title {
      text-decoration: line-through;
      color: #9ca3af;
    }

    /* Priority borders */
    .task-card.priority-low {
      border-left-color: #10b981;
    }

    .task-card.priority-medium {
      border-left-color: #3b82f6;
    }

    .task-card.priority-high {
      border-left-color: #f59e0b;
    }

    .task-card.priority-urgent {
      border-left-color: #ef4444;
      animation: taskUrgent 2s ease-in-out infinite;
    }

    @keyframes taskUrgent {

      0%,
      100% {
        box-shadow: 0 2px 8px rgba(239, 68, 68, 0.2);
      }

      50% {
        box-shadow: 0 4px 16px rgba(239, 68, 68, 0.4);
      }
    }

    /* Task Card Header */
    .task-card-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 10px;
      gap: 10px;
    }

    .task-card-title {
      font-weight: 700;
      font-size: 0.95em;
      color: #1e293b;
      line-height: 1.45;
      flex: 1;
      word-break: break-word;
      letter-spacing: -0.01em;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    .task-card-priority {
      font-size: 1.2em;
      flex-shrink: 0;
    }

    /* Task Card Meta */
    .task-card-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin: 8px 0;
      font-size: 0.8em;
    }

    .task-meta-badge {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      padding: 3px 7px;
      background: #f1f5f9;
      border-radius: 5px;
      color: #64748b;
      font-weight: 600;
      font-size: 0.92em;
      letter-spacing: 0.01em;
    }

    .task-meta-badge.overdue {
      background: #fee2e2;
      color: #991b1b;
    }

    .task-meta-badge.auto {
      background: #ddd6fe;
      color: #5b21b6;
    }

    /* Task Description */
    .task-card-description {
      color: #64748b;
      font-size: 0.85em;
      line-height: 1.55;
      margin: 6px 0 10px 0;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      letter-spacing: 0.005em;
    }

    /* Task Actions */
    .task-card-actions {
      display: flex;
      gap: 5px;
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px solid #f1f5f9;
    }

    .task-action-btn {
      flex: 1;
      padding: 5px 10px;
      border: none;
      border-radius: 6px;
      font-size: 0.82em;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 3px;
    }

    .task-action-btn:hover {
      transform: scale(1.05);
    }

    .task-action-btn.complete {
      background: #dcfce7;
      color: #166534;
    }

    .task-action-btn.complete:hover {
      background: #bbf7d0;
    }

    .task-action-btn.delete {
      background: #fee2e2;
      color: #991b1b;
    }

    .task-action-btn.delete:hover {
      background: #fecaca;
    }

    .task-action-btn.edit {
      background: #e0e7ff;
      color: #3730a3;
    }

    .task-action-btn.edit:hover {
      background: #c7d2fe;
    }

    /* Modal Animation */
    @keyframes modalSlideIn {
      from {
        opacity: 0;
        transform: translateY(-30px) scale(0.95);
      }

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

    .modal-overlay {
      display: flex;
    }

    /* Task modal visibility fixes */
    #taskModal {
      display: none;
    }

    #taskModal.show {
      display: flex;
    }

    #taskModal .modal-content {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    /* Tasks controls layout */
    .tasks-controls {
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: 12px;
      align-items: center;
    }

    .tasks-filters {
      display: grid;
      grid-template-columns: repeat(2, minmax(160px, 1fr));
      gap: 10px;
      align-items: center;
    }

    .tasks-add-btn,
    .tasks-smart-btn {
      white-space: nowrap;
    }

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

      .tasks-filters {
        grid-template-columns: 1fr;
      }

      .tasks-add-btn,
      .tasks-smart-btn {
        width: 100%;
      }
    }

    #taskDueDate {
      accent-color: #F6A61F;
    }

    #taskDueDate:focus {
      border-color: #F6A61F !important;
      box-shadow: 0 0 0 3px rgba(246, 166, 31, 0.15) !important;
      outline: none;
    }

    #taskModal input[type="date"]:focus,
    #taskModal input[type="date"]:focus-visible {
      border-color: #F6A61F !important;
      box-shadow: 0 0 0 3px rgba(246, 166, 31, 0.15) !important;
      outline: none !important;
    }

    /* Task stat badges - product-like glow and pulse effects */
    #tasksStatsBar span {
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      border: 2px solid transparent;
      position: relative;
      overflow: visible;
    }

    #tasksStatsBar span:hover {
      transform: scale(1.08) translateY(-2px);
      box-shadow: 0 0 20px rgba(246, 166, 31, 0.4), 0 6px 20px rgba(0, 0, 0, 0.15);
      border-color: rgba(246, 166, 31, 0.6);
      animation: taskBadgePulse 1.5s ease-in-out infinite;
    }

    #tasksStatsBar span:active {
      transform: scale(1.02);
      animation: none;
    }

    @keyframes taskBadgePulse {

      0%,
      100% {
        box-shadow: 0 0 20px rgba(246, 166, 31, 0.4), 0 6px 20px rgba(0, 0, 0, 0.15);
      }

      50% {
        box-shadow: 0 0 30px rgba(246, 166, 31, 0.6), 0 8px 25px rgba(0, 0, 0, 0.2);
      }
    }

    /* Task Completion Celebration */
    @keyframes celebrate {
      0% {
        transform: scale(1) rotate(0deg);
      }

      25% {
        transform: scale(1.2) rotate(-10deg);
      }

      50% {
        transform: scale(1.3) rotate(10deg);
      }

      75% {
        transform: scale(1.2) rotate(-5deg);
      }

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

    .celebrate {
      animation: celebrate 0.6s ease-in-out;
    }

    /* Responsive Tasks Grid */
    @media (max-width: 768px) {
      #tasksGrid {
        grid-template-columns: 1fr !important;
      }

      .task-card-actions {
        flex-direction: column;
      }

      .task-action-btn {
        width: 100%;
      }
    }

    /* Print: Hide Tasks Page */
    @media print {
      #page-tasks {
        display: none !important;
      }
    }

    /* =========================================
       RESTORE FROM DRIVE BUTTON
       ========================================= */
    .activation-footer {
      margin-top: 25px;
      padding-top: 20px;
      border-top: 1px solid #e2e8f0;
      text-align: center;
    }

    .restore-drive-btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: #f8fafc;
      border: 1px solid #cbd5e1;
      color: #475569;
      padding: 10px 20px;
      border-radius: 8px;
      font-size: 0.95em;
      font-family: 'Playpen Sans', cursive;
      cursor: pointer;
      transition: all 0.2s ease;
      width: auto;
      margin: 0 auto;
    }

    .restore-drive-btn:hover {
      background: #eff6ff;
      border-color: #3b82f6;
      color: #2563eb;
      transform: translateY(-1px);
    }

    .restore-drive-btn .btn-icon {
      font-size: 1.2em;
    }

    body[dir="rtl"] .restore-drive-btn {
      flex-direction: row-reverse;
    }

    /* ===========================
       CHECKPOINT / RESTORE POINTS
       =========================== */

    .checkpoint-box {
      border: 2px solid #e0e7ff;
      background: linear-gradient(135deg, #faf5ff 0%, #f0f9ff 100%);
    }

    .checkpoint-count-badge {
      display: inline-block;
      background: #7c3aed;
      color: white;
      font-size: 0.7em;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 10px;
      margin-left: 6px;
      min-width: 20px;
      text-align: center;
      vertical-align: middle;
    }

    body[dir="rtl"] .checkpoint-count-badge {
      margin-left: 0;
      margin-right: 6px;
    }

    .checkpoint-info-bar {
      display: flex;
      align-items: flex-start;
      gap: 6px;
      padding: 8px 12px;
      background: #f0f9ff;
      border: 1px solid #bae6fd;
      border-radius: 8px;
      margin-bottom: 12px;
      color: #0369a1;
    }

    .checkpoints-list {
      max-height: 420px;
      overflow-y: auto;
      border-radius: 10px;
      border: 1px solid #e2e8f0;
      background: white;
    }

    .checkpoint-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 10px 14px;
      border-bottom: 1px solid #f1f5f9;
      transition: background 0.15s ease;
    }

    .checkpoint-item:last-child {
      border-bottom: none;
    }

    .checkpoint-item:hover {
      background: #faf5ff;
    }

    .checkpoint-latest {
      background: #f5f3ff;
      border-left: 3px solid #7c3aed;
    }

    body[dir="rtl"] .checkpoint-latest {
      border-left: none;
      border-right: 3px solid #7c3aed;
    }

    .checkpoint-info {
      flex: 1;
      min-width: 0;
    }

    .checkpoint-label {
      font-weight: 600;
      font-size: 0.88em;
      color: #1e293b;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .checkpoint-time {
      font-size: 0.75em;
      color: #94a3b8;
      margin-top: 2px;
    }

    .checkpoint-actions {
      display: flex;
      gap: 6px;
      flex-shrink: 0;
    }

    .checkpoint-restore-btn {
      background: #ede9fe;
      color: #6d28d9;
      border: 1px solid #ddd6fe;
      padding: 5px 12px;
      border-radius: 8px;
      font-size: 0.8em;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease;
      white-space: nowrap;
    }

    .checkpoint-restore-btn:hover {
      background: #ddd6fe;
      border-color: #c4b5fd;
      transform: translateY(-1px);
      box-shadow: 0 2px 8px rgba(124, 58, 237, 0.15);
    }

    .checkpoint-delete-btn {
      background: #fff1f2;
      color: #e11d48;
      border: 1px solid #fecdd3;
      padding: 5px 8px;
      border-radius: 8px;
      font-size: 0.8em;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .checkpoint-delete-btn:hover {
      background: #fecdd3;
      border-color: #fda4af;
      transform: translateY(-1px);
    }

    .checkpoint-manual-btn {
      font-size: 0.85em !important;
      padding: 6px 14px !important;
      border-radius: 8px !important;
      font-weight: 600 !important;
      transition: all 0.2s ease !important;
    }

    .checkpoint-manual-btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    }

    /* Save indicator pulse */
    .save-indicator {
      position: fixed;
      bottom: 20px;
      right: 20px;
      background: rgba(16, 185, 129, 0.9);
      color: white;
      padding: 8px 16px;
      border-radius: 24px;
      font-size: 0.8em;
      font-weight: 600;
      z-index: 10000;
      opacity: 0;
      transform: translateY(10px);
      transition: opacity 0.3s ease, transform 0.3s ease;
      pointer-events: none;
      box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
    }

    body[dir="rtl"] .save-indicator {
      right: auto;
      left: 20px;
    }

    .save-indicator.visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* ─── Offline Banner ─── */

    /* ─── Drive Sync Pill (Sidebar & Mobile Header) ─── */
    .drive-sync-pill {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 3px 10px;
      border-radius: 20px;
      font-size: 0.65rem;
      font-weight: 600;
      letter-spacing: 0.3px;
      transition: background 0.3s ease, color 0.3s ease;
      cursor: default;
      user-select: none;
    }
    .drive-sync-pill .dsp-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      flex-shrink: 0;
    }
    .drive-sync-pill .dsp-icon {
      width: 11px;
      height: 11px;
      flex-shrink: 0;
      display: block;
    }
    .drive-sync-pill.syncing .dsp-icon {
      animation: dspSpin 1.2s linear infinite;
    }
    @keyframes dspSpin {
      to { transform: rotate(360deg); }
    }
    /* RTL: reverse the flex row so icon/dot fall on the correct side */
    [dir="rtl"] .drive-sync-pill {
      flex-direction: row-reverse;
    }
    /* idle: not connected to Drive */
    .drive-sync-pill.idle {
      background: rgba(148, 163, 184, 0.15);
      color: #64748b;
    }
    .drive-sync-pill.idle .dsp-dot {
      background: #94a3b8;
    }
    /* synced: connected */
    .drive-sync-pill.synced {
      background: rgba(34, 197, 94, 0.15);
      color: #059669;
    }
    .drive-sync-pill.synced .dsp-dot {
      background: #22c55e;
      box-shadow: 0 0 6px rgba(34, 197, 94, 0.5);
    }
    /* syncing: in progress */
    .drive-sync-pill.syncing {
      background: rgba(108, 99, 255, 0.15);
      color: #6C63FF;
    }
    .drive-sync-pill.syncing .dsp-dot {
      background: #6C63FF;
      animation: dspPulse 0.9s ease-in-out infinite;
    }
    @keyframes dspPulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.4; transform: scale(0.6); }
    }
    /* Footer drive status text */
    .footer-drive-status {
      font-size: 0.72rem;
      font-weight: 500;
      color: #94a3b8;
      margin: 4px 0;
      display: block;
    }
    @media (max-width: 768px) {
      .drive-sync-pill { font-size: 0.58rem; padding: 2px 8px; }
    }

    /* Mobile responsive checkpoints */
    @media (max-width: 768px) {
      .checkpoint-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 10px 12px;
      }

      .checkpoint-actions {
        width: 100%;
        justify-content: flex-end;
      }

      body[dir="rtl"] .checkpoint-actions {
        justify-content: flex-start;
      }

      .checkpoint-label {
        font-size: 0.82em;
      }

      .checkpoints-list {
        max-height: 320px;
      }

      .checkpoint-count-badge {
        font-size: 0.65em;
        padding: 1px 6px;
      }
    }

/* ── Online Store Button Responsive Styles ── */
@media (max-width: 768px) {
  #storeTabPublish button {
    font-size: 0.75rem !important;
    padding: 6px 10px !important;
    white-space: nowrap;
  }
  
  #storePublishBtn,
  #storeUnpublishBtn {
    font-size: 0.78rem !important;
    padding: 6px 12px !important;
  }
}

@media (max-width: 520px) {
  #storeTabPublish > div:first-child {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  
  #storeTabPublish button {
    font-size: 0.7rem !important;
    padding: 5px 8px !important;
    flex: 1 1 auto;
    min-width: fit-content;
  }
  
  #storePublishBtn,
  #storeUnpublishBtn {
    font-size: 0.72rem !important;
    padding: 5px 10px !important;
  }
  
  /* Make buttons take equal space */
  #storeTabPublish button[data-i18n="store_select_all"],
  #storeTabPublish button[data-i18n="store_deselect_all"] {
    flex: 1;
  }
  
  #storePublishBtn,
  #storeUnpublishBtn {
    flex: 1;
  }
}

@media (max-width: 380px) {
  #storeTabPublish button {
    font-size: 0.65rem !important;
    padding: 4px 6px !important;
  }
  
  #storePublishBtn,
  #storeUnpublishBtn {
    font-size: 0.68rem !important;
    padding: 4px 8px !important;
  }
}

/* ── Store Branding Image Containers Responsive ── */
/* Logo container: fixed size, no responsive scaling */
.store-logo-container {
  width: 120px !important;
  height: 120px !important;
  flex-shrink: 0;
}

.store-logo-container img {
  width: 120px !important;
  height: 120px !important;
}

@media (max-width: 768px) {
  .store-branding-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  
  .store-image-container {
    width: 100% !important;
    max-width: 300px !important;
  }
  
  .store-cover-container {
    width: 100% !important;
    max-width: 100% !important;
  }

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

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

@media (max-width: 520px) {
  .store-image-container {
    max-width: 100% !important;
  }
}

/* ── Store Button Glow Effects ── */
.store-btn-glow {
  transition: box-shadow 0.3s ease, transform 0.2s ease;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.store-btn-glow:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

/* Purple glow (Copy Link, primary actions, Select All, Publish Selected) */
.store-btn-glow[style*="background:#6C63FF"],
.store-btn-glow[style*="background: #6C63FF"] {
  box-shadow: 0 2px 16px rgba(108, 99, 255, 0.25);
}

.store-btn-glow[style*="background:#6C63FF"]:hover,
.store-btn-glow[style*="background: #6C63FF"]:hover {
  box-shadow: 0 6px 24px rgba(108, 99, 255, 0.5);
}

/* Green glow (WhatsApp, Save Settings, success actions) */
.store-btn-glow[style*="background:#25D366"],
.store-btn-glow[style*="background: #25D366"],
.store-btn-glow[style*="background:#22c55e"],
.store-btn-glow[style*="background: #22c55e"],
.store-btn-glow[style*="background:#10b981"],
.store-btn-glow[style*="background: #10b981"] {
  box-shadow: 0 2px 16px rgba(37, 211, 102, 0.25);
}

.store-btn-glow[style*="background:#25D366"]:hover,
.store-btn-glow[style*="background: #25D366"]:hover,
.store-btn-glow[style*="background:#22c55e"]:hover,
.store-btn-glow[style*="background: #22c55e"]:hover,
.store-btn-glow[style*="background:#10b981"]:hover,
.store-btn-glow[style*="background: #10b981"]:hover {
  box-shadow: 0 6px 24px rgba(37, 211, 102, 0.5);
}

/* Red glow (Disconnect, Clear Sale, Unpublish, danger actions) */
.store-btn-glow[style*="background:#ef4444"],
.store-btn-glow[style*="background: #ef4444"] {
  box-shadow: 0 2px 16px rgba(239, 68, 68, 0.25);
}

.store-btn-glow[style*="background:#ef4444"]:hover,
.store-btn-glow[style*="background: #ef4444"]:hover {
  box-shadow: 0 6px 24px rgba(239, 68, 68, 0.5);
}

/* Amber glow (Publish to Storefront) */
.store-btn-glow[style*="background:#f59e0b"],
.store-btn-glow[style*="background: #f59e0b"] {
  box-shadow: 0 2px 16px rgba(245, 158, 11, 0.3);
}

.store-btn-glow[style*="background:#f59e0b"]:hover,
.store-btn-glow[style*="background: #f59e0b"]:hover {
  box-shadow: 0 6px 24px rgba(245, 158, 11, 0.55);
}

/* Blue glow (Preview, info actions) */
.store-btn-glow[style*="background:#3b82f6"],
.store-btn-glow[style*="background: #3b82f6"] {
  box-shadow: 0 2px 16px rgba(59, 130, 246, 0.25);
}

.store-btn-glow[style*="background:#3b82f6"]:hover,
.store-btn-glow[style*="background: #3b82f6"]:hover {
  box-shadow: 0 6px 24px rgba(59, 130, 246, 0.5);
}

/* Gray glow (Deselect All) */
.store-btn-glow[style*="background:#64748b"],
.store-btn-glow[style*="background: #64748b"] {
  box-shadow: 0 2px 12px rgba(100, 116, 139, 0.2);
}

.store-btn-glow[style*="background:#64748b"]:hover,
.store-btn-glow[style*="background: #64748b"]:hover {
  box-shadow: 0 6px 20px rgba(100, 116, 139, 0.4);
}

/* ═══════════════════════════════════════════════════════════════
   PRODUCT ENHANCE POPUP
   ═══════════════════════════════════════════════════════════════ */
.product-enhance-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
  z-index: 100002;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: enhanceOverlayIn 0.25s ease;
}

@keyframes enhanceOverlayIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.product-enhance-popup {
  background: #fff;
  border-radius: 16px;
  max-width: 680px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 64px rgba(0,0,0,0.25);
  animation: enhancePopupIn 0.3s ease;
  overflow: hidden;
}

@keyframes enhancePopupIn {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

.product-enhance-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #e2e8f0;
  background: linear-gradient(135deg, #f8fafc, #f1f5f9);
  gap: 12px;
}

.product-enhance-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.product-enhance-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 20px;
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
}

.enhance-field-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.enhance-field-group label {
  font-size: .82rem;
  font-weight: 600;
  color: #334155;
}

.enhance-field-group input,
.enhance-field-group textarea,
.enhance-field-group select {
  font-size: .88rem;
  transition: border-color .2s;
}

.enhance-field-group input:focus,
.enhance-field-group textarea:focus {
  border-color: #6C63FF !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(108,99,255,.1);
}

/* Gallery preview thumbnails */
.enhance-gallery-thumb {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid #e2e8f0;
  flex-shrink: 0;
}

.enhance-gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.enhance-gallery-thumb .remove-gallery-img {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(239,68,68,0.9);
  color: #fff;
  border: none;
  font-size: .7rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .2s;
}

.enhance-gallery-thumb:hover .remove-gallery-img {
  opacity: 1;
}

/* Published status pills on product cards */
.store-card-enhance-btn {
  background: linear-gradient(135deg, #6C63FF, #8b5cf6);
  color: #fff;
  border: none;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: .72rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.store-card-enhance-btn:hover {
  background: linear-gradient(135deg, #5b52e6, #7c3aed);
  transform: scale(1.05);
}

.store-card-orphan-badge {
  background: #fbbf24;
  color: #78350f;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: .7rem;
  font-weight: 600;
}

.store-card-sync-badge {
  background: #3b82f6;
  color: #fff;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: .7rem;
  font-weight: 600;
  cursor: pointer;
}

/* RTL adjustments */
body[dir="rtl"] .product-enhance-body textarea[style*="direction:ltr"] { direction: ltr; text-align: left; }
body[dir="rtl"] .product-enhance-body textarea[style*="direction:rtl"] { direction: rtl; text-align: right; }
body[dir="rtl"] .product-enhance-footer { flex-direction: row-reverse; }
body[dir="rtl"] .enhance-gallery-thumb .remove-gallery-img { right: auto; left: 2px; }

/* Mobile responsive */
@media (max-width: 600px) {
  .product-enhance-popup { max-height: 95vh; border-radius: 12px; }
  .product-enhance-body { padding: 14px; gap: 12px; }
  .product-enhance-body > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  .product-enhance-header { padding: 12px 14px; }
  .product-enhance-footer { padding: 12px 14px; }
}

/* ── Accessibility: Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   v1.0.1 — UI IMPROVEMENTS
   ═══════════════════════════════════════════════════════════ */

/* ── About Modal: mobile-friendly ── */
#aboutModal {
  align-items: flex-start;
  padding-top: calc(env(safe-area-inset-top) + 8px);
  padding-bottom: calc(env(safe-area-inset-bottom) + 92px);
}
#aboutModal .modal-content {
  max-width: 500px;
  max-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 116px);
  overflow-y: auto;
}
#aboutModal .modal-content h2 {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  justify-content: center;
}
#aboutModal .modal-content h3 {
  border: none !important;
  padding: 0 !important;
}
@media (max-width: 640px) {
  #aboutModal {
    padding-top: calc(env(safe-area-inset-top) + 6px);
    padding-bottom: calc(env(safe-area-inset-bottom) + 102px);
  }
  #aboutModal .modal-content {
    max-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 130px);
  }
}

/* ── Online Store tabs: 3-column grid, fit any screen ── */
@media (max-width: 480px) {
  #storeConnectedPanel > div[style*="grid-template-columns:repeat(3"] {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 3px !important;
  }
  #storeConnectedPanel .store-tab {
    font-size: .72rem !important;
    padding: 6px 4px !important;
  }
}

/* ── Policy sections: cleaner mobile look ── */
.policy-section {
  border-radius: 10px !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  transition: box-shadow .2s;
}
.policy-section:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
}
.policy-section > div:first-child {
  padding: 10px 14px !important;
  background: #f8fafc;
  border-bottom: 1px solid #f1f5f9;
}
.policy-section .policy-chevron {
  transition: transform .25s ease;
}
.policy-section .policy-body {
  animation: policySlide .2s ease;
}
@keyframes policySlide {
  from { opacity: 0; max-height: 0; }
  to { opacity: 1; max-height: 500px; }
}
@media (max-width: 600px) {
  .policy-fields-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .policy-section > div:first-child {
    padding: 8px 12px !important;
  }
  .policy-section .policy-body {
    padding: 10px 12px !important;
  }
}

/* ── Store product grid search: RTL support ── */
body[dir="rtl"] #storeProductSearch {
  padding-left: 10px !important;
  padding-right: 32px !important;
}
body[dir="rtl"] #storeProductSearch + span,
body[dir="rtl"] [style*="left:10px"][style*="pointer-events:none"] {
  left: auto !important;
  right: 10px !important;
}

/* ── Store link bar: mobile ── */
@media (max-width: 500px) {
  #storeConnectedPanel .card:first-child > div {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  #storeConnectedPanel .card:first-child code {
    min-width: unset !important;
    font-size: .75rem !important;
  }
}

/* ── Print report: date centered with padding ── */
body.print-history #historyReportHeader [style*="text-align:right"] {
  text-align: center !important;
}
body.print-history #histReportDate {
  display: block;
  text-align: center;
  padding: 0 6px;
}

/* ── Apply & Reset Counter button: prevent overflow ── */
@media (max-width: 420px) {
  .settings-box .btn[onclick*="applyInvoiceStart"] {
    font-size: .78rem !important;
    padding: 7px 12px !important;
  }
}

/* ── Identity Logo: match store logo model ── */
#settingLogoPreviewImg {
  background: transparent !important;
}

/* ── Store product grid: scrollbar styling ── */
#storeProductGrid::-webkit-scrollbar {
  width: 5px;
}
#storeProductGrid::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 4px;
}
#storeProductGrid::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
#storeProductGrid::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* ── Store List Grid (multi-store) ── */
.store-list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.store-list-card {
  background: #fff;
  border-radius: 14px;
  border: 1.5px solid #e2e8f0;
  padding: 20px;
  cursor: pointer;
  transition: transform .18s, box-shadow .18s, border-color .18s;
  position: relative;
  overflow: hidden;
}
.store-list-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(108, 99, 255, .15);
  border-color: #6C63FF;
}
.store-list-card .store-card-color-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  border-radius: 14px 14px 0 0;
}
.store-list-card .store-card-name {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 8px 0 4px 0;
  color: #1e293b;
}
.store-list-card .store-card-category {
  font-size: .78rem;
  color: #64748b;
  margin: 0 0 10px 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.store-list-card .store-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .72rem;
  color: #94a3b8;
}
.store-list-card .store-card-products {
  background: #f1f5f9;
  padding: 2px 8px;
  border-radius: 12px;
  font-weight: 600;
  color: #6C63FF;
  font-size: .72rem;
}
.store-list-card .store-card-delete {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.28);
  font-size: .78rem;
  cursor: pointer;
  opacity: 1;
  transition: background .18s, transform .15s, color .15s;
  padding: 4px 7px;
  border-radius: 8px;
  line-height: 1;
  color: #ef4444;
}
[dir="rtl"] .store-list-card .store-card-delete {
  right: auto;
  left: 8px;
}
.store-list-card:hover .store-card-delete {
  background: rgba(239, 68, 68, 0.2);
}
.store-list-card .store-card-delete:hover {
  background: #ef4444 !important;
  color: #fff;
  border-color: #ef4444;
  transform: scale(1.08);
}
/* Create New Store card */
.store-list-card.store-card-new {
  border: 2px dashed #cbd5e1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 140px;
  color: #64748b;
  gap: 8px;
  background: #fafbfc;
}
.store-list-card.store-card-new:hover {
  border-color: #6C63FF;
  color: #6C63FF;
  background: #f8f7ff;
}
.store-list-card.store-card-new .store-card-new-icon {
  font-size: 2rem;
  line-height: 1;
}
.store-list-card.store-card-new .store-card-new-label {
  font-size: .9rem;
  font-weight: 600;
}
.store-list-card.store-card-new .store-card-new-count {
  font-size: .72rem;
  color: #94a3b8;
}
@media (max-width: 460px) {
  .store-list-grid {
    grid-template-columns: 1fr;
  }
}
/* RTL: flip back-arrow (← becomes →) */
[dir="rtl"] .back-arrow {
  display: inline-block;
  transform: scaleX(-1);
}
/* RTL: extra padding for card name so it doesn't overlap delete button */
[dir="rtl"] .store-list-card .store-card-name,
[dir="rtl"] .store-list-card .store-card-category {
  padding-left: 30px;
  padding-right: 0;
}
[dir="ltr"] .store-list-card .store-card-name,
[dir="ltr"] .store-list-card .store-card-category {
  padding-right: 30px;
  padding-left: 0;
}
/* Connecting spinner ring */
@keyframes store-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.store-spinner-ring {
  width: 52px;
  height: 52px;
  border: 5px solid rgba(108, 99, 255, .18);
  border-top-color: #6C63FF;
  border-radius: 50%;
  animation: store-spin .75s linear infinite;
  margin: 0 auto 16px auto;
}

/* Store tab buttons: app font, bold, consistent across browsers */
.store-tab {
  font-family: inherit !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   STOREFRONT ENHANCE TABS (product form inline tabs)
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Responsive tab grid — 3 per row on mobile, all 5 on wider screens */
.enh-tab-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-bottom: -1px;
}
@media (min-width: 560px) {
  .enh-tab-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* Shared tab button style — mirrors store-tab sizing */
.enh-tab {
  font-family: inherit !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  transition: background .15s, color .15s !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
}
.enh-tab span[data-i18n] {
  text-transform: uppercase !important;
  font-weight: 700 !important;
}
.enh-tab.active,
.enh-tab[data-active="true"] {
  background: #fff !important;
  color: #334155 !important;
  font-weight: 700 !important;
  border-bottom-color: #fff !important;
}
.enh-tab:not(.active):hover {
  background: #e9eef5 !important;
  color: #334155 !important;
}

/* Tab pane entrance animation */
.enh-tab-pane {
  animation: enhTabFadeIn .25s ease both;
}

/* ── Enhance Tab Panes — Unified Form Styling ── */
.enh-tab-pane label {
  display: block;
  margin-bottom: 4px;
  color: #334155;
  font-weight: 600;
  font-size: .82rem;
  line-height: 1.4;
}
.enh-tab-pane input:not([type="checkbox"]):not([type="color"]):not([type="file"]):not([type="date"]):not([type="range"]),
.enh-tab-pane select,
.enh-tab-pane textarea {
  border: 1.5px solid #dde3ed;
  border-radius: 7px;
  padding: 7px 10px;
  font-size: .84rem;
  font-family: inherit;
  box-sizing: border-box;
  background: #fff;
  color: #1e293b;
  transition: border-color .18s, box-shadow .18s;
  width: 100%;
}
.enh-tab-pane input:not([type="checkbox"]):not([type="color"]):not([type="file"]):not([type="date"]):not([type="range"]):focus,
.enh-tab-pane select:focus,
.enh-tab-pane textarea:focus {
  border-color: #6C63FF;
  box-shadow: 0 0 0 2.5px rgba(108, 99, 255, .13);
  outline: none;
}
.enh-tab-pane input::placeholder,
.enh-tab-pane textarea::placeholder {
  color: #a8b5c5;
  font-weight: 400;
  font-size: .80rem;
}
@keyframes enhTabFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* Gallery thumbnails */
.enh-gal-thumb {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid #e2e8f0;
  background: #f8fafc;
  flex-shrink: 0;
  cursor: grab;
  transition: border-color .2s, transform .15s;
}
.enh-gal-thumb:active { cursor: grabbing; }
.enh-gal-thumb:hover  { border-color: #6C63FF; transform: scale(1.03); }
.enh-gal-thumb img    { width: 100%; height: 100%; object-fit: cover; pointer-events: none; display: block; }

/* Drag-over highlight */
.enh-gal-thumb.drag-over { border-color: #6C63FF; box-shadow: 0 0 0 3px rgba(108,99,255,.25); }

/* Drag handle hint (bottom-right) */
.enh-gal-drag-hint {
  position: absolute;
  bottom: 3px;
  right: 3px;
  font-size: .65rem;
  color: rgba(255,255,255,.8);
  background: rgba(0,0,0,.35);
  border-radius: 4px;
  padding: 1px 3px;
  pointer-events: none;
  letter-spacing: .05em;
}

/* Remove button on thumbnails */
.enh-gal-thumb .remove-gallery-img {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 18px;
  height: 18px;
  background: rgba(239,68,68,.9);
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: .7rem;
  line-height: 18px;
  text-align: center;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  transition: background .15s;
}
.enh-gal-thumb .remove-gallery-img:hover { background: #dc2626; }

/* Video thumb */
.enh-gal-video-thumb { cursor: default !important; }
.enh-gal-video-thumb:hover { transform: none !important; border-color: #a5b4fc !important; }

/* Video progress bar */
.enh-vid-progress {
  width: 100%;
  height: 4px;
  cursor: pointer;
  accent-color: #6C63FF;
  margin: 0;
  display: block;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SCROLL REVEAL ANIMATIONS
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Base — hidden until revealed */
.sr {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.6s cubic-bezier(.22,1,.36,1),
              transform 0.6s cubic-bezier(.22,1,.36,1);
  will-change: opacity, transform;
}

/* Variants */
.sr-left   { transform: translateX(-40px); }
.sr-right  { transform: translateX( 40px); }
.sr-scale  { transform: scale(0.92); }
.sr-fade   { transform: none; }           /* opacity-only */

/* Revealed state */
.sr.sr-visible {
  opacity: 1;
  transform: none;
}

/* Stagger delays  (use data-sr-delay="1" … "6" or classes) */
.sr-d1 { transition-delay: 0.08s; }
.sr-d2 { transition-delay: 0.16s; }
.sr-d3 { transition-delay: 0.24s; }
.sr-d4 { transition-delay: 0.32s; }
.sr-d5 { transition-delay: 0.40s; }
.sr-d6 { transition-delay: 0.48s; }
.sr-d7 { transition-delay: 0.56s; }
.sr-d8 { transition-delay: 0.64s; }

/* Tab entrance animation (plays when a store tab is shown) */
.store-tab-enter {
  animation: storeTabFadeUp 0.4s cubic-bezier(.22,1,.36,1) both;
}
@keyframes storeTabFadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* Product card pop-in */
.store-card-enter {
  animation: storeCardPop 0.35s cubic-bezier(.22,1,.36,1) both;
}
@keyframes storeCardPop {
  from { opacity: 0; transform: scale(0.88) translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* Section reveal for settings/branding sub-sections */
.section-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.section-reveal.sr-visible {
  opacity: 1;
  transform: none;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  .sr, .section-reveal { transition: none !important; opacity: 1 !important; transform: none !important; }
  .store-tab-enter, .store-card-enter { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SMART NOTIFICATION CENTER
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Bell button */
.notif-bell {
  position: relative;
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 8px;
  transition: background .2s;
  line-height: 1;
}
.notif-bell:hover { background: rgba(108,99,255,.1); }

/* Badge count */
.notif-badge {
  position: absolute;
  top: -2px; right: -4px;
  background: #ef4444;
  color: #fff;
  font-size: .6rem;
  font-weight: 700;
  min-width: 16px; height: 16px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px;
  box-shadow: 0 2px 6px rgba(239,68,68,.3);
  animation: notifPulse 2s infinite;
}
@keyframes notifPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

/* Panel */
.notif-center {
  position: fixed;
  top: 56px; left: 220px;
  width: 340px; max-height: 70vh;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 12px 48px rgba(0,0,0,.15);
  z-index: 99990;
  overflow: hidden;
  display: flex; flex-direction: column;
  border: 1px solid #e2e8f0;
}
body[dir="rtl"] .notif-center {
  left: auto;
  right: 220px;
}
@media (max-width: 700px) {
  .notif-center { left: 8px; right: 8px; width: auto; top: 60px; }
}

.notif-center-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 16px 10px; border-bottom: 1px solid #f1f5f9;
}
.notif-clear-btn {
  background: none; border: none; color: #6C63FF; font-size: .78rem;
  cursor: pointer; font-weight: 600;
}
.notif-clear-btn:hover { text-decoration: underline; }

.notif-list {
  overflow-y: auto; max-height: 55vh; padding: 6px 0;
}
.notif-empty {
  text-align: center; color: #94a3b8; padding: 32px 16px; font-size: .85rem;
}

/* Individual notification */
.notif-item {
  display: flex; gap: 10px; padding: 12px 16px;
  border-bottom: 1px solid #f8fafc;
  cursor: pointer; transition: background .15s;
  align-items: flex-start;
}
.notif-item:hover { background: #f8fafc; }
.notif-item.unread { background: #f0f0ff; }
.notif-item.unread:hover { background: #e8e7ff; }

.notif-icon {
  font-size: 1.3rem; flex-shrink: 0; width: 32px; text-align: center;
}
.notif-body { flex: 1; min-width: 0; }
.notif-body-title {
  font-weight: 600; font-size: .82rem; color: #1e293b;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.notif-body-text {
  font-size: .75rem; color: #64748b; margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.notif-time {
  font-size: .65rem; color: #94a3b8; white-space: nowrap; margin-top: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   CATEGORY MENU BUILDER
   ═══════════════════════════════════════════════════════════════════════════════ */
.store-cat-preview {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}
.store-cat-preview::-webkit-scrollbar { height: 4px; }
.store-cat-preview::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }

.store-cat-item {
  display: flex; flex-direction: column; align-items: center;
  min-width: 72px; max-width: 80px; cursor: pointer;
  transition: transform .2s;
}
.store-cat-item:hover { transform: scale(1.08); }

.store-cat-circle {
  width: 60px; height: 60px; border-radius: 50%;
  overflow: hidden; border: 2.5px solid #e2e8f0;
  background: #f8fafc; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  transition: border-color .2s;
}
.store-cat-circle:hover { border-color: #6C63FF; }
.store-cat-circle img {
  width: 100%; height: 100%; object-fit: cover;
}
.store-cat-circle .cat-icon-placeholder {
  font-size: 1.5rem; color: #94a3b8;
}
.store-cat-label {
  margin-top: 4px; font-size: .68rem; font-weight: 600;
  color: #475569; text-align: center; max-width: 72px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Editable category row */
.store-cat-row {
  display: flex; gap: 8px; align-items: center; padding: 8px 12px;
  background: #f8fafc; border: 1.5px solid #e2e8f0; border-radius: 10px;
  cursor: grab; transition: box-shadow .2s, border-color .2s;
  min-width: 0; width: 100%; box-sizing: border-box;
}
.store-cat-row:hover { border-color: #cbd5e1; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.store-cat-row.dragging { opacity: 0.5; border-color: #6C63FF; }
.store-cat-row .cat-drag-handle {
  cursor: grab; color: #94a3b8; font-size: 1rem; user-select: none; flex-shrink: 0;
}
.store-cat-row .cat-thumb {
  width: 36px; height: 36px; border-radius: 50%; object-fit: cover;
  border: 2px solid #e2e8f0; background: #f1f5f9; flex-shrink: 0;
}
.store-cat-row .cat-info {
  flex: 1; min-width: 0; overflow: hidden;
}
.store-cat-row .cat-name {
  font-weight: 600; font-size: .82rem; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.store-cat-row .cat-name-sub {
  font-size: .7rem; color: #94a3b8; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.store-cat-row .cat-count {
  font-size: .72rem; color: #6C63FF; font-weight: 600; white-space: nowrap; flex-shrink: 0;
}
.store-cat-row .cat-actions {
  display: flex; gap: 4px; flex-shrink: 0;
}
.store-cat-row .cat-actions button {
  background: none; border: none; cursor: pointer; font-size: 1rem; padding: 2px 4px;
  border-radius: 6px; transition: background .15s;
}
.store-cat-row .cat-actions button:hover { background: #e2e8f0; }

/* ═══════════════════════════════════════════════════════════════════════════════
   SIDEBAR BRAND-ROW (desktop) + MOBILE TOP BAR
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Desktop: brand-row lays out logo + pill + bell in a column with ample spacing */
.brand-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.mobile-lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(246, 166, 31, 0.12);
  border: 1px solid rgba(246, 166, 31, 0.25);
  color: #f6a61f;
  border-radius: 8px;
  padding: 4px 10px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.7rem;
  font-weight: 700;
  transition: background 0.15s;
  min-height: 30px;
  white-space: nowrap;
  line-height: 1;
}
.mobile-lang-switch:hover,
.mobile-lang-switch:active {
  background: rgba(246, 166, 31, 0.22);
}

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

.sidebar-lang-switch {
  flex: 1;
  justify-content: center;
}

.sidebar .drive-sync-pill {
  width: 100%;
  justify-content: center;
}

/* Mobile Top Bar — hidden on desktop */
.mobile-top-bar {
  display: none;
}

@media (max-width: 768px) {
  /* Show sticky top bar with safe-area for camera notch */
  .mobile-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    top: 0; left: 0; right: 0;
    height: calc(52px + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) max(14px, env(safe-area-inset-right, 0px)) 0 max(14px, env(safe-area-inset-left, 0px));
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    border-bottom: 2px solid rgba(246, 166, 31, 0.35);
    box-shadow: 0 2px 12px rgba(0,0,0,.35);
    z-index: 5500;
  }

  .mobile-top-logo {
    display: flex;
    align-items: center;
    gap: 9px;
  }

  .mobile-top-actions {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  /* Green power/logout button in mobile header */
  .mobile-logout-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: radial-gradient(circle at 40% 35%, #34d399 0%, #10b981 100%);
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.45);
    transition: transform .15s, box-shadow .15s;
    flex-shrink: 0;
  }
  .mobile-logout-btn:active {
    transform: scale(0.92);
  }

  /* Hide sidebar logout on mobile — it's in the header now */
  .nav-item-logout {
    display: none !important;
  }

  /* Push body content down so top bar doesn't overlap (including safe-area) */
  body {
    padding-top: calc(52px + env(safe-area-inset-top, 0px)) !important;
  }

  /* Mobile language switcher button */
  .mobile-lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(246, 166, 31, 0.12);
    border: 1px solid rgba(246, 166, 31, 0.25);
    color: #f6a61f;
    border-radius: 8px;
    padding: 4px 10px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.65rem;
    font-weight: 700;
    transition: background 0.15s;
    min-height: 30px;
    white-space: nowrap;
    line-height: 1;
  }
  .mobile-lang-switch:hover,
  .mobile-lang-switch:active {
    background: rgba(246, 166, 31, 0.22);
  }

  /* Hide pill + bell from sidebar on mobile (they're in the top bar now) */
  .brand-row {
    display: none !important;
  }

  .store-header-right-col {
    margin-left: auto !important;
    align-items: flex-end !important;
    text-align: right !important;
  }

  .store-header-main-row {
    justify-content: flex-start !important;
    width: 100% !important;
  }

  #storeHeaderBadges {
    justify-content: flex-end !important;
  }

  #storeBackBtn {
    margin-left: auto !important;
  }

  /* Notif center drops from top bar on mobile */
  .notif-center {
    top: 60px !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
  }
}

/* ========================= */
/* HELP / GUIDE BUTTON       */
/* ========================= */
.help-guide-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: radial-gradient(circle at 40% 35%, #a78bfa 0%, #7c3aed 100%);
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  animation: helpGlow 2s ease-in-out infinite;
  box-shadow: 0 0 8px rgba(124, 58, 237, 0.5);
  transition: transform .15s, box-shadow .15s;
  flex-shrink: 0;
}
.help-guide-btn:hover {
  transform: scale(1.12);
  box-shadow: 0 0 16px rgba(124, 58, 237, 0.7);
}
@keyframes helpGlow {
  0%, 100% { box-shadow: 0 0 6px rgba(124, 58, 237, 0.4); transform: scale(1); }
  50% { box-shadow: 0 0 18px rgba(167, 139, 250, 0.8); transform: scale(1.08); }
}

/* Sidebar help button */
.sidebar .help-guide-btn {
  width: 30px;
  height: 30px;
  font-size: 0.95rem;
  margin-left: 6px;
}

/* Help popup overlay */
.help-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.help-popup-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.help-popup {
  background: #fff;
  border-radius: 16px;
  width: 92%;
  max-width: 480px;
  max-height: 80vh;
  overflow-y: auto;
  padding: 0;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  transform: translateY(20px) scale(0.95);
  transition: transform .25s ease;
}
.help-popup-overlay.active .help-popup {
  transform: translateY(0) scale(1);
}

.help-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #e2e8f0;
  background: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%);
  border-radius: 16px 16px 0 0;
  color: #fff;
}
.help-popup-header h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
}
.help-popup-close {
  background: rgba(255,255,255,0.2);
  border: none;
  color: #fff;
  font-size: 1.2rem;
  cursor: pointer;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
}
.help-popup-close:hover {
  background: rgba(255,255,255,0.35);
}

.help-popup-body {
  padding: 20px;
}
.help-popup-page {
  font-size: 0.8rem;
  color: #7c3aed;
  font-weight: 600;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.help-popup-body ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.help-popup-body ul li {
  padding: 10px 0;
  border-bottom: 1px solid #f1f5f9;
  font-size: 0.88rem;
  color: #334155;
  line-height: 1.5;
  display: flex;
  gap: 8px;
}
.help-popup-body ul li:last-child {
  border-bottom: none;
}
.help-popup-body ul li .help-icon {
  flex-shrink: 0;
  font-size: 1rem;
  margin-top: 1px;
}
.help-popup-footer {
  padding: 12px 20px;
  border-top: 1px solid #e2e8f0;
  text-align: center;
  font-size: 0.75rem;
  color: #94a3b8;
}

/* RTL adjustments for help popup */
[dir="rtl"] .help-popup-body ul li {
  direction: rtl;
  text-align: right;
}

/* ─── Security PIN Modals ─────────────────────────────── */
.pin-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
}
.pin-modal-overlay.active { display: flex; }
.pin-modal {
  background: #fff;
  border-radius: 16px;
  padding: 28px 24px;
  max-width: 320px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  text-align: center;
}
.pin-modal-header { margin-bottom: 14px; }
.pin-modal-header h3 { margin: 4px 0 0 0; font-size: 1.05rem; font-weight: 700; }
.pin-modal-icon { font-size: 2rem; line-height: 1; }
.pin-modal-input {
  width: 100%;
  padding: 12px;
  font-size: 1.4rem;
  letter-spacing: 8px;
  text-align: center;
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  box-sizing: border-box;
  outline: none;
  margin-bottom: 6px;
  font-family: monospace;
}
.pin-modal-input:focus {
  border-color: #7c3aed;
  box-shadow: 0 0 0 3px rgba(124,58,237,0.15);
}
.pin-modal-error {
  color: #dc2626;
  font-size: 0.8rem;
  min-height: 20px;
  margin: 4px 0 10px 0;
}
.pin-modal-row {
  text-align: left;
  margin-bottom: 10px;
}
.pin-modal-row label {
  display: block;
  margin-bottom: 5px;
  font-size: 0.82rem;
  font-weight: 600;
}
[dir="rtl"] .pin-modal-row { text-align: right; }
[dir="rtl"] .pin-modal-input { letter-spacing: 8px; direction: ltr; }