/* ============================================================
   DawaaDost OMS — chrome overrides (header + sidebar)
   Loaded after Metronic style.bundle.css so it wins the cascade.
   Scoped via the m-* classes Metronic JS already applies — we
   never touch the markup or data-* hooks, so collapse / hover
   dropdowns / minimize all keep working.
   ============================================================ */

:root {
  --dd-bg: #0f172a;
  --dd-bg-deeper: #0b1220;
  --dd-bg-hover: #1e293b;
  --dd-border: #1f2937;
  --dd-text: #e2e8f0;
  --dd-text-mute: #94a3b8;
  --dd-text-dim: #64748b;
  --dd-orange: #f97316;
  --dd-orange-deep: #ea580c;
  --dd-orange-soft: rgba(249, 115, 22, 0.12);
  --dd-orange-line: rgba(249, 115, 22, 0.25);
  --dd-card: #ffffff;
  --dd-card-border: #e2e8f0;
  --dd-page: #f8fafc;
}

body {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  -webkit-font-smoothing: antialiased;
  background: var(--dd-page) !important;
}

/* ============================================================
   1. SIDEBAR (m-aside-left)
   ============================================================ */
.m-aside-left.m-aside-left--skin-dark {
  background-color: var(--dd-bg) !important;
  border-right: 1px solid var(--dd-border) !important;
  box-shadow: 1px 0 0 rgba(255,255,255,0.02) inset !important;
}

/* Brand block (top-left, where the logo sits) — kill the white card */
.m-brand.m-brand--skin-dark {
  background: var(--dd-bg-deeper) !important;
  border-bottom: 1px solid var(--dd-border) !important;
  height: 64px !important;
}
.m-brand .m-brand__logo,
.m-brand .m-stack__item--middle.m-brand__logo {
  padding-left: 4px !important;
}

/* New brand mark — circular DD logo + clean white wordmark */
.dd-brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  text-decoration: none !important;
  padding: 4px 0 !important;
}
.dd-brand__mark {
  width: 40px !important;
  height: 40px !important;
  display: block !important;
  border-radius: 50% !important;
  box-shadow: 0 8px 20px -6px rgba(249,115,22,0.55), 0 0 0 1px rgba(255,255,255,0.04) !important;
  flex-shrink: 0;
}
.dd-brand__text {
  color: #ffffff !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  letter-spacing: -0.3px !important;
  white-space: nowrap;
  font-family: 'Poppins', sans-serif !important;
}

/* When sidebar is collapsed, hide the text */
.m-aside-left--minimize .dd-brand__text { display: none !important; }
.m-aside-left--minimize .dd-brand { gap: 0 !important; }
.m-aside-left--minimize .dd-brand__mark { width: 36px !important; height: 36px !important; }

/* Brand tools (sidebar collapse toggle) */
.m-brand.m-brand--skin-dark .m-brand__tools .m-brand__toggler span,
.m-brand.m-brand--skin-dark .m-brand__tools .m-brand__toggler span::before,
.m-brand.m-brand--skin-dark .m-brand__tools .m-brand__toggler span::after {
  background: var(--dd-text-mute) !important;
}
.m-brand.m-brand--skin-dark .m-brand__tools .m-brand__toggler:hover span,
.m-brand.m-brand--skin-dark .m-brand__tools .m-brand__toggler:hover span::before,
.m-brand.m-brand--skin-dark .m-brand__tools .m-brand__toggler:hover span::after,
.m-brand.m-brand--skin-dark .m-brand__tools .m-brand__toggler.m-brand__toggler--active span,
.m-brand.m-brand--skin-dark .m-brand__tools .m-brand__toggler.m-brand__toggler--active span::before,
.m-brand.m-brand--skin-dark .m-brand__tools .m-brand__toggler.m-brand__toggler--active span::after {
  background: var(--dd-orange) !important;
}

/* ============================================================
   2. SIDEBAR MENU (m-menu)
   ============================================================ */
.m-aside-left--skin-dark .m-aside-menu {
  padding: 12px 0 24px 0 !important;
}

/* Top-level menu items */
.m-aside-left--skin-dark .m-menu__nav > .m-menu__item {
  margin: 2px 12px !important;
  border-radius: 10px !important;
  overflow: hidden;
  transition: background 0.15s ease;
}
.m-aside-left--skin-dark .m-menu__nav > .m-menu__item > .m-menu__link {
  padding: 11px 14px !important;
  height: auto !important;
  border-radius: 10px !important;
  transition: background 0.15s ease, color 0.15s ease !important;
}
.m-aside-left--skin-dark .m-menu__nav > .m-menu__item > .m-menu__link .m-menu__link-text {
  color: var(--dd-text) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1px !important;
}
.m-aside-left--skin-dark .m-menu__nav > .m-menu__item > .m-menu__link .m-menu__link-icon {
  color: var(--dd-text-mute) !important;
  font-size: 18px !important;
  width: 26px !important;
  flex-shrink: 0;
  transition: color 0.15s ease !important;
}
.m-aside-left--skin-dark .m-menu__nav > .m-menu__item > .m-menu__link .m-menu__ver-arrow {
  color: var(--dd-text-dim) !important;
  font-size: 11px !important;
}

/* Hover state — top level */
.m-aside-left--skin-dark .m-menu__nav > .m-menu__item:not(.m-menu__item--active) > .m-menu__link:hover {
  background-color: var(--dd-bg-hover) !important;
}
.m-aside-left--skin-dark .m-menu__nav > .m-menu__item:not(.m-menu__item--active) > .m-menu__link:hover .m-menu__link-text {
  color: #ffffff !important;
}
.m-aside-left--skin-dark .m-menu__nav > .m-menu__item:not(.m-menu__item--active) > .m-menu__link:hover .m-menu__link-icon {
  color: var(--dd-orange) !important;
}

/* Active state — top level. ONLY .m-menu__item--active counts as the
   current page. .m-menu__item--open just means the dropdown is expanded
   (could be true for a non-current item) and .m-menu__item--hover is
   already covered by the :hover pseudo above. */
.m-aside-left--skin-dark .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__link {
  background-color: var(--dd-orange-soft) !important;
  position: relative;
}
.m-aside-left--skin-dark .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__link::before {
  content: '';
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 3px;
  background: var(--dd-orange);
  border-radius: 0 3px 3px 0;
}
.m-aside-left--skin-dark .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-text {
  color: #ffffff !important;
  font-weight: 600 !important;
}
.m-aside-left--skin-dark .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-icon {
  color: var(--dd-orange) !important;
}

/* Section headers ("Manage Orders", "Settings") */
.m-aside-left--skin-dark .m-menu__nav .m-menu__section {
  margin: 24px 24px 8px 24px !important;
  padding: 0 !important;
}
.m-aside-left--skin-dark .m-menu__nav .m-menu__section .m-menu__section-text {
  color: var(--dd-text-dim) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 1.4px !important;
  text-transform: uppercase !important;
}
.m-aside-left--skin-dark .m-menu__nav .m-menu__section .m-menu__section-icon { display: none !important; }

/* Submenu (dropdown) */
.m-aside-left--skin-dark .m-menu__nav .m-menu__submenu {
  background: transparent !important;
  padding-left: 12px !important;
}
.m-aside-left--skin-dark .m-menu__nav .m-menu__submenu .m-menu__subnav {
  padding: 4px 0 8px 0 !important;
}
.m-aside-left--skin-dark .m-menu__nav .m-menu__submenu .m-menu__item {
  border-radius: 8px !important;
  margin: 1px 12px 1px 18px !important;
}
.m-aside-left--skin-dark .m-menu__nav .m-menu__submenu .m-menu__item > .m-menu__link {
  padding: 8px 12px !important;
  border-radius: 8px !important;
}
.m-aside-left--skin-dark .m-menu__nav .m-menu__submenu .m-menu__item > .m-menu__link .m-menu__link-text {
  color: var(--dd-text-mute) !important;
  font-size: 12.5px !important;
  font-weight: 400 !important;
}
.m-aside-left--skin-dark .m-menu__nav .m-menu__submenu .m-menu__item > .m-menu__link .m-menu__link-bullet > span {
  background: var(--dd-text-dim) !important;
  width: 4px !important; height: 4px !important;
  border-radius: 50% !important;
}
.m-aside-left--skin-dark .m-menu__nav .m-menu__submenu .m-menu__item > .m-menu__link:hover {
  background-color: var(--dd-bg-hover) !important;
}
.m-aside-left--skin-dark .m-menu__nav .m-menu__submenu .m-menu__item > .m-menu__link:hover .m-menu__link-text {
  color: #ffffff !important;
}
.m-aside-left--skin-dark .m-menu__nav .m-menu__submenu .m-menu__item > .m-menu__link:hover .m-menu__link-bullet > span {
  background: var(--dd-orange) !important;
}
.m-aside-left--skin-dark .m-menu__nav .m-menu__submenu .m-menu__item.m-menu__item--active > .m-menu__link {
  background-color: var(--dd-orange-soft) !important;
}
.m-aside-left--skin-dark .m-menu__nav .m-menu__submenu .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-text {
  color: #ffffff !important;
  font-weight: 500 !important;
}
.m-aside-left--skin-dark .m-menu__nav .m-menu__submenu .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-bullet > span {
  background: var(--dd-orange) !important;
}

/* Submenu parent label ("Roles & User Manage" header inside dropdown) */
.m-aside-left--skin-dark .m-menu__nav .m-menu__submenu .m-menu__item.m-menu__item--parent .m-menu__link-text {
  color: var(--dd-text-dim) !important;
  font-size: 10.5px !important;
  text-transform: uppercase !important;
  letter-spacing: 1.2px !important;
  font-weight: 600 !important;
}

/* When sidebar is collapsed (m-aside-left--minimize on body) */
.m-aside-left--minimize .m-aside-left--skin-dark .m-menu__nav > .m-menu__item {
  margin: 2px 8px !important;
}

/* ============================================================
   3. HEADER (m-header)
   ============================================================ */
.m-header {
  background: #ffffff !important;
  border-bottom: 1px solid var(--dd-card-border) !important;
  box-shadow: 0 1px 0 rgba(15,23,42,0.02) !important;
  height: 64px !important;
}
.m-header .m-container { height: 64px !important; }
.m-header .m-stack { height: 100% !important; }

/* Hide the legacy "Welcome <name>" <p> — replaced by the user pill */
.m-header .dd-welcome-hide { display: none !important; }

/* ============================================================
   USER PILL — avatar (image or initials) + name + role + chev
   ============================================================ */
.m-header .m-topbar__user-profile .m-nav__link.dd-user,
.m-header .m-topbar__user-profile .m-nav__link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 5px 14px 5px 5px !important;
  background: #ffffff !important;
  border: 1px solid var(--dd-orange-line) !important;
  border-radius: 999px !important;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease !important;
  height: 48px !important;
  text-decoration: none !important;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 0 0 3px rgba(249,115,22,0.06) !important;
}
.m-header .m-topbar__user-profile .m-nav__link:hover {
  background: #fffbf8 !important;
  border-color: var(--dd-orange) !important;
  box-shadow: 0 6px 18px -8px rgba(234,88,12,0.35), 0 0 0 3px rgba(249,115,22,0.10) !important;
}

.dd-user__avatar {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, var(--dd-orange) 0%, var(--dd-orange-deep) 100%) !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  font-family: 'Poppins', sans-serif !important;
  flex-shrink: 0;
  box-shadow: 0 4px 14px -4px rgba(234,88,12,0.55), inset 0 0 0 2px rgba(255,255,255,0.18);
  text-transform: uppercase;
  overflow: hidden !important;
  position: relative;
}
/* When a real profile picture is uploaded, an <img> can be injected
   inside .dd-user__avatar — it will take over via these rules. */
.dd-user__avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 50% !important;
}
.dd-user__avatar:has(img) {
  background: var(--dd-bg) !important;
}
.dd-user__meta {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  line-height: 1.2 !important;
  gap: 2px !important;
}
.dd-user__name {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--dd-bg) !important;
  letter-spacing: -0.1px !important;
  white-space: nowrap;
  font-family: 'Poppins', sans-serif !important;
}
.dd-user__role {
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--dd-text-dim) !important;
  letter-spacing: 0.2px !important;
  white-space: nowrap;
  text-transform: uppercase;
  font-family: 'Poppins', sans-serif !important;
}
.dd-user__chev {
  font-size: 11px !important;
  color: var(--dd-text-dim) !important;
  margin-left: 2px !important;
  transition: transform 0.15s ease;
}
.m-header .m-topbar__user-profile.m-dropdown--open .dd-user__chev {
  transform: rotate(180deg);
}

/* hide the old userpic image that may still be present in some Blade templates */
.m-header .m-topbar__userpic { display: none !important; }
.m-header .m-topbar__username { display: none !important; }

/* dropdown menu — modernize the items inside */
.m-header .m-topbar__user-profile .m-dropdown__wrapper {
  margin-top: 8px !important;
}
.m-header .m-topbar__user-profile .m-dropdown__inner {
  border-radius: 14px !important;
  overflow: hidden !important;
  border: 1px solid var(--dd-card-border) !important;
  box-shadow: 0 24px 48px -12px rgba(15,23,42,0.22), 0 4px 12px -4px rgba(15,23,42,0.10) !important;
  background: #ffffff !important;
}
.m-header .m-topbar__user-profile .m-dropdown__header {
  background: linear-gradient(135deg, var(--dd-bg) 0%, #1e293b 100%) !important;
  padding: 22px 22px !important;
  border: 0 !important;
}
.m-header .m-topbar__user-profile .m-card-user__details {
  text-align: left !important;
}
.m-header .m-topbar__user-profile .m-card-user__name {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  letter-spacing: -0.2px !important;
  display: block !important;
  margin-bottom: 4px !important;
}
.m-header .m-topbar__user-profile .m-card-user__email {
  font-size: 12px !important;
  font-weight: 400 !important;
  color: #94a3b8 !important;
  letter-spacing: 0.1px !important;
}
.m-header .m-topbar__user-profile .m-dropdown__body {
  padding: 8px !important;
}
.m-header .m-topbar__user-profile .m-nav .m-nav__item .m-nav__link {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 14px !important;
  border-radius: 8px !important;
  background: transparent !important;
  border: 0 !important;
  height: auto !important;
}
.m-header .m-topbar__user-profile .m-nav .m-nav__item .m-nav__link:hover {
  background: var(--dd-page) !important;
  box-shadow: none !important;
}
.m-header .m-topbar__user-profile .m-nav .m-nav__item .m-nav__link-icon {
  color: var(--dd-text-dim) !important;
  font-size: 16px !important;
  width: 20px !important;
}
.m-header .m-topbar__user-profile .m-nav .m-nav__item .m-nav__link-text {
  font-size: 13px !important;
  color: var(--dd-bg) !important;
  font-weight: 500 !important;
}
.m-header .m-topbar__user-profile .m-nav .m-nav__item .m-nav__link:hover .m-nav__link-icon {
  color: var(--dd-orange-deep) !important;
}
.m-header .m-topbar__user-profile .m-nav__separator {
  margin: 6px 8px !important;
  border-color: var(--dd-card-border) !important;
}

/* ============================================================
   24. BOOTSTRAP-DATEPICKER — restyle to brand
   ============================================================ */
.datepicker.datepicker-dropdown,
.datepicker {
  padding: 12px !important;
  background: #ffffff !important;
  border: 1px solid var(--dd-card-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 24px 48px -12px rgba(15,23,42,0.22), 0 4px 12px -4px rgba(15,23,42,0.10) !important;
  font-family: 'Poppins', sans-serif !important;
  z-index: 2000;
}
.datepicker-dropdown::before,
.datepicker-dropdown::after { display: none !important; }

.datepicker table {
  border-collapse: separate !important;
  border-spacing: 2px !important;
  width: 100% !important;
}
.datepicker table th,
.datepicker table td {
  width: 38px !important;
  height: 38px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 500 !important;
  border: 0 !important;
  text-align: center !important;
  vertical-align: middle !important;
  background: transparent !important;
  cursor: pointer !important;
  transition: background 0.12s ease, color 0.12s ease !important;
}
.datepicker table thead tr:first-child th {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--dd-bg) !important;
  padding: 8px 4px !important;
  height: 36px !important;
}
.datepicker table thead tr:first-child th.datepicker-switch {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--dd-bg) !important;
}
.datepicker table thead tr:first-child th.datepicker-switch:hover {
  background: var(--dd-page) !important;
  color: var(--dd-orange-deep) !important;
}
.datepicker table thead tr:first-child th.prev,
.datepicker table thead tr:first-child th.next {
  font-size: 16px !important;
  color: var(--dd-text-mute) !important;
  font-weight: 400 !important;
}
.datepicker table thead tr:first-child th.prev:hover,
.datepicker table thead tr:first-child th.next:hover {
  background: var(--dd-page) !important;
  color: var(--dd-orange-deep) !important;
}
.datepicker table thead tr:nth-child(2) th.dow {
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  color: var(--dd-text-dim) !important;
  height: 28px !important;
  padding: 0 !important;
}

/* days grid */
.datepicker table tbody td.day {
  color: #334155 !important;
  background: transparent !important;
}
.datepicker table tbody td.day:hover {
  background: var(--dd-page) !important;
  color: var(--dd-bg) !important;
}
.datepicker table tbody td.day.old,
.datepicker table tbody td.day.new {
  color: #cbd5e1 !important;
}
.datepicker table tbody td.day.old:hover,
.datepicker table tbody td.day.new:hover {
  color: #94a3b8 !important;
  background: #f8fafc !important;
}
.datepicker table tbody td.day.today {
  background: var(--dd-orange-soft) !important;
  color: var(--dd-orange-deep) !important;
  font-weight: 600 !important;
}
.datepicker table tbody td.day.today:hover {
  background: rgba(249,115,22,0.18) !important;
}
.datepicker table tbody td.day.active,
.datepicker table tbody td.day.active:hover,
.datepicker table tbody td.day.active.disabled,
.datepicker table tbody td.day.active.disabled:hover,
.datepicker table tbody td.day.range-start,
.datepicker table tbody td.day.range-end {
  background: var(--dd-orange-deep) !important;
  background-image: none !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  box-shadow: 0 6px 16px -6px rgba(234,88,12,0.45) !important;
}
.datepicker table tbody td.day.range {
  background: var(--dd-orange-soft) !important;
  color: var(--dd-orange-deep) !important;
  border-radius: 0 !important;
}
.datepicker table tbody td.day.disabled,
.datepicker table tbody td.day.disabled:hover {
  color: #e2e8f0 !important;
  background: transparent !important;
  cursor: not-allowed !important;
}

/* month + year views */
.datepicker table tbody .month,
.datepicker table tbody .year,
.datepicker table tbody .decade,
.datepicker table tbody .century {
  height: 56px !important;
  width: 25% !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #334155 !important;
  border-radius: 10px !important;
}
.datepicker table tbody .month:hover,
.datepicker table tbody .year:hover {
  background: var(--dd-page) !important;
  color: var(--dd-bg) !important;
}
.datepicker table tbody .month.active,
.datepicker table tbody .year.active,
.datepicker table tbody .month.focused,
.datepicker table tbody .year.focused {
  background: var(--dd-orange-deep) !important;
  background-image: none !important;
  color: #ffffff !important;
  text-shadow: none !important;
}

/* ============================================================
   25. BOOTSTRAP-DATERANGEPICKER — same brand language
   ============================================================ */
.daterangepicker {
  border: 1px solid var(--dd-card-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 24px 48px -12px rgba(15,23,42,0.22), 0 4px 12px -4px rgba(15,23,42,0.10) !important;
  font-family: 'Poppins', sans-serif !important;
  padding: 8px !important;
  background: #ffffff !important;
}
.daterangepicker::before,
.daterangepicker::after { display: none !important; }
.daterangepicker .calendar-table {
  border: 0 !important;
  background: transparent !important;
  padding: 6px !important;
}
.daterangepicker th, .daterangepicker td {
  border-radius: 8px !important;
  border: 0 !important;
  width: 36px !important;
  height: 36px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}
.daterangepicker th { font-size: 10px !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: 0.8px; color: var(--dd-text-dim) !important; }
.daterangepicker td.available:hover { background: var(--dd-page) !important; color: var(--dd-bg) !important; }
.daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date {
  background: transparent !important;
  color: #cbd5e1 !important;
}
.daterangepicker td.in-range {
  background: var(--dd-orange-soft) !important;
  color: var(--dd-orange-deep) !important;
  border-radius: 0 !important;
}
.daterangepicker td.start-date, .daterangepicker td.end-date, .daterangepicker td.active, .daterangepicker td.active:hover {
  background: var(--dd-orange-deep) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
}
.daterangepicker td.today, .daterangepicker td.today.active {
  background: var(--dd-orange-soft) !important;
  color: var(--dd-orange-deep) !important;
}
.daterangepicker .ranges li {
  border-radius: 6px !important;
  padding: 8px 14px !important;
  margin: 2px 0 !important;
  font-size: 13px !important;
  color: #334155 !important;
}
.daterangepicker .ranges li:hover { background: var(--dd-page) !important; color: var(--dd-bg) !important; }
.daterangepicker .ranges li.active { background: var(--dd-orange-deep) !important; color: #ffffff !important; }
.daterangepicker .drp-buttons {
  border-top: 1px solid var(--dd-card-border) !important;
  padding: 12px !important;
}
.daterangepicker .drp-buttons .btn {
  font-size: 13px !important;
  padding: 8px 14px !important;
  border-radius: 8px !important;
}

/* The "Logout" button at the bottom — give it weight */
.m-header .m-topbar__user-profile .m-nav__item:last-child .m-nav__link.btn,
.m-header .m-topbar__user-profile a.btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 6px 8px 4px 8px !important;
  background: var(--dd-bg) !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 8px !important;
  padding: 11px 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  height: auto !important;
}
.m-header .m-topbar__user-profile a.btn:hover {
  background: var(--dd-orange-deep) !important;
  color: #ffffff !important;
}

/* Notification bell */
.m-header .m-topbar__notifications .m-nav__link {
  width: 40px; height: 40px;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 10px !important;
  transition: background 0.15s ease;
  margin-right: 6px;
}
.m-header .m-topbar__notifications .m-nav__link:hover { background: var(--dd-page) !important; }
.m-header .m-topbar__notifications .m-nav__link .m-nav__link-icon i { color: #475569 !important; font-size: 18px !important; }
.m-header .m-topbar__notifications .m-nav__link .m-nav__link-badge.m-badge--danger {
  background: var(--dd-orange) !important;
  border: 2px solid #ffffff !important;
}

/* Mobile toggle icons in header — kill the orange brand chrome on mobile */
.m-header .m-brand__icon i { color: #475569 !important; }

/* ============================================================
   4. SUBHEADER (page title bar inside .m-content)
   ============================================================ */
.m-subheader {
  background: transparent !important;
  border-bottom: 1px solid var(--dd-card-border) !important;
  padding: 22px 28px 18px 28px !important;
  margin-bottom: 16px !important;
}
.m-subheader .m-subheader__title,
.m-subheader h3 {
  color: var(--dd-bg) !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  letter-spacing: -0.3px !important;
  margin: 0 !important;
  border: 0 !important;
  padding: 0 !important;
}
.m-subheader .m-subheader__title--separator { border: 0 !important; }
.m-subheader .m-subheader__breadcrumbs .m-nav__link-text {
  color: var(--dd-text-dim) !important;
  font-size: 12px !important;
}

/* ============================================================
   5. CONTENT AREA
   ============================================================ */
.m-content { background: var(--dd-page) !important; padding: 0 !important; }
.m-grid--root.m-page > .m-grid--ver-desktop > .m-grid__item--fluid.m-wrapper { background: var(--dd-page) !important; }

/* Portlet (card) refinements — subtle, non-intrusive */
.m-portlet {
  border-radius: 12px !important;
  border: 1px solid var(--dd-card-border) !important;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04) !important;
  margin-bottom: 16px !important;
}
.m-portlet .m-portlet__head {
  border-bottom: 1px solid var(--dd-card-border) !important;
  padding: 16px 22px !important;
  height: auto !important;
  min-height: 0 !important;
}
.m-portlet .m-portlet__head .m-portlet__head-text,
.m-portlet .m-portlet__head h3 {
  color: var(--dd-bg) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -0.1px !important;
}

/* ============================================================
   6. PAGE LOADER (the white overlay on first paint)
   ============================================================ */
.m-page-loader { background: rgba(248,250,252,0.85) !important; }

/* ============================================================
   7. TOASTR — global rebrand
   Replaces the legacy green pill toasts with branded white cards.
   Applies to every page that uses toastr (login + all dashboard
   pages — order updates, COA actions, profile saves, etc.).
   ============================================================ */
#toast-container { padding: 0 !important; }
#toast-container > .toast {
  width: 360px !important;
  max-width: calc(100vw - 32px) !important;
  padding: 16px 18px 16px 56px !important;
  margin: 0 16px 12px 0 !important;
  background-color: #ffffff !important;
  background-image: none !important;
  color: var(--dd-bg) !important;
  border-radius: 12px !important;
  border: 1px solid var(--dd-card-border) !important;
  box-shadow: 0 20px 40px -12px rgba(15,23,42,0.18), 0 4px 12px -4px rgba(15,23,42,0.10) !important;
  opacity: 1 !important;
  position: relative !important;
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  overflow: hidden !important;
}
#toast-container > .toast::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: #94a3b8;
}
#toast-container > .toast::after {
  content: '';
  position: absolute;
  left: 18px; top: 50%;
  width: 28px; height: 28px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #f1f5f9 center/16px 16px no-repeat;
}
#toast-container > .toast .toast-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--dd-bg) !important;
  margin-bottom: 2px !important;
  letter-spacing: -0.1px !important;
}
#toast-container > .toast .toast-message {
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: #475569 !important;
  word-wrap: break-word !important;
}
#toast-container > .toast .toast-close-button {
  position: absolute !important;
  top: 10px !important; right: 12px !important;
  color: var(--dd-text-mute) !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  text-shadow: none !important;
  opacity: 1 !important;
  line-height: 1 !important;
}
#toast-container > .toast .toast-close-button:hover { color: var(--dd-bg) !important; }

#toast-container > .toast-success::before { background: #10b981 !important; }
#toast-container > .toast-success::after {
  background-color: #d1fae5 !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23059669' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") !important;
}
#toast-container > .toast-error::before { background: #ef4444 !important; }
#toast-container > .toast-error::after {
  background-color: #fee2e2 !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dc2626' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><line x1='18' y1='6' x2='6' y2='18'/><line x1='6' y1='6' x2='18' y2='18'/></svg>") !important;
}
#toast-container > .toast-info::before,
#toast-container > .toast-warning::before { background: var(--dd-orange) !important; }
#toast-container > .toast-info::after,
#toast-container > .toast-warning::after {
  background-color: #ffedd5 !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ea580c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><line x1='12' y1='8' x2='12' y2='12'/><line x1='12' y1='16' x2='12.01' y2='16'/><circle cx='12' cy='12' r='10'/></svg>") !important;
}

#toast-container.toast-top-right { top: 20px !important; right: 4px !important; }

/* ============================================================
   8. BUTTONS — kill the pill+gradient+air look, go flat modern.
   ============================================================ */
.btn,
button.btn,
a.btn,
.m-btn {
  border-radius: 8px !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  letter-spacing: 0.1px !important;
  padding: 9px 16px !important;
  line-height: 1.4 !important;
  border-width: 1px !important;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.08s ease !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
.btn.m-btn--pill,
.m-btn--pill { border-radius: 8px !important; }
.btn.m-btn--air,
.m-btn--air { box-shadow: none !important; }
.btn.btn-lg, .btn-lg { padding: 11px 18px !important; font-size: 14px !important; }
.btn.btn-sm, .btn-sm { padding: 6px 12px !important; font-size: 12px !important; }
.btn.btn-xs, .btn-xs { padding: 4px 9px !important; font-size: 11px !important; }

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

/* primary / brand action — orange */
.btn-primary,
.btn.btn-primary,
.btn-info,
.btn.btn-info,
.btn-purple,
.btn.btn-purple,
.btn-pink,
.btn.btn-pink {
  background: var(--dd-orange-deep) !important;
  border-color: var(--dd-orange-deep) !important;
  color: #ffffff !important;
}
.btn-primary:hover, .btn.btn-primary:hover,
.btn-info:hover, .btn.btn-info:hover,
.btn-purple:hover, .btn.btn-purple:hover,
.btn-pink:hover, .btn.btn-pink:hover {
  background: #c2410c !important;
  border-color: #c2410c !important;
  color: #ffffff !important;
  box-shadow: 0 6px 16px -6px rgba(234,88,12,0.45) !important;
}

/* success — keep green but tame it */
.btn-success,
.btn.btn-success {
  background: #10b981 !important;
  border-color: #10b981 !important;
  color: #ffffff !important;
}
.btn-success:hover, .btn.btn-success:hover {
  background: #059669 !important;
  border-color: #059669 !important;
  color: #ffffff !important;
  box-shadow: 0 6px 16px -6px rgba(5,150,105,0.4) !important;
}

/* danger / warning */
.btn-danger,
.btn.btn-danger {
  background: #ef4444 !important;
  border-color: #ef4444 !important;
  color: #ffffff !important;
}
.btn-danger:hover, .btn.btn-danger:hover {
  background: #dc2626 !important;
  border-color: #dc2626 !important;
  box-shadow: 0 6px 16px -6px rgba(220,38,38,0.4) !important;
}

.btn-warning,
.btn.btn-warning {
  background: var(--dd-orange) !important;
  border-color: var(--dd-orange) !important;
  color: #ffffff !important;
}
.btn-warning:hover, .btn.btn-warning:hover {
  background: var(--dd-orange-deep) !important;
  border-color: var(--dd-orange-deep) !important;
}

/* secondary / cancel — ghost */
.btn-secondary,
.btn.btn-secondary,
.btn-inverse,
.btn.btn-inverse,
.btn-default,
.btn.btn-default {
  background: #ffffff !important;
  border-color: var(--dd-card-border) !important;
  color: #475569 !important;
}
.btn-secondary:hover, .btn.btn-secondary:hover,
.btn-inverse:hover, .btn.btn-inverse:hover,
.btn-default:hover, .btn.btn-default:hover {
  background: var(--dd-page) !important;
  color: var(--dd-bg) !important;
  border-color: #cbd5e1 !important;
}

/* outline variants */
.btn-outline-primary, .btn.btn-outline-primary {
  background: transparent !important;
  color: var(--dd-orange-deep) !important;
  border-color: var(--dd-orange-deep) !important;
}
.btn-outline-primary:hover, .btn.btn-outline-primary:hover {
  background: var(--dd-orange-deep) !important;
  color: #ffffff !important;
}
.btn-outline-secondary, .btn.btn-outline-secondary,
.m-btn--outline-2x.btn-secondary, .m-btn--outline-2x.btn-inverse {
  background: transparent !important;
  color: #475569 !important;
  border-color: var(--dd-card-border) !important;
}
.btn-outline-secondary:hover, .btn.btn-outline-secondary:hover {
  background: var(--dd-page) !important;
  color: var(--dd-bg) !important;
  border-color: #cbd5e1 !important;
}

/* icon-only round buttons (used in subheader for "back" etc.) */
.btn.m-btn--icon-only.m-btn--pill {
  width: 38px !important;
  height: 38px !important;
  padding: 0 !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* button groups inside subheader actions */
.m-subheader .btn {
  margin-left: 6px !important;
}

/* ============================================================
   9. DATATABLES + generic tables
   ============================================================ */
table.dataTable,
.m-portlet table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100% !important;
  font-size: 13px !important;
  color: var(--dd-bg) !important;
}
table.dataTable thead th,
.m-portlet table thead th {
  background: var(--dd-page) !important;
  color: var(--dd-text-dim) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  padding: 14px 16px !important;
  border-bottom: 1px solid var(--dd-card-border) !important;
  border-top: 1px solid var(--dd-card-border) !important;
}
table.dataTable thead th:first-child { border-top-left-radius: 8px; border-left: 1px solid var(--dd-card-border) !important; }
table.dataTable thead th:last-child  { border-top-right-radius: 8px; border-right: 1px solid var(--dd-card-border) !important; }

table.dataTable tbody td,
.m-portlet table tbody td {
  padding: 14px 16px !important;
  border-top: 1px solid #f1f5f9 !important;
  background: #ffffff !important;
  vertical-align: middle !important;
  font-size: 13px !important;
  color: #334155 !important;
}
table.dataTable tbody tr:hover td,
.m-portlet table tbody tr:hover td {
  background: #fafbfc !important;
}
table.dataTable tbody tr.odd td { background: #ffffff !important; }
table.dataTable tbody tr.even td { background: #fafbfc !important; }
table.dataTable tbody tr.odd:hover td,
table.dataTable tbody tr.even:hover td { background: #f1f5f9 !important; }

/* DataTables sort arrows */
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
  cursor: pointer !important;
  position: relative !important;
}
table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::after {
  display: none !important;
}

/* DataTables wrapper bits — search, length, info, pagination */
.dataTables_wrapper { padding: 0 !important; }
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
  padding: 12px 0 !important;
  color: var(--dd-text-dim) !important;
  font-size: 12px !important;
}
.dataTables_wrapper .dataTables_length select {
  height: 34px !important;
  padding: 0 26px 0 10px !important;
  border: 1px solid var(--dd-card-border) !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  font-size: 13px !important;
  color: var(--dd-bg) !important;
  margin: 0 6px !important;
}
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_filter input[type="search"] {
  height: 38px !important;
  padding: 0 14px !important;
  border: 1px solid var(--dd-card-border) !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  font-size: 13px !important;
  color: var(--dd-bg) !important;
  margin-left: 8px !important;
  min-width: 220px !important;
  box-shadow: none !important;
}
.dataTables_wrapper .dataTables_filter input:focus {
  outline: none !important;
  border-color: var(--dd-orange) !important;
  box-shadow: 0 0 0 3px var(--dd-orange-soft) !important;
}
.dataTables_wrapper .dataTables_info {
  padding: 14px 0 !important;
  font-size: 12px !important;
  color: var(--dd-text-dim) !important;
}
.dataTables_wrapper .dataTables_paginate {
  padding: 14px 0 !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 34px !important;
  height: 34px !important;
  padding: 0 12px !important;
  margin: 0 2px !important;
  border: 1px solid var(--dd-card-border) !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #475569 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--dd-page) !important;
  color: var(--dd-bg) !important;
  border-color: #cbd5e1 !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--dd-orange-deep) !important;
  color: #ffffff !important;
  border-color: var(--dd-orange-deep) !important;
  box-shadow: 0 6px 14px -6px rgba(234,88,12,0.45) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  background: #ffffff !important;
  color: #cbd5e1 !important;
  border-color: var(--dd-card-border) !important;
  cursor: not-allowed !important;
}

/* ============================================================
   10. FORM CONTROLS
   ============================================================ */
.form-control,
input.form-control,
select.form-control,
textarea.form-control,
.m-input {
  height: 40px !important;
  padding: 0 14px !important;
  font-size: 13px !important;
  color: var(--dd-bg) !important;
  background: #ffffff !important;
  border: 1px solid var(--dd-card-border) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  font-family: 'Poppins', sans-serif !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
textarea.form-control { height: auto !important; padding: 10px 14px !important; min-height: 88px !important; }
.form-control::placeholder { color: #94a3b8 !important; }
.form-control:hover { border-color: #cbd5e1 !important; }
.form-control:focus,
.form-control.focus {
  outline: none !important;
  border-color: var(--dd-orange) !important;
  box-shadow: 0 0 0 3px var(--dd-orange-soft) !important;
  background: #ffffff !important;
}
.form-control[disabled],
.form-control:disabled {
  background: var(--dd-page) !important;
  color: var(--dd-text-dim) !important;
  cursor: not-allowed !important;
}

label.control-label,
label.form-label,
.form-group label {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #334155 !important;
  margin-bottom: 6px !important;
  letter-spacing: 0 !important;
}
small.form-control-feedback,
.form-text {
  font-size: 12px !important;
  color: var(--dd-text-dim) !important;
  margin-top: 6px !important;
  font-weight: 400 !important;
}

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

/* ============================================================
   11. SELECT2 DROPDOWNS
   ============================================================ */
.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple {
  height: 40px !important;
  padding: 0 !important;
  border: 1px solid var(--dd-card-border) !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 13px !important;
  box-shadow: none !important;
}
.select2-container .select2-selection--single .select2-selection__rendered {
  line-height: 38px !important;
  padding: 0 32px 0 14px !important;
  color: var(--dd-bg) !important;
  font-size: 13px !important;
}
.select2-container .select2-selection--single .select2-selection__placeholder {
  color: #94a3b8 !important;
}
.select2-container .select2-selection--single .select2-selection__arrow {
  height: 38px !important;
  right: 8px !important;
}
.select2-container--default.select2-container--open .select2-selection,
.select2-container--default.select2-container--focus .select2-selection {
  border-color: var(--dd-orange) !important;
  box-shadow: 0 0 0 3px var(--dd-orange-soft) !important;
}
.select2-dropdown {
  border: 1px solid var(--dd-card-border) !important;
  border-radius: 10px !important;
  box-shadow: 0 12px 32px -8px rgba(15,23,42,0.18) !important;
  overflow: hidden !important;
}
.select2-results__option {
  padding: 10px 14px !important;
  font-size: 13px !important;
  color: var(--dd-bg) !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted {
  background: var(--dd-orange-soft) !important;
  color: var(--dd-orange-deep) !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid var(--dd-card-border) !important;
  border-radius: 6px !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
  outline: none !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
  border-color: var(--dd-orange) !important;
}

/* ============================================================
   12. BADGES & status pills
   ============================================================ */
.m-badge,
.badge {
  display: inline-flex !important;
  align-items: center !important;
  padding: 4px 10px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.4px !important;
  border-radius: 999px !important;
  line-height: 1.4 !important;
  text-transform: uppercase !important;
}
.m-badge--success, .badge-success {
  background: #d1fae5 !important;
  color: #047857 !important;
}
.m-badge--danger, .badge-danger {
  background: #fee2e2 !important;
  color: #b91c1c !important;
}
.m-badge--warning, .badge-warning {
  background: #ffedd5 !important;
  color: #c2410c !important;
}
.m-badge--info, .badge-info {
  background: #dbeafe !important;
  color: #1d4ed8 !important;
}
.m-badge--brand, .badge-primary {
  background: var(--dd-orange-soft) !important;
  color: var(--dd-orange-deep) !important;
}
.m-badge--metal, .badge-secondary {
  background: var(--dd-page) !important;
  color: #475569 !important;
}
.m-badge--wide { padding: 4px 12px !important; }

/* ============================================================
   13. PORTLET BODY refinements
   ============================================================ */
.m-portlet .m-portlet__body { padding: 22px !important; }
.m-portlet .m-portlet__foot {
  padding: 18px 22px !important;
  border-top: 1px solid var(--dd-card-border) !important;
  background: var(--dd-page) !important;
}

/* ============================================================
   14. PAGE LOADER spinner — orange brand
   ============================================================ */
.m-loader.m-loader--info::before,
.m-loader.m-loader--brand::before,
.m-loader::before {
  border-top-color: var(--dd-orange) !important;
}

/* ============================================================
   15. MODALS
   ============================================================ */
.modal-content {
  border: 0 !important;
  border-radius: 14px !important;
  box-shadow: 0 30px 60px -12px rgba(15,23,42,0.25) !important;
}
.modal-header {
  padding: 20px 24px !important;
  border-bottom: 1px solid var(--dd-card-border) !important;
}
.modal-header .modal-title,
.modal-header h5,
.modal-header h4 {
  font-size: 17px !important;
  font-weight: 600 !important;
  color: var(--dd-bg) !important;
  letter-spacing: -0.2px !important;
}
.modal-header .close {
  font-size: 22px !important;
  color: var(--dd-text-mute) !important;
  font-weight: 400 !important;
  text-shadow: none !important;
  opacity: 1 !important;
}
.modal-header .close:hover { color: var(--dd-bg) !important; }
.modal-body { padding: 24px !important; font-size: 13px !important; color: #334155 !important; }
.modal-footer {
  padding: 16px 24px !important;
  border-top: 1px solid var(--dd-card-border) !important;
  background: var(--dd-page) !important;
}

/* ============================================================
   16. SUBHEADER buttons + separator
   ============================================================ */
.m-subheader .m-subheader__title--separator::after { display: none !important; }
.m-subheader .d-flex { gap: 8px; }
.m-subheader .btn { margin: 0 !important; }

/* ============================================================
   17. FOOTER
   ============================================================ */
.m-footer {
  background: #ffffff !important;
  border-top: 1px solid var(--dd-card-border) !important;
  padding: 14px 28px !important;
}
.m-footer .m-footer__copyright,
.m-footer .m-nav__link-text {
  font-size: 11px !important;
  color: var(--dd-text-dim) !important;
  font-weight: 400 !important;
}

/* ============================================================
   18. SCROLL TOP button
   ============================================================ */
.m-scroll-top {
  background: var(--dd-bg) !important;
  border-radius: 12px !important;
  width: 42px !important;
  height: 42px !important;
  box-shadow: 0 8px 24px -6px rgba(15,23,42,0.3) !important;
}
.m-scroll-top i { color: var(--dd-orange) !important; }

/* ============================================================
   19. CHECKBOXES + RADIOS
   ============================================================ */
.m-checkbox > input[type="checkbox"],
.m-checkbox > input[type="radio"] {
  accent-color: var(--dd-orange-deep) !important;
}

/* ============================================================
   20. INPUT GROUP / addons
   ============================================================ */
.input-group-addon {
  background: var(--dd-page) !important;
  border: 1px solid var(--dd-card-border) !important;
  color: var(--dd-text-dim) !important;
  font-size: 13px !important;
}
.input-group-text {
  background: var(--dd-page) !important;
  border-color: var(--dd-card-border) !important;
  color: var(--dd-text-dim) !important;
  font-size: 13px !important;
  border-radius: 8px !important;
}

/* ============================================================
   21. DASHBOARD TILES (m-widget24)
   ============================================================ */
.m-widget24 {
  background: #ffffff !important;
  border: 1px solid var(--dd-card-border) !important;
  border-radius: 12px !important;
  padding: 0 !important;
  margin-bottom: 16px !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease !important;
  overflow: hidden !important;
  position: relative !important;
}
.m-widget24:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -12px rgba(15,23,42,0.16);
  border-color: #cbd5e1 !important;
}
.m-widget24 .m-widget24__item { padding: 22px 22px 18px 22px !important; }
.m-widget24 .m-widget24__item > a { color: inherit !important; text-decoration: none !important; display: block !important; }

.m-widget24 .m-widget24__title {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  color: var(--dd-text-dim) !important;
  margin: 0 0 14px 0 !important;
  padding: 0 !important;
  line-height: 1.3 !important;
}
.m-widget24 .m-widget24__title a {
  color: var(--dd-text-dim) !important;
  text-decoration: none !important;
}
.m-widget24 .m-widget24__title a:hover { color: var(--dd-orange-deep) !important; }

.m-widget24 .m-widget24__stats {
  font-size: 26px !important;
  font-weight: 600 !important;
  color: var(--dd-bg) !important;
  letter-spacing: -0.5px !important;
  line-height: 1.2 !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* kill the m--font-* color modifiers — number stays dark; the bar carries the color */
.m-widget24 .m-widget24__stats.m--font-info,
.m-widget24 .m-widget24__stats.m--font-success,
.m-widget24 .m-widget24__stats.m--font-danger,
.m-widget24 .m-widget24__stats.m--font-warning,
.m-widget24 .m-widget24__stats.m--font-brand {
  color: var(--dd-bg) !important;
}
.m-widget24 .m-widget24__stats .pull-left,
.m-widget24 .m-widget24__stats .pull-right { float: none !important; }
.m-widget24 .m-widget24__stats .pull-left { display: inline-block; }
.m-widget24 .m-widget24__stats > .clearfix { display: flex !important; align-items: baseline; justify-content: flex-start; gap: 10px; }
.m-widget24 .m-widget24__stats .la-rupee {
  font-size: 22px !important;
  margin-right: 2px;
  color: var(--dd-text-mute) !important;
}

/* "View More" link inside tile */
.m-widget24 .m-widget24__stats a {
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--dd-orange-deep) !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  margin-left: auto !important;
  padding: 0 !important;
}
.m-widget24 .m-widget24__stats a::after {
  content: '→';
  font-size: 12px;
  transition: transform 0.15s ease;
}
.m-widget24 .m-widget24__stats a:hover { color: var(--dd-orange) !important; }
.m-widget24 .m-widget24__stats a:hover::after { transform: translateX(2px); }

.m-widget24 .m-widget24__desc {
  font-size: 12px !important;
  color: var(--dd-text-dim) !important;
  margin-top: 4px !important;
  display: block !important;
}

/* tile bottom progress bar — flatten to a 3px accent strip */
.m-widget24 .m--space-10 { display: none !important; }
.m-widget24 .progress {
  height: 3px !important;
  margin: 8px 0 0 0 !important;
  background: #f1f5f9 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  box-shadow: none !important;
}
.m-widget24 .progress-bar { border-radius: 0 !important; }
.m-widget24 .progress-bar.m--bg-info { background: #3b82f6 !important; }
.m-widget24 .progress-bar.m--bg-success { background: #10b981 !important; }
.m-widget24 .progress-bar.m--bg-danger { background: #ef4444 !important; }
.m-widget24 .progress-bar.m--bg-warning { background: var(--dd-orange) !important; }
.m-widget24 .progress-bar.m--bg-brand { background: var(--dd-orange-deep) !important; }

/* trim the trailing <br> spacing */
.m-widget24 br { display: none !important; }

/* ============================================================
   22. DASHBOARD COLORED SECTION HEADS — tame the rainbow
   The dashboard has section bars in red/blue/green/purple — these
   are bootstrap .card-header / .bg-danger etc. blocks that make
   the page look like a circus. Soften to brand-aware tones.
   ============================================================ */
.m-portlet__head.bg-danger,
.m-portlet__head.m--bg-danger,
.m-portlet__head.bg-info,
.m-portlet__head.m--bg-info,
.m-portlet__head.bg-success,
.m-portlet__head.m--bg-success,
.m-portlet__head.bg-warning,
.m-portlet__head.m--bg-warning,
.m-portlet__head.bg-primary,
.m-portlet__head.m--bg-primary,
.m-portlet__head.bg-purple,
.m-portlet__head.m--bg-purple {
  background: #ffffff !important;
  border-bottom: 1px solid var(--dd-card-border) !important;
}
.m-portlet__head.bg-danger .m-portlet__head-text,
.m-portlet__head.m--bg-danger .m-portlet__head-text { color: #b91c1c !important; }
.m-portlet__head.bg-info .m-portlet__head-text,
.m-portlet__head.m--bg-info .m-portlet__head-text { color: #1d4ed8 !important; }
.m-portlet__head.bg-success .m-portlet__head-text,
.m-portlet__head.m--bg-success .m-portlet__head-text { color: #047857 !important; }
.m-portlet__head.bg-warning .m-portlet__head-text,
.m-portlet__head.m--bg-warning .m-portlet__head-text { color: #c2410c !important; }
.m-portlet__head.bg-purple .m-portlet__head-text { color: #6d28d9 !important; }

/* Add a colored accent bar on the left of each themed portlet */
.m-portlet__head.bg-danger,
.m-portlet__head.m--bg-danger { box-shadow: inset 3px 0 0 #ef4444 !important; }
.m-portlet__head.bg-info,
.m-portlet__head.m--bg-info { box-shadow: inset 3px 0 0 #3b82f6 !important; }
.m-portlet__head.bg-success,
.m-portlet__head.m--bg-success { box-shadow: inset 3px 0 0 #10b981 !important; }
.m-portlet__head.bg-warning,
.m-portlet__head.m--bg-warning { box-shadow: inset 3px 0 0 var(--dd-orange) !important; }
.m-portlet__head.bg-purple { box-shadow: inset 3px 0 0 #8b5cf6 !important; }

/* ============================================================
   23. DASHBOARD WIDGET17 colored chart wrappers — kill the flood
   These were giant colored blocks at the top of each section
   (Return & Refund / Store Processing / etc.). Tone to a clean
   white card with a 3px colored top border + colored title.
   ============================================================ */
.m-widget17__visual.m-widget17__visual--chart {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-top-left-radius: 12px !important;
  border-top-right-radius: 12px !important;
  border-bottom: 1px solid var(--dd-card-border) !important;
}
/* color comes from a 4px top accent bar */
.m-widget17__visual.m-widget17__visual--chart.m--bg-danger { box-shadow: inset 0 4px 0 #ef4444 !important; }
.m-widget17__visual.m-widget17__visual--chart.m--bg-info { box-shadow: inset 0 4px 0 #3b82f6 !important; }
.m-widget17__visual.m-widget17__visual--chart.m--bg-success { box-shadow: inset 0 4px 0 #10b981 !important; }
.m-widget17__visual.m-widget17__visual--chart.m--bg-warning { box-shadow: inset 0 4px 0 var(--dd-orange) !important; }
.m-widget17__visual.m-widget17__visual--chart.m--bg-primary { box-shadow: inset 0 4px 0 #8b5cf6 !important; }
.m-widget17__visual.m-widget17__visual--chart.m--bg-brand { box-shadow: inset 0 4px 0 var(--dd-orange-deep) !important; }

/* The portlet head sitting above these charts had m--font-light (white)
   text — switch back to dark since the bg is now white. */
.m-portlet__head .m-portlet__head-text.m--font-light {
  color: var(--dd-bg) !important;
}
.m-portlet__head .m-portlet__head-text.m--font-light i {
  color: var(--dd-orange) !important;
  margin-right: 6px !important;
}

/* m-widget17 sub-items (the icon + label rows under the chart) */
.m-widget17__items .m-widget17__item {
  padding: 14px 18px !important;
  border-bottom: 1px solid #f1f5f9 !important;
}
.m-widget17__items .m-widget17__item:last-child { border-bottom: 0 !important; }
.m-widget17__items .m-widget17__item .m-widget17__icon i {
  font-size: 18px !important;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--dd-page);
  border-radius: 8px;
}
.m-widget17__items .m-widget17__item .m-widget17__subtitle {
  font-size: 12px !important;
  color: #475569 !important;
  font-weight: 500 !important;
}
.m-widget17__items .m-widget17__item .m-widget17__desc .lead {
  font-size: 17px !important;
  font-weight: 600 !important;
  color: var(--dd-bg) !important;
}
.m-widget17__items .m-widget17__item .m-widget17__desc span:not(.lead) {
  font-size: 11px !important;
  color: var(--dd-text-dim) !important;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.m-widget17__items .m-widget17__item .info_view {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--dd-text-dim) !important;
}

/* ============================================================
   INVOICE PRINT RESET — undo all dd-chrome overrides inside
   .dd-invoice-print so the customer GST invoice uses its own
   self-contained Montserrat CSS (inline in invoiceshow.blade).
   Must come LAST in this file so it wins the cascade.
   ============================================================ */
.dd-invoice-print,
.dd-invoice-print * {
  font-family: 'Montserrat', sans-serif !important;
}
.dd-invoice-print {
  padding: 16px !important;
  background-color: #f6f6f6 !important;
}
.dd-invoice-print table {
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  background-color: #fff !important;
  font-size: 12px !important;
  color: #000 !important;
}
.dd-invoice-print table td,
.dd-invoice-print table th {
  padding: 8px !important;
  font-size: 12px !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-weight: normal !important;
  color: #000 !important;
  background: transparent !important;
  border-radius: 0 !important;
  vertical-align: top !important;
  text-align: center !important;
}
.dd-invoice-print table thead tr {
  background-color: #f2f2f2 !important;
  border: 1px solid #111 !important;
}
.dd-invoice-print table thead th {
  font-weight: bold !important;
  font-size: 12px !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  color: #000 !important;
  background-color: #f2f2f2 !important;
  border: 1px solid #dee2e6 !important;
  height: auto !important;
}
.dd-invoice-print table tbody td {
  border: 1px solid #dee2e6 !important;
  background: #fff !important;
}
.dd-invoice-print table tbody tr:hover td {
  background: #fff !important;
}
.dd-invoice-print .table-bordered td,
.dd-invoice-print .table-bordered th {
  border: 1px solid #dee2e6 !important;
}
.dd-invoice-print h1, .dd-invoice-print h2,
.dd-invoice-print h3, .dd-invoice-print h4,
.dd-invoice-print h5, .dd-invoice-print h6 {
  color: #000 !important;
  font-family: 'Montserrat', sans-serif !important;
  letter-spacing: normal !important;
  margin: 0 !important;
  padding: 0 !important;
}
.dd-invoice-print h2 {
  font-size: 2em !important;
  line-height: 26px !important;
  padding: 17px 0 !important;
}
.dd-invoice-print h3 { font-size: 1.17em !important; }
.dd-invoice-print h4 { font-size: 1em !important; }
.dd-invoice-print h5 { font-size: 0.83em !important; }
.dd-invoice-print p {
  font-family: 'Montserrat', sans-serif !important;
  color: #000 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.dd-invoice-print .address {
  text-align: left !important;
  line-height: 17px !important;
}
.dd-invoice-print .text-left { text-align: left !important; }
.dd-invoice-print .text-right { text-align: right !important; }
.dd-invoice-print .text-center { text-align: center !important; }
.dd-invoice-print .border-0 { border: 0 !important; }
.dd-invoice-print .border-0 td { border: 0 !important; padding: 0 !important; }
.dd-invoice-print .border-r-0 { border-right: 0 !important; }
.dd-invoice-print .border-l-0 { border-left: 0 !important; }
.dd-invoice-print .border-bottom-0 { border-bottom: 0 !important; }
.dd-invoice-print .border-r-1 { border-right: 1px solid #dee2e6 !important; }
.dd-invoice-print .pr-1 { padding-right: 1em !important; }
.dd-invoice-print .v-align-b { vertical-align: bottom !important; }
.dd-invoice-print .padding-0 { padding: 0 !important; }
.dd-invoice-print img { border-radius: 0 !important; box-shadow: none !important; }