/* Mehwar ERP design system
   Calm, dense, operational. Overrides AdminLTE / Bootstrap presentation only. */

:root {
  --mw-bg: #f6f7f8;
  --mw-surface: #ffffff;
  --mw-surface-2: #f1f3f5;
  --mw-text: #20252b;
  --mw-text-2: #667085;
  --mw-text-3: #8a939f;
  --mw-border: #e3e7eb;
  --mw-border-strong: #d5dae0;
  --mw-brand: #356f6d;
  --mw-brand-hover: #2c5e5c;
  --mw-brand-soft: #e8f0ef;
  --mw-success: #4d7c59;
  --mw-success-bg: #e9f2eb;
  --mw-warning: #a67c2d;
  --mw-warning-bg: #f7f0e4;
  --mw-danger: #b3544a;
  --mw-danger-bg: #f6eaea;
  --mw-info: #4a7a9b;
  --mw-info-bg: #e8f0f5;
  --mw-radius-sm: 6px;
  --mw-radius: 8px;
  --mw-radius-md: 10px;
  --mw-radius-lg: 12px;
  --mw-space-1: 4px;
  --mw-space-2: 8px;
  --mw-space-3: 12px;
  --mw-space-4: 16px;
  --mw-space-5: 20px;
  --mw-space-6: 24px;
  --mw-space-8: 32px;
  --mw-header-h: 56px;
  --mw-sidebar-w: 230px;
  --mw-content-max: 1400px;
  --mw-input-h: 40px;
  --mw-shadow-float: 0 8px 24px rgba(32, 37, 43, 0.10);
  --mw-font: "Cairo", "IBM Plex Sans Arabic", "Noto Sans Arabic", Tahoma, Arial, sans-serif;
  --mw-ease: 160ms ease;
  --mw-sidebar-bg: #1c2426;
  --mw-sidebar-text: #f4f7f8;
  --mw-sidebar-muted: #e6eef0;
  --mw-sidebar-icon: #d5e0e3;
  --mw-sidebar-hover: rgba(255, 255, 255, 0.10);
  --mw-sidebar-active-bg: #356f6d;
  --mw-sidebar-active-text: #ffffff;
  --mw-sidebar-border: rgba(255, 255, 255, 0.08);
}

.skin-green {
  --mw-brand: #356f6d;
  --mw-brand-hover: #2c5e5c;
  --mw-sidebar-bg: #16302e;
  --mw-sidebar-text: #f5faf8;
  --mw-sidebar-muted: #e7f1ef;
  --mw-sidebar-icon: #d7ebe8;
  --mw-sidebar-active-bg: #356f6d;
}
.skin-blue {
  --mw-brand: #3d6380;
  --mw-brand-hover: #33556e;
  --mw-sidebar-bg: #1b2832;
  --mw-sidebar-text: #f4f8fb;
  --mw-sidebar-muted: #e4eef4;
  --mw-sidebar-icon: #d3e2eb;
  --mw-sidebar-active-bg: #3d6380;
}
.skin-black {
  --mw-brand: #356f6d;
  --mw-brand-hover: #2c5e5c;
  --mw-sidebar-bg: #1c2426;
  --mw-sidebar-text: #f4f7f8;
  --mw-sidebar-muted: #e6eef0;
  --mw-sidebar-icon: #d5e0e3;
  --mw-sidebar-active-bg: #356f6d;
}
.skin-purple {
  --mw-brand: #5b5678;
  --mw-brand-hover: #4c4866;
  --mw-sidebar-bg: #242033;
  --mw-sidebar-text: #f6f5fb;
  --mw-sidebar-muted: #e8e6f2;
  --mw-sidebar-icon: #d8d5e8;
  --mw-sidebar-active-bg: #5b5678;
}
.skin-red {
  --mw-brand: #8a4e48;
  --mw-brand-hover: #75423d;
  --mw-sidebar-bg: #2c1f1e;
  --mw-sidebar-text: #faf5f4;
  --mw-sidebar-muted: #efe4e2;
  --mw-sidebar-icon: #e4d4d1;
  --mw-sidebar-active-bg: #8a4e48;
}
.skin-yellow {
  --mw-brand: #8a6a32;
  --mw-brand-hover: #735828;
  --mw-sidebar-bg: #2a2418;
  --mw-sidebar-text: #faf6ee;
  --mw-sidebar-muted: #f0eadc;
  --mw-sidebar-icon: #e4dcc8;
  --mw-sidebar-active-bg: #8a6a32;
}

.skin-green-light,
.skin-blue-light,
.skin-black-light,
.skin-purple-light,
.skin-red-light,
.skin-yellow-light {
  --mw-sidebar-bg: #f4f6f6;
  --mw-sidebar-text: #1f2628;
  --mw-sidebar-muted: #334044;
  --mw-sidebar-icon: #4a585c;
  --mw-sidebar-hover: #e7ecec;
  --mw-sidebar-active-text: #ffffff;
  --mw-sidebar-border: #e3e7eb;
}
.skin-green-light { --mw-brand: #356f6d; --mw-brand-hover: #2c5e5c; --mw-sidebar-active-bg: #356f6d; }
.skin-blue-light { --mw-brand: #3d6380; --mw-brand-hover: #33556e; --mw-sidebar-active-bg: #3d6380; }
.skin-black-light { --mw-brand: #356f6d; --mw-brand-hover: #2c5e5c; --mw-sidebar-active-bg: #356f6d; }
.skin-purple-light { --mw-brand: #5b5678; --mw-brand-hover: #4c4866; --mw-sidebar-active-bg: #5b5678; }
.skin-red-light { --mw-brand: #8a4e48; --mw-brand-hover: #75423d; --mw-sidebar-active-bg: #8a4e48; }
.skin-yellow-light { --mw-brand: #8a6a32; --mw-brand-hover: #735828; --mw-sidebar-active-bg: #8a6a32; }

/* -------------------------------------------------------------------------- */
/* Base                                                                       */
/* -------------------------------------------------------------------------- */

html {
  font-size: 14px;
}

body.hold-transition,
body.skin-blue,
body.skin-blue-light,
body.skin-black,
body.skin-black-light,
body.skin-green,
body.skin-green-light,
body.skin-red,
body.skin-red-light,
body.skin-yellow,
body.skin-yellow-light,
body.skin-purple,
body.skin-purple-light,
body.skin-aqua,
body.skin-aqua-light,
body.lockscreen {
  font-family: var(--mw-font) !important;
  color: var(--mw-text);
  background: var(--mw-bg) !important;
  font-size: 14px;
  line-height: 1.5;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--mw-font);
  color: var(--mw-text);
  font-weight: 600;
  letter-spacing: 0;
}

a {
  color: var(--mw-brand);
}

a:hover,
a:focus {
  color: var(--mw-brand-hover);
}

*:focus-visible {
  outline: 2px solid var(--mw-brand);
  outline-offset: 2px;
}

::selection {
  background: var(--mw-brand-soft);
  color: var(--mw-text);
}

/* -------------------------------------------------------------------------- */
/* Application shell                                                         */
/* -------------------------------------------------------------------------- */

.wrapper {
  background: var(--mw-bg);
}

.main-header {
  display: flex;
  align-items: center;
  max-height: none;
  height: var(--mw-header-h);
  min-height: var(--mw-header-h);
  box-shadow: none !important;
  border-bottom: 1px solid var(--mw-border) !important;
  background: var(--mw-surface) !important;
  z-index: 1030;
  overflow: visible;
}

.main-header .logo,
.skin-blue .main-header .logo,
.skin-blue-light .main-header .logo,
.skin-black .main-header .logo,
.skin-black-light .main-header .logo,
.skin-green .main-header .logo,
.skin-green-light .main-header .logo,
.skin-red .main-header .logo,
.skin-red-light .main-header .logo,
.skin-yellow .main-header .logo,
.skin-yellow-light .main-header .logo,
.skin-purple .main-header .logo,
.skin-purple-light .main-header .logo,
[class*="skin-"] .main-header .logo {
  display: flex !important;
  align-items: center;
  float: none !important;
  background: var(--mw-surface) !important;
  color: var(--mw-text) !important;
  height: var(--mw-header-h) !important;
  line-height: 1.2;
  border-bottom: 0;
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 14px;
}

.main-header .logo:hover {
  background: var(--mw-surface-2) !important;
}

.main-header .logo .logo-lg,
.sidebar-mini.sidebar-collapse .main-header .logo > .logo-lg {
  display: inline-block !important;
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
  vertical-align: middle;
}

.main-header .logo .logo-mini {
  display: none;
}

.main-header .navbar,
.skin-blue .main-header .navbar,
.skin-blue-light .main-header .navbar,
.skin-black .main-header .navbar,
.skin-black-light .main-header .navbar,
.skin-green .main-header .navbar,
.skin-green-light .main-header .navbar,
.skin-red .main-header .navbar,
.skin-red-light .main-header .navbar,
.skin-yellow .main-header .navbar,
.skin-yellow-light .main-header .navbar,
.skin-purple .main-header .navbar,
.skin-purple-light .main-header .navbar,
[class*="skin-"] .main-header .navbar {
  display: flex !important;
  align-items: center;
  float: none !important;
  flex: 1 1 auto;
  background: var(--mw-surface) !important;
  height: var(--mw-header-h) !important;
  min-height: var(--mw-header-h) !important;
  margin: 0 !important;
  box-shadow: none;
}

.main-header .sidebar-toggle,
.skin-blue .main-header .navbar .sidebar-toggle,
.skin-blue-light .main-header .navbar .sidebar-toggle,
[class*="skin-"] .main-header .navbar .sidebar-toggle {
  display: flex !important;
  align-items: center;
  justify-content: center;
  float: none !important;
  color: var(--mw-text) !important;
  width: 46px;
  height: var(--mw-header-h) !important;
  line-height: 1;
  padding: 0;
  font-size: 16px;
  flex: 0 0 46px;
}

.main-header .sidebar-toggle:hover {
  background: var(--mw-surface-2) !important;
  color: var(--mw-brand) !important;
}

.main-header .navbar .nav > li > a,
.skin-blue-light .main-header .navbar .nav > li > a,
[class*="skin-"] .main-header .navbar .nav > li > a {
  display: flex;
  align-items: center;
  color: var(--mw-text) !important;
  height: var(--mw-header-h);
  line-height: 1.2;
  padding: 0 12px;
}

.main-header .navbar .nav > li > a:hover,
.main-header .navbar .nav > li > a:focus,
.main-header .navbar .nav .open > a {
  background: var(--mw-surface-2) !important;
  color: var(--mw-text) !important;
}

.navbar-custom-menu {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
  min-height: var(--mw-header-h);
  padding-inline: 8px;
}

.navbar-custom-menu .pull-left,
.navbar-custom-menu .pull-right {
  float: none !important;
}

.navbar-custom-menu .m-8,
.navbar-custom-menu .mt-10,
.navbar-custom-menu .mt-15 {
  margin: 0 !important;
}

.navbar-custom-menu > .nav {
  display: flex;
  align-items: center;
  float: none !important;
  margin: 0;
}

.navbar-custom-menu > .btn,
.navbar-custom-menu > .btn-group,
.navbar-custom-menu > a.btn,
.navbar-custom-menu > button {
  margin: 0 !important;
  flex: 0 0 auto;
}

.navbar-custom-menu .btn,
.navbar-custom-menu .btn-success,
.navbar-custom-menu .btn-danger,
.navbar-custom-menu .btn-primary,
.navbar-custom-menu .btn-info,
.navbar-custom-menu .btn-warning {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--mw-surface) !important;
  border: 1px solid var(--mw-border) !important;
  color: var(--mw-text) !important;
  box-shadow: none !important;
  height: 32px !important;
  padding: 0 10px !important;
  border-radius: var(--mw-radius-sm) !important;
  font-size: 13px;
  font-weight: 500;
  line-height: 1 !important;
  white-space: nowrap;
}

.navbar-custom-menu .btn:hover,
.navbar-custom-menu .btn:focus {
  background: var(--mw-surface-2) !important;
  border-color: var(--mw-border-strong) !important;
  color: var(--mw-text) !important;
}

.navbar-custom-menu a.btn-success[href*="pos"] {
  background: var(--mw-brand) !important;
  border-color: var(--mw-brand) !important;
  color: #fff !important;
}

.navbar-custom-menu a.btn-success[href*="pos"]:hover {
  background: var(--mw-brand-hover) !important;
  border-color: var(--mw-brand-hover) !important;
  color: #fff !important;
}

.navbar-custom-menu .btn-danger {
  color: var(--mw-danger) !important;
}

.navbar-custom-menu .m-8.pull-left.mt-15 {
  display: flex;
  align-items: center;
  height: 32px;
  padding: 0 8px;
  color: var(--mw-text-2) !important;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.user-menu .user-image {
  width: 28px;
  height: 28px;
  margin-top: -4px;
}

.dropdown-menu {
  border: 1px solid var(--mw-border) !important;
  border-radius: var(--mw-radius) !important;
  box-shadow: var(--mw-shadow-float) !important;
  padding: 6px 0;
}

.dropdown-menu > li > a {
  padding: 8px 14px;
  font-size: 13px;
  color: var(--mw-text) !important;
}

.dropdown-menu > li > a:hover {
  background: var(--mw-surface-2) !important;
  color: var(--mw-text) !important;
}

.navbar-nav > .user-menu > .dropdown-menu {
  width: 260px !important;
  padding: 0 !important;
  overflow: hidden;
}

.navbar-nav > .user-menu > .dropdown-menu > li.user-header,
.navbar-nav > .user-menu > .dropdown-menu > .user-header {
  height: auto !important;
  min-height: 0 !important;
  padding: 16px 16px 14px !important;
  text-align: center;
  background: var(--mw-surface) !important;
  border-bottom: 1px solid var(--mw-border);
}

.navbar-nav > .user-menu > .dropdown-menu > li.user-header > img {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50%;
  border: 1px solid var(--mw-border) !important;
  margin: 0 auto 8px;
  object-fit: cover;
}

.navbar-nav > .user-menu > .dropdown-menu > li.user-header > p,
.navbar-nav > .user-menu > .dropdown-menu > .user-header p,
.navbar-nav > .user-menu > .dropdown-menu > .user-header p small {
  color: var(--mw-text) !important;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

.navbar-nav > .user-menu > .dropdown-menu > .user-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--mw-surface) !important;
  padding: 12px !important;
}

.navbar-nav > .user-menu > .dropdown-menu > .user-footer:before,
.navbar-nav > .user-menu > .dropdown-menu > .user-footer:after {
  display: none;
}

.navbar-nav > .user-menu > .dropdown-menu > .user-footer .pull-left,
.navbar-nav > .user-menu > .dropdown-menu > .user-footer .pull-right {
  float: none !important;
  flex: 1 1 0;
  width: auto;
}

.navbar-custom-menu .user-menu .user-footer .btn,
.navbar-nav > .user-menu > .dropdown-menu > .user-footer .btn,
.navbar-nav > .user-menu > .dropdown-menu > .user-footer .btn-default,
.navbar-nav > .user-menu > .dropdown-menu > .user-footer .btn-flat {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 36px !important;
  padding: 0 8px !important;
  margin: 0 !important;
  border-radius: var(--mw-radius-sm) !important;
  border: 1px solid var(--mw-border) !important;
  background: var(--mw-surface) !important;
  color: var(--mw-text) !important;
  box-shadow: none !important;
  font-size: 13px;
  font-weight: 500;
  line-height: 1 !important;
  white-space: nowrap;
}

.navbar-custom-menu .user-menu .user-footer .btn:hover,
.navbar-nav > .user-menu > .dropdown-menu > .user-footer .btn:hover {
  background: var(--mw-surface-2) !important;
  border-color: var(--mw-border-strong) !important;
  color: var(--mw-text) !important;
}

.navbar-nav > .user-menu > .dropdown-menu > .user-footer .pull-right .btn {
  color: var(--mw-danger) !important;
  border-color: #ead5d3 !important;
}

.navbar-nav > .user-menu > .dropdown-menu > .user-footer .pull-right .btn:hover {
  background: var(--mw-danger-bg) !important;
  color: var(--mw-danger) !important;
}

.notifications-menu > .dropdown-menu {
  width: 320px;
}

.notifications-menu .label,
.notifications_count {
  background: var(--mw-danger) !important;
  font-size: 10px;
  padding: 2px 5px;
  border-radius: 8px;
}

/* Sidebar */

.main-sidebar,
.skin-blue .main-sidebar,
.skin-blue-light .main-sidebar,
.skin-black .main-sidebar,
.skin-black-light .main-sidebar,
.skin-green .main-sidebar,
.skin-green-light .main-sidebar,
.skin-red .main-sidebar,
.skin-red-light .main-sidebar,
.skin-yellow .main-sidebar,
.skin-yellow-light .main-sidebar,
.skin-purple .main-sidebar,
.skin-purple-light .main-sidebar,
[class*="skin-"] .main-sidebar,
[class*="skin-"] .left-side {
  background: var(--mw-sidebar-bg) !important;
  box-shadow: none !important;
}

.sidebar-modern .logo,
.main-sidebar .logo {
  display: none !important;
}

.main-sidebar .logo .logo-lg {
  font-size: 14px;
  font-weight: 600;
  color: var(--mw-sidebar-text);
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar {
  padding-bottom: 24px;
}

.sidebar-menu {
  padding: 8px 8px 16px;
}

.sidebar-menu > li {
  margin: 1px 0;
}

.sidebar-menu > li > a,
.skin-blue-light .sidebar-menu > li > a,
.skin-green-light .sidebar-menu > li > a,
[class*="skin-"] .sidebar-menu > li > a,
[class*="skin-"] .sidebar a {
  color: #ffffff !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: var(--mw-radius-sm);
  margin: 0;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 600;
  opacity: 1 !important;
}

.sidebar-menu > li > a > .fa,
.sidebar-menu > li > a > .fas,
.sidebar-menu > li > a > .far,
.sidebar-menu > li > a > .fab,
.sidebar-menu > li > a > .glyphicon,
.sidebar-menu > li > a > .ion {
  width: 20px;
  font-size: 14px;
  color: #ffffff !important;
  text-align: center;
}

.sidebar-menu > li:hover > a,
.sidebar-menu > li.menu-open > a,
[class*="skin-"] .sidebar-menu > li:hover > a,
[class*="skin-"] .sidebar-menu > li.menu-open > a {
  background: transparent !important;
  color: #ffffff !important;
}

.sidebar-menu > li.active > a,
[class*="skin-"] .sidebar-menu > li.active > a {
  background: transparent !important;
  color: #ffffff !important;
}

.sidebar-menu > li.active > a > .fa,
.sidebar-menu > li.active > a > .fas,
[class*="skin-"] .sidebar-menu > li.active > a > .fa,
[class*="skin-"] .sidebar-menu > li.active > a > .fas {
  color: #ffffff !important;
}

.sidebar-menu > li > a > .pull-right-container {
  margin-top: 2px;
}

.treeview-menu,
.sidebar-menu > li > .treeview-menu,
[class*="skin-"] .sidebar-menu > li > .treeview-menu,
[class*="skin-"] .sidebar-menu .treeview-menu {
  background: transparent !important;
  padding: 2px 0 6px 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}

.treeview-menu > li,
[class*="skin-"] .sidebar-menu .treeview-menu > li {
  background: transparent !important;
}

.treeview-menu > li > a,
.treeview-menu a,
[class*="skin-"] .sidebar-menu .treeview-menu > li > a,
[class*="skin-"] .sidebar-menu .treeview-menu a {
  color: #f3f6f7 !important;
  padding: 7px 12px 7px 28px !important;
  font-size: 13px;
  font-weight: 500;
  border-radius: 0;
  margin: 0 !important;
  background: transparent !important;
  opacity: 1 !important;
  box-shadow: none !important;
}

html[dir="rtl"] .treeview-menu > li > a,
html[dir="rtl"] .treeview-menu a {
  padding: 7px 28px 7px 12px !important;
}

.treeview-menu a::before {
  color: inherit !important;
}

.treeview-menu > li.active > a,
.treeview-menu > li > a:hover,
.treeview-menu > li > a:focus,
[class*="skin-"] .sidebar-menu .treeview-menu > li.active > a,
[class*="skin-"] .sidebar-menu .treeview-menu > li > a:hover,
[class*="skin-"] .sidebar-menu .treeview-menu > li > a:focus {
  background: transparent !important;
  color: #ffffff !important;
}

.sidebar-menu li.header,
[class*="skin-"] .sidebar-menu > li.header {
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 14px 12px 6px;
  background: transparent !important;
}

.sidebar-menu > li.bg-red,
.sidebar-menu > li.bg-red > a {
  background: transparent !important;
}

.sidebar-menu > li.bg-red > a {
  border-inline-start: 2px solid #c4a35a !important;
}

body.mw-platform .main-sidebar {
  background: var(--mw-sidebar-bg) !important;
}

[class*="-light"] .main-sidebar {
  border-inline-end: 1px solid var(--mw-sidebar-border) !important;
}

body[class*="-light"] .sidebar-menu > li > a,
body[class*="-light"] .sidebar a,
body[class*="-light"] .sidebar-menu .treeview-menu > li > a,
body[class*="-light"] .sidebar-menu .treeview-menu a {
  color: #1f2628 !important;
  background: transparent !important;
}

body[class*="-light"] .sidebar-menu > li > a > .fa,
body[class*="-light"] .sidebar-menu > li > a > .fas,
body[class*="-light"] .sidebar-menu > li > a > .far,
body[class*="-light"] .sidebar-menu > li > a > .fab {
  color: #334044 !important;
}

body[class*="-light"] .sidebar-menu > li:hover > a,
body[class*="-light"] .sidebar-menu > li.menu-open > a,
body[class*="-light"] .sidebar-menu > li.active > a,
body[class*="-light"] .sidebar-menu .treeview-menu > li > a:hover,
body[class*="-light"] .sidebar-menu .treeview-menu > li.active > a {
  background: transparent !important;
  color: #1f2628 !important;
}

body[class*="-light"] .sidebar-menu > li.active > a > .fa,
body[class*="-light"] .sidebar-menu > li.active > a > .fas {
  color: #1f2628 !important;
  background: transparent !important;
}

/* Content */

.content-wrapper,
.right-side,
[class*="skin-"] .content-wrapper {
  background: var(--mw-bg) !important;
}

.content,
.content-header,
.content-header-custom,
.dashboard-container {
  width: 100%;
  max-width: var(--mw-content-max);
  margin-left: auto;
  margin-right: auto;
}

.content {
  padding: 16px 24px 32px;
}

body.lockscreen .content,
body.lockscreen .content-header,
body.lockscreen .content-header-custom {
  max-width: none;
}

@media (max-width: 991px) {
  .content {
    padding: 16px 20px 28px;
  }
}

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

.content-header,
.content-header-custom,
.skin-blue .content-wrapper .content-header-custom,
.skin-blue-light .content-wrapper .content-header-custom,
[class*="skin-"] .content-wrapper .content-header-custom {
  background: transparent !important;
  color: var(--mw-text) !important;
  padding: 16px 24px 0 !important;
}

.content-header h1,
.content-header-custom h1,
.content-header-custom a,
.content-header-custom small {
  color: var(--mw-text) !important;
}

.content-header h1 {
  font-size: 22px;
  font-weight: 600;
  margin: 0;
  line-height: 1.3;
}

.content-header h1 small {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: var(--mw-text-2) !important;
  margin-top: 4px;
}

.content-header > .breadcrumb {
  background: transparent !important;
  padding: 0;
  top: 18px;
}

.main-footer {
  background: var(--mw-surface) !important;
  border-top: 1px solid var(--mw-border) !important;
  color: var(--mw-text-2);
  padding: 10px 16px;
  font-size: 12px;
}

.main-footer .btn-success {
  background: var(--mw-surface-2) !important;
  border-color: var(--mw-border) !important;
  color: var(--mw-text) !important;
}

/* -------------------------------------------------------------------------- */
/* Buttons                                                                    */
/* -------------------------------------------------------------------------- */

.btn {
  border-radius: var(--mw-radius-sm) !important;
  font-size: 13px;
  font-weight: 500;
  padding: 7px 12px;
  line-height: 1.4;
  box-shadow: none !important;
  transition: background var(--mw-ease), border-color var(--mw-ease), color var(--mw-ease);
}

.btn-lg {
  padding: 9px 16px;
  font-size: 14px;
}

.btn-sm,
.btn-xs {
  padding: 4px 8px;
  font-size: 12px;
  height: auto;
}

.btn-flat {
  box-shadow: none !important;
}

.btn-primary,
.btn-success,
.bg-green,
.bg-olive {
  background: var(--mw-brand) !important;
  border-color: var(--mw-brand) !important;
  color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.open > .dropdown-toggle.btn-primary,
.open > .dropdown-toggle.btn-success {
  background: var(--mw-brand-hover) !important;
  border-color: var(--mw-brand-hover) !important;
  color: #fff !important;
}

.btn-default,
.btn-secondary {
  background: var(--mw-surface) !important;
  border: 1px solid var(--mw-border-strong) !important;
  color: var(--mw-text) !important;
}

.btn-default:hover,
.btn-default:focus {
  background: var(--mw-surface-2) !important;
  color: var(--mw-text) !important;
}

.btn-info,
.bg-aqua,
.bg-teal,
.bg-navy {
  background: var(--mw-info) !important;
  border-color: var(--mw-info) !important;
  color: #fff !important;
}

.btn-warning,
.bg-yellow,
.bg-orange {
  background: var(--mw-warning) !important;
  border-color: var(--mw-warning) !important;
  color: #fff !important;
}

.btn-danger,
.bg-red,
.bg-maroon {
  background: var(--mw-danger) !important;
  border-color: var(--mw-danger) !important;
  color: #fff !important;
}

.btn-app {
  background: var(--mw-surface) !important;
  border: 1px solid var(--mw-border) !important;
  color: var(--mw-text) !important;
  border-radius: var(--mw-radius) !important;
  height: auto;
  min-width: 88px;
  padding: 12px 10px;
}

.btn-app > .fas,
.btn-app > .fa,
.btn-app > .fab {
  font-size: 18px !important;
  color: var(--mw-brand);
}

/* -------------------------------------------------------------------------- */
/* Forms                                                                      */
/* -------------------------------------------------------------------------- */

label,
.control-label,
.form-label {
  font-weight: 500;
  font-size: 13px;
  color: var(--mw-text);
  margin-bottom: 6px;
}

.form-control,
.select2-container--default .select2-selection--single,
textarea.form-control {
  height: var(--mw-input-h) !important;
  border: 1px solid var(--mw-border-strong) !important;
  border-radius: var(--mw-radius-sm) !important;
  box-shadow: none !important;
  font-size: 14px;
  color: var(--mw-text);
  background: var(--mw-surface) !important;
  padding: 8px 10px;
}

textarea.form-control {
  height: auto !important;
  min-height: 80px;
}

.form-control:focus,
.select2-container--default.select2-container--focus .select2-selection--single {
  border-color: var(--mw-brand) !important;
  box-shadow: 0 0 0 3px rgba(53, 111, 109, 0.14) !important;
}

.form-control[disabled],
.form-control[readonly] {
  background: var(--mw-surface-2) !important;
  color: var(--mw-text-2);
}

.help-block {
  font-size: 12px;
  color: var(--mw-text-2);
}

.has-error .form-control,
.has-error .select2-selection {
  border-color: var(--mw-danger) !important;
}

.has-error .help-block,
.has-error .control-label {
  color: var(--mw-danger);
}

.input-sm,
.form-control.input-sm {
  height: 34px !important;
  padding: 5px 8px;
  font-size: 13px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 38px;
  color: var(--mw-text);
  padding-inline: 10px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 38px;
}

.select2-dropdown {
  border: 1px solid var(--mw-border) !important;
  border-radius: var(--mw-radius);
  box-shadow: var(--mw-shadow-float);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--mw-brand) !important;
}

.select2-container--default .select2-selection--multiple {
  border: 1px solid var(--mw-border-strong) !important;
  border-radius: var(--mw-radius-sm) !important;
  min-height: var(--mw-input-h);
}

.input-group-addon {
  background: var(--mw-surface-2);
  border-color: var(--mw-border-strong);
  color: var(--mw-text-2);
}

/* Custom floating-label inputs used on some screens */
.input-form .input {
  height: var(--mw-input-h);
  border: 1px solid var(--mw-border-strong);
  border-radius: var(--mw-radius-sm);
  background: var(--mw-surface);
}

.textUser {
  color: var(--mw-text-3);
  font-size: 12px;
}

/* -------------------------------------------------------------------------- */
/* Boxes / cards / widgets                                                    */
/* -------------------------------------------------------------------------- */

.box,
.box-primary,
.box-success,
.box-info,
.box-warning,
.box-danger,
.box-solid,
.nav-tabs-custom,
.card {
  background: var(--mw-surface) !important;
  border: 1px solid var(--mw-border) !important;
  border-radius: var(--mw-radius) !important;
  box-shadow: none !important;
  margin-bottom: 16px;
}

.box.box-primary,
.box.box-success,
.box.box-info,
.box.box-warning,
.box.box-danger,
.box.box-solid {
  border-top: 1px solid var(--mw-border) !important;
}

.box-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--mw-border);
  color: var(--mw-text);
}

.box-header.with-border {
  border-bottom: 1px solid var(--mw-border);
}

.box-header > .box-title,
.box-title {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--mw-text) !important;
}

.box-body {
  padding: 14px 16px;
}

.box-footer {
  background: var(--mw-surface) !important;
  border-top: 1px solid var(--mw-border);
  padding: 10px 16px;
}

.overlay {
  background: rgba(246, 247, 248, 0.7) !important;
}

/* Neutralize leftover decorative cards */
.card.shadow-lg,
.card.border-0,
.shadow-lg {
  box-shadow: none !important;
  background: var(--mw-surface) !important;
}

.card-header,
.card-body {
  background: transparent !important;
  color: var(--mw-text) !important;
}

/* -------------------------------------------------------------------------- */
/* Tables                                                                     */
/* -------------------------------------------------------------------------- */

.table {
  font-size: 13px;
  margin-bottom: 0;
}

.table > thead > tr > th,
.table > tbody > tr > th,
.dataTable thead th {
  background: var(--mw-surface-2) !important;
  color: var(--mw-text-2) !important;
  font-weight: 600;
  font-size: 12px;
  border-bottom: 1px solid var(--mw-border) !important;
  padding: 10px 12px !important;
  white-space: nowrap;
}

.table > tbody > tr > td,
.dataTable tbody td {
  padding: 10px 12px !important;
  border-color: var(--mw-border) !important;
  vertical-align: middle;
  color: var(--mw-text);
}

.table-striped > tbody > tr:nth-of-type(odd) {
  background: #fafbfb;
}

.table-hover > tbody > tr:hover,
.table > tbody > tr:hover {
  background: #f3f5f6 !important;
}

.table-bordered,
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td {
  border-color: var(--mw-border) !important;
}

.dataTables_wrapper.dataTables_wrapper {
  font-size: 13px;
  background: #fff !important;
  background-image: none !important;
  box-shadow: none !important;
}

.dataTables_scroll,
.dataTables_scrollHead,
.dataTables_scrollBody,
.dataTables_scrollFoot {
  background: #fff !important;
  background-image: none !important;
}

.dataTables_scrollBody {
  max-height: none !important;
}

.dataTables_wrapper,
.dataTables_wrapper table.dataTable,
.dataTables_wrapper table.dataTable thead th,
.dataTables_wrapper table.dataTable tbody tr,
.dataTables_wrapper table.dataTable tbody td,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate .pagination,
.dataTables_wrapper .pagination > li > a,
.dataTables_wrapper .pagination > li > span,
.dataTables_wrapper .table > tbody > tr > td,
.dataTables_wrapper .table > tbody > tr > th,
.dataTables_wrapper .table > thead > tr > td,
.dataTables_wrapper .table > thead > tr > th,
.dataTables_wrapper .table-striped > tbody > tr:nth-of-type(odd),
.dataTables_wrapper .dt-buttons .btn,
.pos-form-actions {
  background-color: #fff !important;
  background-image: none !important;
}

.dataTables_wrapper .table-striped > tbody > tr:nth-of-type(even),
.dataTables_wrapper table.dataTable tbody tr:nth-child(even) {
  background-color: #fafbfb !important;
}

.dataTables_wrapper table.dataTable tbody tr:hover,
.dataTables_wrapper .table-hover > tbody > tr:hover,
.dataTables_wrapper .pagination > li > a:hover {
  background-color: #f3f5f6 !important;
}

.dataTables_wrapper table.dataTable thead th {
  border-bottom: 1px solid var(--mw-border) !important;
  color: var(--mw-text) !important;
}

.dataTables_wrapper .pagination > .active > a,
.dataTables_wrapper .pagination > .active > span {
  background: var(--mw-brand) !important;
  border-color: var(--mw-brand) !important;
  color: #fff !important;
}

.dataTables_wrapper .dataTables_filter input {
  height: 34px;
  border: 1px solid var(--mw-border-strong);
  border-radius: var(--mw-radius-sm);
  padding: 4px 8px;
}

.dataTables_wrapper .dt-buttons .btn,
.dt-buttons .btn {
  background: var(--mw-surface) !important;
  border: 1px solid var(--mw-border) !important;
  color: var(--mw-text) !important;
  margin-inline-end: 4px;
}

.pagination > li > a,
.pagination > li > span {
  color: var(--mw-text);
  border-color: var(--mw-border);
  background: var(--mw-surface);
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover {
  background: var(--mw-brand) !important;
  border-color: var(--mw-brand) !important;
  color: #fff !important;
}

.dataTables_info,
.pagination-info {
  color: var(--mw-text-2);
  font-size: 12px;
}

table.dataTable.no-footer {
  border-bottom: 1px solid var(--mw-border);
}

/* -------------------------------------------------------------------------- */
/* Status badges                                                              */
/* -------------------------------------------------------------------------- */

.label,
.badge {
  font-weight: 500;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing: 0;
  line-height: 1.4;
}

.label-success,
.badge-success,
span.status-success {
  background: var(--mw-success-bg) !important;
  color: var(--mw-success) !important;
}

.label-warning,
.badge-warning {
  background: var(--mw-warning-bg) !important;
  color: var(--mw-warning) !important;
}

.label-danger,
.badge-danger {
  background: var(--mw-danger-bg) !important;
  color: var(--mw-danger) !important;
}

.label-info,
.badge-info,
.label-primary {
  background: var(--mw-info-bg) !important;
  color: var(--mw-info) !important;
}

.label-default,
.badge-default {
  background: var(--mw-surface-2) !important;
  color: var(--mw-text-2) !important;
}

.btn.bg-green,
.btn.bg-olive,
.btn.bg-aqua,
.btn.bg-teal,
.btn.bg-navy,
.btn.bg-yellow,
.btn.bg-orange,
.btn.bg-red,
.btn.bg-maroon,
.btn.bg-purple,
.btn.bg-info {
  color: #fff !important;
}

.label-default,
.badge-default {
  background: var(--mw-surface-2) !important;
  color: var(--mw-text-2) !important;
}

/* Keep footer/link small-box colors from becoming unreadable */
.small-box .bg-green,
.small-box.bg-green,
.small-box.bg-aqua,
.small-box.bg-yellow,
.small-box.bg-red,
.small-box.bg-navy {
  color: var(--mw-text) !important;
}

/* -------------------------------------------------------------------------- */
/* Modals / alerts                                                             */
/* -------------------------------------------------------------------------- */

.modal-content {
  border: 1px solid var(--mw-border);
  border-radius: var(--mw-radius-md) !important;
  box-shadow: var(--mw-shadow-float);
}

.modal-header {
  border-bottom: 1px solid var(--mw-border);
  padding: 14px 16px;
}

.modal-title {
  font-size: 16px;
  font-weight: 600;
}

.modal-body {
  padding: 16px;
}

.modal-footer {
  border-top: 1px solid var(--mw-border);
  padding: 12px 16px;
}

.alert {
  border-radius: var(--mw-radius-sm);
  border: 1px solid var(--mw-border);
  padding: 10px 14px;
  font-size: 13px;
}

.alert-success {
  background: var(--mw-success-bg);
  border-color: #d3e4d7;
  color: var(--mw-success);
}

.alert-warning {
  background: var(--mw-warning-bg);
  border-color: #eadfc8;
  color: var(--mw-warning);
}

.alert-danger {
  background: var(--mw-danger-bg);
  border-color: #ead6d4;
  color: var(--mw-danger);
}

.alert-info {
  background: var(--mw-info-bg);
  border-color: #d4e3ec;
  color: var(--mw-info);
}

/* -------------------------------------------------------------------------- */
/* Tabs / navs                                                                */
/* -------------------------------------------------------------------------- */

.nav-tabs-custom > .nav-tabs {
  background: transparent;
  border-bottom: 1px solid var(--mw-border);
}

.nav-tabs-custom > .nav-tabs > li {
  margin-bottom: -1px;
}

.nav-tabs-custom > .nav-tabs > li > a {
  color: var(--mw-text-2);
  font-weight: 500;
  border-radius: var(--mw-radius-sm) var(--mw-radius-sm) 0 0;
}

.nav-tabs-custom > .nav-tabs > li.active > a {
  color: var(--mw-brand) !important;
  border-top: 0;
  border-bottom: 2px solid var(--mw-brand);
  background: transparent;
}

.nav-tabs-custom > .tab-content {
  background: transparent;
  padding: 16px 0 0;
}

.nav-pills > li.active > a,
.nav-pills > li.active > a:hover {
  background: var(--mw-brand);
}

/* -------------------------------------------------------------------------- */
/* KPI / small-box / info-box                                                */
/* -------------------------------------------------------------------------- */

.small-box {
  border-radius: var(--mw-radius) !important;
  box-shadow: none !important;
  border: 1px solid var(--mw-border) !important;
  background: var(--mw-surface) !important;
  color: var(--mw-text) !important;
}

.small-box > .inner {
  padding: 14px 16px 10px;
}

.small-box h3 {
  font-size: 22px !important;
  font-weight: 600;
  color: var(--mw-text) !important;
  margin: 0 0 6px;
}

.small-box p {
  font-size: 13px;
  color: var(--mw-text-2) !important;
}

.small-box .icon {
  display: none;
}

.small-box .small-box-footer {
  background: var(--mw-surface-2) !important;
  color: var(--mw-text-2) !important;
  border-top: 1px solid var(--mw-border);
}

.info-box {
  background: var(--mw-surface);
  border: 1px solid var(--mw-border);
  border-radius: var(--mw-radius);
  box-shadow: none;
  min-height: 72px;
}

.info-box-icon {
  background: var(--mw-surface-2) !important;
  color: var(--mw-brand) !important;
  width: 64px;
  height: 72px;
  line-height: 72px;
  font-size: 22px;
}

.info-box-content {
  padding: 10px 12px;
}

.info-box-text {
  font-size: 12px;
  color: var(--mw-text-2);
  text-transform: none;
}

.info-box-number {
  font-size: 18px;
  font-weight: 600;
}

/* -------------------------------------------------------------------------- */
/* Page filter toolbars                                                       */
/* -------------------------------------------------------------------------- */

#accordion.box .box-header {
  background: var(--mw-surface);
}

#accordion .box-title a {
  color: var(--mw-text);
  font-size: 14px;
}

/* -------------------------------------------------------------------------- */
/* POS                                                                        */
/* -------------------------------------------------------------------------- */

.pos-create-page,
body.lockscreen .content-wrapper,
body.lockscreen .wrapper {
  background: var(--mw-bg);
}

.pos-header {
  background: var(--mw-surface);
  border-bottom: 1px solid var(--mw-border);
  padding: 6px 8px;
}

.pos-header button,
.pos-header a.btn {
  background: var(--mw-surface) !important;
  border: 1px solid var(--mw-border) !important;
  color: var(--mw-text) !important;
  border-radius: var(--mw-radius-sm) !important;
  height: 32px;
  line-height: 20px;
}

.pos-header a.btn-info,
.pos-header .btn-primary {
  color: var(--mw-text) !important;
}

.pos-header .btn-danger {
  color: var(--mw-danger) !important;
}

.pos-create-page .box.box-solid {
  border: 1px solid var(--mw-border);
}

.pos-create-page #pos_table {
  font-size: 13px;
}

.pos-create-page #pos_table th {
  background: var(--mw-surface-2);
}

.pos-form-totals,
.pos_form_totals,
div.pos_form_totals {
  background: var(--mw-surface);
}

.pos-create-page .payment_row,
.pos-create-page .col-md-12.pos-form-actions {
  background: var(--mw-surface);
}

.pos-form-actions {
  position: sticky;
  bottom: 0;
  background: var(--mw-surface);
  border-top: 1px solid var(--mw-border);
  padding: 10px 8px;
  z-index: 40;
}

.pos-form-actions .btn {
  margin: 3px 2px;
  min-height: 38px;
}

.pos-form-actions .btn-success {
  font-weight: 600;
}

#total_payable {
  font-size: 22px !important;
  font-weight: 700;
  color: var(--mw-text) !important;
  font-variant-numeric: tabular-nums;
}

#pos-final,
.pos_express_finalize,
button.pos-express-finalize,
.btn.pos-express-finalize {
  min-height: 40px;
}

.product_box,
.product-box,
.eq-height-col .product_list {
  border-radius: var(--mw-radius-sm);
}

.product_box:hover {
  border-color: var(--mw-brand);
}

/* -------------------------------------------------------------------------- */
/* Dashboard                                                                   */
/* -------------------------------------------------------------------------- */

.dashboard-container {
  max-width: var(--mw-content-max);
  margin-left: auto;
  margin-right: auto;
  padding: 16px 24px 32px;
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
}

.dashboard-container::before {
  display: none !important;
}

.mw-dash-hero,
.dashboard-container .hero {
  background: transparent;
  border: 0;
  padding: 4px 0 16px;
  margin-bottom: 8px;
  border-radius: 0;
}

.mw-dash-hero .page-title,
.dashboard-container .page-title {
  font-size: 22px !important;
  font-weight: 600 !important;
  color: var(--mw-text) !important;
  text-shadow: none;
  margin: 0 0 4px;
  animation: none !important;
}

.dashboard-container .page-subtitle {
  color: var(--mw-text-2);
  font-size: 13px;
  font-weight: 400;
}

.hero-badges {
  display: none;
}

.quick-actions {
  margin-bottom: 20px;
}

.action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 8px;
  margin-bottom: 8px;
}

.action-card {
  background: var(--mw-surface);
  border: 1px solid var(--mw-border);
  border-radius: var(--mw-radius);
  padding: 12px 10px;
  text-align: start;
  text-decoration: none !important;
  color: var(--mw-text) !important;
  box-shadow: none !important;
  animation: none !important;
  overflow: visible;
}

.action-card::before {
  display: none !important;
}

.action-card.is-hover,
.action-card:hover {
  transform: none !important;
  background: var(--mw-surface);
  border-color: var(--mw-brand);
  box-shadow: none !important;
}

.action-icon {
  font-size: 16px !important;
  margin-bottom: 8px;
  color: var(--mw-brand) !important;
}

.action-title {
  font-size: 13px !important;
  font-weight: 500;
  margin: 0;
}

.general-stats-section,
.stats-section,
.stock-alert-section {
  background: var(--mw-surface);
  border: 1px solid var(--mw-border);
  border-radius: var(--mw-radius);
  padding: 16px;
  margin-bottom: 16px;
}

.stats-header h2,
.stock-alert-title {
  font-size: 15px !important;
  font-weight: 600;
  color: var(--mw-text) !important;
  margin: 0 0 14px;
  text-align: start;
  animation: none !important;
}

.general-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}

.general-stat-card {
  background: var(--mw-surface-2);
  border: 1px solid var(--mw-border);
  border-radius: var(--mw-radius);
  padding: 12px 12px 10px;
  text-align: start;
}

.general-stat-icon {
  font-size: 14px !important;
  color: var(--mw-text-2) !important;
  margin-bottom: 6px;
}

.general-stat-number {
  font-size: 20px;
  font-weight: 600;
  color: var(--mw-text);
  line-height: 1.2;
}

.general-stat-label {
  font-size: 12px;
  color: var(--mw-text-2);
  margin-top: 2px;
}

.date-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  justify-content: flex-start;
}

.date-filter-btn {
  background: var(--mw-surface) !important;
  border: 1px solid var(--mw-border-strong) !important;
  color: var(--mw-text) !important;
  border-radius: 999px !important;
  padding: 5px 12px !important;
  font-size: 13px;
  font-weight: 500;
  box-shadow: none !important;
}

.date-filter-btn.active,
.date-filter-btn:hover {
  background: var(--mw-brand-soft) !important;
  border-color: var(--mw-brand) !important;
  color: var(--mw-brand) !important;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.stat-card {
  background: transparent;
  border: 1px solid var(--mw-border);
  border-radius: var(--mw-radius);
  padding: 12px 14px;
  box-shadow: none;
}

.stat-title {
  font-size: 13px !important;
  font-weight: 600;
  color: var(--mw-text) !important;
  margin: 0 0 8px;
}

.stat-table {
  width: 100%;
}

.stat-table td {
  padding: 4px 0;
  border: 0;
}

.stat-label {
  color: var(--mw-text-2);
  font-size: 13px;
}

.stat-value {
  font-weight: 600;
  text-align: end;
  font-variant-numeric: tabular-nums;
}

.loading-spinner {
  color: var(--mw-text-3);
}

.floating,
.pulse {
  animation: none !important;
}

/* -------------------------------------------------------------------------- */
/* Accounting / reports density                                               */
/* -------------------------------------------------------------------------- */

.table-pdf thead tr,
.blue-heading {
  background: var(--mw-surface-2) !important;
  color: var(--mw-text) !important;
}

.table-pdf thead tr th {
  color: var(--mw-text) !important;
}

.table-pdf .odd {
  background: #f7f8f9;
}

/* Journal / ledger numeric alignment helpers */
.ac-report table td,
.ac_reports table td,
.trial-balance td,
table.ledger td {
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------------------- */
/* Auth                                                                       */
/* -------------------------------------------------------------------------- */

body.mw-auth,
.login-page,
.hold-transition.login-page {
  background: var(--mw-bg) !important;
  min-height: 100vh;
  font-family: var(--mw-font) !important;
  color: var(--mw-text);
}

body.mw-auth .right-col,
.right-col {
  background: var(--mw-bg) !important;
  min-height: auto;
}

body.mw-auth .right-col label,
.right-col label {
  color: var(--mw-text) !important;
}

body.mw-auth .right-col a,
.right-col a,
.text-white a {
  color: var(--mw-brand) !important;
  font-weight: 600;
  font-size: 14px;
}

body.mw-auth .right-col a:hover,
.right-col a:hover,
.text-white a:hover {
  color: var(--mw-brand-hover) !important;
}

.mw-auth-page,
.mw-auth-shell {
  min-height: 100vh;
  background: var(--mw-bg);
}

.mw-auth-bar {
  background: var(--mw-surface);
  border-bottom: 1px solid var(--mw-border);
  position: sticky;
  top: 0;
  z-index: 20;
}

.mw-auth-bar__inner {
  width: min(1100px, calc(100% - 32px));
  margin-inline: auto;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.mw-auth-bar__brand {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.mw-auth-bar__brand img {
  height: 34px;
  width: auto;
  display: block;
}

.mw-auth-bar__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.mw-auth-bar__actions #change_lang,
.mw-auth-bar #change_lang {
  width: auto;
  min-width: 150px;
  height: 36px;
  background: #fff;
  border: 1px solid var(--mw-border);
  border-radius: var(--mw-radius-sm);
  color: var(--mw-text);
  font-size: 13px;
  padding: 4px 10px;
}

.mw-auth-bar__link {
  color: var(--mw-text-2) !important;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 4px;
}

.mw-auth-bar__link:hover {
  color: var(--mw-text) !important;
}

.mw-auth-bar__link--strong {
  color: var(--mw-brand) !important;
}

.mw-auth-main {
  width: min(1100px, calc(100% - 24px));
  margin: 0 auto;
  padding: 32px 0 48px;
}

.login-box {
  width: min(420px, 100%);
  background: var(--mw-surface);
  border: 1px solid var(--mw-border);
  border-radius: var(--mw-radius-lg);
  box-shadow: none;
  padding: 32px 28px 24px;
  margin: 24px auto;
  text-align: center;
  float: none !important;
}

.login-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--mw-text) !important;
  margin: 8px 0 0;
  letter-spacing: -0.02em;
}

.login-sub,
.login-box .login-sub,
.login-box .verify-message {
  margin: 8px 0 0;
  color: var(--mw-text-2) !important;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.7;
  text-align: center;
}

.login-key {
  height: auto !important;
  font-size: 0 !important;
  line-height: 1 !important;
  margin: 0 0 8px;
  background: none !important;
  -webkit-text-fill-color: unset;
}

.login-key i {
  display: inline-grid;
  width: 44px;
  height: 40px;
  border-radius: var(--mw-radius);
  background: var(--mw-brand-soft);
  color: var(--mw-brand) !important;
  border: 0;
  font-size: 16px !important;
  place-items: center;
  background-image: none !important;
  -webkit-text-fill-color: var(--mw-brand);
}

.login-form {
  margin-top: 22px;
  text-align: start;
}

body.mw-auth .login-box .form-group {
  margin-bottom: 16px;
}

body.mw-auth .login-box .form-control-label,
body.mw-auth .login-box label,
body.mw-auth .login-box .form-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--mw-text) !important;
  margin-bottom: 6px;
  letter-spacing: 0;
}

body.mw-auth .login-box .form-control,
body.mw-auth .login-box input[type="text"],
body.mw-auth .login-box input[type="email"],
body.mw-auth .login-box input[type="password"] {
  height: var(--mw-input-h);
  background: #fff !important;
  border: 1px solid var(--mw-border-strong) !important;
  border-radius: var(--mw-radius-sm) !important;
  box-shadow: none !important;
  color: var(--mw-text) !important;
  font-weight: 400;
  padding: 8px 12px !important;
  margin-bottom: 0;
}

body.mw-auth .login-box .form-control:focus,
body.mw-auth .login-box input:focus {
  border-color: var(--mw-brand) !important;
  box-shadow: 0 0 0 3px rgba(53, 111, 109, 0.18) !important;
  background: #fff !important;
}

body.mw-auth .login-box .help-block,
body.mw-auth .login-box .help-block strong {
  color: var(--mw-danger) !important;
  font-size: 12px;
}

.loginbttm {
  padding: 0;
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  float: none;
}

.loginbttm--stack {
  flex-direction: column;
  align-items: stretch;
}

.loginbttm--stack .login-button,
.loginbttm--stack .login-text {
  width: 100%;
  text-align: center;
  padding: 0;
  float: none;
}

.login-text,
.login-btm {
  float: none;
  text-align: start;
  padding: 0;
}

.login-text a {
  color: var(--mw-text-2) !important;
  font-size: 13px;
  font-weight: 600;
}

.login-text a:hover {
  color: var(--mw-brand) !important;
}

.login-button {
  text-align: end;
  padding: 0;
  float: none;
  margin-bottom: 0;
}

body.mw-auth .login-box .btn-primary,
body.mw-auth .login-box .btn-outline-primary {
  background: var(--mw-brand) !important;
  border: 1px solid var(--mw-brand) !important;
  color: #fff !important;
  border-radius: var(--mw-radius-sm) !important;
  font-weight: 600;
  letter-spacing: 0;
  box-shadow: none !important;
  min-height: 40px;
  padding: 8px 16px;
}

body.mw-auth .login-box .btn-primary:hover,
body.mw-auth .login-box .btn-outline-primary:hover {
  background: var(--mw-brand-hover) !important;
  border-color: var(--mw-brand-hover) !important;
  color: #fff !important;
}

body.mw-auth .login-box .btn-block {
  width: 100%;
}

body.mw-auth .login-box .btn-default {
  background: #fff !important;
  border: 1px solid var(--mw-border-strong) !important;
  color: var(--mw-text) !important;
  border-radius: var(--mw-radius-sm) !important;
}

.verify-success {
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--mw-success) !important;
  line-height: 1.6;
  text-align: center;
  font-weight: 600;
}

.verify-actions {
  display: grid;
  gap: 10px;
  margin-top: 20px;
}

.register-box {
  margin: 24px auto 40px;
  width: min(640px, 100%);
  background: var(--mw-surface);
  border: 1px solid var(--mw-border);
  border-radius: var(--mw-radius-lg);
  box-shadow: none !important;
  padding: 24px;
}

@media (max-width: 720px) {
  .mw-auth-bar__inner {
    width: calc(100% - 24px);
    min-height: 52px;
    padding: 8px 0;
  }

  .mw-auth-bar__brand img {
    height: 28px;
  }

  .mw-auth-bar__actions {
    gap: 8px;
  }

  .login-box {
    padding: 24px 18px 18px;
    margin: 12px auto;
  }

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

  .login-button,
  .login-text {
    text-align: center;
    width: 100%;
  }
}

/* -------------------------------------------------------------------------- */
/* Super Admin distinction                                                    */
/* -------------------------------------------------------------------------- */

body.mw-platform .main-header .logo::after {
  content: "المنصة";
  display: inline-block;
  margin-inline-start: 8px;
  font-size: 10px;
  font-weight: 600;
  color: var(--mw-warning);
  border: 1px solid #eadfc8;
  background: var(--mw-warning-bg);
  padding: 1px 6px;
  border-radius: 999px;
  vertical-align: middle;
}

/* -------------------------------------------------------------------------- */
/* Misc AdminLTE leftovers                                                    */
/* -------------------------------------------------------------------------- */

.bg-purple,
.bg-maroon,
.bg-navy,
.bg-orange,
.bg-teal,
.bg-olive {
  color: #fff;
}

.callout {
  border-radius: var(--mw-radius-sm);
  border-inline-start-width: 3px;
}

.progress {
  background: var(--mw-surface-2);
  box-shadow: none;
  border-radius: 4px;
}

.progress-bar {
  background: var(--mw-brand);
}

.box-tools .btn {
  height: 30px;
}

.scrolltop .scroll {
  background: var(--mw-text);
  color: #fff;
  border-radius: var(--mw-radius-sm);
  opacity: 0.7;
}

/* Hide neon / decorative widgets leftover from prior theme */
.neon-checkbox,
.neon-checkbox__sparks,
.ring {
  display: none !important;
}

/* -------------------------------------------------------------------------- */
/* RTL polish                                                                 */
/* -------------------------------------------------------------------------- */

html[dir="rtl"] body,
html[dir="rtl"] .content-wrapper,
html[dir="rtl"] .main-header,
html[dir="rtl"] .main-sidebar {
  font-family: var(--mw-font) !important;
}

html[dir="rtl"] .content-header h1 {
  text-align: right;
}

html[dir="rtl"] .table > thead > tr > th,
html[dir="rtl"] .table > tbody > tr > td {
  text-align: right;
}

html[dir="rtl"] .table td.text-right,
html[dir="ltr"] .table td.text-right {
  font-variant-numeric: tabular-nums;
}

html[dir="rtl"] .dropdown-menu {
  text-align: right;
}

html[dir="rtl"] .main-header .navbar-custom-menu > .navbar-nav > li > .dropdown-menu {
  left: 0;
  right: auto;
}

/* -------------------------------------------------------------------------- */
/* Responsive                                                                  */
/* -------------------------------------------------------------------------- */

html {
  overflow-x: hidden;
}

body.sidebar-mini .mw-auth-bar,
.wrapper.thetop .mw-auth-bar {
  display: none !important;
}

@media (min-width: 768px) {
  html[dir="rtl"] body.sidebar-mini .main-sidebar,
  html[dir="ltr"] body.sidebar-mini .main-sidebar,
  html[dir="rtl"] body.sidebar-mini .left-side,
  html[dir="ltr"] body.sidebar-mini .left-side {
    transform: none !important;
    visibility: visible !important;
  }

  html[dir="rtl"] body.sidebar-mini:not(.sidebar-collapse) .content-wrapper,
  html[dir="rtl"] body.sidebar-mini:not(.sidebar-collapse) .right-side,
  html[dir="rtl"] body.sidebar-mini:not(.sidebar-collapse) .main-footer {
    margin-right: 230px !important;
    margin-left: 0 !important;
  }

  html[dir="ltr"] body.sidebar-mini:not(.sidebar-collapse) .content-wrapper,
  html[dir="ltr"] body.sidebar-mini:not(.sidebar-collapse) .right-side,
  html[dir="ltr"] body.sidebar-mini:not(.sidebar-collapse) .main-footer {
    margin-left: 230px !important;
    margin-right: 0 !important;
  }

  body.sidebar-mini .main-header {
    display: flex;
  }
}

.wrapper,
.content-wrapper,
.content,
.box,
.box-body,
.row {
  min-width: 0;
}

img,
.box img,
.content img,
.modal img {
  max-width: 100%;
  height: auto;
}

.main-header .logo img,
.user-image,
.user-header img,
.navbar-nav > .user-menu .user-image,
.table img,
.dataTables_wrapper table img {
  max-width: none;
  height: auto;
}

.form-control,
.select2-container,
.input-group,
.bootstrap-timepicker,
.datepicker {
  max-width: 100%;
}

.select2-container {
  width: 100% !important;
}

.chart canvas,
.chartjs-render-monitor,
.highcharts-container,
.svg-container {
  max-width: 100% !important;
}

.mw-sidebar-overlay {
  display: none;
}

@media (max-width: 1199px) {
  .content {
    padding: 16px 20px 28px;
  }

  .content-header,
  .content-header-custom,
  [class*="skin-"] .content-wrapper .content-header-custom {
    padding: 16px 20px 0 !important;
  }
}

@media (max-width: 991px) {
  .content {
    padding: 14px 16px 24px;
  }

  .content-header h1 {
    font-size: 20px;
  }

  .box-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }

  .box-header > .box-tools {
    position: static !important;
    width: 100%;
    margin-top: 4px;
  }

  .dataTables_wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_filter {
    float: none !important;
    text-align: start !important;
    display: block;
    width: 100%;
    margin-bottom: 8px;
    padding: 0 !important;
  }

  .dataTables_wrapper .dt-buttons {
    float: none !important;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
  }

  .small-box h3 {
    font-size: 20px !important;
  }
}

@media (max-width: 767px) {
  .main-header {
    display: flex;
    align-items: center;
    min-height: var(--mw-header-h);
  }

  .main-header .logo {
    width: auto !important;
    max-width: 42%;
    float: none !important;
    height: var(--mw-header-h) !important;
    line-height: var(--mw-header-h) !important;
    padding-inline: 8px;
  }

  .main-header .navbar {
    width: auto !important;
    flex: 1;
    margin: 0 !important;
    min-height: var(--mw-header-h);
  }

  .main-header .navbar-custom-menu {
    float: none;
    max-width: calc(100vw - 120px);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .main-header .user-menu .dropdown-toggle span {
    display: none;
  }

  .navbar-custom-menu .btn span.hidden-xs {
    display: none;
  }

  .navbar-custom-menu > a.btn-success {
    font-size: 0;
    padding-inline: 10px !important;
  }

  .navbar-custom-menu > a.btn-success i {
    font-size: 14px;
  }

  .main-sidebar,
  .left-side {
    position: fixed !important;
    top: 0;
    bottom: 0;
    z-index: 1045 !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-top: 0;
  }

  html[dir="ltr"] .main-sidebar,
  html[dir="ltr"] .left-side {
    left: 0;
    right: auto;
    transform: translateX(-110%);
  }

  html[dir="rtl"] .main-sidebar,
  html[dir="rtl"] .left-side {
    right: 0;
    left: auto;
    transform: translateX(110%);
  }

  .sidebar-open .main-sidebar,
  .sidebar-open .left-side {
    transform: translateX(0) !important;
  }

  .sidebar-open .mw-sidebar-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(32, 37, 43, 0.46);
    z-index: 1040;
  }

  .content-wrapper,
  .right-side,
  .main-footer {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .content {
    padding: 12px 12px max(24px, env(safe-area-inset-bottom));
  }

  .content-header,
  .content-header-custom,
  [class*="skin-"] .content-wrapper .content-header-custom {
    padding: 12px 12px 0 !important;
  }

  .content-header h1 {
    font-size: 18px;
  }

  .content-header > .breadcrumb {
    position: static;
    margin-top: 8px;
    float: none !important;
  }

  .content .row > [class*="col-"],
  .content-wrapper .row > [class*="col-"],
  .modal-body .row > [class*="col-"],
  .box-body .row > [class*="col-"],
  .tab-pane .row > [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .form-group > .input-group {
    width: 100%;
  }

  .nav-tabs-custom > .nav-tabs,
  .nav-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .nav-tabs > li,
  .nav-tabs-custom > .nav-tabs > li {
    float: none;
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .pos-tab-container .pos-tab-menu,
  .pos-tab-container .pos-tab {
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
  }

  .pos-tab-menu .list-group {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .pos-tab-menu .list-group-item {
    white-space: nowrap;
    border-radius: 0 !important;
  }

  .pos-tab-menu .list-group-item.active:after {
    display: none;
  }

  .modal-dialog {
    width: calc(100% - 16px) !important;
    margin: 8px auto !important;
    max-width: 100%;
  }

  .modal-content {
    max-height: calc(100dvh - 16px);
    display: flex;
    flex-direction: column;
  }

  .modal-body {
    overflow-y: auto;
    max-height: calc(100dvh - 150px);
  }

  .modal-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
  }

  /* Do not flex table action groups — the dropdown becomes a huge empty panel. */
  .box-footer .btn-group,
  .box-footer .pull-right,
  .text-center .btn-group,
  .dt-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }

  table .btn-group,
  td .btn-group,
  .dataTables_wrapper .btn-group {
    display: inline-block !important;
    position: relative;
    width: auto;
    max-width: 100%;
    flex-wrap: unset;
    gap: 0;
  }

  .mw-settings-submit {
    position: sticky;
    bottom: 0;
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }

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

  .general-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  .stat-card[style*="grid-column"] {
    grid-column: span 1 !important;
  }

  .date-filters {
    width: 100%;
  }

  .table-responsive {
    border: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .pagination {
    display: flex;
    flex-wrap: wrap;
  }

  .scrolltop {
    bottom: calc(16px + env(safe-area-inset-bottom));
  }

  .pos-header .row > [class*="col-"] {
    width: 100% !important;
    float: none !important;
  }

  .pos-header .btn {
    min-height: 36px;
  }

  .pos-create-page .pos-form-container .col-md-3,
  .pos-create-page .pos-form-container .col-md-4,
  .pos-create-page .pos-form-container .col-md-6,
  .pos-create-page .pos-form-container .col-md-8 {
    width: 100% !important;
    max-width: 100% !important;
  }

  .pos-form-actions {
    position: sticky;
    bottom: 0;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
  }

  .file-input .file-preview-frame,
  .krajee-default.file-preview-frame {
    width: 120px !important;
  }
}

@media (max-width: 480px) {
  .content {
    padding: 10px 10px max(20px, env(safe-area-inset-bottom));
  }

  .action-grid,
  .general-stats-grid {
    grid-template-columns: 1fr 1fr;
  }

  .content-header h1 {
    font-size: 17px;
  }

  .small-box h3 {
    font-size: 18px !important;
  }

  .login-box {
    width: calc(100% - 20px) !important;
    margin: 12px auto !important;
  }
}

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

  .general-stats-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* Print */

@media print {
  .main-sidebar,
  .main-header,
  .main-footer,
  .no-print {
    display: none !important;
  }

  .content-wrapper,
  .content {
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
  }
}

.btn-outline-primary {
  background: var(--mw-brand) !important;
  border-color: var(--mw-brand) !important;
  color: #fff !important;
}

.btn-outline-primary:hover {
  background: var(--mw-brand-hover) !important;
  color: #fff !important;
}

.navbar.navbar-default.bg-white {
  background: var(--mw-surface) !important;
  border: 1px solid var(--mw-border);
  border-radius: var(--mw-radius);
  margin: 8px 16px;
}

.navbar-default .navbar-brand {
  color: var(--mw-text) !important;
  font-weight: 600;
}

.navbar-default .navbar-nav > li > a {
  color: var(--mw-text-2);
  font-weight: 500;
}

.navbar-default .navbar-nav > li.active > a,
.navbar-default .navbar-nav > li > a:hover {
  color: var(--mw-brand);
  background: var(--mw-brand-soft);
}

.verify-message {
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--mw-text-2);
}

.verify-success {
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--mw-success);
  font-weight: 600;
}

.table td .display_currency,
.stat-value,
.lead.text-bold {
  font-variant-numeric: tabular-nums;
}

.dataTables_processing {
  background: var(--mw-surface) !important;
  border: 1px solid var(--mw-border);
  border-radius: var(--mw-radius-sm);
  color: var(--mw-text-2);
}

.box-body > p.text-muted,
.empty-state,
td.dataTables_empty {
  color: var(--mw-text-2);
  font-size: 13px;
}

.filter-btn::before {
  display: none !important;
}

.pos-create-page .eq-height-col .product_list,
.pos-create-page .product_box {
  border: 1px solid var(--mw-border);
  background: var(--mw-surface);
}

/* Select2 hides the native <select> with .select2-hidden-accessible.
   Our .form-control { height/border/background } was overriding that and
   making required selects fail HTML5 validation without a visible error. */
select.select2-hidden-accessible,
select.form-control.select2-hidden-accessible {
  height: 1px !important;
  width: 1px !important;
  border: 0 !important;
  padding: 0 !important;
  margin: -1px !important;
  background: transparent !important;
  position: absolute !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
}

/* Full-width .scrolltop overlay sat on top of the settings submit button. */
.scrolltop {
  width: auto !important;
  height: auto !important;
  pointer-events: none;
  z-index: 90;
  left: auto !important;
  right: 16px !important;
  bottom: 72px;
}
html[dir="rtl"] .scrolltop {
  right: auto !important;
  left: 16px !important;
}
.scrolltop .scroll {
  pointer-events: auto;
  position: relative;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
}

.mw-settings-submit {
  position: sticky;
  bottom: 0;
  z-index: 50;
  background: var(--mw-bg);
  padding: 12px 0 8px;
}

div.pos-tab div.pos-tab-content.active {
  display: block !important;
}

/* -------------------------------------------------------------------------- */
/* Kill mint DataTables theme from app.css (#edfff8)                         */
/* -------------------------------------------------------------------------- */

.table-responsive > div.dataTables_wrapper,
.dataTables_wrapper,
.dataTables_wrapper table,
.dataTables_wrapper table *,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_paginate,
.dataTables_wrapper .dt-buttons,
.dataTables_wrapper .dataTables_scrollHead,
.dataTables_wrapper .dataTables_scrollBody,
.dataTables_wrapper .dataTables_scrollFoot,
.dataTables_wrapper table.dataTable,
.dataTables_wrapper table.dataTable tbody tr,
.dataTables_wrapper .table-striped > tbody > tr:nth-of-type(odd),
.dataTables_wrapper .pagination > li > a,
.dataTables_wrapper .pagination > li > span,
.dataTables_wrapper .dt-button-collection,
.dataTables_wrapper .dtr-modal .dtr-modal-display,
.bg-green-gradient {
  background-color: #fff !important;
  background-image: none !important;
  box-shadow: none !important;
  border-color: var(--mw-border) !important;
}

.dataTables_wrapper table.dataTable thead th,
.dataTables_wrapper .table > thead > tr > th,
.dataTables_wrapper .table > thead > tr > td {
  background-color: var(--mw-surface-2) !important;
  color: var(--mw-text) !important;
  border-bottom: 1px solid var(--mw-border) !important;
}

.dataTables_wrapper table.dataTable tbody tr:nth-child(even),
.dataTables_wrapper .table-striped > tbody > tr:nth-of-type(even) {
  background-color: #fafbfb !important;
}

.dataTables_wrapper table.dataTable tbody tr:hover,
.dataTables_wrapper .table-hover > tbody > tr:hover,
.dataTables_wrapper table.dataTable > tbody > tr.child:hover {
  background-color: #f3f5f6 !important;
}

.dataTables_wrapper .table > tbody > tr > td,
.dataTables_wrapper .table > tbody > tr > th,
.dataTables_wrapper table.dataTable tbody td {
  background-color: transparent !important;
  border-color: var(--mw-border) !important;
  color: var(--mw-text) !important;
}

.dataTables_wrapper .btn,
.dataTables_wrapper .dt-button,
.dataTables_wrapper .dt-buttons .btn {
  background-color: #fff !important;
  border: 1px solid var(--mw-border) !important;
  color: var(--mw-text) !important;
}

.dataTables_wrapper .btn:hover,
.dataTables_wrapper .dt-button:hover,
.dataTables_wrapper .dt-buttons .btn:hover,
.dataTables_wrapper .pagination > li > a:hover,
.dataTables_wrapper .pagination > li > span:hover {
  background-color: var(--mw-surface-2) !important;
  border-color: var(--mw-border-strong) !important;
  color: var(--mw-text) !important;
}

.dataTables_wrapper .pagination > .active > a,
.dataTables_wrapper .pagination > .active > span,
.dataTables_wrapper .pagination > .active > a:hover,
.dataTables_wrapper .pagination > .active > span:hover {
  background-color: var(--mw-brand) !important;
  border-color: var(--mw-brand) !important;
  color: #fff !important;
}

.dataTables_wrapper input[type="text"],
.dataTables_wrapper input[type="search"],
.dataTables_wrapper select {
  background-color: #fff !important;
  border: 1px solid var(--mw-border-strong) !important;
  color: var(--mw-text) !important;
  box-shadow: none !important;
}

/* -------------------------------------------------------------------------- */
/* File input / product image preview                                           */
/* -------------------------------------------------------------------------- */

.file-input {
  display: block;
  width: 100%;
  max-width: 100%;
}

.file-input .file-preview {
  border: 1px solid var(--mw-border) !important;
  border-radius: var(--mw-radius-sm) !important;
  background: var(--mw-surface-2) !important;
  padding: 8px !important;
  margin-bottom: 8px;
  max-height: 220px;
  overflow: auto;
}

.file-input .file-drop-zone {
  min-height: 0 !important;
  border: 1px dashed var(--mw-border-strong) !important;
  margin: 0 !important;
  padding: 8px !important;
}

.file-input .file-preview-frame,
.krajee-default.file-preview-frame {
  width: 160px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 6px !important;
  border: 1px solid var(--mw-border) !important;
  box-shadow: none !important;
  float: none !important;
  display: inline-block;
}

.krajee-default.file-preview-frame .kv-file-content {
  width: 148px !important;
  height: 148px !important;
}

.file-input .file-preview-image,
.krajee-default .file-preview-image {
  max-width: 148px !important;
  max-height: 148px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
}

.file-input .file-thumbnail-footer {
  height: auto !important;
}

.file-input .file-caption-main {
  position: relative;
  margin-top: 4px;
}

.file-input .file-caption {
  height: var(--mw-input-h);
  border-color: var(--mw-border-strong) !important;
  border-radius: var(--mw-radius-sm) !important;
}

.file-input .btn-file,
.file-input .fileinput-remove-button {
  height: var(--mw-input-h);
  border-radius: var(--mw-radius-sm) !important;
}

.product_form .box-body {
  overflow: visible;
}

/* Opening stock & table inputs — don't squash addons inside cells */
.table .form-control,
.table .form-control.input-sm,
.modal-body table .form-control {
  height: 34px !important;
  min-height: 34px;
  padding: 4px 8px;
}

.table .input-group,
.modal-body table .input-group,
.add_opening_stock_table .input-group {
  display: table !important;
  width: auto !important;
  min-width: 148px;
  table-layout: auto;
}

.table .input-group .form-control,
.add_opening_stock_table .input-group .form-control {
  display: table-cell !important;
  width: 90px !important;
  min-width: 90px;
  float: none !important;
}

.table .input-group-addon,
.add_opening_stock_table .input-group-addon {
  display: table-cell !important;
  width: 1% !important;
  white-space: nowrap;
  vertical-align: middle;
  padding: 4px 8px;
}

.mw-os-table-wrap,
#opening_stock_modal .table-responsive,
.modal-body .table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

.add_opening_stock_table {
  min-width: 760px;
  margin-bottom: 0;
}

.add_opening_stock_table td,
.add_opening_stock_table th {
  vertical-align: middle !important;
  white-space: nowrap;
}

.add_opening_stock_table tfoot td {
  background: var(--mw-surface) !important;
  color: var(--mw-text) !important;
}

/* Table row "خيارات": full list pinned to the top, never stretched full-screen. */
@media (max-width: 767px) {
  .dataTables_wrapper:has(.btn-group.open),
  table:has(.btn-group.open) {
    overflow: visible;
  }

  table .btn-group.open,
  td .btn-group.open,
  .dataTables_wrapper .btn-group.open {
    z-index: 2000;
  }

  table .btn-group.open::before,
  td .btn-group.open::before,
  .dataTables_wrapper .btn-group.open::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(32, 37, 43, 0.35);
    z-index: 2005;
  }

  table .dropdown-menu,
  td .dropdown-menu,
  .dataTables_wrapper table .dropdown-menu {
    position: fixed !important;
    top: max(8px, env(safe-area-inset-top)) !important;
    right: 12px !important;
    left: 12px !important;
    bottom: auto !important;
    float: none !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 16px) !important;
    overflow-x: hidden;
    overflow-y: auto !important;
    z-index: 2010 !important;
    transform: none !important;
    inset-block-end: auto !important;
    background: #fff !important;
  }

  table .dropdown-menu > li > a,
  td .dropdown-menu > li > a,
  .dataTables_wrapper table .dropdown-menu > li > a {
    color: var(--mw-text) !important;
    display: block;
    white-space: nowrap;
    padding: 10px 16px;
  }

  .modal-header,
  .modal-footer {
    flex-shrink: 0;
  }

  .modal-body {
    flex: 1 1 auto;
    min-height: 80px;
  }
}

/* Wide DataTables: keep columns readable, scroll sideways instead of wrapping. */
.dataTables_wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

.dataTables_wrapper:has(.btn-group.open) {
  overflow: visible;
}

.dataTables_wrapper table.dataTable {
  width: max-content !important;
  min-width: 100%;
  table-layout: auto !important;
}

.dataTables_wrapper table.dataTable > thead > tr > th,
.dataTables_wrapper table.dataTable > tbody > tr > td {
  white-space: nowrap;
  vertical-align: middle;
  width: auto !important;
}

.dataTables_wrapper table.dataTable > tbody > tr.child > td,
.dataTables_wrapper table.dataTable > tfoot > tr > td {
  white-space: normal;
}

.dataTables_wrapper table.dataTable img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 6px;
}

#product_table_wrapper tfoot .btn,
#product_table tfoot .btn {
  margin: 0 4px 4px 0;
}

/* App chrome: sidebar + header stay visible on desktop. */
@media (min-width: 768px) {
  body.sidebar-mini .mw-auth-bar {
    display: none !important;
  }

  body.sidebar-mini .main-header {
    display: flex !important;
    align-items: center;
    visibility: visible !important;
    position: relative !important;
    height: var(--mw-header-h) !important;
    min-height: var(--mw-header-h) !important;
    overflow: visible !important;
    z-index: 1030 !important;
  }

  body.sidebar-mini .main-header .logo {
    display: flex !important;
    align-items: center;
    float: none !important;
    flex: 0 0 230px;
    width: 230px !important;
    max-width: 230px !important;
    visibility: visible !important;
  }

  body.sidebar-mini .main-header .navbar {
    display: flex !important;
    align-items: center;
    float: none !important;
    flex: 1 1 auto;
    width: auto !important;
    margin: 0 !important;
    visibility: visible !important;
  }

  body.sidebar-mini .main-header .navbar-custom-menu {
    display: flex !important;
    align-items: center;
    float: none !important;
    margin-inline-start: auto;
    visibility: visible !important;
  }

  body.sidebar-mini .main-sidebar,
  body.sidebar-mini .left-side {
    display: block !important;
    visibility: visible !important;
    transform: none !important;
    position: absolute !important;
    top: 0 !important;
    width: 230px !important;
    min-height: 100% !important;
    padding-top: var(--mw-header-h) !important;
    z-index: 1031 !important;
  }

  body.sidebar-mini.sidebar-collapse .main-sidebar,
  body.sidebar-mini.sidebar-collapse .left-side {
    width: 50px !important;
  }

  body.sidebar-mini.sidebar-collapse .sidebar-menu > li > a {
    padding: 12px 0 !important;
    text-align: center !important;
  }

  body.sidebar-mini.sidebar-collapse .sidebar-menu > li > a > .fa,
  body.sidebar-mini.sidebar-collapse .sidebar-menu > li > a > .fas,
  body.sidebar-mini.sidebar-collapse .sidebar-menu > li > a > .far,
  body.sidebar-mini.sidebar-collapse .sidebar-menu > li > a > .fab {
    width: 100%;
    margin: 0 !important;
    float: none !important;
  }

  body.sidebar-mini.sidebar-collapse .main-header .logo {
    flex: 0 1 auto;
    flex-basis: auto;
    width: auto !important;
    max-width: 220px !important;
  }

  .sidebar-mini.sidebar-collapse .main-header .logo > .logo-lg {
    display: inline-block !important;
  }

  html[dir="rtl"] body.sidebar-mini .main-sidebar,
  html[dir="rtl"] body.sidebar-mini .left-side {
    right: 0 !important;
    left: auto !important;
  }

  html[dir="ltr"] body.sidebar-mini .main-sidebar,
  html[dir="ltr"] body.sidebar-mini .left-side {
    left: 0 !important;
    right: auto !important;
  }

  html[dir="rtl"] body.sidebar-mini:not(.sidebar-collapse) .content-wrapper,
  html[dir="rtl"] body.sidebar-mini:not(.sidebar-collapse) .right-side,
  html[dir="rtl"] body.sidebar-mini:not(.sidebar-collapse) .main-footer {
    margin-right: 230px !important;
    margin-left: 0 !important;
  }

  html[dir="ltr"] body.sidebar-mini:not(.sidebar-collapse) .content-wrapper,
  html[dir="ltr"] body.sidebar-mini:not(.sidebar-collapse) .right-side,
  html[dir="ltr"] body.sidebar-mini:not(.sidebar-collapse) .main-footer {
    margin-left: 230px !important;
    margin-right: 0 !important;
  }

  html[dir="rtl"] body.sidebar-mini.sidebar-collapse .content-wrapper,
  html[dir="rtl"] body.sidebar-mini.sidebar-collapse .right-side,
  html[dir="rtl"] body.sidebar-mini.sidebar-collapse .main-footer {
    margin-right: 50px !important;
    margin-left: 0 !important;
  }

  html[dir="ltr"] body.sidebar-mini.sidebar-collapse .content-wrapper,
  html[dir="ltr"] body.sidebar-mini.sidebar-collapse .right-side,
  html[dir="ltr"] body.sidebar-mini.sidebar-collapse .main-footer {
    margin-left: 50px !important;
    margin-right: 0 !important;
  }
}

/* Contact profile (customer / supplier view) */
.mw-contact-profile {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.mw-contact-profile__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.mw-contact-profile__name {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 600;
  color: var(--mw-text);
}

.mw-contact-profile__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--mw-text-2);
  font-size: 13px;
}

.mw-contact-profile__badge {
  display: inline-flex;
  align-items: center;
  background: var(--mw-brand-soft);
  color: var(--mw-brand);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 600;
}

.mw-contact-profile__id {
  font-variant-numeric: tabular-nums;
}

.mw-contact-profile__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
  gap: 20px;
  align-items: start;
}

.mw-contact-profile__section {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--mw-text-2);
}

.mw-contact-dl {
  margin: 0 0 18px;
}

.mw-contact-dl > div {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid var(--mw-border);
}

.mw-contact-dl dt {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--mw-text-2);
}

.mw-contact-dl dd {
  margin: 0;
  font-size: 13px;
  color: var(--mw-text);
}

.mw-contact-profile__details > strong {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--mw-text-2);
}

.mw-contact-profile__details > p {
  margin: 2px 0 8px;
}

.mw-contact-map {
  width: 100%;
  height: 320px;
  border: 1px solid var(--mw-border);
  border-radius: var(--mw-radius);
  overflow: hidden;
  background: var(--mw-surface-2);
}

.mw-contact-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.mw-contact-map--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mw-text-3);
  font-size: 13px;
}

.mw-contact-map__link {
  display: inline-block;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 500;
}

.mw-contact-money {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 4px 16px;
}

.mw-contact-money strong {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--mw-text-2);
}

.mw-contact-money p {
  margin: 2px 0 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--mw-text);
}

@media (max-width: 991px) {
  .mw-contact-profile__grid {
    grid-template-columns: 1fr;
  }

  .mw-contact-dl > div {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}