/* Custom CSS - Override sidebar arrow icons */

/* ========================================
   ARABIC FONT IMPORT - Ensure Noto Kufi Arabic loads
   ======================================== */
@import url('https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@100;200;300;400;500;600;700;800;900&family=Nunito+Sans:wght@200;300;400;500;600;700;800;900&display=swap');

/* Force Arabic font application */
[dir="rtl"] body,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6,
[dir="rtl"] .form-control, [dir="rtl"] .btn,
[dir="rtl"] p, [dir="rtl"] span, [dir="rtl"] div,
[dir="rtl"] a, [dir="rtl"] li, [dir="rtl"] td, [dir="rtl"] th,
[dir="rtl"] label, [dir="rtl"] input, [dir="rtl"] textarea,
[dir="rtl"] .sidebar, [dir="rtl"] .menu-text, [dir="rtl"] .sub-menu-text {
  font-family: 'Noto Kufi Arabic', sans-serif !important;
}

/* ========================================
   ARABIC RTL - Larger Submenu Icons (Open Sidebar)
   ======================================== */
/* Increase submenu icon size in Arabic when sidebar is open (not collapsed) */
[dir="rtl"] .sidebar:not(.sidebar-collapsed) ul.nav li .nav-second-level li a i.menu-icon,
[dir="rtl"] .sidebar:not(.sidebar-collapsed) .nav-second-level li a i.menu-icon,
[dir="rtl"] .sidebar:not(.sidebar-collapsed) #side-menu .nav-second-level li a i {
  font-size: 15px !important;
  width: 15px !important;
  height: 15px !important;
  line-height: 15px !important;
  min-width: 15px !important;
  min-height: 15px !important;
}

/* Adjust spacing for larger icons */
[dir="rtl"] .sidebar:not(.sidebar-collapsed) ul.nav li .nav-second-level li a i.menu-icon {
  margin-left: 10px !important;
}

/* ========================================
   ENGLISH LTR - Larger Submenu Icons (Open Sidebar)
   ======================================== */
/* Increase submenu icon size in English when sidebar is open (not collapsed) */
[dir="ltr"] .sidebar:not(.sidebar-collapsed) ul.nav li .nav-second-level li a i.menu-icon,
[dir="ltr"] .sidebar:not(.sidebar-collapsed) .nav-second-level li a i.menu-icon,
[dir="ltr"] .sidebar:not(.sidebar-collapsed) #side-menu .nav-second-level li a i {
  font-size: 15px !important;
  width: 15px !important;
  height: 15px !important;
  line-height: 15px !important;
  min-width: 15px !important;
  min-height: 15px !important;
}

/* Adjust spacing for larger icons */
[dir="ltr"] .sidebar:not(.sidebar-collapsed) ul.nav li .nav-second-level li a i.menu-icon {
  margin-right: 10px !important;
}

/* ========================================
   HIDE EXTRA SQUARES/BOXES IN MENU ICONS - SPECIFIC TO OFFERS
   ======================================== */
/* Hide any problematic squares in offers menu */
.sidebar ul.nav li a[href*="offers"]::before,
.sidebar ul.nav li a[href*="offers"]::after,
.sidebar ul.nav li a[href*="offers"] i::before,
.sidebar ul.nav li a[href*="offers"] i::after {
  display: none !important;
  content: none !important;
}

/* Target any square-related elements */
.sidebar ul.nav li a[href*="offers"] .fa-square,
.sidebar ul.nav li a[href*="offers"] .fa-square-o,
.sidebar ul.nav li a[href*="offers"] [class*="square"],
.sidebar ul.nav li a[href*="offers"] span[class*="square"] {
  display: none !important;
}

/* Ensure clean icon display for offers menu */
.sidebar ul.nav li.sub-menu-item-visit-offers a i {
  font-family: 'Font Awesome 5 Free', 'FontAwesome' !important;
  font-weight: 900 !important;
}

/* Force the correct icon for offers */
.sidebar ul.nav li.sub-menu-item-visit-offers a i.fa-tags::before {
  content: "\f02c" !important; /* Font Awesome tags icon */
}

/* Remove the rule that was hiding elements - this was too aggressive */

/* ========================================
   ULTRA PRIORITY - Collapsed Sidebar Icon Size = 12px
   This rule MUST be at the top to override everything
   ======================================== */
.sidebar-collapsed ul.nav li a i,
.sidebar-collapsed .sidebar ul.nav li a i,
.sidebar-collapsed #side-menu li a i,
.sidebar-collapsed #setup-menu li a i,
.sidebar-collapsed #setup-menu-item a i,
.sidebar-collapsed .nav > li > a > i,
.sidebar-collapsed i.fa,
.sidebar-collapsed i[class*="fa-"],
.sidebar-collapsed i.menu-icon,
.sidebar-collapsed [class*="fa-"] {
  font-size: 20px !important;
  width: 20px !important;
  height: 20px !important;
  line-height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
}

/* Main sidebar arrow icons */
.sidebar .fa.arrow:before,
.metismenu .fa.arrow:before {
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome !important;
  font-weight: 900 !important;
  content: "\f067" !important; /* Plus icon */
}

.sidebar .active > a > .fa.arrow:before,
.metismenu .active > a > .fa.arrow:before {
  content: "\f068" !important; /* Minus icon */
}

/* Setup menu arrow icons */
#setup-menu .fa.arrow:before {
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome !important;
  font-weight: 900 !important;
  content: "\f067" !important; /* Plus icon */
}

#setup-menu .active > a > .fa.arrow:before {
  content: "\f068" !important; /* Minus icon */
}

/* ========================================
   Professional Sidebar Toggle - Notion Style
   Cross-Browser Support (Chrome, Firefox, Safari, Edge)
   ======================================== */

/* Collapsed Sidebar State - Cross Browser Support */
.sidebar-collapsed {
  width: 60px !important;
  background: #f8f9fa !important;
  /* Cross-browser transitions */
  -webkit-transition: width 0.3s ease;
  -moz-transition: width 0.3s ease;
  -o-transition: width 0.3s ease;
  -ms-transition: width 0.3s ease;
  transition: width 0.3s ease;
  overflow-x: hidden;
}

/* Collapsed menu items: square frame around icons with reduced spacing */
.sidebar-collapsed ul.nav li a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  margin: 2px auto !important;
  padding: 0 !important;
  border: 1px solid #e0e0e0 !important;
  background: #ffffff !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
  transition: all 0.2s ease !important;
}

.sidebar-collapsed ul.nav li a:hover {
  border-color: #FF6F00 !important;
  background: #fff8f0 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 6px rgba(255, 111, 0, 0.2) !important;
}

.sidebar-collapsed ul.nav li.active a {
  border-color: #FF6F00 !important;
  background: #FF6F00 !important;
  color: #ffffff !important;
}

.sidebar-collapsed ul.nav li.active a i {
  color: #ffffff !important;
}

/* Icon sizing in collapsed state */
.sidebar-collapsed ul.nav li a i {
  font-size: 16px !important;
  width: 16px !important;
  height: 16px !important;
  line-height: 16px !important;
}

/* Profile icon in collapsed state */
.sidebar-collapsed .sidebar-user-profile a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  margin: 2px auto !important;
  padding: 0 !important;
  border: 1px solid #e0e0e0 !important;
  background: #ffffff !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.sidebar-collapsed .sidebar-user-profile a:hover {
  border-color: #FF6F00 !important;
  background: #fff8f0 !important;
}

/* Hide text elements in collapsed state */
.sidebar-collapsed .menu-text,
.sidebar-collapsed .sub-menu-text,
.sidebar-collapsed .arrow,
.sidebar-collapsed .badge {
  display: none !important;
}

/* Hide profile text in collapsed state */
.sidebar-collapsed .sidebar-user-profile span span {
  display: none !important;
}

/* Center icons in collapsed state - Cross Browser Support */
.sidebar-collapsed ul.nav li a,
.sidebar-collapsed .nav li a {
  text-align: center;
  padding: 0;
  /* Cross-browser flexbox support */
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 40px;
  min-height: 40px;
  width: 40px;
  margin: 0 auto;
  position: relative;
  background: white;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Ensure the nav container is centered - Cross Browser Support */
.sidebar-collapsed ul.nav,
.sidebar-collapsed .nav {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  padding: 0;
}

.sidebar-collapsed ul.nav li a i.menu-icon {
  margin: 0 !important;
  float: none !important;
  width: 12px !important;
  height: 12px !important;
  font-size: 12px !important;
  max-width: 12px !important;
  max-height: 12px !important;
  min-width: 12px !important;
  min-height: 12px !important;
  color: #374151 !important;
  /* Cross-browser flexbox support */
  display: -webkit-box !important;
  display: -webkit-flex !important;
  display: -moz-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-align: center !important;
  -webkit-align-items: center !important;
  -moz-box-align: center !important;
  -ms-flex-align: center !important;
  align-items: center !important;
  -webkit-box-pack: center !important;
  -webkit-justify-content: center !important;
  -moz-box-pack: center !important;
  -ms-flex-pack: center !important;
  justify-content: center !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  /* Cross-browser transform support */
  -webkit-transform: translate(-50%, -50%) !important;
  -moz-transform: translate(-50%, -50%) !important;
  -ms-transform: translate(-50%, -50%) !important;
  -o-transform: translate(-50%, -50%) !important;
  transform: translate(-50%, -50%) !important;
  -webkit-box-sizing: border-box !important;
  -moz-box-sizing: border-box !important;
  box-sizing: border-box !important;
}

/* Profile section in collapsed state */
.sidebar-collapsed .sidebar-user-profile {
  padding: 0 !important;
  margin: 80px auto 0 auto !important;
  width: 40px;
}

.sidebar-collapsed .sidebar-user-profile a {
  justify-content: center;
  align-items: center;
  display: flex;
  padding: 0 !important;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
}

.sidebar-collapsed .sidebar-user-profile a .tw-inline-flex {
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
}

.sidebar-collapsed .sidebar-user-profile img {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
  object-fit: cover;
  border-radius: 50%;
}

/* Hide second level menus in collapsed state */
.sidebar-collapsed .nav-second-level {
  display: none !important;
}

/* Wrapper adjustment for collapsed sidebar */
body:not([dir="rtl"]):not(.rtl) .sidebar-collapsed ~ #wrapper {
  margin-left: 60px !important;
  transition: margin-left 0.3s ease;
}

body[dir="rtl"] .sidebar-collapsed ~ #wrapper,
body.rtl .sidebar-collapsed ~ #wrapper {
  margin-right: 60px !important;
  margin-left: 0 !important;
  transition: margin-right 0.3s ease;
}

/* Smooth transitions - Cross Browser Support */
.sidebar {
  -webkit-transition: width 0.3s ease;
  -moz-transition: width 0.3s ease;
  -o-transition: width 0.3s ease;
  -ms-transition: width 0.3s ease;
  transition: width 0.3s ease;
}

#wrapper {
  -webkit-transition: margin-left 0.3s ease, margin-right 0.3s ease;
  -moz-transition: margin-left 0.3s ease, margin-right 0.3s ease;
  -o-transition: margin-left 0.3s ease, margin-right 0.3s ease;
  -ms-transition: margin-left 0.3s ease, margin-right 0.3s ease;
  transition: margin-left 0.3s ease, margin-right 0.3s ease;
}

/* Tooltip styling - Cross Browser Support */
.sidebar-menu-tooltip {
  position: fixed;
  background: #111827;
  color: white;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  z-index: 9999;
  pointer-events: none;
  white-space: nowrap;
  /* Cross-browser box-shadow */
  -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  opacity: 0;
  /* Cross-browser transition */
  -webkit-transition: opacity 0.2s ease;
  -moz-transition: opacity 0.2s ease;
  -o-transition: opacity 0.2s ease;
  -ms-transition: opacity 0.2s ease;
  transition: opacity 0.2s ease;
}

.sidebar-menu-tooltip.show {
  opacity: 1;
}

/* Tooltip arrow */
.sidebar-menu-tooltip::before {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-style: solid;
}

/* LTR tooltip arrow (left side) */
body:not([dir="rtl"]) .sidebar-menu-tooltip::before {
  right: 100%;
  border-width: 6px 6px 6px 0;
  border-color: transparent #111827 transparent transparent;
}

/* RTL tooltip arrow (right side) */
body[dir="rtl"] .sidebar-menu-tooltip::before {
  left: 100%;
  border-width: 6px 0 6px 6px;
  border-color: transparent transparent transparent #111827;
}

/* Submenu Dropdown styling - Cross Browser Support */
.sidebar-submenu-dropdown {
  position: fixed;
  background: white;
  border: 1px solid #e5e7eb;
  /* Cross-browser box-shadow */
  -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  min-width: 200px;
  max-width: 280px;
  z-index: 9998;
  opacity: 0;
  /* Cross-browser transform */
  -webkit-transform: translateY(-5px);
  -moz-transform: translateY(-5px);
  -ms-transform: translateY(-5px);
  -o-transform: translateY(-5px);
  transform: translateY(-5px);
  /* Cross-browser transition */
  -webkit-transition: opacity 0.2s ease, transform 0.2s ease;
  -moz-transition: opacity 0.2s ease, transform 0.2s ease;
  -o-transition: opacity 0.2s ease, transform 0.2s ease;
  -ms-transition: opacity 0.2s ease, transform 0.2s ease;
  transition: opacity 0.2s ease, transform 0.2s ease;
  overflow: hidden;
}

/* Custom scrollbar for dropdown */
.sidebar-submenu-dropdown::-webkit-scrollbar {
  width: 6px;
}

.sidebar-submenu-dropdown::-webkit-scrollbar-track {
  background: #f9fafb;
}

.sidebar-submenu-dropdown::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

.sidebar-submenu-dropdown::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

.sidebar-submenu-dropdown.show {
  opacity: 1;
  transform: translateY(0);
}

/* Submenu dropdown items */
.sidebar-submenu-dropdown ul {
  list-style: none;
  padding: 8px 0;
  margin: 0;
}

.sidebar-submenu-dropdown ul li {
  margin: 0;
}

.sidebar-submenu-dropdown ul li a {
  display: block;
  padding: 10px 16px;
  color: #374151;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: background-color 0.15s ease;
  background: #fff;
  border-radius: 10px;
  margin: 4px 8px;
}

.sidebar-submenu-dropdown ul li a:hover {
  background-color: #f3f4f6;
  color: #111827;
}

.sidebar-submenu-dropdown ul li.active a {
  color: #111827;
  font-weight: 600;
  background-color: #f9fafb;
}

.sidebar-submenu-dropdown ul li a i.menu-icon {
  margin-right: 8px;
  width: auto;
  font-size: 14px;
}

body[dir="rtl"] .sidebar-submenu-dropdown ul li a i.menu-icon {
  margin-right: 0 !important;
  margin-left: 8px !important;
  float: right !important;
}

/* Additional visual indent for Arabic submenu items inside floating dropdown */
body[dir="rtl"] .sidebar-submenu-dropdown ul li a {
  padding-right: 46px !important;  /* reduced space */
  margin-right: 6px !important;    /* reduced offset */
  font-size: 13px !important;      /* smaller font */
}

/* RTL: Ensure + / - marker stays LEFT of text in main menu */
[dir="rtl"] .sidebar .arrow {
  float: left !important;
  margin-right: 8px;
}

/* Dropdown header if needed */
.sidebar-submenu-dropdown-header {
  padding: 12px 16px;
  border-bottom: 1px solid #e5e7eb;
  font-weight: 600;
  font-size: 13px;
  color: #6b7280;
  background-color: #f9fafb;
}

/* Setup menu in collapsed state */
.sidebar-collapsed #setup-menu-item {
  text-align: center;
  width: 40px;
  display: flex;
  justify-content: center;
  margin: 0 auto;
}

.sidebar-collapsed #setup-menu-item a {
  justify-content: center;
  align-items: center;
  display: flex;
  padding: 0;
  height: 40px;
  min-height: 40px;
  width: 40px;
  margin: 0 auto;
  position: relative;
}

.sidebar-collapsed #setup-menu-item a i {
  margin: 0 !important;
  width: 12px !important;
  height: 12px !important;
  font-size: 12px !important;
  max-width: 12px !important;
  max-height: 12px !important;
  min-width: 12px !important;
  min-height: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  box-sizing: border-box !important;
  color: #374151 !important;
}

/* Allow scrolling in collapsed state */
.sidebar-collapsed {
  overflow-y: auto;
  overflow-x: hidden;
}

/* Custom scrollbar for collapsed sidebar */
.sidebar-collapsed::-webkit-scrollbar {
  width: 4px;
}

.sidebar-collapsed::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar-collapsed::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 2px;
}

.sidebar-collapsed::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Force icon size for all sidebar icons in collapsed state - OVERRIDE ALL OTHER STYLES */
.sidebar-collapsed i.fa,
.sidebar-collapsed i[class*="fa-"],
.sidebar-collapsed .menu-icon,
.sidebar-collapsed .nav li a i {
  font-size: 12px !important;
  width: 12px !important;
  height: 12px !important;
  max-width: 12px !important;
  max-height: 12px !important;
  min-width: 12px !important;
  min-height: 12px !important;
  line-height: 12px !important;
  color: #374151 !important;
}

/* Override specific conflicting styles from other CSS */
.sidebar-collapsed .sidebar .nav > li > a i {
  font-size: 12px !important;
  width: 12px !important;
  height: 12px !important;
  max-width: 12px !important;
  max-height: 12px !important;
  min-width: 12px !important;
  min-height: 12px !important;
  line-height: 12px !important;
}

/* Override the conflicting 22px font-size from other CSS */
.sidebar-collapsed .sidebar .nav > li > a i {
  font-size: 12px !important;
}

/* Hover effect in collapsed state */
.sidebar-collapsed ul.nav > li > a:hover {
  background: white !important;
  border-radius: 0.375rem;
}

/* Active state in collapsed state */
.sidebar-collapsed ul.nav > li.active > a {
  background: white !important;
  border-radius: 0.375rem;
}


/* Better spacing for collapsed menu items - FORCE ALL COMPANIES */
.sidebar-collapsed ul.nav > li,
.sidebar-collapsed .nav > li {
  margin: 6px 0;
  width: 40px;
  display: flex;
  justify-content: center;
}

/* Prevent metisMenu from interfering in collapsed state */
.sidebar-collapsed .nav-second-level.collapse.in {
  display: none !important;
}

/* Setup menu icon in collapsed state */
.sidebar-collapsed #setup-menu-item a .menu-icon {
  margin: 0 !important;
}

/* RTL specific fixes */
body[dir="rtl"] .sidebar-collapsed {
  right: 0;
  left: auto;
}

body[dir="rtl"] .sidebar {
  right: 0;
  left: auto;
}

/* Ensure wrapper has proper margins */
body:not([dir="rtl"]):not(.rtl) #wrapper {
  margin-left: 230px;
  margin-right: 0;
}

body[dir="rtl"] #wrapper,
body.rtl #wrapper {
  margin-right: 230px;
  margin-left: 0;
}

/* Mobile responsive - disable collapse on mobile */
@media (max-width: 768px) {
  .sidebar-collapsed {
    width: 230px !important;
  }
  
  .sidebar-collapsed .menu-text,
  .sidebar-collapsed .sub-menu-text,
  .sidebar-collapsed .arrow,
  .sidebar-collapsed .badge,
  .sidebar-collapsed .sidebar-user-profile span span {
    display: block !important;
  }
  
  .sidebar-collapsed ul.nav li a {
    text-align: left;
    display: block;
  }
  
  .sidebar-collapsed ul.nav li a i.menu-icon {
    float: left;
    margin-right: 14px !important;
  }
  
  body[dir="rtl"] .sidebar-collapsed ul.nav li a {
    text-align: right;
  }
  
  body[dir="rtl"] .sidebar-collapsed ul.nav li a i.menu-icon {
    float: right !important;
    margin-right: 0 !important;
    margin-left: 6px !important;
  }
}

/* ========================================
   Disable Profile Click in Collapsed Sidebar
   ======================================== */

.sidebar-collapsed .sidebar-user-profile {
  cursor: default !important;
  pointer-events: none !important;
  opacity: 0.6 !important;
}

.sidebar-collapsed .sidebar-user-profile a {
  cursor: default !important;
  pointer-events: none !important;
}

.sidebar-collapsed .sidebar-user-profile:hover {
  background: transparent !important;
}

/* ========================================
   CRITICAL OVERRIDE - Force 12px icons in collapsed sidebar
   ======================================== */

/* Force ALL sidebar icons to be 12px and centered */
.sidebar-collapsed .nav > li > a i,
.sidebar-collapsed .nav > li > a i.menu-icon,
.sidebar-collapsed .nav > li > a i[class*="fa-"],
.sidebar-collapsed .nav > li > a i.fa,
.sidebar-collapsed .nav > li > a i[class*="icon"],
.sidebar-collapsed .sidebar .nav > li > a i,
.sidebar-collapsed .sidebar .nav > li > a i.menu-icon,
.sidebar-collapsed .sidebar .nav > li > a i[class*="fa-"],
.sidebar-collapsed .sidebar .nav > li > a i.fa,
.sidebar-collapsed .sidebar .nav li a i,
.sidebar-collapsed .sidebar .nav li a i.menu-icon,
.sidebar-collapsed .sidebar .nav li a i[class*="fa-"],
.sidebar-collapsed .sidebar .nav li a i.fa,
body.sidebar-mini .sidebar-collapsed .sidebar .nav > li > a i {
  font-size: 12px !important;
  width: 12px !important;
  height: 12px !important;
  line-height: 12px !important;
  max-width: 12px !important;
  max-height: 12px !important;
  min-width: 12px !important;
  min-height: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  color: #374151 !important;
}

/* ========================================
   ACTIVE STATE - Orange color for active menu items
   ======================================== */

/* Active menu item - orange background and icon */
.sidebar-collapsed ul.nav > li.active > a,
.sidebar-collapsed ul.nav > li.mm-active > a,
.sidebar-collapsed ul.nav > li > a.active {
  background: #fff5e6 !important;
  border: 2px solid #ff9600 !important;
  box-shadow: 0 2px 8px rgba(255, 150, 0, 0.2) !important;
}

/* Active icon - orange color */
.sidebar-collapsed ul.nav > li.active > a i,
.sidebar-collapsed ul.nav > li.mm-active > a i,
.sidebar-collapsed ul.nav > li > a.active i {
  color: #ff9600 !important;
}

/* Insta Chat - WhatsApp style (white icon on green background) */
.sidebar-collapsed ul.nav > li.menu-item-watily_insta_chat_parent > a {
  background: #25D366 !important;
  border: 2px solid #25D366 !important;
}

.sidebar-collapsed ul.nav > li.menu-item-watily_insta_chat_parent > a i,
.sidebar-collapsed ul.nav > li.menu-item-watily_insta_chat_parent > a i.fa-whatsapp {
  color: #ffffff !important;
}

/* Insta Chat active state - keep WhatsApp green background */
.sidebar-collapsed ul.nav > li.menu-item-watily_insta_chat_parent.active > a,
.sidebar-collapsed ul.nav > li.menu-item-watily_insta_chat_parent.mm-active > a {
  background: #25D366 !important;
  border: 2px solid #25D366 !important;
  box-shadow: 0 2px 8px rgba(37, 211, 102, 0.3) !important;
}

.sidebar-collapsed ul.nav > li.menu-item-watily_insta_chat_parent.active > a i,
.sidebar-collapsed ul.nav > li.menu-item-watily_insta_chat_parent.mm-active > a i {
  color: #ffffff !important;
}

/* Insta Chat hover state */
.sidebar-collapsed ul.nav > li.menu-item-watily_insta_chat_parent > a:hover {
  background: #20BA5A !important;
  border: 2px solid #20BA5A !important;
}

/* Hover state should not override active state */
.sidebar-collapsed ul.nav > li.active > a:hover,
.sidebar-collapsed ul.nav > li.mm-active > a:hover {
  background: #fff5e6 !important;
  border: 2px solid #ff9600 !important;
}

.sidebar-collapsed ul.nav > li.active > a:hover i,
.sidebar-collapsed ul.nav > li.mm-active > a:hover i {
  color: #ff9600 !important;
}

/* ========================================
   INSTASYNC NOTIFY - Animated Bell Icon
   ======================================== */

/* Bell pulse animation - scale effect */
@keyframes bellPulse {
  0%, 100% { 
    opacity: 1;
    font-size: 24px;
  }
  50% { 
    opacity: 0.7;
    font-size: 28px;
  }
}

@-webkit-keyframes bellPulse {
  0%, 100% { 
    opacity: 1;
    font-size: 24px;
  }
  50% { 
    opacity: 0.7;
    font-size: 28px;
  }
}

/* Bell shake animation using margin */
@keyframes bellWiggle {
  0%, 100% { 
    margin-left: 0px;
  }
  25% { 
    margin-left: -2px;
  }
  75% { 
    margin-left: 2px;
  }
}

@-webkit-keyframes bellWiggle {
  0%, 100% { 
    margin-left: 0px;
  }
  25% { 
    margin-left: -2px;
  }
  75% { 
    margin-left: 2px;
  }
}

/* Apply animation to InstaSync Notify bell icon */
.sidebar-collapsed ul.nav > li.menu-item-instasync_notify > a i.fa-bell,
.sidebar-collapsed ul.nav > li.menu-item-instasync_notify > a i {
  animation: bellPulse 1.5s ease-in-out infinite, bellWiggle 0.5s ease-in-out infinite !important;
  -webkit-animation: bellPulse 1.5s ease-in-out infinite, bellWiggle 0.5s ease-in-out infinite !important;
  -moz-animation: bellPulse 1.5s ease-in-out infinite, bellWiggle 0.5s ease-in-out infinite !important;
  -o-animation: bellPulse 1.5s ease-in-out infinite, bellWiggle 0.5s ease-in-out infinite !important;
}

/* ========================================
   TUTORIAL MODE - Overlay & Highlights
   ======================================== */

/* Dark overlay to focus attention */
.tutorial-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 99998;
  display: none;
}

/* Highlight element being explained */
.tutorial-highlight {
  position: relative;
  z-index: 99999 !important;
  box-shadow: 0 0 0 4px rgba(255, 150, 0, 0.6), 0 0 0 8px rgba(255, 150, 0, 0.3) !important;
  animation: highlightPulse 2s ease-in-out infinite;
  -webkit-animation: highlightPulse 2s ease-in-out infinite;
}

@keyframes highlightPulse {
  0%, 100% {
    box-shadow: 0 0 0 4px rgba(255, 150, 0, 0.6), 0 0 0 8px rgba(255, 150, 0, 0.3) !important;
  }
  50% {
    box-shadow: 0 0 0 6px rgba(255, 150, 0, 0.8), 0 0 0 12px rgba(255, 150, 0, 0.4) !important;
  }
}

@-webkit-keyframes highlightPulse {
  0%, 100% {
    box-shadow: 0 0 0 4px rgba(255, 150, 0, 0.6), 0 0 0 8px rgba(255, 150, 0, 0.3) !important;
  }
  50% {
    box-shadow: 0 0 0 6px rgba(255, 150, 0, 0.8), 0 0 0 12px rgba(255, 150, 0, 0.4) !important;
  }
}

/* ========================================
   MENU HINT TOOLTIP - First Visit
   ======================================== */

.sidebar-hint-tooltip {
  position: fixed;
  background: linear-gradient(135deg, #ff9600 0%, #ff6600 100%);
  color: white;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 4px 20px rgba(255, 150, 0, 0.4);
  z-index: 99999;
  display: none;
}

.sidebar-hint-tooltip.tutorial-hint {
  animation: none;
  -webkit-animation: none;
  cursor: pointer;
}

.sidebar-hint-tooltip i {
  margin-right: 8px;
  animation: pointHand 1s ease-in-out infinite;
  -webkit-animation: pointHand 1s ease-in-out infinite;
}

.hint-skip {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  font-size: 11px;
  text-align: center;
  opacity: 0.8;
  font-weight: 400;
}

body[dir="rtl"] .sidebar-hint-tooltip i {
  margin-right: 0;
  margin-left: 8px;
}

.sidebar-hint-tooltip::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 20px;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid #ff9600;
}

body[dir="rtl"] .sidebar-hint-tooltip::before {
  left: auto;
  right: 20px;
}

@keyframes hintPulse {
  0%, 100% {
    box-shadow: 0 4px 20px rgba(255, 150, 0, 0.4);
  }
  50% {
    box-shadow: 0 4px 30px rgba(255, 150, 0, 0.7);
  }
}

@-webkit-keyframes hintPulse {
  0%, 100% {
    box-shadow: 0 4px 20px rgba(255, 150, 0, 0.4);
  }
  50% {
    box-shadow: 0 4px 30px rgba(255, 150, 0, 0.7);
  }
}

@keyframes pointHand {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(5px);
  }
}

@-webkit-keyframes pointHand {
  0%, 100% {
    -webkit-transform: translateX(0);
  }
  50% {
    -webkit-transform: translateX(5px);
  }
}

/* ========================================
   ICON HINTS - Specific menu items
   ======================================== */

.sidebar-icon-hint-tooltip {
  position: fixed;
  background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
  color: white;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 4px 20px rgba(79, 70, 229, 0.4);
  z-index: 99999;
  display: none;
  animation: iconHintSlide 0.5s ease-out;
  -webkit-animation: iconHintSlide 0.5s ease-out;
  white-space: nowrap;
}

/* Orange color for tutorial hints */
.sidebar-icon-hint-tooltip.orange-hint {
  background: linear-gradient(135deg, #ff9600 0%, #ff6600 100%);
  box-shadow: 0 4px 20px rgba(255, 150, 0, 0.4);
}

.sidebar-icon-hint-tooltip.tutorial-hint {
  cursor: pointer;
}

.sidebar-icon-hint-tooltip i {
  margin-right: 8px;
  font-size: 14px;
}

.sidebar-icon-hint-tooltip.rtl-hint i {
  margin-right: 0;
  margin-left: 8px;
}

/* Arrow pointing to icon */
.sidebar-icon-hint-tooltip::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -8px;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #4F46E5;
}

.sidebar-icon-hint-tooltip.rtl-hint::before {
  left: auto;
  right: -8px;
  border-right: none;
  border-left: 8px solid #4F46E5;
}

/* Orange arrow for tutorial hints */
.sidebar-icon-hint-tooltip.orange-hint::before {
  border-right: 8px solid #ff9600;
}

.sidebar-icon-hint-tooltip.orange-hint.rtl-hint::before {
  border-right: none;
  border-left: 8px solid #ff9600;
}

@keyframes iconHintSlide {
  0% {
    opacity: 0;
    transform: translateX(-10px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@-webkit-keyframes iconHintSlide {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-10px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
  }
}

/* ========================================
   LANGUAGE WELCOME MODAL - First Visit
   ======================================== */

.language-welcome-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s ease-out;
  -webkit-animation: fadeIn 0.3s ease-out;
}

.language-welcome-modal {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  border-radius: 20px;
  padding: 40px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  text-align: center;
  max-width: 500px;
  width: 90%;
  animation: modalSlideIn 0.5s ease-out;
  -webkit-animation: modalSlideIn 0.5s ease-out;
}

.language-welcome-modal .logo {
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
  background: linear-gradient(135deg, #FF6F00 0%, #ff9600 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(255, 111, 0, 0.3);
}

.language-welcome-modal .logo i {
  font-size: 40px;
  color: white;
  animation: logoRotate 3s ease-in-out infinite;
  -webkit-animation: logoRotate 3s ease-in-out infinite;
}

@keyframes logoRotate {
  0%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-10deg);
  }
  75% {
    transform: rotate(10deg);
  }
}

@-webkit-keyframes logoRotate {
  0%, 100% {
    -webkit-transform: rotate(0deg);
  }
  25% {
    -webkit-transform: rotate(-10deg);
  }
  75% {
    -webkit-transform: rotate(10deg);
  }
}

.language-welcome-modal h2 {
  font-size: 28px;
  font-weight: 700;
  color: #212529;
  margin-bottom: 10px;
  background: linear-gradient(135deg, #FF6F00 0%, #ff9600 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.language-welcome-modal .subtitle {
  font-size: 14px;
  color: #6c757d;
  margin-bottom: 30px;
  line-height: 1.6;
}

.language-welcome-modal .language-buttons {
  display: flex;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap;
}

.language-welcome-modal .language-btn {
  flex: 1;
  min-width: 140px;
  padding: 20px 30px;
  background: white;
  border: 2px solid #e9ecef;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.language-welcome-modal .language-btn:hover {
  transform: translateY(-5px);
  border-color: #FF6F00;
  box-shadow: 0 8px 25px rgba(255, 111, 0, 0.2);
  background: linear-gradient(135deg, #fff8f0 0%, #ffffff 100%);
}

.language-welcome-modal .language-btn:active {
  transform: translateY(-2px);
}

.language-welcome-modal .language-btn .flag {
  font-size: 32px;
}

.language-welcome-modal .language-btn .lang-name {
  font-size: 16px;
  font-weight: 600;
  color: #212529;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

@-webkit-keyframes modalSlideIn {
  from {
    opacity: 0;
    -webkit-transform: translateY(-50px) scale(0.9);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0) scale(1);
  }
}

/* Responsive design for mobile */
@media (max-width: 600px) {
  .language-welcome-modal {
    padding: 30px 20px;
  }
  
  .language-welcome-modal h2 {
    font-size: 22px;
  }
  
  .language-welcome-modal .language-buttons {
    flex-direction: column;
  }
  
  .language-welcome-modal .language-btn {
    width: 100%;
  }
}

/* =================================================================
   Customer Portal - Vertical & Horizontal Centering with Flexbox
   ================================================================= */

/* HTML element - prevent horizontal overflow */
html {
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: 100vw !important;
}

/* Body setup for customer pages - Full height flex container */
body.customers {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh !important;
  background-color: #f8f9fa !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100vw !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

body.customers * {
  box-sizing: border-box !important;
}

/* Wrapper takes remaining space */
body.customers #wrapper {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Content area - takes flex space */
body.customers #content {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  width: 100% !important;
}

/* Normal padding for logged-in customer pages */
body.customers:not(.authentication_login):not(.authentication_register):not(.authentication_forgot_password) #content {
  padding: 0 !important;
}

/* Only center vertically for authentication pages (no navigation) */
body.authentication_login #content,
body.authentication_register #content,
body.authentication_forgot_password #content {
  justify-content: center !important;
  align-items: center !important;
  padding: 40px 15px !important;
}

/* Container for centered content */
body.customers .container {
  width: 100% !important;
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 15px !important;
  padding-right: 15px !important;
}

/* Login heading styles */
.login-heading,
.register-heading,
.forgot-password-heading h1 {
  font-size: 28px !important;
  color: #334155 !important;
  margin-bottom: 30px !important;
  text-align: center !important;
}

/* Form panels with proper spacing */
body.customers .panel_s {
  box-shadow: 0 2px 10px rgba(0,0,0,0.08) !important;
  border-radius: 8px !important;
  margin-bottom: 20px !important;
  background: #fff !important;
}

/* Knowledge Base - centered search and content */
body.customers .kb-search-jumbotron {
  width: 100% !important;
  margin: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 40px 15px !important;
  background: #f9fafb !important;
}

body.customers .kb-search {
  max-width: 900px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
  box-sizing: border-box !important;
}

/* KB search input group - ensure button is visible */
body.customers .kb-search .input-group {
  display: flex !important;
  width: 100% !important;
  flex-wrap: nowrap !important;
  box-sizing: border-box !important;
}

body.customers .kb-search-input {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

body.customers .kb-search .input-group-btn {
  display: flex !important;
  flex-shrink: 0 !important;
  width: auto !important;
}

body.customers .kb-search-button {
  white-space: nowrap !important;
  min-width: 100px !important;
  width: auto !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

/* Footer - always at bottom, centered text */
body.customers .footer {
  width: 100% !important;
  text-align: center !important;
  padding: 20px 15px !important;
  background: #fff !important;
  border-top: 1px solid #e9ecef !important;
  margin-top: auto !important;
}

body.customers .footer .copyright-footer {
  color: #6c757d !important;
  font-size: 14px !important;
}

/* Remove top margin from main content containers */
body.customers .mtop40 {
  margin-top: 0 !important;
}

/* Ensure proper spacing for rows */
body.customers .row {
  margin-left: -15px !important;
  margin-right: -15px !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  body.customers #content {
    padding: 20px 15px !important;
  }
  
  .login-heading,
  .register-heading,
  .forgot-password-heading h1 {
    font-size: 24px !important;
    margin-bottom: 20px !important;
  }
}

/* =================================================================
   Customer Portal Navigation Header - Alignment Fix
   ================================================================= */

/* Customer portal header/navbar - full width, proper alignment */
body.customers .header,
body.customers .navbar {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

/* Container inside navbar - centered with max-width */
body.customers .header .container,
body.customers .navbar .container {
  width: 100% !important;
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 15px !important;
  padding-right: 15px !important;
  box-sizing: border-box !important;
}

/* Navbar header (logo area) - proper alignment */
body.customers .navbar-header {
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
}

/* Navbar brand (logo) - proper alignment */
body.customers .navbar-brand {
  display: flex !important;
  align-items: center !important;
  padding: 8px 15px !important;
  margin: 0 !important;
  height: auto !important;
}

body.customers .navbar-brand img {
  max-height: 40px !important;
  width: auto !important;
}

/* Navbar collapse (menu items container) */
body.customers .navbar-collapse {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  padding: 0 !important;
}

/* Navbar nav items - proper alignment */
body.customers .navbar-nav {
  display: flex !important;
  align-items: center !important;
  flex-direction: row !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Navbar nav items - LTR (default) */
body.customers .navbar-nav.navbar-right {
  margin-right: 0 !important;
  margin-left: auto !important;
}

/* Navbar nav items - RTL */
[dir="rtl"] body.customers .navbar-nav.navbar-right,
body.rtl.customers .navbar-nav.navbar-right {
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* Navbar nav item links - proper alignment */
body.customers .navbar-nav > li > a {
  display: flex !important;
  align-items: center !important;
  padding: 15px 12px !important;
  height: auto !important;
  line-height: 1.5 !important;
  white-space: nowrap !important;
}

/* Navbar nav item icons */
body.customers .navbar-nav > li > a i {
  margin-right: 6px !important;
  font-size: 16px !important;
}

[dir="rtl"] body.customers .navbar-nav > li > a i,
body.rtl.customers .navbar-nav > li > a i {
  margin-right: 0 !important;
  margin-left: 6px !important;
}

/* Profile image in navbar */
body.customers .client-profile-image-small {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}

/* Dropdown menu alignment */
body.customers .navbar-nav .dropdown-menu {
  right: 0 !important;
  left: auto !important;
  margin-top: 5px !important;
}

[dir="rtl"] body.customers .navbar-nav .dropdown-menu,
body.rtl.customers .navbar-nav .dropdown-menu {
  left: 0 !important;
  right: auto !important;
}

/* Mobile responsive - navbar toggle button */
body.customers .navbar-toggle {
  margin: 8px 15px !important;
  padding: 9px 10px !important;
  border: 1px solid transparent !important;
  border-radius: 4px !important;
}

/* Mobile responsive - collapsed navbar */
@media (max-width: 767px) {
  body.customers .navbar-collapse {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
  }
  
  body.customers .navbar-nav {
    flex-direction: column !important;
    width: 100% !important;
  }
  
  body.customers .navbar-nav > li {
    width: 100% !important;
  }
  
  body.customers .navbar-nav > li > a {
    width: 100% !important;
    padding: 12px 15px !important;
  }
  
  body.customers .navbar-nav.navbar-right {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  [dir="rtl"] body.customers .navbar-nav.navbar-right,
  body.rtl.customers .navbar-nav.navbar-right {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* =================================================================
   Customer Portal RTL Support - Arabic Text Direction
   ================================================================= */

/* Force RTL direction for all customer portal elements when dir="rtl" */
[dir="rtl"] body.customers,
body.customers[dir="rtl"] {
  direction: rtl !important;
  text-align: right !important;
}

/* Force RTL for HTML element when body has RTL */
[dir="rtl"] html,
html[dir="rtl"] {
  direction: rtl !important;
}

/* RTL for all text elements in customer portal - override any left alignment */
[dir="rtl"] body.customers *,
body.customers[dir="rtl"] * {
  direction: inherit;
}

/* Override any text-align: left styles for RTL */
[dir="rtl"] body.customers *[style*="text-align: left"],
[dir="rtl"] body.customers *[style*="text-align:left"],
body.customers[dir="rtl"] *[style*="text-align: left"],
body.customers[dir="rtl"] *[style*="text-align:left"] {
  text-align: right !important;
}

/* RTL for paragraphs and text blocks */
[dir="rtl"] body.customers p,
[dir="rtl"] body.customers span,
[dir="rtl"] body.customers div,
[dir="rtl"] body.customers h1,
[dir="rtl"] body.customers h2,
[dir="rtl"] body.customers h3,
[dir="rtl"] body.customers h4,
[dir="rtl"] body.customers h5,
[dir="rtl"] body.customers h6,
[dir="rtl"] body.customers label,
[dir="rtl"] body.customers a,
[dir="rtl"] body.customers li,
[dir="rtl"] body.customers td,
[dir="rtl"] body.customers th,
body.customers[dir="rtl"] p,
body.customers[dir="rtl"] span,
body.customers[dir="rtl"] div,
body.customers[dir="rtl"] h1,
body.customers[dir="rtl"] h2,
body.customers[dir="rtl"] h3,
body.customers[dir="rtl"] h4,
body.customers[dir="rtl"] h5,
body.customers[dir="rtl"] h6,
body.customers[dir="rtl"] label,
body.customers[dir="rtl"] a,
body.customers[dir="rtl"] li,
body.customers[dir="rtl"] td,
body.customers[dir="rtl"] th {
  direction: rtl !important;
  text-align: right !important;
}

/* RTL for form elements - STRONG override for all input types */
[dir="rtl"] body.customers input,
[dir="rtl"] body.customers input[type="text"],
[dir="rtl"] body.customers input[type="email"],
[dir="rtl"] body.customers input[type="password"],
[dir="rtl"] body.customers input[type="number"],
[dir="rtl"] body.customers input[type="tel"],
[dir="rtl"] body.customers input[type="url"],
[dir="rtl"] body.customers input[type="search"],
[dir="rtl"] body.customers textarea,
[dir="rtl"] body.customers select,
[dir="rtl"] body.customers .form-control,
[dir="rtl"] body.customers .form-control input,
[dir="rtl"] body.customers .form-control select,
[dir="rtl"] body.customers .form-control textarea,
body.customers[dir="rtl"] input,
body.customers[dir="rtl"] input[type="text"],
body.customers[dir="rtl"] input[type="email"],
body.customers[dir="rtl"] input[type="password"],
body.customers[dir="rtl"] input[type="number"],
body.customers[dir="rtl"] input[type="tel"],
body.customers[dir="rtl"] input[type="url"],
body.customers[dir="rtl"] input[type="search"],
body.customers[dir="rtl"] textarea,
body.customers[dir="rtl"] select,
body.customers[dir="rtl"] .form-control,
body.customers[dir="rtl"] .form-control input,
body.customers[dir="rtl"] .form-control select,
body.customers[dir="rtl"] .form-control textarea {
  direction: rtl !important;
  text-align: right !important;
}

/* RTL for select options and dropdown content */
[dir="rtl"] body.customers select option,
[dir="rtl"] body.customers .dropdown-menu,
[dir="rtl"] body.customers .dropdown-menu li,
[dir="rtl"] body.customers .dropdown-menu li a,
[dir="rtl"] body.customers .bootstrap-select .dropdown-toggle,
[dir="rtl"] body.customers .bootstrap-select .filter-option,
body.customers[dir="rtl"] select option,
body.customers[dir="rtl"] .dropdown-menu,
body.customers[dir="rtl"] .dropdown-menu li,
body.customers[dir="rtl"] .dropdown-menu li a,
body.customers[dir="rtl"] .bootstrap-select .dropdown-toggle,
body.customers[dir="rtl"] .bootstrap-select .filter-option {
  direction: rtl !important;
  text-align: right !important;
}

/* RTL for buttons */
[dir="rtl"] body.customers .btn,
[dir="rtl"] body.customers button,
body.customers[dir="rtl"] .btn,
body.customers[dir="rtl"] button {
  direction: rtl !important;
}

/* RTL for tables */
[dir="rtl"] body.customers table,
[dir="rtl"] body.customers .table,
body.customers[dir="rtl"] table,
body.customers[dir="rtl"] .table {
  direction: rtl !important;
}

[dir="rtl"] body.customers .table th,
[dir="rtl"] body.customers .table td,
body.customers[dir="rtl"] .table th,
body.customers[dir="rtl"] .table td {
  text-align: right !important;
}

/* RTL for lists */
[dir="rtl"] body.customers ul,
[dir="rtl"] body.customers ol,
body.customers[dir="rtl"] ul,
body.customers[dir="rtl"] ol {
  direction: rtl !important;
  padding-right: 0 !important;
  padding-left: 20px !important;
}

[dir="rtl"] body.customers ul li,
[dir="rtl"] body.customers ol li,
body.customers[dir="rtl"] ul li,
body.customers[dir="rtl"] ol li {
  text-align: right !important;
}

/* RTL for panels and cards */
[dir="rtl"] body.customers .panel,
[dir="rtl"] body.customers .panel-body,
[dir="rtl"] body.customers .card,
[dir="rtl"] body.customers .card-body,
body.customers[dir="rtl"] .panel,
body.customers[dir="rtl"] .panel-body,
body.customers[dir="rtl"] .card,
body.customers[dir="rtl"] .card-body {
  direction: rtl !important;
  text-align: right !important;
}

/* RTL for alerts and messages */
[dir="rtl"] body.customers .alert,
[dir="rtl"] body.customers .alert-success,
[dir="rtl"] body.customers .alert-danger,
[dir="rtl"] body.customers .alert-warning,
[dir="rtl"] body.customers .alert-info,
body.customers[dir="rtl"] .alert,
body.customers[dir="rtl"] .alert-success,
body.customers[dir="rtl"] .alert-danger,
body.customers[dir="rtl"] .alert-warning,
body.customers[dir="rtl"] .alert-info {
  direction: rtl !important;
  text-align: right !important;
}

/* RTL for breadcrumbs */
[dir="rtl"] body.customers .breadcrumb,
body.customers[dir="rtl"] .breadcrumb {
  direction: rtl !important;
}

[dir="rtl"] body.customers .breadcrumb li,
body.customers[dir="rtl"] .breadcrumb li {
  text-align: right !important;
}

/* RTL for container and wrapper */
[dir="rtl"] body.customers .container,
[dir="rtl"] body.customers #wrapper,
[dir="rtl"] body.customers #content,
body.customers[dir="rtl"] .container,
body.customers[dir="rtl"] #wrapper,
body.customers[dir="rtl"] #content {
  direction: rtl !important;
}

/* RTL for row and columns (Bootstrap grid) */
[dir="rtl"] body.customers .row,
body.customers[dir="rtl"] .row {
  direction: rtl !important;
}

/* RTL for modals */
[dir="rtl"] body.customers .modal,
[dir="rtl"] body.customers .modal-body,
[dir="rtl"] body.customers .modal-header,
[dir="rtl"] body.customers .modal-footer,
body.customers[dir="rtl"] .modal,
body.customers[dir="rtl"] .modal-body,
body.customers[dir="rtl"] .modal-header,
body.customers[dir="rtl"] .modal-footer {
  direction: rtl !important;
  text-align: right !important;
}

/* RTL for navigation tabs */
[dir="rtl"] body.customers .nav-tabs,
[dir="rtl"] body.customers .nav-tabs > li,
body.customers[dir="rtl"] .nav-tabs,
body.customers[dir="rtl"] .nav-tabs > li {
  direction: rtl !important;
}

[dir="rtl"] body.customers .nav-tabs > li > a,
body.customers[dir="rtl"] .nav-tabs > li > a {
  text-align: right !important;
}

/* RTL for dropdown menus */
[dir="rtl"] body.customers .dropdown-menu,
body.customers[dir="rtl"] .dropdown-menu {
  direction: rtl !important;
  text-align: right !important;
}

[dir="rtl"] body.customers .dropdown-menu li,
[dir="rtl"] body.customers .dropdown-menu li a,
body.customers[dir="rtl"] .dropdown-menu li,
body.customers[dir="rtl"] .dropdown-menu li a {
  text-align: right !important;
}

/* RTL for forms - labels and inputs alignment */
[dir="rtl"] body.customers .form-group,
[dir="rtl"] body.customers .form-group label,
[dir="rtl"] body.customers .form-group .control-label,
[dir="rtl"] body.customers label,
body.customers[dir="rtl"] .form-group,
body.customers[dir="rtl"] .form-group label,
body.customers[dir="rtl"] .form-group .control-label,
body.customers[dir="rtl"] label {
  text-align: right !important;
  direction: rtl !important;
}

[dir="rtl"] body.customers .form-group .form-control,
[dir="rtl"] body.customers .form-group input,
[dir="rtl"] body.customers .form-group select,
[dir="rtl"] body.customers .form-group textarea,
body.customers[dir="rtl"] .form-group .form-control,
body.customers[dir="rtl"] .form-group input,
body.customers[dir="rtl"] .form-group select,
body.customers[dir="rtl"] .form-group textarea {
  text-align: right !important;
  direction: rtl !important;
}

/* RTL for input groups */
[dir="rtl"] body.customers .input-group,
[dir="rtl"] body.customers .input-group-addon,
[dir="rtl"] body.customers .input-group-btn,
body.customers[dir="rtl"] .input-group,
body.customers[dir="rtl"] .input-group-addon,
body.customers[dir="rtl"] .input-group-btn {
  direction: rtl !important;
}

/* RTL for checkboxes and radio buttons */
[dir="rtl"] body.customers input[type="checkbox"],
[dir="rtl"] body.customers input[type="radio"],
body.customers[dir="rtl"] input[type="checkbox"],
body.customers[dir="rtl"] input[type="radio"] {
  margin-right: 0 !important;
  margin-left: 5px !important;
}

/* RTL for icons spacing - handled in navigation styles above */

/* RTL for float utilities */
[dir="rtl"] body.customers .pull-left,
body.customers[dir="rtl"] .pull-left {
  float: right !important;
}

[dir="rtl"] body.customers .pull-right,
body.customers[dir="rtl"] .pull-right {
  float: left !important;
}

/* RTL for text alignment utilities */
[dir="rtl"] body.customers .text-left,
[dir="rtl"] body.customers [class*="text-left"],
body.customers[dir="rtl"] .text-left,
body.customers[dir="rtl"] [class*="text-left"] {
  text-align: right !important;
}

[dir="rtl"] body.customers .text-right,
[dir="rtl"] body.customers [class*="text-right"],
body.customers[dir="rtl"] .text-right,
body.customers[dir="rtl"] [class*="text-right"] {
  text-align: right !important;
}

/* Force all text content to align right in RTL */
[dir="rtl"] body.customers,
[dir="rtl"] body.customers *:not(script):not(style):not(input[type="checkbox"]):not(input[type="radio"]),
body.customers[dir="rtl"],
body.customers[dir="rtl"] *:not(script):not(style):not(input[type="checkbox"]):not(input[type="radio"]) {
  unicode-bidi: embed;
}

/* Override any inline styles that might force left alignment */
[dir="rtl"] body.customers [style*="direction: ltr"],
[dir="rtl"] body.customers [style*="direction:ltr"],
body.customers[dir="rtl"] [style*="direction: ltr"],
body.customers[dir="rtl"] [style*="direction:ltr"] {
  direction: rtl !important;
}