/* ========================================
   WPPIT TENANT ADMIN DASHBOARD - RTL
   Professional UI/UX Design
   ======================================== */

/* ========================================
   CSS VARIABLES & ROOT SETTINGS
   ======================================== */
:root {
  /* Primary Color Scheme */
  --primary-color: #191b8b;
  --primary2-color: #FFA500;
  --primary3-color: #FF7A00;
  --primary-light: #2a2da3;
  --primary-lighter: #3a3db3;
  --primary-dark: #14166b;
  --primary-darker: #0f1152;
  /* Secondary Colors */
  --secondary-color: #f8f9fa;
  --secondary-light: #ffffff;
  --secondary-dark: #e9ecef;
  
  /* Text Colors */
  --text-primary: #2c3e50;
  --text-secondary: #6c757d;
  --text-muted: #95a5a6;
  --text-light: #ffffff;
  
  /* Status Colors */
  --success-color: #28a745;
  --warning-color: #ffc107;
  --danger-color: #dc3545;
  --info-color: #17a2b8;
  
  /* Background Colors */
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --bg-tertiary: #e9ecef;
  --bg-dark: #343a40;
  
  /* Border Colors */
  --border-color: #dee2e6;
  --border-light: #f1f3f4;
  --border-dark: #adb5bd;
  
  /* Shadow Colors */
  --shadow-light: rgba(0, 0, 0, 0.05);
  --shadow-medium: rgba(0, 0, 0, 0.1);
  --shadow-dark: rgba(0, 0, 0, 0.15);
  
  /* Typography */
  --font-family-primary: "IBM Plex Sans Arabic", "Cairo", "Tajawal", sans-serif;
  --font-size-base: 13px;
  --font-size-sm: 11px;
  --font-size-lg: 14px;
  --font-size-xl: 16px;
  --font-size-2xl: 18px;
  --font-size-3xl: 24px;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  
  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  
  /* Border Radius */
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  --border-radius-xl: 16px;
  
  /* Transitions */
  --transition-fast: 0.15s ease-in-out;
  --transition-normal: 0.3s ease-in-out;
  --transition-slow: 0.5s ease-in-out;
  
  /* Z-Index */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
}

/* ========================================
   GLOBAL RTL SETTINGS
   ======================================== */
* {
  box-sizing: border-box;
}

html {
  direction: rtl;
  unicode-bidi: embed;
}

body {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: 1.6;
  color: var(--text-primary);
  background-color: var(--bg-secondary);
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ========================================
   TYPOGRAPHY
   ======================================== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  margin: 0 0 var(--spacing-md) 0;
  line-height: 1.3;
}

h1 { font-size: var(--font-size-3xl); }
h2 { font-size: var(--font-size-2xl); }
h3 { font-size: var(--font-size-xl); }
h4 { font-size: var(--font-size-lg); }
h5 { font-size: var(--font-size-base); }
h6 { font-size: var(--font-size-sm); }

p {
  margin: 0 0 var(--spacing-md) 0;
  color: var(--text-secondary);
}

a {
  color: var(--primary-color);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--primary-light);
  text-decoration: none;
}

/* ========================================
   BUTTONS
   ======================================== */

/* Button Base */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-sm) var(--spacing-lg);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: 1px solid transparent;
  border-radius: var(--border-radius-md);
  transition: all var(--transition-fast);
  position: relative;
  overflow: hidden;
}

.btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(25, 27, 139, 0.25);
}

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

/* Button Variants */
.btn-primary {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--text-light);
}

.btn-primary:hover {
  background-color: var(--primary-light);
  border-color: var(--primary-light);
  color: var(--text-light);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(25, 27, 139, 0.3);
}

.btn-primary:active {
  background-color: var(--primary-dark);
  border-color: var(--primary-dark);
  transform: translateY(0);
}

.btn-secondary {
  background-color: var(--secondary-color);
  border-color: var(--border-color);
  color: var(--text-secondary);
}

.btn-secondary:hover {
  background-color: var(--secondary-dark);
  border-color: var(--border-dark);
  color: var(--text-primary);
}

.btn-success {
  background-color: var(--success-color);
  border-color: var(--success-color);
  color: var(--text-light) !important;
}

.btn-success:hover {
  background-color: #218838;
  border-color: #1e7e34;
  color: var(--text-light) !important;
}

.btn-danger {
  background-color: var(--danger-color);
  border-color: var(--danger-color);
  color: var(--text-light);
}

.btn-danger:hover {
  background-color: #c82333;
  border-color: #bd2130;
  color: var(--text-light);
}

.btn-warning {
  background-color: var(--warning-color);
  border-color: var(--warning-color);
  color: #212529 !important;
}

.btn-warning:hover {
  background-color: #e0a800;
  border-color: #d39e00;
  color: #212529 !important;
}

.btn-info {
  background-color: var(--info-color);
  border-color: var(--info-color);
  color: var(--text-light);
}

.btn-info:hover {
  background-color: #138496;
  border-color: #117a8b;
  color: var(--text-light);
}

/* Button Sizes */
.btn-sm {
  padding: var(--spacing-xs) var(--spacing-md);
  font-size: var(--font-size-sm);
  border-radius: var(--border-radius-sm);
}

.btn-lg {
  padding: var(--spacing-md) var(--spacing-xl);
  font-size: var(--font-size-lg);
  border-radius: var(--border-radius-lg);
}

/* Button with Icons */
.btn i {
  margin-left: var(--spacing-sm);
  font-size: var(--font-size-base);
}

.btn i:first-child {
  margin-left: 0;
  margin-right: var(--spacing-sm);
}

/* ========================================
   FORMS
   ======================================== */

/* Form Groups */
.form-group {
  margin-bottom: var(--spacing-lg);
}

.form-label {
  display: block;
  margin-bottom: var(--spacing-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
  font-size: var(--font-size-base);
}

/* Form Controls */
.form-control {
  display: block;
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: 1.5;
  color: var(--text-primary);
  background-color: var(--bg-primary);
  background-clip: padding-box;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-control:focus {
  color: var(--text-primary);
  background-color: var(--bg-primary);
  border-color: var(--primary-color);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(25, 27, 139, 0.1);
}

.form-control::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

.form-control:disabled {
  background-color: var(--bg-secondary);
  opacity: 0.6;
  cursor: not-allowed;
}

/* Form Control Sizes */
.form-control-sm {
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-sm);
  border-radius: var(--border-radius-sm);
}

.form-control-lg {
  padding: var(--spacing-md) var(--spacing-lg);
  font-size: var(--font-size-lg);
  border-radius: var(--border-radius-lg);
}

/* Select */
select.form-control {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
  background-position: left 0.75rem center;
  background-repeat: no-repeat;
  background-size: 16px 12px;
  padding-left: 2.5rem;
  max-width: 1000px;
}

/* ========================================
   TABLES
   ======================================== */

/* Table Base */
.table {
  width: 100%;
  margin-bottom: var(--spacing-lg);
  color: var(--text-primary);
  background-color: var(--bg-primary);
  border-radius: var(--border-radius-md);
  overflow: hidden;
  box-shadow: 0 1px 3px var(--shadow-light);
}

.table th,
.table td {
  padding: var(--spacing-md);
  vertical-align: middle;
  border-bottom: 1px solid var(--border-light);
  text-align: right;
}

.table th {
  background-color: rgba(25, 27, 139, 0.05);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.table tbody tr {
  transition: background-color var(--transition-fast);
}

.table tbody tr:hover {
  background-color: rgba(25, 27, 139, 0.02);
}

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

/* Table Variants */
.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(0, 0, 0, 0.02);
}

.table-bordered {
  border: 1px solid var(--border-color);
}

.table-bordered th,
.table-bordered td {
  border: 1px solid var(--border-color);
}

/* Custom Tables */
.customs-tables {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  background: transparent;
  border-radius: var(--border-radius-lg);
  overflow: hidden;
padding:0px 15px;
    
}

.customs-tables thead.head-bg {
  background: linear-gradient(135deg, var(--primary-lighter) 0%, var(--primary-light) 100%);
}

.customs-tables thead.head-bg th {
  color: var(--text-light);
  font-weight: var(--font-weight-bold);
  padding: var(--spacing-lg) var(--spacing-md);
  border: none;
  text-align: center;
}

.customs-tables tbody tr.table-cart-row {
  transition: all var(--transition-fast);
  border-bottom: 1px solid var(--border-light);
}

.customs-tables tbody tr.table-cart-row td {
  padding: var(--spacing-lg) var(--spacing-md);
  vertical-align: middle;
  border: none;
}

/* ========================================
   ALERTS
   ======================================== */

.alert {
  position: relative;
  padding: var(--spacing-md) var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
  border: 1px solid transparent;
  border-radius: var(--border-radius-md);
  font-size: var(--font-size-base);
}

.alert-success {
  color: #155724;
  background-color: #d4edda;
  border-color: #c3e6cb;
}

.alert-danger {
  color: #721c24;
  background-color: #f8d7da;
  border-color: #f5c6cb;
}

.alert-warning {
  color: #856404;
  background-color: #fff3cd;
  border-color: #ffeaa7;
}

.alert-info {
  color: #0c5460;
  background-color: #d1ecf1;
  border-color: #bee5eb;
}

/* ========================================
   LAYOUT COMPONENTS
   ======================================== */

/* Main Container */
.container-scroller {
  display: flex;
  min-height: 100vh;
  background-color: var(--bg-secondary);
}
/*خط لوحة التحكم */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css');
body {
    direction: rtl;
    unicode-bidi: embed;
font-family: "IBM Plex Sans Arabic","Tajawal", "Cairo", "Noto Sans Arabic", sans-serif !important;
}

p, ul, ol, li, b, strong, span, a, td, th, label,
button, input, select, textarea, blockquote, caption,
div, section, article, aside, header, footer, nav,
table, thead, tbody, tfoot, h1, h2, h3, h4, h5, h6 {
font-family: "IBM Plex Sans Arabic","Tajawal", "Cairo", "Noto Sans Arabic", sans-serif !important;
}

.table-responsive {
  overflow: hidden !important;
  -webkit-overflow-scrolling: touch;
}


.table > :not(:last-child) > :last-child > *, .jsgrid .jsgrid-table > :not(:last-child) > :last-child > * {
  border-bottom-color: #ffffff;
  font-size: var(--font-size-sm);
  color: var(--secondary-light);
  font-weight: var(--font-weight-bold);
}

.table > thead {
  vertical-align: bottom;
  text-align: center !important;
  background-color: var(--primary-lighter);
}

.table thead th {
  border-top:
0;
  border-bottom-width: 1px;
font-family: "IBM Plex Sans Arabic","Tajawal", "Cairo", "Noto Sans Arabic", sans-serif !important;
  font-weight: initial;
}
.table th, .table td {
  vertical-align: middle;
  font-size: 0.875rem;
  line-height: 1;
  white-space: nowrap;
  padding: 0.9375rem;
  text-align: center;
}
/* إذا كان لديك كلاس معين للتحكم في الوزن */
.font-weight-normal {
font-family: "IBM Plex Sans Arabic","Tajawal", "Cairo", "Noto Sans Arabic", sans-serif;
}

/*قائمة select*/
select, option {
  color: var(--bg-dark);
  background-color: white !important;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
}


/*خلفية لوحة التحكم*/
.page-body-wrapper {
  background-color: #f8f8f8;
}
/*.content-wrapper {
max-width: 1440px;
 margin-left: auto;
  margin-right: auto;*/
    
} 
.main-panel {
  background-color: #f8f8f8;
  max-width: 1480px;
}
.card {
    max-width: 1480px;
  text-align: right;
  margin-right: auto;
  margin-left: auto;
 background: var(--bg-primary);
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius-lg);
  box-shadow: 0 2px 8px var(--shadow-light);
  margin-bottom: var(--spacing-lg);
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
  overflow: hidden;
  padding: var(--spacing-lg);
}
    

.stretch-card > .card {
    max-width: 1480px;
  min-width: 1480px;
}
.bg-white {
  box-shadow: 0 12px 6px -10px rgba(0,0,0,.03),0 4px 48px -16px rgba(0,0,0,.12));
  border-radius: 8px !important;
}

.nav-item.submenu-item-users-manage-settings-menu-items:active {
     background-color: transparent;
  color: #004956 !important;
  border-radius: 0px;
}
.menu-title a:hover {
    color:#ff4545;
}

/*المحتوى داخل لوحة التحكم*/
.card .card-body {
  padding:1.5rem 1.5rem;
  border-radius:8px;
  text-shadow: 0 0 .25em rgba(0,0,0,.3) !important ;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
      background-color:#ffffff;
}
.shadow-sm {
  -webkit-box-shadow:
0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}
/**topbar**/
    .tenant_info {
  background-color: #fff;
  border-radius: 20px;
  flex-shrink: 0;
  border: 1px solid var(--primary-lighter);
  font-weight: 400;
  color: #004956;
  padding: 0px 20px;
  font-size: 13px !important;
  line-height: inherit;
  height: max-content;
  color: var(--primary-darker) !important;
}
    .tenant_info div:not(:last-child) {
   font-weight: 400; color: #004956;
  font-size: 13px !important;
  line-height: inherit;
  height: max-content;
  color:#004956 !important;
    }
    .tenant_info_list_item:not(:first-child) {
  margin-top: 0px;
}
    .tenant_info div span {
  font-weight: 400 !important;
  font-size: 13px !important;
  line-height: inherit;
  height: max-content;
  color: var(--primary-light) !important;
}v
    .tenant_info div > span:first-child {
       margin-top: 0px;
    }
    .navbar .navbar-menu-wrapper {
        gap: 20px;
    }
    .warning-details-card i {
        font-size: 14px;
    }
    .warning-details-card .preview-thumbnail{
        padding: 5px;
    }
    .warning-details-card .preview-subject{
        margin-left: 5px;
    }
    .tenant_info i {
  cursor: pointer;
  display: inline-block;
  align-items: center;
  height: auto;
  width: auto;
color: var(--primary-darker) !important;
font-weight: 700;
  font-size: 21px !important;
  vertical-align: middle;
  margin-left: 7px;
}
.tenant_info_list {
  position: absolute;
  top: 43px;
  right: 0;
  left: auto;
  background-color: #fff;
  padding: 10px 20px;
  box-shadow: 0 0 10px #f9f9f9;
  min-width: 252px;
  width: fit-content;
  font-size: 13px;
  font-weight: normal;
  border-radius: 10px;
  border: 1px solid #e1e8ed;
}
.dropdown-item {
  font-weight: 400;
  color: var(--primary-darker);
  text-align: inherit;
  white-space: nowrap;
}
@media screen and (min-width: 992px) {
  .navbar .navbar-menu-wrapper .navbar-nav.navbar-nav-right {
    margin-left: 0px;
    margin-right: 0px;
  }
}
  .language-switcher-js-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        border: 1px solid #e0e4e8;
        background-color: #f8f9fa;
        color: #004956;
        font-size: 13px;
        font-weight: bold;
        cursor: pointer;
        padding: 0;
        transition: background-color 0.2s ease, color 0.2s ease;
    }
    .language-switcher-js-button:hover {
        background-color: #e9ecef;
        color: #003640;
    }
    
    /**/
/*كل الفورم و الخيارات المنسدلة*/
.form-control {
  display: block;
  width: 100%; /* استخدام 100% أفضل للتجاوبية، وتحكم في العرض من الحاوية الأب إذا لزم الأمر */
  padding: 12px 20px; /* تعديل الحشوة لتكون أكثر توازناً */
  font-family: "IBM Plex Sans Arabic","Tajawal", "Cairo", "Noto Sans Arabic", sans-serif; /* لا حاجة لـ !important إذا لم يكن هناك تجاوز قوي */
  font-size: 1rem; /* استخدام rem لوحدات الخطوط أفضل للتجاوبية (1rem = 16px افتراضياً) */
  font-weight: 400; /* normal هو 400 */
  line-height: 1.5; /* تحسين ارتفاع السطر لسهولة القراءة */
  color: #495057; /* لون نص داكن وأوضح للتباين مع الخلفية البيضاء */
  background-color: #ffffff; /*  خلفية بيضاء واضحة */
  background-clip: padding-box;
  border: 1px solid #ced4da; /* لون حدود قياسي وواضح */
  appearance: none; /* إزالة المظهر الافتراضي للمتصفح */
  border-radius: 8px; /* تعديل بسيط لزوايا دائرية أنيقة */
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; /*  تعريف الانتقال مرة واحدة */
}

.form-control::placeholder { /* تنسيق النص المؤقت */
  color: #6c757d; /* لون رمادي للنص المؤقت */
  opacity: 1; /* التأكد من ظهوره بشكل كامل */
}

.form-control:focus { /* تنسيق عند التركيز على الحقل */
  color: #212529; /* لون نص أغمق قليلاً عند التركيز */
  background-color: #ffffff;
  border-color: #86b7fe; /* لون حدود أزرق فاتح عند التركيز (لون Bootstrap الافتراضي) */
  outline: 0; /* إزالة التحديد الافتراضي للمتصفح */
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); /* ظل خفيف عند التركيز (لون Bootstrap الافتراضي) */
}


.attachment-preview {
  position: relative;
  box-shadow: none;
  background:#fff !important;
  cursor: pointer;
  width: 100px;
  height: 100px;
}
.footer {
background: var(--primary-lighter);
background: var(--primary-lighter);
border-top:1px solid #dddddd !important;
  padding:10px;  transition:all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -webkit-transition:all 0.25s ease;
  -ms-transition: all 0.25s ease;
      color:var(--primary2-color) !important;

}
.footer .text-muted.d-block.text-center.text-sm-start.d-sm-inline-block p {
    color:var(--primary2-color) !important;
}
.page-title {  
  /*display: none !important;*/
}
.form-group label {
  font-size: 14px !important;
  font-weight: normal!important;
  margin-bottom: .5rem  !important;
  display: inline-block !important;
}
.payment-gateway-wrapper ul li.selected {
  border:2px solid #5ae4f2 !important;
  border-radius:10px !important;
}
.page-builder-area-wrapper .all-field-wrap .action-wrap {
    background-color: #e9fbff !important;

}
.page-builder-area-wrapper .all-field-wrap {
    background-color: #e9fbff !important;

}

.wpp-pack { background-color:#d1fadf;margin:10px 5px;padding:4px 10px;color:#004956;border-radius:10px !important;font-size: 13px;}
.mdi-shopping-outline::before {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/**تصميم صفحة كل الاعدادات all-store-settings**/

/* CSS for Standalone "Coming Soon" Button/Link */
.button-coming-soon {
    display: inline-flex; /* لعرض الأيقونة والنص بجانب بعضهما ولمحاذاتهما */
    align-items: center;
    justify-content: center;
    padding: 5px 25px; /* تعديل الحشوة حسب الرغبة */
    margin-right: auto;
    margin-left: auto;
    background: linear-gradient(45deg, #ff8c00, #ff0080, #ffeb3b, #ff0080);
    background-size: 400% 400%;
    animation: fieryGradient 10s ease infinite;
    display: inline-flex; /* أو flex إذا كان block هو الأب */
    align-items: center;
    justify-content: center;
    color: #282828;
    font-weight: 700;
    font-size: 1rem; /* تعديل حجم الخط حسب الرغبة */
    text-decoration: none; /* لإزالة الخط السفلي إذا كان رابطًا */
    border: none; /* إزالة أي حدود افتراضية */
    border-radius: 8px; /* زوايا دائرية */
    cursor: pointer; /* تغيير شكل المؤشر */
    
    box-shadow: 0 0 15px rgba(255, 100, 0, 0.4);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.button-coming-soon:hover {
    transform: translateY(-2px) scale(1.02); /* تأثير بسيط عند التحويم */
    box-shadow: 0 4px 20px rgba(255, 100, 0, 0.6);
}

.button-coming-soon .mdi { /* لتنسيق الأيقونة داخل الزر */
    font-size: 1.2em; /* تعديل حجم الأيقونة بالنسبة للنص */
    margin-right: 8px; /* مسافة بين الأيقونة والنص (في LTR) */
    margin-left: 0;
}

html[dir="rtl"] .button-coming-soon .mdi {
    margin-left: auto;
    margin-right: auto;
}

/* نفس الأنيميشن للخلفية النارية */
@keyframes fieryGradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/***/

.dashboard-products-add .nav-pills .nav-link {
  color: #1a1a1a;
  padding-left: 20px;
  text-align: right;
  border-bottom: 1px solid #e5e5e5;
  list-style: dotted;
  box-shadow: -6px 0 8px rgba(241,245,245,0.78) inset;
  font-size: 14px;
}




select.form-control {
  border: 1px solid #ddd;
}
.me-3, .template-demo > .btn, .template-demo > .btn-toolbar {
  margin-right: 0rem !important;
}

   /**بلوكات المساعدة فى الواجهه**/
    
    .blocks-container {
    display: flex; /* استخدام Flexbox لتوزيع البلوكات */
    flex-wrap: wrap; /* السماح للبلوكات بالانتقال لسطر جديد على الشاشات الصغيرة إذا لزم الأمر */
    gap: 20px; /* المسافة بين البلوكات */
    justify-content: center; /* لتوسيط البلوكات إذا لم تملأ الصف بالكامل */
    margin-bottom:25px;
}

.info-block {
    background-color: #ffffff;
    border-radius: 8px; /* حواف دائرية للبلوك نفسه */
    padding: 25px 20px;
    text-align: center; /* لتوسيط المحتوى داخل البلوك */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* ظل خفيف للبلوك */
    
    /* لتحديد عرض البلوكات ليكون 6 في الصف */
    /* (100% / 6) - (gap * 5 / 6) */
    /* سأستخدم طريقة أبسط مع flex-grow و flex-basis لسهولة التعديل */
    flex: 1 1 calc(16.666% - 20px); /* السماح بالنمو والتقلص، مع تحديد أساس العرض */
                                   /* 20px هنا هي قيمة الـ gap. إذا غيرت الـ gap، عدل هذه القيمة */
    min-width: 200px; /* حد أدنى للعرض لمنع البلوكات من أن تصبح ضيقة جدًا */
    box-sizing: border-box; /* لضمان أن padding و border لا يضيفان للعرض المحدد */
    display: flex; /* لجعل البلوك نفسه flex container */
    flex-direction: column; /* لترتيب العناصر الداخلية (أيقونة، عنوان، وصف، زر) بشكل عمودي */
    align-items: center; /* لتوسيط العناصر الداخلية أفقيًا */
}

.info-block-icon {
    font-size: 2.5rem; /* حجم الأيقونة */
    color: #004956; /* لون الأيقونة (يمكنك تغييره لكل بلوك إذا أردت) */
    margin-bottom: 15px;
}

.info-block-title {
    font-size: 1.25rem; /* حجم العنوان */
    color: #333333;
    margin-top: 0;
    margin-bottom: 10px;
    font-weight: 600;
}

.info-block-description {
    font-size: 0.9rem; /* حجم الوصف */
    color: #666666;
    line-height: 1.6;
    margin-bottom: 20px;
    flex-grow: 1; /* لجعل الوصف يأخذ المساحة المتبقية ودفع الزر للأسفل */
}

.info-block-button {
    background-color: #004956; /* لون خلفية الزر */
    color: #ffffff; /* لون نص الزر */
    padding: 8px 18px; /* المسافة الداخلية للزر */
    border: none;
    border-radius: 10px; /* حواف دائرية للزر */
    text-decoration: none; /* إزالة الخط تحت الرابط */
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease; /* تأثير انتقالي سلس */
    display: inline-block; /* ليتصرف كزر */
    margin-top: auto; /* لدفع الزر إلى أسفل البلوك إذا كان هناك مساحة فارغة */
}

.info-block-button:hover {
    background-color: #003640; /* لون خلفية الزر عند التحويم (أغمق قليلاً) */
    transform: translateY(-2px); /* تأثير رفع طفيف عند التحويم */
}

/* لجعل البلوكات تتجاوب على الشاشات المختلفة */
@media (max-width: 1200px) {
    .info-block {
        flex: 1 1 calc(33.333% - 20px); /* 3 بلوكات في الصف */
    }
}

@media (max-width: 768px) {
    .info-block {
        flex: 1 1 calc(50% - 20px); /* بلوكان في الصف */
    }
}

@media (max-width: 576px) {
    .info-block {
        flex: 1 1 100%; /* بلوك واحد في الصف */
        min-width: unset; /* إلغاء الحد الأدنى للعرض على الشاشات الصغيرة جدًا */
    }
    .blocks-container {
        gap: 15px; /* تقليل المسافة بين البلوكات على الشاشات الصغيرة */
    }
}

/*ازرار الرئيسية*/
.button-row-container {
    display: flex;
    gap: 15px;
    padding: 20px;
}

.pill-button {
  padding: 5px 15px;
  border-radius: 20px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
  display: inline-block;
  border: 1px solid transparent;
  background-color: var(--bs-blue);
  color: var(--secondary-light);
}

.pill-button:hover {
    background-color: var(--primary-color);
transform: translateY(-2px);
  color: var(--secondary-light);

}

.pill-button.active {
    background-color: #a4e5c2;
    color: #004956;
    font-weight: 600;
}

.pill-button.active:hover {
    background-color: var(--primary-color);
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    .button-row-container {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    .pill-button {
        width: 80%;
        max-width: 300px;
    }
}


/*********بلوكات كل الاعدادات****/
 /* === Body Background (if you want to change the whole page background) === */
    /* You might need to apply this to a higher-level container or body tag in your admin-master layout if this doesn't work directly */
    .settings-hub-page-wrapper { /* Add this class to the main content wrapper in admin-master if needed */
        /* background-color: #f0f2f5; /* Light grey background */
        /* padding-top: 20px; /* Add some padding if needed */
        /* padding-bottom: 20px; */
    }
    /* If the above doesn't work, you might need to set the background on a parent element in your main layout */
    /* For example, if your content area has a class like 'main-panel' or 'content-wrapper' */
    /* .main-panel { background-color: #f0f2f5 !important; } */


    .settings-hub-page .card-title {
        font-size: 1.5rem;
        font-weight: 600;
        color: #333;
    }

    /* === Top Blocks Section === */
    .top-blocks-container {
        display: flex;
        flex-wrap: wrap; /* Allow wrapping on smaller screens */
        gap: 20px;
        margin-bottom: 30px;
    }
    .top-block-large {
        flex: 3; /* Takes more space */
        background-color: #fff;
        border-radius: 10px;
        padding: 25px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
        border: 1px solid #e9ecef;
    }
    
    .top-block-small {
        flex: 1; /* Takes less space */
        background-color: #fff;
        border-radius: 10px;
        padding: 25px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
        border: 1px solid #e9ecef;
        min-height: 150px; /* Example height, adjust as needed */
    }
    .top-block-item {
        margin-bottom: 20px;
    }
    .top-block-item:last-child {
        margin-bottom: 0;
    }
    .top-block-item h6 {
        font-size: 1.1rem;
        font-weight: 600;
        color: #004956;
        margin-bottom: 8px;
    }
    .top-block-item p {
        font-size: 0.9rem;
        color: #555;
        margin-bottom: 10px;
    }
    .top-block-item .btn-primary {
        background-color: #004956;
        border-color: #004956;
        font-size: 0.85rem;
        padding: 8px 15px;
    }
    .top-block-item .btn-primary:hover {
        background-color: #003640;
        border-color: #003640;
    }
    /* Empty white block */
    .empty-white-block {
        background-color: #fff;
        border-radius: 10px;
        padding: 25px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
        border: 1px solid #e9ecef;
        margin-bottom: 30px;
        min-height: 100px; /* Adjust as needed */
    }


    /* === Settings Section Wrapper (White Background) === */
    .settings-section-wrapper {
        background-color: #fff;
        border-radius: 10px;
        padding: 25px;
        margin-bottom: 30px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
        border: 1px solid #e9ecef;
    }
.settings-section {
    background-color: #ffffff;
    padding:20px;
    border-radius: 12px;
  -webkit-box-shadow: 0 3px 5px rgba(141, 93, 167, 0.06);
  box-shadow: 0 3px 5px rgba(141, 93, 167, 0.06);
  width: 100%;
  margin-bottom: 30px;
}
.settings-section-title {
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--secondary-light);
  margin-bottom: 30px;
  padding: 10px 25px;
  background: var(--primary-lighter);
  border-radius: 12px;
}

    .settings-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); /* Adjusted minmax */
        gap: 18px; /* Adjusted gap */
    }

   .setting-card {
  background-color: #ffffff;
  border-radius: 5px;
  padding: 5px 20px;
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  border: 1px solid #e9e9f0;
  align-items: center;
  box-shadow: 0 -4px 10px -6px rgba(0, 128, 0, 0.08), 0 4px 12px rgba(0, 128, 0, 0.04);
}
    .setting-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 4px 10px rgba(0,0,0,0.06); /* Slightly stronger hover shadow */
    }
    .setting-card-icon {
  font-size: 28px;
  color: var(--primary-lighter);
    }
    html[dir="rtl"] .setting-card-icon {
        margin-right: 0;
        margin-left: 12px;
    }
    .setting-card-content {
        flex-grow: 1;align-items: center;

    }
    .setting-card-title {
    font-weight: var(--font-weight-medium);
  color:#282828;
  font-size:var(--font-size-lg);
  margin-bottom: 4px;
  text-align: right;
    }
    .setting-card-description {
  font-size: var(--font-size-xl);
  color: #282828;
  line-height: 1.4;
  font-weight: var(--font-weight-bold);
    text-align: right;
}
.d-flex {
  display: flex;
  align-items: center;
}

    @media (max-width: 1199px) {
        .settings-grid {
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        }
        .top-blocks-container {
            flex-direction: column; /* Stack top blocks on smaller screens */
        }
        .top-block-large, .top-block-small {
            flex: none; /* Reset flex for stacking */
            width: 100%;
        }
    }
    @media (max-width: 991px) {
        .settings-grid {
            grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
        }
    }
    @media (max-width: 767px) {
        .settings-grid {
            grid-template-columns: 1fr;
        }
         .setting-card {
            padding: 15px;
        }
    }
    
    @media (max-width: 991.98px) {
    .main-panel {
margin-top: inherit;    }
}

@media (max-width: 767.98px) {
    .main-panel {
margin-top: inherit;    }
}

.top-info-area {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 30px;
}

.top-info-block-main {
    flex: 2;
    min-width: 300px;
    background-color: #fff;
    border-radius: 10px;
    padding: 25px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    border: 1px solid #e9ecef;
}

.top-info-block-secondary {
    flex: 1;
    min-width: 250px;
    background-color: #fff;
    border-radius: 10px;
    padding: 25px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    border: 1px solid #e9ecef;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 180px;
}

.top-info-block-main .section-header {
    font-size: 0.9rem;
    font-weight: 600;
    color: #198754;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.top-info-cards-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.top-info-card {
    flex: 1;
    min-width: 200px;
    background-color: #fff;
    border-radius: 8px;
    padding: 20px;
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #333;
    border: 1px solid #e0e0e0;
    transition: box-shadow 0.2s ease;
}

.top-info-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.top-info-card-icon {
    font-size: 2rem;
    color: #6f42c1;
    margin-right: 15px;
    margin-left: 0;
    flex-shrink: 0;
}

html[dir="rtl"] .top-info-card-icon {
    margin-right: 0;
    margin-left: 15px;
}

.top-info-card-content h6 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 5px;
}

.top-info-card-content p {
    font-size: 0.8rem;
    color: #777;
    margin-bottom: 0;
    line-height: 1.4;
}

@media (max-width: 991px) {
    .top-info-area {
        flex-direction: column;
    }
    .top-info-block-main,
    .top-info-block-secondary {
        flex: none;
        width: 100%;
    }
    .top-info-cards-container {
        flex-direction: column;
    }
    .top-info-card {
        min-width: 100%;
    }
}

 /**login**/
 .auth form .form-group {
  margin-bottom: 1.5rem;
  border: 1px solid #ededed;
  border-radius: 20px;
}
.auth .auth-form-light {
background: #ffffff;
  border: 1px solid #ddd;
  border-radius: 20px;}
.user-wallet-display {
  background-color: var(--bg-primary);
  border-radius: 20px;
  flex-shrink: 0;
  border: 1px solid var(--primary-lighter);
  font-weight: 400;
  color: var(--primary-color);
  padding: 0px 10px;
  font-size: 13px;
  line-height: inherit;
  height: max-content;
}
.user-wallet-display i {
  font-weight: 700;
  color: var(--primary-darker) !important;
  font-size: 21px;
  vertical-align: middle;
  margin-left: 7px;
}

.navbar .navbar-brand {
  width: auto;
}

/*زر زيارة المتجر*/
.pill-button-gostore a {
  background-color: var(--primary-lighter);
  border-radius: 20px;
  flex-shrink: 0;
  border: 1px solid var(--primary-light);
  font-weight: 400;
  color: #004956;
  padding: 7px 20px;
  font-size: 13px !important;
  color: var(--text-light) !important;
}
.navbar .navbar-menu-wrapper .navbar-nav .nav-item .nav-link {
  color: inherit;
  font-size: 13px;
  margin-left: 4px;
  margin-right: 4px;
  height: 70px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.global-search-input.form-control {
    height: 38px;
    width: inherit; /* العرض الأساسي */
    max-width: 280px; /*  حد أقصى للعرض إذا كان سيتمدد */
    min-width: 180px; /*  حد أدنى للعرض */
    border-radius: 10px; /*  لجعله بيضاويًا كما في بعض التصاميم */
    border: 1px solid #ced4da; /*  حدود قياسية */
    padding: 0.375rem 0.75rem; /*  padding قياسي لـ form-control */
    font-size: 0.9rem; /*  حجم خط مناسب */
    transition: width 0.3s ease-in-out; /*  لتأثير تمدد سلس (اختياري) */
   margin-left: 5px;
   margin-right: 0px;
}

/* (اختياري) لجعل صندوق البحث يتمدد قليلاً عند التركيز عليه */
.global-search-input.form-control:focus {
    width: 280px; /* أو أي عرض تفضله عند التركيز */
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* Fix for common dropdown libraries in RTL */
.select2-dropdown,
.choices__list--dropdown,
.dropdown-menu {
    left: auto !important;
    right: 0 !important;
    /* You might also need one of these depending on the library */
    transform-origin: top right !important;
}
/* القائمة المنسدلة لنتائج البحث */
.search-dropdown.dropdown-menu {
    top: calc(100% + 5px) !important; /*  تعديل ليكون أسفل الصندوق مباشرة (مع إزاحة طفيفة) */
    border-radius: 8px;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(0,0,0,.1);
    /* تأكد أن عرض القائمة المنسدلة يتناسب مع عرض صندوق البحث */
    /* يمكنك التحكم به عبر JavaScript أو تحديد min-width/width */
    min-width: 250px; /* مثال */
    right: auto;
  left: 45%;
}

.navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .dropdown-menu.navbar-dropdown {
  position: absolute;
  font-size: 13px;
  margin-top: -10px;
  padding: 0;
  right: 0;
  left: auto;
  min-width: 252px;
  width: fit-content;
  font-weight: normal;
  border-radius: 3px;
  border: 1px solid #e1e8ed;
}
.navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .dropdown-menu.navbar-dropdown .dropdown-item {
  margin-bottom: 0;
  padding: 0px 15px;
  cursor: pointer;
  font-size: var(--font-size-base);
  border: 1px solid var(--shadow-light);
}
.mdi-fullscreen::before {
  content: "\F293";
  font-size: 30px;
    color: var(--primary-lighter);
}
.mdi-email-outline::before {
  content: "\F1F0";
    font-size: 26px;
  color: var(--primary-lighter);
}
.mdi-bell-outline::before {
  content: "\F09C";
      font-size: 26px;
    color: var(--primary-lighter);
}

li.nav-item.nav-profile.dropdown .dropdown-menu .dropdown-item:hover {
  color: #c41818;
  background-color: rgba(25, 27, 139, 0.05);
  color: var(--primary-color) !important;
  padding-right: calc(var(--spacing-lg) + var(--spacing-sm)) !important;
}
/* General Navbar Styling */
.custom-tenant-navbar {
    display: flex;
  z-index: 111;
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
  box-shadow: 0 2px 20px rgba(25, 27, 139, 0.15);
  padding: var(--spacing-xs) var(--spacing-2xl);
  display: flex;
  align-items: center;
  justify-content: space-between;
  backdrop-filter: blur(10px);
  box-shadow: inset -20px 0 30px rgba(0, 0, 0, 0.4);

}

/* Navbar Left Section (Logo and Action Buttons) */
.custom-tenant-navbar .navbar-left {
    display: flex;
    align-items: center;
}
.custom-tenant-navbar .navbar-logo-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}
.custom-tenant-navbar .navbar-action-button {
    display: flex;
    align-items: center;
    padding: 8px 15px;
    border-radius: 20px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: background-color 0.2s ease;
}
.custom-tenant-navbar .navbar-action-button i {
    font-size: 18px;
    margin-left: 6px; /* For RTL, this would be margin-right */
    margin-right: 6px; /* Adjusted for RTL */
}

.custom-tenant-navbar .add-product-btn {
    background-color: #a7ffc3; /* Lighter, softer green */
    color: #004e5c;
    border: 1px solid #8addaa;
}
.custom-tenant-navbar .add-product-btn:hover {
    background-color: #8addaa;
}

.custom-tenant-navbar .all-settings-btn {
    background-color: transparent;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.5);
}
.custom-tenant-navbar .all-settings-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
}


/* Navbar Menu (Center/Right) */
.custom-tenant-navbar .navbar-menu {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: var(--spacing-lg);
}

.custom-tenant-navbar .nav-item {
 position: relative;
}

.custom-tenant-navbar .nav-link {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  color: var(--text-light);
  text-decoration: none;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--border-radius-md);
  transition: all var(--transition-fast);
  font-weight: var(--font-weight-medium);
  position: relative;
}
.custom-tenant-navbar .nav-link:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--text-light);
  transform: translateY(-1px);
}

.custom-tenant-navbar .nav-link i {
  font-size: var(--font-size-lg);
}

.custom-tenant-navbar .dropdown-indicator {
  transition: transform var(--transition-fast);
}

.custom-tenant-navbar .nav-item.dropdown-hover:hover .dropdown-indicator {
  transform: rotate(180deg);
}

/* Dropdown Menu Styling */
/* Dropdown Menu */
.custom-tenant-navbar .dropdown-menu-custom {
  position: absolute;
  top: 85%;
  right: 0;
  min-width: 250px;
  background: var(--bg-primary);
  border-radius: var(--border-radius-lg);
  box-shadow: 0 10px 30px var(--shadow-dark);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all var(--transition-normal);
  z-index: var(--z-dropdown);
  border: 1px solid var(--border-light);
  padding: var(--spacing-sm) 0;
  margin-top: var(--spacing-sm);
}

.custom-tenant-navbar .nav-item.dropdown-hover:hover .dropdown-menu-custom {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.custom-tenant-navbar .dropdown-menu-custom li {
  list-style: none;
}

.custom-tenant-navbar .dropdown-menu-custom li a {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-lg);
  color: var(--text-secondary);
  text-decoration: none;
  transition: all var(--transition-fast);
  font-size: var(--font-size-base);
}

.custom-tenant-navbar .dropdown-menu-custom li a:hover {
  background-color: rgba(25, 27, 139, 0.05);
  color: var(--primary-color);
  padding-right: calc(var(--spacing-lg) + var(--spacing-sm));
}

.custom-tenant-navbar .dropdown-menu-custom li a i {
  font-size: var(--font-size-base);
  width: 20px;
  text-align: center;
}

/* Navbar Action Buttons */
.custom-tenant-navbar .navbar-left {
  display: flex;
  align-items: center;
}

.custom-tenant-navbar .navbar-logo-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.custom-tenant-navbar .navbar-action-button {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-xs) var(--spacing-md);
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-light);
  text-decoration: none;
  border-radius: var(--border-radius-md);
  transition: all var(--transition-fast);
  font-weight: var(--font-weight-medium);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.custom-tenant-navbar .navbar-action-button:hover {
  background: rgba(255, 255, 255, 0.2);
  color: var(--text-light);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.custom-tenant-navbar .add-product-btn {
  background: var(--primary2-color);
  border-color: var(--primary2-color);
  color:#282828;
}

.custom-tenant-navbar .add-product-btn:hover {
  background: var(--primary3-color);
  border-color: var(--primary3-color);
  color:#000000;
}

.custom-tenant-navbar .all-settings-btn {
background-color: var(--success-color);
  border-color: var(--success-color);
  color: var(--text-light);
}

.custom-tenant-navbar .all-settings-btn:hover {
background-color: #218838;
  border-color: #1e7e34;
  color: var(--text-light);
}

/**صفحة كل المنتجات*/
/* General Table Wrapper Styling */
.table-wrap#product-table-body {
    background-color: #f8f9fa; /* Light gray background for the area containing product cards */
    padding: 20px 15px; /* Add some padding around the cards container */
}

/* Hide original table structure appearance if needed, or style the header separately */
table.customs-tables#myTable {
    border-collapse: separate; /* Crucial for using border-spacing */
    border-spacing: 0 15px; /* Vertical spacing between "rows" (cards) */
    width: 100%;
    /* Remove default table borders if they interfere */
    border: none;
}

table.customs-tables#myTable thead.head-bg {
  background-color: transparent;
  color: var(--secondary-light);
  font-size: var(--font-size-base) !important;
  font-weight: var(--font-weight-normal) !important;
  text-align: right;
}

table.customs-tables#myTable thead.head-bg th {
  padding: 0px 0px;
  border-bottom: 2px solid var(--primary-light);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
}
table.customs-tables#myTable thead.head-bg th:first-child,
table.customs-tables#myTable thead.head-bg th:last-child {
    /* Optional: specific styling for first/last header cells if needed */
}


/* Styling each table row to act as a card */
table.customs-tables#myTable tbody tr.table-cart-row {
    width: 100%;
    border-radius: 12px; /* Rounded corners for the card */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07); /* Soft shadow */
    /* margin-bottom: 15px; -- This is handled by border-spacing on the table */
}

/* Ensure table cells within the card-like row behave correctly */
table.customs-tables#myTable tbody tr.table-cart-row td {
    padding: 0px; /* Padding inside each cell */
    vertical-align: middle; /* Align content vertically in the middle */
    border-top: none; /* Remove default top border from table cells */
                          /* A light border can be added if desired between cells for definition */
    /* border-right: 1px solid #f0f0f0; */ /* Example: very light vertical separator */
}
/* Remove border from the last cell if using vertical separators */
/*
table.customs-tables#myTable tbody tr.table-cart-row td:last-child {
    border-right: none;
}
*/


/* Specific cell styling to match the image's layout */

/* Checkbox */
table.customs-tables#myTable tbody tr.table-cart-row td:first-child { /* Checkbox column */
    width: 50px; /* Fixed width for checkbox */
    text-align: center;
}

/* Product Image and Name/Description */
table.customs-tables#myTable tbody tr.table-cart-row td.product-name-info {
    width: 30%; /* Allocate more width for product info */
}
.product-name-info .logo-brand {
    width: 60px; /* Adjust image size */
    height: 60px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
}
.logo-brand img {
    max-width: 65px;
    max-height: 65px;
    object-fit: cover;
}
.product-name-info .product-summary p {
    margin-bottom: 4px;
    font-size: 13px; /* Matching the description font size you requested */
    color: #555;
}
.product-name-info .product-summary p.font-weight-bold {
    font-size: 15px; /* Slightly larger for product name */
    color: #222;
    font-weight: 600; /* Bolder product name */
}


/* Action Buttons Column (الإجراءات) */
table.customs-tables#myTable tbody tr.table-cart-row td:last-child { /* Actions column */
    width: 150px; /* Adjust as needed */
    text-align: left; /* For RTL, actions are typically on the left */
}

.action-icon { /* Container for action icons */
    display: flex;
    justify-content: flex-start; /* Align icons to the start (left in RTL) */
    gap: 8px;
}
.action-icon .icon {
    font-size: 18px;
    color: #777;
    padding: 5px;
    border-radius: 4px;
    transition: background-color 0.2s, color 0.2s;
}
.action-icon .icon:hover {
    color: #333;
    background-color: #f0f0f0;
}
.action-icon .icon.deleted:hover {
    color: #dc3545; /* Red for delete hover */
    background-color: #fdd;
}


/* Status (منشور) styling */
table.customs-tables#myTable tbody tr.table-cart-row td[data-label="Status"] {
    width: 120px; /* Adjust as needed */
}
/* You already have .status-dropdown styles, ensure they fit */
/* Example for the green "منشور" badge if it's not a dropdown */
.status-badge {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 15px; /* Pill shape */
    font-size: 12px;
    font-weight: 500;
    color: #fff;
}
.status-badge.published {
    background-color: #28a745; /* Green for published */
}
.status-badge.draft {
    background-color: #6c757d; /* Gray for draft */
}


/* Other columns (Price, SKU, Stock, etc.) */
/* You'll need to adjust widths and alignments for these based on your preference */
/* Example:
table.customs-tables#myTable tbody tr.table-cart-row td.price-td {
    width: 100px;
    text-align: center;
}
*/

/* Ensure the cells take up space correctly within the table-row display */
table.customs-tables#myTable tbody tr.table-cart-row td {
    display: table-cell;
}

/* Removing any leftover default table styles that might interfere */
table.customs-tables#myTable,
table.customs-tables#myTable th,
table.customs-tables#myTable td {
    /* border: none; /* This might be too aggressive, depends on your base styles */
}

.faq-container {
        max-width: 1240px;
        margin: 40px auto;
        padding: 0 20px;
    }

    .faq-item {
        background: #fff;
  border-radius: 15px;
  margin-bottom: 15px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  transition: all 0.3s ease;
  border: 4px solid #e2e8ed;
    }

    .faq-question {
        background: #f9fcff;
        padding: 15px 20px;
        cursor: pointer;
        font-weight: bold;
        position: relative;
        font-size: 18px;
    }

    .faq-question::after {
        content: '+';
        position: absolute;
        left: 20px;
        font-size: 22px;
        transition: transform 0.3s ease;
    }

    .faq-item.active .faq-question::after {
        transform: rotate(45deg);
    }

    .faq-answer {
        padding: 15px 20px;
        display: none;
        font-size: 16px;
        background: #f9fafb;
        color: #333;
    }

    .faq-item.active .faq-answer {
        display: block;
    }
      .help-center-page {
        padding: 30px 15px;
        background-color: #f8f9fa; /* لون خلفية فاتح للصفحة */
        min-height: calc(100vh - 100px); /* لملء ارتفاع الشاشة تقريباً */
    }

    .help-center-header {
        text-align: center;
        margin-bottom: 40px;
    }

    .help-center-header h1 {
        font-size: 2.5rem;
        color: #343a40;
        font-weight: 700;
        margin-bottom: 10px;
    }

    .help-center-header p {
        font-size: 1.1rem;
        color: #6c757d;
        max-width: 700px;
        text-align: center;
        margin: 0 auto;
    }

    .support-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 30px; /* المسافة بين البطاقات */
    }

    .support-card {
        background-color: #ffffff;
        border-radius: 15px;
        padding: 30px;
        text-align: center;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08); /* ظل أكثر بروزاً */
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        display: flex;
        flex-direction: column;
        justify-content: space-between; /* لتوزيع المحتوى داخل البطاقة */
        border: 2px solid #e2e8ed;
    }

    .support-card:hover {
        transform: translateY(-8px); /* تأثير الرفع عند المرور */
        box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12);
    }

    .support-card-icon {
        font-size: 3.5rem; /* حجم الأيقونة */
        margin-bottom: 20px;
        line-height: 1; /* لضبط ارتفاع الخط للأيقونة */
    }
    /* ألوان أيقونات مميزة */
    .icon-email { color: #007bff; } /* أزرق */
    .icon-whatsapp { color: #25D366; } /* أخضر واتساب */
    .icon-chat { color: #fd7e14; } /* برتقالي */
    .icon-tickets { color: #6f42c1; } /* بنفسجي */
    .icon-knowledge { color: #17a2b8; } /* تركواز */
    .icon-faq { color: #ffc107; } /* أصفر */


    .support-card h3 {
        font-size: 1.5rem;
        color: #343a40;
        margin-top: 0;
        margin-bottom: 10px;
        font-weight: 600;
    }

    .support-card p {
        font-size: 0.95rem;
        color: #6c757d;
        line-height: 1.6;
        margin-bottom: 25px;
        flex-grow: 1; /* لجعل الوصف يأخذ المساحة المتاحة */
    }

    .support-card .btn-support {
        display: inline-block;
        padding: 12px 25px;
        font-size: 1rem;
        font-weight: 600;
        color: #fff;
        background-color: #007bff; /* لون أساسي للأزرار */
        border: none;
        border-radius: 8px;
        text-decoration: none;
        transition: background-color 0.3s ease, transform 0.2s ease;
        align-self: center; /* لتوسيط الزر إذا كان عرض البطاقة يسمح */
        min-width: 180px; /* حد أدنى لعرض الزر */
    }
    .support-card .btn-support:hover {
        background-color: #0056b3;
        transform: scale(1.03);
    }
    /* ألوان أزرار متناسقة مع الأيقونات (اختياري) */
    .btn-email { background-color: #007bff; }
    .btn-email:hover { background-color: #0056b3; }
    .btn-whatsapp { background-color: #25D366; }
    .btn-whatsapp:hover { background-color: #128C7E; }
    .btn-chat { background-color: #fd7e14; }
    .btn-chat:hover { background-color: #e66b00; }
    .btn-tickets { background-color: #6f42c1; }
    .btn-tickets:hover { background-color: #5a32a3; }
    .btn-knowledge { background-color: #17a2b8; }
    .btn-knowledge:hover { background-color: #117a8b; }
    .btn-faq { background-color: #ffc107; color: #212529; } /* لون نص داكن للخلفية الصفراء */
    .btn-faq:hover { background-color: #e0a800; }


    /* تذييل اختياري */
    .help-center-footer {
        text-align: center;
        margin-top: 50px;
        padding-top: 20px;
        border-top: 1px solid #dee2e6;
    }
    .help-center-footer p {
        color: #6c757d;
        font-size: 0.9rem;
    }
    .help-center-footer a {
        color: #007bff;
        text-decoration: none;
        font-weight: 500;
    }
    .help-center-footer a:hover {
        text-decoration: underline;
    }
    
    /**سوق تطبيقات بريميوم*/
           .premium-services-page {
            padding: 25px 15px;
        }

        .page-header-controls { /* تم تغيير الاسم ليعكس أنه رأس وليس فقط عناصر تحكم ديناميكية */
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 25px;
            padding: 15px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }

        .page-header-controls .control-group-static span { /* تم تغيير لـ span */
            margin-left: 8px;
            font-size: 0.9rem;
            color: #555;
            font-weight: 500;
        }
        .page-header-controls .control-group-static select {
             padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 0.9rem;
            background-color: #fff;
            min-width: 80px;
        }


        .services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 20px;
        }

        .service-card {
            background-color: #ffffff;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07);
            display: flex;
            flex-direction: column;
            transition: box-shadow 0.3s ease, transform 0.3s ease;
        }
        .service-card:hover {
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
            transform: translateY(-3px);
        }

        .service-card-header {
            display: flex;
            align-items: flex-start;
            margin-bottom: 15px;
        }

        .service-card-image {
            width: 48px;
            height: 48px;
            border-radius: 8px;
            object-fit: contain;
            margin-left: 15px;
            border: 1px solid #eee;
        }

        .service-card-info {
            flex-grow: 1;
        }

        .service-card-title {
            font-size: 1.15rem;
            font-weight: 600;
            color: #333;
            margin-top: 0;
            margin-bottom: 5px;
        }

        .service-card-developer {
            font-size: 0.8rem;
            color: #777;
            margin-bottom: 8px;
        }
        .service-card-developer .rating {
            margin-right: 5px;
            color: #666;
        }
        .service-card-developer .rating .fa-star {
            color: #ffc107;
            font-size: 0.85rem;
        }

        .service-card-description {
            font-size: 0.85rem;
            color: #555;
            line-height: 1.6;
            margin-bottom: 15px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            min-height: calc(0.85rem * 1.6 * 2);
        }

        .service-card-tags {
            margin-bottom: 20px;
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .service-card-tag {
            background-color: #e9ecef;
            color: #495057;
            padding: 4px 10px;
            border-radius: 15px;
            font-size: 0.75rem;
            font-weight: 500;
        }
        .tag-free { background-color: #d1e7dd; color: #0f5132; }
        .tag-premium { background-color: #cfe2ff; color: #084298; }
        .tag-trial { background-color: #f8d7da; color: #842029; }
        .tag-discount { background-color: #cff4fc; color: #055160; font-weight: bold;}


        .service-card-footer {
            margin-top: auto;
            text-align: left;
        }

        .btn-service-action {
            padding: 8px 18px;
            font-size: 0.9rem;
            font-weight: 500;
            color: #007bff;
            background-color: #fff;
            border: 1px solid #007bff;
            border-radius: 6px;
            text-decoration: none;
            transition: background-color 0.3s ease, color 0.3s ease;
        }
        .btn-service-action:hover {
            background-color: #007bff;
            color: #fff;
        }

        @media (min-width: 992px) {
            .services-grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }
        @media (min-width: 768px) and (max-width: 991.98px) {
            .services-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        @media (max-width: 767.98px) { /* تعديل لضمان عدم التداخل */
            .services-grid {
                grid-template-columns: 1fr;
            }
            .page-header-controls {
                flex-direction: column;
                gap: 15px;
                align-items: stretch; /* لجعل العناصر تأخذ عرض كامل */
            }
            .page-header-controls .control-group-static {
                display: flex; /* لترتيب الليبل والسيلكت بجانب بعضهما */
                justify-content: space-between;
                 align-items: center;
            }
             .page-header-controls .control-group-static select {
                flex-grow: 1;
                margin-right: 10px;
            }
        }
    /***/
   

.new-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0px 12px; /* Increased padding for better visual presence */
    margin-right: auto; /* Keeps it centered if parent is flex and allows space */
    margin-left: auto;  /* Keeps it centered if parent is flex and allows space */

    /* Enhanced Fiery Gradient Background */
    background: linear-gradient(
        -45deg, 
        #ee7752, /* Softer Orange */
        #e73c7e, /* Vibrant Pink */
        #feda75, /* Goldish Yellow */
        #e73c7e, /* Vibrant Pink again for smoother loop */
        #ee7752  /* Softer Orange again for smoother loop */
    );
    background-size: 400% 400%; /* For the gradient animation */
    animation: fieryGradientPulse 8s ease infinite; /* Slower, more pulsating animation */

    color: #ffffff; /* White text for better contrast on vibrant background */
    font-weight: 400; /* Bolder font weight */
    font-size: 13px; /* Slightly larger font size */
    text-decoration: none;
    border: none;
    border-radius: 10px; /* More rounded for a softer, modern look */
    cursor: pointer;
    
    /* More pronounced and dynamic shadow */
    box-shadow: 
        0 4px 8px rgba(0, 0, 0, 0.15), /* Base shadow for depth */
        0 0 20px rgba(255, 107, 0, 0.5); /* Orange glow, more spread out */

    transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), /* More bouncy transform */
                box-shadow 0.3s ease-out,
                background-position 0.5s ease-out; /* Smooth background shift on hover */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); /* Subtle text shadow for readability */
}

.new-badge:hover,
.new-badge:focus { /* Added focus state for accessibility */
    transform: translateY(-2px) scale(1.05); /* Lift and slightly enlarge */
    box-shadow: 
        0 6px 12px rgba(0, 0, 0, 0.2), /* Deeper base shadow on hover */
        0 0 30px rgba(255, 85, 0, 0.7); /* Brighter and wider orange glow on hover */
    background-position: 100% 50%; /* Shift gradient on hover for a subtle effect */
}

.hot-icon {
    margin-left: 6px; /* مسافة بين أيقونة النار وكلمة "جديد" */
    font-size: 0.9em; /* حجم أيقونة النار */
    /* تأثير بسيط للشعلة */
    animation: flameWiggle 1.5s ease-in-out infinite alternate;
}

/* أنميشن بسيط لحركة الشعلة (اختياري لمزيد من التأثير) */
@keyframes flameWiggle {
    0% {
        transform: translateY(0) scale(1);
        opacity: 0.9;
    }
    50% {
        transform: translateY(-1px) scale(1.05);
        opacity: 1;
    }
    100% {
        transform: translateY(0) scale(1);
        opacity: 0.9;
    }
}

/* مثال على وسم آخر بلون مختلف (إذا أردت) */
.old-badge {
    background-color: #e9ecef;
    color: #495057;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.old-badge:hover {
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
}

    /**/
    
    
        .video-tutorials-page {
            padding: 20px;
            max-width: 1400px;
            margin: 0 auto;
        }

        .page-title {
            font-size: 1.8rem;
            font-weight: 600;
            margin-bottom: 25px;
            color: #0f0f0f;
            padding-bottom: 10px;
            border-bottom: 1px solid #e0e0e0;
        }

        .video-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 20px;
        }

        .lesson-card { /* تم تغيير اسم الكلاس */
            background-color: #ffffff; /* خلفية بيضاء للبطاقة */
            border: 1px solid #e0e0e0; /* إطار خفيف */
            border-radius: 8px;
            padding: 15px;
            cursor: pointer;
            transition: box-shadow 0.3s ease, transform 0.2s ease-in-out;
            display: flex;
            flex-direction: column;
            justify-content: space-between; /* لتوزيع المحتوى إذا كان هناك ارتفاع مختلف */
            min-height: 150px; /* ارتفاع أدنى للبطاقة */
        }

        .lesson-card:hover {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            transform: translateY(-3px);
        }

        .lesson-card-content {
            flex-grow: 1;
        }

        .lesson-title {
            font-size: 1.1rem;
            font-weight: 600;
            color: #0f0f0f;
            margin: 20px 0 8px 0;
            line-height: 1.4;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .lesson-description {
            font-size: 0.85rem;
            color: #606060;
            margin: 0 0 10px 0;
            line-height: 1.5;
            display: -webkit-box;
            -webkit-line-clamp: 3; /* يمكن زيادة عدد أسطر الوصف قليلاً */
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .watch-button-placeholder { /* تصميم لزر "مشاهدة الدرس" */
            display: inline-flex;
            align-items: center;
            padding: 8px 15px;
            background-color: #cc0000; /* لون أحمر يوتيوب */
            color: white;
            border-radius: 4px;
            font-size: 0.9rem;
            font-weight: 500;
            margin-top: auto; /* لدفع الزر لأسفل البطاقة */
            align-self: flex-start; /* ليكون على اليمين */
        }
        .watch-button-placeholder .fa-play {
            margin-left: 8px;
        }


        /* Modal (النافذة المنبثقة) Styling */
        .video-modal {
            display: none; /* Hidden by default */
            position: fixed; /* Stay in place */
            z-index: 1000; /* Sit on top */
            left: 0;
            top: 0;
            width: 100%; /* Full width */
            height: 100%; /* Full height */
            overflow: auto; /* Enable scroll if needed */
            background-color: rgba(0,0,0,0.7); /* Black w/ opacity */
            padding-top: 50px; /* Location of the box */
            align-items: center; /* لتوسيط المحتوى عمودياً */
            justify-content: center; /* لتوسيط المحتوى أفقياً */
        }
        .video-modal.active {
            display: flex; /* Show when active */
        }

.modal-content {
  position: relative;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  max-width: 80%;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  animation-name: animatetop;
  animation-duration: 0.4s;
  left: -5%;
}

        @keyframes animatetop {
            from {top:-300px; opacity:0}
            to {top:0; opacity:1}
        }

        .close-modal-button {
            color: white;
            position: absolute;
            top: -35px; /* فوق الفيديو */
            right: 0px;
            font-size: 35px;
            font-weight: bold;
            transition: 0.3s;
            background: none;
            border: none;
            cursor: pointer;
        }

        .close-modal-button:hover,
        .close-modal-button:focus {
            color: #bbb;
            text-decoration: none;
            cursor: pointer;
        }

        .video-iframe-container {
            position: relative;
            width: 100%;
            padding-top: 56.25%; /* 16:9 Aspect Ratio */
        }

        .video-iframe-container iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: none;
        }
.lesson-image-icon {
    width: 100%;
    max-width: 290px;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 6px;
    display: block;
    margin: 0 auto;
}

        /* Media queries */
        @media (max-width: 900px) {
            .video-grid {
                grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
            }
        }
        @media (max-width: 600px) {
            .video-grid {
                grid-template-columns: 1fr;
            }
            .modal-content {
                width: 95%;
            }
            .close-modal-button {
                top: -30px;
                font-size: 28px;
            }
        }
        
        /* ========================================
   TENANT ADMIN SIDEBAR - RTL
   Professional UI/UX Design
   ======================================== */

.sidebar {
    position: fixed;
  top: 0px;
    z-index: 1111;
  height: calc(100vh - 0px);
  overflow-y: auto;
  scrollbar-width: thin; /* لمتصفحات فايرفوكس */
  scrollbar-color: #cbccff #f0f0f0; /* اللون: المقبض + الخلفية */
  background: linear-gradient(180deg, var(--primary-color) 0%, var(--primary-darker) 100%);
  color: var(--text-light);
  transition: width var(--transition-normal);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);

}
.sidebar::-webkit-scrollbar {
  width: 6px;
}

.sidebar::-webkit-scrollbar-track {
  background: #f0f0f0;
  border-radius: 4px;
}

.sidebar::-webkit-scrollbar-thumb {
  background-color: #999;
  border-radius: 4px;
}

.sidebar .nav {
  padding: 0;
  margin-bottom:10px;
}

/* Nav Profile Section */
.sidebar .nav .nav-item.nav-profile {
  padding: var(--spacing-lg);
  background: rgba(255, 255, 255, 0.05);
  margin-bottom: var(--spacing-md);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar .nav .nav-item.nav-profile .nav-link {
  padding: 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.sidebar .nav .nav-item.nav-profile .nav-profile-image {
  position: relative;
  width: 50px;
  height: 50px;
}

.sidebar .nav .nav-item.nav-profile .nav-profile-image img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid #666aff;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
}
.sidebar .nav .nav-item.nav-profile .nav-link .nav-profile-image img {
  width: 65px !important;
  height: 65px !important;
  border-radius: 100%;
  vertical-align: middle !important;
}
.sidebar .nav .nav-item.nav-profile .nav-profile-text {
  flex-grow: 1;
}

.sidebar .nav .nav-item.nav-profile .nav-profile-text .font-weight-bold {
  color: var(--text-light);
  font-size: var(--font-size-2xl);
  margin-bottom: var(--spacing-md) !important;
  padding: 0 !important;
}

.sidebar .nav .nav-item.nav-profile .nav-profile-text .text-secondary {
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: var(--font-size-sm);
}

.sidebar .nav .nav-item.nav-profile .wpp-pack {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-light);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--border-radius-sm);
  margin-top: var(--spacing-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  display: inline-flex !important;
  align-items: center;
}

.sidebar .nav .nav-item.nav-profile .wpp-pack svg {
  fill: var(--text-light);
}

.sidebar .nav .nav-item.nav-profile .mdi-shopping-outline {
  display: none; /* Hiding the ugly green badge */
}

/* Sidebar Menu Items */
.sidebar .nav .nav-item {
  transition: background-color var(--transition-fast);
}

.sidebar .nav .nav-item .nav-link {
  color: rgba(255, 255, 255, 0.8);
  padding: var(--spacing-md) var(--spacing-lg);
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  border-right: 4px solid transparent;
  transition: all var(--transition-fast);
}

.sidebar .nav .nav-item .nav-link i {
  font-size: var(--font-size-xl);
  width: 24px;
  text-align: center;
  color: rgba(255, 255, 255, 0.7);
  transition: all var(--transition-fast);
}

.sidebar .nav .nav-item .nav-link .menu-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
}

/* Hover & Active States */
.sidebar .nav .nav-item:hover > .nav-link,
.sidebar .nav .nav-item.active > .nav-link {
  color: #ffffff;
  border-right-color: var(--warning-color);
}

.sidebar .nav .nav-item:hover > .nav-link i,
.sidebar .nav .nav-item.active > .nav-link i {
  color: var(--warning-color);
  transform: scale(1.1);
}
.sidebar .nav:not(.sub-menu) > .nav-item:hover:not(.nav-category):not(.nav-profile) > .nav-link {
  color: #cbccff;
}
.sidebar .nav .nav-item.active > .nav-link .menu-title {
  color: var(--warning-color);
}
/* Submenu / Collapse */
.sidebar .nav .nav-item .collapse {
  background: rgba(0, 0, 0, 0.0);
  padding: 0;
  margin: 0 var(--spacing-lg);
  border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
}
.sidebar .nav .nav-item .collapse .show {
  background: rgba(0, 0, 0, 0.0);
  padding: 0;
  margin: 0 var(--spacing-lg);
  border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
}
.sidebar .nav .nav-item .collapse .nav {
  padding: var(--spacing-sm) 0;
}
.sidebar .nav .nav-item:hover {
  background: none;
}
.sidebar .nav .nav-item .collapse .nav .nav-item .nav-link {
  padding: var(--spacing-sm) var(--spacing-lg) var(--spacing-sm) var(--spacing-md);
  font-size: calc(var(--font-size-base) - 1px);
  color: rgba(255, 255, 255, 0.6);
  border: none;
  position: relative;
}
.sidebar .nav.sub-menu {
  margin-bottom: 0px;
  margin-top: 0;
  list-style: none;
  padding: 0px 20px;
}
/**/
.nav-link .menu-arrow {
  margin-right: auto !important;
  margin-left: 0 !important;
}
.sidebar .nav.sub-menu .nav-item .nav-link::before {
  display: none;
}
.sidebar .nav .nav-item .nav-link {
 padding:10px 10px !important;
}
.sidebar .nav .nav-item .nav-link i.menu-arrow + .menu-icon {
  margin-left: .25rem;
}
.sidebar .nav .nav-item.active {
  background: transparent;
}
/*ادارة*/
.sidebar .nav .nav-item .nav-link i.menu-icon {
  font-size: 1.125rem !important;
  line-height: 1 !important;
  margin-left: 15px;
  margin-right: 0px;
  order: -1 !important;
  color: var(--warning-color)!important;
}
/**/
.sidebar .nav .nav-item .collapse .nav .nav-item .nav-link::before {
  content: '—';
  position: absolute;
  right: -5px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.5);
  transition: all var(--transition-fast);
}

.sidebar .nav .nav-item .collapse .nav .nav-item:hover .nav-link {
  color: #ffffff;
}

.sidebar .nav .nav-item .collapse .nav .nav-item:hover .nav-link::before {
  color: var(--warning-color);
  transform: translateY(-50%) scale(1.2);
}

/* Arrow for dropdown */
.sidebar .nav .nav-item .nav-link .menu-arrow {
  margin-right: auto;
  transition: transform var(--transition-fast);
}

/* Hot/New Section Buttons */
.sidebar .button-coming-soon {
  display: block;
  width: calc(100% - 2 * var(--spacing-lg));
  margin: var(--spacing-lg);
  padding: var(--spacing-xs);
  border: none;
  border-radius: var(--border-radius-md);
  background: var(--primary2-color);
  color: var(--primary-light);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: 0 4px 15px rgba(255, 64, 129, 0.3);
}
.sidebar .button-coming-soon:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 64, 129, 0.4);
}

.sidebar .button-coming-soon i {
  margin-left: var(--spacing-sm);
}

/* Hot/New List */
.sidebar .hot-new-list {
  list-style: none;
  padding: 0 var(--spacing-lg);
  margin: var(--spacing-lg) 0;
}

.sidebar .hot-new-list li {
  margin-bottom: var(--spacing-sm);
}

.sidebar .hot-new-list li a {
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-md);
  text-decoration: none;
  color: rgba(255, 255, 255, 0.7);
  border-radius: var(--border-radius-md);
  transition: all var(--transition-fast);
}

.sidebar .hot-new-list li a:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.sidebar .hot-new-list li .new-badge {
  background: var(--warning-color);
  color: #212529;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--border-radius-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
}

.sidebar .hot-new-list li .new-badge.old-badge {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

.sidebar .hot-new-list li .new-badge .hot-icon {
  margin-left: 2px;
  color: #c82333;
}


/* ========================================
   PRODUCT TABLE MODERN DESIGN
   ======================================== */

/* === Product Table Block Style === */
.product-block-row, .product-row-modern {
  background: var(--bg-primary);
  border-radius: var(--border-radius-lg);
  box-shadow: 0 2px 12px var(--shadow-light);
  margin-bottom: var(--spacing-md);
  border: 1px solid var(--border-light, #e5e7eb);
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}
.product-block-row:hover, .product-row-modern:hover {
  box-shadow: 0 6px 24px var(--shadow-medium);
  transform: translateY(-2px) scale(1.01);
}

.product-table-modern {
  border-collapse: separate;
  border-spacing: 0 16px;
  background: transparent;
}

.product-table-modern thead.head-bg th {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  color: var(--text-secondary);
  background: none;
  border: none;
  border-bottom: 1px solid var(--border-light);
  letter-spacing: 0.2px;
  padding-top: var(--spacing-md);
  padding-bottom: var(--spacing-md);
}

.product-table-modern thead.head-bg {
  background: none;
  border-bottom: 1px solid var(--border-light);
}

.product-block-row td {
  background: transparent;
  border: none;
  font-size: var(--font-size-base);
  vertical-align: middle;
}

.product-image-cell .product-image-wrapper {
  width: 75px;
  height: 75px;
  border-radius: var(--border-radius-md);
  overflow: hidden;
  border: 1px solid var(--border-dark);
  margin: 0 auto;
  padding: 5px;
}
.sku-badge {
  background: var(--bg-secondary);
  color: var(--text-secondary);
  border-radius: var(--border-radius-sm);
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  display: inline-block;
}

.price-badge {
  background: var(--primary-light);
  color: var(--primary-color);
  border-radius: var(--border-radius-sm);
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  display: inline-block;
}

.status-badge {
  background: var(--success-light, #e6f9f0);
color: var(--secondary-light);
border-radius: var(--border-radius-sm);
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  display: inline-block;
}

.status-badge.status-2 {
  background: var(--danger-light, #ffeaea);
  color: var(--danger-color, #e74c3c);
}

.status-badge.status-3 {
  background: var(--warning-light, #fffbe6);
  color: var(--warning-color, #f1c40f);
}
.dashboard-label {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--primary-darker);
  margin-bottom: 10px !important;
}

/* === Dropdown Actions === */
.actions-dropdown .btn-actions-dropdown {
  background: #a78bfa;
  color: #fff;
  border-radius: var(--border-radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  padding: var(--spacing-sm) var(--spacing-lg);
  min-width: 120px;
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  box-shadow: 0 1px 4px var(--shadow-light);
  border: none;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.actions-dropdown .btn-actions-dropdown:hover,
.actions-dropdown .btn-actions-dropdown:focus {
  background: var(--primary-color);
  color: #fff;
}
.actions-dropdown .btn-actions-dropdown i {
  font-size: 1.2em;
  margin-left: 6px;
}
.actions-dropdown .dropdown-menu {
  min-width: 170px;
  border-radius: var(--border-radius-md);
  box-shadow: 0 4px 16px var(--shadow-light);
  border: 1px solid var(--border-light);
  padding: 0.5rem 0;
  font-size: var(--font-size-sm);
  background: var(--bg-primary);
  right: 0;
  left: auto;
  text-align: right;
}
.actions-dropdown .dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  color: var(--text-primary);
  padding: var(--spacing-sm) var(--spacing-lg);
  font-size: var(--font-size-sm);
  border-radius: var(--border-radius-sm);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.actions-dropdown .dropdown-item i {
  font-size: 1.2em;
  margin-left: 8px;
}
.actions-dropdown .dropdown-item:hover,
.actions-dropdown .dropdown-item:focus {
  background: var(--primary-light);
  color: var(--primary-color);
}

/* === Responsive === */
@media (max-width: 991px) {
  .product-table-modern thead.head-bg th {
    font-size: var(--font-size-xs);
    padding-top: var(--spacing-sm);
    padding-bottom: var(--spacing-sm);
  }
  .product-block-row td {
    font-size: var(--font-size-sm);
  }
  .actions-dropdown .btn-actions-dropdown {
    min-width: 90px;
    font-size: var(--font-size-xs);
    padding: var(--spacing-xs) var(--spacing-md);
  }
  .actions-dropdown .dropdown-menu {
    min-width: 120px;
    font-size: var(--font-size-xs);
  }
}

/* ========================================
   PRODUCT TABLE MODERN DESIGN
   ======================================== */

/* Modern Product Table */
.product-table-modern {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  background: var(--bg-primary);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  box-shadow: 0 4px 20px var(--shadow-medium);
}

.product-table-modern thead.head-bg {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
}

.product-table-modern thead.head-bg th {
  color: var(--text-light);
  font-weight: var(--font-weight-bold);
  padding: var(--spacing-lg) var(--spacing-md);
  border: none;
  text-align: center;
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.product-table-modern tbody tr.product-row-modern {
  transition: all var(--transition-fast);
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-primary);
}

.product-table-modern tbody tr.product-row-modern:hover {
  background-color: rgba(25, 27, 139, 0.02);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px var(--shadow-light);
}

.product-table-modern tbody tr.product-row-modern td {
  padding: var(--spacing-sm) var(--spacing-md);
  vertical-align: middle !important;
  border: none;
}

/* Product ID Badge */
.product-id-badge {
  display: inline-block;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: var(--text-light);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--border-radius-sm);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm);
  min-width: 40px;
  text-align: center;
}

/* Product Info Wrapper */
.product-info-wrapper {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.product-image-wrapper {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  border-radius: var(--border-radius-md);
  overflow: hidden;
  border: 2px solid var(--border-light);
}


.product-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-summary {
  flex: 1;
  min-width: 0;
  text-align: center;
  font-size: var(--font-size-base);
  color: var(--primary-light);
}

.product-name {
    text-align: center;
  font-size: var(--font-size-base);
  color: var(--primary-light);
  margin-bottom: var(--spacing-xs);
  line-height: 1.3;
}

.product-name-link {
  text-decoration: none;
  color: inherit;
  transition: all var(--transition-fast);
  display: block;
}

.product-name-link:hover {
  color: var(--primary-color);
  transform: translateX(-2px);
}

.product-name-link:hover .product-name {
  color: var(--primary-color);
}

.product-description {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  margin: 0;
  line-height: 1.4;
}

/* Brand Info Wrapper */
.brand-info-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xs);
}

.brand-image-wrapper {
  width: 40px;
  height: 40px;
  border-radius: var(--border-radius-sm);
  overflow: hidden;
  border: 1px solid var(--border-light);
}

.brand-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.brand-name {
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  text-align: center;
}

/* Category List */
.category-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.category-badge {
  display: inline-block;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--border-radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-align: center;
}

.category-badge.primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: var(--text-light);
}

.category-badge.secondary {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  color: var(--text-light);
}

/* Tax Badge */
.tax-badge {
  display: inline-block;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--border-radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: var(--text-light);
}

.tax-badge.no-tax {
  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
  color: var(--text-primary);
}

/* Stock Badge */
.stock-badge {
  display: inline-block;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--border-radius-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  min-width: 50px;
  text-align: center;
}

.stock-badge.stock-ok {
  background: linear-gradient(135deg, #56ab2f 0%, #a8e6cf 100%);
  color: var(--text-light);
}

.stock-badge.stock-low {
  background: linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%);
  color: var(--text-light);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* Variant Badge */
.variant-badge {
  display: inline-block;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--border-radius-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  min-width: 50px;
  text-align: center;
}

.variant-badge.has-variant {
  background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
  color: var(--text-light);
}

.variant-badge.no-variant {
  background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
  color: var(--text-primary);
}

/* Action Buttons Wrapper */
.action-buttons-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  align-items: center;
}

.action-buttons-wrapper .btn {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--border-radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  transition: all var(--transition-fast);
  border: none;
  cursor: pointer;
  min-width: 80px;
  justify-content: center;
}

.action-buttons-wrapper .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px var(--shadow-medium);
}

.action-buttons-wrapper .btn i {
  font-size: var(--font-size-sm);
}

.action-buttons-wrapper .btn-text {
  font-size: var(--font-size-xs);
}

/* Button Variants */
.btn-view {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: var(--text-light);
}

.btn-view:hover {
  background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
  color: var(--text-light);
}

.btn-edit {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  color: var(--text-light);
}

.btn-edit:hover {
  background: linear-gradient(135deg, #e085e7 0%, #e54b5b 100%);
  color: var(--text-light);
}

.btn-clone {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: var(--text-light);
}

.btn-clone:hover {
  background: linear-gradient(135deg, #45a1f5 0%, #00e6f0 100%);
  color: var(--text-light);
}

.btn-delete {
  background: linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%);
  color: var(--text-light);
}

.btn-delete:hover {
  background: linear-gradient(135deg, #e63a61 0%, #e64426 100%);
  color: var(--text-light);
}

.btn-barcode {
  background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
  color: var(--text-light);
}

.btn-barcode:hover {
  background: linear-gradient(135deg, #0f8a7d 0%, #32d66e 100%);
  color: var(--text-light);
}

/* No Products Message */
.no-products-message {
  padding: var(--spacing-xl) var(--spacing-lg);
}

.no-products-wrapper {
  text-align: center;
  color: var(--text-secondary);
}
.product-card-row {
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: var(--border-radius-md, 8px);
    box-shadow: 0 2px 8px var(--shadow-light, rgba(0,0,0,0.05));
    background: #fff;
    transition: box-shadow 0.2s, border-color 0.2s;
}


/* Fix dropdown z-index and button shake */
.product-card-row .dropdown-menu {
  z-index: 1050;
}
.product-card-row .dropdown-toggle {
  transition: none;
  will-change: unset;
  box-shadow: none !important;
  outline: none !important;
}
.product-card-row .dropdown-toggle:focus, .product-card-row .dropdown-toggle:active {
  box-shadow: none !important;
  outline: none !important;
}
/* Center all table cell content */
.product-card-row td, .product-card-row th {
  text-align: center !important;
  vertical-align: middle !important;
}
.no-products-wrapper i {
  font-size: 4rem;
  color: var(--border-color);
  margin-bottom: var(--spacing-md);
}

.no-products-wrapper h5 {
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
}

.no-products-wrapper p {
  color: var(--text-secondary);
  margin: 0;
}

/* Pagination Stats */
.pagination-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-lg);
  justify-content: center;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-md);
  background: var(--bg-primary);
  border-radius: var(--border-radius-md);
  box-shadow: 0 2px 8px var(--shadow-light);
  min-width: 120px;
}

.stat-label {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stat-value {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--primary-color);
}

/* Pagination List */
.pagination-list {
  display: flex;
  justify-content: center;
  gap: var(--spacing-xs);
  flex-wrap: wrap;
}
.pt-4 {
  padding-top: 0px !important;
}
.pagination-list li {
  list-style: none;
}

.pagination-list .page-number {
  display: inline-block;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--border-radius-sm);
  text-decoration: none;
  color: var(--text-primary);
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  transition: all var(--transition-fast);
  font-weight: var(--font-weight-medium);
  min-width: 40px;
  text-align: center;
}

.pagination-list .page-number:hover {
  background: var(--primary-color);
  color: var(--text-light);
  border-color: var(--primary-color);
  transform: translateY(-1px);
}

.pagination-list .page-number.current {
  background: var(--primary-color);
  color: var(--text-light);
  border-color: var(--primary-color);
}

.pagination-list .page-number.ellipsis {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: default;
}

.pagination-list .page-number.ellipsis:hover {
  background: transparent;
  color: var(--text-secondary);
  transform: none;
}

/* Modal Improvements */
.barcode-modal .modal-content {
  border-radius: var(--border-radius-lg);
  border: none;
  box-shadow: 0 10px 30px var(--shadow-medium);
}

.barcode-modal .modal-header {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
  color: var(--text-light);
  border-bottom: none;
  border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
}

.barcode-modal .modal-title {
  font-weight: var(--font-weight-bold);
}

.barcode-modal .barcode-title {
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  margin-bottom: var(--spacing-md);
}

.barcode-modal .modal-footer {
  border-top: 1px solid var(--border-light);
  padding: var(--spacing-lg);
}

/* Responsive Design */
@media (max-width: 768px) {
  .product-table-modern {
    font-size: var(--font-size-sm);
  }
  
  .product-table-modern thead.head-bg th {
    padding: var(--spacing-md) var(--spacing-sm);
    font-size: var(--font-size-xs);
  }
  
  .product-table-modern tbody tr.product-row-modern td {
    padding: var(--spacing-md) var(--spacing-sm);
  }
  
  .action-buttons-wrapper {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .action-buttons-wrapper .btn {
    min-width: 60px;
  }
  
  .action-buttons-wrapper .btn-text {
    display: none;
  }
  
  .pagination-stats {
    gap: var(--spacing-md);
  }
  
  .stat-item {
    min-width: 100px;
    padding: var(--spacing-sm);
  }
}

@media (max-width: 480px) {
  .product-info-wrapper {
    flex-direction: column;
    text-align: center;
  }
  
  .product-image-wrapper {
    width: 50px;
    height: 50px;
  }
  
  .brand-info-wrapper {
    flex-direction: row;
    gap: var(--spacing-sm);
  }
  
  .brand-image-wrapper {
    width: 30px;
    height: 30px;
  }
  
  .category-list {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .action-buttons-wrapper .btn {
    padding: var(--spacing-xs);
    min-width: 50px;
  }
} 

.pagination-info {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 20px 30px;
  background: var(--bg-secondary);
  padding: 20px;
  border-radius: 5px;
  font-weight: var(--font-weight-medium);
}
.pagination-info p {
  margin-bottom: 0;
  color: var(--primary-lighter);
}

.recent-order-wrapper {
  border-radius: 0px;
  padding: 0px;
}

.custom--table {
            table-layout: fixed;
            width: 100%;
            border-collapse: separate;
            /* 2. This creates the 15px vertical space between rows */
            border-spacing: 0 15px;
        }

        /* 3. Hide the header's default borders */
        .custom--table thead th {
            border: none;
        }

        /* 4. Style the table cells to create the card effect */
        .custom--table tbody td {
            background: #fff;
            padding: 1rem; /* Add some padding for better look */
            /* Start with no side borders, only top and bottom */
            border: 1px solid #dddddd;
            border-style: solid none;
        }

        /* 5. Apply the side borders and rounded corners ONLY to the first and last cells */
        .custom--table tbody td:first-child {
            border-right-style: solid;
            border-top-right-radius: 8px;
            border-bottom-right-radius:8px;
        }

        .custom--table tbody td:last-child {
            border-left-style: solid;
            border-top-left-radius: 8px;
            border-bottom-left-radius:8px;
        }
        
        .dashboard-input .form--control {
  width: 100%;
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 400;
  border: 1px solid #ccc;
  border-radius: 12px;
  background-color: #fff;
  color: #333;
  transition: all 0.3s ease-in-out;
  box-shadow: inset 0 0 0 transparent;
  outline: none;
}

.dashboard-input .form--control:focus {
  border-color: #191b8b;
  box-shadow: 0 0 0 3px rgba(25, 27, 139, 0.1);
  background-color: #f9faff;
  color: #000;
}

/* Placeholder style */
.dashboard-input .form--control::placeholder {
  color: #aaa;
  opacity: 1;
  transition: color 0.2s ease-in-out;
}

.dashboard-input .form--control:focus::placeholder {
  color: #ccc;
}

/* Optional hover effect */
.dashboard-input .form--control:hover {
  border-color: #999;
}
/*
==============================================
  RTL Dropdown Position Fix for Large Screens
==============================================
*/

/* This targets screens that are 1001px wide or wider */
@media (min-width: 1001px) {

    /* --- Add the class names of your dropdown libraries here --- */

    /* For Select2 Library */
    .select2-dropdown {
        left: auto !important;
        right: 0 !important;
    }

    /* For Bootstrap Dropdowns (or similar) */
    .dropdown-menu {
        left: 45% !important; /* Crucial for RTL */
        right: auto !important;   /* Aligns the menu to the right edge */
    }

    /* For Choices.js Library */
    .choices__list--dropdown {
        left: auto !important;
    }
}

.btn.btn-xs {
  font-size: 0.625rem;
  padding: var(--spacing-xs) var(--spacing-xs);
  font-size: var(--font-size-sm);
  border-radius: var(--border-radius-sm);
}

.delivery-item {
  width: fit-content;
  border: 1px solid var(--secondary-dark);
  height: fit-content;
  cursor: pointer;
  transition: all .3s;
  padding: 10px 20px !important;
  border-radius: 8px !important;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05) !important;
  background-color: #ffffff;
  text-shadow: 0 0 .25em rgba(0,0,0,.3) !important;
  color: var(--primary-dark) !important;
}
.delivery-item .icon {
  font-size: 24px;
  padding: 0 5px;
  color: var(--primary2-color) !important;
}
.delivery-item p {
  font-size: var(--font-size-base);
  margin-bottom: 0px;
}
.dashboard-products-add .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
  color: #ffffff !important;
  background-color: var(--primary-lighter);
  border-color: var(--primary-lighter);
}
 /* Main container for all tasks */
       .onboarding-tasks {
    column-count: 2;
    column-gap: 15px;
    padding: 20px;
    background-color: #f7f8fc;
    border-radius: 10px;
}

.task-item {
    display: flex;
    align-items: center;
    break-inside: avoid;
    gap: 1rem;
    background-color: #ffffff;
    border: 1px solid #e9e9f0;
    border-radius: 12px;
    padding: 5px 20px;
    position: relative;
    transition: box-shadow 0.3s ease;
    margin-bottom: 5px;
}

.task-item:hover {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07);
}

.task-icon-wrapper {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.task-icon-wrapper i {
    font-size: 20px;
}

.task-icon-wrapper.icon-yellow { background-color: #fffbeb; }
.task-icon-wrapper.icon-yellow i { color: #f59e0b; }
.task-icon-wrapper.icon-blue { background-color: #eff6ff; }
.task-icon-wrapper.icon-blue i { color: #3b82f6; }
.task-icon-wrapper.icon-green { background-color: #f0fdf4; }
.task-icon-wrapper.icon-green i { color: #22c55e; }
.task-icon-wrapper.icon-purple { background-color: #faf5ff; }
.task-icon-wrapper.icon-purple i { color: #9333ea; }
.task-icon-wrapper.icon-red { background-color: #fef2f2; }
.task-icon-wrapper.icon-red i { color: #ef4444; }

.task-content {
    flex-grow: 1;
    text-align: right;
}

.task-title-link {
    text-decoration: none;
}

.task-title {
    color: #333;
    font-weight: 400;
    font-size: 14px;
    margin: 0;
    transition: color 0.3s ease;
}

.task-title-link:hover .task-title {
    color: var(--primary-color, #5856d6);
}

.task-action-btn {
            flex-shrink: 0;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background-color: #eef2ff;
            color: #4f46e5;
            padding: 5px 16px;
            border-radius: 20px;
            text-decoration: none;
            font-size: 13px;
            font-weight: 500;
            transition: background-color 0.3s ease;
        }

        .task-action-btn:hover {
            background-color: #e0e7ff;
        }

.task-dismiss-btn {
    flex-shrink: 0;
    background: none;
    border: none;
    font-size: 24px;
    color: #adb5bd;
    cursor: pointer;
    line-height: 1;
    padding: 0 5px;
    transition: color 0.3s ease;
}

.task-dismiss-btn:hover {
    color: #333;
}

@media (max-width: 991px) {
    .onboarding-tasks {
        column-count: 1;
    }
}